Sidepanel update (#1230)

* Updating sidepanel Signed-off-by: Sean Li <lnse@amazon.com> * Removing mock metrics Signed-off-by: Sean Li <lnse@amazon.com> * Allowing horizontal scroll on metric lists Signed-off-by: Sean Li <lnse@amazon.com> * Minor changes Signed-off-by: Sean Li <lnse@amazon.com> Signed-off-by: Sean Li <lnse@amazon.com>
opensearch-project · Nov 3, 2022 · c12bc7f · c12bc7f
1 parent f71c81e
commit c12bc7f
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 2,602 deletions.
diff --git a/common/constants/metrics.ts b/common/constants/metrics.ts
@@ -4,6 +4,8 @@
  */
 
 // requests constants
+export const VISUALIZATION = 'viz';
+export const SAVED_VISUALIZATION = 'savedVisualization';
 export const PPL_PROMETHEUS_CATALOG_REQUEST =
   'show catalogs | where CONNECTOR_TYPE="PROMETHEUS" | fields CATALOG_NAME';
 

diff --git a/public/components/metrics/helpers/utils.tsx b/public/components/metrics/helpers/utils.tsx
@@ -7,29 +7,20 @@ import dateMath from '@elastic/datemath';
 import { ShortDate } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import _ from 'lodash';
-import { Moment } from 'moment-timezone';
 import React from 'react';
-import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
-import { PPL_DATE_FORMAT } from '../../../../common/constants/shared';
+import { Layout } from 'react-grid-layout';
+import { VISUALIZATION, SAVED_VISUALIZATION } from '../../../../common/constants/metrics';
+import {
+  EVENT_ANALYTICS,
+  OBSERVABILITY_BASE,
+  SAVED_OBJECTS,
+} from '../../../../common/constants/shared';
 import PPLService from '../../../services/requests/ppl';
 import { CoreStart } from '../../../../../../src/core/public';
 import { MetricType } from '../../../../common/types/metrics';
-import { Layout } from 'react-grid-layout';
 import { VisualizationType } from '../../../../common/types/custom_panels';
 import { DEFAULT_METRIC_HEIGHT, DEFAULT_METRIC_WIDTH } from '../../../../common/constants/metrics';
 
-export const convertDateTime = (datetime: string, isStart = true, formatted = true) => {
-  let returnTime: undefined | Moment;
-  if (isStart) {
-    returnTime = dateMath.parse(datetime);
-  } else {
-    returnTime = dateMath.parse(datetime, { roundUp: true });
-  }
-
-  if (formatted) return returnTime!.format(PPL_DATE_FORMAT);
-  return returnTime;
-};
-
 export const onTimeChange = (
   start: ShortDate,
   end: ShortDate,
@@ -50,16 +41,20 @@ export const onTimeChange = (
 
 // PPL Service requestor
 export const pplServiceRequestor = (pplService: PPLService, finalQuery: string) => {
-  return pplService.fetch({ query: finalQuery, format: 'viz' }).catch((error: Error) => {
+  return pplService.fetch({ query: finalQuery, format: VISUALIZATION }).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);
-  });
+  return http
+    .get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}`, {
+      query: { objectType: [SAVED_VISUALIZATION] },
+    })
+    .catch((err) => {
+      console.error('Issue in fetching all saved visualizations', err);
+    });
 };
 
 interface boxType {

diff --git a/public/components/metrics/redux/slices/metrics_slice.ts b/public/components/metrics/redux/slices/metrics_slice.ts
@@ -29,12 +29,15 @@ export const loadMetrics = createAsyncThunk('metrics/loadData', async (services:
 
 const fetchCustomMetrics = async (http: any) => {
   const dataSet = await getVisualizations(http);
-
-  const normalizedData = dataSet.visualizations.map((obj: any) => ({
-    id: obj.id,
-    name: obj.name,
+  const savedMetrics = dataSet.observabilityObjectList.filter(
+    (obj: any) => obj.savedVisualization.sub_type === 'metric'
+  );
+  const normalizedData = savedMetrics.map((obj: any) => ({
+    id: obj.objectId,
+    name: obj.savedVisualization.name,
     catalog: 'CUSTOM_METRICS',
-    type: obj.type,
+    type: obj.savedVisualization.type,
+    recentlyCreated: (Date.now() - obj.createdTimeMs) / 36e5 <= 12,
   }));
   return normalizedData;
 };
@@ -52,6 +55,7 @@ const fetchRemoteMetrics = async (pplService: any) => {
       name: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
       catalog: `${catalog.CATALOG_NAME}`,
       type: obj.TABLE_TYPE,
+      recentlyCreated: false,
     }));
     dataSet.push(normalizedData);
   }
@@ -122,11 +126,21 @@ export const { deSelectMetric, selectMetric, updateMetricsLayout } = metricSlice
 export const metricsStateSelector = (state) => state.metrics;
 
 export const availableMetricsSelector = (state) =>
-  state.metrics.metrics.filter((metric) => !state.metrics.selected.includes(metric.id));
+  state.metrics.metrics.filter(
+    (metric) => !state.metrics.selected.includes(metric.id) && !metric.recentlyCreated
+  );
 
 export const selectedMetricsSelector = (state) =>
   state.metrics.metrics.filter((metric) => state.metrics.selected.includes(metric.id));
 
+export const recentlyCreatedMetricsSelector = (state) =>
+  state.metrics.metrics.filter(
+    (metric) => !state.metrics.selected.includes(metric.id) && metric.recentlyCreated
+  );
+
+export const allAvailableMetricsSelector = (state) =>
+  state.metrics.metrics.filter((metric) => !state.metrics.selected.includes(metric.id));
+
 export const metricsLayoutSelector = (state) => state.metrics.metricsLayout;
 
 export default metricSlice.reducer;