Merge branch '2.3' into 2.3_destinations_text

opensearch-project · Jan 9, 2023 · 40318fa · 40318fa
2 parents 5c57f84 + c1520c3
commit 40318fa
Show file tree

Hide file tree

Showing 24 changed files with 190 additions and 159 deletions.
diff --git a/cypress/integration/query_level_monitor_spec.js b/cypress/integration/query_level_monitor_spec.js
@@ -166,7 +166,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_MONITOR, { timeout: 20000 }).click();
+      cy.get(`[data-test-subj="${SAMPLE_MONITOR}"]`).click();
 
       // Click Edit button
       cy.contains('Edit', { timeout: 20000 }).click({ force: true });
@@ -195,7 +195,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_MONITOR, { timeout: 20000 }).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_MONITOR}"]`).click({ force: true });
 
       // Click Edit button
       cy.contains('Edit', { timeout: 20000 }).click({ force: true });
@@ -304,7 +304,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_MONITOR);
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_MONITOR).click();
+      cy.get(`[data-test-subj="${SAMPLE_MONITOR}"]`).click();
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });
@@ -373,7 +373,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_DAYS_INTERVAL_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_DAYS_INTERVAL_MONITOR).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_DAYS_INTERVAL_MONITOR}"]`).click({ force: true });
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });
@@ -398,7 +398,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_CRON_EXPRESSION_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_CRON_EXPRESSION_MONITOR).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_CRON_EXPRESSION_MONITOR}"]`).click({ force: true });
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });

diff --git a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
@@ -8,33 +8,40 @@ Object {
     "data-test-subj": "alertsDashboardFlyout_undefined",
     "hideCloseButton": true,
     "size": "m",
-    "type": "push",
   },
-  "footer": <EuiButtonEmpty
-    data-test-subj="alertsDashboardFlyout_closeButton_undefined"
-    iconType="cross"
-    onClick={[Function]}
-    style={
-      Object {
-        "marginLeft": "0px",
-        "paddingLeft": "0px",
-      }
-    }
-  >
-    Close
-  </EuiButtonEmpty>,
   "footerProps": Object {
     "style": Object {
       "backgroundColor": "#F5F7FA",
     },
   },
-  "header": <EuiText
-    data-test-subj="alertsDashboardFlyout_header_undefined"
+  "header": <EuiFlexGroup
+    alignItems="center"
+    justifyContent="flexStart"
   >
-    <h2>
-      Alerts by undefined
-    </h2>
-  </EuiText>,
+    <EuiFlexItem
+      className="eui-textTruncate"
+    >
+      <EuiTitle
+        className="eui-textTruncate"
+        data-test-subj="alertsDashboardFlyout_header_undefined"
+        size="m"
+      >
+        <h3>
+          Alerts by undefined
+        </h3>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiButtonIcon
+        data-test-subj="alertsDashboardFlyout_closeButton_undefined"
+        display="empty"
+        iconSize="m"
+        iconType="cross"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>,
   "headerProps": Object {
     "hasBorder": true,
   },

diff --git a/public/components/Flyout/flyouts/alertsDashboard.js b/public/components/Flyout/flyouts/alertsDashboard.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiButtonEmpty, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiButtonIcon, EuiTitle, EuiFlexItem } from '@elastic/eui';
 import AlertsDashboardFlyoutComponent from './components/AlertsDashboardFlyoutComponent';
 
 const alertsDashboard = (payload) => {
@@ -15,25 +15,31 @@ const alertsDashboard = (payload) => {
       size: 'm',
       hideCloseButton: true,
       'data-test-subj': `alertsDashboardFlyout_${trigger_name}`,
-      type: 'push',
     },
     headerProps: { hasBorder: true },
     header: (
-      <EuiText data-test-subj={`alertsDashboardFlyout_header_${trigger_name}`}>
-        <h2>{`Alerts by ${trigger_name}`}</h2>
-      </EuiText>
+      <EuiFlexGroup justifyContent="flexStart" alignItems="center">
+        <EuiFlexItem className="eui-textTruncate">
+          <EuiTitle
+            className="eui-textTruncate"
+            size={'m'}
+            data-test-subj={`alertsDashboardFlyout_header_${trigger_name}`}
+          >
+            <h3>{`Alerts by ${trigger_name}`}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`}
+            iconType="cross"
+            display="empty"
+            iconSize="m"
+            onClick={closeFlyout}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     ),
     footerProps: { style: { backgroundColor: '#F5F7FA' } },
-    footer: (
-      <EuiButtonEmpty
-        iconType={'cross'}
-        onClick={() => closeFlyout()}
-        style={{ paddingLeft: '0px', marginLeft: '0px' }}
-        data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`}
-      >
-        Close
-      </EuiButtonEmpty>
-    ),
     body: <AlertsDashboardFlyoutComponent {...payload} />,
   };
 };

diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
@@ -361,7 +361,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
           columns.splice(
             0,
             0,
-            getAlertsFindingColumn(httpClient, history, true, location, notifications)
+            getAlertsFindingColumn(httpClient, history, location, notifications)
           );
           break;
         default:

