Bugfix/metric-loading-loop

public/components/custom_panels/helpers/utils.tsx

@@ -167,14 +167,14 @@
   metricVisualization = false
 ) => {
   const finalQuery = metricVisualization
     ? query
     : queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
 
   const res = await pplService.fetch({ query: finalQuery, format: 'jdbc' });
 
   if (res === undefined) throw new Error('Please check the validity of PPL Filter');
 
   return res;
 };
 
 // Fetches savedVisualization by Id and runs getQueryResponse
@@ -225,13 +225,13 @@
 
   const updatedVisualizationQuery =
     span !== undefined
       ? updateQuerySpanInterval(visualization.query, visualization.timeField, span, resolution)
       : visualization.query;
 
   setVisualizationMetaData({ ...visualization, query: updatedVisualizationQuery });
 
   try {
     const queryData = await getQueryResponse(
       pplService,
       updatedVisualizationQuery,
       visualization.type,
@@ -240,44 +240,53 @@
       filterQuery,
       visualization.timeField
     );
     setVisualizationData(queryData);
   } catch (error) {
     setIsError({ error });
   }
   setIsLoading(false);
 };
 
 const dynamicLayoutFromQueryData = (queryData) => {
   const labelCount = queryData.jsonData.length;
   const legendLines = min([labelCount, 10]);
 
   const height = 230 + legendLines * 30;
   const y = -0.35 + -0.15 * legendLines;
   return {
     height,
     legend: { orientation: 'h', x: 0, y },
   };
 };
 
