[Metrics] Adding API Connection to Metrics Sidebar

dashboards-observability/common/constants/metrics.ts

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const SELECTED_METRICS = 'selectedMetrics';
-export const RECENTLY_CREATED_METRICS = 'unselectedMetrics';
-export const AVAILABLE_METRICS = 'availableMetrics';
+// requests constants
+export const PPL_PROMETHEUS_CATALOG_REQUEST =
+  'show catalogs | where CONNECTOR_TYPE="PROMETHEUS" | fields CATALOG_NAME';
 
 // redux
 export const REDUX_SLICE_METRICS = 'metrics';

dashboards-observability/public/components/app.tsx

@@ -73,6 +73,7 @@ export const App = ({
                       chrome={chrome}
                       parentBreadcrumb={parentBreadcrumb}
                       renderProps={props}
+                      pplService={pplService}
                     />
                   );
                 }}

dashboards-observability/public/components/metrics/helpers/utils.tsx

@@ -10,7 +10,6 @@ import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import _ from 'lodash';
 import { Moment } from 'moment-timezone';
 import React from 'react';
-import { SavedVisualizationType } from 'common/types/custom_panels';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared';
 import PPLService from '../../../services/requests/ppl';
@@ -45,3 +44,17 @@ export const onTimeChange = (
   setEnd(end);
   setRecentlyUsedRanges(recentlyUsedRange.slice(0, 9));
 };
+
+// PPL Service requestor
+export const pplServiceRequestor = (pplService: PPLService, finalQuery: string) => {
+  return pplService.fetch({ query: finalQuery, format: 'viz' }).catch((error: Error) => {
+    console.error(error);
+  });
+};
+
+// Observability backend to fetch visualizations/custom metrics
+export const getVisualizations = (http: CoreStart['http']) => {
+  return http.get(`${CUSTOM_PANELS_API_PREFIX}/visualizations/`).catch((err) => {
+    console.error('Issue in fetching all saved visualizations', err);
+  });
+};

dashboards-observability/public/components/metrics/index.tsx

