Made code compatible with PR changes

Signed-off-by: harshada.lingayat <harshada_lingayat@persistent.com>
opensearch-project · Sep 27, 2022 · 9211985 · 9211985
1 parent aaede10
commit 9211985
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 79 deletions.
diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
@@ -120,7 +120,7 @@ export const AGGREGATION_OPTIONS = [
 ];
 
 // numeric fields type for metrics
-export const numericalTypes = [
+export const NUMERICAL_TYPES = [
   'float',
   'double',
   'bigint',
@@ -175,9 +175,6 @@ export const DEFAULT_PIE_CHART_PARAMETERS: DefaultPieChartParameterProps = {
 };
 export const GROUPBY = 'dimensions';
 export const AGGREGATIONS = 'series';
-export const DIMENSIONS = 'dimensions';
-export const METRICS = 'metrics';
-export const SERIES = 'Series';
 export const PARENTFIELDS = 'parentFields';
 export const VALUEFIELD = 'valueField';
 export const CHILDFIELD = 'childField';

diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
@@ -924,15 +924,14 @@ export const Explorer = ({
 
       if (selectedContentTabId === TAB_CHART_ID) {
         // parse stats section on every search
-        const qm = new QueryManager();
         const statsTokens = qm.queryParser().parse(tempQuery).getStats();
 
         const updatedDataConfig = getUpdatedDataConfig(statsTokens);
         await dispatch(
           changeVizConfig({
             tabId,
             vizId: curVisId,
-            data: { ...updatedDataConfig },
+            data: { dataConfig: { ...updatedDataConfig } },
           })
         );
       }

diff --git a/.../public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/.../public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
@@ -4,7 +4,7 @@
  */
 
 .lnsConfigPanel__addLayerBtn {
-  color: transparentize($euiColorMediumShade, .3);
+  color: transparentize($euiColorMediumShade, 0.3);
   // Remove EuiButton's default shadow to make button more subtle
   // sass-lint:disable-block no-important
   box-shadow: none !important;
@@ -149,7 +149,15 @@ $vis-editor-sidebar-min-width: 350px;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.panel_section{
-  border-bottom: 1px solid #D3DAE6;
+
+.panel_section {
+  border-bottom: 1px solid #d3dae6;
+}
+
+.panel_title {
+  display: block;
 }
 
+.panel_title:first-letter {
+  text-transform: uppercase;
+}
diff --git a/...visualizations/config_panel/config_panes/config_controls/data_config_item_click_panel.tsx b/...visualizations/config_panel/config_panes/config_controls/data_config_item_click_panel.tsx
@@ -26,7 +26,7 @@ export const DataConfigItemClickPanel = ({ title, isSecondary, closeMenu }: Titl
       <EuiFlexGroup gutterSize="s" alignItems="center">
         {icon && <EuiFlexItem grow={false}>{icon}</EuiFlexItem>}
         <EuiFlexItem>
-          <EuiTitle size="xxs">
+          <EuiTitle size="xxs" className="panel_title">
             <h2>{title}</h2>
           </EuiTitle>
         </EuiFlexItem>

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
@@ -5,23 +5,30 @@
 import React from 'react';
 import { EuiButtonIcon, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { ConfigListEntry } from '../../../../../../../../common/types/explorer';
-import { visChartTypes } from '../../../../../../../../common/constants/shared';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import { AGGREGATIONS, GROUPBY } from '../../../../../../../../common/constants/explorer';
 
 export const DataConfigPanelFields = ({
   list,
   sectionName,
-  title,
   visType,
   addButtonText,
   handleServiceAdd,
   handleServiceRemove,
   handleServiceEdit,
 }: any) => {
-  const isHeatMap = visType === visChartTypes.HeatMap && list?.length >= 1;
+  const isHeatMapAddButton = (name: string) => {
+    if (visType === VIS_CHART_TYPES.HeatMap) {
+      if (name === AGGREGATIONS) return list?.length === 1;
+      return !(list?.length < 2);
+    }
+    return false;
+  };
+
   return (
     <div className="panel_section">
-      <EuiTitle size="xxs">
-        <h3>{title}</h3>
+      <EuiTitle size="xxs" className="panel_title">
+        <h3>{sectionName}</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
       {list !== undefined &&
@@ -34,7 +41,8 @@ export const DataConfigPanelFields = ({
                 onClick={() => handleServiceEdit(false, index, sectionName)}
               >
                 <a role="button" tabIndex={0}>
-                  {obj?.alias || obj.label}
+                  {obj?.alias ||
+                    `${sectionName === AGGREGATIONS ? obj.aggregation : ''} ${obj.label}`}
                 </a>
               </EuiText>
               <EuiButtonIcon
@@ -48,15 +56,15 @@ export const DataConfigPanelFields = ({
             <EuiSpacer size="s" />
           </>
         ))}
-      {!isHeatMap && (
+      {!isHeatMapAddButton(sectionName) && (
         <EuiPanel className="panelItem_button" grow>
           <EuiText size="s">{addButtonText}</EuiText>
           <EuiButtonIcon
             iconType="plusInCircle"
             aria-label="add-field"
             iconSize="s"
             color="primary"
-            disabled={sectionName === 'dimensions' && visType === visChartTypes.Line}
+            disabled={sectionName === GROUPBY && visType === VIS_CHART_TYPES.Line}
             onClick={() => handleServiceAdd(sectionName)}
           />
         </EuiPanel>

diff --git a/...lorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/...lorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
@@ -21,22 +21,17 @@ import {
   AGGREGATIONS,
   AGGREGATION_OPTIONS,
   GROUPBY,
-  NUMERICAL_TYPES,
   RAW_QUERY,
-  SERIES,
   TIMESTAMP,
   TIME_INTERVAL_OPTIONS,
 } from '../../../../../../../../common/constants/explorer';
-import { ButtonGroupItem } from './config_button_group';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
-import { ConfigList, DataConfigPanelProps } from '../../../../../../../../common/types/explorer';
-import { TabContext } from '../../../../../hooks';
 import { composeAggregations } from '../../../../../../../../common/query_manager/utils';
 import {
   ConfigList,
-  SelectedConfigItem,
-  DataConfigPanelProps,
   ConfigListEntry,
+  DataConfigPanelProps,
+  SelectedConfigItem,
 } from '../../../../../../../../common/types/explorer';
 import { TabContext } from '../../../../../hooks';
 import { changeQuery } from '../../../../../redux/slices/query_slice';
@@ -63,9 +58,15 @@ export const DataConfigPanelItem = ({
   qm,
 }: DataConfigPanelProps) => {
   const dispatch = useDispatch();
-  const { tabId, handleQueryChange, fetchData, changeVisualizationConfig, curVisId } = useContext<
-    any
-  >(TabContext);
+  const {
+    tabId,
+    handleQuerySearch,
+    handleQueryChange,
+    setTempQuery,
+    fetchData,
+    changeVisualizationConfig,
+    curVisId,
+  } = useContext<any>(TabContext);
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
   const {
@@ -88,26 +89,24 @@ export const DataConfigPanelItem = ({
   }, [userConfigs?.dataConfig, visualizations.vis.name]);
 
   const updateList = (value: string, field: string) => {
-    if (value !== '') {
-      const { index, name } = selectedConfigItem;
-      let listItem = { ...configList[name][index] };
-      listItem = {
-        ...listItem,
-        [field === 'custom_label' ? 'alias' : field]: value.trim(),
-      };
-      if (field === 'label') {
-        listItem.name = value;
-      }
-      const updatedList = {
-        ...configList,
-        [name]: [
-          ...configList[name].slice(0, index),
-          listItem,
-          ...configList[name].slice(index + 1, configList[name].length),
-        ],
-      };
-      setConfigList(updatedList);
+    const { index, name } = selectedConfigItem;
+    let listItem = { ...configList[name][index] };
+    listItem = {
+      ...listItem,
+      [field === 'custom_label' ? 'alias' : field]: value.trim(),
+    };
+    if (field === 'label') {
+      listItem.name = value;
     }
+    const updatedList = {
+      ...configList,
+      [name]: [
+        ...configList[name].slice(0, index),
+        listItem,
+        ...configList[name].slice(index + 1, configList[name].length),
+      ],
+    };
+    setConfigList(updatedList);
   };
 
   const updateHistogramConfig = (configName: string, fieldName: string, value: string) => {
@@ -142,7 +141,24 @@ export const DataConfigPanelItem = ({
     setConfigList(list);
   };
 
-  const updateChart = (updatedConfigList: ConfigList = configList) => {
+  const handleServiceEdit = (isClose: boolean, arrIndex: number, sectionName: string) => {
+    if (isClose) {
+      const { index, name } = selectedConfigItem;
+      const selectedObj = configList[name][index];
+      if (
+        selectedObj.aggregation !== 'count' &&
+        (selectedObj.aggregation === '' || selectedObj.name === '')
+      ) {
+        const list = { ...configList };
+        list[name].splice(index, 1);
+        setConfigList(list);
+      }
+    }
+    setSelectedConfigItem({ index: arrIndex, name: sectionName });
+    setIsAddConfigClicked(!isClose);
+  };
+
+  const updateChart = (updatedConfigList = configList) => {
     if (visualizations.vis.name === VIS_CHART_TYPES.Histogram) {
       dispatch(
         changeVizConfig({
@@ -152,8 +168,8 @@ export const DataConfigPanelItem = ({
             ...userConfigs,
             dataConfig: {
               ...userConfigs.dataConfig,
-              [GROUPBY]: configList[GROUPBY],
-              [AGGREGATIONS]: configList[AGGREGATIONS],
+              [GROUPBY]: updatedConfigList[GROUPBY],
+              [AGGREGATIONS]: updatedConfigList[AGGREGATIONS],
             },
           },
         })
@@ -183,8 +199,8 @@ export const DataConfigPanelItem = ({
             data: {
               dataConfig: {
                 ...userConfigs.dataConfig,
-                [GROUPBY]: configList[GROUPBY],
-                [AGGREGATIONS]: configList[AGGREGATIONS],
+                [GROUPBY]: updatedConfigList[GROUPBY],
+                [AGGREGATIONS]: updatedConfigList[AGGREGATIONS],
                 breakdowns: updatedConfigList.breakdowns,
                 span: updatedConfigList.span,
               },
@@ -214,7 +230,7 @@ export const DataConfigPanelItem = ({
   const getCommonUI = (title: string) => {
     const { index, name } = selectedConfigItem;
     const selectedObj = configList[name][index];
-    const isDimensions = name === DIMENSIONS;
+    const isDimensions = name === GROUPBY;
     return (
       <>
         <div key={index} className="services">
@@ -225,7 +241,7 @@ export const DataConfigPanelItem = ({
               closeMenu={() => handleServiceEdit(true, -1, '')}
             />
             <EuiPanel color="subdued" style={{ padding: '0px' }}>
-              {/* Aggregation input for Metrics */}
+              {/* Aggregation input for Series */}
               {!isDimensions && (
                 <EuiFormRow label="Aggregation">
                   <EuiComboBox
@@ -246,7 +262,7 @@ export const DataConfigPanelItem = ({
                   />
                 </EuiFormRow>
               )}
-              {/* Show input fields for metrics when aggregation is not empty  */}
+              {/* Show input fields for Series when aggregation is not empty  */}
               {!isDimensions && selectedObj.aggregation !== '' && (
                 <>
                   {getCommonDimensionsField(selectedObj, name)}
@@ -280,7 +296,7 @@ export const DataConfigPanelItem = ({
           </div>
         </div>
       </>
-  );
+    );
   };
 
   const getCommonDimensionsField = (selectedObj: ConfigListEntry, name: string) => (
@@ -315,7 +331,7 @@ export const DataConfigPanelItem = ({
             ? configList[GROUPBY][0][type]
             : ''
         }
-        onChange={(e) => updateHistogramConfig(DIMENSIONS, type, e.target.value)}
+        onChange={(e) => updateHistogramConfig(GROUPBY, type, e.target.value)}
         data-test-subj="valueFieldNumber"
       />
       <EuiSpacer size="s" />
@@ -441,11 +457,10 @@ export const DataConfigPanelItem = ({
     );
   }, [availableFields, configList.span]);
 
-  const getRenderFieldsObj = (sectionName: string, title: string) => {
+  const getRenderFieldsObj = (sectionName: string) => {
     return {
       list: configList[sectionName],
       sectionName,
-      title,
       visType: visualizations.vis.name,
       addButtonText: 'Click to add',
       handleServiceAdd,
@@ -454,7 +469,7 @@ export const DataConfigPanelItem = ({
     };
   };
   return isAddConfigClicked ? (
-    getCommonUI(selectedConfigItem.name === METRICS ? SERIES : 'Dimensions')
+    getCommonUI(selectedConfigItem.name)
   ) : (
     <>
       <EuiTitle size="xxs">
@@ -463,9 +478,9 @@ export const DataConfigPanelItem = ({
       <EuiSpacer size="s" />
       {visualizations.vis.name !== VIS_CHART_TYPES.Histogram ? (
         <>
-          {DataConfigPanelFields(getRenderFieldsObj(METRICS, SERIES))}
+          {DataConfigPanelFields(getRenderFieldsObj(AGGREGATIONS))}
           <EuiSpacer size="s" />
-          {DataConfigPanelFields(getRenderFieldsObj(DIMENSIONS, 'Dimensions'))}
+          {DataConfigPanelFields(getRenderFieldsObj(GROUPBY))}
           <EuiSpacer size="s" />
           <EuiTitle size="xxs">
             <h3>Date Histogram</h3>