diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx index 91a9e5efd4b..d2580059d16 100644 --- a/public/app/AppWrapper.tsx +++ b/public/app/AppWrapper.tsx @@ -4,7 +4,7 @@ import { Provider } from 'react-redux'; import { Switch, RouteComponentProps } from 'react-router-dom'; import { CompatRoute, Navigate } from 'react-router-dom-v5-compat'; -import { config, navigationLogger, reportInteraction } from '@grafana/runtime'; +import { config, locationService, navigationLogger, reportInteraction } from '@grafana/runtime'; import { ErrorBoundaryAlert, GlobalStyles, PortalContainer } from '@grafana/ui'; import { getAppRoutes } from 'app/routes/routes'; import { store } from 'app/store/store'; @@ -56,7 +56,6 @@ export class AppWrapper extends Component { renderRoute = (route: RouteDescriptor) => { const roles = route.roles ? route.roles() : []; - return ( { path={route.path} key={route.path} render={(props: RouteComponentProps) => { + const location = locationService.getLocation(); // TODO[Router]: test this logic if (roles?.length) { if (!roles.some((r: string) => contextSrv.hasRole(r))) { @@ -71,7 +71,7 @@ export class AppWrapper extends Component { } } - return ; + return ; }} /> ); diff --git a/public/app/core/navigation/GrafanaRoute.tsx b/public/app/core/navigation/GrafanaRoute.tsx index f3718d09aaa..52ab58ba691 100644 --- a/public/app/core/navigation/GrafanaRoute.tsx +++ b/public/app/core/navigation/GrafanaRoute.tsx @@ -25,7 +25,7 @@ export function GrafanaRoute(props: Props) { useEffect(() => { updateBodyClassNames(props.route); cleanupDOM(); - navigationLogger('GrafanaRoute', false, 'Mounted', props.match); + navigationLogger('GrafanaRoute', false, 'Mounted', props.route); return () => { navigationLogger('GrafanaRoute', false, 'Unmounted', props.route); diff --git a/public/app/features/alerting/unified/Silences.tsx b/public/app/features/alerting/unified/Silences.tsx index 5bfbb676278..bc257e65a2e 100644 --- a/public/app/features/alerting/unified/Silences.tsx +++ b/public/app/features/alerting/unified/Silences.tsx @@ -1,4 +1,5 @@ import { Route, Switch } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { withErrorBoundary } from '@grafana/ui'; import { @@ -30,25 +31,7 @@ const Silences = () => { - {({ location }) => { - const queryParams = new URLSearchParams(location.search); - - const potentialAlertRuleMatcher = parseQueryParamMatchers(queryParams.getAll('matcher')).find( - (m) => m.name === MATCHER_ALERT_RULE_UID - ); - - const potentialRuleUid = potentialAlertRuleMatcher?.value; - - const formValues = getDefaultSilenceFormValues(defaultsFromQuery(queryParams)); - - return ( - - ); - }} + @@ -69,3 +52,23 @@ function SilencesPage() { } export default withErrorBoundary(SilencesPage, { style: 'page' }); + +type SilencesEditorComponentProps = { + selectedAlertmanager: string; +}; +const SilencesEditorComponent = ({ selectedAlertmanager }: SilencesEditorComponentProps) => { + const location = useLocation(); + const queryParams = new URLSearchParams(location.search); + + const potentialAlertRuleMatcher = parseQueryParamMatchers(queryParams.getAll('matcher')).find( + (m) => m.name === MATCHER_ALERT_RULE_UID + ); + + const potentialRuleUid = potentialAlertRuleMatcher?.value; + + const formValues = getDefaultSilenceFormValues(defaultsFromQuery(queryParams)); + + return ( + + ); +}; diff --git a/public/app/features/dashboard/containers/PublicDashboardPage.tsx b/public/app/features/dashboard/containers/PublicDashboardPage.tsx index 391863db5aa..51a231f1fef 100644 --- a/public/app/features/dashboard/containers/PublicDashboardPage.tsx +++ b/public/app/features/dashboard/containers/PublicDashboardPage.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { useEffect } from 'react'; -import { useParams } from 'react-router-dom-v5-compat'; +import { useLocation, useParams } from 'react-router-dom-v5-compat'; import { usePrevious } from 'react-use'; import { GrafanaTheme2, PageLayoutType, TimeZone } from '@grafana/data'; @@ -56,11 +56,12 @@ const Toolbar = ({ dashboard }: { dashboard: DashboardModel }) => { }; const PublicDashboardPage = (props: Props) => { - const { route, location } = props; + const { route } = props; + const location = useLocation(); const { accessToken } = useParams(); const dispatch = useDispatch(); const context = useGrafana(); - const prevProps = usePrevious(props); + const prevProps = usePrevious({ ...props, location }); const styles = useStyles2(getStyles); const dashboardState = useSelector((store) => store.dashboard); const dashboard = dashboardState.getModel();