From b83baf305473fc07ff1ec608e9e2dbdc4db80968 Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Mon, 22 Jul 2024 15:28:36 -0700
Subject: [PATCH 1/4] Version-decoupling for Observability

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 opensearch_dashboards.json                       |  3 ++-
 .../custom_panel_view.test.tsx.snap              | 12 ++++++++----
 .../custom_panel_view_so.test.tsx.snap           |  6 +++---
 public/components/metrics/index.tsx              | 12 +++++++++++-
 .../__snapshots__/top_menu.test.tsx.snap         |  4 +++-
 .../paragraph_components/paragraphs.tsx          | 16 +++++++++++++++-
 .../components/services/service_view.tsx         | 12 +++++++++++-
 .../components/traces/trace_view.tsx             | 13 +++++++++++--
 .../components/traces/traces_content.tsx         | 12 ++++++++++--
 public/components/trace_analytics/home.tsx       | 12 +++++++++++-
 10 files changed, 85 insertions(+), 17 deletions(-)

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 8ec5d0402..44be96a8c 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -27,5 +27,6 @@
   ],
   "configPath": [
     "observability"
-  ]
+  ],
+  "supportedOSDataSourceVersions": ">=2.9.0"
 }
\ No newline at end of file
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
index 6bb678ffe..e21d4d876 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -303,7 +303,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -734,7 +734,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -2334,6 +2334,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                             className="euiSuperUpdateButton"
                                             color="primary"
                                             data-test-subj="superDatePickerApplyTimeButton"
+                                            fill={true}
                                             iconType="refresh"
                                             isDisabled={false}
                                             isLoading={false}
@@ -2353,6 +2354,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               data-test-subj="superDatePickerApplyTimeButton"
                                               disabled={false}
                                               element="button"
+                                              fill={true}
                                               iconType="refresh"
                                               isDisabled={false}
                                               isLoading={false}
@@ -2367,7 +2369,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               type="button"
                                             >
                                               <button
-                                                className="euiButton euiButton--primary euiSuperUpdateButton"
+                                                className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                                                 data-test-subj="superDatePickerApplyTimeButton"
                                                 disabled={false}
                                                 onBlur={[Function]}
@@ -4579,6 +4581,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                             className="euiSuperUpdateButton"
                                             color="primary"
                                             data-test-subj="superDatePickerApplyTimeButton"
+                                            fill={true}
                                             iconType="refresh"
                                             isDisabled={false}
                                             isLoading={false}
@@ -4598,6 +4601,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               data-test-subj="superDatePickerApplyTimeButton"
                                               disabled={false}
                                               element="button"
+                                              fill={true}
                                               iconType="refresh"
                                               isDisabled={false}
                                               isLoading={false}
@@ -4612,7 +4616,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               type="button"
                                             >
                                               <button
-                                                className="euiButton euiButton--primary euiSuperUpdateButton"
+                                                className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                                                 data-test-subj="superDatePickerApplyTimeButton"
                                                 disabled={false}
                                                 onBlur={[Function]}
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap
index b816b56e3..050c4678a 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap
@@ -303,7 +303,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -734,7 +734,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -1167,7 +1167,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index 14d830d3a..5858ba6ac 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -8,18 +8,23 @@ import debounce from 'lodash/debounce';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { HashRouter, Route, RouteComponentProps, StaticContext } from 'react-router-dom';
+import semver from 'semver';
 import {
   ChromeBreadcrumb,
   MountPoint,
   NotificationsStart,
+  SavedObject,
   SavedObjectsStart,
 } from '../../../../../src/core/public';
+import { DataSourceAttributes } from '../../../../../src/plugins/data_source/common/data_sources';
 import {
   DataSourceManagementPluginSetup,
   DataSourceSelectableConfig,
 } from '../../../../../src/plugins/data_source_management/public';
 import { DataSourceOption } from '../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
 import { OptionType } from '../../../common/types/metrics';
