Dashboard Lists Integration

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))
@@ -70,6 +71,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Use mirrors to download Node.js binaries to escape sporadic 404 errors ([#3619](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3619))
 - [Multiple DataSource] Refactor dev tool console to use opensearch-js client to send requests ([#3544](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3544))
 - [Data] Add geo shape filter field ([#3605](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3605))
+- Add Dashboards-list integrations for Plugins ([#3090](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3090) )
 
 ### 🐛 Bug Fixes
 

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() {

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));