diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts index 949b26723..778abc2a3 100644 --- a/dashboards-observability/common/constants/explorer.ts +++ b/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'; diff --git a/dashboards-observability/common/query_manager/ast/builder/stats_builder.ts b/dashboards-observability/common/query_manager/ast/builder/stats_builder.ts index 201431b27..12c65b125 100644 --- a/dashboards-observability/common/query_manager/ast/builder/stats_builder.ts +++ b/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 { constructor(private statsChunk: statsChunk) {} @@ -119,7 +120,7 @@ export class StatsBuilder implements QueryBuilder { 'span_clause', [] as Array, this.buildeSpanExpression(span.span_expression), - span.alias + span[CUSTOM_LABEL] ); } diff --git a/dashboards-observability/common/query_manager/ast/expression/AggregateTerm.ts b/dashboards-observability/common/query_manager/ast/expression/AggregateTerm.ts index a19b488d5..1d9b40a4c 100644 --- a/dashboards-observability/common/query_manager/ast/expression/AggregateTerm.ts +++ b/dashboards-observability/common/query_manager/ast/expression/AggregateTerm.ts @@ -2,7 +2,7 @@ * 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 { @@ -10,7 +10,7 @@ export class AggregateTerm extends PPLNode { name: string, children: Array, private statsFunction: PPLNode, - private alias: string + private customLabel: string ) { super(name, children); } @@ -18,13 +18,15 @@ export class AggregateTerm extends PPLNode { 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()}`; } diff --git a/dashboards-observability/common/query_manager/ast/expression/span.ts b/dashboards-observability/common/query_manager/ast/expression/span.ts index d2a570915..638275d34 100644 --- a/dashboards-observability/common/query_manager/ast/expression/span.ts +++ b/dashboards-observability/common/query_manager/ast/expression/span.ts @@ -10,7 +10,7 @@ export class Span extends PPLNode { name: string, children: Array, private spanExpression: PPLNode, - private alias: string + private customLabel: string ) { super(name, children); } @@ -18,11 +18,11 @@ export class Span extends PPLNode { 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}` : ''}`; } } diff --git a/dashboards-observability/common/query_manager/ast/types/stats.ts b/dashboards-observability/common/query_manager/ast/types/stats.ts index 3127c5c6f..0e46d1958 100644 --- a/dashboards-observability/common/query_manager/ast/types/stats.ts +++ b/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; diff --git a/dashboards-observability/common/query_manager/utils/index.ts b/dashboards-observability/common/query_manager/utils/index.ts index 5d84ed72e..22fc09d78 100644 --- a/dashboards-observability/common/query_manager/utils/index.ts +++ b/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, + }, }; }; diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 7a73c0aca..4762d69fd 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/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; diff --git a/dashboards-observability/public/components/common/helpers/ppl_docs/language_structure/identifiers.ts b/dashboards-observability/public/components/common/helpers/ppl_docs/language_structure/identifiers.ts index e52037913..2ab21d77e 100644 --- a/dashboards-observability/public/components/common/helpers/ppl_docs/language_structure/identifiers.ts +++ b/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** diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 6e1ce73a8..dd45b03ed 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/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 => 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] ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx index f90f97f19..5c309047e 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx +++ b/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)} > - {obj?.alias || + {obj[CUSTOM_LABEL] || `${sectionName === AGGREGATIONS ? obj.aggregation : ''} ${obj.label}`} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 9fe4ee347..6956167a2 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/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 = ({ updateList(e.target.value, 'alias')} + value={selectedObj[CUSTOM_LABEL]} + onChange={(e) => updateList(e.target.value, CUSTOM_LABEL)} aria-label="input label" /> diff --git a/dashboards-observability/public/components/event_analytics/utils/utils.tsx b/dashboards-observability/public/components/event_analytics/utils/utils.tsx index 41fe02467..cb78f74ab 100644 --- a/dashboards-observability/public/components/event_analytics/utils/utils.tsx +++ b/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]; +}; diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx index 06d262e2f..9ec528bcd 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx +++ b/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, }; }); diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts index 70c308b5b..5263e8ebc 100644 --- a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts +++ b/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, diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index b93bd6757..10d19e029 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -14,7 +14,7 @@ import { PLOTLY_COLOR, VIS_CHART_TYPES, } from '../../../../../common/constants/shared'; -import { hexToRgb } from '../../../../components/event_analytics/utils/utils'; +import { getPropName, hexToRgb } from '../../../../components/event_analytics/utils/utils'; import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; import { IVisualizationContainerProps } from '../../../../../common/types/explorer'; import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer'; @@ -46,7 +46,9 @@ export const Line = ({ visualizations, layout, config }: any) => { }: IVisualizationContainerProps = visualizations; const { dataConfig = {}, layoutConfig = {}, availabilityConfig = {} } = userConfigs; - const yaxis = dataConfig[AGGREGATIONS] ? dataConfig[AGGREGATIONS].filter((item) => item.label) : []; + const yaxis = dataConfig[AGGREGATIONS] + ? dataConfig[AGGREGATIONS].filter((item) => item.label) + : []; const tooltipMode = dataConfig?.tooltipOptions?.tooltipMode !== undefined ? dataConfig.tooltipOptions.tooltipMode @@ -91,8 +93,7 @@ export const Line = ({ visualizations, layout, config }: any) => { xaxis = dataConfig[GROUPBY]; } - if (isEmpty(xaxis) || isEmpty(yaxis)) - return ; + if (isEmpty(xaxis) || isEmpty(yaxis)) return ; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -144,9 +145,9 @@ export const Line = ({ visualizations, layout, config }: any) => { return { x: queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name], - y: queriedVizData[`${field.aggregation}(${field.name})`], + y: queriedVizData[getPropName(field)], type: isBarMode ? 'bar' : 'scatter', - name: field.label, + name: getPropName(field), mode, ...(!['bar', 'markers'].includes(mode) && fillProperty), line: { @@ -206,7 +207,9 @@ export const Line = ({ visualizations, layout, config }: any) => { const mapToLine = (list: ThresholdUnitType[] | AvailabilityUnitType[], lineStyle: any) => { return list.map((thr: ThresholdUnitType) => { thresholdTraces.x.push( - queriedVizData[!isEmpty(xaxis) ? xaxis[xaxis.length - 1]?.label : fields[lastIndex].name][0] + queriedVizData[ + !isEmpty(xaxis) ? xaxis[xaxis.length - 1]?.label : fields[lastIndex].name + ][0] ); thresholdTraces.y.push(thr.value * (1 + 0.06)); thresholdTraces.text.push(thr.name); diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx index 7b06b2bdc..105f801b6 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx @@ -3,21 +3,25 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo } from 'react'; -import { uniq, has, isEmpty, indexOf } from 'lodash'; -import Plotly from 'plotly.js-dist'; import { colorPalette } from '@elastic/eui'; -import { Plt } from '../../plotly/plot'; -import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; +import { has, isEmpty, uniq } from 'lodash'; +import Plotly from 'plotly.js-dist'; +import React, { useMemo } from 'react'; import { HEATMAP_PALETTE_COLOR, - SINGLE_COLOR_PALETTE, - OPACITY, HEATMAP_SINGLE_COLOR, + OPACITY, + SINGLE_COLOR_PALETTE, } from '../../../../../common/constants/colors'; -import { hexToRgb, lightenColor } from '../../../../components/event_analytics/utils/utils'; -import { IVisualizationContainerProps } from '../../../../../common/types/explorer'; import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer'; +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'; export const HeatMap = ({ visualizations, layout, config }: any) => { const { @@ -47,7 +51,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { isEmpty(zMetrics) || isEmpty(queriedVizData[xaxisField.label]) || isEmpty(queriedVizData[yaxisField.label]) || - isEmpty(queriedVizData[`${zMetrics.aggregation}(${zMetrics.name})`]) || + isEmpty(queriedVizData[getPropName(zMetrics)]) || dataConfig[GROUPBY].length > 2 || dataConfig[AGGREGATIONS].length > 1 ) @@ -91,7 +95,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { // maps bukcets to metrics for (let i = 0; i < queriedVizData[xaxisField.label].length; i++) { buckets[`${queriedVizData[xaxisField.label][i]},${queriedVizData[yaxisField.label][i]}`] = - queriedVizData[`${zMetrics.aggregation}(${zMetrics.name})`][i]; + queriedVizData[getPropName(zMetrics)][i]; } // initialize empty 2 dimensional array, inner loop for each xaxis field, outer loop for yaxis diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx index 13a4e1611..d964ec541 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx @@ -19,7 +19,9 @@ 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 { @@ -87,7 +89,9 @@ export const Pie = ({ visualizations, layout, config }: any) => { const pies = useMemo( () => series.map((field: any, index: number) => { - const fieldName = field.alias ? field.alias : `${field.aggregation}(${field.name})`; + const fieldName = field[CUSTOM_LABEL] + ? field[CUSTOM_LABEL] + : `${field.aggregation}(${field.name})`; const marker = colorTheme.name !== DEFAULT_PALETTE ? { @@ -104,7 +108,7 @@ export const Pie = ({ visualizations, layout, config }: any) => { labels: labelsOfXAxis, values: queriedVizData[fieldName], type: 'pie', - name: fieldName, + name: getPropName(field), hole: type === 'pie' ? 0 : 0.5, text: fieldName, textinfo: 'percent',