From 6f511f8e22b8c78d366bd1fc8eb357c0c879847c Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Thu, 3 Nov 2022 18:41:50 -0700
Subject: [PATCH] metrics bug fixes #1

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .../custom_panels/helpers/utils.tsx           |  18 +--
 .../visualization_container.tsx               | 153 ++++++++++++------
 .../public/components/metrics/index.tsx       |  16 +-
 .../components/metrics/top_menu/top_menu.tsx  |   9 +-
 4 files changed, 126 insertions(+), 70 deletions(-)

diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
index 77ebdb523..249e441c2 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
+++ b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -90,7 +90,7 @@ export const updateQuerySpanInterval = (
   spanParam: string
 ) => {
   return query.replace(
-    new RegExp(`span\\((.*?)${timestampField}(.*?),(.*?)\\)`),
+    new RegExp(`span\\(\\s*${timestampField}\\s*,(.*?)\\)`),
     `span(${timestampField},${spanParam})`
   );
 };
@@ -103,15 +103,13 @@ export const updateQuerySpanInterval = (
  *                  + | where Carrier='OpenSearch-Air'
  *                  + | stats sum(FlightDelayMin) as delays by Carrier
  *
- * Also, checks is span interval update is needed and retruns accordingly
  */
 const queryAccumulator = (
   originalQuery: string,
   timestampField: string,
   startTime: string,
   endTime: string,
-  panelFilterQuery: string,
-  spanParam: string | undefined
+  panelFilterQuery: string
 ) => {
   const indexMatchArray = originalQuery.match(PPL_INDEX_REGEX);
   if (indexMatchArray == null) {
@@ -179,7 +177,6 @@ export const getQueryResponse = (
   type: string,
   startTime: string,
   endTime: string,
-  spanParam: string | undefined,
   setVisualizationData: React.Dispatch<React.SetStateAction<any[]>>,
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
   setIsError: React.Dispatch<React.SetStateAction<string>>,
@@ -191,14 +188,7 @@ export const getQueryResponse = (
 
   let finalQuery = '';
   try {
-    finalQuery = queryAccumulator(
-      query,
-      timestampField,
-      startTime,
-      endTime,
-      filterQuery,
-      spanParam
-    );
+    finalQuery = queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
   } catch (error) {
     const errorMessage = 'Issue in building final query';
     setIsError(errorMessage);
@@ -264,7 +254,6 @@ export const renderSavedVisualization = async (
     visualization.type,
     startTime,
     endTime,
-    spanParam,
     setVisualizationData,
     setIsLoading,
     setIsError,
@@ -349,7 +338,6 @@ export const renderCatalogVisualization = async (
     visualizationType,
     startTime,
     endTime,
-    spanParam,
     setVisualizationData,
     setIsLoading,
     setIsError,
diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
index d89b7d6e9..12eaa4977 100644
--- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
+++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -4,13 +4,20 @@
  */
 
 import {
+  EuiButton,
   EuiButtonIcon,
+  EuiCodeBlock,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
   EuiLoadingChart,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
   EuiPanel,
   EuiPopover,
   EuiSpacer,
@@ -96,6 +103,39 @@ export const VisualizationContainer = ({
   const onActionsMenuClick = () => setIsPopoverOpen((currPopoverOpen) => !currPopoverOpen);
   const closeActionsMenu = () => setIsPopoverOpen(false);
 
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
+
+  let modal;
+
+  if (isModalVisible) {
+    modal = (
+      <EuiModal onClose={closeModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            <h1>{visualizationMetaData.name}</h1>
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          This PPL Query is generated in runtime from selected data source
+          <EuiSpacer />
+          <EuiCodeBlock language="html" isCopyable>
+            {visualizationMetaData.query}
+          </EuiCodeBlock>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={closeModal} fill>
+            Close
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    );
+  }
+
   let popoverPanel = [
     <EuiContextMenuItem
       data-test-subj="editVizContextMenuItem"
@@ -130,8 +170,22 @@ export const VisualizationContainer = ({
     </EuiContextMenuItem>,
   ];
 
+  let showModelPanel = [
+    <EuiContextMenuItem
+      data-test-subj="showCatalogPPLQuery"
+      key="view_query"
+      disabled={disablePopover}
+      onClick={() => {
+        closeActionsMenu();
+        showModal();
+      }}
+    >
+      View query
+    </EuiContextMenuItem>,
+  ];
+
   if (usedInNotebooks) {
-    popoverPanel = [popoverPanel[0]];
+    popoverPanel = catalogVisualization ? [showModelPanel] : [popoverPanel[0]];
   }
 
   const loadVisaulization = async () => {
@@ -199,52 +253,55 @@ export const VisualizationContainer = ({
   }, [editMode]);
 
   return (
-    <EuiPanel
-      data-test-subj={`${visualizationTitle}VisualizationPanel`}
-      className="panel-full-width"
-      grow={false}
-    >
-      <div className={editMode ? 'mouseGrabber' : ''}>
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem
-            style={{
-              width: '35%',
-            }}
-          >
-            <EuiText grow={false} className="panels-title-text">
-              <EuiToolTip delay="long" position="top" content={visualizationTitle}>
-                <h5>{visualizationTitle}</h5>
-              </EuiToolTip>
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false} className="visualization-action-button">
-            {disablePopover ? (
-              <EuiIcon
-                type="crossInACircleFilled"
-                onClick={() => {
-                  removeVisualization(visualizationId);
-                }}
-              />
-            ) : (
-              <EuiPopover
-                button={
-                  <EuiButtonIcon
-                    aria-label="actionMenuButton"
-                    iconType="boxesHorizontal"
-                    onClick={onActionsMenuClick}
-                  />
-                }
-                isOpen={isPopoverOpen}
-                closePopover={closeActionsMenu}
-                anchorPosition="downLeft"
-              >
-                <EuiContextMenuPanel items={popoverPanel} />
-              </EuiPopover>
-            )}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
-      {memoisedVisualizationBox}
-    </EuiPanel>
+    <>
+      <EuiPanel
+        data-test-subj={`${visualizationTitle}VisualizationPanel`}
+        className="panel-full-width"
+        grow={false}
+      >
+        <div className={editMode ? 'mouseGrabber' : ''}>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem
+              style={{
+                width: '35%',
+              }}
+            >
+              <EuiText grow={false} className="panels-title-text">
+                <EuiToolTip delay="long" position="top" content={visualizationTitle}>
+                  <h5>{visualizationTitle}</h5>
+                </EuiToolTip>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} className="visualization-action-button">
+              {disablePopover ? (
+                <EuiIcon
+                  type="crossInACircleFilled"
+                  onClick={() => {
+                    removeVisualization(visualizationId);
+                  }}
+                />
+              ) : (
+                <EuiPopover
+                  button={
+                    <EuiButtonIcon
+                      aria-label="actionMenuButton"
+                      iconType="boxesHorizontal"
+                      onClick={onActionsMenuClick}
+                    />
+                  }
+                  isOpen={isPopoverOpen}
+                  closePopover={closeActionsMenu}
+                  anchorPosition="downLeft"
+                >
+                  <EuiContextMenuPanel items={popoverPanel} />
+                </EuiPopover>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+        {memoisedVisualizationBox}
+      </EuiPanel>
+      {modal}
+    </>
   );
 };
diff --git a/dashboards-observability/public/components/metrics/index.tsx b/dashboards-observability/public/components/metrics/index.tsx
index a0f6e938f..09a61901a 100644
--- a/dashboards-observability/public/components/metrics/index.tsx
+++ b/dashboards-observability/public/components/metrics/index.tsx
@@ -81,6 +81,10 @@ export const Home = ({
   };
 
   const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
+    if (spanValue < 1) {
+      setToast('Please add a valid span interval', 'danger');
+      return;
+    }
     setOnRefresh(!onRefresh);
   };
 
@@ -110,17 +114,17 @@ export const Home = ({
   };
 
   useEffect(() => {
-    selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true);
-  }, [selectedMetrics]);
+    if (!editMode) {
+      selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true);
+    } else {
+      setIsTopPanelDisabled(true);
+    }
+  }, [selectedMetrics, editMode]);
 
   useEffect(() => {
     setPanelVisualizations(metricsLayout);
   }, [metricsLayout]);
 
-  useEffect(() => {
-    if (editMode) setIsTopPanelDisabled(true);
-  }, [editMode]);
-
   const mainSectionClassName = classNames({
     'col-md-9': !isSidebarClosed,
     'col-md-12': isSidebarClosed,
diff --git a/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx b/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx
index 6ccd14d64..f6f4e14cb 100644
--- a/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx
+++ b/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx
@@ -112,6 +112,12 @@ export const TopMenu = ({
     setResolutionValue(e.target.value);
   };
 
+  const cancelButton = (
+    <EuiButton size="s" iconType="cross" color="danger" onClick={() => editPanel('cancel')}>
+      Cancel
+    </EuiButton>
+  );
+
   const saveButton = (
     <EuiButton size="s" iconType="save" onClick={() => editPanel('save')}>
       Save view
@@ -193,7 +199,7 @@ export const TopMenu = ({
         console.error(message, e);
         setToast('Issue in saving metrics', 'danger');
       }
-      setToast('Saved metrics to panels!');
+      setToast('Saved metrics to panels successfully!');
     }
   };
 
@@ -291,6 +297,7 @@ export const TopMenu = ({
       <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
         {editMode ? (
           <>
+            <EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
             <EuiFlexItem grow={false}>{saveButton}</EuiFlexItem>
           </>
         ) : (