[Backport 2.13] Removed cross cluster monitor experimental banner, and fixed bugs. (#933)

.github/workflows/cypress-workflow.yml

@@ -7,8 +7,8 @@ on:
     branches:
       - "**"
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '2.x'
-  ALERTING_PLUGIN_BRANCH: '2.x'
+  OPENSEARCH_DASHBOARDS_VERSION: '2.13.0'
+  ALERTING_PLUGIN_BRANCH: '2.13'
 jobs:
   tests:
     name: Run Cypress E2E tests

.github/workflows/unit-tests-workflow.yml

@@ -7,7 +7,7 @@ on:
     branches:
       - "**"
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '2.x'
+  OPENSEARCH_DASHBOARDS_VERSION: '2.13.0'
 jobs:
   Get-CI-Image-Tag:
     uses: opensearch-project/opensearch-build/.github/workflows/get-ci-image-tag.yml@main

public/pages/CreateMonitor/components/CrossClusterConfigurations/containers/CrossClusterConfiguration.js

@@ -10,8 +10,6 @@ import { FormikComboBox } from '../../../../../components/FormControls';
 import { MONITOR_TYPE } from '../../../../../utils/constants';
 import { connect } from 'formik';
 import { validateIndex } from '../../../../../utils/validate';
-import { ExperimentalBanner } from '../components/ExperimentalBanner';
-
 export const CROSS_CLUSTER_SETUP_LINK =
   'https://opensearch.org/docs/latest/security/access-control/cross-cluster-search/';
 
@@ -323,7 +321,6 @@ export class CrossClusterConfiguration extends Component {
 
     return (
       <>
-        <ExperimentalBanner />
         <FormikComboBox
           name={'clusterNames'}
           formRow={true}

public/pages/CreateMonitor/components/CrossClusterConfigurations/utils/helpers.js

@@ -6,6 +6,9 @@
 import _ from 'lodash';
 import { DEFAULT_EMPTY_DATA, MONITOR_TYPE } from '../../../../../utils/constants';
 
+export const CROSS_CLUSTER_MONITORING_ENABLED_SETTING =
+  'plugins.alerting.cross_cluster_monitoring_enabled';
+
 export const getLocalClusterName = async (httpClient) => {
   let localClusterName = DEFAULT_EMPTY_DATA;
   try {

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

@@ -33,7 +33,7 @@ class DataSource extends Component {
   }
 
   render() {
-    const { isMinimal, remoteMonitoringEnabled } = this.props;
+    const { isMinimal, canCallGetRemoteIndexes, remoteMonitoringEnabled } = this.props;
     const { monitor_type, searchType } = this.props.values;
     const displayTimeField =
       searchType === SEARCH_TYPE.GRAPH &&
@@ -44,6 +44,7 @@ class DataSource extends Component {
         <MonitorIndex
           httpClient={this.props.httpClient}
           monitorType={monitor_type}
+          canCallGetRemoteIndexes={canCallGetRemoteIndexes}
           remoteMonitoringEnabled={remoteMonitoringEnabled}
         />
 

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

@@ -39,7 +39,8 @@ import ConfigureDocumentLevelQueries from '../../components/DocumentLevelMonitor
 import FindingsDashboard from '../../../Dashboard/containers/FindingsDashboard';
 import { validDocLevelGraphQueries } from '../../components/DocumentLevelMonitorQueries/utils/helpers';
 import { validateWhereFilters } from '../../components/MonitorExpressions/expressions/utils/whereHelpers';
-import { REMOTE_MONITORING_ENABLED_SETTING_PATH } from '../../components/CrossClusterConfigurations/components/ExperimentalBanner';
+
+import { CROSS_CLUSTER_MONITORING_ENABLED_SETTING } from '../../components/CrossClusterConfigurations/utils/helpers';
 
 function renderEmptyMessage(message) {
   return (
@@ -76,6 +77,7 @@ class DefineMonitor extends Component {
       loadingResponse: false,
       PanelComponent: props.flyoutMode ? ({ children }) => <>{children}</> : ContentPanel,
       remoteMonitoringEnabled: false,
+      canCallGetRemoteIndexes: false,
     };
 
     this.renderGraph = this.renderGraph.bind(this);
@@ -180,31 +182,52 @@ class DefineMonitor extends Component {
   }
 
   async getSettings() {
+    const { httpClient } = this.props;
+    let remoteMonitoringEnabled = false;
+    let canCallGetRemoteIndexes = false;
+
+    // Check whether remote monitoring is enabled
     try {
-      const { httpClient } = this.props;
       const response = await httpClient.get('../api/alerting/_settings');
       if (response.ok) {
         const { defaults, transient, persistent } = response.resp;
-        let remoteMonitoringEnabled = _.get(
+        remoteMonitoringEnabled = _.get(
           // If present, take the 'transient' setting.
           transient,
-          REMOTE_MONITORING_ENABLED_SETTING_PATH,
+          CROSS_CLUSTER_MONITORING_ENABLED_SETTING,
           // Else take the 'persistent' setting.
           _.get(
             persistent,
-            REMOTE_MONITORING_ENABLED_SETTING_PATH,
+            CROSS_CLUSTER_MONITORING_ENABLED_SETTING,
             // Else take the 'default' setting.
-            _.get(defaults, REMOTE_MONITORING_ENABLED_SETTING_PATH, false)
+            _.get(defaults, CROSS_CLUSTER_MONITORING_ENABLED_SETTING, false)
           )
         );
-        // Boolean settings are returned as strings (e.g., `"true"`, and `"false"`). Constructing boolean value from the string.
-        if (typeof remoteMonitoringEnabled === 'string')
+
+        // Boolean settings can be returned as strings (e.g., `"true"`, and `"false"`). Constructing boolean value from the string.
+        if (typeof remoteMonitoringEnabled === 'string') {
           remoteMonitoringEnabled = JSON.parse(remoteMonitoringEnabled);
-        this.setState({ remoteMonitoringEnabled: remoteMonitoringEnabled });
+        }
       }
     } catch (e) {
-      console.log('Error while retrieving settings', e);
+      console.log('Error while retrieving settings:', e);
     }
+
+    // Check whether the user can call GetRemoteIndexes
+    if (remoteMonitoringEnabled) {
+      try {
+        const query = {
+          indexes: '*,*:*',
+          include_mappings: false,
+        };
+        const response = await httpClient.get(`../api/alerting/remote/indexes`, { query: query });
+        canCallGetRemoteIndexes = response.ok;
+      } catch (e) {
+        console.warn('Error while retrieving clusters:', e);
+      }
+    }
+
+    this.setState({ remoteMonitoringEnabled, canCallGetRemoteIndexes });
   }
 
   requiresTimeField() {
@@ -656,13 +679,16 @@ class DefineMonitor extends Component {
       isDarkMode,
       flyoutMode,
     } = this.props;
-    const { dataTypes, PanelComponent, remoteMonitoringEnabled } = this.state;
+    const { dataTypes, PanelComponent, canCallGetRemoteIndexes, remoteMonitoringEnabled } =
+      this.state;
     const monitorContent = this.getMonitorContent();
     const { searchType } = this.props.values;
     const displayDataSourcePanel =
       searchType === SEARCH_TYPE.GRAPH ||
       searchType === SEARCH_TYPE.QUERY ||
-      (remoteMonitoringEnabled && monitor_type === MONITOR_TYPE.CLUSTER_METRICS);
+      (canCallGetRemoteIndexes &&
+        remoteMonitoringEnabled &&
+        monitor_type === MONITOR_TYPE.CLUSTER_METRICS);
 
     return (
       <div>
@@ -676,6 +702,7 @@ class DefineMonitor extends Component {
               detectorId={detectorId}
               notifications={notifications}
               isDarkMode={isDarkMode}
+              canCallGetRemoteIndexes={canCallGetRemoteIndexes}
               remoteMonitoringEnabled={remoteMonitoringEnabled}
             />
             <EuiSpacer />

public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap

@@ -4,6 +4,7 @@ exports[`DefineMonitor renders 1`] = `
 <div>
   <div>
     <DataSource
+      canCallGetRemoteIndexes={false}
       dataTypes={Object {}}
       errors={Object {}}
       httpClient={[MockFunction]}

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

@@ -198,7 +198,7 @@ class MonitorIndex extends React.Component {
   }
 
   render() {
-    const { httpClient, remoteMonitoringEnabled } = this.props;
+    const { httpClient, canCallGetRemoteIndexes, remoteMonitoringEnabled } = this.props;
     const {
       isLoading,
       allIndices,
@@ -236,7 +236,7 @@ class MonitorIndex extends React.Component {
 
     return (
       <>
-        {remoteMonitoringEnabled && supportsCrossClusterMonitoring ? (
+        {remoteMonitoringEnabled && canCallGetRemoteIndexes && supportsCrossClusterMonitoring ? (
           <CrossClusterConfiguration monitorType={this.props.monitorType} httpClient={httpClient} />
         ) : (
           <FormikComboBox

public/utils/validate.js

@@ -154,7 +154,7 @@ export const validateIndex = (options) => {
   if (!options.length) return 'Must specify an index.';
 
   const illegalCharacters = ILLEGAL_CHARACTERS.join(' ');
-  const pattern = options.map(({ label }) => label).join('');
+  const pattern = options.map(({ value, label }) => value || label).join('');
   if (!isIndexPatternQueryValid(pattern, ILLEGAL_CHARACTERS)) {
     return `One of your inputs contains invalid characters or spaces. Please omit: ${illegalCharacters}`;
   }