Fixed a bug that was preventing the configured schedule from displaying when editing a monitor that was created through backend commands.

cypress/fixtures/sample_cron_expression_query_level_monitor.json

@@ -0,0 +1,25 @@
+{
+  "name": "sample_cron_expression_query_level_monitor",
+  "enabled": true,
+  "schedule": {
+    "cron": {
+      "expression": "30 11 * * 1-5",
+      "timezone": "US/Pacific"
+    }
+  },
+  "inputs": [
+    {
+      "search": {
+        "indices": ["*"],
+        "query": {
+          "query": {
+            "match_all": {}
+          }
+        }
+      }
+    }
+  ],
+  "ui_metadata": {
+    "schedule": {}
+  }
+}

cypress/fixtures/sample_days_interval_query_level_monitor.json

@@ -0,0 +1,25 @@
+{
+  "name": "sample_days_interval_query_level_monitor",
+  "enabled": true,
+  "schedule": {
+    "period": {
+      "interval": "7",
+      "unit": "DAYS"
+    }
+  },
+  "inputs": [
+    {
+      "search": {
+        "indices": ["*"],
+        "query": {
+          "query": {
+            "match_all": {}
+          }
+        }
+      }
+    }
+  ],
+  "ui_metadata": {
+    "schedule": {}
+  }
+}

cypress/integration/query_level_monitor_spec.js

@@ -7,10 +7,14 @@ import { PLUGIN_NAME } from '../support/constants';
 import sampleQueryLevelMonitor from '../fixtures/sample_query_level_monitor';
 import sampleQueryLevelMonitorWithAlwaysTrueTrigger from '../fixtures/sample_query_level_monitor_with_always_true_trigger';
 import sampleDestination from '../fixtures/sample_destination_custom_webhook.json';
+import sampleDaysIntervalQueryLevelMonitor from '../fixtures/sample_days_interval_query_level_monitor.json';
+import sampleCronExpressionQueryLevelMonitor from '../fixtures/sample_cron_expression_query_level_monitor.json';
 
 const SAMPLE_MONITOR = 'sample_query_level_monitor';
 const UPDATED_MONITOR = 'updated_query_level_monitor';
 const SAMPLE_MONITOR_WITH_ANOTHER_NAME = 'sample_query_level_monitor_with_always_true_trigger';
+const SAMPLE_DAYS_INTERVAL_MONITOR = 'sample_days_interval_query_level_monitor';
+const SAMPLE_CRON_EXPRESSION_MONITOR = 'sample_cron_expression_query_level_monitor';
 const SAMPLE_TRIGGER = 'sample_trigger';
 const SAMPLE_ACTION = 'sample_action';
 
@@ -173,6 +177,63 @@ describe('Query-Level Monitors', () => {
     });
   });
 
+  describe('schedule component displays as intended', () => {
+    before(() => {
+      cy.deleteAllMonitors();
+    });
+
+    it('for an interval schedule', () => {
+      // Create the test monitor
+      cy.createMonitor(sampleDaysIntervalQueryLevelMonitor);
+
+      // Confirm we can see the created monitors in the list
+      cy.get(`input[type="search"]`).focus().type(SAMPLE_DAYS_INTERVAL_MONITOR);
+      cy.contains(SAMPLE_DAYS_INTERVAL_MONITOR, { timeout: 20000 });
+
+      // Select the existing monitor
+      cy.get('a').contains(SAMPLE_DAYS_INTERVAL_MONITOR).click({ force: true });
+
+      // Click Edit button
+      cy.contains('Edit').click({ force: true });
+
+      // Wait for input to load and then check the Schedule component
+      cy.get('[data-test-subj="frequency_field"]', { timeout: 20000 }).contains('By interval');
+
+      cy.get('[data-test-subj="interval_interval_field"]', { timeout: 20000 }).should(
+        'have.value',
+        7
+      );
+
+      cy.get('[data-test-subj="interval_unit_field"]', { timeout: 20000 }).contains('Days');
+    });
+
+    it('for a cron expression schedule', () => {
+      // Create the test monitor
+      cy.createMonitor(sampleCronExpressionQueryLevelMonitor);
+
+      // Confirm we can see the created monitors in the list
+      cy.get(`input[type="search"]`).focus().type(SAMPLE_CRON_EXPRESSION_MONITOR);
+      cy.contains(SAMPLE_CRON_EXPRESSION_MONITOR, { timeout: 20000 });
+
+      // Select the existing monitor
+      cy.get('a').contains(SAMPLE_CRON_EXPRESSION_MONITOR).click({ force: true });
+
+      // Click Edit button
+      cy.contains('Edit').click({ force: true });
+
+      // Wait for input to load and then check the Schedule component
+      cy.get('[data-test-subj="frequency_field"]', { timeout: 20000 }).contains(
+        'Custom cron expression'
+      );
+
+      cy.get('[data-test-subj="customCron_cronExpression_field"]', { timeout: 20000 }).contains(
+        '30 11 * * 1-5'
+      );
+
+      cy.get('[data-test-subj="timezoneComboBox"]', { timeout: 20000 }).contains('US/Pacific');
+    });
+  });
+
   after(() => {
     // Delete all existing monitors and destinations
     cy.deleteAllMonitors();

public/pages/CreateMonitor/components/Schedule/Frequencies/CustomCron.js

@@ -32,6 +32,7 @@ const CustomCron = () => (
           error: hasError,
           style: { marginTop: '0px' },
         }}
+        inputProps={{ 'data-test-subj': 'customCron_cronExpression_field' }}
       />
     </EuiFlexItem>
     <EuiFlexItem style={{ marginTop: '0px' }}>

public/pages/CreateMonitor/components/Schedule/Frequencies/Frequency.js

@@ -27,6 +27,7 @@ const Frequency = () => (
     inputProps={{
       options: frequencies,
       isInvalid,
+      'data-test-subj': 'frequency_field',
     }}
   />
 );

public/pages/CreateMonitor/components/Schedule/Frequencies/Interval.js

@@ -32,7 +32,11 @@ const Interval = () => (
           isInvalid,
           error: hasError,
         }}
