Add visualization (opensearch-project#4257)

Add and save visualization to dashboard

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Author: abbyhu2000

package.json

@@ -171,7 +171,6 @@
     "dns-sync": "^0.2.1",
     "elastic-apm-node": "^3.43.0",
     "elasticsearch": "^16.7.0",
-    "http-aws-es": "npm:@zhongnansu/http-aws-es@6.0.1",
     "execa": "^4.0.2",
     "expiry-js": "0.1.7",
     "fast-deep-equal": "^3.1.1",
@@ -182,6 +181,7 @@
     "globby": "^11.1.0",
     "handlebars": "4.7.7",
     "hjson": "3.2.1",
+    "http-aws-es": "npm:@zhongnansu/http-aws-es@6.0.1",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^5.0.0",
     "inline-style": "^2.0.0",
@@ -290,6 +290,7 @@
     "@types/has-ansi": "^3.0.0",
     "@types/history": "^4.7.3",
     "@types/hjson": "^2.4.2",
+    "@types/http-aws-es": "6.0.2",
     "@types/jest": "^27.4.0",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.31",
@@ -342,7 +343,6 @@
     "@types/zen-observable": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^3.10.0",
     "@typescript-eslint/parser": "^3.10.0",
-    "@types/http-aws-es": "6.0.2",
     "angular-aria": "^1.8.0",
     "angular-mocks": "^1.8.2",
     "angular-recursion": "^1.0.5",

src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx

@@ -3,19 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { uniqBy } from 'lodash';
 import React, { memo, useState, useEffect } from 'react';
-import { Filter } from 'src/plugins/data/public';
+import { Filter, IndexPattern } from 'src/plugins/data/public';
 import { useCallback } from 'react';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getTopNavConfig } from '../top_nav/get_top_nav_config';
-import {
-  DashboardAppStateContainer,
-  DashboardAppState,
-  DashboardServices,
-  NavAction,
-} from '../../types';
+import { DashboardAppStateContainer, DashboardAppState, DashboardServices } from '../../types';
 import { getNavActions } from '../utils/get_nav_actions';
 import { DashboardContainer } from '../embeddable';
