add count to relationship tab

elastic · May 20, 2022 · 19e422e · 19e422e
1 parent 74aeace
commit 19e422e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 37 deletions.
diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/edit_index_pattern.tsx b/src/plugins/data_view_management/public/components/edit_index_pattern/edit_index_pattern.tsx
@@ -21,7 +21,12 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
+import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import {
+  SavedObjectRelation,
+  SavedObjectManagementTypeInfo,
+} from '@kbn/saved-objects-management-plugin/public';
 import { IndexPatternManagmentContext } from '../../types';
 import { Tabs } from './tabs';
 import { IndexHeader } from './index_header';
@@ -57,14 +62,34 @@ const securitySolution = 'security-solution';
 
 export const EditIndexPattern = withRouter(
   ({ indexPattern, history, location }: EditIndexPatternProps) => {
-    const { uiSettings, overlays, chrome, dataViews } =
+    const { uiSettings, overlays, chrome, dataViews, savedObjectsManagement } =
       useKibana<IndexPatternManagmentContext>().services;
     const [fields, setFields] = useState<DataViewField[]>(indexPattern.getNonScriptedFields());
     const [conflictedFields, setConflictedFields] = useState<DataViewField[]>(
       indexPattern.fields.getAll().filter((field) => field.type === 'conflict')
     );
     const [defaultIndex, setDefaultIndex] = useState<string>(uiSettings.get('defaultIndex'));
     const [tags, setTags] = useState<any[]>([]);
+    const [relationships, setRelationships] = useState<SavedObjectRelation[]>([]);
+    const [allowedTypes, setAllowedTypes] = useState<SavedObjectManagementTypeInfo[]>([]);
+
+    useEffect(() => {
+      savedObjectsManagement.getAllowedTypes().then((resp) => {
+        setAllowedTypes(resp);
+      });
+    }, [savedObjectsManagement]);
+
+    useEffect(() => {
+      if (allowedTypes.length === 0) {
+        return;
+      }
+      const allowedAsString = allowedTypes.map((item) => item.name);
+      savedObjectsManagement
+        .getRelationships(DATA_VIEW_SAVED_OBJECT_TYPE, indexPattern.id!, allowedAsString)
+        .then((resp) => {
+          setRelationships(resp.relations);
+        });
+    }, [savedObjectsManagement, indexPattern, allowedTypes]);
 
     useEffect(() => {
       setFields(indexPattern.getNonScriptedFields());
@@ -200,6 +225,8 @@ export const EditIndexPattern = withRouter(
           indexPattern={indexPattern}
           saveIndexPattern={dataViews.updateSavedObject.bind(dataViews)}
           fields={fields}
+          relationships={relationships}
+          allowedTypes={allowedTypes}
           history={history}
           location={location}
           refreshFields={() => {

diff --git a/...nagement/public/components/edit_index_pattern/relationships_table/relationships_table.tsx b/...nagement/public/components/edit_index_pattern/relationships_table/relationships_table.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
   EuiInMemoryTable,
   HorizontalAlignment,
@@ -15,7 +15,6 @@ import {
   EuiTableDataType,
 } from '@elastic/eui';
 import { CoreStart } from '@kbn/core/public';
-import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/public';
 import { get } from 'lodash';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 
@@ -49,24 +48,21 @@ export const RelationshipsTable = ({
   basePath,
   capabilities,
   id,
-  getAllowedTypes,
-  getRelationships,
   navigateToUrl,
   getDefaultTitle,
   getSavedObjectLabel,
+  relationships,
+  allowedTypes,
 }: {
   basePath: CoreStart['http']['basePath'];
   capabilities: CoreStart['application']['capabilities'];
   navigateToUrl: CoreStart['application']['navigateToUrl'];
   id: string;
-  getAllowedTypes: SavedObjectsManagementPluginStart['getAllowedTypes'];
-  getRelationships: SavedObjectsManagementPluginStart['getRelationships'];
   getDefaultTitle: SavedObjectsManagementPluginStart['getDefaultTitle'];
   getSavedObjectLabel: SavedObjectsManagementPluginStart['getSavedObjectLabel'];
+  relationships: SavedObjectRelation[];
+  allowedTypes: SavedObjectManagementTypeInfo[];
 }) => {
-  // todo move data access higher
-  const [relationships, setRelationships] = useState<SavedObjectRelation[]>([]);
-  const [allowedTypes, setAllowedTypes] = useState<SavedObjectManagementTypeInfo[]>([]);
   const [query, setQuery] = useState('');
 
   const handleOnChange = ({ queryText, error }: { queryText: string; error: unknown }) => {
@@ -75,22 +71,6 @@ export const RelationshipsTable = ({
     }
   };
 
-  useEffect(() => {
-    getAllowedTypes().then((resp) => {
-      setAllowedTypes(resp);
-    });
-  }, [getAllowedTypes]);
-
-  useEffect(() => {
-    if (allowedTypes.length === 0) {
-      return;
-    }
-    const allowedAsString = allowedTypes.map((item) => item.name);
-    getRelationships(DATA_VIEW_SAVED_OBJECT_TYPE, id, allowedAsString).then((resp) => {
-      setRelationships(resp.relations);
-    });
-  }, [getRelationships, id, allowedTypes]);
-
   const columns = [
     {
       field: 'type',

diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx b/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx
@@ -30,6 +30,10 @@ import {
   DataViewsPublicPluginStart,
   META_FIELDS,
 } from '@kbn/data-views-plugin/public';
+import {
+  SavedObjectRelation,
+  SavedObjectManagementTypeInfo,
+} from '@kbn/saved-objects-management-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { IndexPatternManagmentContext } from '../../../types';
 import { createEditIndexPatternPageStateContainer } from '../edit_index_pattern_state_container';
@@ -51,6 +55,8 @@ interface TabsProps extends Pick<RouteComponentProps, 'history' | 'location'> {
   fields: DataViewField[];
   saveIndexPattern: DataViewsPublicPluginStart['updateSavedObject'];
   refreshFields: () => void;
+  relationships: SavedObjectRelation[];
+  allowedTypes: SavedObjectManagementTypeInfo[];
 }
 
 interface FilterItems {
@@ -137,6 +143,8 @@ export function Tabs({
   history,
   location,
   refreshFields,
+  relationships,
+  allowedTypes,
 }: TabsProps) {
   const {
     uiSettings,
@@ -515,8 +523,8 @@ export function Tabs({
                 basePath={http.basePath}
                 id={indexPattern.id!}
                 capabilities={application.capabilities}
-                getAllowedTypes={savedObjectsManagement.getAllowedTypes}
-                getRelationships={savedObjectsManagement.getRelationships}
+                relationships={relationships}
+                allowedTypes={allowedTypes}
                 navigateToUrl={application.navigateToUrl}
                 getDefaultTitle={savedObjectsManagement.getDefaultTitle}
                 getSavedObjectLabel={savedObjectsManagement.getSavedObjectLabel}
@@ -547,18 +555,22 @@ export function Tabs({
       http,
       application,
       savedObjectsManagement,
+      allowedTypes,
+      relationships,
     ]
   );
 
   const euiTabs: EuiTabbedContentTab[] = useMemo(
     () =>
-      getTabs(indexPattern, fieldFilter).map((tab: Pick<EuiTabbedContentTab, 'name' | 'id'>) => {
-        return {
-          ...tab,
-          content: getContent(tab.id),
-        };
-      }),
-    [fieldFilter, getContent, indexPattern]
+      getTabs(indexPattern, fieldFilter, relationships.length).map(
+        (tab: Pick<EuiTabbedContentTab, 'name' | 'id'>) => {
+          return {
+            ...tab,
+            content: getContent(tab.id),
+          };
+        }
+      ),
+    [fieldFilter, getContent, indexPattern, relationships]
   );
 
   const [selectedTabId, setSelectedTabId] = useState(euiTabs[0].id);

diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/utils.ts b/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/utils.ts
@@ -73,7 +73,7 @@ function getTitle(type: string, filteredCount: Dictionary<number>, totalCount: D
   return title + count;
 }
 
-export function getTabs(indexPattern: DataView, fieldFilter: string) {
+export function getTabs(indexPattern: DataView, fieldFilter: string, relationshipCount = 0) {
   const totalCount = getCounts(indexPattern.fields.getAll(), indexPattern.getSourceFiltering());
   const filteredCount = getCounts(
     indexPattern.fields.getAll(),
@@ -104,7 +104,10 @@ export function getTabs(indexPattern: DataView, fieldFilter: string) {
   });
 
   tabs.push({
-    name: 'Relationships',
+    name: i18n.translate('indexPatternManagement.editIndexPattern.tabs.relationshipsHeader', {
+      defaultMessage: 'Relationships ({count})',
+      values: { count: relationshipCount },
+    }),
     id: TAB_RELATIONSHIPS,
     'data-test-subj': 'tab-relationships',
   });