Metrics Inline Editor and PromQL Parsing

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>

common/constants/metrics.ts

@@ -24,13 +24,13 @@ export const resolutionOptions = [
   { value: 'y', text: 'years' },
 ];
 
-export const DEFAULT_METRIC_HEIGHT = 2;
+export const DEFAULT_METRIC_HEIGHT = 3;
 export const DEFAULT_METRIC_WIDTH = 12;
 
 export const AGGREGATION_OPTIONS = [
-  { label: 'avg' },
-  { label: 'sum' },
-  { label: 'count' },
-  { label: 'min' },
-  { label: 'max' },
+  { value: 'avg', text: 'avg()' },
+  { value: 'sum', text: 'sum()' },
+  { value: 'count', text: 'count()' },
+  { value: 'min', text: 'min()' },
+  { value: 'max', text: 'max()' },
 ];

common/constants/shared.ts

@@ -203,7 +203,7 @@ export const DEFAULT_CHART_STYLES: DefaultChartStylesProps = {
   FillOpacity: 100,
   MarkerSize: 5,
   ShowLegend: 'show',
-  LegendPosition: 'v',
+  LegendPosition: 'h',
   LabelAngle: 0,
   DefaultSortSectors: 'largest_to_smallest',
   DefaultModeScatter: 'markers',

common/types/metrics.ts

@@ -5,18 +5,18 @@
 
 import { VisualizationType } from './custom_panels';
 
-export interface MetricData {
-  metricId: string;
-  metricType: 'savedCustomMetric' | 'prometheusMetric';
-  metricName: string;
-}
-
 export interface MetricType extends VisualizationType {
   id: string;
   savedVisualizationId: string;
   x: number;
   y: number;
   w: number;
   h: number;
-  metricType: 'savedCustomMetric' | 'prometheusMetric';
+  query: {
+    type: 'savedCustomMetric' | 'prometheusMetric';
+    aggregation: string;
+    attributesGroupBy: string[];
+    catalog: string;
+    availableAttributes?: string[];
+  };
 }

public/components/application_analytics/helpers/utils.tsx

@@ -218,7 +218,7 @@ export const calculateAvailability = async (
     const visData = await fetchVisualizationById(http, visualizationId, (value: string) =>
       console.error(value)
     );
-    const userConfigs = visData.user_configs ? JSON.parse(visData.user_configs) : {};
+    const userConfigs = visData.user_configs || {};
     // If there are levels, we get the current value
     if (userConfigs.availabilityConfig?.hasOwnProperty('level')) {
       // For every saved visualization with availability levels we push it to visWithAvailability

public/components/custom_panels/helpers/utils.tsx

@@ -397,14 +397,13 @@ export const renderCatalogVisualization = async ({
   const catalogSourceName = catalogSource.split('.')[0];
   const catalogTableName = catalogSource.split('.')[1];
 
-  const defaultAggregation = 'avg'; // pass in attributes to this function
-  const attributes: string[] = [];
+  const defaultAggregation = 'avg';
 
   const visualizationQuery = updateCatalogVisualizationQuery({
     catalogSourceName,
     catalogTableName,
-    aggregation: defaultAggregation,
-    attributesGroupBy: attributes,
+    aggregation: queryMetaData.aggregation,
+    attributesGroupBy: queryMetaData.attributesGroupBy,
     startTime,
     endTime,
     spanParam,

public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable no-console */
 
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
@@ -109,6 +108,7 @@ export const PanelGrid = (props: PanelGridProps) => {
           pplFilterValue={pplFilterValue}
           showFlyout={showFlyout}
           removeVisualization={removeVisualization}
+          contextMenuId="visualization"
         />
       )
     );

public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx

@@ -105,6 +105,7 @@ export const PanelGridSO = (props: PanelGridProps) => {
           pplFilterValue={pplFilterValue}
           showFlyout={showFlyout}
           removeVisualization={removeVisualization}
+          contextMenuId="visualization"
         />
       )
     );

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

@@ -58,6 +58,7 @@ describe('Visualization Container Component', () => {
         showFlyout={showFlyout}
         removeVisualization={removeVisualization}
         onEditClick={onEditClick}
+        contextMenuId="visualization"
       />
     );
     wrapper.update();

public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss

@@ -34,6 +34,43 @@
   text-align: center;
 }
 
+.metricVis {
+  #metricsEditInline {
+    /* for ... reasons (?), margin here causes
+       other rules to activate... providing
+       a more-correct display.
+     */
+    margin: 0 0px;
+  }
+
+
+    #aggregation__field {
+      .euiFormLabel {
+        width: 130px
+      }
+    }
+
+  //  #explorerPlotComponent {
+  //    //overflow: hidden;
+  //  }
+  //
+    .svg-container {
+      //height: 425px !important;
+      margin-top: -25px !important;
+    }
+
+  //  .main-svg {
+  //    //margin-top: -10px;
+  //    //height: calc(100% - 10px);
+  //  }
+  //
+
+  .main-svg {
+    margin-top: -10px;
+    //height: calc(100% - 60px);
+  }
+}
+
 %center-div {
   top: 50%;
   left: 50%;

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

@@ -26,13 +26,16 @@ import {
 } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
 import _ from 'lodash';
+import { useSelector } from 'react-redux';
 import {
   displayVisualization,
   renderCatalogVisualization,
   renderSavedVisualization,
 } from '../../helpers/utils';
 import './visualization_container.scss';
 import { VizContainerError } from '../../../../../common/types/custom_panels';
+import { MetricsEditInline } from '../../../metrics/sidebar/metrics_edit_inline';
+import { metricQuerySelector } from '../../../metrics/redux/slices/metrics_slice';
 import { coreRefs } from '../../../../framework/core_refs';
 
 /*
@@ -71,6 +74,7 @@ interface Props {
   removeVisualization?: (visualizationId: string) => void;
   catalogVisualization?: boolean;
   spanParam?: string;
+  contextMenuId: 'visualization' | 'notebook' | 'metrics';
 }
 
 export const VisualizationContainer = ({
@@ -88,6 +92,7 @@ export const VisualizationContainer = ({
   removeVisualization,
   catalogVisualization,
   spanParam,
+  contextMenuId,
 }: Props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [visualizationTitle, setVisualizationTitle] = useState('');
@@ -103,6 +108,7 @@ export const VisualizationContainer = ({
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalContent, setModalContent] = useState(<></>);
 
+  const queryMetaData = useSelector(metricQuerySelector(visualizationId));
   const closeModal = () => setIsModalVisible(false);
   const showModal = (modalType: string) => {
     if (modalType === 'catalogModal')
@@ -227,6 +233,7 @@ export const VisualizationContainer = ({
         setVisualizationMetaData,
         setIsLoading,
         setIsError,
+        queryMetaData,
       });
     else
       await renderSavedVisualization(
@@ -283,11 +290,17 @@ export const VisualizationContainer = ({
     loadVisaulization();
   }, [onRefresh]);
 
+  useEffect(() => {
+    if (catalogVisualization) loadVisaulization();
+  }, [queryMetaData]);
+
+  const metricVisCssClassName = catalogVisualization ? 'metricVis' : '';
+
   return (
     <>
       <EuiPanel
         data-test-subj={`${visualizationTitle}VisualizationPanel`}
-        className="panel-full-width"
+        className={`panel-full-width ${metricVisCssClassName}`}
         grow={false}
       >
         <div className={editMode ? 'mouseGrabber' : ''}>
@@ -333,6 +346,7 @@ export const VisualizationContainer = ({
               )}
             </EuiFlexItem>
           </EuiFlexGroup>
+          {catalogVisualization && <MetricsEditInline visualizationId={visualizationId} />}
         </div>
         {memoisedVisualizationBox}
       </EuiPanel>

public/components/event_analytics/explorer/explorer.tsx

@@ -118,6 +118,7 @@ import { Sidebar } from './sidebar';
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import { CountDistribution } from './visualizations/count_distribution';
+import { processMetricsData } from '../../custom_panels/helpers/utils';
 
 export const Explorer = ({
   pplService,
@@ -627,17 +628,22 @@ export const Explorer = ({
     isOverridingPattern,
   ]);
 
+  const visualizationSettings = !isEmpty(userVizConfigs[curVisId])
+    ? { ...userVizConfigs[curVisId] }
+    : {
+        dataConfig: getDefaultVisConfig(queryManager.queryParser().parse(tempQuery).getStats()),
+      };
+
   const visualizations: IVisualizationContainerProps = useMemo(() => {
     return getVizContainerProps({
       vizId: curVisId,
       rawVizData: explorerVisualizations,
       query,
       indexFields: explorerFields,
-      userConfigs: !isEmpty(userVizConfigs[curVisId])
-        ? { ...userVizConfigs[curVisId] }
-        : {
-            dataConfig: getDefaultVisConfig(queryManager.queryParser().parse(tempQuery).getStats()),
-          },
+      userConfigs: {
+        ...visualizationSettings,
+        ...processMetricsData(explorerData.schema, visualizationSettings),
+      },
       appData: { fromApp: appLogEvents },
       explorer: { explorerData, explorerFields, query, http, pplService },
     });

public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx

@@ -20,7 +20,7 @@ export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, ta
   const dynamicContent = tabProps.sections.map((section) => {
     const Editor = section.editor;
     return (
-      <EuiFormRow fullWidth>
+      <EuiFormRow key={section.id} fullWidth>
         <Editor
           visualizations={visualizations}
           schemas={section.schemas}

public/components/metrics/helpers/utils.tsx

@@ -30,14 +30,14 @@ export const onTimeChange = (
   setStart: React.Dispatch<React.SetStateAction<string>>,
   setEnd: React.Dispatch<React.SetStateAction<string>>
 ) => {
-  const recentlyUsedRange = recentlyUsedRanges.filter((recentlyUsedRange) => {
+  const dedupedRanges = recentlyUsedRanges.filter((recentlyUsedRange) => {
     const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
     return !isDuplicate;
   });
-  recentlyUsedRange.unshift({ start, end });
+  dedupedRanges.unshift({ start, end });
   setStart(start);
   setEnd(end);
-  setRecentlyUsedRanges(recentlyUsedRange.slice(0, 9));
+  setRecentlyUsedRanges(dedupedRanges.slice(0, 9));
 };
 
 // PPL Service requestor
@@ -58,21 +58,21 @@ export const getVisualizations = (http: CoreStart['http']) => {
     });
 };
 
-interface boxType {
+interface BoxType {
   x1: number;
   y1: number;
   x2: number;
   y2: number;
 }
 
-const calculatOverlapArea = (bb1: boxType, bb2: boxType) => {
-  const x_left = Math.max(bb1.x1, bb2.x1);
-  const y_top = Math.max(bb1.y1, bb2.y1);
-  const x_right = Math.min(bb1.x2, bb2.x2);
-  const y_bottom = Math.min(bb1.y2, bb2.y2);
+const calculatOverlapArea = (bb1: BoxType, bb2: BoxType) => {
+  const xLeft = Math.max(bb1.x1, bb2.x1);
+  const yTop = Math.max(bb1.y1, bb2.y1);
+  const xRight = Math.min(bb1.x2, bb2.x2);
+  const yBottom = Math.min(bb1.y2, bb2.y2);
 
-  if (x_right < x_left || y_bottom < y_top) return 0;
-  return (x_right - x_left) * (y_bottom - y_top);
+  if (xRight < xLeft || yBottom < yTop) return 0;
+  return (xRight - xLeft) * (yBottom - yTop);
 };
 
 const getTotalOverlapArea = (panelVisualizations: MetricType[]) => {
@@ -149,7 +149,7 @@ export const mergeLayoutAndMetrics = (
 
   for (let i = 0; i < newVisualizationList.length; i++) {
     for (let j = 0; j < layout.length; j++) {
-      if (newVisualizationList[i].id == layout[j].i) {
+      if (newVisualizationList[i].id === layout[j].i) {
         newPanelVisualizations.push({
           ...newVisualizationList[i],
           x: layout[j].x,
@@ -206,6 +206,6 @@ export const updateMetricsWithSelections = (
     description: savedVisualization.description,
     type: 'line',
     subType: 'metric',
-    userConfigs: JSON.stringify(savedVisualization.user_configs),
+    userConfigs: savedVisualization.user_configs,
   };
 };