mirror of https://github.com/grafana/grafana
drclau/unistor/namespace_authorizer
gamab
8 months ago
commit
8686c46be5
@ -0,0 +1,51 @@ |
||||
import { useLocation } from 'react-router-dom-v5-compat'; |
||||
|
||||
import { withErrorBoundary } from '@grafana/ui'; |
||||
import { |
||||
defaultsFromQuery, |
||||
getDefaultSilenceFormValues, |
||||
} from 'app/features/alerting/unified/components/silences/utils'; |
||||
import { MATCHER_ALERT_RULE_UID } from 'app/features/alerting/unified/utils/constants'; |
||||
import { parseQueryParamMatchers } from 'app/features/alerting/unified/utils/matchers'; |
||||
|
||||
import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper'; |
||||
import { GrafanaAlertmanagerDeliveryWarning } from './components/GrafanaAlertmanagerDeliveryWarning'; |
||||
import { SilencesEditor } from './components/silences/SilencesEditor'; |
||||
import { useAlertmanager } from './state/AlertmanagerContext'; |
||||
|
||||
const SilencesEditorComponent = () => { |
||||
const location = useLocation(); |
||||
const queryParams = new URLSearchParams(location.search); |
||||
const { selectedAlertmanager = '' } = useAlertmanager(); |
||||
const potentialAlertRuleMatcher = parseQueryParamMatchers(queryParams.getAll('matcher')).find( |
||||
(m) => m.name === MATCHER_ALERT_RULE_UID |
||||
); |
||||
|
||||
const potentialRuleUid = potentialAlertRuleMatcher?.value; |
||||
const formValues = getDefaultSilenceFormValues(defaultsFromQuery(queryParams)); |
||||
|
||||
return ( |
||||
<> |
||||
<GrafanaAlertmanagerDeliveryWarning currentAlertmanager={selectedAlertmanager} /> |
||||
<SilencesEditor |
||||
formValues={formValues} |
||||
alertManagerSourceName={selectedAlertmanager} |
||||
ruleUid={potentialRuleUid} |
||||
/> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
function NewSilencePage() { |
||||
const pageNav = { |
||||
id: 'silence-new', |
||||
text: 'Silence alert rule', |
||||
subTitle: 'Configure silences to stop notifications from a particular alert rule', |
||||
}; |
||||
return ( |
||||
<AlertmanagerPageWrapper navId="silences" pageNav={pageNav} accessType="instance"> |
||||
<SilencesEditorComponent /> |
||||
</AlertmanagerPageWrapper> |
||||
); |
||||
} |
||||
export default withErrorBoundary(NewSilencePage, { style: 'page' }); |
||||
@ -1,74 +0,0 @@ |
||||
import { Route, Switch } from 'react-router-dom'; |
||||
import { useLocation } from 'react-router-dom-v5-compat'; |
||||
|
||||
import { withErrorBoundary } from '@grafana/ui'; |
||||
import { |
||||
defaultsFromQuery, |
||||
getDefaultSilenceFormValues, |
||||
} from 'app/features/alerting/unified/components/silences/utils'; |
||||
import { MATCHER_ALERT_RULE_UID } from 'app/features/alerting/unified/utils/constants'; |
||||
import { parseQueryParamMatchers } from 'app/features/alerting/unified/utils/matchers'; |
||||
|
||||
import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper'; |
||||
import { GrafanaAlertmanagerDeliveryWarning } from './components/GrafanaAlertmanagerDeliveryWarning'; |
||||
import ExistingSilenceEditor, { SilencesEditor } from './components/silences/SilencesEditor'; |
||||
import SilencesTable from './components/silences/SilencesTable'; |
||||
import { useSilenceNavData } from './hooks/useSilenceNavData'; |
||||
import { useAlertmanager } from './state/AlertmanagerContext'; |
||||
|
||||
const Silences = () => { |
||||
const { selectedAlertmanager } = useAlertmanager(); |
||||
|
||||
if (!selectedAlertmanager) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<GrafanaAlertmanagerDeliveryWarning currentAlertmanager={selectedAlertmanager} /> |
||||
<Switch> |
||||
<Route exact path="/alerting/silences"> |
||||
<SilencesTable alertManagerSourceName={selectedAlertmanager} /> |
||||
</Route> |
||||
<Route exact path="/alerting/silence/new"> |
||||
<SilencesEditorComponent selectedAlertmanager={selectedAlertmanager} /> |
||||
</Route> |
||||
<Route exact path="/alerting/silence/:id/edit"> |
||||
<ExistingSilenceEditor alertManagerSourceName={selectedAlertmanager} /> |
||||
</Route> |
||||
</Switch> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
function SilencesPage() { |
||||
const pageNav = useSilenceNavData(); |
||||
|
||||
return ( |
||||
<AlertmanagerPageWrapper navId="silences" pageNav={pageNav} accessType="instance"> |
||||
<Silences /> |
||||
</AlertmanagerPageWrapper> |
||||
); |
||||
} |
||||
|
||||
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 ( |
||||
<SilencesEditor formValues={formValues} alertManagerSourceName={selectedAlertmanager} ruleUid={potentialRuleUid} /> |
||||
); |
||||
}; |
||||
@ -1,40 +0,0 @@ |
||||
import { render } from '@testing-library/react'; |
||||
import { useMatch } from 'react-router-dom-v5-compat'; |
||||
|
||||
import { useSilenceNavData } from './useSilenceNavData'; |
||||
|
||||
jest.mock('react-router-dom-v5-compat', () => ({ |
||||
...jest.requireActual('react-router-dom-v5-compat'), |
||||
useMatch: jest.fn(), |
||||
})); |
||||
|
||||
const setup = () => { |
||||
let result: ReturnType<typeof useSilenceNavData>; |
||||
function TestComponent() { |
||||
result = useSilenceNavData(); |
||||
return null; |
||||
} |
||||
|
||||
render(<TestComponent />); |
||||
|
||||
return { result }; |
||||
}; |
||||
describe('useSilenceNavData', () => { |
||||
it('should return correct nav data when route is "/alerting/silence/new"', () => { |
||||
(useMatch as jest.Mock).mockImplementation((param) => param === '/alerting/silence/new'); |
||||
const { result } = setup(); |
||||
|
||||
expect(result).toMatchObject({ |
||||
text: 'Silence alert rule', |
||||
}); |
||||
}); |
||||
|
||||
it('should return correct nav data when route is "/alerting/silence/:id/edit"', () => { |
||||
(useMatch as jest.Mock).mockImplementation((param) => param === '/alerting/silence/:id/edit'); |
||||
const { result } = setup(); |
||||
|
||||
expect(result).toMatchObject({ |
||||
text: 'Edit silence', |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,34 +0,0 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { useMatch } from 'react-router-dom-v5-compat'; |
||||
|
||||
import { NavModelItem } from '@grafana/data'; |
||||
|
||||
const defaultPageNav: Partial<NavModelItem> = { |
||||
icon: 'bell-slash', |
||||
}; |
||||
|
||||
export function useSilenceNavData() { |
||||
const [pageNav, setPageNav] = useState<NavModelItem | undefined>(); |
||||
const isNewPath = useMatch('/alerting/silence/new'); |
||||
const isEditPath = useMatch('/alerting/silence/:id/edit'); |
||||
|
||||
useEffect(() => { |
||||
if (isNewPath) { |
||||
setPageNav({ |
||||
...defaultPageNav, |
||||
id: 'silence-new', |
||||
text: 'Silence alert rule', |
||||
subTitle: 'Configure silences to stop notifications from a particular alert rule', |
||||
}); |
||||
} else if (isEditPath) { |
||||
setPageNav({ |
||||
...defaultPageNav, |
||||
id: 'silence-edit', |
||||
text: 'Edit silence', |
||||
subTitle: 'Recreate existing silence to stop notifications from a particular alert rule', |
||||
}); |
||||
} |
||||
}, [isEditPath, isNewPath]); |
||||
|
||||
return pageNav; |
||||
} |
||||
Loading…
Reference in new issue