diff --git a/public/pages/CreateMonitor/components/VisualGraph/utils/helpers.js b/public/pages/CreateMonitor/components/VisualGraph/utils/helpers.js
@@ -91,7 +91,8 @@ export function getDataFromResponse(response, fieldName, monitorType) {
     const buckets = _.get(response, 'aggregations.composite_agg.buckets', []);
     return buckets
       .map((bucket) => getXYValuesByFieldName(bucket, fieldName))
-      .filter(filterInvalidYValues);
+      .filter(filterInvalidYValues)
+      .sort((a, b) => a.x - b.x);
   }
 }
 

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -286,6 +286,7 @@ export default class CreateMonitor extends Component {
                 plugins={plugins}
                 isAd={values.searchType === SEARCH_TYPE.AD}
                 detectorId={this.props.detectorId}
+                setFlyout={this.props.setFlyout}
               />
               <EuiSpacer />
 

diff --git a/public/pages/CreateTrigger/components/Action/Action.js b/public/pages/CreateTrigger/components/Action/Action.js
@@ -78,7 +78,7 @@ const Action = ({
                   // Just a swap correct fields.
                   arrayHelpers.replace(index, {
                     ...action,
-                    destination_id: options[0].value,
+                    destination_id: options[0]?.value,
                   });
                 },
                 onBlur: (e, field, form) => {
@@ -96,7 +96,6 @@ const Action = ({
                   </React.Fragment>
                 ),
                 rowHeight: 45,
-                async: true,
                 isLoading: loadingDestinations,
               }}
             />

diff --git a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js
@@ -17,6 +17,7 @@ import {
 import { getAllowList } from '../../../Destinations/utils/helpers';
 import {
   MAX_QUERY_RESULT_SIZE,
+  MAX_CHANNELS_RESULT_SIZE,
   MONITOR_TYPE,
   OS_NOTIFICATION_PLUGIN,
 } from '../../../../utils/constants';
@@ -84,10 +85,54 @@ class ConfigureActions extends React.Component {
     }
   }
 
+  /**
+   * Returns all channels in consecutive requests until all channels are returned
+   * @returns {Promise<*[]>}
+   */
+  getChannels = async () => {
+    const { plugins } = this.props;
+    const hasNotificationPlugin = plugins.indexOf(OS_NOTIFICATION_PLUGIN) !== -1;
+
+    let channels = [];
+    let index = 0;
+    const getChannels = async () => {
+      const getChannelsQuery = {
+        from_index: index,
+        max_items: MAX_CHANNELS_RESULT_SIZE,
+        config_type: CHANNEL_TYPES,
+        sort_field: 'name',
+        sort_order: 'asc',
+      };
+
+      const channelsResponse = await this.props.notificationService.getChannels(getChannelsQuery);
+
+      // TODO: Might still need to filter the allowed channel types here if the backend doesn't
+      //   since Notifications uses its own setting
+      channels = channels.concat(
+        channelsResponse.items.map((channel) => ({
+          label: `[Channel] ${channel.name}`,
+          value: channel.config_id,
+          type: channel.config_type,
+          description: channel.description,
+        }))
+      );
+
+      if (channelsResponse.total && channels.length < channelsResponse.total) {
+        index += MAX_CHANNELS_RESULT_SIZE;
+        await getChannels();
+      }
+    };
+
+    if (hasNotificationPlugin) {
+      await getChannels();
+    }
+
+    return channels;
+  };
+
   loadDestinations = async (searchText = '') => {
-    const { httpClient, values, arrayHelpers, notifications, fieldPath, plugins } = this.props;
+    const { httpClient, values, arrayHelpers, notifications, fieldPath } = this.props;
     const { allowList, actionDeleted } = this.state;
-    const hasNotificationPlugin = plugins.indexOf(OS_NOTIFICATION_PLUGIN) !== -1;
 
     this.setState({ loadingDestinations: true });
     try {
@@ -109,27 +154,7 @@ class ConfigureActions extends React.Component {
         backendErrorNotification(notifications, 'load', 'destinations', response.err);
       }
 
-      let channels = [];
-      if (hasNotificationPlugin) {
-        // Fetch Notification Channels
-        const getChannelsQuery = {
-          from_index: 0,
-          max_items: MAX_QUERY_RESULT_SIZE,
-          query: searchText,
-          config_type: CHANNEL_TYPES,
-          sort_field: 'name',
-          sort_order: 'asc',
-        };
-        const channelsResponse = await this.props.notificationService.getChannels(getChannelsQuery);
-        // TODO: Might still need to filter the allowed channel types here if the backend doesn't
-        //   since Notifications uses its own setting
-        channels = channelsResponse.items.map((channel) => ({
-          label: `[Channel] ${channel.name}`,
-          value: channel.config_id,
-          type: channel.config_type,
-          description: channel.description,
-        }));
-      }
+      let channels = await this.getChannels();
 
       const destinationsAndChannels = destinations.concat(channels);
       const channelOptionsByType = getChannelOptions(destinationsAndChannels, CHANNEL_TYPES);