Metrics api events (#1214)

* Add schema to router in events Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * update Saved Visualization in backend to include metrics Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * add SelectedLabels class Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * Add Token class in saved visualization Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * update test Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * fix frontend API data Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * update default subtype state to viz Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * disabling labels on front end Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * remove console.log comments Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * remove logger comments Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]>
opensearch-project · Nov 1, 2022 · 0454110 · 0454110
1 parent 7bf768f
commit 0454110
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 5 deletions.
diff --git a/public/components/common/search/search.test.tsx b/public/components/common/search/search.test.tsx
@@ -33,6 +33,7 @@ describe('Search bar', () => {
     const popoverItems = jest.fn();
     const isLiveTailOn = jest.fn();
     const countDistribution = jest.fn();
+    const setMetricLabel = jest.fn();
     const utils = render(
       <Search
         key="search-component"
@@ -61,6 +62,11 @@ describe('Search bar', () => {
         popoverItems={popoverItems}
         isLiveTailOn={isLiveTailOn}
         countDistribution={countDistribution}
+        curVisId={'line'} 
+        spanValue={false}
+        setSubType={'metric'}
+        setMetricMeasure={'hours (h)'}
+        setMetricLabel={setMetricLabel}
       />
     );
 

diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
@@ -85,6 +85,9 @@ export const Search = (props: any) => {
     searchError = null,
     curVisId,
     spanValue,
+    setSubType,
+    setMetricMeasure,
+    setMetricLabel,
   } = props;
 
   const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
@@ -216,9 +219,13 @@ export const Search = (props: any) => {
                   showOptionList={
                     showSavePanelOptionsList &&
                     searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList
+
                   }
                   curVisId={curVisId}
                   spanValue={spanValue}
+                  setSubType={setSubType}
+                  setMetricMeasure={setMetricMeasure}
+                  setMetricLabel={setMetricLabel}
                 />
                 <EuiPopoverFooter>
                   <EuiFlexGroup justifyContent="flexEnd">

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -157,6 +157,9 @@ export const Explorer = ({
     false
   );
   const [spanValue, setSpanValue] = useState(false);
+  const [subType, setSubType] = useState('visualization');
+  const [metricMeasure, setMetricMeasure] = useState('');
+  const [metricLabel, setMetricLabel] = useState([]);
   const queryRef = useRef();
   const appBasedRef = useRef('');
   appBasedRef.current = appBaseQuery;
@@ -1107,6 +1110,9 @@ export const Explorer = ({
               ? JSON.stringify(userVizConfigs[curVisId])
               : JSON.stringify({}),
             description: vizDescription,
+            subType: subType,
+            unitsOfMeasure: metricMeasure,
+            // selectedLabels: metricLabel
           })
           .then((res: any) => {
             setToast(
@@ -1141,6 +1147,9 @@ export const Explorer = ({
               ? JSON.stringify(userVizConfigs[curVisId])
               : JSON.stringify({}),
             description: vizDescription,
+            subType: subType,
+            unitsOfMeasure: metricMeasure,
+            // selectedLabels: metricLabel
           })
           .then((res: any) => {
             batch(() => {
@@ -1342,6 +1351,9 @@ export const Explorer = ({
           searchError={explorerVisualizations}
           curVisId={curVisId}
           spanValue={spanValue}
+          setSubType={setSubType}
+          setMetricMeasure={setMetricMeasure}
+          setMetricLabel={setMetricLabel}
         />
         <EuiTabbedContent
           className="mainContentTabs"

diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx b/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
@@ -18,6 +18,7 @@ describe('Saved query table component', () => {
   it('Renders saved query table', async () => {
     const handleNameChange = jest.fn();
     const handleOptionChange = jest.fn();
+    const setMetricLabel = jest.fn();
     const savedObjects = new SavedObjects(httpClientMock);
 
     const wrapper = mount(
@@ -28,7 +29,12 @@ describe('Saved query table component', () => {
         savedObjects={savedObjects}
         savePanelName={'Count by depature'}
         showOptionList={true}
-      />
+        curVisId={'line'}
+        spanValue={false} 
+        setSubType={'metric'} 
+        setMetricMeasure={'hours (h)'}
+        setMetricLabel={setMetricLabel}      
+        />
     );
 
     wrapper.update();

diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -27,6 +27,9 @@ interface ISavedPanelProps {
   showOptionList: boolean;
   curVisId: string;
   spanValue: boolean;
+  setSubType: any;
+  setMetricMeasure: any;
+  setMetricLabel: any;
 }
 
 interface CustomPanelOptions {
@@ -45,6 +48,9 @@ export const SavePanel = ({
   showOptionList,
   curVisId,
   spanValue,
+  setSubType,
+  setMetricMeasure,
+  setMetricLabel,
 }: ISavedPanelProps) => {
   const [options, setOptions] = useState([]);
   const [checked, setChecked] = useState(false);
@@ -67,14 +73,21 @@ export const SavePanel = ({
 
   const onToggleChange = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
     setChecked(e.target.checked);
+    if (e.target.checked) {
+      setSubType("metric")
+    } else {
+      setSubType("visualization")
+    }
   };
 
   const onMeasureChange = (selectedMeasures: React.SetStateAction<never[]>) => {
     setMeasure(selectedMeasures);
+    setMetricMeasure(selectedMeasures[0].label);
   };
 
   const onLabelChange = (selectedLabels: React.SetStateAction<never[]>) => {
     setLabel(selectedLabels);
+    setMetricLabel(selectedLabels);
   };
 
   return (
@@ -149,11 +162,11 @@ export const SavePanel = ({
                   data-test-subj="eventExplorer__metricMeasureSaveComboBox"
                 />
               </EuiFormRow>
-              <EuiSpacer size="s" />
+              {/* <EuiSpacer size="s" />
               <EuiTitle size="xxs">
                 <h3>{'Labels'}</h3>
-              </EuiTitle>
-              <EuiFormRow>
+              </EuiTitle> */}
+              {/* <EuiFormRow>
                 <EuiComboBox
                   placeholder="Select labels"
                   onChange={onLabelChange}
@@ -166,7 +179,7 @@ export const SavePanel = ({
                   isClearable={true}
                   data-test-subj="eventExplorer__metricLabelSaveComboBox"
                 />
-              </EuiFormRow>
+              </EuiFormRow> */}
             </>
           )}
         </>

diff --git a/public/services/saved_objects/event_analytics/saved_objects.ts b/public/services/saved_objects/event_analytics/saved_objects.ts
@@ -57,6 +57,9 @@ export default class SavedObjects {
     description = '',
     applicationId = '',
     userConfigs = '',
+    subType = '',
+    unitsOfMeasure = '',
+    selectedLabels,
   }: any) {
     const objRequest: any = {
       object: {
@@ -91,6 +94,18 @@ export default class SavedObjects {
       objRequest.object.user_configs = userConfigs;
     }
 
+    if (!isEmpty(subType)) {
+      objRequest.object.sub_type = subType;
+    }
+
+    if (!isEmpty(unitsOfMeasure)) {
+      objRequest.object.units_of_measure = unitsOfMeasure;
+    }
+
+    if (!isEmpty(selectedLabels)) {
+      objRequest.object.selected_labels = selectedLabels;
+    }
+
     return objRequest;
   }
 
@@ -167,6 +182,9 @@ export default class SavedObjects {
       timestamp: params.timestamp,
       userConfigs: params.userConfigs,
       description: params.description,
+      subType: params.subType,
+      unitsOfMeasure: params.unitsOfMeasure,
+      selectedLabels: params.selectedLabels
     });
 
     finalParams.object_id = params.objectId;
@@ -227,6 +245,9 @@ export default class SavedObjects {
       applicationId: params.applicationId,
       userConfigs: params.userConfigs,
       description: params.description,
+      subType: params.subType,
+      unitsOfMeasure: params.unitsOfMeasure,
+      selectedLabels: params.selectedLabels
     });
 
     return await this.http.post(

diff --git a/server/routes/event_analytics/event_analytics_router.ts b/server/routes/event_analytics/event_analytics_router.ts
@@ -139,6 +139,11 @@ export const registerEventAnalyticsRouter = ({
             description: schema.string(),
             application_id: schema.maybe(schema.string()),
             user_configs: schema.string(),
+            sub_type: schema.string(),
+            units_of_measure: schema.maybe(schema.string()),
+            selected_labels: schema.maybe(schema.object({
+              label: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+            })),
           }),
         }),
       },
@@ -226,6 +231,11 @@ export const registerEventAnalyticsRouter = ({
             description: schema.string(),
             application_id: schema.maybe(schema.string()),
             user_configs: schema.string(),
+            sub_type: schema.string(),
+            units_of_measure: schema.maybe(schema.string()),
+            selected_labels: schema.maybe(schema.object({
+              labels: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+            })),
           }),
         }),
       },