diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx index 6bd3cb7c4e..241aee7135 100644 --- a/public/components/event_analytics/explorer/explorer.tsx +++ b/public/components/event_analytics/explorer/explorer.tsx @@ -897,6 +897,35 @@ export const Explorer = ({ [GROUPBY]: [{ bucketSize: '', bucketOffset: '' }], [AGGREGATIONS]: [], }; + case VIS_CHART_TYPES.LogsView: { + const dimensions = statsToken.aggregations + .map((agg) => { + const logViewField = `${agg.function.name}(${agg.function.value_expression})` ?? ''; + return { + label: logViewField, + name: logViewField, + }; + }) + .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/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx index 6964220061..e3c3a297c4 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx +++ b/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/public/components/visualizations/charts/helpers/viz_types.ts b/public/components/visualizations/charts/helpers/viz_types.ts index 20050dc25c..df9822cba3 100644 --- a/public/components/visualizations/charts/helpers/viz_types.ts +++ b/public/components/visualizations/charts/helpers/viz_types.ts @@ -110,20 +110,32 @@ const defaultUserConfigs = (queryString, visualizationName: string) => { }, }; if (visualizationName === VIS_CHART_TYPES.LogsView) { - tempUserConfigs = { - ...tempUserConfigs, - [AGGREGATIONS]: [], - [GROUPBY]: statsTokens.aggregations - .map((agg) => ({ + const dimensions = statsTokens.aggregations + .map((agg) => { + const logViewField = `${agg.function.name}(${agg.function.value_expression})` ?? ''; + return { + label: logViewField, + name: logViewField, + }; + }) + .concat( + statsTokens.groupby.group_fields?.map((agg) => ({ label: agg.name ?? '', name: agg.name ?? '', })) - .concat( - 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 = {