Fixed logs view visualizations issues.

Signed-off-by: Saisanju Sreevalsakumar <saisanju_s@persistent.com>
opensearch-project · Sep 30, 2022 · a59bb0a · a59bb0a
1 parent ad3a1e4
commit a59bb0a
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 13 deletions.
diff --git 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/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/...er/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/.../visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx b/.../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<any>(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
             </EuiButton>
@@ -236,7 +237,7 @@ export const LogsViewConfigPanelItem = ({
           iconType="play"
           onClick={updateChart}
           size="s"
-          isDisabled={fieldOptionList.length !== 0}
+          isDisabled={queriedFields.length !== 0}
         >
           Update chart
         </EuiButton>

diff --git 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
@@ -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';