From e771b5de4543068b1d24e644376b89a3939ee506 Mon Sep 17 00:00:00 2001 From: "harshada.lingayat" Date: Fri, 30 Sep 2022 15:31:47 +0000 Subject: [PATCH] Review comments resolved Signed-off-by: harshada.lingayat --- .../common/types/explorer.ts | 17 +++++ .../config_controls/config_style_slider.tsx | 73 +++++++++++-------- .../config_treemap_parents.tsx | 12 +-- .../data_config_panel_fields.tsx | 32 ++++---- .../data_configurations_panel.tsx | 4 +- .../treemap_config_panel_item.tsx | 15 ++-- .../visualizations/charts/maps/heatmap.tsx | 9 +-- .../visualizations/charts/pie/pie.tsx | 2 - 8 files changed, 93 insertions(+), 71 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index a3669419e..d9b16733c 100644 --- 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/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx index c90fd4180..b1f9d890b 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx +++ b/dashboards-observability/public/components/event_analytics/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 | React.MouseEvent) => void; + title: string; + currentRange: string; + minRange?: number; + maxRange: number; + showTicks?: boolean; + ticks?: EuiRangeTick[]; + step: number; + handleSliderChange: ( + e: React.ChangeEvent | React.MouseEvent + ) => void; } export const SliderConfig: React.FC = ({ - title, currentRange, handleSliderChange, minRange, maxRange, showTicks, ticks, step + title, + currentRange, + handleSliderChange, + minRange, + maxRange, + showTicks, + ticks, + step, }) => ( - <> - -

{title}

- - - handleSliderChange(e.target.value)} - showTicks={showTicks} - ticks={ticks} - step={step} - compressed - showInput - /> - + <> + +

{title}

+ + + handleSliderChange(e.target.value)} + showTicks={showTicks} + ticks={ticks} + step={step} + compressed + showInput + /> + ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx index c840f6ac2..12b48a723 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/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 = ({ - handleEditParent(index)}> - + + handleEditParent(index)}> {obj.label !== '' ? obj.label : `Parent ${index + 1}`} - + { +}: 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 = ({ {list !== undefined && + isArray(list) && list.map((obj: ConfigListEntry, index: number) => ( - handleServiceEdit(false, index, sectionName)} - > - + + handleServiceEdit(false, index, sectionName)} + > {obj[CUSTOM_LABEL] || `${sectionName === AGGREGATIONS ? obj.aggregation : ''} ${obj.label}`} - + { + const getRenderFieldsObj = (sectionName: string): DataConfigPanelFieldProps => { return { list: configList[sectionName], sectionName, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx index d4c08068f..3c240b47f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/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; + }>(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>) => { const selectedAxis = configList.dimensions[0]?.parentFields; const { index } = selectedParentItem; @@ -215,10 +220,6 @@ export const TreemapConfigPanelItem = ({

Parent Fields

({ - 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 index da487c51e..c39c70c23 100644 --- 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 index 88500a665..86ea12888 100644 --- 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 {