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 alert list panel showing firing alerts with no instances (#50069)

Browse Source
This commit is contained in:
Gilles De Mey
2022-06-02 15:44:03 +02:00
committed by GitHub
parent 8ad1f4f9be
commit 5191870c24
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/app/plugins/panel/alertlist/AlertInstances.tsx
View File

@@ -1,6 +1,7 @@
import { css } from '@emotion/css';
import { noop } from 'lodash';
import pluralize from 'pluralize';
import React, { FC, useCallback, useMemo, useState } from 'react';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { GrafanaTheme2, PanelProps } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
@@ -31,12 +32,24 @@ export const AlertInstances: FC<Props> = ({ alerts, options }) => {
[alerts, options]
);
const hiddenInstances = alerts.length - filteredAlerts.length;
const uncollapsible = filteredAlerts.length > 0;
const toggleShowInstances = uncollapsible ? toggleDisplayInstances : noop;
useEffect(() => {
if (filteredAlerts.length === 0) {
setDisplayInstances(false);
}
}, [filteredAlerts]);
return (
<div>
{options.groupMode === GroupMode.Default && (
<div className={styles.instance} onClick={() => toggleDisplayInstances()}>
<Icon name={displayInstances ? 'angle-down' : 'angle-right'} size={'md'} />
<div className={uncollapsible ? styles.clickable : ''} onClick={() => toggleShowInstances()}>
{uncollapsible && <Icon name={displayInstances ? 'angle-down' : 'angle-right'} size={'md'} />}
<span>{`${filteredAlerts.length} ${pluralize('instance', filteredAlerts.length)}`}</span>
{hiddenInstances > 0 && <span>, {`${hiddenInstances} hidden by filters`}</span>}
</div>
)}
{displayInstances && <AlertInstancesTable instances={filteredAlerts} />}
@@ -45,7 +58,7 @@ export const AlertInstances: FC<Props> = ({ alerts, options }) => {
};
const getStyles = (_: GrafanaTheme2) => ({
instance: css`
clickable: css`
cursor: pointer;
`,
});

20
public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
View File

@@ -60,7 +60,7 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
[props, promRulesRequests]
);
const noAlertsMessage = rules.length ? '' : 'No alerts';
const noAlertsMessage = rules.length === 0 ? 'No alerts matching filters' : undefined;
if (
!contextSrv.hasPermission(AccessControlAction.AlertingRuleRead) &&
@@ -122,15 +122,15 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRule
name.toLocaleLowerCase().includes(replacedName.toLocaleLowerCase())
);
}
if (Object.values(options.stateFilter).some((value) => value)) {
filteredRules = filteredRules.filter((rule) => {
return (
(options.stateFilter.firing && rule.rule.state === PromAlertingRuleState.Firing) ||
(options.stateFilter.pending && rule.rule.state === PromAlertingRuleState.Pending) ||
(options.stateFilter.inactive && rule.rule.state === PromAlertingRuleState.Inactive)
);
});
}
filteredRules = filteredRules.filter((rule) => {
return (
(options.stateFilter.firing && rule.rule.state === PromAlertingRuleState.Firing) ||
(options.stateFilter.pending && rule.rule.state === PromAlertingRuleState.Pending) ||
(options.stateFilter.inactive && rule.rule.state === PromAlertingRuleState.Inactive)
);
});
if (options.alertInstanceLabelFilter) {
const replacedLabelFilter = replaceVariables(options.alertInstanceLabelFilter);
const matchers = parseMatchers(replacedLabelFilter);