-        inputProps={{ icon: 'clock', min: 1 }}
+        inputProps={{
+          icon: 'clock',
+          min: 1,
+          'data-test-subj': 'interval_interval_field',
+        }}
       />
     </EuiFlexItem>
     <EuiFlexItem>
@@ -45,7 +49,10 @@ const Interval = () => (
           isInvalid,
           error: hasError,
         }}
-        inputProps={{ options: unitOptions }}
+        inputProps={{
+          options: unitOptions,
+          'data-test-subj': 'interval_unit_field',
+        }}
       />
     </EuiFlexItem>
   </EuiFlexGroup>

public/pages/CreateMonitor/components/Schedule/Frequencies/__snapshots__/Frequencies.test.js.snap

@@ -30,6 +30,7 @@ exports[`Frequencies renders CustomCron 1`] = `
       >
         <textarea
           class="euiTextArea euiTextArea--resizeVertical"
+          data-test-subj="customCron_cronExpression_field"
           name="cronExpression"
           rows="6"
         >
@@ -163,6 +164,7 @@ exports[`Frequencies renders Frequency 1`] = `
       >
         <select
           class="euiSelect"
+          data-test-subj="frequency_field"
           id="frequency"
           name="frequency"
         >
@@ -243,6 +245,7 @@ exports[`Frequencies renders FrequencyPicker 1`] = `
           >
             <input
               class="euiFieldNumber euiFieldNumber--withIcon"
+              data-test-subj="interval_interval_field"
               min="1"
               name="period.interval"
               type="number"
@@ -282,6 +285,7 @@ exports[`Frequencies renders FrequencyPicker 1`] = `
           >
             <select
               class="euiSelect"
+              data-test-subj="interval_unit_field"
               id="period.unit"
               name="period.unit"
             >
@@ -354,6 +358,7 @@ exports[`Frequencies renders Interval 1`] = `
           >
             <input
               class="euiFieldNumber euiFieldNumber--withIcon"
+              data-test-subj="interval_interval_field"
               min="1"
               name="period.interval"
               type="number"
@@ -393,6 +398,7 @@ exports[`Frequencies renders Interval 1`] = `
           >
             <select
               class="euiSelect"
+              data-test-subj="interval_unit_field"
               id="period.unit"
               name="period.unit"
             >

public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js

@@ -81,6 +81,7 @@ export default class CreateMonitor extends Component {
 
   componentDidMount() {
     this.getPlugins();
+    this.setSchedule();
   }
 
   async getPlugins() {
@@ -131,6 +132,24 @@ export default class CreateMonitor extends Component {
     }
   }
 
+  setSchedule = () => {
+    const { edit, monitorToEdit } = this.props;
+    const { initialValues } = this.state;
+
+    if (edit) {
+      const schedule = _.get(monitorToEdit, 'schedule', FORMIK_INITIAL_VALUES.period);
+      const scheduleType = _.keys(schedule)[0];
+      switch (scheduleType) {
+        case 'cron':
+          _.set(initialValues, 'frequency', 'cronExpression');
+          break;
+        default:
+          _.set(initialValues, 'period', schedule.period);
+          break;
+      }
+    }
+  };
+
   prepareTriggers = (trigger, triggerMetadata, monitor) => {
     const { edit } = this.props;
     const { ui_metadata: uiMetadata = {}, triggers, monitor_type } = monitor;

public/pages/CreateTrigger/containers/CreateTrigger/utils/formikToTrigger.js

@@ -150,7 +150,7 @@ export function formikToTriggerUiMetadata(values, monitorUiMetadata) {
           };
         }
 
-        _.set(queryLevelTriggersUiMetadata, `${trigger.name}`, triggerMetadata);
+        queryLevelTriggersUiMetadata[trigger.name] = triggerMetadata;
       });
       return queryLevelTriggersUiMetadata;