From 6565805f0071996d21b41969cd45d727e5d8fbd5 Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Mon, 7 Aug 2023 08:28:12 -0700
Subject: [PATCH] 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>
---
 .../components/custom_panels/helpers/utils.tsx | 11 +++++------
 .../visualization_container.scss               |  6 ------
 .../visualization_container.tsx                |  4 +---
 .../metrics/sidebar/metrics_edit_inline.tsx    | 18 +++++++++++++-----
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
index 4b1dafc03..fc53b8b6c 100644
--- 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/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
index 0d09cbcb4..e61043cc8 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
+++ b/public/components/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/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
index b10da8791..16ae92ab5 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
+++ b/public/components/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
index d7d8372ee..eba49adb6 100644
--- 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 (