Metrics bug fix and unit tests

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

@@ -166,7 +166,6 @@ export const fetchVisualizationById = async (
       setIsError(`Could not locate saved visualization id:${savedVisualizationId}`);
       console.error('Issue in fetching the saved Visualization by Id', err);
     });
-
   return savedVisualization;
 };
 

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

@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import {
+  createPrometheusMetricById,
+  getNewVizDimensions,
+  mergeLayoutAndMetrics,
+  onTimeChange,
+  sortMetricLayout,
+  updateMetricsWithSelections,
+} from '../utils';
+import {
+  samplePanelVisualizations1,
+  samplenewDimensions1,
+  samplenewDimensions2,
+  samplePanelVisualizations2,
+  sampleMetricsVisualizations,
+  samplePrometheusVisualizationComponent,
+  samplePrometheusVisualizationId,
+  sampleLayout,
+  sampleVisualizationsList,
+  sampleMergedVisualizations,
+  samplePrometheusSampleUpdateWithSelections,
+  sampleSavedMetric,
+  sampleSavedMetricUpdate,
+} from '../../../../../test/metrics_contants';
+import _ from 'lodash';
+
+describe('Utils helper functions', () => {
+  configure({ adapter: new Adapter() });
+
+  it('validates onTimeChange function', () => {
+    const setRecentlyUsedRanges = jest.fn((x) => x);
+    const setStart = jest.fn();
+    const setEnd = jest.fn();
+    const recentlyUsedRanges: DurationRange[] = [];
+    onTimeChange(
+      '2022-01-30T18:44:40.577Z',
+      '2022-02-25T19:18:33.075Z',
+      recentlyUsedRanges,
+      setRecentlyUsedRanges,
+      setStart,
+      setEnd
+    );
+    expect(setRecentlyUsedRanges).toHaveBeenCalledWith([
+      { start: '2022-01-30T18:44:40.577Z', end: '2022-02-25T19:18:33.075Z' },
+    ]);
+    expect(setStart).toHaveBeenCalledWith('2022-01-30T18:44:40.577Z');
+    expect(setEnd).toHaveBeenCalledWith('2022-02-25T19:18:33.075Z');
+  });
+
+  it('validates getNewVizDimensions function', () => {
+    expect(getNewVizDimensions([])).toMatchObject({
+      x: 0,
+      y: 0,
+      w: 12,
+      h: 2,
+    });
+
+    expect(getNewVizDimensions(samplePanelVisualizations1)).toStrictEqual(samplenewDimensions1);
+    expect(getNewVizDimensions(samplePanelVisualizations2)).toStrictEqual(samplenewDimensions2);
+  });
+
+  it('validates sortMetricLayout function', () => {
+    expect(sortMetricLayout(_.shuffle(sampleMetricsVisualizations))).toStrictEqual(
+      sampleMetricsVisualizations
+    );
+
+    expect(sortMetricLayout(_.shuffle(sampleMetricsVisualizations))).toStrictEqual(
+      sampleMetricsVisualizations
+    );
+  });
+
+  it('validates mergeLayoutAndMetrics function', () => {
+    expect(mergeLayoutAndMetrics(sampleLayout, sampleVisualizationsList)).toStrictEqual(
+      sampleMergedVisualizations
+    );
+  });
+
+  it('validates createPrometheusMetricById function', () => {
+    expect(createPrometheusMetricById(samplePrometheusVisualizationId)).toStrictEqual(
+      samplePrometheusVisualizationComponent
+    );
+  });
+
+  it('validates updateMetricsWithSelections function', () => {
+    expect(
+      updateMetricsWithSelections(samplePrometheusVisualizationComponent, 'now-1d', 'now', '1h')
+    ).toStrictEqual(samplePrometheusSampleUpdateWithSelections);
+
+    expect(updateMetricsWithSelections(sampleSavedMetric, 'now-30m', 'now', '1m')).toStrictEqual(
+      sampleSavedMetricUpdate
+    );
+  });
+});

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

@@ -8,7 +8,12 @@ import {
   PPL_PROMETHEUS_CATALOG_REQUEST,
   REDUX_SLICE_METRICS,
 } from '../../../../../common/constants/metrics';
-import { pplServiceRequestor, getVisualizations, getNewVizDimensions } from '../../helpers/utils';
+import {
+  pplServiceRequestor,
+  getVisualizations,
+  getNewVizDimensions,
+  sortMetricLayout,
+} from '../../helpers/utils';
 import PPLService from '../../../../services/requests/ppl';
 import { MetricType } from '../../../../../common/types/metrics';
 
@@ -78,11 +83,7 @@ const updateLayoutBySelection = (state: any, newMetric: any) => {
 };
 
 const updateLayoutByDeSelection = (state: any, newMetric: any) => {
-  const sortedMetricsLayout = state.metricsLayout.sort((a: MetricType, b: MetricType) => {
-    if (a.y > b.y) return 1;
-    if (a.y < b.y) return -1;
-    else return 0;
-  });
+  const sortedMetricsLayout = sortMetricLayout(state.metricsLayout);
 
   let newMetricsLayout = [] as MetricType[];
   let heightSubtract = 0;
@@ -98,6 +99,15 @@ const updateLayoutByDeSelection = (state: any, newMetric: any) => {
   state.metricsLayout = newMetricsLayout;
 };
 
+const filterDeletedLayoutIds = (state: any, payload: any) => {
+  let deletedMetricIds: string[] = [];
+  const payloadIds = payload.map((metric: any) => metric.id);
+  state.metricsLayout.map((metricLayout: MetricType) => {
+    if (!payloadIds.includes(metricLayout.id)) deletedMetricIds.push(metricLayout.id);
+  });
+  deletedMetricIds.map((metricId: string) => updateLayoutByDeSelection(state, { id: metricId }));
+};
+
 export const metricSlice = createSlice({
   name: REDUX_SLICE_METRICS,
   initialState,
@@ -117,6 +127,7 @@ export const metricSlice = createSlice({
   extraReducers: (builder) => {
     builder.addCase(loadMetrics.fulfilled, (state, { payload }) => {
       state.metrics = payload;
+      filterDeletedLayoutIds(state, payload);
     });
   },
 });