From 4def287e62e7d51bfbc62e062d580aa575fc60cd Mon Sep 17 00:00:00 2001 From: Levente Balogh Date: Mon, 23 Jan 2023 13:25:42 +0100 Subject: [PATCH] Connections: Show the Dashboards tab under DataSource settings (#61841) * fix: use the correct URL for editing datasource dashboards * feat: show the Datasource/Dashboards page under Connections as well * refactor: remove unnecessary `useNavModel()` utility * feat: add a utility for creating the nav-model for DS settings tabs * refactor: use nav-model crating utility in Edit Datasource --- .../app/features/connections/Connections.tsx | 2 ++ public/app/features/connections/constants.ts | 2 +- .../hooks/useDataSourceSettingsNav.ts | 34 +++++++++++++++++++ .../features/connections/hooks/useNavModel.ts | 29 ---------------- .../pages/DataSourceDashboardsPage.tsx | 20 +++++++++++ .../connections/pages/EditDataSourcePage.tsx | 12 +++---- .../app/features/connections/pages/index.tsx | 1 + 7 files changed, 62 insertions(+), 38 deletions(-) create mode 100644 public/app/features/connections/hooks/useDataSourceSettingsNav.ts delete mode 100644 public/app/features/connections/hooks/useNavModel.ts create mode 100644 public/app/features/connections/pages/DataSourceDashboardsPage.tsx diff --git a/public/app/features/connections/Connections.tsx b/public/app/features/connections/Connections.tsx index b6877dadfb1..867cf1bdfd9 100644 --- a/public/app/features/connections/Connections.tsx +++ b/public/app/features/connections/Connections.tsx @@ -8,6 +8,7 @@ import { StoreState, useSelector } from 'app/types'; import { ROUTES } from './constants'; import { ConnectDataPage, + DataSourceDashboardsPage, DataSourceDetailsPage, DataSourcesListPage, EditDataSourcePage, @@ -38,6 +39,7 @@ export default function Connections() { + {!isConnectDataPageOverriden && } {/* Default page */} diff --git a/public/app/features/connections/constants.ts b/public/app/features/connections/constants.ts index 03d3b306e86..faa38dfc749 100644 --- a/public/app/features/connections/constants.ts +++ b/public/app/features/connections/constants.ts @@ -11,7 +11,7 @@ export const ROUTES = { DataSources: `/${ROUTE_BASE_ID}/your-connections/datasources`, DataSourcesNew: `/${ROUTE_BASE_ID}/your-connections/datasources/new`, DataSourcesEdit: `/${ROUTE_BASE_ID}/your-connections/datasources/edit/:uid`, - DataSourcesDashboards: `/${ROUTE_BASE_ID}/datasources/edit/:uid/dashboards`, + DataSourcesDashboards: `/${ROUTE_BASE_ID}/your-connections/datasources/edit/:uid/dashboards`, // Connect Data ConnectData: `/${ROUTE_BASE_ID}/connect-data`, diff --git a/public/app/features/connections/hooks/useDataSourceSettingsNav.ts b/public/app/features/connections/hooks/useDataSourceSettingsNav.ts new file mode 100644 index 00000000000..cab99f7e016 --- /dev/null +++ b/public/app/features/connections/hooks/useDataSourceSettingsNav.ts @@ -0,0 +1,34 @@ +import { useLocation, useParams } from 'react-router-dom'; + +import { + useDataSource, + useDataSourceSettingsNav as useDataSourceSettingsNavOriginal, +} from 'app/features/datasources/state/hooks'; +import { useGetSingle } from 'app/features/plugins/admin/state/hooks'; + +// We are extending the original useDataSourceSettingsNav in the following ways: +// - changing the URL of the nav items to point to Connections +// - setting the parent nav item +export function useDataSourceSettingsNav(pageId?: string) { + const { uid } = useParams<{ uid: string }>(); + const location = useLocation(); + const datasource = useDataSource(uid); + const datasourcePlugin = useGetSingle(datasource.type); + const params = new URLSearchParams(location.search); + const nav = useDataSourceSettingsNavOriginal(uid, pageId || params.get('page')); + const pageNav = { + ...nav.main, + text: datasource.name, + subTitle: `Type: ${datasourcePlugin?.name}`, + active: true, + children: (nav.main.children || []).map((navModelItem) => ({ + ...navModelItem, + url: navModelItem.url?.replace('datasources/edit/', '/connections/your-connections/datasources/edit/'), + })), + }; + + return { + navId: 'connections-your-connections-datasources', + pageNav, + }; +} diff --git a/public/app/features/connections/hooks/useNavModel.ts b/public/app/features/connections/hooks/useNavModel.ts deleted file mode 100644 index 3b85563fafb..00000000000 --- a/public/app/features/connections/hooks/useNavModel.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { useLocation } from 'react-router-dom'; - -import { NavModelItem } from '@grafana/data'; -import { useSelector } from 'app/types'; - -import { ROUTE_BASE_ID } from '../constants'; - -// We need this utility logic to make sure that the tab with the current URL is marked as active. -// (In case we were using `getNavModel()` from app/core/selectors/navModel, then we would need to set -// the child nav-model-item's ID on the call-site.) -export const useNavModel = () => { - const { pathname: currentPath } = useLocation(); - const navIndex = useSelector((state) => state.navIndex); - const node = navIndex[ROUTE_BASE_ID]; - const main = node; - const isDefaultRoute = (item: NavModelItem) => - currentPath === `/${ROUTE_BASE_ID}` && item.id === 'connections-datasources'; - const isItemActive = (item: NavModelItem) => currentPath.startsWith(item.url || ''); - - main.children = main.children?.map((item) => ({ - ...item, - active: isItemActive(item) || isDefaultRoute(item), - })); - - return { - node, - main, - }; -}; diff --git a/public/app/features/connections/pages/DataSourceDashboardsPage.tsx b/public/app/features/connections/pages/DataSourceDashboardsPage.tsx new file mode 100644 index 00000000000..14ed508dfbf --- /dev/null +++ b/public/app/features/connections/pages/DataSourceDashboardsPage.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { useParams } from 'react-router-dom'; + +import { Page } from 'app/core/components/Page/Page'; +import { DataSourceDashboards } from 'app/features/datasources/components/DataSourceDashboards'; + +import { useDataSourceSettingsNav } from '../hooks/useDataSourceSettingsNav'; + +export function DataSourceDashboardsPage() { + const { uid } = useParams<{ uid: string }>(); + const { navId, pageNav } = useDataSourceSettingsNav('dashboards'); + + return ( + + + + + + ); +} diff --git a/public/app/features/connections/pages/EditDataSourcePage.tsx b/public/app/features/connections/pages/EditDataSourcePage.tsx index 9dcad3fe006..d72a168518c 100644 --- a/public/app/features/connections/pages/EditDataSourcePage.tsx +++ b/public/app/features/connections/pages/EditDataSourcePage.tsx @@ -3,22 +3,18 @@ import { useLocation, useParams } from 'react-router-dom'; import { Page } from 'app/core/components/Page/Page'; import { EditDataSource } from 'app/features/datasources/components/EditDataSource'; -import { useDataSource } from 'app/features/datasources/state/hooks'; -import { useGetSingle } from 'app/features/plugins/admin/state/hooks'; + +import { useDataSourceSettingsNav } from '../hooks/useDataSourceSettingsNav'; export function EditDataSourcePage() { const { uid } = useParams<{ uid: string }>(); const location = useLocation(); - const datasource = useDataSource(uid); - const datasourcePlugin = useGetSingle(datasource.type); const params = new URLSearchParams(location.search); const pageId = params.get('page'); + const { navId, pageNav } = useDataSourceSettingsNav(); return ( - + diff --git a/public/app/features/connections/pages/index.tsx b/public/app/features/connections/pages/index.tsx index 43dbb2aa8fa..1fdd3106fc5 100644 --- a/public/app/features/connections/pages/index.tsx +++ b/public/app/features/connections/pages/index.tsx @@ -1,5 +1,6 @@ export { ConnectDataPage } from './ConnectDataPage'; export { DataSourceDetailsPage } from './DataSourceDetailsPage'; export { DataSourcesListPage } from './DataSourcesListPage'; +export { DataSourceDashboardsPage } from './DataSourceDashboardsPage'; export { EditDataSourcePage } from './EditDataSourcePage'; export { NewDataSourcePage } from './NewDataSourcePage';