-const createCatalogVisualizationMetaData = (
-  catalogSource: string,
-  visualizationQuery: string,
-  visualizationType: string,
-  visualizationTimeField: string,
-  queryData: object
-) => {
+const createCatalogVisualizationMetaData = ({
+  catalogSource,
+  query,
+  type,
+  subType,
+  timeField,
+  queryData,
+}: {
+  catalogSource: string;
+  query: string;
+  type: string;
+  subType: string;
+  timeField: string;
+  queryData: object;
+}) => {
   return {
     name: catalogSource,
     description: '',
-    query: visualizationQuery,
-    type: visualizationType,
+    query,
+    type,
+    subType,
     selected_date_range: {
       start: 'now/y',
       end: 'now',
       text: '',
     },
     selected_timestamp: {
-      name: visualizationTimeField,
+      name: timeField,
       type: 'timestamp',
     },
     selected_fields: {
@@ -332,6 +341,7 @@
 
   const visualizationType = 'line';
   const visualizationTimeField = '@timestamp';
+  const visualizationSubType = visualization.subType;
 
   const visualizationQuery = updateCatalogVisualizationQuery({
     ...visualization.queryMetaData,
@@ -341,11 +351,11 @@
     resolution,
   });
 
   setVisualizationTitle(visualization.name);
   setVisualizationType(visualizationType);
 
   try {
     const queryData = await getQueryResponse(
       pplService,
       visualizationQuery,
       visualizationType,
@@ -355,23 +365,23 @@
       visualizationTimeField,
       true
     );
     setVisualizationData(queryData);
 
-    const visualizationMetaData = createCatalogVisualizationMetaData(
+    const visualizationMetaData = createCatalogVisualizationMetaData({
       catalogSource,
-      visualizationQuery,
-      visualizationType,
-      visualizationTimeField,
-      queryData
-    );
+      query: visualizationQuery,
+      type: visualizationType,
+      subType: visualization.subType,
+      timeField: visualizationTimeField,
+      queryData,
+    });
 
-    console.log('renderCatalogVisualization', { visualizationMetaData });
     setVisualizationMetaData(visualizationMetaData);
   } catch (error) {
     setIsError({ error });
   }
 
   setIsLoading(false);
 };
 
 // Function to store recently used time filters and set start and end time.
@@ -405,7 +415,7 @@
     selected_fields: visualization.savedVisualization.selected_fields,
     userConfigs: visualization.savedVisualization.userConfigs || {},
     subType: visualization.savedVisualization.hasOwnProperty('subType')
       ? visualization.savedVisualization.subType
       : '',
     units_of_measure: visualization.savedVisualization.hasOwnProperty('units_of_measure')
       ? visualization.savedVisualization.units_of_measure

public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx

@@ -37,7 +37,10 @@
 import { VizContainerError } from '../../../../../common/types/custom_panels';
 import { metricQuerySelector } from '../../../metrics/redux/slices/metrics_slice';
 import { coreRefs } from '../../../../framework/core_refs';
-import { PROMQL_METRIC_SUBTYPE } from '../../../../../common/constants/shared';
+import {
+  observabilityMetricsID,
+  PROMQL_METRIC_SUBTYPE,
+} from '../../../../../common/constants/shared';
 
 /*
  * Visualization container - This module is a placeholder to add visualizations in react-grid-layout
@@ -78,6 +81,7 @@
   removeVisualization?: (visualizationId: string) => void;
   catalogVisualization?: boolean;
   inlineEditor?: JSX.Element;
+  actionMenuType?: string;
 }
 
 export const VisualizationContainer = ({
@@ -98,6 +102,7 @@
   removeVisualization,
   catalogVisualization,
   inlineEditor,
+  actionMenuType,
 }: Props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [visualizationTitle, setVisualizationTitle] = useState('');
@@ -175,7 +180,11 @@
       disabled={editMode}
       onClick={() => {
         closeActionsMenu();
-        onEditClick(savedVisualizationId);
+        if (visualizationMetaData?.subType === PROMQL_METRIC_SUBTYPE) {
+          window.location.assign(`${observabilityMetricsID}#/${savedVisualizationId}`);
+        } else {
+          onEditClick(savedVisualizationId);
+        }
       }}
     >
       Edit
@@ -217,16 +226,19 @@
     </EuiContextMenuItem>,
   ];
 
-  if (visualizationMetaData?.subType === PROMQL_METRIC_SUBTYPE) {
+  if (
+    visualizationMetaData?.subType === PROMQL_METRIC_SUBTYPE &&
+    actionMenuType === 'metricsGrid'
+  ) {
     popoverPanel = [showPPLQueryPanel];
   } else if (usedInNotebooks) {
     popoverPanel = [popoverPanel[0]];
   }
 
   const fetchVisualization = async () => {
     return savedVisualizationId
       ? await fetchVisualizationById(http, savedVisualizationId, setIsError)
       : inputMetaData;
   };
 
   const loadVisaulization = async () => {
@@ -236,7 +248,7 @@
     if (!visualization && !savedVisualizationId) return;
 
     if (visualization.subType === PROMQL_METRIC_SUBTYPE) {
       renderCatalogVisualization({
         visualization,
         http,
         pplService,

public/components/metrics/redux/slices/metrics_slice.ts

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { keyBy, mergeWith, pick, sortBy, merge } from 'lodash';
+import { createSlice } from '@reduxjs/toolkit';
+import { keyBy, mergeWith, pick, sortBy } from 'lodash';
 import { ouiPaletteColorBlindBehindText } from '@elastic/eui';
 import {
   OBSERVABILITY_CUSTOM_METRIC,
@@ -18,7 +18,7 @@
 import { pplServiceRequestor } from '../../helpers/utils';
 import { coreRefs } from '../../../../framework/core_refs';
 import { PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE } from '../../../../../common/constants/shared';
-import { getOSDHttp, getPPLService } from '../../../../../common/utils';
+import { getPPLService } from '../../../../../common/utils';
 
 export interface IconAttributes {
   color: string;
@@ -38,6 +38,14 @@
   return Object.fromEntries(keyedIcons);
 };
 
+export interface DateSpanFilter {
+  start: string;
+  end: string;
+  span: number;
+  resolution: string;
+  recentlyUsedRanges: string[];
+}
+
 const initialState = {
   metrics: {},
   selectedIds: [],
@@ -62,12 +70,17 @@
     ...srcValue,
     availableAttributes:
       objValue?.availableAttributes?.length > 0
         ? objValue.availableAttributes
         : srcValue.availableAttributes,
   };
 };
+export const mergeMetrics = (newMetricMap) => (dispatch, getState) => {
+  const { metrics } = getState().metrics;
+  const modifiableMetricsMap = { ...metrics };
 
-const now = () => new Date().getMilliseconds();
+  const mergedMetrics = mergeWith(modifiableMetricsMap, newMetricMap, mergeMetricCustomizer);
+  dispatch(setMetrics(mergedMetrics));
+};
 
 export const loadMetrics = () => async (dispatch) => {
   const pplService = getPPLService();
@@ -81,15 +94,15 @@
     setDataSourceIcons(coloredIconsFrom([OBSERVABILITY_CUSTOM_METRIC, ...remoteDataSources]))
   );
 
-  const remoteDataRequests = fetchRemoteMetrics(remoteDataSources);
+  const remoteDataRequests = await fetchRemoteMetrics(remoteDataSources);
   const metricsResultSet = await Promise.all([customDataRequest, ...remoteDataRequests]);
   const metricsResult = metricsResultSet.flat();
 
   const metricsMapById = keyBy(metricsResult.flat(), 'id');
-  await dispatch(mergeMetrics(metricsMapById));
+  dispatch(mergeMetrics(metricsMapById));
 
   const sortedIds = sortBy(metricsResult, 'catalog', 'id').map((m) => m.id);
-  await dispatch(setSortedIds(sortedIds));
+  dispatch(setSortedIds(sortedIds));
 };
 
 const fetchCustomMetrics = async () => {
@@ -150,17 +163,9 @@
   name: REDUX_SLICE_METRICS,
   initialState,
   reducers: {
-    mergeMetrics: (state, { payload }) => {
-      const { metrics } = state;
-      const modifiableMetricsMap = { ...metrics };
-
-      const mergedMetrics = mergeWith(modifiableMetricsMap, payload, mergeMetricCustomizer);
-      state.metrics = mergedMetrics;
+    setMetrics: (state, { payload }) => {
+      state.metrics = payload;
     },
-
-    // setMetrics: (state, { payload }) => {
-    //   state.metrics = payload;
-    // },
     setMetric: (state, { payload }) => {
       state.metrics[payload.id] = payload;
     },
@@ -177,20 +182,20 @@
     },
 
     deSelectMetric: (state, { payload }) => {
       state.selectedIds = state.selectedIds.filter((id) => id !== payload);
     },
 
     moveMetric: (state, { payload: { source, destination } }) => {
       const movingId = state.selectedIds.splice(source.index, 1);
       state.selectedIds.splice(destination.index, 0, movingId[0]);
     },
 
     setSearch: (state, { payload }) => {
       state.search = payload;
     },
 
     updateMetric: (state, { payload: { id, metric } }) => {
       state.metrics[id] = metric;
     },
 
     setDataSources: (state, { payload }) => {
@@ -202,15 +207,19 @@
     setDataSourceIcons: (state, { payload }) => {
       state.dataSourceIcons = payload;
     },
+    setDateSpan: (state, { payload }) => {
+      state.dateSpanFilter = { ...state.dateSpanFilter, ...payload };
+    },
+    setRefresh: (state) => {
+      state.refresh = Date.now();
+    },
   },
 });
 
 export const {
-  setMetrics,
   deSelectMetric,
   clearSelectedMetrics,
-
-  mergeMetrics,
+  selectMetric,
   moveMetric,
   setSearch,
   setDateSpan,
@@ -222,7 +231,7 @@
 
 /** private actions */
 
-const { selectMetric, setMetric, setSortedIds } = metricSlice.actions;
+const { setMetrics, setMetric, setSortedIds } = metricSlice.actions;
 
 const getAvailableAttributes = (id, metricIndex) => async (dispatch, getState) => {
   const { toasts } = coreRefs;
@@ -234,13 +243,13 @@
       format: 'jdbc',
     });
     const availableAttributes = columnSchema.jsonData
       .map((sch) => sch.COLUMN_NAME)
       .filter((col) => col[0] !== '@');
 
     dispatch(updateMetricQuery(id, { availableAttributes }));
   } catch (e) {
     toasts?.addDanger(`An error occurred retrieving attributes for metric ${id} `);
     console.error(`An error occurred retrieving attributes for metric ${id} `, e);
   }
 };
 