+import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs';
+import * as pluginManifest from '../../../opensearch_dashboards.json';
 import PPLService from '../../services/requests/ppl';
 import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
 import './index.scss';
@@ -27,7 +32,6 @@ import { setSelectedDataSourceMDSId } from './redux/slices/metrics_slice';
 import { Sidebar } from './sidebar/sidebar';
 import { TopMenu } from './top_menu/top_menu';
 import { MetricsGrid } from './view/metrics_grid';
-import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs';
 
 interface MetricsProps {
   parentBreadcrumb: ChromeBreadcrumb;
@@ -82,6 +86,11 @@ export const Home = ({
       dispatch(setSelectedDataSourceMDSId(id));
     }, 300);
   };
+  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
+    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
+    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+  };
+
   const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceSelectableConfig>();
   const dataSourceMenuComponent = useMemo(() => {
     return (
@@ -94,6 +103,7 @@ export const Home = ({
           fullWidth: true,
           // activeOption: dataSourceMDSId,
           onSelectedDataSources: onSelectedDataSource,
+          dataSourceFilter: dataSourceFilterFn,
         }}
       />
     );
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
index fe80438cb..9c64eae1c 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -697,6 +697,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                               className="euiSuperUpdateButton"
                               color="primary"
                               data-test-subj="superDatePickerApplyTimeButton"
+                              fill={true}
                               iconType="refresh"
                               isDisabled={false}
                               isLoading={false}
@@ -716,6 +717,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                 data-test-subj="superDatePickerApplyTimeButton"
                                 disabled={false}
                                 element="button"
+                                fill={true}
                                 iconType="refresh"
                                 isDisabled={false}
                                 isLoading={false}
@@ -730,7 +732,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                 type="button"
                               >
                                 <button
-                                  className="euiButton euiButton--primary euiSuperUpdateButton"
+                                  className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                                   data-test-subj="superDatePickerApplyTimeButton"
                                   disabled={false}
                                   onBlur={[Function]}
diff --git a/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
index 01ed29da9..042034fb9 100644
--- a/public/components/notebooks/components/paragraph_components/paragraphs.tsx
+++ b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
@@ -24,11 +24,18 @@ import {
 import filter from 'lodash/filter';
 import moment from 'moment';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { CoreStart, MountPoint, SavedObjectsStart } from '../../../../../../../src/core/public';
+import semver from 'semver';
+import {
+  CoreStart,
+  MountPoint,
+  SavedObject,
+  SavedObjectsStart,
+} from '../../../../../../../src/core/public';
 import {
   DashboardContainerInput,
   DashboardStart,
 } from '../../../../../../../src/plugins/dashboard/public';
+import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources';
 import { DataSourceManagementPluginSetup } from '../../../../../../../src/plugins/data_source_management/public';
 import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
 import { NOTEBOOKS_API_PREFIX } from '../../../../../common/constants/notebooks';
@@ -39,6 +46,7 @@ import {
 } from '../../../../../common/constants/shared';
 import { ParaType } from '../../../../../common/types/notebooks';
 import { uiSettingsService } from '../../../../../common/utils';
+import * as pluginManifest from '../../../../../opensearch_dashboards.json';
 import PPLService from '../../../../services/requests/ppl';
 import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
 import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types';
@@ -549,6 +557,11 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
     setDataSourceMDSId(dataConnectionId);
     handleSelectedDataSourceChange(dataConnectionId, dataConnectionLabel);
   };
+
+  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
+    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
+    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+  };
   if (dataSourceEnabled) {
     DataSourceSelector = dataSourceManagement.ui.DataSourceSelector;
   }
@@ -569,6 +582,7 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
                 { id: paradataSourceMDSId, label: dataSourceMDSLabel },
               ]
             }
+            dataSourceFilter={dataSourceFilterFn}
           />
         )}
         <EuiSpacer size="s" />
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index dfb1461ac..d0121a866 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -27,6 +27,9 @@ import {
 } from '@elastic/eui';
 import round from 'lodash/round';
 import React, { useEffect, useMemo, useState } from 'react';
