[FEATURE]: Updated data configuration UI and Two way sync for Custom Label

dashboards-observability/common/constants/explorer.ts

@@ -179,6 +179,10 @@ export const DEFAULT_PIE_CHART_PARAMETERS: DefaultPieChartParameterProps = {
 };
 export const GROUPBY = 'dimensions';
 export const AGGREGATIONS = 'series';
+export const PARENTFIELDS = 'parentFields';
+export const VALUEFIELD = 'valueField';
+export const CHILDFIELD = 'childField';
+export const TIMESTAMP = 'timestamp';
 
 // stats constants
 export const STATS_GRID_SPACE_BETWEEN_X_AXIS = 0.01;

dashboards-observability/common/query_manager/ast/builder/stats_builder.ts

@@ -26,6 +26,7 @@ import {
   SpanExpressionChunk,
 } from '../types';
 import { CUSTOM_LABEL } from '../../../../common/constants/explorer';
+
 export class StatsBuilder implements QueryBuilder<Aggregations> {
   constructor(private statsChunk: statsChunk) {}
 

dashboards-observability/common/query_manager/ast/expression/AggregateTerm.ts

@@ -2,9 +2,8 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { PPLNode } from '../node';
 import { CUSTOM_LABEL } from '../../../../common/constants/explorer';
+import { PPLNode } from '../node';
 export class AggregateTerm extends PPLNode {
   constructor(
     name: string,

dashboards-observability/common/query_manager/utils/index.ts

@@ -2,9 +2,8 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { AggregationConfigurations, PreviouslyParsedStaleStats } from '../ast/types';
 import { CUSTOM_LABEL } from '../../../common/constants/explorer';
+import { AggregationConfigurations, PreviouslyParsedStaleStats } from '../ast/types';
 
 export const composeAggregations = (
   aggConfig: AggregationConfigurations,

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,
@@ -18,6 +19,7 @@ import {
   SELECTED_DATE_RANGE,
   GROUPBY,
   AGGREGATIONS,
+  CUSTOM_LABEL,
 } from '../constants/explorer';
 import {
   CoreStart,
@@ -278,7 +280,7 @@ export interface LiveTailProps {
 export interface ConfigListEntry {
   label: string;
   aggregation: string;
-  custom_label: string;
+  [CUSTOM_LABEL]: string;
   name: string;
   side: string;
   type: string;
@@ -329,3 +331,30 @@ export interface GetTooltipHoverInfoType {
   tooltipMode: string;
   tooltipText: string;
 }
+
+export interface SelectedConfigItem {
+  index: number;
+  name: string;
+}
+
+export interface ParentUnitType {
+  name: string;
+  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;
+}

dashboards-observability/public/components/event_analytics/explorer/explorer.tsx

@@ -86,6 +86,7 @@ import {
   statsChunk,
   GroupByChunk,
   StatsAggregationChunk,
+  GroupField,
 } from '../../../../common/query_manager/ast/types';
 
 const TYPE_TAB_MAPPING = {
@@ -155,7 +156,6 @@ export const Explorer = ({
   const [isValidDataConfigOptionSelected, setIsValidDataConfigOptionSelected] = useState<boolean>(
     false
   );
-
   const queryRef = useRef();
   const appBasedRef = useRef('');
   appBasedRef.current = appBaseQuery;
@@ -316,7 +316,7 @@ export const Explorer = ({
     indexPattern: string
   ): Promise<IDefaultTimestampState> => await timestampUtils.getTimestamp(indexPattern);
 
-  const fetchData = async (startingTime?: string, endingTime?: string) => {
+  const fetchData = async (isRefresh?: boolean, startingTime?: string, endingTime?: string) => {
     const curQuery = queryRef.current;
     const rawQueryStr = buildQuery(appBasedRef.current, curQuery![RAW_QUERY]);
     const curIndex = getIndexPatternFromRawQuery(rawQueryStr);
@@ -375,10 +375,7 @@ export const Explorer = ({
           changeVisualizationConfig({
             tabId,
             vizId: visId,
-            data: {
-              ...userVizConfigs[visId],
-              dataConfig: {},
-            },
+            data: isRefresh ? { dataConfig: {} } : { ...userVizConfigs[visId] },
           })
         );
       }
@@ -932,11 +929,12 @@ export const Explorer = ({
             label: agg.function?.value_expression,
             name: agg.function?.value_expression,
             aggregation: agg.function?.name,
-            [CUSTOM_LABEL]: agg[CUSTOM_LABEL],
+            [CUSTOM_LABEL]: agg[CUSTOM_LABEL as keyof StatsAggregationChunk],
           })),
           [GROUPBY]: groupByToken?.group_fields?.map((agg) => ({
             label: agg.name ?? '',
             name: agg.name ?? '',
+            [CUSTOM_LABEL]: agg[CUSTOM_LABEL as keyof GroupField] ?? '',
           })),
           span,
         };
@@ -956,7 +954,7 @@ export const Explorer = ({
       if (availability !== true) {
         await updateQueryInStore(tempQuery);
       }
-      await fetchData();
+      await fetchData(true);
 
       if (selectedContentTabId === TAB_CHART_ID) {
         // parse stats section on every search
@@ -966,7 +964,7 @@ export const Explorer = ({
           changeVizConfig({
             tabId,
             vizId: curVisId,
-            data: { ...updatedDataConfig },
+            data: { dataConfig: { ...updatedDataConfig } },
           })
         );
       }
@@ -1269,7 +1267,7 @@ export const Explorer = ({
   const handleLiveTailSearch = useCallback(
     async (startingTime: string, endingTime: string) => {
       await updateQueryInStore(tempQuery);
-      fetchData(startingTime, endingTime);
+      fetchData(false, startingTime, endingTime);
     },
     [tempQuery]
   );

dashboards-observability/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;
@@ -21,7 +21,7 @@ $vis-editor-sidebar-min-width: 350px;
   min-width: $vis-editor-sidebar-min-width;
 
   // a hack for IE, issue: https://github.com/elastic/kibana/issues/66586
-  > .visEditorSidebar__formWrapper {
+  >.visEditorSidebar__formWrapper {
     flex-basis: auto;
   }
 }
@@ -66,7 +66,7 @@ $vis-editor-sidebar-min-width: 350px;
   padding: $euiSizeS;
   border-radius: $euiBorderRadius;
 
-  + .visEditorSidebar__section {
+  +.visEditorSidebar__section {
     margin-top: $euiSizeS;
   }
 }
@@ -128,7 +128,7 @@ $vis-editor-sidebar-min-width: 350px;
   max-height: 250px;
 }
 
-.euiComboBoxOptionsList__rowWrap > div {
+.euiComboBoxOptionsList__rowWrap>div {
   height: 250px !important;
 }
 
@@ -165,3 +165,27 @@ $vis-editor-sidebar-min-width: 350px;
   overflow-y: unset; // unset default setting
 }
 
+.panelItem_button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-gap: $euiSizeS;
+  padding: $euiSizeS $euiSizeM;
+  align-items: center;
+}
+
+.field_text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.panel_section {
+  border-bottom: 1px solid #d3dae6;
+}
+
+.panel_title {
+  display: block;
+}
+
+.panel_title:first-letter {
+  text-transform: uppercase;
+}

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<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
+    />
+  </>
 );