From 48c48c243a25005de36a1a150940284f42b114b5 Mon Sep 17 00:00:00 2001
From: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Date: Tue, 25 Oct 2022 17:26:54 -0700
Subject: [PATCH 1/3] Save panel

Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
---
 .../common/constants/explorer.ts              | 11 +++
 .../components/common/search/search.tsx       |  6 ++
 .../event_analytics/explorer/explorer.tsx     | 11 +++
 .../explorer/save_panel/save_panel.tsx        | 85 ++++++++++++++++++-
 4 files changed, 111 insertions(+), 2 deletions(-)

diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
index f572a9a0c..bf889a961 100644
--- a/dashboards-observability/common/constants/explorer.ts
+++ b/dashboards-observability/common/constants/explorer.ts
@@ -269,3 +269,14 @@ export enum ConfigChartOptionsEnum {
 
 export const CUSTOM_LABEL = 'customLabel';
 export const BREAKDOWNS = 'breakdowns';
+
+// Metrics constants
+export const UNITS_OF_MEASURE = [
+  'milliseconds (ms)',
+  'seconds (s)',
+  'hours (h)',
+  'celsius (C)',
+  'farenheit (F)',
+  'meters (m)',
+  'kilometers (k)',
+]
diff --git a/dashboards-observability/public/components/common/search/search.tsx b/dashboards-observability/public/components/common/search/search.tsx
index ed9f85381..26677563a 100644
--- a/dashboards-observability/public/components/common/search/search.tsx
+++ b/dashboards-observability/public/components/common/search/search.tsx
@@ -83,6 +83,8 @@ export const Search = (props: any) => {
     setIsLiveTailPopoverOpen,
     liveTailName,
     searchError = null,
+    curVisId,
+    spanValue,
   } = props;
   
   const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
@@ -127,6 +129,8 @@ export const Search = (props: any) => {
     />
   );
 
+  // console.log("span value: ", spanValue);
+
   return (
     <div className="globalQueryBar">
       <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
@@ -215,6 +219,8 @@ export const Search = (props: any) => {
                     showSavePanelOptionsList &&
                     searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList
                   }
+                  curVisId={curVisId}
+                  spanValue={spanValue}
                 />
                 <EuiPopoverFooter>
                   <EuiFlexGroup justifyContent="flexEnd">
diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
index c4002c1ef..92eaab30c 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
@@ -156,6 +156,7 @@ export const Explorer = ({
   const [isValidDataConfigOptionSelected, setIsValidDataConfigOptionSelected] = useState<boolean>(
     false
   );
+  const [spanValue, setSpanValue] = useState(false);
   const queryRef = useRef();
   const appBasedRef = useRef('');
   appBasedRef.current = appBaseQuery;
@@ -967,6 +968,8 @@ export const Explorer = ({
         // parse stats section on every search
         const statsTokens = queryManager.queryParser().parse(tempQuery).getStats();
         const updatedDataConfig = getUpdatedDataConfig(statsTokens);
+        // console.log("updatedDataConfig: ",updatedDataConfig);
+        // setSpanValue(updatedDataConfig);
         await dispatch(
           changeVizConfig({
             tabId,
@@ -1279,6 +1282,12 @@ export const Explorer = ({
     [tempQuery]
   );
 
+  useEffect(() => {
+    const statsTokens = queryManager.queryParser().parse(tempQuery).getStats();
+    const updatedDataConfig = getUpdatedDataConfig(statsTokens);
+    setSpanValue(!isEqual(typeof updatedDataConfig.span, 'undefined'));
+  }, [tempQuery, query, selectedContentTabId]);
+  
   return (
     <TabContext.Provider
       value={{
@@ -1333,6 +1342,8 @@ export const Explorer = ({
           setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen}
           liveTailName={liveTailNameRef.current}
           searchError={explorerVisualizations}
+          curVisId={curVisId}
+          spanValue={spanValue}
         />
         <EuiTabbedContent
           className="mainContentTabs"
diff --git a/dashboards-observability/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/save_panel/save_panel.tsx
index c0b4793b5..e8c8f5b8e 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/save_panel/save_panel.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -5,10 +5,18 @@
 
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { EuiTitle, EuiComboBox, EuiFormRow, EuiSpacer, EuiFieldText } from '@elastic/eui';
+import {
+  EuiTitle,
+  EuiComboBox,
+  EuiFormRow,
+  EuiSpacer,
+  EuiFieldText,
+  EuiSwitch,
+} from '@elastic/eui';
 import { useEffect } from 'react';
-import { isEmpty } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
+import { UNITS_OF_MEASURE } from '../../../../../common/constants/explorer';
 
 interface ISavedPanelProps {
   selectedOptions: any;
@@ -17,6 +25,8 @@ interface ISavedPanelProps {
   savedObjects: SavedObjects;
   savePanelName: string;
   showOptionList: boolean;
+  curVisId: string;
+  spanValue: boolean;
 }
 
 interface CustomPanelOptions {
@@ -33,8 +43,13 @@ export const SavePanel = ({
   savedObjects,
   savePanelName,
   showOptionList,
+  curVisId,
+  spanValue,
 }: ISavedPanelProps) => {
   const [options, setOptions] = useState([]);
+  const [checked, setChecked] = useState(false);
+  const [measure, setMeasure] = useState([]);
+  const [label, setLabel] = useState([]);
 
   const getCustomPabnelList = async (savedObjects: SavedObjects) => {
     const optionRes = await savedObjects
@@ -50,6 +65,18 @@ export const SavePanel = ({
     getCustomPabnelList(savedObjects);
   }, []);
 
+  const onToggleChange = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
+    setChecked(e.target.checked);
+  };
+
+  const onMeasureChange = (selectedMeasures: React.SetStateAction<never[]>) => {
+    setMeasure(selectedMeasures);
+  };
+
+  const onLabelChange = (selectedLabels: React.SetStateAction<never[]>) => {
+    setLabel(selectedLabels);
+  };
+
   return (
     <>
       {showOptionList && (
@@ -90,6 +117,60 @@ export const SavePanel = ({
           data-test-subj="eventExplorer__querySaveName"
         />
       </EuiFormRow>
+      {showOptionList && (isEqual(curVisId, 'line')) && spanValue && (
+        <>
+          <EuiFormRow display="columnCompressedSwitch">
+            <EuiSwitch
+              showLabel={true}
+              label="Save as Metric"
+              checked={checked}
+              onChange={onToggleChange}
+              compressed
+            />
+          </EuiFormRow>
+          {checked && (
+            <>
+              <EuiSpacer size="s" />
+              <EuiTitle size="xxs">
+                <h3>{'Units of Measure'}</h3>
+              </EuiTitle>
+              <EuiFormRow>
+                <EuiComboBox
+                  placeholder="Select measure"
+                  singleSelection={{ asPlainText: true }}
+                  onChange={onMeasureChange}
+                  selectedOptions={measure}
+                  options={UNITS_OF_MEASURE.map((i) => {
+                    return {
+                      label: i,
+                    };
+                  })}
+                  isClearable={false}
+                  data-test-subj="eventExplorer__metricMeasureSaveComboBox"
+                />
+              </EuiFormRow>
+              <EuiSpacer size="s" />
+              <EuiTitle size="xxs">
+                <h3>{'Labels'}</h3>
+              </EuiTitle>
+              <EuiFormRow>
+                <EuiComboBox
+                  placeholder="Select labels"
+                  onChange={onLabelChange}
+                  selectedOptions={label}
+                  options={UNITS_OF_MEASURE.map((i) => {
+                    return {
+                      label: i,
+                    };
+                  })}
+                  isClearable={true}
+                  data-test-subj="eventExplorer__metricLabelSaveComboBox"
+                />
+              </EuiFormRow>
+            </>
+          )}
+        </>
+      )}
     </>
   );
 };

From 07689ab3a8cec5848d38024ba88aa0f0eea2b60c Mon Sep 17 00:00:00 2001
From: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Date: Tue, 25 Oct 2022 19:40:30 -0700
Subject: [PATCH 2/3] remove comments

Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
---
 .../public/components/common/search/search.tsx                  | 2 --
 .../public/components/event_analytics/explorer/explorer.tsx     | 2 --
 2 files changed, 4 deletions(-)

diff --git a/dashboards-observability/public/components/common/search/search.tsx b/dashboards-observability/public/components/common/search/search.tsx
index 26677563a..a714dfa94 100644
--- a/dashboards-observability/public/components/common/search/search.tsx
+++ b/dashboards-observability/public/components/common/search/search.tsx
@@ -129,8 +129,6 @@ export const Search = (props: any) => {
     />
   );
 
-  // console.log("span value: ", spanValue);
-
   return (
     <div className="globalQueryBar">
       <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
index 92eaab30c..d63dee0c3 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
@@ -968,8 +968,6 @@ export const Explorer = ({
         // parse stats section on every search
         const statsTokens = queryManager.queryParser().parse(tempQuery).getStats();
         const updatedDataConfig = getUpdatedDataConfig(statsTokens);
-        // console.log("updatedDataConfig: ",updatedDataConfig);
-        // setSpanValue(updatedDataConfig);
         await dispatch(
           changeVizConfig({
             tabId,

From 7d2ee8f388aeee74de57531ad31c4961dda1835e Mon Sep 17 00:00:00 2001
From: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Date: Wed, 26 Oct 2022 15:34:16 -0700
Subject: [PATCH 3/3] remove milliseconds from constants

Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
---
 dashboards-observability/common/constants/explorer.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
index bf889a961..f09d53412 100644
--- a/dashboards-observability/common/constants/explorer.ts
+++ b/dashboards-observability/common/constants/explorer.ts
@@ -272,7 +272,6 @@ export const BREAKDOWNS = 'breakdowns';
 
 // Metrics constants
 export const UNITS_OF_MEASURE = [
-  'milliseconds (ms)',
   'seconds (s)',
   'hours (h)',
   'celsius (C)',