Dashboard Lists Integration (opensearch-project#3090)

* Dashboard-List Integration * Plugins register their links with registerDashboardProvider API Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com> * Update CHANGELOG.md Signed-off-by: Josh Romero <rmerqg@amazon.com> --------- Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com> Signed-off-by: Josh Romero <rmerqg@amazon.com> Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com> Co-authored-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: David Sinclair <david@sinclair.tech>
sikhote · Apr 24, 2023 · d454e74 · d454e74
1 parent 4bbcb77
commit d454e74
Show file tree

Hide file tree

Showing 15 changed files with 1,064 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -55,6 +55,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [I18n] Register ru, ru-RU locale ([#2817](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2817))
 - Add yarn opensearch arg to setup plugin dependencies ([#2544](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2544))
 - [Multi DataSource] Test the connection to an external data source when creating or updating ([#2973](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2973))
+- Add Dashboards-list integrations for Plugins ([#3090](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3090) )
 - [Table Visualization] Refactor table visualization using React and DataGrid component ([#2863](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2863))
 - [Vis Builder] Add redux store persistence ([#3088](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3088))
 - [Multi DataSource] Improve test connection ([#3110](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3110))

diff --git a/src/plugins/dashboard/public/application/application.ts b/src/plugins/dashboard/public/application/application.ts
@@ -45,6 +45,7 @@ import {
   AppMountParameters,
 } from 'opensearch-dashboards/public';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
+import { DashboardProvider } from 'src/plugins/dashboard/public/types';
 import { Storage } from '../../../opensearch_dashboards_utils/public';
 // @ts-ignore
 import { initDashboardApp } from './legacy_app';
@@ -71,6 +72,7 @@ export interface RenderDeps {
   navigation: NavigationStart;
   savedObjectsClient: SavedObjectsClientContract;
   savedDashboards: SavedObjectLoader;
+  dashboardProviders: () => { [key: string]: DashboardProvider };
   dashboardConfig: OpenSearchDashboardsLegacyStart['dashboardConfig'];
   dashboardCapabilities: any;
   embeddableCapabilities: {
@@ -79,7 +81,6 @@ export interface RenderDeps {
   };
   uiSettings: IUiSettingsClient;
   chrome: ChromeStart;
-  addBasePath: (path: string) => string;
   savedQueryService: DataPublicPluginStart['query']['savedQueries'];
   embeddable: EmbeddableStart;
   localStorage: Storage;
@@ -141,12 +142,11 @@ function createLocalAngularModule() {
   createLocalI18nModule();
   createLocalIconModule();
 
-  const dashboardAngularModule = angular.module(moduleName, [
+  return angular.module(moduleName, [
     ...thirdPartyAngularDependencies,
     'app/dashboard/I18n',
     'app/dashboard/icon',
   ]);
-  return dashboardAngularModule;
 }
 
 function createLocalIconModule() {

diff --git a/src/plugins/dashboard/public/application/legacy_app.js b/src/plugins/dashboard/public/application/legacy_app.js
@@ -53,9 +53,10 @@ export function initDashboardApp(app, deps) {
   app.directive('dashboardListing', function (reactDirective) {
     return reactDirective(DashboardListing, [
       ['core', { watchDepth: 'reference' }],
+      ['dashboardProviders', { watchDepth: 'reference' }],
       ['createItem', { watchDepth: 'reference' }],
-      ['getViewUrl', { watchDepth: 'reference' }],
       ['editItem', { watchDepth: 'reference' }],
+      ['viewItem', { watchDepth: 'reference' }],
       ['findItems', { watchDepth: 'reference' }],
       ['deleteItems', { watchDepth: 'reference' }],
       ['listingLimit', { watchDepth: 'reference' }],
@@ -127,14 +128,47 @@ export function initDashboardApp(app, deps) {
           $scope.create = () => {
             history.push(DashboardConstants.CREATE_NEW_DASHBOARD_URL);
           };
-          $scope.find = (search) => {
-            return service.find(search, $scope.listingLimit);
+          $scope.dashboardProviders = deps.dashboardProviders() || [];
+          $scope.dashboardListTypes = Object.keys($scope.dashboardProviders);
+
+          const mapListAttributesToDashboardProvider = (obj) => {
+            const provider = $scope.dashboardProviders[obj.type];
+            return {
+              id: obj.id,
+              appId: provider.appId,
+              type: provider.savedObjectsName,
+              ...obj.attributes,
+              updated_at: obj.updated_at,
+              viewUrl: provider.viewUrlPathFn(obj),
+              editUrl: provider.editUrlPathFn(obj),
+            };
           };
-          $scope.editItem = ({ id }) => {
-            history.push(`${createDashboardEditUrl(id)}?_a=(viewMode:edit)`);
+
+          $scope.find = async (search) => {
+            const savedObjectsClient = deps.savedObjectsClient;
+
+            const res = await savedObjectsClient.find({
+              type: $scope.dashboardListTypes,
+              search: search ? `${search}*` : undefined,
+              fields: ['title', 'type', 'description', 'updated_at'],
+              perPage: $scope.initialPageSize,
+              page: 1,
+              searchFields: ['title^3', 'type', 'description'],
+              defaultSearchOperator: 'AND',
+            });
+            const list = res.savedObjects?.map(mapListAttributesToDashboardProvider) || [];
+
+            return {
+              total: list.length,
+              hits: list,
+            };
+          };
+
+          $scope.editItem = ({ editUrl }) => {
+            history.push(deps.addBasePath(editUrl));
           };
-          $scope.getViewUrl = ({ id }) => {
-            return deps.addBasePath(`#${createDashboardEditUrl(id)}`);
+          $scope.viewItem = ({ viewUrl }) => {
+            history.push(deps.addBasePath(viewUrl));
           };
           $scope.delete = (dashboards) => {
             return service.delete(dashboards.map((d) => d.id));