[D&D] Refactor to use AggService and introduce metric visualization (o…

…pensearch-project#1734) * partial progress Signed-off-by: Ashwin Pc <[email protected]> * simle workign metric using aggShemas Signed-off-by: Ashwin Pc <[email protected]> * updated VisualizationTypeOptions to be a generic Signed-off-by: Ashwin Pc <[email protected]> * partially working metric style options Signed-off-by: Ashwin Pc <[email protected]> * all state objects are serializeable Signed-off-by: Ashwin Pc <[email protected]> * working delete and reorder Signed-off-by: Ashwin Pc <[email protected]> * chore: cleanup agg service changes Signed-off-by: Ashwin Pc <[email protected]>
ashwin-pc · Aug 3, 2022 · e3f7c53 · e3f7c53
1 parent 55eb926
commit e3f7c53
Show file tree

Hide file tree

Showing 41 changed files with 1,223 additions and 636 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts b/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts
@@ -57,6 +57,7 @@ const createEditorStateReducer = ({
         !state.data.aggs!.aggs.find((agg) => agg.schema === schema.name) && schema.defaults
           ? (schema as any).defaults.slice(0, schema.max)
           : { schema: schema.name };
+
       const aggConfig = state.data.aggs!.createAggConfig(defaultConfig, {
         addToAggConfigs: false,
       });

diff --git a/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx b/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
@@ -97,7 +97,7 @@ function MetricVisOptions({
   );
 
   const setColorMode: EuiButtonGroupProps['onChange'] = useCallback(
-    (id) => setMetricValue('metricColorMode', id as ColorModes),
+    (id: string) => setMetricValue('metricColorMode', id as ColorModes),
     [setMetricValue]
   );
 

diff --git a/src/plugins/vis_type_metric/public/index.ts b/src/plugins/vis_type_metric/public/index.ts
@@ -34,3 +34,6 @@ import { MetricVisPlugin as Plugin } from './plugin';
 export function plugin(initializerContext: PluginInitializerContext) {
   return new Plugin(initializerContext);
 }
+
+/* Public Types */
+export { MetricVisExpressionFunctionDefinition } from './metric_vis_fn';
diff --git a/src/plugins/vis_type_metric/public/metric_vis_fn.ts b/src/plugins/vis_type_metric/public/metric_vis_fn.ts
@@ -54,7 +54,7 @@ interface Arguments {
   colorRange: Range[];
   font: Style;
   metric: any[]; // these aren't typed yet
-  bucket: any; // these aren't typed yet
+  bucket?: any; // these aren't typed yet
 }
 
 export interface MetricVisRenderValue {

diff --git a/src/plugins/visualizations/public/legacy/build_pipeline.ts b/src/plugins/visualizations/public/legacy/build_pipeline.ts
@@ -373,7 +373,8 @@ export const buildVislibDimensions = async (vis: any, params: BuildPipelineParam
     splitColumn: schemas.split_column,
   };
   if (schemas.segment) {
-    const xAgg = vis.data.aggs.getResponseAggs()[dimensions.x.accessor];
+    const a = vis.data.aggs.getResponseAggs();
+    const xAgg = a[dimensions.x.accessor];
     if (xAgg.type.name === 'date_histogram') {
       dimensions.x.params.date = true;
       const { opensearchUnit, opensearchValue } = xAgg.buckets.getInterval();
@@ -423,10 +424,10 @@ export const buildPipeline = async (vis: Vis, params: BuildPipelineParams) => {
     // request handler
     if (vis.type.requestHandler === 'courier') {
       pipeline += `opensearchaggs
-    ${prepareString('index', indexPattern!.id)}
-    metricsAtAllLevels=${vis.isHierarchical()}
-    partialRows=${vis.params.showPartialRows || false}
-    ${prepareJson('aggConfigs', vis.data.aggs!.aggs)} | `;
+        ${prepareString('index', indexPattern!.id)}
+        metricsAtAllLevels=${vis.isHierarchical()}
+        partialRows=${vis.params.showPartialRows || false}
+        ${prepareJson('aggConfigs', vis.data.aggs!.aggs)} | `;
     }
 
     const schemas = getSchemas(vis, params);
@@ -456,5 +457,6 @@ export const buildPipeline = async (vis: Vis, params: BuildPipelineParams) => {
       }
     }
   }
+
   return pipeline;
 };
diff --git a/src/plugins/wizard/opensearch_dashboards.json b/src/plugins/wizard/opensearch_dashboards.json
@@ -6,13 +6,17 @@
   "ui": true,
   "requiredPlugins": [
     "navigation",
+    "charts",
     "data",
     "opensearchDashboardsReact",
+    "opensearchDashboardsUtils",
     "savedObjects",
     "embeddable",
+    "expressions",
     "dashboard",
     "visualizations",
-    "opensearchUiShared"
+    "opensearchUiShared",
+    "visDefaultEditor"
   ],
   "optionalPlugins": []
 }
diff --git a/src/plugins/wizard/public/application/components/side_nav.scss b/src/plugins/wizard/public/application/components/side_nav.scss
@@ -2,6 +2,7 @@
 
 .wizSidenav {
   @include scrollNavParent(auto 1fr);
+
   grid-area: sideNav;
   border-right: $euiBorderThin;
 }
@@ -11,8 +12,13 @@
 }
 
 .wizSidenavTabs {
+  .euiTab__content {
+    text-transform: capitalize;
+  }
+
   @include scrollNavParent(min-content 1fr);
-  &>[role="tabpanel"] {
+
+  & > [role="tabpanel"] {
     @include scrollNavParent;
   }
 }
diff --git a/src/plugins/wizard/public/application/components/side_nav.tsx b/src/plugins/wizard/public/application/components/side_nav.tsx
@@ -10,8 +10,10 @@ import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react
 import { WizardServices } from '../../types';
 import './side_nav.scss';
 import { useTypedDispatch, useTypedSelector } from '../utils/state_management';
-import { setIndexPattern } from '../utils/state_management/datasource_slice';
+import { setIndexPattern } from '../utils/state_management/visualization_slice';
 import { useVisualizationType } from '../utils/use';
+import { DataTab } from '../contributions';
+import { StyleTabConfig } from '../../services/type_service';
 
 export const SideNav = () => {
   const {
@@ -21,17 +23,32 @@ export const SideNav = () => {
     },
   } = useOpenSearchDashboards<WizardServices>();
   const { IndexPatternSelect } = data.ui;
-  const { indexPattern } = useTypedSelector((state) => state.dataSource);
+  const { indexPattern: indexPatternId } = useTypedSelector((state) => state.visualization);
   const dispatch = useTypedDispatch();
   const {
-    contributions: { containers },
+    ui: { containerConfig },
   } = useVisualizationType();
 
-  const tabs: EuiTabbedContentTab[] = containers.sidePanel.map(({ id, name, Component }) => ({
-    id,
-    name,
-    content: Component,
-  }));
+  const tabs: EuiTabbedContentTab[] = Object.entries(containerConfig).map(
+    ([containerName, config]) => {
+      let content = null;
+      switch (containerName) {
+        case 'data':
+          content = <DataTab key="containerName" />;
+          break;
+
+        case 'style':
+          content = (config as StyleTabConfig).render();
+          break;
+      }
+
+      return {
+        id: containerName,
+        name: containerName,
+        content,
+      };
+    }
+  );
 
   return (
     <section className="wizSidenav">
@@ -46,10 +63,13 @@ export const SideNav = () => {
           placeholder={i18n.translate('wizard.nav.dataSource.selector.placeholder', {
             defaultMessage: 'Select index pattern',
           })}
-          indexPatternId={indexPattern?.id || ''}
+          indexPatternId={indexPatternId || ''}
           onChange={async (newIndexPatternId: any) => {
             const newIndexPattern = await data.indexPatterns.get(newIndexPatternId);
-            dispatch(setIndexPattern(newIndexPattern));
+
+            if (newIndexPattern) {
+              dispatch(setIndexPattern(newIndexPatternId));
+            }
           }}
           isClearable={false}
         />

diff --git a/src/plugins/wizard/public/application/components/top_nav.tsx b/src/plugins/wizard/public/application/components/top_nav.tsx
@@ -10,7 +10,7 @@ import { getTopNavconfig } from '../utils/get_top_nav_config';
 import { WizardServices } from '../../types';
 
 import './top_nav.scss';
-import { useTypedSelector } from '../utils/state_management';
+import { useIndexPattern } from '../utils/use';
 
 export const TopNav = () => {
   const { services } = useOpenSearchDashboards<WizardServices>();
@@ -22,7 +22,7 @@ export const TopNav = () => {
   } = services;
 
   const config = useMemo(() => getTopNavconfig(services), [services]);
-  const { indexPattern } = useTypedSelector((state) => state.dataSource);
+  const indexPattern = useIndexPattern();
 
   return (
     <div className="wizTopNav">

diff --git a/src/plugins/wizard/public/application/components/workspace.tsx b/src/plugins/wizard/public/application/components/workspace.tsx
@@ -14,16 +14,34 @@ import {
   EuiPanel,
   EuiPopover,
 } from '@elastic/eui';
-import React, { FC, useState, useMemo } from 'react';
+import React, { FC, useState, useMemo, useEffect } from 'react';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WizardServices } from '../../types';
-import { useTypedDispatch } from '../utils/state_management';
+import { useTypedDispatch, useTypedSelector } from '../utils/state_management';
 import { setActiveVisualization } from '../utils/state_management/visualization_slice';
 import { useVisualizationType } from '../utils/use';
 
 import './workspace.scss';
 
 export const Workspace: FC = ({ children }) => {
+  const {
+    services: {
+      expressions: { ReactExpressionRenderer },
+    },
+  } = useOpenSearchDashboards<WizardServices>();
+  const { toExpression } = useVisualizationType();
+  const [expression, setExpression] = useState<string>();
+  const rootState = useTypedSelector((state) => state);
+
+  useEffect(() => {
+    async function loadExpression() {
+      const exp = await toExpression(rootState);
+      setExpression(exp);
+    }
+
+    loadExpression();
+  }, [rootState, toExpression]);
+
   return (
     <section className="wizWorkspace">
       <EuiFlexGroup className="wizCanvasControls">
@@ -32,8 +50,8 @@ export const Workspace: FC = ({ children }) => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiPanel className="wizCanvas">
-        {children ? (
-          children
+        {expression ? (
+          <ReactExpressionRenderer expression={expression} />
         ) : (
           <EuiFlexItem className="wizWorkspace__empty">
             <EuiEmptyPrompt

diff --git a/src/plugins/wizard/public/application/contributions/containers/data_tab/config_panel.tsx b/src/plugins/wizard/public/application/contributions/containers/data_tab/config_panel.tsx
@@ -4,7 +4,7 @@
  */
 
 import { EuiForm } from '@elastic/eui';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useVisualizationType } from '../../../utils/use';
 import {
   DropboxContribution,
@@ -20,51 +20,64 @@ import { SelectContribution } from '../common/items';
 import { INDEX_FIELD_KEY } from './items/use/use_form_field';
 import { DATA_TAB_ID } from '.';
 import './config_panel.scss';
+import { mapSchemaToAggPanel } from './utils/schema_to_dropbox';
+import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
+import { WizardServices } from '../../../../types';
+import { SecondaryPanel } from './secondary_panel';
 
 const DEFAULT_ITEMS: MainItemContribution[] = [getTitleContribution()];
 
 export function ConfigPanel() {
-  const {
-    contributions: { items },
-  } = useVisualizationType();
-  const activeItem = useTypedSelector((state) => state.config.activeItem);
-  const configItemState = useTypedSelector((state) => state.config.items[activeItem?.id || '']);
-
-  const hydratedItems: MainItemContribution[] = [...(items?.[DATA_TAB_ID] ?? []), ...DEFAULT_ITEMS];
-
-  const mainPanel = useMemo(() => mapItemToPanelComponents(hydratedItems), [hydratedItems]);
-  const secondaryPanel = useMemo(() => {
-    if (!activeItem || !configItemState || typeof configItemState === 'string') return;
-
-    // Generate each secondary panel base on active item type
-    if (activeItem.type === ITEM_TYPES.DROPBOX) {
-      const activeDropboxContribution = hydratedItems.find(
-        (item: MainItemContribution) =>
-          item.type === ITEM_TYPES.DROPBOX && item?.id === activeItem?.id
-      ) as DropboxContribution | undefined;
-
-      if (!activeDropboxContribution) return null;
-
-      let itemsToRender: SecondaryItemContribution[] = [
-        getTitleContribution(activeDropboxContribution.label),
-        getFieldSelectorContribution(),
-      ];
-
-      const dropboxFieldInstance = configItemState.instances.find(
-        ({ id }) => id === activeItem.instanceId
-      );
-      if (dropboxFieldInstance && dropboxFieldInstance.properties.fieldName) {
-        itemsToRender = [...itemsToRender, ...activeDropboxContribution.items];
-      }
-
-      return mapItemToPanelComponents(itemsToRender, true);
-    }
-  }, [activeItem, configItemState, hydratedItems]);
+  const vizType = useVisualizationType();
+  const activeAgg = useTypedSelector((state) => state.visualization.activeVisualization?.activeAgg);
+  const schemas = vizType.ui.containerConfig.data.schemas;
+
+  // TODO: Will cleanup when add and edit field support is re introduced
+  // const activeItem = useTypedSelector((state) => state.config.activeItem);
+  // const configItemState = useTypedSelector((state) => state.config.items[activeItem?.id || '']);
+
+  // const hydratedItems: MainItemContribution[] = useMemo(
+  //   () => [...(items?.[DATA_TAB_ID] ?? []), ...DEFAULT_ITEMS],
+  //   [items]
+  // );
+
+  // const mainPanel = useMemo(() => mapItemToPanelComponents(hydratedItems), [hydratedItems]);
+  // const secondaryPanel = useMemo(() => {
+  //   if (!activeItem || !configItemState || typeof configItemState === 'string') return;
+
+  //   // Generate each secondary panel base on active item type
+  //   if (activeItem.type === ITEM_TYPES.DROPBOX) {
+  //     const activeDropboxContribution = hydratedItems.find(
+  //       (item: MainItemContribution) =>
+  //         item.type === ITEM_TYPES.DROPBOX && item?.id === activeItem?.id
+  //     ) as DropboxContribution | undefined;
+
+  //     if (!activeDropboxContribution) return null;
+
+  //     let itemsToRender: SecondaryItemContribution[] = [
+  //       getTitleContribution(activeDropboxContribution.label),
+  //       getFieldSelectorContribution(),
+  //     ];
+
+  //     const dropboxFieldInstance = configItemState.instances.find(
+  //       ({ id }) => id === activeItem.instanceId
+  //     );
+  //     if (dropboxFieldInstance && dropboxFieldInstance.properties.fieldName) {
+  //       itemsToRender = [...itemsToRender, ...activeDropboxContribution.items];
+  //     }
+
+  //     return mapItemToPanelComponents(itemsToRender, true);
+  //   }
+  // }, [activeItem, configItemState, hydratedItems]);
+
+  if (!schemas) return null;
+
+  const mainPanel = mapSchemaToAggPanel(schemas);
 
   return (
-    <EuiForm className={`wizConfig ${activeItem ? 'showSecondary' : ''}`}>
+    <EuiForm className={`wizConfig ${activeAgg ? 'showSecondary' : ''}`}>
       <div className="wizConfig__section">{mainPanel}</div>
-      <div className="wizConfig__section wizConfig--secondary">{secondaryPanel}</div>
+      <SecondaryPanel />
     </EuiForm>
   );
 }
@@ -76,16 +89,16 @@ function getTitleContribution(title?: string): TitleItemContribution {
   };
 }
 
-function getFieldSelectorContribution(): SelectContribution<string> {
-  return {
-    type: ItemTypes.SELECT,
-    id: INDEX_FIELD_KEY,
-    label: 'Select a Field',
-    options: (state) => {
-      return state.dataSource.visualizableFields.map((field) => ({
-        value: field.name,
-        inputDisplay: field.displayName,
-      }));
-    },
-  };
-}
+// function getFieldSelectorContribution(): SelectContribution<string> {
+//   return {
+//     type: ItemTypes.SELECT,
+//     id: INDEX_FIELD_KEY,
+//     label: 'Select a Field',
+//     options: (state) => {
+//       return state.dataSource.visualizableFields.map((field) => ({
+//         value: field.name,
+//         inputDisplay: field.displayName,
+//       }));
+//     },
+//   };
+// }
diff --git a/src/plugins/wizard/public/application/contributions/containers/data_tab/field_search.tsx b/src/plugins/wizard/public/application/contributions/containers/data_tab/field_search.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { setSearchField } from '../../../utils/state_management/datasource_slice';
+import { setSearchField } from '../../../utils/state_management/visualization_slice';
 import { useTypedDispatch } from '../../../utils/state_management';
 
 export interface Props {