Review comments resolved

Signed-off-by: harshada.lingayat <harshada_lingayat@persistent.com>
opensearch-project · Sep 30, 2022 · e771b5d · e771b5d
1 parent 3fb0130
commit e771b5d
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 71 deletions.
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -6,6 +6,7 @@
 import { History } from 'history';
 import Plotly from 'plotly.js-dist';
 import { QueryManager } from 'common/query_manager';
+import { VIS_CHART_TYPES } from '../../common/constants/shared';
 import {
   RAW_QUERY,
   SELECTED_FIELDS,
@@ -341,3 +342,19 @@ export interface ParentUnitType {
   label: string;
   type: string;
 }
+
+export interface TreemapParentsProps {
+  selectedAxis: ParentUnitType[];
+  setSelectedParentItem: (item: { isClicked: boolean; index: number }) => void;
+  handleUpdateParentFields: (arr: ParentUnitType[]) => void;
+}
+
+export interface DataConfigPanelFieldProps {
+  list: ConfigListEntry[];
+  sectionName: string;
+  visType: VIS_CHART_TYPES;
+  addButtonText: string;
+  handleServiceAdd: (name: string) => void;
+  handleServiceRemove: (index: number, name: string) => void;
+  handleServiceEdit: (isClose: boolean, arrIndex: number, sectionName: string) => void;
+}
diff --git a/...explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx b/...explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx
@@ -4,45 +4,54 @@
  */
 
 import React, { ReactNode } from 'react';
-import { EuiTitle, EuiSpacer, EuiRange, htmlIdGenerator, } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, EuiRange, htmlIdGenerator } from '@elastic/eui';
 
 export interface EuiRangeTick {
-    value: number;
-    label: ReactNode;
+  value: number;
+  label: ReactNode;
 }
 
 interface Props {
-    title: string;
-    currentRange: string;
-    minRange?: number;
-    maxRange: number;
-    showTicks?: boolean;
-    ticks?: EuiRangeTick[];
-    step: number;
-    handleSliderChange: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
+  title: string;
+  currentRange: string;
+  minRange?: number;
+  maxRange: number;
+  showTicks?: boolean;
+  ticks?: EuiRangeTick[];
+  step: number;
+  handleSliderChange: (
+    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+  ) => void;
 }
 
 export const SliderConfig: React.FC<Props> = ({
-    title, currentRange, handleSliderChange, minRange, maxRange, showTicks, ticks, step
+  title,
+  currentRange,
+  handleSliderChange,
+  minRange,
+  maxRange,
+  showTicks,
+  ticks,
+  step,
 }) => (
-    <>
-        <EuiTitle size="xxs">
-            <h3>{title}</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiRange
-            aria-label="change lineWidth slider"
-            id={htmlIdGenerator('inputRangeSlider')()}
-            min={minRange}
-            max={maxRange}
-            name={title}
-            value={currentRange}
-            onChange={(e) => handleSliderChange(e.target.value)}
-            showTicks={showTicks}
-            ticks={ticks}
-            step={step}
-            compressed
-            showInput
-        />
-    </>
+  <>
+    <EuiTitle size="xxs">
+      <h3>{title}</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiRange
+      aria-label="change lineWidth slider"
+      id={htmlIdGenerator('inputRangeSlider')()}
+      min={minRange}
+      max={maxRange}
+      name={title}
+      value={currentRange}
+      onChange={(e) => handleSliderChange(e.target.value)}
+      showTicks={showTicks}
+      ticks={ticks}
+      step={step}
+      compressed
+      showInput
+    />
+  </>
 );
