resolved PR comments

Signed-off-by: Shankha Das <[email protected]>
deepaknevdepsl · Aug 2, 2022 · dcf15cc · dcf15cc
1 parent 41e7ba1
commit dcf15cc
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 86 deletions.
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -16,7 +16,7 @@ import {
   SELECTED_TIMESTAMP,
   SELECTED_DATE_RANGE,
 } from '../constants/explorer';
-import { CoreStart, HttpStart, NotificationsStart } from '../../../../src/core/public';
+import { CoreStart, HttpSetup, HttpStart, NotificationsStart } from '../../../../src/core/public';
 import SavedObjects from '../../public/services/saved_objects/event_analytics/saved_objects';
 import TimestampUtils from '../../public/services/timestamp/timestamp';
 import PPLService from '../../public/services/requests/ppl';
@@ -151,6 +151,14 @@ export interface SavedVizRes {
   tenant: string;
 }
 
+export interface ExplorerData {
+  explorerData: any;
+  explorerFields?: IExplorerFields;
+  query?: any;
+  http?: HttpSetup;
+  pplService?: PPLService;
+}
+
 export interface IVisualizationContainerPropsData {
   appData?: { fromApp: boolean };
   rawVizData?: any;
@@ -161,7 +169,7 @@ export interface IVisualizationContainerPropsData {
     xaxis: IField[];
     yaxis: IField[];
   };
-  explorer?: any;
+  explorer?: ExplorerData;
 }
 
 export interface IVisualizationContainerPropsVis {

diff --git a/...ility/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/...ility/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -72,7 +72,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "size": 4,
               "status": 200,
             },
-            "explorerFields": Object {},
           },
           "indexFields": Object {},
           "query": Object {},
@@ -470,7 +469,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "size": 4,
                 "status": 200,
               },
-              "explorerFields": Object {},
             },
             "indexFields": Object {},
             "query": Object {},
@@ -891,7 +889,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   "size": 4,
                   "status": 200,
                 },
-                "explorerFields": Object {},
               },
               "indexFields": Object {},
               "query": Object {},
@@ -1373,7 +1370,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "size": 4,
               "status": 200,
             },
-            "explorerFields": Object {},
           },
           "indexFields": Object {},
           "query": Object {},
@@ -1807,7 +1803,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "size": 4,
                 "status": 200,
               },
-              "explorerFields": Object {},
             },
             "indexFields": Object {},
             "query": Object {},
@@ -2295,7 +2290,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                   "size": 4,
                   "status": 200,
                 },
-                "explorerFields": Object {},
               },
               "indexFields": Object {},
               "query": Object {},
@@ -2815,7 +2809,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "size": 4,
               "status": 200,
             },
-            "explorerFields": Object {},
           },
           "indexFields": Object {},
           "query": Object {},
@@ -3076,7 +3069,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "size": 4,
                 "status": 200,
               },
-              "explorerFields": Object {},
             },
             "indexFields": Object {},
             "query": Object {},
@@ -3360,7 +3352,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   "size": 4,
                   "status": 200,
                 },
-                "explorerFields": Object {},
               },
               "indexFields": Object {},
               "query": Object {},
@@ -3679,7 +3670,6 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
               "size": 0,
               "status": 200,
             },
-            "explorerFields": Object {},
           },
           "indexFields": Object {},
           "query": Object {},
@@ -3886,7 +3876,6 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                 "size": 0,
                 "status": 200,
               },
-              "explorerFields": Object {},
             },
             "indexFields": Object {},
             "query": Object {},
@@ -4116,7 +4105,6 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                   "size": 0,
                   "status": 200,
                 },
-                "explorerFields": Object {},
               },
               "indexFields": Object {},
               "query": Object {},

diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -300,10 +300,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
         query: {},
         indexFields: {},
         userConfigs: metaData.user_configs,
-        explorer: {
-          explorerData: data,
-          explorerFields: {},
-        },
+        explorer: { explorerData: data },
       })}
     />
   );

