Update Metric layout metadata to include query info

Update CSS to allow metric-grid to accomodate inline-edit form Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
opensearch-project · Aug 7, 2023 · 6565805 · 6565805
1 parent 7f11d0e
commit 6565805
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
@@ -381,8 +381,7 @@ export const renderCatalogVisualization = async ({
   setIsLoading,
   setIsError,
   spanResolution,
-  metricMetaData,
-  setMetricMetaData,
+  queryMetaData,
 }: {
   http: CoreStart['http'];
   pplService: PPLService;
@@ -398,8 +397,7 @@ export const renderCatalogVisualization = async ({
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
   setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>;
   spanResolution?: string;
-  metricMetaData?: MetricType;
-  setMetricMetaData?: React.Dispatch<React.SetStateAction<MetricType>>;
+  queryMetaData?: MetricType;
 }) => {
   setIsLoading(true);
   setIsError({} as VizContainerError);
@@ -415,8 +413,8 @@ export const renderCatalogVisualization = async ({
   const visualizationQuery = updateCatalogVisualizationQuery({
     catalogSourceName,
     catalogTableName,
-    aggregation: metricMetaData?.query?.aggregation || defaultAggregation,
-    attributesGroupBy: metricMetaData?.query?.attributesGroupBy || [],
+    aggregation: queryMetaData.aggregation,
+    attributesGroupBy: queryMetaData.attributesGroupBy,
     startTime,
     endTime,
     spanParam,
@@ -434,6 +432,7 @@ export const renderCatalogVisualization = async ({
 
   setVisualizationMetaData({ ...visualizationMetaData, query: visualizationQuery });
 
+  console.log('getqueryResponse', visualizationQuery);
   getQueryResponse(
     pplService,
     visualizationQuery,

diff --git a/...mponents/custom_panels/panel_modules/visualization_container/visualization_container.scss b/...mponents/custom_panels/panel_modules/visualization_container/visualization_container.scss
@@ -56,12 +56,6 @@
   }
 }
 
-.visualization-div.metricVis {
-  height: calc(100% - 85px) !important;
-
-}
-
-
 %center-div {
   top: 50%;
   left: 50%;

diff --git a/...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -23,6 +23,7 @@ import {
   EuiText,
   EuiToolTip,
   EuiContextMenu,
+  EuiCode,
 } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
 import _ from 'lodash';
@@ -311,12 +312,9 @@ export const VisualizationContainer = ({
       );
   };
 
-  const metricVisCss = metricMetaData ? 'metricVis' : '';
-
   const memoisedVisualizationBox = useMemo(
     () => (
       <div>
-      <div className={`visualization-div ${metricVisCss}`}>
         {isLoading ? (
           <EuiLoadingChart size="xl" mono className="visualization-loading-chart" />
         ) : !_.isEmpty(isError) ? (

diff --git a/public/components/metrics/sidebar/metrics_edit_inline.tsx b/public/components/metrics/sidebar/metrics_edit_inline.tsx
@@ -75,14 +75,22 @@ export const MetricsEditInline = ({ visualizationId }: { visualizationId: string
   );
 
   const renderAttributesGroupByEditor = () => (
-    <div>
-      <EuiPopoverTitle>Group By Attributes</EuiPopoverTitle>
+    <EuiFormControlLayout
+      readOnly
+      compressed
+      fullWidth
+      prepend={<EuiFormLabel htmlFor="attributeGroupBy">ATTRIBUTES GROUP BY</EuiFormLabel>}
+    >
       <EuiComboBox
+        className={'attributesGroupBy'}
         compressed
-        onChange={onChangeAggregation}
-        options={[{ label: 'host' }]}
+        fullWidth
+        selectedOptions={query.attributesGroupBy.map((label) => ({ label, value: label }))}
+        onChange={onChangeAttributesGroupBy}
+        options={availableAttributesLabels}
+        prepend={'ATTRIBUTES GROUP BY'}
       />
-    </div>
+    </EuiFormControlLayout>
   );
 
   return (