diff --git a/...lorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx b/...lorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
@@ -3,16 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonIcon, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiButtonIcon, EuiLink, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import React, { Fragment } from 'react';
-import { ParentUnitType } from '../../../../../../../../common/types/explorer';
+import { ParentUnitType, TreemapParentsProps } from '../../../../../../../../common/types/explorer';
 
 export const ConfigTreemapParentFields = ({
   selectedAxis,
   setSelectedParentItem,
   handleUpdateParentFields,
-}: any) => {
+}: TreemapParentsProps) => {
   const addButtonText = 'Add Parent';
   const initialParentState = {
     name: '',
@@ -45,10 +45,10 @@ export const ConfigTreemapParentFields = ({
             <Fragment key={index}>
               <EuiSpacer size="s" />
               <EuiPanel paddingSize="s" className="panelItem_button">
-                <EuiText size="s" className="field_text" onClick={() => handleEditParent(index)}>
-                  <a role="button" tabIndex={0}>
+                <EuiText size="s" className="field_text">
+                  <EuiLink role="button" tabIndex={0} onClick={() => handleEditParent(index)}>
                     {obj.label !== '' ? obj.label : `Parent ${index + 1}`}
-                  </a>
+                  </EuiLink>
                 </EuiText>
                 <EuiButtonIcon
                   color="subdued"

diff --git a/...rer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/...rer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -3,8 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { Fragment } from 'react';
-import { EuiButtonIcon, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
-import { ConfigListEntry } from '../../../../../../../../common/types/explorer';
+import { EuiButtonIcon, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { isArray } from 'lodash';
+import {
+  ConfigListEntry,
+  DataConfigPanelFieldProps,
+} from '../../../../../../../../common/types/explorer';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
 import {
   AGGREGATIONS,
@@ -20,13 +24,10 @@ export const DataConfigPanelFields = ({
   handleServiceAdd,
   handleServiceRemove,
   handleServiceEdit,
-}: any) => {
+}: DataConfigPanelFieldProps) => {
   const isHeatMapAddButton = (name: string) => {
-    if (visType === VIS_CHART_TYPES.HeatMap) {
-      if (name === AGGREGATIONS) return list?.length === 1;
-      return !(list?.length < 2);
-    }
-    return false;
+    if (!list || !isArray(list) || visType !== VIS_CHART_TYPES.HeatMap) return false;
+    return name === AGGREGATIONS ? list.length === 1 : !(list?.length < 2);
   };
 
   return (
@@ -36,18 +37,19 @@ export const DataConfigPanelFields = ({
       </EuiTitle>
       <EuiSpacer size="s" />
       {list !== undefined &&
+        isArray(list) &&
         list.map((obj: ConfigListEntry, index: number) => (
           <Fragment key={index}>
             <EuiPanel paddingSize="s" className="panelItem_button">
-              <EuiText
-                size="s"
-                className="field_text"
-                onClick={() => handleServiceEdit(false, index, sectionName)}
-              >
-                <a role="button" tabIndex={0}>
+              <EuiText size="s" className="field_text">
+                <EuiLink
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => handleServiceEdit(false, index, sectionName)}
+                >
                   {obj[CUSTOM_LABEL] ||
                     `${sectionName === AGGREGATIONS ? obj.aggregation : ''} ${obj.label}`}
-                </a>
+                </EuiLink>
               </EuiText>
               <EuiButtonIcon
                 color="subdued"

diff --git a/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -18,7 +18,6 @@ import {
   EuiSpacer,
   EuiTitle,
   htmlIdGenerator,
-  EuiToolTip,
 } from '@elastic/eui';
 import { batch, useDispatch } from 'react-redux';
 import {
@@ -35,6 +34,7 @@ import { composeAggregations } from '../../../../../../../../common/query_manage
 import {
   ConfigList,
   ConfigListEntry,
+  DataConfigPanelFieldProps,
   DataConfigPanelProps,
   SelectedConfigItem,
 } from '../../../../../../../../common/types/explorer';
@@ -491,7 +491,7 @@ export const DataConfigPanelItem = ({
     );
   }, [availableFields, configList.span]);
 
-  const getRenderFieldsObj = (sectionName: string) => {
+  const getRenderFieldsObj = (sectionName: string): DataConfigPanelFieldProps => {
     return {
       list: configList[sectionName],
       sectionName,

diff --git a/...er/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/...er/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
@@ -17,6 +17,7 @@ import {
 import { uniqueId } from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
 import {
   CHILDFIELD,
   AGGREGATIONS,
@@ -32,15 +33,16 @@ import {
   DataConfigPanelProps,
   ParentUnitType,
 } from '../../../../../../../../common/types/explorer';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
 
 export const TreemapConfigPanelItem = ({
   fieldOptionList,
   visualizations,
 }: DataConfigPanelProps) => {
   const dispatch = useDispatch();
-  const { tabId, curVisId, changeVisualizationConfig, fetchData, handleQueryChange } = useContext<
-    any
-  >(TabContext);
+  const { tabId, curVisId, changeVisualizationConfig } = useContext<{
+    [key: string]: string | VIS_CHART_TYPES | ActionCreatorWithPayload<string, string>;
+  }>(TabContext);
 
   const { data } = visualizations;
   const { userConfigs } = data;
@@ -155,9 +157,12 @@ export const TreemapConfigPanelItem = ({
       </>
     );
   };
+
+  // Below function take input array for dimensions parent fields.
   const handleUpdateParentFields = (arr: ParentUnitType[]) =>
     updateList(GROUPBY, PARENTFIELDS, arr);
 
+  // Below function handle change for input parent fields.
   const handleParentChange = (values: Array<EuiComboBoxOptionOption<unknown>>) => {
     const selectedAxis = configList.dimensions[0]?.parentFields;
     const { index } = selectedParentItem;
@@ -215,10 +220,6 @@ export const TreemapConfigPanelItem = ({
             <h3>Parent Fields</h3>
           </EuiTitle>
           <ConfigTreemapParentFields
-            dropdownList={getOptionsAvailable(GROUPBY).map((opt) => ({
-              label: opt.label,
-              name: opt.label,
-            }))}
             selectedAxis={configList.dimensions[0]?.parentFields}
             handleUpdateParentFields={handleUpdateParentFields}
             setSelectedParentItem={setSelectedParentItem}

diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
@@ -2,11 +2,10 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
+import React, { useMemo } from 'react';
 import { colorPalette } from '@elastic/eui';
 import { has, isEmpty, uniq } from 'lodash';
 import Plotly from 'plotly.js-dist';
-import React, { useMemo } from 'react';
 import {
   HEATMAP_PALETTE_COLOR,
   HEATMAP_SINGLE_COLOR,
@@ -19,13 +18,9 @@ import {
   getPropName,
 } from '../../../../components/event_analytics/utils/utils';
 import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
-import {
-  getPropName,
-  hexToRgb,
-  lightenColor,
-} from '../../../../components/event_analytics/utils/utils';
 import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
 import { Plt } from '../../plotly/plot';
+import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
 
 export const HeatMap = ({ visualizations, layout, config }: any) => {
   const {

diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
@@ -19,9 +19,7 @@ import {
   PIE_XAXIS_GAP,
   AGGREGATIONS,
   GROUPBY,
-  CUSTOM_LABEL,
 } from '../../../../../common/constants/explorer';
-import { getPropName } from '../../../event_analytics/utils/utils';
 
 export const Pie = ({ visualizations, layout, config }: any) => {
   const {