diff --git a/...cs/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx b/...cs/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx
@@ -41,52 +41,57 @@ export const ConfigLogsView = ({
           ...schema.props,
         };
         const DimensionComponent = schema.component || ButtonGroupItem;
-        if (schema.eleType === 'buttons') {
-          params = {
-            title: schema.name,
-            legend: schema.name,
-            groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
-              ...btn,
-              label: btn.name,
-            })),
-            idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-            handleButtonChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
-          };
-        } else if (schema.eleType === 'switch') {
-          let isDisabled = false;
-          if (schema.name === 'Time') {
-            const isTimeAvailable =
-              rawData &&
-              rawData.find(
-                (data) => data.timestamp !== undefined || data.new_timestamp !== undefined
-              );
-            isDisabled = isTimeAvailable === undefined;
-          }
-          params = {
-            label: schema.name,
-            disabled: isDisabled,
-            checked:
-              vizState[schema.mapTo] !== undefined ? vizState[schema.mapTo] : schema?.defaultState,
-            handleChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
-          };
-        } else {
-          params = {
-            title: schema.name,
-            currentValue: vizState[schema.mapTo] || '',
-            handleInputChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
-          };
+        switch (schema.eleType) {
+          case 'buttons':
+            params = {
+              title: schema.name,
+              legend: schema.name,
+              groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+                ...btn,
+                label: btn.name,
+              })),
+              idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+              handleButtonChange: handleConfigurationChange(schema.mapTo),
+              vizState,
+              ...schema.props,
+            };
+            break;
+          case 'switch':
+            let isDisabled = false;
+            if (schema.name === 'Time') {
+              const isTimeAvailable =
+                rawData &&
+                rawData.find(
+                  (data) => data.timestamp !== undefined || data.new_timestamp !== undefined
+                );
+              isDisabled = isTimeAvailable === undefined;
+            }
+            params = {
+              label: schema.name,
+              disabled: isDisabled,
+              checked:
+                vizState[schema.mapTo] !== undefined
+                  ? vizState[schema.mapTo]
+                  : schema?.defaultState,
+              handleChange: handleConfigurationChange(schema.mapTo),
+              vizState,
+              ...schema.props,
+            };
+            break;
+          default:
+            params = {
+              title: schema.name,
+              currentValue: vizState[schema.mapTo] || '',
+              handleInputChange: handleConfigurationChange(schema.mapTo),
+              vizState,
+              ...schema.props,
+            };
         }
         return (
-          <>
+          <React.Fragment key={`config-logs-view-${index}`}>
             <DimensionComponent key={`viz-series-${index}`} {...params} />
             <EuiSpacer size="s" />
-          </>
+          </React.Fragment>
         );
       }),
     [schemas, vizState, handleConfigurationChange]

diff --git a/...ytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx b/...ytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
@@ -4,8 +4,7 @@
  */
 
 import React from 'react';
