diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 6bd3cb7c4..11e0337b9 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -897,6 +897,34 @@ export const Explorer = ({ [GROUPBY]: [{ bucketSize: '', bucketOffset: '' }], [AGGREGATIONS]: [], }; + case VIS_CHART_TYPES.LogsView: { + const dimensions = [ + ...statsToken.aggregations + .map((agg) => ({ + label: `${agg.function.name}(${agg.function.value_expression})` ?? '', + name: `${agg.function.name}(${agg.function.value_expression})` ?? '', + })) + .concat( + groupByToken.group_fields?.map((agg) => ({ + label: agg.name ?? '', + name: agg.name ?? '', + })) + ), + ]; + if (span !== undefined) { + const { time_field, interval, unit } = span; + const timespanField = `span(${time_field[0].name},${interval}${unit[0].value})`; + dimensions.push({ + label: timespanField, + name: timespanField, + }); + } + return { + [AGGREGATIONS]: [], + [GROUPBY]: dimensions, + }; + } + default: return { [AGGREGATIONS]: statsToken.aggregations.map((agg) => ({ diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx index e8e861577..1914ba7bb 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx @@ -210,6 +210,10 @@ export const DataConfigPanelItem = ({ }, }, }) + ); + }); + } + }; const isPositionButtonVisible = (sectionName: string) => sectionName === AGGREGATIONS && diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx index 696422006..e3c3a297c 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx @@ -42,6 +42,7 @@ export const LogsViewConfigPanelItem = ({ const { tabId, curVisId, changeVisualizationConfig } = useContext(TabContext); const explorerFields = useSelector(selectFields)[tabId]; const { data } = visualizations; + const { availableFields, queriedFields, selectedFields } = data.explorer?.explorerFields; const { userConfigs } = data; const initialConfigEntry = { @@ -64,7 +65,7 @@ export const LogsViewConfigPanelItem = ({ }, [userConfigs?.dataConfig, visualizations.vis.name]); useEffect(() => { - if (fieldOptionList.length === 0) { + if (queriedFields.length === 0) { setConfigList({ [AGGREGATIONS]: [], [GROUPBY]: visualizations?.data?.explorer?.explorerFields?.selectedFields.map((field) => ({ @@ -76,7 +77,7 @@ export const LogsViewConfigPanelItem = ({ }, [visualizations.data.explorer.explorerFields]); const handleServiceRemove = (index: number, name: string) => { - if (fieldOptionList.length !== 0) { + if (queriedFields.length !== 0) { return; } const list = { ...configList }; @@ -141,7 +142,7 @@ export const LogsViewConfigPanelItem = ({ }; const getAvailableLogsViewOptions = () => { - if (fieldOptionList.length !== 0) { + if (queriedFields.length !== 0) { return []; } const dimensionNames = (configList[GROUPBY] as ConfigListEntry[]).map((field) => field.name); @@ -188,7 +189,7 @@ export const LogsViewConfigPanelItem = ({ singleSelection={{ asPlainText: true }} options={getAvailableLogsViewOptions()} selectedOptions={[{ label: field.label }]} - isDisabled={fieldOptionList.length !== 0} + isDisabled={queriedFields.length !== 0} onChange={(e) => updateLogsViewConfig(e.length > 0 ? e[0].label : '', field as ConfigListEntry) } @@ -206,7 +207,7 @@ export const LogsViewConfigPanelItem = ({ iconType="plusInCircleFilled" color="primary" onClick={() => handleServiceAdd(GROUPBY)} - disabled={fieldOptionList.length !== 0} + disabled={queriedFields.length !== 0} > Add @@ -236,7 +237,7 @@ export const LogsViewConfigPanelItem = ({ iconType="play" onClick={updateChart} size="s" - isDisabled={fieldOptionList.length !== 0} + isDisabled={queriedFields.length !== 0} > Update chart 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 20050dc25..ca101908f 100644 --- a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts +++ b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts @@ -110,20 +110,31 @@ const defaultUserConfigs = (queryString, visualizationName: string) => { }, }; if (visualizationName === VIS_CHART_TYPES.LogsView) { - tempUserConfigs = { - ...tempUserConfigs, - [AGGREGATIONS]: [], - [GROUPBY]: statsTokens.aggregations + const dimensions = [ + ...statsTokens.aggregations .map((agg) => ({ - label: agg.name ?? '', - name: agg.name ?? '', + label: `${agg.function.name}(${agg.function.value_expression})` ?? '', + name: `${agg.function.name}(${agg.function.value_expression})` ?? '', })) .concat( - statsTokens.groupby?.group_fields?.map((agg) => ({ + statsTokens.groupby.group_fields?.map((agg) => ({ label: agg.name ?? '', name: agg.name ?? '', })) ), + ]; + if (statsTokens.groupby.span !== null) { + const { field, literal_value, time_unit } = statsTokens.groupby.span.span_expression; + const timespanField = `span(${field},${literal_value}${time_unit})`; + dimensions.push({ + label: timespanField, + name: timespanField, + }); + } + tempUserConfigs = { + ...tempUserConfigs, + [AGGREGATIONS]: [], + [GROUPBY]: dimensions, }; } else if (visualizationName === VIS_CHART_TYPES.HeatMap) { tempUserConfigs = { diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index b4d8d3ac2..e9e7dd5d7 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -59,8 +59,13 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { : fields[0]; const colorField = + dataConfig?.chartStyles && dataConfig.chartStyles.colorTheme ? dataConfig.chartStyles.colorTheme : { name: DEFAULT_PALETTE }; + + const tilingAlgorithm = + dataConfig?.treemapOptions && + dataConfig.treemapOptions.tilingAlgorithm && !isEmpty(dataConfig.treemapOptions.tilingAlgorithm) ? dataConfig.treemapOptions.tilingAlgorithm[0] : 'squarify';