Show metrics in events homepage (#1232)

* Add Metrics to events home page and fix jest test Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * fix save_query_table jest test Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * fix backend test Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]>
opensearch-project · Nov 3, 2022 · f71c81e · f71c81e
1 parent ff0b28c
commit f71c81e
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 4 deletions.
diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
@@ -29,7 +29,7 @@ export const TAB_CHART_ID_TXT_PFX = 'main-content-vis-';
 export const TAB_EVENT_ID = 'main-content-events';
 export const TAB_CHART_ID = 'main-content-vis';
 export const HAS_SAVED_TIMESTAMP = 'hasSavedTimestamp';
-export const FILTER_OPTIONS = ['Visualization', 'Query'];
+export const FILTER_OPTIONS = ['Visualization', 'Query', 'Metric'];
 export const SAVED_QUERY = 'savedQuery';
 export const SAVED_VISUALIZATION = 'savedVisualization';
 export const SAVED_OBJECT_ID = 'savedObjectId';

diff --git a/...ents/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/...ents/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Saved query table component Renders saved query table 1`] = `
 <SavePanel
+  curVisId="line"
   handleNameChange={[MockFunction]}
   handleOptionChange={[MockFunction]}
   savePanelName="Count by depature"
@@ -32,7 +33,11 @@ exports[`Saved query table component Renders saved query table 1`] = `
       },
     ]
   }
+  setMetricLabel={[MockFunction]}
+  setMetricMeasure="hours (h)"
+  setSubType="metric"
   showOptionList={true}
+  spanValue={false}
 >
   <EuiTitle
     size="xxs"
@@ -701,5 +706,84 @@ exports[`Saved query table component Renders saved query table 1`] = `
       </div>
     </div>
   </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="columnCompressedSwitch"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    labelType="label"
+  >
+    <div
+      className="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch"
+      id="random_html_id-row"
+    >
+      <div
+        className="euiFormRow__fieldWrapper"
+      >
+        <EuiToolTip
+          content="Only Time Series visualization and a query including stats/span can be saved as Metric"
+          delay="regular"
+          id="random_html_id"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          position="top"
+        >
+          <span
+            className="euiToolTipAnchor"
+            onKeyUp={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <EuiSwitch
+              checked={false}
+              compressed={true}
+              disabled={true}
+              label="Save as Metric"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              showLabel={true}
+            >
+              <div
+                className="euiSwitch euiSwitch--compressed"
+              >
+                <button
+                  aria-checked={false}
+                  aria-labelledby="random_html_id"
+                  className="euiSwitch__button"
+                  disabled={true}
+                  id="random_html_id"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  role="switch"
+                  type="button"
+                >
+                  <span
+                    className="euiSwitch__body"
+                  >
+                    <span
+                      className="euiSwitch__thumb"
+                    />
+                    <span
+                      className="euiSwitch__track"
+                    />
+                  </span>
+                </button>
+                <span
+                  className="euiSwitch__label"
+                  id="random_html_id"
+                  onClick={[Function]}
+                >
+                  Save as Metric
+                </span>
+              </div>
+            </EuiSwitch>
+          </span>
+        </EuiToolTip>
+      </div>
+    </div>
+  </EuiFormRow>
 </SavePanel>
 `;
diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -12,6 +12,9 @@ import {
   EuiSpacer,
   EuiFieldText,
   EuiSwitch,
+  EuiIconTip,
+  EuiFlexItem,
+  EuiToolTip
 } from '@elastic/eui';
 import { useEffect } from 'react';
 import { isEmpty, isEqual } from 'lodash';
@@ -130,17 +133,21 @@ export const SavePanel = ({
           data-test-subj="eventExplorer__querySaveName"
         />
       </EuiFormRow>
-      {showOptionList && (isEqual(curVisId, 'line')) && spanValue && (
+      {showOptionList && (
         <>
           <EuiFormRow display="columnCompressedSwitch">
+          <EuiToolTip
+          content="Only Time Series visualization and a query including stats/span can be saved as Metric" >
             <EuiSwitch
               showLabel={true}
               label="Save as Metric"
               checked={checked}
               onChange={onToggleChange}
               compressed
+              disabled = {!((isEqual(curVisId, 'line')) && spanValue)}
             />
-          </EuiFormRow>
+          </EuiToolTip>
+          </EuiFormRow>        
           {checked && (
             <>
               <EuiSpacer size="s" />

diff --git a/...c/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap b/...c/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
@@ -157,6 +157,11 @@ exports[`Saved query table component Renders saved query table 1`] = `
                 "value": "Query",
                 "view": "Query",
               },
+              Object {
+                "name": "Metric",
+                "value": "Metric",
+                "view": "Metric",
+              },
             ],
             "type": "field_value_selection",
           },
@@ -194,6 +199,11 @@ exports[`Saved query table component Renders saved query table 1`] = `
                   "value": "Query",
                   "view": "Query",
                 },
+                Object {
+                  "name": "Metric",
+                  "value": "Metric",
+                  "view": "Metric",
+                },
               ],
               "type": "field_value_selection",
             },
@@ -337,6 +347,11 @@ exports[`Saved query table component Renders saved query table 1`] = `
                             "value": "Query",
                             "view": "Query",
                           },
+                          Object {
+                            "name": "Metric",
+                            "value": "Metric",
+                            "view": "Metric",
+                          },
                         ],
                         "type": "field_value_selection",
                       },
@@ -384,6 +399,11 @@ exports[`Saved query table component Renders saved query table 1`] = `
                                 "value": "Query",
                                 "view": "Query",
                               },
+                              Object {
+                                "name": "Metric",
+                                "value": "Metric",
+                                "view": "Metric",
+                              },
                             ],
                             "type": "field_value_selection",
                           }

diff --git a/public/components/event_analytics/home/saved_objects_table.tsx b/public/components/event_analytics/home/saved_objects_table.tsx
@@ -6,6 +6,7 @@
 import React, { useState, useRef } from 'react';
 import { EuiLink, EuiInMemoryTable, EuiIcon } from '@elastic/eui';
 import { FILTER_OPTIONS } from '../../../../common/constants/explorer';
+import { isEmpty } from 'lodash';
 
 interface savedQueryTableProps {
   savedHistories: Array<any>;
@@ -86,6 +87,14 @@ export function SavedQueryTable({
     const isSavedVisualization = h.hasOwnProperty('savedVisualization');
     const savedObject = isSavedVisualization ? h.savedVisualization : h.savedQuery;
     const curType = isSavedVisualization ? 'savedVisualization' : 'savedQuery';
+    var subType = '';
+    if (isSavedVisualization) {
+      if (savedObject?.sub_type === 'metric') {
+        subType = 'Metric'
+      } else {
+        subType = savedObject?.sub_type;
+      }
+    }
     const record = {
       objectId: h.objectId,
       objectType: curType,
@@ -100,7 +109,7 @@ export function SavedQueryTable({
       id: h.objectId,
       data: record,
       name: savedObject.name,
-      type: isSavedVisualization ? 'Visualization' : 'Query',
+      type: isSavedVisualization ? (!isEmpty(subType)) ? subType: 'Visualization' : 'Query',
     };
   });