@@ -2,7 +2,6 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-/* eslint-disable no-console */
 
 import './index.scss';
 import {
@@ -35,16 +34,17 @@ import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
 import { onTimeChange } from './helpers/utils';
 import { Sidebar } from './sidebar/sidebar';
 import { EmptyMetricsView } from './view/empty_view';
-import { selectMetrics } from './redux/slices/metrics_slice';
+import PPLService from '../../services/requests/ppl';
 
 interface MetricsProps {
   http: CoreStart['http'];
   chrome: CoreStart['chrome'];
   parentBreadcrumb: ChromeBreadcrumb;
   renderProps: RouteComponentProps<any, StaticContext, any>;
+  pplService: PPLService;
 }
 
-export const Home = ({ http, chrome, parentBreadcrumb, renderProps }: MetricsProps) => {
+export const Home = ({ http, chrome, parentBreadcrumb, renderProps, pplService }: MetricsProps) => {
   // Date picker constants
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
   const [start, setStart] = useState<ShortDate>('now-30m');
@@ -53,26 +53,6 @@ export const Home = ({ http, chrome, parentBreadcrumb, renderProps }: MetricsPro
 
   // Side bar constants
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
-  const metricsList = useSelector(selectMetrics);
-
-  // Using Visualizations for recently created custom metrics for now
-  const [visualizationsList, setVisualizationsList] = useState<any>([]);
-  // Fetch Saved Visualizations
-  const fetchVisualizations = async () => {
-    let savedVisualizations;
-    await http
-      .get(`${CUSTOM_PANELS_API_PREFIX}/visualizations/`)
-      .then((res) => {
-        setVisualizationsList(res.visualizations);
-      })
-      .catch((err) => {
-        console.error('Issue in fetching all saved visualizations', err);
-      });
-    return savedVisualizations;
-  };
-  useEffect(() => {
-    fetchVisualizations();
-  }, []);
 
   // Date Picker functions
   // Empty functions for now
@@ -118,12 +98,7 @@ export const Home = ({ http, chrome, parentBreadcrumb, renderProps }: MetricsPro
                 <div className="dscAppContainer">
                   <div className="col-md-3 dscSidebar__container dscCollapsibleSidebar">
                     <div className="">
-                      {!isSidebarClosed && (
-                        <Sidebar
-                          metricsList={metricsList}
-                          visualizationsList={visualizationsList}
-                        />
-                      )}
+                      {!isSidebarClosed && <Sidebar http={http} pplService={pplService} />}
                       <EuiButtonIcon
                         iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
                         iconSize="m"

dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts

@@ -3,70 +3,85 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createSlice } from '@reduxjs/toolkit';
-import { forEach } from 'lodash';
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import {
-  SELECTED_METRICS,
-  RECENTLY_CREATED_METRICS,
-  AVAILABLE_METRICS,
+  PPL_PROMETHEUS_CATALOG_REQUEST,
   REDUX_SLICE_METRICS,
 } from '../../../../../common/constants/metrics';
+import { pplServiceRequestor, getVisualizations } from '../../helpers/utils';
+import PPLService from '../../../../services/requests/ppl';
 
-const METRIC_NAMES_PPL = 'source = prometheus.information_schema.tables';
-import { metricNamesTablePPL } from './mockMetrics';
+const initialState = {
+  pplService: PPLService,
+  metrics: [],
+  selected: [],
+};
 
-const initialMetrics = {
-  [SELECTED_METRICS]: [],
-  [RECENTLY_CREATED_METRICS]: [],
-  [AVAILABLE_METRICS]: metricNamesTablePPL.datarows,
+export const loadMetrics = createAsyncThunk('metrics/loadData', async (services: any) => {
+  const { http, pplService } = services;
+  const customData = await fetchCustomMetrics(http);
+  const remoteData = await fetchRemoteMetrics(pplService);
+
+  return Promise.all([customData, ...remoteData]).then((datasets) => datasets.flat());
+});
+
+const fetchCustomMetrics = async (http: any) => {
+  const dataSet = await getVisualizations(http);
+
+  const normalizedData = dataSet.visualizations.map((obj: any) => ({
+    id: obj.id,
+    name: obj.name,
+    catalog: 'CUSTOM_METRICS',
+    type: obj.type,
+  }));
+  return normalizedData;
 };
 
-const initialState = {
-  metrics: { ...initialMetrics },
+const fetchRemoteMetrics = async (pplService: any) => {
+  const dataSet = [];
+  const catalogs = await pplServiceRequestor(pplService, PPL_PROMETHEUS_CATALOG_REQUEST);
+  for (const catalog of catalogs.jsonData) {
+    const catalogData = await pplServiceRequestor(
+      pplService,
+      `source = ${catalog.CATALOG_NAME}.information_schema.tables`
+    );
+    const normalizedData = catalogData.jsonData.map((obj: any) => ({
+      id: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
+      name: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
+      catalog: `${catalog.CATALOG_NAME}`,
+      type: obj.TABLE_TYPE,
+    }));
+    dataSet.push(normalizedData);
+  }
+  return dataSet;
 };
 
 export const metricSlice = createSlice({
   name: REDUX_SLICE_METRICS,
   initialState,
   reducers: {
-    init: (state) => {
-      state.metrics = {
-        ...initialMetrics,
-      };
+    selectMetric: (state, { payload }) => {
+      state.selected.push(payload.id);
     },
-    updateMetrics: (state, { payload }) => {
-      state.metrics = {
-        ...state.metrics,
-        ...payload.data,
-      };
-      console.log('updated metrics');
-      console.log(state);
-    },
-    reset: (state) => {
-      state.metrics = {
-        ...initialMetrics,
-      };
-    },
-    remove: (state) => {
-      delete state.metrics;
-    },
-    sortMetrics: (state, { payload }) => {
-      forEach(payload.data, (toSort: string) => {
-        state.metrics[toSort].sort((prev: any, cur: any) => cur[2].localeCompare(prev[2]));
-      });
-    },
-    fetchMetrics: (state, { payload }) => {
-      state = {
-        ...state,
-        ...payload.data,
-      };
+    deSelectMetric: (state, { payload }) => {
+      state.selected = state.selected.filter((id) => id !== payload.id);
     },
   },
-  extraReducers: (builder) => {},
+  extraReducers: (builder) => {
+    builder.addCase(loadMetrics.fulfilled, (state, { payload }) => {
+      state.metrics = payload;
+    });
+  },
 });
 
-export const { init, reset, remove, updateMetrics, sortMetrics } = metricSlice.actions;
+export const { deSelectMetric, selectMetric } = metricSlice.actions;
+
+export const metricsStateSelector = (state) => state.metrics;
+
+export const availableMetricsSelector = (state) =>
+  state.metrics.metrics.filter((metric) => !state.metrics.selected.includes(metric.id));
 
-export const selectMetrics = (state) => state.metrics;
+export const selectedMetricsSelector = (state) =>
+  state.metrics.metrics.filter((metric) => state.metrics.selected.includes(metric.id));
 
 export default metricSlice.reducer;