use navId + pageNav on datasource pages (#54218)

This commit is contained in:
Ashley Harrison 2022-08-25 13:58:41 +01:00 committed by GitHub
parent 0ffbf901d7
commit d765aaff49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 5 deletions

View File

@ -4,14 +4,16 @@ import { Page } from 'app/core/components/Page/Page';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { DataSourceDashboards } from '../components/DataSourceDashboards';
import { useDataSourceSettingsNav } from '../state';
export interface Props extends GrafanaRouteComponentProps<{ uid: string }> {}
export function DataSourceDashboardsPage(props: Props) {
const uid = props.match.params.uid;
const nav = useDataSourceSettingsNav(uid, 'dashboards');
return (
<Page navId={`datasource-dashboards-${uid}`}>
<Page navId="datasources" pageNav={nav.main}>
<Page.Contents>
<DataSourceDashboards uid={uid} />
</Page.Contents>

View File

@ -15,7 +15,7 @@ export function EditDataSourcePage(props: Props) {
const nav = useDataSourceSettingsNav(uid, pageId);
return (
<Page navModel={nav}>
<Page navId="datasources" pageNav={nav.main}>
<Page.Contents>
<EditDataSource uid={uid} pageId={pageId} />
</Page.Contents>

View File

@ -1,7 +1,7 @@
import { useContext, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { DataSourcePluginMeta, DataSourceSettings, urlUtil } from '@grafana/data';
import { DataSourcePluginMeta, DataSourceSettings, NavModelItem, urlUtil } from '@grafana/data';
import { cleanUpAction } from 'app/core/actions/cleanUp';
import appEvents from 'app/core/app_events';
import { contextSrv } from 'app/core/core';
@ -127,10 +127,10 @@ export const useDataSourceSettingsNav = (dataSourceId: string, pageId: string |
const dataSource = useDataSource(dataSourceId);
const { plugin, loadError, loading } = useDataSourceSettings();
const navIndex = useSelector((state: StoreState) => state.navIndex);
const navIndexId = pageId ? `datasource-page-${pageId}` : `datasource-settings-${dataSourceId}`;
const navIndexId = pageId ? `datasource-${pageId}-${dataSourceId}` : `datasource-settings-${dataSourceId}`;
if (loadError) {
const node = {
const node: NavModelItem = {
text: loadError,
subTitle: 'Data Source Error',
icon: 'exclamation-triangle',