-import { uniqueId } from 'lodash';
-import { EuiSpacer, EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { EuiSpacer, EuiFormRow, EuiSwitch, htmlIdGenerator } from '@elastic/eui';
 
 interface EUISwitch {
   label: string;
@@ -14,10 +13,10 @@ interface EUISwitch {
   handleChange: (isChecked: boolean) => void;
 }
 export const ConfigSwitch: React.FC<EUISwitch> = ({ label, disabled, checked, handleChange }) => (
-  <>
+  <React.Fragment key={`config-switch-${label}`}>
     <EuiFormRow label={label}>
       <EuiSwitch
-        id={uniqueId('switch-button')}
+        id={htmlIdGenerator('switch-button')()}
         showLabel={false}
         disabled={disabled}
         label={label}
@@ -27,5 +26,5 @@ export const ConfigSwitch: React.FC<EUISwitch> = ({ label, disabled, checked, ha
       />
     </EuiFormRow>
     <EuiSpacer size="s" />
-  </>
+  </React.Fragment>
 );
diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
@@ -5,7 +5,12 @@
 
 import { isEmpty, take } from 'lodash';
 import { getVisType } from '../vis_types';
-import { IVisualizationContainerProps, IField, IQuery } from '../../../../../common/types/explorer';
+import {
+  IVisualizationContainerProps,
+  IField,
+  IQuery,
+  ExplorerData,
+} from '../../../../../common/types/explorer';
 import { visChartTypes } from '../../../../../common/constants/shared';
 
 interface IVizContainerProps {
@@ -19,20 +24,28 @@ interface IVizContainerProps {
     xaxis: IField[];
     yaxis: IField[];
   };
-  explorer?: any;
+  explorer?: ExplorerData;
 }
 
 const getDefaultXYAxisLabels = (vizFields: IField[], visName: string) => {
   if (isEmpty(vizFields)) return {};
-  const vizFieldsWithLabel: ({ [key: string]: string })[] = vizFields.map(vizField => ({ ...vizField, label: vizField.name }));
+  const vizFieldsWithLabel: { [key: string]: string }[] = vizFields.map((vizField) => ({
+    ...vizField,
+    label: vizField.name,
+  }));
 
-  const mapXaxis = (): ({ [key: string]: string })[] => visName === visChartTypes.Line ?
-    vizFieldsWithLabel.filter((field) => field.type === 'timestamp') :
-    [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]];
+  const mapXaxis = (): { [key: string]: string }[] =>
+    visName === visChartTypes.Line
+      ? vizFieldsWithLabel.filter((field) => field.type === 'timestamp')
+      : [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]];
 
-  const mapYaxis = (): ({ [key: string]: string })[] => visName === visChartTypes.Line ?
-    vizFieldsWithLabel.filter((field) => field.type !== 'timestamp')
-    : take(vizFieldsWithLabel, vizFieldsWithLabel.length - 1 > 0 ? vizFieldsWithLabel.length - 1 : 1) || [];
+  const mapYaxis = (): { [key: string]: string }[] =>
+    visName === visChartTypes.Line
+      ? vizFieldsWithLabel.filter((field) => field.type !== 'timestamp')
+      : take(
+          vizFieldsWithLabel,
+          vizFieldsWithLabel.length - 1 > 0 ? vizFieldsWithLabel.length - 1 : 1
+        ) || [];
 
   return { xaxis: mapXaxis(), yaxis: mapYaxis() };
 };
@@ -44,15 +57,17 @@ export const getVizContainerProps = ({
   indexFields = {},
   userConfigs = {},
   appData = {},
-  explorer = {},
+  explorer = { explorerData: null },
 }: IVizContainerProps): IVisualizationContainerProps => {
   const getVisTypeData = () => {
     if (vizId === visChartTypes.Line || vizId === visChartTypes.Scatter) {
-      return vizId === visChartTypes.Line ? { ...getVisType(vizId, { type: visChartTypes.Line }) } : { ...getVisType(vizId, { type: visChartTypes.Scatter }) };
+      return vizId === visChartTypes.Line
+        ? { ...getVisType(vizId, { type: visChartTypes.Line }) }
+        : { ...getVisType(vizId, { type: visChartTypes.Scatter }) };
     } else {
-      return { ...getVisType(vizId) }
+      return { ...getVisType(vizId) };
     }
-  }
+  };
 
   return {
     data: {
@@ -67,7 +82,7 @@ export const getVizContainerProps = ({
       explorer: { ...explorer },
     },
     vis: {
-      ...getVisTypeData()
+      ...getVisTypeData(),
     },
   };
 };
diff --git a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss
@@ -21,3 +21,7 @@ th {
 tr:hover {
   background-color: #ddd;
 }
+
+.logs-view-container {
+  font-size: 16px;
+}
diff --git a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx
@@ -2,27 +2,30 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+import { IExplorerFields } from '../../../../../common/types/explorer';
 import React from 'react';
 import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer';
 import { DataGrid } from '../../../../components/event_analytics/explorer/events_views/data_grid';
 import './logs_view.scss';
 
 export const LogsView = ({ visualizations }: any) => {
-  const http = visualizations?.data?.explorer?.http;
-  const pplService = visualizations?.data?.explorer?.pplService;
-  const explorerData = visualizations?.data?.explorer?.explorerData;
-  const explorerFields = visualizations?.data?.explorer?.explorerFields;
-  const query = visualizations?.data?.explorer?.query;
+  const explorer = visualizations?.data?.explorer;
 
-  const emptyExplorerFields = {
+  const http = explorer?.http;
+  const pplService = explorer?.pplService;
+  const explorerData = explorer?.explorerData;
+  const explorerFields = explorer?.explorerFields;
+  const query = explorer?.query;
+
+  const emptyExplorerFields: IExplorerFields = {
     availableFields: [],
     queriedFields: [],
     selectedFields: [],
     unselectedFields: [],
   };
 
   return (
-    <div style={{ fontSize: '16px' }}>
+    <div className="logs-view-container">
       <DataGrid
         http={http}
         pplService={pplService}