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: persist error dismissal to localstorage (#43406)

Browse Source
This commit is contained in:
Gilles De Mey
2021-12-28 20:56:43 +01:00
committed by GitHub
parent 8e6d6af744
commit 43c81ddd23
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/app/features/alerting/unified/components/rules/RuleListErrors.tsx
View File

@@ -1,16 +1,17 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data'; import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
import { Alert, Button, useStyles2 } from '@grafana/ui'; import { Alert, Button, Tooltip, useStyles2 } from '@grafana/ui';
import { SerializedError } from '@reduxjs/toolkit'; import { SerializedError } from '@reduxjs/toolkit';
import pluralize from 'pluralize'; import pluralize from 'pluralize';
import React, { useMemo, ReactElement, useState } from 'react'; import React, { useMemo, ReactElement, useState, FC } from 'react';
import { useLocalStorage } from 'react-use';
import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector'; import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
import { getRulesDataSources, GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource'; import { getRulesDataSources, GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
import { isRulerNotSupportedResponse } from '../../utils/rules'; import { isRulerNotSupportedResponse } from '../../utils/rules';
export function RuleListErrors(): ReactElement { export function RuleListErrors(): ReactElement {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const [closed, setClosed] = useState(false); const [closed, setClosed] = useLocalStorage('grafana.unifiedalerting.hideErrors', false);
const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules); const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules);
const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules); const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
@@ -63,6 +64,9 @@ export function RuleListErrors(): ReactElement {
return ( return (
<> <>
{!!errors.length && closed && (
<ErrorSummaryButton count={errors.length} onClick={() => setClosed((closed) => !closed)} />
)}
{!!errors.length && !closed && ( {!!errors.length && !closed && (
<Alert <Alert
data-testid="cloud-rulessource-errors" data-testid="cloud-rulessource-errors"
@@ -93,8 +97,31 @@ export function RuleListErrors(): ReactElement {
); );
} }
interface ErrorSummaryProps {
count: number;
onClick: () => void;
}
const ErrorSummaryButton: FC<ErrorSummaryProps> = ({ count, onClick }) => {
const styles = useStyles2(getStyles);
return (
<div className={styles.floatRight}>
<Tooltip content="Show all errors">
<Button fill="text" variant="destructive" icon="exclamation-triangle" onClick={onClick}>
{count > 1 ? <>{count} errors</> : <>1 error</>}
</Button>
</Tooltip>
</div>
);
};
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
moreButton: css` moreButton: css`
padding: 0; padding: 0;
`, `,
floatRight: css`
display: flex;
justify-content: flex-end;
`,
}); });