IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Fix action buttons label and placement in several views following standard and being consistent with the rest of the ui (#67799)

Browse Source 
* Fix action buttons label and placement in several views following standard and being consistent with the rest of the ui

* Update public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>

* Fix secondary buttons to not have outline

---------

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
This commit is contained in:
Sonia Aguilar 2023-05-04 17:05:26 +02:00 committed by GitHub
parent 2bef09bfcb
commit 49ff85ef54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 57 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -125,7 +125,7 @@ const ui = {
intervalInput: byRole('textbox', {
name: /Rule group evaluation interval Evaluation interval should be smaller or equal to 'For' values for existing rules in this group./i,
}),
saveButton: byRole('button', { name: /Save changes/ }),
saveButton: byRole('button', { name: /Save evaluation interval/ }),
},
};

2
public/app/features/alerting/unified/Silences.test.tsx
View File

@ -68,7 +68,7 @@ const ui = {
matcherOperatorSelect: byLabelText('operator'),
matcherOperator: (operator: MatcherOperator) => byText(operator, { exact: true }),
addMatcherButton: byRole('button', { name: 'Add matcher' }),
submit: byText('Submit'),
submit: byText(/save silence/i),
createdBy: byText(/created by \*/i),
},
};

4
public/app/features/alerting/unified/components/admin/ConfigEditor.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Button, ConfirmModal, TextArea, HorizontalGroup, Field, Form } from '@grafana/ui';
import { Button, ConfirmModal, Field, Form, HorizontalGroup, TextArea } from '@grafana/ui';
import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
@ -60,7 +60,7 @@ export const ConfigEditor = ({
<HorizontalGroup>
<Button type="submit" variant="primary" disabled={loading}>
Save
Save configuration
</Button>
{onReset && (
<Button type="button" disabled={loading} variant="destructive" onClick={onReset}>

10
public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx
View File

@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { GrafanaTheme2, NavModelItem } from '@grafana/data';
import { Alert, Field, FieldSet, Input, Button, LinkButton, useStyles2 } from '@grafana/ui';
import { Alert, Button, Field, FieldSet, Input, LinkButton, useStyles2 } from '@grafana/ui';
import {
AlertmanagerConfig,
AlertManagerCortexConfig,
@ -151,6 +151,9 @@ const MuteTimingForm = ({ muteTiming, showError, provenance }: Props) => {
/>
</Field>
<MuteTimingTimeInterval />
<Button type="submit" className={styles.submitButton}>
Save mute timing
</Button>
<LinkButton
type="button"
variant="secondary"
@ -158,9 +161,6 @@ const MuteTimingForm = ({ muteTiming, showError, provenance }: Props) => {
>
Cancel
</LinkButton>
<Button type="submit" className={styles.submitButton}>
{muteTiming ? 'Save' : 'Submit'}
</Button>
</FieldSet>
</form>
</FormProvider>
@ -174,7 +174,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: 400px;
`,
submitButton: css`
margin-left: ${theme.spacing(1)};
margin-right: ${theme.spacing(1)};
`,
});

2
public/app/features/alerting/unified/components/notification-policies/Modals.tsx
View File

@ -62,7 +62,7 @@ const useAddPolicyModal = (
onSubmit={(newRoute) => parentRoute && handleAdd(newRoute, parentRoute)}
actionButtons={
<Modal.ButtonRow>
<Button type="submit">Add policy</Button>
<Button type="submit">Save policy</Button>
<Button type="button" variant="secondary" onClick={handleDismiss}>
Cancel
</Button>

1
public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
View File

@ -212,7 +212,6 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
href={makeAMLink('alerting/notifications', alertManagerSourceName)}
variant="secondary"
type="button"
fill="outline"
>
Cancel
</LinkButton>

3
public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import React, { useCallback } from 'react';
import { useForm, FormProvider, FieldErrors, Validate } from 'react-hook-form';
import { FieldErrors, FormProvider, useForm, Validate } from 'react-hook-form';
import { GrafanaTheme2 } from '@grafana/data';
import { Alert, Button, Field, Input, LinkButton, useStyles2 } from '@grafana/ui';
@ -175,7 +175,6 @@ export function ReceiverForm<R extends ChannelValues>({
)}
<LinkButton
disabled={loading}
fill="outline"
variant="secondary"
data-testid="cancel-button"
href={makeAMLink('alerting/notifications', alertManagerSourceName)}

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

@ -4,8 +4,8 @@ import { DeepMap, FieldError, FormProvider, useForm, useFormContext, UseFormWatc
import { Link } from 'react-router-dom';
import { GrafanaTheme2 } from '@grafana/data';
import { logInfo, config } from '@grafana/runtime';
import { Button, ConfirmModal, CustomScrollbar, Spinner, useStyles2, HorizontalGroup, Field, Input } from '@grafana/ui';
import { config, logInfo } from '@grafana/runtime';
import { Button, ConfirmModal, CustomScrollbar, Field, HorizontalGroup, Input, Spinner, useStyles2 } from '@grafana/ui';
import { useAppNotification } from 'app/core/copy/appNotification';
import { contextSrv } from 'app/core/core';
import { useCleanup } from 'app/core/hooks/useCleanup';
@ -198,14 +198,26 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
<FormProvider {...formAPI}>
<form onSubmit={(e) => e.preventDefault()} className={styles.form}>
<HorizontalGroup height="auto" justify="flex-end">
<Button
variant="primary"
type="button"
onClick={handleSubmit((values) => submit(values, false), onInvalid)}
disabled={submitState.loading}
>
{submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
Save rule
</Button>
<Button
variant="primary"
type="button"
onClick={handleSubmit((values) => submit(values, true), onInvalid)}
disabled={submitState.loading}
>
{submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
Save rule and exit
</Button>
<Link to={returnTo}>
<Button
variant="secondary"
disabled={submitState.loading}
type="button"
fill="outline"
onClick={cancelRuleCreation}
>
<Button variant="secondary" disabled={submitState.loading} type="button" onClick={cancelRuleCreation}>
Cancel
</Button>
</Link>
@ -224,24 +236,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
Edit YAML
</Button>
)}
<Button
variant="primary"
type="button"
onClick={handleSubmit((values) => submit(values, false), onInvalid)}
disabled={submitState.loading}
>
{submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
Save
</Button>
<Button
variant="primary"
type="button"
onClick={handleSubmit((values) => submit(values, true), onInvalid)}
disabled={submitState.loading}
>
{submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
Save and exit
</Button>
</HorizontalGroup>
<div className={styles.contentOuter}>
<CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>

18
public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
View File

@ -6,15 +6,15 @@ import { FixedSizeList } from 'react-window';
import { GrafanaTheme2 } from '@grafana/data/src';
import {
FilterInput,
LoadingPlaceholder,
useStyles2,
Icon,
Modal,
Button,
Alert,
Button,
clearButtonStyles,
FilterInput,
Icon,
LoadingPlaceholder,
Modal,
Tooltip,
useStyles2,
} from '@grafana/ui';
import { dashboardApi } from '../../api/dashboardApi';
@ -230,9 +230,6 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
</div>
</div>
<Modal.ButtonRow>
<Button type="button" variant="secondary" onClick={onDismiss}>
Cancel
</Button>
<Button
type="button"
variant="primary"
@ -245,6 +242,9 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
>
Confirm
</Button>
<Button type="button" variant="secondary" onClick={onDismiss}>
Cancel
</Button>
</Modal.ButtonRow>
</Modal>
);

14
public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx
View File

@ -374,21 +374,15 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
)}
<div className={styles.modalButtons}>
<Modal.ButtonRow>
<Button
variant="secondary"
type="button"
disabled={loading}
onClick={() => onClose(false)}
fill="outline"
>
Close
</Button>
<Button
type="button"
disabled={!isDirty || loading}
onClick={handleSubmit((values) => onSubmit(values), onInvalid)}
>
{loading ? 'Saving...' : 'Save changes'}
{loading ? 'Saving...' : 'Save evaluation interval'}
</Button>
<Button variant="secondary" type="button" disabled={loading} onClick={() => onClose(false)}>
Cancel
</Button>
</Modal.ButtonRow>
</div>

6
public/app/features/alerting/unified/components/rules/RulesGroup.test.tsx
View File

@ -166,11 +166,11 @@ describe('Rules group tests', () => {
await userEvent.click(ui.editGroupButton.get());
expect(screen.getByText('Close')).toBeInTheDocument();
expect(screen.getByText('Cancel')).toBeInTheDocument();
await userEvent.click(screen.getByText('Close'));
await userEvent.click(screen.getByText('Cancel'));
expect(screen.queryByText('Close')).not.toBeInTheDocument();
expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
expect(logInfo).toHaveBeenCalledWith(LogMessages.leavingRuleGroupEdit);
});
});

20
public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
View File

@ -1,17 +1,17 @@
import { css, cx } from '@emotion/css';
import { isEqual, pickBy } from 'lodash';
import React, { useMemo, useState } from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import { FormProvider, useForm } from 'react-hook-form';
import { useDebounce } from 'react-use';
import {
DefaultTimeZone,
parseDuration,
intervalToAbbreviatedDurationString,
addDurationToDate,
dateTime,
isValidDate,
DefaultTimeZone,
GrafanaTheme2,
intervalToAbbreviatedDurationString,
isValidDate,
parseDuration,
} from '@grafana/data';
import { config } from '@grafana/runtime';
import { Button, Field, FieldSet, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
@ -23,7 +23,7 @@ import { useURLSearchParams } from '../../hooks/useURLSearchParams';
import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
import { createOrUpdateSilenceAction } from '../../state/actions';
import { SilenceFormFields } from '../../types/silence-form';
import { matcherToMatcherField, matcherFieldToMatcher } from '../../utils/alertmanager';
import { matcherFieldToMatcher, matcherToMatcherField } from '../../utils/alertmanager';
import { parseQueryParamMatchers } from '../../utils/matchers';
import { makeAMLink } from '../../utils/misc';
import { initialAsyncRequestState } from '../../utils/redux';
@ -246,12 +246,8 @@ export const SilencesEditor = ({ silence, alertManagerSourceName }: Props) => {
Saving...
</Button>
)}
{!loading && <Button type="submit">Submit</Button>}
<LinkButton
href={makeAMLink('alerting/silences', alertManagerSourceName)}
variant={'secondary'}
fill="outline"
>
{!loading && <Button type="submit">Save silence</Button>}
<LinkButton href={makeAMLink('alerting/silences', alertManagerSourceName)} variant={'secondary'}>
Cancel
</LinkButton>
</div>

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

@ -25,7 +25,7 @@ export const ui = {
expr: byTestId('expr'),
},
buttons: {
save: byRole('button', { name: 'Save' }),
save: byRole('button', { name: 'Save rule' }),
addAnnotation: byRole('button', { name: /Add info/ }),
addLabel: byRole('button', { name: /Add label/ }),
// alert type buttons