+import semver from 'semver';
+import { SavedObject } from '../../../../../../../src/core/public';
+import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources';
 import {
   DataSourceManagementPluginSetup,
   DataSourceViewConfig,
@@ -37,6 +40,8 @@ import {
   DEFAULT_DATA_SOURCE_TYPE,
 } from '../../../../../common/constants/data_sources';
 import { observabilityLogsID } from '../../../../../common/constants/shared';
+import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
+import * as pluginManifest from '../../../../../opensearch_dashboards.json';
 import { coreRefs } from '../../../../framework/core_refs';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import {
@@ -50,7 +55,6 @@ import { SearchBarProps, renderDatePicker } from '../common/search_bar';
 import { SpanDetailFlyout } from '../traces/span_detail_flyout';
 import { SpanDetailTable } from '../traces/span_detail_table';
 import { ServiceMetrics } from './service_metrics';
-import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
 
 interface ServiceViewProps extends TraceAnalyticsComponentDeps {
   serviceName: string;
@@ -123,6 +127,11 @@ export function ServiceView(props: ServiceViewProps) {
 
   const DataSourceMenu = props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
+  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
+    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
+    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+  };
+
   const redirectToServicePage = (service: string) => {
     window.location.href = `#/services/${service}`;
   };
@@ -260,6 +269,7 @@ export function ServiceView(props: ServiceViewProps) {
             componentConfig={{
               activeOption: props.dataSourceMDSId,
               fullWidth: true,
+              dataSourceFilter: dataSourceFilterFn,
             }}
           />
         )}
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index b95959967..b3b31a0ad 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -20,12 +20,16 @@ import {
 } from '@elastic/eui';
 import round from 'lodash/round';
 import React, { useEffect, useState } from 'react';
-import { MountPoint } from '../../../../../../../src/core/public';
+import semver from 'semver';
+import { MountPoint, SavedObject } from '../../../../../../../src/core/public';
+import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources/types';
 import {
   DataSourceManagementPluginSetup,
   DataSourceViewConfig,
 } from '../../../../../../../src/plugins/data_source_management/public';
 import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
+import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
+import * as pluginManifest from '../../../../../opensearch_dashboards.json';
 import { TraceAnalyticsCoreDeps, TraceAnalyticsMode } from '../../home';
 import { handleServiceMapRequest } from '../../requests/services_request_handler';
 import {
@@ -37,7 +41,6 @@ import { PanelTitle, filtersToDsl, processTimeStamp } from '../common/helper_fun
 import { ServiceMap, ServiceObject } from '../common/plots/service_map';
 import { ServiceBreakdownPanel } from './service_breakdown_panel';
 import { SpanDetailPanel } from './span_detail_panel';
-import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
 
 interface TraceViewProps extends TraceAnalyticsCoreDeps {
   traceId: string;
@@ -63,6 +66,11 @@ export function TraceView(props: TraceViewProps) {
   };
   const DataSourceMenu = props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
+  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
+    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
+    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+  };
+
   const renderOverview = (fields: any) => {
     return (
       <EuiPanel>
@@ -260,6 +268,7 @@ export function TraceView(props: TraceViewProps) {
             componentConfig={{
               activeOption: props.dataSourceMDSId,
               fullWidth: true,
+              dataSourceFilter: dataSourceFilterFn,
             }}
           />
         )}
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
index 351f04e09..49312012c 100644
--- a/public/components/trace_analytics/components/traces/traces_content.tsx
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -6,7 +6,12 @@
 
 import { EuiAccordion, EuiPanel, EuiSpacer, PropertySort } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
+import semver from 'semver';
+import { SavedObject } from '../../../../../../../src/core/public';
+import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources';
 import { DataSourceViewConfig } from '../../../../../../../src/plugins/data_source_management/public';
+import * as pluginManifest from '../../../../../opensearch_dashboards.json';
+import { coreRefs } from '../../../../framework/core_refs';
 import { handleTracesRequest } from '../../requests/traces_request_handler';
 import { getValidFilterFields } from '../common/filters/filter_helpers';
 import { filtersToDsl, processTimeStamp } from '../common/helper_functions';
@@ -14,7 +19,6 @@ import { SearchBar } from '../common/search_bar';
 import { DashboardContent } from '../dashboard/dashboard_content';
 import { TracesProps } from './traces';
 import { TracesTable } from './traces_table';
-import { coreRefs } from '../../../../framework/core_refs';
 
 export function TracesContent(props: TracesProps) {
   const {
@@ -45,7 +49,10 @@ export function TracesContent(props: TracesProps) {
   const [trigger, setTrigger] = useState<'open' | 'closed'>('closed');
   const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled();
   const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
-
+  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
+    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
+    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+  };
   useEffect(() => {
     chrome.setBreadcrumbs([
       ...(isNavGroupEnabled ? [] : [props.parentBreadcrumb]),
@@ -120,6 +127,7 @@ export function TracesContent(props: TracesProps) {
           componentConfig={{
             activeOption: dataSourceMDSId,
             fullWidth: true,
+            dataSourceFilter: dataSourceFilterFn,
           }}
         />
       )}
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index fa64df8f5..4f386df7a 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -6,21 +6,25 @@
 import { EuiGlobalToastList } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React, { ReactChild, useEffect, useState } from 'react';
-import { HashRouter, Route, RouteComponentProps, Redirect } from 'react-router-dom';
+import { HashRouter, Redirect, Route, RouteComponentProps } from 'react-router-dom';
+import semver from 'semver';
 import {
   ChromeBreadcrumb,
   ChromeStart,
   HttpStart,
   MountPoint,
   NotificationsStart,
+  SavedObject,
   SavedObjectsStart,
 } from '../../../../../src/core/public';
+import { DataSourceAttributes } from '../../../../../src/plugins/data_source/common/data_sources';
 import {
   DataSourceManagementPluginSetup,
   DataSourceSelectableConfig,
 } from '../../../../../src/plugins/data_source_management/public';
 import { DataSourceOption } from '../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
 import { DATA_PREPPER_INDEX_NAME } from '../../../common/constants/trace_analytics';
+import * as pluginManifest from '../../../opensearch_dashboards.json';
 import { coreRefs } from '../../framework/core_refs';
 import { FilterType } from './components/common/filters/filters';
 import { getAttributes } from './components/common/helper_functions';
@@ -258,6 +262,11 @@ export const Home = (props: HomeProps) => {
     DataSourceSelectableConfig
   >();
 
+  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
+    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
+    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+  };
+
   let flyout;
 
   if (currentSelectedService !== '') {
@@ -283,6 +292,7 @@ export const Home = (props: HomeProps) => {
             fullWidth: true,
             activeOption: dataSourceMDSId,
             onSelectedDataSources: onSelectedDataSource,
+            dataSourceFilter: dataSourceFilterFn,
           }}
         />
       )}

From 099f2e37ca29e39346eeefca7eb8e2f9321e39f5 Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Mon, 22 Jul 2024 15:41:49 -0700
Subject: [PATCH 2/4] added change for support of backend

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 opensearch_dashboards.json                             |  4 +++-
 public/components/metrics/index.tsx                    |  8 +++++++-
 .../components/paragraph_components/paragraphs.tsx     |  9 ++++++++-
 .../components/services/service_view.tsx               |  8 +++++++-
 .../trace_analytics/components/traces/trace_view.tsx   |  8 +++++++-
 .../components/traces/traces_content.tsx               | 10 +++++++++-
 public/components/trace_analytics/home.tsx             |  8 +++++++-
 7 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 44be96a8c..1527bd898 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -28,5 +28,7 @@
   "configPath": [
     "observability"
   ],
-  "supportedOSDataSourceVersions": ">=2.9.0"
+  "supportedOSDataSourceVersions": ">=2.9.0",
+  "requiredOSDataSourcePlugins": ["opensearch-sql","opensearch-observability"]
+
 }
\ No newline at end of file
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index 5858ba6ac..961195d29 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -88,7 +88,13 @@ export const Home = ({
   };
   const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
     const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
+    return (
+      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
+      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
+        installedPlugins.includes(plugin)
+      )
+    );
   };
 
   const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceSelectableConfig>();
diff --git a/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
index 042034fb9..99ce80c09 100644
--- a/public/components/notebooks/components/paragraph_components/paragraphs.tsx
+++ b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
@@ -560,8 +560,15 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
 
   const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
     const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
+    return (
+      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
+      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
+        installedPlugins.includes(plugin)
+      )
+    );
   };
+
   if (dataSourceEnabled) {
     DataSourceSelector = dataSourceManagement.ui.DataSourceSelector;
   }
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index d0121a866..4433d24cf 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -129,7 +129,13 @@ export function ServiceView(props: ServiceViewProps) {
 
   const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
     const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
+    return (
+      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
+      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
+        installedPlugins.includes(plugin)
+      )
+    );
   };
 
   const redirectToServicePage = (service: string) => {
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index b3b31a0ad..7f7e0b390 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -68,7 +68,13 @@ export function TraceView(props: TraceViewProps) {
 
   const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
     const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
+    return (
+      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
+      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
+        installedPlugins.includes(plugin)
+      )
+    );
   };
 
   const renderOverview = (fields: any) => {
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
index 49312012c..6ab4f1de8 100644
--- a/public/components/trace_analytics/components/traces/traces_content.tsx
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -49,10 +49,18 @@ export function TracesContent(props: TracesProps) {
   const [trigger, setTrigger] = useState<'open' | 'closed'>('closed');
   const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled();
   const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
+
   const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
     const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
+    return (
+      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
+      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
+        installedPlugins.includes(plugin)
+      )
+    );
   };
+
   useEffect(() => {
     chrome.setBreadcrumbs([
       ...(isNavGroupEnabled ? [] : [props.parentBreadcrumb]),
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index 4f386df7a..a47339e9a 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -264,7 +264,13 @@ export const Home = (props: HomeProps) => {
 
   const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
     const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    return semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions);
+    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
+    return (
+      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
+      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
+        installedPlugins.includes(plugin)
+      )
+    );
   };
 
   let flyout;

From da6d39862b795c4711e6988529222b2d90553086 Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Mon, 22 Jul 2024 15:53:48 -0700
Subject: [PATCH 3/4] added change for support of backend

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 public/components/metrics/index.tsx           | 15 +------------
 .../paragraph_components/paragraphs.tsx       | 22 ++-----------------
 .../components/services/service_view.tsx      | 16 +-------------
 .../components/traces/trace_view.tsx          | 17 ++------------
 .../components/traces/traces_content.tsx      | 16 +-------------
 public/components/trace_analytics/home.tsx    | 16 +-------------
 6 files changed, 8 insertions(+), 94 deletions(-)

diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index 961195d29..2198db97b 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -8,15 +8,12 @@ import debounce from 'lodash/debounce';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { HashRouter, Route, RouteComponentProps, StaticContext } from 'react-router-dom';
-import semver from 'semver';
 import {
   ChromeBreadcrumb,
   MountPoint,
   NotificationsStart,
-  SavedObject,
   SavedObjectsStart,
 } from '../../../../../src/core/public';
-import { DataSourceAttributes } from '../../../../../src/plugins/data_source/common/data_sources';
 import {
   DataSourceManagementPluginSetup,
   DataSourceSelectableConfig,
@@ -24,7 +21,7 @@ import {
 import { DataSourceOption } from '../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
 import { OptionType } from '../../../common/types/metrics';
 import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs';
-import * as pluginManifest from '../../../opensearch_dashboards.json';
+import { dataSourceFilterFn } from '../../../common/utils/shared';
 import PPLService from '../../services/requests/ppl';
 import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
 import './index.scss';
@@ -86,16 +83,6 @@ export const Home = ({
       dispatch(setSelectedDataSourceMDSId(id));
     }, 300);
   };
-  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
-    return (
-      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
-        installedPlugins.includes(plugin)
-      )
-    );
-  };
 
   const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceSelectableConfig>();
   const dataSourceMenuComponent = useMemo(() => {
diff --git a/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
index 99ce80c09..2c3239d34 100644
--- a/public/components/notebooks/components/paragraph_components/paragraphs.tsx
+++ b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
@@ -24,18 +24,11 @@ import {
 import filter from 'lodash/filter';
 import moment from 'moment';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import semver from 'semver';
-import {
-  CoreStart,
-  MountPoint,
-  SavedObject,
-  SavedObjectsStart,
-} from '../../../../../../../src/core/public';
+import { CoreStart, MountPoint, SavedObjectsStart } from '../../../../../../../src/core/public';
 import {
   DashboardContainerInput,
   DashboardStart,
 } from '../../../../../../../src/plugins/dashboard/public';
-import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources';
 import { DataSourceManagementPluginSetup } from '../../../../../../../src/plugins/data_source_management/public';
 import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
 import { NOTEBOOKS_API_PREFIX } from '../../../../../common/constants/notebooks';
@@ -46,7 +39,7 @@ import {
 } from '../../../../../common/constants/shared';
 import { ParaType } from '../../../../../common/types/notebooks';
 import { uiSettingsService } from '../../../../../common/utils';
-import * as pluginManifest from '../../../../../opensearch_dashboards.json';
+import { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import PPLService from '../../../../services/requests/ppl';
 import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
 import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types';
@@ -558,17 +551,6 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
     handleSelectedDataSourceChange(dataConnectionId, dataConnectionLabel);
   };
 
-  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
-    return (
-      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
-        installedPlugins.includes(plugin)
-      )
-    );
-  };
-
   if (dataSourceEnabled) {
     DataSourceSelector = dataSourceManagement.ui.DataSourceSelector;
   }
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index 4433d24cf..efb027343 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -27,9 +27,6 @@ import {
 } from '@elastic/eui';
 import round from 'lodash/round';
 import React, { useEffect, useMemo, useState } from 'react';
-import semver from 'semver';
-import { SavedObject } from '../../../../../../../src/core/public';
-import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources';
 import {
   DataSourceManagementPluginSetup,
   DataSourceViewConfig,
@@ -41,7 +38,7 @@ import {
 } from '../../../../../common/constants/data_sources';
 import { observabilityLogsID } from '../../../../../common/constants/shared';
 import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
-import * as pluginManifest from '../../../../../opensearch_dashboards.json';
+import { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import { coreRefs } from '../../../../framework/core_refs';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import {
@@ -127,17 +124,6 @@ export function ServiceView(props: ServiceViewProps) {
 
   const DataSourceMenu = props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
-  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
-    return (
-      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
-        installedPlugins.includes(plugin)
-      )
-    );
-  };
-
   const redirectToServicePage = (service: string) => {
     window.location.href = `#/services/${service}`;
   };
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index 7f7e0b390..8a226e0c4 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -20,16 +20,14 @@ import {
 } from '@elastic/eui';
 import round from 'lodash/round';
 import React, { useEffect, useState } from 'react';
-import semver from 'semver';
-import { MountPoint, SavedObject } from '../../../../../../../src/core/public';
-import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources/types';
+import { MountPoint } from '../../../../../../../src/core/public';
 import {
   DataSourceManagementPluginSetup,
   DataSourceViewConfig,
 } from '../../../../../../../src/plugins/data_source_management/public';
 import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
 import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
-import * as pluginManifest from '../../../../../opensearch_dashboards.json';
+import { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import { TraceAnalyticsCoreDeps, TraceAnalyticsMode } from '../../home';
 import { handleServiceMapRequest } from '../../requests/services_request_handler';
 import {
@@ -66,17 +64,6 @@ export function TraceView(props: TraceViewProps) {
   };
   const DataSourceMenu = props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
-  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
-    return (
-      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
-        installedPlugins.includes(plugin)
-      )
-    );
-  };
-
   const renderOverview = (fields: any) => {
     return (
       <EuiPanel>
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
index 6ab4f1de8..d88f0f8fe 100644
--- a/public/components/trace_analytics/components/traces/traces_content.tsx
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -6,11 +6,8 @@
 
 import { EuiAccordion, EuiPanel, EuiSpacer, PropertySort } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
-import semver from 'semver';
-import { SavedObject } from '../../../../../../../src/core/public';
-import { DataSourceAttributes } from '../../../../../../../src/plugins/data_source/common/data_sources';
 import { DataSourceViewConfig } from '../../../../../../../src/plugins/data_source_management/public';
-import * as pluginManifest from '../../../../../opensearch_dashboards.json';
+import { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import { coreRefs } from '../../../../framework/core_refs';
 import { handleTracesRequest } from '../../requests/traces_request_handler';
 import { getValidFilterFields } from '../common/filters/filter_helpers';
@@ -50,17 +47,6 @@ export function TracesContent(props: TracesProps) {
   const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled();
   const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
-  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
-    return (
-      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
-        installedPlugins.includes(plugin)
-      )
-    );
-  };
-
   useEffect(() => {
     chrome.setBreadcrumbs([
       ...(isNavGroupEnabled ? [] : [props.parentBreadcrumb]),
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index a47339e9a..9d5f2c187 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -7,24 +7,21 @@ import { EuiGlobalToastList } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React, { ReactChild, useEffect, useState } from 'react';
 import { HashRouter, Redirect, Route, RouteComponentProps } from 'react-router-dom';
-import semver from 'semver';
 import {
   ChromeBreadcrumb,
   ChromeStart,
   HttpStart,
   MountPoint,
   NotificationsStart,
-  SavedObject,
   SavedObjectsStart,
 } from '../../../../../src/core/public';
-import { DataSourceAttributes } from '../../../../../src/plugins/data_source/common/data_sources';
 import {
   DataSourceManagementPluginSetup,
   DataSourceSelectableConfig,
 } from '../../../../../src/plugins/data_source_management/public';
 import { DataSourceOption } from '../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
 import { DATA_PREPPER_INDEX_NAME } from '../../../common/constants/trace_analytics';
-import * as pluginManifest from '../../../opensearch_dashboards.json';
+import { dataSourceFilterFn } from '../../../common/utils/shared';
 import { coreRefs } from '../../framework/core_refs';
 import { FilterType } from './components/common/filters/filters';
 import { getAttributes } from './components/common/helper_functions';
@@ -262,17 +259,6 @@ export const Home = (props: HomeProps) => {
     DataSourceSelectableConfig
   >();
 
-  const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
-    return (
-      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
-        installedPlugins.includes(plugin)
-      )
-    );
-  };
-
   let flyout;
 
   if (currentSelectedService !== '') {

From 1d957ac4a4ac3d62e90aae3def9dee164da6d76c Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Mon, 22 Jul 2024 15:57:30 -0700
Subject: [PATCH 4/4] added shared filter

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 common/utils/shared.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/common/utils/shared.ts b/common/utils/shared.ts
index d85aab000..d8b919a4a 100644
--- a/common/utils/shared.ts
+++ b/common/utils/shared.ts
@@ -3,6 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import semver from 'semver';
+import { SavedObject } from '../../../../src/core/public';
+import { DataSourceAttributes } from '../../../../src/plugins/data_source/common/data_sources';
+import * as pluginManifest from '../../opensearch_dashboards.json';
 import { coreRefs } from '../../public/framework/core_refs';
 
 /**
@@ -62,3 +66,12 @@ export const basePathLink = (link: string): string => {
     return link;
   }
 };
+
+export const dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
+  const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
+  const installedPlugins = dataSource?.attributes?.installedPlugins || [];
+  return (
+    semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
+    pluginManifest.requiredOSDataSourcePlugins.every((plugin) => installedPlugins.includes(plugin))
+  );
+};