From 19e422e7a6e6ecce049839c0462111ae9646c36a Mon Sep 17 00:00:00 2001 From: Matt Kime Date: Thu, 19 May 2022 22:00:00 -0500 Subject: [PATCH] add count to relationship tab --- .../edit_index_pattern/edit_index_pattern.tsx | 29 +++++++++++++++++- .../relationships_table.tsx | 30 ++++--------------- .../edit_index_pattern/tabs/tabs.tsx | 30 +++++++++++++------ .../edit_index_pattern/tabs/utils.ts | 7 +++-- 4 files changed, 59 insertions(+), 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 index ca6f34ffcb8de..927be7308b639 100644 --- 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,7 +62,7 @@ const securitySolution = 'security-solution'; export const EditIndexPattern = withRouter( ({ indexPattern, history, location }: EditIndexPatternProps) => { - const { uiSettings, overlays, chrome, dataViews } = + const { uiSettings, overlays, chrome, dataViews, savedObjectsManagement } = useKibana().services; const [fields, setFields] = useState(indexPattern.getNonScriptedFields()); const [conflictedFields, setConflictedFields] = useState( @@ -65,6 +70,26 @@ export const EditIndexPattern = withRouter( ); const [defaultIndex, setDefaultIndex] = useState(uiSettings.get('defaultIndex')); const [tags, setTags] = useState([]); + const [relationships, setRelationships] = useState([]); + const [allowedTypes, setAllowedTypes] = useState([]); + + 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/src/plugins/data_view_management/public/components/edit_index_pattern/relationships_table/relationships_table.tsx b/src/plugins/data_view_management/public/components/edit_index_pattern/relationships_table/relationships_table.tsx index b75eca36c25f8..208d70eb74a1f 100644 --- a/src/plugins/data_view_management/public/components/edit_index_pattern/relationships_table/relationships_table.tsx +++ b/src/plugins/data_view_management/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([]); - const [allowedTypes, setAllowedTypes] = useState([]); 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 index 885bb58a3d25e..de4e455cd48af 100644 --- 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 { 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) => { - return { - ...tab, - content: getContent(tab.id), - }; - }), - [fieldFilter, getContent, indexPattern] + getTabs(indexPattern, fieldFilter, relationships.length).map( + (tab: Pick) => { + 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 index eec06863a5b63..00b08037e52fe 100644 --- 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, 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', });