@@ -255,7 +264,7 @@
 };
 
 export const removeSelectedMetric = ({ id }) => async (dispatch, getState) => {
   dispatch(deSelectMetric(id));
 };
 
 export const updateMetricQuery = (id, { availableAttributes, aggregation, attributesGroupBy }) => (
@@ -275,7 +284,7 @@
 
 export const searchOrTrue = (search, metric) => {
   if (search === '') return true;
   return metric.name.match(new RegExp(search, 'i'));
 };
 
 export const selectMetricByIdSelector = (id) => (state) => {
@@ -295,16 +304,12 @@
 export const selectedMetricsSelector = (state) =>
   pick(state.metrics.metrics, state.metrics.selectedIds) ?? {};
 
-export const selectedMetricByIdSelector = (id) => (state) => state.metrics.metrics[id];
-
 export const selectedMetricsIdsSelector = (state) => state.metrics.selectedIds ?? [];
 
 export const searchSelector = (state) => state.metrics.search;
 
 export const metricIconsSelector = (state) => state.metrics.dataSourceIcons;
 
-export const metricsLayoutSelector = (state) => state.metrics.metricsLayout;
-
 export const dateSpanFilterSelector = (state) => state.metrics.dateSpanFilter;
 
 export const refreshSelector = (state) => state.metrics.refresh;

public/components/metrics/sidebar/sidebar.tsx

@@ -43,10 +43,12 @@
 
   useEffect(() => {
     if (additionalMetric) {
-      dispatch(clearSelectedMetrics());
-      dispatch(addSelectedMetric(additionalMetric));
+      (async function () {
+        await dispatch(clearSelectedMetrics());
+        await dispatch(addSelectedMetric(additionalMetric));
+      })();
     }
-  }, [additionalMetric]);
+  }, [additionalMetric?.id]);
 
   const selectedMetricsList = useMemo(() => {
     return selectedMetricsIds.map((id) => selectedMetrics[id]).filter((m) => m); // filter away null entries
@@ -55,7 +57,7 @@
   const handleAddMetric = (metric: any) => dispatch(addSelectedMetric(metric));
 
   const handleRemoveMetric = (metric: any) => {
     dispatch(removeSelectedMetric(metric));
   };
 
   return (

public/components/metrics/view/metrics_grid.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useMemo } from 'react';
-import { EuiDragDropContext, EuiDraggable, EuiDroppable } from '@elastic/eui';
+import { EuiContextMenuItem, EuiDragDropContext, EuiDraggable, EuiDroppable } from '@elastic/eui';
 import { useObservable } from 'react-use';
 import { connect } from 'react-redux';
 import { CoreStart } from '../../../../../../src/core/public';
@@ -53,14 +53,27 @@
   },
 });
 
