Added version decoupling for wlm dashboard (#361)

---------
Signed-off-by: Lingxi Chen <[email protected]>
Co-authored-by: Lingxi Chen <[email protected]>

Author: Lindsay-00

cypress/e2e/7_WLM_details.cy.js

@@ -17,7 +17,7 @@ describe('WLM Details Page', () => {
     }).then((res) => {
       const groups = res.body?.workload_groups ?? [];
       groups.forEach((g) => {
-        if (g.name !== 'DEFAUL_WORKLOAD_GROUP') {
+        if (g.name !== 'DEFAULT_WORKLOAD_GROUP') {
           cy.request({
             method: 'DELETE',
             url: `/api/_wlm/workload_group/${g.name}`,

public/components/DataSourcePicker.tsx

@@ -11,7 +11,11 @@ import {
 } from 'src/plugins/data_source_management/public';
 import { AppMountParameters, CoreStart } from '../../../../src/core/public';
 import { QueryInsightsDashboardsPluginStartDependencies } from '../types';
-import { getDataSourceEnabledUrl, isDataSourceCompatible } from '../utils/datasource-utils';
+import {
+  getDataSourceEnabledUrl,
+  isDataSourceCompatible,
+  isWLMDataSourceCompatible,
+} from '../utils/datasource-utils';
 
 export interface DataSourceMenuProps {
   dataSourceManagement?: DataSourceManagementPluginSetup;
@@ -71,3 +75,50 @@ export const QueryInsightsDataSourceMenu = React.memo(
     prevProps.selectedDataSource.id === newProps.selectedDataSource.id &&
     prevProps.dataSourcePickerReadOnly === newProps.dataSourcePickerReadOnly
 );
+
+export const WLMDataSourceMenu = React.memo(
+  (props: DataSourceMenuProps) => {
+    const {
+      coreStart,
+      depsStart,
+      dataSourceManagement,
+      params,
+      setDataSource,
+      selectedDataSource,
+      onManageDataSource,
+      onSelectedDataSource,
+      dataSourcePickerReadOnly,
+    } = props;
+    const { setHeaderActionMenu } = params;
+    const DataSourceMenu = dataSourceManagement?.ui.getDataSourceMenu<DataSourceSelectableConfig>();
+
+    const dataSourceEnabled = !!depsStart.dataSource?.dataSourceEnabled;
+
+    const wrapSetDataSourceWithUpdateUrl = (dataSources: DataSourceOption[]) => {
+      window.history.replaceState({}, '', getDataSourceEnabledUrl(dataSources[0]).toString());
+      setDataSource(dataSources[0]);
+      onSelectedDataSource();
+    };
+
+    return dataSourceEnabled ? (
+      <DataSourceMenu
+        onManageDataSource={onManageDataSource}
+        setMenuMountPoint={setHeaderActionMenu}
+        componentType={dataSourcePickerReadOnly ? 'DataSourceView' : 'DataSourceSelectable'}
+        componentConfig={{
+          onManageDataSource,
+          savedObjects: coreStart.savedObjects.client,
+          notifications: coreStart.notifications,
+          activeOption:
+            selectedDataSource.id || selectedDataSource.label ? [selectedDataSource] : undefined,
+          onSelectedDataSources: wrapSetDataSourceWithUpdateUrl,
+          fullWidth: true,
+          dataSourceFilter: isWLMDataSourceCompatible,
+        }}
+      />
+    ) : null;
+  },
+  (prevProps, newProps) =>
+    prevProps.selectedDataSource.id === newProps.selectedDataSource.id &&
+    prevProps.dataSourcePickerReadOnly === newProps.dataSourcePickerReadOnly
+);

public/pages/WorkloadManagement/WLMCreate/WLMCreate.tsx

@@ -22,7 +22,7 @@ import { CoreStart, AppMountParameters } from 'opensearch-dashboards/public';
 import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import { QueryInsightsDashboardsPluginStartDependencies } from '../../../types';
 import { WLM_CREATE, WLM_MAIN } from '../WorkloadManagement';
-import { QueryInsightsDataSourceMenu } from '../../../components/DataSourcePicker';
+import { WLMDataSourceMenu } from '../../../components/DataSourcePicker';
 import { DataSourceContext } from '../WorkloadManagement';
 import { getDataSourceEnabledUrl } from '../../../utils/datasource-utils';
 import { PageHeader } from '../../../components/PageHeader';
@@ -160,7 +160,7 @@ export const WLMCreate = ({
         coreStart={core}
         depsStart={depsStart}
         fallBackComponent={
-          <QueryInsightsDataSourceMenu
+          <WLMDataSourceMenu
             coreStart={core}
             depsStart={depsStart}
             params={params}

public/pages/WorkloadManagement/WLMDetails/WLMDetails.tsx

@@ -32,7 +32,7 @@ import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_managem
 import { PageHeader } from '../../../components/PageHeader';
 import { QueryInsightsDashboardsPluginStartDependencies } from '../../../types';
 import { WLM_MAIN, DataSourceContext } from '../WorkloadManagement';
-import { QueryInsightsDataSourceMenu } from '../../../components/DataSourcePicker';
+import { WLMDataSourceMenu } from '../../../components/DataSourcePicker';
 import { getDataSourceEnabledUrl } from '../../../utils/datasource-utils';
 
 // === Constants & Types ===
@@ -564,7 +564,7 @@ export const WLMDetails = ({
         depsStart={depsStart}
         fallBackComponent={
           <>
-            <QueryInsightsDataSourceMenu
+            <WLMDataSourceMenu
               coreStart={core}
               depsStart={depsStart}
               params={params}

public/pages/WorkloadManagement/WLMMain/WLMMain.tsx

@@ -27,7 +27,7 @@ import { PageHeader } from '../../../components/PageHeader';
 import { QueryInsightsDashboardsPluginStartDependencies } from '../../../types';
 import { WLM_CREATE } from '../WorkloadManagement';
 import { DataSourceContext } from '../WorkloadManagement';
-import { QueryInsightsDataSourceMenu } from '../../../components/DataSourcePicker';
+import { WLMDataSourceMenu } from '../../../components/DataSourcePicker';
 import { getDataSourceEnabledUrl } from '../../../utils/datasource-utils';
 
 export const WLM = '/workloadManagement';
@@ -583,7 +583,7 @@ export const WorkloadManagementMain = ({
         coreStart={core}
         depsStart={depsStart}
         fallBackComponent={
-          <QueryInsightsDataSourceMenu
+          <WLMDataSourceMenu
             coreStart={core}
             depsStart={depsStart}
             params={params}

public/utils/datasource-utils.ts

@@ -63,3 +63,13 @@ export const isDataSourceCompatible = (dataSource: SavedObject<DataSourceAttribu
   }
   return true;
 };
+
+export const isWLMDataSourceCompatible = (dataSource: SavedObject<DataSourceAttributes>) => {
+  if (
+    'supportedOSDataSourceVersions' in pluginManifest &&
+    !semver.satisfies(dataSource.attributes.dataSourceVersion, '>=3.1.0')
+  ) {
+    return false;
+  }
+  return true;
+};