Version-decoupling for Observability

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))
+  );
+};

opensearch_dashboards.json

@@ -27,5 +27,8 @@
   ],
   "configPath": [
     "observability"
-  ]
+  ],
+  "supportedOSDataSourceVersions": ">=2.9.0",
+  "requiredOSDataSourcePlugins": ["opensearch-sql","opensearch-observability"]
+
 }

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]}

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"
                   >

public/components/metrics/index.tsx

@@ -20,18 +20,19 @@
 } 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 { dataSourceFilterFn } from '../../../common/utils/shared';
 import PPLService from '../../services/requests/ppl';
 import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
 import './index.scss';
 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;
   renderProps: RouteComponentProps<any, StaticContext, any>;
   pplService: PPLService;
   savedObjects: SavedObjects;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
@@ -82,6 +83,7 @@
       dispatch(setSelectedDataSourceMDSId(id));
     }, 300);
   };
+
   const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceSelectableConfig>();
   const dataSourceMenuComponent = useMemo(() => {
     return (
@@ -94,10 +96,11 @@
           fullWidth: true,
           // activeOption: dataSourceMDSId,
           onSelectedDataSources: onSelectedDataSource,
+          dataSourceFilter: dataSourceFilterFn,
         }}
       />
     );
   }, [setActionMenu, savedObjectsMDSClient.client, notifications]);
 
   return (
     <>

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]}

public/components/notebooks/components/paragraph_components/paragraphs.tsx

@@ -39,6 +39,7 @@
 } from '../../../../../common/constants/shared';
 import { ParaType } from '../../../../../common/types/notebooks';
 import { uiSettingsService } from '../../../../../common/utils';
+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';
@@ -206,7 +207,7 @@
       if (para.visSavedObjId !== '') setVisInput(JSON.parse(para.vizObjectInput));
       fetchVisualizations();
     }
   }, [dataSourceMDSId]);
 
   const createDashboardVizObject = (objectId: string) => {
     const vizUniqueId = htmlIdGenerator()();
@@ -549,6 +550,7 @@
     setDataSourceMDSId(dataConnectionId);
     handleSelectedDataSourceChange(dataConnectionId, dataConnectionLabel);
   };
+
   if (dataSourceEnabled) {
     DataSourceSelector = dataSourceManagement.ui.DataSourceSelector;
   }
@@ -569,6 +571,7 @@
                 { id: paradataSourceMDSId, label: dataSourceMDSLabel },
               ]
             }
+            dataSourceFilter={dataSourceFilterFn}
           />
         )}
         <EuiSpacer size="s" />

public/components/trace_analytics/components/services/service_view.tsx

@@ -37,6 +37,8 @@
   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 { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import { coreRefs } from '../../../../framework/core_refs';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import {
@@ -50,7 +52,6 @@
 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;
@@ -64,7 +65,7 @@
 
 export function ServiceView(props: ServiceViewProps) {
   const { mode, page, setCurrentSelectedService } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
@@ -260,6 +261,7 @@
             componentConfig={{
               activeOption: props.dataSourceMDSId,
               fullWidth: true,
+              dataSourceFilter: dataSourceFilterFn,
             }}
           />
         )}
@@ -382,12 +384,12 @@
 
   const [currentSpan, setCurrentSpan] = useState('');
   const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
   const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
     storedFilters ? JSON.parse(storedFilters) : []
   );
   const [DSL, setDSL] = useState<any>({});
 
   const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
     setSpanFilters(newFilters);
     sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
   };
@@ -425,7 +427,7 @@
     setDSL(spanDSL);
   }, [props.startTime, props.endTime, props.serviceName, spanFilters]);
 
   const addSpanFilter = (field: string, value: any) => {
     const newFilters = [...spanFilters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index === -1) {

public/components/trace_analytics/components/traces/trace_view.tsx

@@ -26,6 +26,8 @@
   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 { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import { TraceAnalyticsCoreDeps, TraceAnalyticsMode } from '../../home';
 import { handleServiceMapRequest } from '../../requests/services_request_handler';
 import {
@@ -37,7 +39,6 @@
 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,7 +64,7 @@
   };
   const DataSourceMenu = props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
   const renderOverview = (fields: any) => {
     return (
       <EuiPanel>
         <PanelTitle title="Overview" />
@@ -260,6 +261,7 @@
             componentConfig={{
               activeOption: props.dataSourceMDSId,
               fullWidth: true,
+              dataSourceFilter: dataSourceFilterFn,
             }}
           />
         )}

public/components/trace_analytics/components/traces/traces_content.tsx

@@ -7,14 +7,15 @@
 import { EuiAccordion, EuiPanel, EuiSpacer, PropertySort } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { DataSourceViewConfig } from '../../../../../../../src/plugins/data_source_management/public';
+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';
 import { filtersToDsl, processTimeStamp } from '../common/helper_functions';
 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 {
@@ -120,6 +121,7 @@ export function TracesContent(props: TracesProps) {
           componentConfig={{
             activeOption: dataSourceMDSId,
             fullWidth: true,
+            dataSourceFilter: dataSourceFilterFn,
           }}
         />
       )}

public/components/trace_analytics/home.tsx

@@ -6,7 +6,7 @@
 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 {
   ChromeBreadcrumb,
   ChromeStart,
@@ -21,6 +21,7 @@ import {
 } 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 { 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';
@@ -283,6 +284,7 @@ export const Home = (props: HomeProps) => {
             fullWidth: true,
             activeOption: dataSourceMDSId,
             onSelectedDataSources: onSelectedDataSource,
+            dataSourceFilter: dataSourceFilterFn,
           }}
         />
       )}