+const promQLActionMenu = [
+  <EuiContextMenuItem
+    data-test-subj="showCatalogPPLQuery"
+    key="view_query"
+    onClick={() => {
+      closeActionsMenu();
+      showModal('catalogModal');
+    }}
+  >
+    View query
+  </EuiContextMenuItem>,
+];
+
 const navigateToEventExplorerVisualization = (savedVisualizationId: string) => {
   window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
 };
 
 export const InnerGridVisualization = ({ id, idx, dateSpanFilter, metric, refresh }) => {
   if (!metric) return <></>;
 
   return (
     <EuiDraggable key={id} index={idx} draggableId={id}>
       <VisualizationContainer
         key={id}
@@ -80,6 +93,7 @@
         inlineEditor={
           metric.subType === PROMQL_METRIC_SUBTYPE && <MetricsEditInline visualization={metric} />
         }
+        actionMenuType="metricsGrid"
       />
     </EuiDraggable>
   );
@@ -99,15 +113,15 @@
   const isLocked = useObservable(chrome!.getIsNavDrawerLocked$());
 
   const onDragEnd = ({ source, destination }) => {
     moveMetric({ source, destination });
   };
 
   const visualizationComponents = useMemo(() => {
     if (selectedMetrics.length < 1) return <EmptyMetricsView />;
 
     return selectedMetricsIds.map((id, idx) => {
       const metric = allMetrics[id];
       return (
         <GridVisualization
           id={id}
           idx={idx}

public/services/requests/ppl.ts

@@ -9,6 +9,7 @@ import { PPL_BASE, PPL_SEARCH } from '../../../common/constants/shared';
 /* eslint-disable import/no-default-export */
 export default class PPLService {
   private http;
+
   constructor(http: CoreStart['http']) {
     this.http = http;
   }
@@ -20,7 +21,6 @@ export default class PPLService {
     },
     errorHandler?: (error: any) => void
   ) => {
-    console.log('real fetch');
     return this.http
       .post(`${PPL_BASE}${PPL_SEARCH}`, {
         body: JSON.stringify(params),