[Bug]: Data Configuration panel for Logs view remains disabled. (#1057)

* Working on review comments Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> * Replacing series and dimension with dynamic naming Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> * Revert code for histogram and treemap after antlr merge because of crashes in app Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> * Working on review comments, renaming metrics to series Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> * Removing extra import after rebasing main Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> * Working on review comments Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> * Replacing series and dimension with dynamic naming Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> * Fixed logs view visualizations issues. Signed-off-by: Saisanju Sreevalsakumar <saisanju_s@persistent.com> * Resolved review comments for log view fixes 1. Signed-off-by: Saisanju Sreevalsakumar <saisanju_s@persistent.com> Signed-off-by: ruchika-narang <ruchika_narang@persistent.com> Signed-off-by: Saisanju Sreevalsakumar <saisanju_s@persistent.com> Co-authored-by: ruchika-narang <ruchika_narang@persistent.com>
opensearch-project · Sep 30, 2022 · e9ff79a · e9ff79a
1 parent 640462f
commit e9ff79a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 17 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,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/.../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,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 = {