Custom Label two way sync implementation

Signed-off-by: harshada.lingayat <harshada_lingayat@persistent.com>

dashboards-observability/common/constants/explorer.ts

@@ -179,3 +179,4 @@ export const PARENTFIELDS = 'parentFields';
 export const VALUEFIELD = 'valueField';
 export const CHILDFIELD = 'childField';
 export const TIMESTAMP = 'timestamp';
+export const CUSTOM_LABEL = 'customLabel';

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

@@ -25,6 +25,7 @@ import {
   statsChunk,
   SpanExpressionChunk,
 } from '../types';
+import { CUSTOM_LABEL } from '../../../../common/constants/explorer';
 
 export class StatsBuilder implements QueryBuilder<Aggregations> {
   constructor(private statsChunk: statsChunk) {}
@@ -119,7 +120,7 @@ export class StatsBuilder implements QueryBuilder<Aggregations> {
       'span_clause',
       [] as Array<PPLNode>,
       this.buildeSpanExpression(span.span_expression),
-      span.alias
+      span[CUSTOM_LABEL]
     );
   }
 

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

@@ -2,29 +2,31 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
+import { CUSTOM_LABEL } from '../../../../common/constants/explorer';
 import { PPLNode } from '../node';
 
 export class AggregateTerm extends PPLNode {
   constructor(
     name: string,
     children: Array<PPLNode>,
     private statsFunction: PPLNode,
-    private alias: string
+    private customLabel: string
   ) {
     super(name, children);
   }
 
   getTokens() {
     return {
       function: this.statsFunction.getTokens(),
-      alias: this.alias,
+      [CUSTOM_LABEL]: this[CUSTOM_LABEL],
     };
   }
 
   toString(): string {
-    if (this.alias) {
-      return `${this.statsFunction.toString()}${this.alias ? ` as ${this.alias}` : ''}`;
+    if (this[CUSTOM_LABEL]) {
+      return `${this.statsFunction.toString()}${
+        this[CUSTOM_LABEL] ? ` as ${this[CUSTOM_LABEL]}` : ''
+      }`;
     }
     return `${this.statsFunction.toString()}`;
   }

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

@@ -10,19 +10,19 @@ export class Span extends PPLNode {
     name: string,
     children: Array<PPLNode>,
     private spanExpression: PPLNode,
-    private alias: string
+    private customLabel: string
   ) {
     super(name, children);
   }
 
   getTokens() {
     return {
       span_expression: this.spanExpression.getTokens(),
-      alias: this.alias,
+      customLabel: this.customLabel,
     };
   }
 
   toString(): string {
-    return `${this.spanExpression.toString()}${this.alias ? ` as ${this.alias}` : ''}`;
+    return `${this.spanExpression.toString()}${this.customLabel ? ` as ${this.customLabel}` : ''}`;
   }
 }

dashboards-observability/common/query_manager/ast/types/stats.ts

@@ -22,7 +22,7 @@ export interface GroupField {
 }
 
 export interface SpanChunk {
-  alias: string;
+  customLabel: string;
   span_expression: SpanExpressionChunk;
 }
 
@@ -54,7 +54,7 @@ export interface ExpressionChunk {
 }
 
 export interface DataConfigSeries {
-  alias: string;
+  customLabel: string;
   label: string;
   name: string;
   aggregation: string;

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

@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
+import { CUSTOM_LABEL } from '../../../common/constants/explorer';
 import { AggregationConfigurations, PreviouslyParsedStaleStats } from '../ast/types';
 
 export const composeAggregations = (
@@ -11,7 +11,7 @@ export const composeAggregations = (
 ) => {
   return {
     aggregations: aggConfig.series.map((metric) => ({
-      function_alias: metric.alias,
+      function_alias: metric[CUSTOM_LABEL],
       function: {
         name: metric.aggregation,
         value_expression: metric.name,
@@ -31,12 +31,12 @@ export const composeAggregations = (
 
 const composeSpan = (spanConfig) => {
   return {
-    alias: spanConfig.alias ?? '',
+    [CUSTOM_LABEL]: spanConfig[CUSTOM_LABEL] ?? '',
     span_expression: {
       type: spanConfig.time_field[0]?.type ?? 'timestamp',
       field: spanConfig.time_field[0]?.name ?? 'timestamp',
       time_unit: spanConfig.unit[0]?.value ?? 'd',
-      literal_value: spanConfig.interval ?? 1
-    }
+      literal_value: spanConfig.interval ?? 1,
+    },
   };
 };

dashboards-observability/common/types/explorer.ts

@@ -18,6 +18,7 @@ import {
   SELECTED_DATE_RANGE,
   GROUPBY,
   AGGREGATIONS,
+  CUSTOM_LABEL,
 } from '../constants/explorer';
 import {
   CoreStart,
@@ -278,7 +279,7 @@ export interface LiveTailProps {
 export interface ConfigListEntry {
   label: string;
   aggregation: string;
-  alias: string;
+  [CUSTOM_LABEL]: string;
   name: string;
   side: string;
   type: string;

dashboards-observability/public/components/common/helpers/ppl_docs/language_structure/identifiers.ts

@@ -9,7 +9,7 @@ export const pplIdentifiers = `## Indentifiers
 ### **Introduction**
 
 Identifiers are used for naming your database objects, such as index
-name, field name, alias etc. Basically there are two types of
+name, field name, customLabel etc. Basically there are two types of
 identifiers: regular identifiers and delimited identifiers.
 
 ### **Regular Identifiers**

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

@@ -53,6 +53,7 @@ import {
   DATE_PICKER_FORMAT,
   GROUPBY,
   AGGREGATIONS,
+  CUSTOM_LABEL,
 } from '../../../../common/constants/explorer';
 import {
   PPL_STATS_REGEX,
@@ -81,7 +82,12 @@ import { getVizContainerProps } from '../../visualizations/charts/helpers';
 import { parseGetSuggestions, onItemSelect } from '../../common/search/autocomplete_logic';
 import { formatError } from '../utils';
 import { sleep } from '../../common/live_tail/live_tail_button';
-import { statsChunk, GroupByChunk } from '../../../../common/query_manager/ast/types';
+import {
+  statsChunk,
+  GroupByChunk,
+  StatsAggregationChunk,
+  GroupField,
+} from '../../../../common/query_manager/ast/types';
 
 const TYPE_TAB_MAPPING = {
   [SAVED_QUERY]: TAB_EVENT_ID,
@@ -310,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);
@@ -369,10 +375,7 @@ export const Explorer = ({
           changeVisualizationConfig({
             tabId,
             vizId: visId,
-            data: {
-              ...userVizConfigs[visId],
-              dataConfig: {},
-            },
+            data: isRefresh ? { dataConfig: {} } : { ...userVizConfigs[visId] },
           })
         );
       }
@@ -897,10 +900,12 @@ export const Explorer = ({
             label: agg.function?.value_expression,
             name: agg.function?.value_expression,
             aggregation: agg.function?.name,
+            [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,
         };
@@ -920,7 +925,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
@@ -1234,7 +1239,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_panes/config_controls/data_config_panel_fields.tsx

@@ -6,7 +6,11 @@ import React from 'react';
 import { EuiButtonIcon, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { ConfigListEntry } from '../../../../../../../../common/types/explorer';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
-import { AGGREGATIONS, GROUPBY } from '../../../../../../../../common/constants/explorer';
+import {
+  AGGREGATIONS,
+  CUSTOM_LABEL,
+  GROUPBY,
+} from '../../../../../../../../common/constants/explorer';
 
 export const DataConfigPanelFields = ({
   list,
@@ -41,7 +45,7 @@ export const DataConfigPanelFields = ({
                 onClick={() => handleServiceEdit(false, index, sectionName)}
               >
                 <a role="button" tabIndex={0}>
-                  {obj?.alias ||
+                  {obj[CUSTOM_LABEL] ||
                     `${sectionName === AGGREGATIONS ? obj.aggregation : ''} ${obj.label}`}
                 </a>
               </EuiText>

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx

@@ -20,6 +20,7 @@ import { batch, useDispatch } from 'react-redux';
 import {
   AGGREGATIONS,
   AGGREGATION_OPTIONS,
+  CUSTOM_LABEL,
   GROUPBY,
   RAW_QUERY,
   TIMESTAMP,
@@ -46,7 +47,7 @@ const initialDimensionEntry = {
 };
 
 const initialSeriesEntry = {
-  alias: '',
+  [CUSTOM_LABEL]: '',
   label: '',
   name: '',
   aggregation: 'count',
@@ -93,7 +94,7 @@ export const DataConfigPanelItem = ({
     let listItem = { ...configList[name][index] };
     listItem = {
       ...listItem,
-      [field === 'custom_label' ? 'alias' : field]: value.trim(),
+      [field]: field === 'custom_label' ? value.trim() : value,
     };
     if (field === 'label') {
       listItem.name = value;
@@ -191,7 +192,7 @@ export const DataConfigPanelItem = ({
             },
           })
         );
-        await fetchData();
+        await fetchData(false);
         await dispatch(
           changeVizConfig({
             tabId,
@@ -269,8 +270,8 @@ export const DataConfigPanelItem = ({
                   <EuiFormRow label="Custom label">
                     <EuiFieldText
                       placeholder="Custom label"
-                      value={selectedObj.alias}
-                      onChange={(e) => updateList(e.target.value, 'alias')}
+                      value={selectedObj[CUSTOM_LABEL]}
+                      onChange={(e) => updateList(e.target.value, CUSTOM_LABEL)}
                       aria-label="input label"
                     />
                   </EuiFormRow>

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

@@ -16,7 +16,7 @@ import {
 import { DocViewRow, IDocType } from '../explorer/events_views';
 import { HttpStart } from '../../../../../../src/core/public';
 import PPLService from '../../../services/requests/ppl';
-import { TIME_INTERVAL_OPTIONS } from '../../../../common/constants/explorer';
+import { CUSTOM_LABEL, TIME_INTERVAL_OPTIONS } from '../../../../common/constants/explorer';
 import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared';
 import { ConfigTooltip } from '../explorer/visualizations/config_panel/config_panes/config_controls';
 
@@ -368,3 +368,15 @@ export const getTooltipHoverInfo = ({ tooltipMode, tooltipText }: GetTooltipHove
   }
   return tooltipText;
 };
+
+export const getPropName = (queriedVizObj: {
+  customLabel?: string;
+  aggregation: string;
+  name: string;
+  label: string;
+}) => {
+  if (queriedVizObj[CUSTOM_LABEL] === '' || queriedVizObj[CUSTOM_LABEL] === undefined) {
+    return `${queriedVizObj.aggregation}(${queriedVizObj.name})`;
+  }
+  return queriedVizObj[CUSTOM_LABEL];
+};

dashboards-observability/public/components/visualizations/charts/bar/bar.tsx

@@ -13,7 +13,7 @@ import {
 } from '../../../../../common/constants/shared';
 import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
-import { hexToRgb } from '../../../event_analytics/utils/utils';
+import { getPropName, hexToRgb } from '../../../event_analytics/utils/utils';
 import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
 import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
 import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
@@ -107,8 +107,8 @@ export const Bar = ({ visualizations, layout, config }: any) => {
    * prepare data for visualization, map x-xais to y-xais
    */
   const chartAxis = useMemo(() => {
-    return Array.isArray(queriedVizData[`${yaxes[0].aggregation}(${yaxes[0].name})`])
-      ? queriedVizData[`${yaxes[0].aggregation}(${yaxes[0].name})`].map((_, idx) => {
+    return Array.isArray(queriedVizData[getPropName(yaxes[0])])
+      ? queriedVizData[getPropName(yaxes[0])].map((_, idx) => {
           // let combineXaxis = '';
           const xaxisName = xaxes.map((xaxis) => {
             return queriedVizData[xaxis.name] && queriedVizData[xaxis.name][idx]
@@ -122,8 +122,8 @@ export const Bar = ({ visualizations, layout, config }: any) => {
 
   bars = yaxes?.map((yMetric, idx) => {
     return {
-      y: isVertical ? queriedVizData[`${yMetric.aggregation}(${yMetric.name})`] : chartAxis,
-      x: isVertical ? chartAxis : queriedVizData[`${yMetric.aggregation}(${yMetric.name})`],
+      y: isVertical ? queriedVizData[getPropName(yMetric)] : chartAxis,
+      x: isVertical ? chartAxis : queriedVizData[getPropName(yMetric)],
       type: visMetaData.type,
       marker: {
         color: getSelectedColorTheme(yMetric, idx),
@@ -132,7 +132,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
           width: lineWidth,
         },
       },
-      name: yMetric.name,
+      name: getPropName(yMetric),
       orientation: barOrientation,
     };
   });

dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts

@@ -15,6 +15,7 @@ import { VIS_CHART_TYPES } from '../../../../../common/constants/shared';
 import { QueryManager } from '../../../../../common/query_manager';
 import {
   AGGREGATIONS,
+  CUSTOM_LABEL,
   GROUPBY,
   PARENTFIELDS,
   TIME_INTERVAL_OPTIONS,
@@ -39,7 +40,7 @@ const initialDimensionEntry = {
 };
 
 const initialSeriesEntry = {
-  alias: '',
+  [CUSTOM_LABEL]: '',
   label: '',
   name: '',
   aggregation: 'count',
@@ -135,7 +136,7 @@ const defaultUserConfigs = (queryString, visualizationName: string) => {
       tempUserConfigs = {
         ...tempUserConfigs,
         [AGGREGATIONS]: statsTokens.aggregations.map((agg) => ({
-          alias: agg.alias,
+          [CUSTOM_LABEL]: agg[CUSTOM_LABEL],
           label: agg.function?.value_expression,
           name: agg.function?.value_expression,
           aggregation: agg.function?.name,