[Backport 2.x]Add extension point in saved object management to register namespaces and show filter (#2656)

CHANGELOG.md

@@ -30,6 +30,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Vis Builder] Rename wizard to visBuilder in i18n id and formatted message id ([#2635](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2635))
 * [Vis Builder] Rename wizard to visBuilder in class name, type name and function name ([#2639](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2639))
 * [Vis Builder] Rename wizard on save modal and visualization table ([#2645](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2645))
+* Add extension point in saved object management to register namespaces and show filter ([#2656](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2656))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))

src/plugins/saved_objects_management/public/index.ts

@@ -39,6 +39,9 @@ export {
   SavedObjectsManagementColumnServiceSetup,
   SavedObjectsManagementColumnServiceStart,
   SavedObjectsManagementColumn,
+  SavedObjectsManagementNamespaceServiceSetup,
+  SavedObjectsManagementNamespaceServiceStart,
+  SavedObjectsManagementNamespace,
   SavedObjectsManagementRecord,
   ISavedObjectsManagementServiceRegistry,
   SavedObjectsManagementServiceRegistryEntry,

src/plugins/saved_objects_management/public/lib/get_saved_object_counts.ts

@@ -33,10 +33,11 @@ import { HttpStart } from 'src/core/public';
 export async function getSavedObjectCounts(
   http: HttpStart,
   typesToInclude: string[],
+  namespacesToInclude: string[],
   searchString?: string
 ): Promise<Record<string, number>> {
   return await http.post<Record<string, number>>(
     `/api/opensearch-dashboards/management/saved_objects/scroll/counts`,
-    { body: JSON.stringify({ typesToInclude, searchString }) }
+    { body: JSON.stringify({ typesToInclude, namespacesToInclude, searchString }) }
   );
 }

src/plugins/saved_objects_management/public/lib/parse_query.test.ts

@@ -34,8 +34,19 @@ describe('getQueryText', () => {
   it('should know how to get the text out of the AST', () => {
     const ast = {
       getTermClauses: () => [{ value: 'foo' }, { value: 'bar' }],
-      getFieldClauses: () => [{ value: 'lala' }, { value: 'lolo' }],
+      getFieldClauses: (field) => {
+        if (field === 'type') {
+          return [{ value: 'lala' }, { value: 'lolo' }];
+        } else if (field === 'namespaces') {
+          return [{ value: 'default' }];
+        }
+        return [];
+      },
     };
-    expect(parseQuery({ ast } as any)).toEqual({ queryText: 'foo bar', visibleTypes: 'lala' });
+    expect(parseQuery({ ast } as any, ['type'])).toEqual({
+      queryText: 'foo bar',
+      visibleTypes: 'lala',
+      visibleNamespaces: 'default',
+    });
   });
 });

src/plugins/saved_objects_management/public/lib/parse_query.ts

@@ -38,6 +38,7 @@ interface ParsedQuery {
 export function parseQuery(query: Query): ParsedQuery {
   let queryText: string | undefined;
   let visibleTypes: string[] | undefined;
+  let visibleNamespaces: string[] | undefined;
 
   if (query) {
     if (query.ast.getTermClauses().length) {
@@ -49,10 +50,14 @@ export function parseQuery(query: Query): ParsedQuery {
     if (query.ast.getFieldClauses('type')) {
       visibleTypes = query.ast.getFieldClauses('type')[0].value as string[];
     }
+    if (query.ast.getFieldClauses('namespaces')) {
+      visibleNamespaces = query.ast.getFieldClauses('namespaces')[0].value as string[];
+    }
   }
 
   return {
     queryText,
     visibleTypes,
+    visibleNamespaces,
   };
 }

src/plugins/saved_objects_management/public/management_section/mount_section.tsx

@@ -104,6 +104,7 @@ export const mountManagementSection = async ({
                   serviceRegistry={serviceRegistry}
                   actionRegistry={pluginStart.actions}
                   columnRegistry={pluginStart.columns}
+                  namespaceRegistry={pluginStart.namespaces}
                   allowedTypes={allowedObjectTypes}
                   setBreadcrumbs={setBreadcrumbs}
                 />

src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx

@@ -62,7 +62,19 @@ const defaultProps: TableProps = {
   selectionConfig: {
     onSelectionChange: () => {},
   },
-  filterOptions: [{ value: 2 }],
+  filters: [
+    {
+      type: 'field_value_selection',
+      field: 'type',
+      name: 'Type',
+      multiSelect: 'or',
+      options: [
+        {
+          value: 2,
+        },
+      ],
+    },
+  ],
   onDelete: () => {},
   onActionRefresh: () => {},
   onExport: () => {},

src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx

@@ -61,11 +61,12 @@ export interface TableProps {
   basePath: IBasePath;
   actionRegistry: SavedObjectsManagementActionServiceStart;
   columnRegistry: SavedObjectsManagementColumnServiceStart;
+  namespaceRegistry: SavedObjectsManagementNamespaceServiceStart;
   selectedSavedObjects: SavedObjectWithMetadata[];
   selectionConfig: {
     onSelectionChange: (selection: SavedObjectWithMetadata[]) => void;
   };
-  filterOptions: any[];
+  filters: any[];
   canDelete: boolean;
   onDelete: () => void;
   onActionRefresh: (object: SavedObjectWithMetadata) => void;
@@ -76,7 +77,7 @@ export interface TableProps {
   items: SavedObjectWithMetadata[];
   itemId: string | (() => string);
   totalItemCount: number;
-  onQueryChange: (query: any) => void;
+  onQueryChange: (query: any, filterFields: string[]) => void;
   onTableChange: (table: any) => void;
   isSearching: boolean;
   onShowRelationships: (object: SavedObjectWithMetadata) => void;
@@ -163,7 +164,7 @@ export class Table extends PureComponent<TableProps, TableState> {
       items,
       totalItemCount,
       isSearching,
-      filterOptions,
+      filters,
       selectionConfig: selection,
       onDelete,
       onActionRefresh,
@@ -174,6 +175,7 @@ export class Table extends PureComponent<TableProps, TableState> {
       basePath,
       actionRegistry,
       columnRegistry,
+      namespaceRegistry,
       dateFormat,
     } = this.props;
 
@@ -184,26 +186,6 @@ export class Table extends PureComponent<TableProps, TableState> {
       pageSizeOptions: [5, 10, 20, 50],
     };
 
-    const filters = [
-      {
-        type: 'field_value_selection',
-        field: 'type',
-        name: i18n.translate('savedObjectsManagement.objectsTable.table.typeFilterName', {
-          defaultMessage: 'Type',
-        }),
-        multiSelect: 'or',
-        options: filterOptions,
-      },
-      // Add this back in once we have tag support
-      // {
-      //   type: 'field_value_selection',
-      //   field: 'tag',
-      //   name: 'Tags',
-      //   multiSelect: 'or',
-      //   options: [],
-      // },
-    ];
-
     const columns = [
       {
         field: 'type',

src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx

@@ -53,6 +53,7 @@ import { dataPluginMock } from '../../../../data/public/mocks';
 import { serviceRegistryMock } from '../../services/service_registry.mock';
 import { actionServiceMock } from '../../services/action_service.mock';
 import { columnServiceMock } from '../../services/column_service.mock';
+import { namespaceServiceMock } from '../../services/namespace_service.mock';
 import {
   SavedObjectsTable,
   SavedObjectsTableProps,
@@ -147,6 +148,7 @@ describe('SavedObjectsTable', () => {
       serviceRegistry: serviceRegistryMock.create(),
       actionRegistry: actionServiceMock.createStart(),
       columnRegistry: columnServiceMock.createStart(),
+      namespaceRegistry: namespaceServiceMock.createStart(),
       savedObjectsClient: savedObjects.client,
       indexPatterns: dataPluginMock.createStartContract().indexPatterns,
       http,

src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx

@@ -85,6 +85,7 @@ import {
   ISavedObjectsManagementServiceRegistry,
   SavedObjectsManagementActionServiceStart,
   SavedObjectsManagementColumnServiceStart,
+  SavedObjectsManagementNamespaceServiceStart,
 } from '../../services';
 import { Header, Table, Flyout, Relationships } from './components';
 import { DataPublicPluginStart } from '../../../../../plugins/data/public';
@@ -99,6 +100,7 @@ export interface SavedObjectsTableProps {
   serviceRegistry: ISavedObjectsManagementServiceRegistry;
   actionRegistry: SavedObjectsManagementActionServiceStart;
   columnRegistry: SavedObjectsManagementColumnServiceStart;
+  namespaceRegistry: SavedObjectsManagementNamespaceServiceStart;
   savedObjectsClient: SavedObjectsClientContract;
   indexPatterns: IndexPatternsContract;
   http: HttpStart;
@@ -177,7 +179,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
 
   fetchCounts = async () => {
     const { allowedTypes } = this.props;
-    const { queryText, visibleTypes } = parseQuery(this.state.activeQuery);
+    const { queryText, visibleTypes, visibleNamespaces } = parseQuery(this.state.activeQuery);
 
     const filteredTypes = allowedTypes.filter(
       (type) => !visibleTypes || visibleTypes.includes(type)
@@ -187,6 +189,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     const filteredSavedObjectCounts = await getSavedObjectCounts(
       this.props.http,
       filteredTypes,
+      visibleNamespaces,
       queryText
     );
 
@@ -206,7 +209,12 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
 
     // Fetch all the saved objects that exist so we can accurately populate the counts within
     // the table filter dropdown.
-    const savedObjectCounts = await getSavedObjectCounts(this.props.http, allowedTypes, queryText);
+    const savedObjectCounts = await getSavedObjectCounts(
+      this.props.http,
+      allowedTypes,
+      [],
+      queryText
+    );
 
     this.setState((state) => ({
       ...state,
@@ -227,15 +235,19 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
   debouncedFetchObjects = debounce(async () => {
     const { activeQuery: query, page, perPage } = this.state;
     const { notifications, http, allowedTypes } = this.props;
-    const { queryText, visibleTypes } = parseQuery(query);
+    const { queryText, visibleTypes, visibleNamespaces } = parseQuery(query);
+    const filteredTypes = allowedTypes.filter(
+      (type) => !visibleTypes || visibleTypes.includes(type)
+    );
     // "searchFields" is missing from the "findOptions" but gets injected via the API.
     // The API extracts the fields from each uiExports.savedObjectsManagement "defaultSearchField" attribute
     const findOptions: SavedObjectsFindOptions = {
       search: queryText ? `${queryText}*` : undefined,
       perPage,
       page: page + 1,
       fields: ['id'],
-      type: allowedTypes.filter((type) => !visibleTypes || visibleTypes.includes(type)),
+      type: filteredTypes,
+      namespaces: visibleNamespaces,
     };
     if (findOptions.type.length > 1) {
       findOptions.sortField = 'type';
@@ -390,6 +402,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
   onExportAll = async () => {
     const { exportAllSelectedOptions, isIncludeReferencesDeepChecked, activeQuery } = this.state;
     const { notifications, http } = this.props;
+
     const { queryText } = parseQuery(activeQuery);
     const exportTypes = Object.entries(exportAllSelectedOptions).reduce((accum, [id, selected]) => {
       if (selected) {
@@ -764,18 +777,55 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       isSearching,
       savedObjectCounts,
     } = this.state;
-    const { http, allowedTypes, applications } = this.props;
+    const { http, allowedTypes, applications, namespaceRegistry } = this.props;
 
     const selectionConfig = {
       onSelectionChange: this.onSelectionChanged,
     };
+    const typeCounts = savedObjectCounts.type || {};
 
     const filterOptions = allowedTypes.map((type) => ({
       value: type,
       name: type,
-      view: `${type} (${savedObjectCounts[type] || 0})`,
+      view: `${type} (${typeCounts[type] || 0})`,
     }));
 
+    const filters = [
+      {
+        type: 'field_value_selection',
+        field: 'type',
+        name: i18n.translate('savedObjectsManagement.objectsTable.table.typeFilterName', {
+          defaultMessage: 'Type',
+        }),
+        multiSelect: 'or',
+        options: filterOptions,
+      },
+    ];
+
+    const availableNamespaces = namespaceRegistry.getAll() || [];
+    if (availableNamespaces && availableNamespaces.length > 0) {
+      const nsCounts = savedObjectCounts.namespaces || {};
+      const nsFilterOptions = availableNamespaces.map((ns) => {
+        return {
+          name: ns.name,
+          value: ns.id,
+          view: `${ns.name} (${nsCounts[ns.id] || 0})`,
+        };
+      });
+
+      filters.push({
+        type: 'field_value_selection',
+        field: 'namespaces',
+        name:
+          namespaceRegistry.getAlias() ||
+          i18n.translate('savedObjectsManagement.objectsTable.table.namespaceFilterName', {
+            defaultMessage: 'Namespaces',
+          }),
+        multiSelect: 'or',
+        options: nsFilterOptions,
+      });
+    }
+
     return (
       <EuiPageContent horizontalPosition="center">
         {this.renderFlyout()}
@@ -799,7 +849,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
             selectedSavedObjects={selectedSavedObjects}
             onQueryChange={this.onQueryChange}
             onTableChange={this.onTableChange}
-            filterOptions={filterOptions}
+            filters={filters}
             onExport={this.onExport}
             canDelete={applications.capabilities.savedObjectsManagement.delete as boolean}
             onDelete={this.onDelete}