+import { isErrorEmbeddable } from '../../embeddable_plugin';
 
 interface DashboardTopNavProps {
   isChromeVisible: boolean;
@@ -45,12 +42,22 @@ const TopNav = ({
   const [filters, setFilters] = useState<Filter[]>([]);
   const [topNavMenu, setTopNavMenu] = useState<any>();
   const [isFullScreenMode, setIsFullScreenMode] = useState<any>();
+  const [indexPatterns, setIndexPatterns] = useState<IndexPattern[]>();
 
   const { services } = useOpenSearchDashboards<DashboardServices>();
   const { TopNavMenu } = services.navigation.ui;
   const { data, dashboardConfig, setHeaderActionMenu } = services;
   const { query: queryService } = data;
 
+  const handleRefresh = useCallback(
+    (_payload: any, isUpdate?: boolean) => {
+      if (!isUpdate && dashboardContainer) {
+        dashboardContainer.reload();
+      }
+    },
+    [dashboardContainer]
+  );
+
   // TODO: this should base on URL
   const isEmbeddedExternally = false;
 
@@ -97,6 +104,33 @@ const TopNav = ({
     setIsFullScreenMode(currentAppState?.fullScreenMode);
   }, [currentAppState, services]);
 
+  useEffect(() => {
+    const asyncSetIndexPattern = async () => {
+      if (dashboardContainer) {
+        let panelIndexPatterns: IndexPattern[] = [];
+        dashboardContainer.getChildIds().forEach((id) => {
+          const embeddableInstance = dashboardContainer.getChild(id);
+          if (isErrorEmbeddable(embeddableInstance)) return;
+          const embeddableIndexPatterns = (embeddableInstance.getOutput() as any).indexPatterns;
+          if (!embeddableIndexPatterns) return;
+          panelIndexPatterns.push(...embeddableIndexPatterns);
+        });
+        panelIndexPatterns = uniqBy(panelIndexPatterns, 'id');
+
+        if (panelIndexPatterns.length > 0) {
+          setIndexPatterns(panelIndexPatterns);
+        } else {
+          const defaultIndex = await services.data.indexPatterns.getDefault();
+          if (defaultIndex) {
+            setIndexPatterns([defaultIndex]);
+          }
+        }
+      }
+    };
+
+    asyncSetIndexPattern();
+  }, [dashboardContainer, stateContainer, currentAppState, services.data.indexPatterns]);
+
   const shouldShowFilterBar = (forceHide: boolean): boolean =>
     !forceHide && (filters!.length > 0 || !currentAppState?.fullScreenMode);
 
@@ -111,19 +145,6 @@ const TopNav = ({
   const showFilterBar = shouldShowFilterBar(forceHideFilterBar);
   const showSearchBar = showQueryBar || showFilterBar;
 
-  // TODO: implement handleRefresh
-  const handleRefresh = useCallback((_payload: any, isUpdate?: boolean) => {
-    /* if (isUpdate === false) {
-        // The user can still request a reload in the query bar, even if the
-        // query is the same, and in that case, we have to explicitly ask for
-        // a reload, since no state changes will cause it.
-        lastReloadRequestTime = new Date().getTime();
-        const changes = getChangesFromAppStateForContainerState();
-    if (changes && dashboardContainer) {
-      dashboardContainer.updateInput(changes);
-    }*/
-  }, []);
-
   return isChromeVisible ? (
     <TopNavMenu
       appName={'dashboard'}
@@ -138,7 +159,7 @@ const TopNav = ({
       showDatePicker={showDatePicker}
       showFilterBar={showFilterBar}
       useDefaultBehaviors={true}
-      indexPatterns={[]}
+      indexPatterns={indexPatterns}
       showSaveQuery={services.dashboardCapabilities.saveQuery as boolean}
       savedQuery={undefined}
       onSavedQueryIdChange={() => {}}

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -111,6 +111,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
   public readonly type = DASHBOARD_CONTAINER_TYPE;
 
   public renderEmpty?: undefined | (() => React.ReactNode);
+  public getChangesFromAppStateForContainerState?: (containerInput: any) => any;
 
   private embeddablePanel: EmbeddableStart['EmbeddablePanel'];
 

src/plugins/dashboard/public/application/utils/dashboard_embeddable_editor.tsx

@@ -79,12 +79,10 @@ export const getNavActions = (
   const appState = stateContainer.getState();
   navActions[TopNavIds.FULL_SCREEN] = () => {
     stateContainer.transitions.set('fullScreenMode', true);
-    // updateNavBar();
   };
   navActions[TopNavIds.EXIT_EDIT_MODE] = () => onChangeViewMode(ViewMode.VIEW);
   navActions[TopNavIds.ENTER_EDIT_MODE] = () => onChangeViewMode(ViewMode.EDIT);
   navActions[TopNavIds.SAVE] = () => {
-    console.log('inside save top nav!');
     const currentTitle = appState.title;
     const currentDescription = appState.description;
     const currentTimeRestore = appState.timeRestore;
@@ -362,12 +360,9 @@ export const getNavActions = (
           revertChangesAndExitEditMode();
         }
       });
-
-    // updateNavBar();
   }
 
   async function save(saveOptions: SavedObjectSaveOpts) {
-    console.log('in the save function!');
     const timefilter = queryService.timefilter.timefilter;
     try {
       const id = await saveDashboard(timefilter, stateContainer, savedDashboard, saveOptions);
@@ -381,11 +376,6 @@ export const getNavActions = (
           'data-test-subj': 'saveDashboardSuccess',
         });
 
-        const appPath = `${createDashboardEditUrl(id)}`;
-
-        // Manually insert a new url so the back button will open the saved visualization.
-        history.replace(appPath);
-        // setActiveUrl(appPath);
         chrome.docTitle.change(savedDashboard.lastSavedTitle);
         stateContainer.transitions.set('viewMode', ViewMode.VIEW);
       }