Updated the Branch With main and updated the code for Metrics

Signed-off-by: SivaprasadAluri <[email protected]>
SivaprasadAluri · Sep 27, 2022 · 6956037 · 6956037
1 parent 773c203
commit 6956037
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 28 deletions.
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -338,6 +338,6 @@ export interface MetricListEntry {
 }
 
 export interface MetricList {
-  metrics?: MetricListEntry[];
-  dimensions: [];
+  [AGGREGATIONS]?: MetricListEntry[];
+  [GROUPBY]: [];
 }
diff --git a/...l_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/...l_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
@@ -92,7 +92,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
         ownFocus={false}
         size="m"
       >
-        <OuiWindowEvent
+        <EuiWindowEvent
           event="keydown"
           handler={[Function]}
         />
@@ -1319,7 +1319,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
         ownFocus={false}
         size="m"
       >
-        <OuiWindowEvent
+        <EuiWindowEvent
           event="keydown"
           handler={[Function]}
         />

diff --git a/...bility/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap b/...bility/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
@@ -192,11 +192,13 @@ exports[`No result component Renders No result component 1`] = `
                     </h2>
                     <p>
                       <FormattedMessage
-                        defaultMessage="Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields"
+                        defaultMessage="Your query may not match anything in the current time range, or there may not be any data at all in
+ the currently selected time range. Try change time range, query filters or choose different time fields"
                         id="discover.noResults.queryMayNotMatchTitle"
                         values={Object {}}
                       >
-                        Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields
+                        Your query may not match anything in the current time range, or there may not be any data at all in
+ the currently selected time range. Try change time range, query filters or choose different time fields
                       </FormattedMessage>
                     </p>
                   </div>

diff --git a/...rer/visualizations/config_panel/config_panes/config_controls/metric_config_panel_item.tsx b/...rer/visualizations/config_panel/config_panes/config_controls/metric_config_panel_item.tsx
@@ -19,10 +19,12 @@ import {
 import { useDispatch } from 'react-redux';
 import { change as changeVizConfig } from '../../../../../redux/slices/viualization_config_slice';
 import {
+  AGGREGATIONS,
+  GROUPBY,
   METRICS_AGGREGATION_OPTIONS,
   numericalTypes,
 } from '../../../../../../../../common/constants/explorer';
-import { visChartTypes } from '../../../../../../../../common/constants/shared';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
 import { MetricList, MetricListEntry } from '../../../../../../../../common/types/explorer';
 import { TabContext } from '../../../../../hooks';
 
@@ -42,8 +44,8 @@ export const MetricConfigPanelItem = ({ fieldOptionList, visualizations }: any)
   };
 
   const [configList, setConfigList] = useState<MetricList>({
-    metrics: [initialConfigEntry],
-    dimensions: [],
+    [AGGREGATIONS]: [initialConfigEntry],
+    [GROUPBY]: [],
   });
 
   useEffect(() => {
@@ -52,7 +54,7 @@ export const MetricConfigPanelItem = ({ fieldOptionList, visualizations }: any)
         ...userConfigs?.dataConfig,
       });
     }
-  }, [userConfigs?.dataConfig, visualizations.vis.name]);
+  }, [userConfigs, userConfigs?.dataConfig, visualizations.vis.name]);
 
   const updateList = (value: string, index: number, name: string, field: string) => {
     const listItem = {
@@ -108,9 +110,10 @@ export const MetricConfigPanelItem = ({ fieldOptionList, visualizations }: any)
         tabId,
         vizId: visualizations.vis.name,
         data: {
+          ...userConfigs,
           dataConfig: {
-            metrics: configList.metrics,
-            dimensions: configList.dimensions,
+            [GROUPBY]: configList[GROUPBY],
+            [AGGREGATIONS]: configList[AGGREGATIONS]!,
           },
         },
       })
@@ -120,11 +123,10 @@ export const MetricConfigPanelItem = ({ fieldOptionList, visualizations }: any)
   const getOptionsAvailable = () => {
     const selectedFields = {};
     for (const key in configList) {
-      if (key === 'metrics') {
+      if (key === 'series') {
         configList[key] && configList[key].forEach((field) => (selectedFields[field.label] = true));
       }
     }
-
     return fieldOptionList.filter(
       (field) => !selectedFields[field.label] && numericalTypes.includes(field.type)
     );
@@ -187,7 +189,7 @@ export const MetricConfigPanelItem = ({ fieldOptionList, visualizations }: any)
               </EuiFormRow>
 
               <EuiSpacer size="s" />
-              {visualizations.vis.name !== visChartTypes.HeatMap && lists.length - 1 === index && (
+              {visualizations.vis.name !== VIS_CHART_TYPES.HeatMap && lists.length - 1 === index && (
                 <EuiFlexItem grow>
                   <EuiButton
                     fullWidth
@@ -214,9 +216,9 @@ export const MetricConfigPanelItem = ({ fieldOptionList, visualizations }: any)
       <EuiSpacer size="s" />
       <EuiSpacer size="s" />
       <EuiTitle size="xxs">
-        <h3>Metrics</h3>
+        <h3>Series</h3>
       </EuiTitle>
-      {getCommonUI(configList.metrics, 'metrics')}
+      {getCommonUI(configList.series, 'series')}
       <EuiFlexItem grow={false}>
         <EuiButton
           data-test-subj="visualizeEditorRenderButton"

diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -86,7 +86,7 @@ export const ExplorerVisualizations = ({
             visualizations={visualizations}
           />
         );
-      case visChartTypes.Metrics:
+      case VIS_CHART_TYPES.Metrics:
         return (
           <MetricConfigPanelItem
             fieldOptionList={metricFieldOptionList}

diff --git a/...race_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap b/...race_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SpanDetailFlyout /> spec renders the empty component 1`] = `
     onClose={[MockFunction]}
     size="s"
   >
-    <OuiWindowEvent
+    <EuiWindowEvent
       event="keydown"
       handler={[Function]}
     />

diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
@@ -69,7 +69,7 @@ const getDefaultXYAxisLabels = (vizFields: IField[], visName: string) => {
       : [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]];
   };
 
-  const mapYaxis = (): { [key: string]: string }[] =>
+  const mapYaxis = (): Array<{ [key: string]: string }> =>
     visName === VIS_CHART_TYPES.Line
       ? vizFieldsWithLabel.filter((field) => field.type !== 'timestamp')
       : take(
@@ -211,14 +211,16 @@ const getUserConfigs = (
           },
         };
         break;
-      case visChartTypes.Metrics:
+      case VIS_CHART_TYPES.Metrics:
         configOfUser = {
           ...userSelectedConfigs,
-          dataConfig: {
-            ...userSelectedConfigs?.dataConfig,
-            dimensions: [],
-            metrics: [initialMetricsChartEntry],
-          },
+          dataConfig:
+            userSelectedConfigs?.dataConfig !== undefined
+              ? userSelectedConfigs?.dataConfig
+              : {
+                  [GROUPBY]: [],
+                  [AGGREGATIONS]: [initialMetricsChartEntry],
+                },
         };
         break;
       default:

diff --git a/dashboards-observability/public/components/visualizations/charts/metrics/metrics.tsx b/dashboards-observability/public/components/visualizations/charts/metrics/metrics.tsx
@@ -42,8 +42,8 @@ export const Metrics = ({ visualizations }: any) => {
     <div className="metricsContainer">
       <h4 className="metricTitle"> {dataTitle} </h4>
       <div>
-        {dataConfig && dataConfig.metrics.length > 0 ? (
-          dataConfig.metrics.map((metric, index: number) => {
+        {dataConfig && dataConfig.series.length > 0 ? (
+          dataConfig.series.map((metric, index: number) => {
             return (
               <EuiFlexGroup
                 justifyContent="spaceAround"