IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-03 20:21:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Reorder new alert and export buttons (#68418)

Browse Source 
* Add component for rule creation and dropdown

* Make each route type have a different path

* Remove unneeded import

* Fix tests

* Rename CreateRuleButton to MoreActionRuleButtons

* Remove Recording Rule option from new rule form

* Use alerting and recording for path params on new rules

* Fix tests

* Only show new button if permissions are granted

* Fix tests
This commit is contained in:
Virginia Cepeda 2023-05-31 10:56:54 -03:00 committed by GitHub
parent c2a9d48dd6
commit e796063a1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 135 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/alerting/routes.tsx
View File

@ -225,7 +225,7 @@ const unifiedRoutes: RouteDescriptor[] = [
),
},
{
path: '/alerting/new',
path: '/alerting/new/:type?',
pageClass: 'page-alerting',
roles: evaluateAccess(
[AccessControlAction.AlertingRuleCreate, AccessControlAction.AlertingRuleExternalWrite],

59
public/app/features/alerting/unified/MoreActionsRuleButtons.tsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import { useLocation } from 'react-router-dom';
import { urlUtil } from '@grafana/data';
import { Button, Dropdown, Icon, LinkButton, Menu, MenuItem } from '@grafana/ui';
import { logInfo, LogMessages } from './Analytics';
import { useRulesAccess } from './utils/accessControlHooks';
import { createUrl } from './utils/url';
interface Props {}
export function MoreActionsRuleButtons({}: Props) {
const { canCreateGrafanaRules, canCreateCloudRules, canReadProvisioning } = useRulesAccess();
const location = useLocation();
const newMenu = (
<Menu>
{(canCreateGrafanaRules || canCreateCloudRules) && (
<MenuItem
url={urlUtil.renderUrl(`alerting/new/recording`, {
returnTo: location.pathname + location.search,
})}
label="New recording rule"
/>
)}
{canReadProvisioning && (
<MenuItem
url={createUrl('/api/v1/provisioning/alert-rules/export', {
download: 'true',
format: 'yaml',
})}
label="Export all"
target="_blank"
/>
)}
</Menu>
);
return (
<>
{(canCreateGrafanaRules || canCreateCloudRules) && (
<LinkButton
href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
icon="plus"
onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
>
New alert rule
</LinkButton>
)}
<Dropdown overlay={newMenu}>
<Button variant="secondary">
More
<Icon name="angle-down" />
</Button>
</Dropdown>
</>
);
}

3
public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx
View File

@ -127,10 +127,9 @@ describe('RuleEditor recording rules', () => {
},
});
renderRuleEditor();
renderRuleEditor(undefined, true);
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
await userEvent.type(await ui.inputs.name.find(), 'my great new recording rule');
await userEvent.click(await ui.buttons.lotexRecordingRule.get());
const dataSourceSelect = ui.inputs.dataSource.get();
await userEvent.click(byRole('combobox').get(dataSourceSelect));

9
public/app/features/alerting/unified/RuleList.test.tsx
View File

@ -117,7 +117,8 @@ const ui = {
rulesFilterInput: byTestId('search-query-input'),
moreErrorsButton: byRole('button', { name: /more errors/ }),
editCloudGroupIcon: byTestId('edit-group'),
newRuleButton: byRole('link', { name: 'Create alert rule' }),
newRuleButton: byRole('link', { name: 'New alert rule' }),
moreButton: byRole('button', { name: 'More' }),
exportButton: byRole('link', { name: /export/i }),
editGroupModal: {
dialog: byRole('dialog'),
@ -697,11 +698,14 @@ describe('RuleList', () => {
renderRuleList();
await userEvent.click(ui.moreButton.get());
expect(ui.exportButton.get()).toBeInTheDocument();
});
it('Export button should not be visible when the user has no alert provisioning read permissions', async () => {
enableRBAC();
grantUserPermissions([AccessControlAction.AlertingRuleCreate, AccessControlAction.FoldersRead]);
mocks.getAllDataSourcesMock.mockReturnValue([]);
setDataSourceSrv(new MockDataSourceSrv({}));
mocks.api.fetchRules.mockResolvedValue([]);
@ -709,6 +713,7 @@ describe('RuleList', () => {
renderRuleList();
await userEvent.click(ui.moreButton.get());
expect(ui.exportButton.query()).not.toBeInTheDocument();
});
});
@ -831,7 +836,7 @@ describe('RuleList', () => {
await waitFor(() => expect(mocks.api.fetchRules).toHaveBeenCalledTimes(1));
const button = screen.getByText('Create alert rule');
const button = screen.getByText('New alert rule');
button.addEventListener('click', (event) => event.preventDefault(), false);

45
public/app/features/alerting/unified/RuleList.tsx
View File

@ -1,18 +1,17 @@
import { css } from '@emotion/css';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useAsyncFn, useInterval } from 'react-use';
import { GrafanaTheme2, urlUtil } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { logInfo } from '@grafana/runtime';
import { Button, LinkButton, useStyles2, withErrorBoundary } from '@grafana/ui';
import { Button, useStyles2, withErrorBoundary } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { useDispatch } from 'app/types';
import { CombinedRuleNamespace } from '../../../types/unified-alerting';
import { LogMessages, trackRuleListNavigation } from './Analytics';
import { trackRuleListNavigation } from './Analytics';
import { MoreActionsRuleButtons } from './MoreActionsRuleButtons';
import { AlertingPageWrapper } from './components/AlertingPageWrapper';
import { NoRulesSplash } from './components/rules/NoRulesCTA';
import { INSTANCES_DISPLAY_LIMIT } from './components/rules/RuleDetails';
@ -28,7 +27,6 @@ import { fetchAllPromAndRulerRulesAction } from './state/actions';
import { useRulesAccess } from './utils/accessControlHooks';
import { RULE_LIST_POLL_INTERVAL_MS } from './utils/constants';
import { getAllRulesSourceNames } from './utils/datasource';
import { createUrl } from './utils/url';
const VIEWS = {
groups: RuleListGroupView,
@ -43,7 +41,6 @@ const RuleList = withErrorBoundary(
const dispatch = useDispatch();
const styles = useStyles2(getStyles);
const rulesDataSourceNames = useMemo(getAllRulesSourceNames, []);
const location = useLocation();
const [expandAll, setExpandAll] = useState(false);
const onFilterCleared = useCallback(() => setExpandAll(false), []);
@ -51,8 +48,6 @@ const RuleList = withErrorBoundary(
const [queryParams] = useQueryParams();
const { filterState, hasActiveFilters } = useRulesFilter();
const { canCreateGrafanaRules, canCreateCloudRules, canReadProvisioning } = useRulesAccess();
const view = VIEWS[queryParams['view'] as keyof typeof VIEWS]
? (queryParams['view'] as keyof typeof VIEWS)
: 'groups';
@ -96,6 +91,8 @@ const RuleList = withErrorBoundary(
const combinedNamespaces: CombinedRuleNamespace[] = useCombinedRuleNamespaces();
const filteredNamespaces = useFilteredRules(combinedNamespaces, filterState);
const { canCreateGrafanaRules, canCreateCloudRules, canReadProvisioning } = useRulesAccess();
return (
// We don't want to show the Loading... indicator for the whole page.
// We show separate indicators for Grafana-managed and Cloud rules
@ -119,31 +116,11 @@ const RuleList = withErrorBoundary(
)}
<RuleStats namespaces={filteredNamespaces} />
</div>
<Stack direction="row" gap={0.5}>
{canReadProvisioning && (
<LinkButton
variant="secondary"
href={createUrl('/api/v1/provisioning/alert-rules/export', {
download: 'true',
format: 'yaml',
})}
icon="download-alt"
target="_blank"
rel="noopener"
>
Export
</LinkButton>
)}
{(canCreateGrafanaRules || canCreateCloudRules) && (
<LinkButton
href={urlUtil.renderUrl('alerting/new', { returnTo: location.pathname + location.search })}
icon="plus"
onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
>
Create alert rule
</LinkButton>
)}
</Stack>
{(canCreateGrafanaRules || canCreateCloudRules || canReadProvisioning) && (
<Stack direction="row" gap={0.5}>
<MoreActionsRuleButtons />
</Stack>
)}
</div>
</>
)}

10
public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import React, { useEffect, useMemo, useState } from 'react';
import { DeepMap, FieldError, FormProvider, useForm, useFormContext, UseFormWatch } from 'react-hook-form';
import { Link } from 'react-router-dom';
import { Link, useParams } from 'react-router-dom';
import { GrafanaTheme2 } from '@grafana/data';
import { config, logInfo } from '@grafana/runtime';
@ -28,6 +28,7 @@ import { NotificationsStep } from './NotificationsStep';
import { RuleEditorSection } from './RuleEditorSection';
import { RuleInspector } from './RuleInspector';
import { QueryAndExpressionsStep } from './query-and-alert-condition/QueryAndExpressionsStep';
import { translateRouteParamToRuleType } from './util';
const recordingRuleNameValidationPattern = {
message:
@ -81,6 +82,9 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
const [showEditYaml, setShowEditYaml] = useState(false);
const [evaluateEvery, setEvaluateEvery] = useState(existing?.group.interval ?? MINUTE);
const routeParams = useParams<{ type: string }>();
const ruleType = translateRouteParamToRuleType(routeParams.type);
const returnTo: string = (queryParams['returnTo'] as string | undefined) ?? '/alerting/list';
const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
@ -101,10 +105,10 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
queries: getDefaultQueries(),
condition: 'C',
...(queryParams['defaults'] ? JSON.parse(queryParams['defaults'] as string) : {}),
type: RuleFormType.grafana,
type: ruleType || RuleFormType.grafana,
evaluateEvery: evaluateEvery,
};
}, [existing, prefill, queryParams, evaluateEvery]);
}, [existing, prefill, queryParams, evaluateEvery, ruleType]);
const formAPI = useForm<RuleFormValues>({
mode: 'onSubmit',

22
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/AlertType.test.tsx
View File

@ -2,8 +2,10 @@ import { render } from '@testing-library/react';
import React from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import { byText } from 'testing-library-selector';
import { locationService } from '@grafana/runtime';
import { contextSrv } from 'app/core/services/context_srv';
import { configureStore } from 'app/store/configureStore';
import { AccessControlAction } from 'app/types';
@ -28,7 +30,9 @@ function renderAlertTypeStep() {
render(
<Provider store={store}>
<AlertType editingExistingRule={false} />
<Router history={locationService.getHistory()}>
<AlertType editingExistingRule={false} />
</Router>
</Provider>,
{ wrapper: FormProviderWrapper }
);
@ -36,7 +40,7 @@ function renderAlertTypeStep() {
describe('RuleTypePicker', () => {
describe('RBAC', () => {
it('Should display grafana, mimir alert and mimir recording buttons when user has rule create and write permissions', async () => {
it('Should display grafana and mimir alert when user has rule create and write permissions', async () => {
jest.spyOn(contextSrv, 'hasPermission').mockImplementation((action) => {
return [AccessControlAction.AlertingRuleCreate, AccessControlAction.AlertingRuleExternalWrite].includes(
action as AccessControlAction
@ -47,7 +51,17 @@ describe('RuleTypePicker', () => {
expect(ui.ruleTypePicker.grafanaManagedButton.get()).toBeInTheDocument();
expect(ui.ruleTypePicker.mimirOrLokiButton.get()).toBeInTheDocument();
expect(ui.ruleTypePicker.mimirOrLokiRecordingButton.get()).toBeInTheDocument();
});
it('Should not display the recording rule button', async () => {
jest.spyOn(contextSrv, 'hasPermission').mockImplementation((action) => {
return [AccessControlAction.AlertingRuleCreate, AccessControlAction.AlertingRuleExternalWrite].includes(
action as AccessControlAction
);
});
renderAlertTypeStep();
expect(ui.ruleTypePicker.mimirOrLokiRecordingButton.query()).not.toBeInTheDocument();
});
it('Should hide grafana button when user does not have rule create permission', () => {
@ -59,7 +73,7 @@ describe('RuleTypePicker', () => {
expect(ui.ruleTypePicker.grafanaManagedButton.query()).not.toBeInTheDocument();
expect(ui.ruleTypePicker.mimirOrLokiButton.get()).toBeInTheDocument();
expect(ui.ruleTypePicker.mimirOrLokiRecordingButton.get()).toBeInTheDocument();
expect(ui.ruleTypePicker.mimirOrLokiRecordingButton.query()).not.toBeInTheDocument();
});
it('Should hide mimir alert and mimir recording when user does not have rule external write permission', () => {

2
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/AlertType.tsx
View File

@ -31,7 +31,7 @@ export const AlertType = ({ editingExistingRule }: Props) => {
return (
<>
{!editingExistingRule && (
{!editingExistingRule && ruleFormType !== RuleFormType.cloudRecording && (
<Field error={errors.type?.message} invalid={!!errors.type?.message} data-testid="alert-type-picker">
<InputControl
render={({ field: { onChange } }) => (

5
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
View File

@ -186,6 +186,11 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
clearPreviewData();
if (type === RuleFormType.cloudRecording) {
const expr = getValues('expression');
if (!recordingRuleDefaultDatasource) {
return;
}
const datasourceUid =
(editingExistingRule && getDataSourceSrv().getInstanceSettings(dataSourceName)?.uid) ||
recordingRuleDefaultDatasource.uid;

17
public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
View File

@ -13,8 +13,6 @@ import { RuleFormType } from '../../../types/rule-form';
import { GrafanaManagedRuleType } from './GrafanaManagedAlert';
import { MimirFlavoredType } from './MimirOrLokiAlert';
import { RecordingRuleType } from './MimirOrLokiRecordingRule';
interface RuleTypePickerProps {
onChange: (value: RuleFormType) => void;
selected: RuleFormType;
@ -31,23 +29,20 @@ const RuleTypePicker = ({ selected, onChange, enabledTypes }: RuleTypePickerProp
const styles = useStyles2(getStyles);
const handleChange = (type: RuleFormType) => {
onChange(type);
};
return (
<>
<Stack direction="row" gap={2}>
{enabledTypes.includes(RuleFormType.grafana) && (
<GrafanaManagedRuleType selected={selected === RuleFormType.grafana} onClick={onChange} />
<GrafanaManagedRuleType selected={selected === RuleFormType.grafana} onClick={handleChange} />
)}
{enabledTypes.includes(RuleFormType.cloudAlerting) && (
<MimirFlavoredType
selected={selected === RuleFormType.cloudAlerting}
onClick={onChange}
disabled={!hasLotexDatasources}
/>
)}
{enabledTypes.includes(RuleFormType.cloudRecording) && (
<RecordingRuleType
selected={selected === RuleFormType.cloudRecording}
onClick={onChange}
onClick={handleChange}
disabled={!hasLotexDatasources}
/>
)}

10
public/app/features/alerting/unified/components/rule-editor/util.ts
View File

@ -8,6 +8,8 @@ import { isExpressionQuery } from 'app/features/expressions/guards';
import { ClassicCondition, ExpressionQueryType } from 'app/features/expressions/types';
import { AlertQuery } from 'app/types/unified-alerting-dto';
import { RuleFormType } from '../../types/rule-form';
import { createDagFromQueries, getOriginOfRefId } from './dag';
export function queriesWithUpdatedReferences(
@ -293,3 +295,11 @@ export function getStatusMessage(data: PanelData): string | undefined {
return data.error?.message ?? genericErrorMessage;
}
export function translateRouteParamToRuleType(param = ''): RuleFormType {
if (param === 'recording') {
return RuleFormType.cloudRecording;
}
return RuleFormType.grafana;
}

4
public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
View File

@ -15,8 +15,8 @@ export const NoRulesSplash = () => {
<EmptyListCTA
title="You haven`t created any alert rules yet"
buttonIcon="bell"
buttonLink={'alerting/new'}
buttonTitle="Create alert rule"
buttonLink={'alerting/new/alerting'}
buttonTitle="New alert rule"
proTip="you can also create alert rules from existing panels and queries."
proTipLink="https://grafana.com/docs/"
proTipLinkTitle="Learn more"

11
public/test/helpers/alertingRuleEditor.tsx
View File

@ -31,16 +31,19 @@ export const ui = {
// alert type buttons
grafanaManagedAlert: byRole('button', { name: /Grafana managed/ }),
lotexAlert: byRole('button', { name: /Mimir or Loki alert/ }),
lotexRecordingRule: byRole('button', { name: /Mimir or Loki recording rule/ }),
},
};
export function renderRuleEditor(identifier?: string) {
locationService.push(identifier ? `/alerting/${identifier}/edit` : `/alerting/new`);
export function renderRuleEditor(identifier?: string, recording = false) {
if (identifier) {
locationService.push(`/alerting/${identifier}/edit`);
} else {
locationService.push(`/alerting/new/${recording ? 'recording' : 'alerting'}`);
}
return render(
<TestProvider>
<Route path={['/alerting/new', '/alerting/:id/edit']} component={RuleEditor} />
<Route path={['/alerting/new/:type', '/alerting/:id/edit']} component={RuleEditor} />
</TestProvider>
);
}