From 066710a7bc2c934c8d5f4d5b7089b9050eb1efd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= Date: Tue, 6 Sep 2022 16:25:07 +0200 Subject: [PATCH] Navigation: use navId and pageNav on Alerting - Contact Points page (#54451) --- pkg/api/index.go | 2 +- public/app/features/alerting/routes.tsx | 26 ++-------------- .../features/alerting/unified/Receivers.tsx | 31 +++++++++++++++++-- .../components/AlertingPageWrapper.tsx | 14 +++------ .../components/receivers/GlobalConfigForm.tsx | 12 +------ 5 files changed, 37 insertions(+), 48 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 7a074352435..df01315501a 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -610,7 +610,7 @@ func (hs *HTTPServer) buildAlertNavLinks(c *models.ReqContext) []*dtos.NavLink { if hasAccess(ac.ReqOrgAdminOrEditor, ac.EvalAny(ac.EvalPermission(ac.ActionAlertingNotificationsRead), ac.EvalPermission(ac.ActionAlertingNotificationsExternalRead))) { alertChildNavs = append(alertChildNavs, &dtos.NavLink{ Text: "Contact points", Id: "receivers", Url: hs.Cfg.AppSubURL + "/alerting/notifications", - Icon: "comment-alt-share", + Icon: "comment-alt-share", SubTitle: "Manage the settings of your contact points", }) alertChildNavs = append(alertChildNavs, &dtos.NavLink{Text: "Notification policies", Id: "am-routes", Url: hs.Cfg.AppSubURL + "/alerting/routes", Icon: "sitemap"}) } diff --git a/public/app/features/alerting/routes.tsx b/public/app/features/alerting/routes.tsx index e0fccbfbc3a..082f631879b 100644 --- a/public/app/features/alerting/routes.tsx +++ b/public/app/features/alerting/routes.tsx @@ -172,7 +172,7 @@ const unifiedRoutes: RouteDescriptor[] = [ ), }, { - path: '/alerting/notifications/templates/new', + path: '/alerting/notifications/:type/new', roles: evaluateAccess( [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite], ['Editor', 'Admin'] @@ -182,7 +182,7 @@ const unifiedRoutes: RouteDescriptor[] = [ ), }, { - path: '/alerting/notifications/templates/:id/edit', + path: '/alerting/notifications/:type/:id/edit', roles: evaluateAccess( [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite], ['Editor', 'Admin'] @@ -192,27 +192,7 @@ const unifiedRoutes: RouteDescriptor[] = [ ), }, { - path: '/alerting/notifications/receivers/new', - roles: evaluateAccess( - [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite], - ['Editor', 'Admin'] - ), - component: SafeDynamicImport( - () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers') - ), - }, - { - path: '/alerting/notifications/receivers/:id/edit', - roles: evaluateAccess( - [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite], - ['Editor', 'Admin'] - ), - component: SafeDynamicImport( - () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers') - ), - }, - { - path: '/alerting/notifications/global-config', + path: '/alerting/notifications/:type', roles: evaluateAccess( [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite], ['Editor', 'Admin'] diff --git a/public/app/features/alerting/unified/Receivers.tsx b/public/app/features/alerting/unified/Receivers.tsx index f06fdfb57a7..be751cf0400 100644 --- a/public/app/features/alerting/unified/Receivers.tsx +++ b/public/app/features/alerting/unified/Receivers.tsx @@ -1,7 +1,8 @@ import React, { FC, useEffect } from 'react'; import { useDispatch } from 'react-redux'; -import { Redirect, Route, RouteChildrenProps, Switch, useLocation } from 'react-router-dom'; +import { Redirect, Route, RouteChildrenProps, Switch, useLocation, useParams } from 'react-router-dom'; +import { NavModelItem } from '@grafana/data'; import { Alert, LoadingPlaceholder, withErrorBoundary } from '@grafana/ui'; import { AlertManagerPicker } from './components/AlertManagerPicker'; @@ -25,6 +26,9 @@ const Receivers: FC = () => { const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(alertManagers); const dispatch = useDispatch(); + type PageType = 'receivers' | 'templates' | 'global-config'; + + const { id, type } = useParams<{ id?: string; type?: PageType }>(); const location = useLocation(); const isRoot = location.pathname.endsWith('/alerting/notifications'); @@ -56,9 +60,30 @@ const Receivers: FC = () => { const disableAmSelect = !isRoot; + let pageNav: NavModelItem | undefined; + if (type === 'receivers' || type === 'templates') { + const objectText = type === 'receivers' ? 'contact point' : 'message template'; + if (id) { + pageNav = { + text: id, + subTitle: `Edit the settings for a specific ${objectText}`, + }; + } else { + pageNav = { + text: `New ${objectText}`, + subTitle: `Create a new ${objectText} for your notifications`, + }; + } + } else if (type === 'global-config') { + pageNav = { + text: 'Global config', + subTitle: 'Manage your global configuration', + }; + } + if (!alertManagerSourceName) { return isRoot ? ( - + ) : ( @@ -67,7 +92,7 @@ const Receivers: FC = () => { } return ( - + = ({ children, pageId, isLoading }) => { - const navModel = getNavModel( - useSelector((state: StoreState) => state.navIndex), - pageId - ); - +export const AlertingPageWrapper: FC = ({ children, pageId, pageNav, isLoading }) => { return ( - + {children} ); diff --git a/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx index 4a7fe07d95f..8b66187b3db 100644 --- a/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx @@ -1,10 +1,8 @@ -import { css } from '@emotion/css'; import React, { FC } from 'react'; import { useForm, FormProvider } from 'react-hook-form'; import { useDispatch } from 'react-redux'; -import { GrafanaTheme2 } from '@grafana/data'; -import { Alert, Button, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui'; +import { Alert, Button, HorizontalGroup, LinkButton } from '@grafana/ui'; import { useCleanup } from 'app/core/hooks/useCleanup'; import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types'; @@ -36,7 +34,6 @@ export const GlobalConfigForm: FC = ({ config, alertManagerSourceName }) const { loading, error } = useUnifiedAlertingSelector((state) => state.saveAMConfig); const readOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName); - const styles = useStyles2(getStyles); const formAPI = useForm({ // making a copy here beacuse react-hook-form will mutate these, and break if the object is frozen. for real. @@ -74,7 +71,6 @@ export const GlobalConfigForm: FC = ({ config, alertManagerSourceName }) return (
-

Global config

{error && ( {error.message || String(error)} @@ -116,9 +112,3 @@ export const GlobalConfigForm: FC = ({ config, alertManagerSourceName }) ); }; - -const getStyles = (theme: GrafanaTheme2) => ({ - heading: css` - margin: ${theme.spacing(4, 0)}; - `, -});