root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 250 Packages Projects Releases Wiki Activity

Alerting: Add group interval metadata to new list view (#105737)

This commit is contained in:
Gilles De Mey 2025-05-21 17:10:43 +02:00 committed by GitHub
parent d8812388cf
commit cb94043b41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/alerting/unified/rule-list/GroupedView.test.tsx
View File

@ -48,6 +48,10 @@ describe('RuleList - GroupedView', () => {
expect(mimirSection).toBeInTheDocument();
expect(prometheusSection).toBeInTheDocument();
// assert if namespace and groups have all of the metadata
expect(within(mimirSection).getByRole('heading', { name: 'test-mimir-namespace' })).toBeInTheDocument();
expect(within(mimirSection).getByRole('treeitem', { name: 'test-group-1 10s' })).toBeInTheDocument();
});
it('should paginate through groups', async () => {

2
public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx
View File

@ -11,6 +11,7 @@ import { groups } from '../utils/navigation';
import { DataSourceGroupLoader } from './DataSourceGroupLoader';
import { DataSourceSection, DataSourceSectionProps } from './components/DataSourceSection';
import { GroupIntervalIndicator } from './components/GroupIntervalMetadata';
import { ListGroup } from './components/ListGroup';
import { ListSection } from './components/ListSection';
import { LoadMoreButton } from './components/LoadMoreButton';
@ -114,6 +115,7 @@ function RuleGroupListItem({ rulesSourceIdentifier, group, namespaceName }: Rule
name={group.name}
href={groups.detailsPageLink(rulesSourceIdentifier.uid, namespaceName, group.name)}
isOpen={false}
metaRight={<GroupIntervalIndicator seconds={group.interval} />}
>
<DataSourceGroupLoader groupIdentifier={groupIdentifier} expectedRulesCount={group.rules.length} />
</ListGroup>

6
public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx
View File

@ -15,6 +15,7 @@ import { groups } from '../utils/navigation';
import { GrafanaGroupLoader } from './GrafanaGroupLoader';
import { DataSourceSection } from './components/DataSourceSection';
import { GroupIntervalIndicator } from './components/GroupIntervalMetadata';
import { ListGroup } from './components/ListGroup';
import { ListSection } from './components/ListSection';
import { LoadMoreButton } from './components/LoadMoreButton';
@ -112,11 +113,14 @@ export function GrafanaRuleGroupListItem({ group, namespaceName }: GrafanaRuleGr
[group.name, group.folderUid]
);
const detailsLink = groups.detailsPageLink(GRAFANA_RULES_SOURCE_NAME, group.folderUid, group.name);
return (
<ListGroup
key={group.name}
name={group.name}
href={groups.detailsPageLink(GRAFANA_RULES_SOURCE_NAME, group.folderUid, group.name)}
metaRight={<GroupIntervalIndicator seconds={group.interval} />}
href={detailsLink}
isOpen={false}
>
<GrafanaGroupLoader groupIdentifier={groupIdentifier} namespaceName={namespaceName} />

22
public/app/features/alerting/unified/rule-list/components/GroupIntervalMetadata.tsx Normal file
View File

@ -0,0 +1,22 @@
import { Icon, Stack, Text } from '@grafana/ui';
import { formatPrometheusDuration } from '../../utils/time';
interface GroupIntervalIndicatorProps {
seconds: number;
}
/*
* @TODO maybe make this more generic by accepting props to change size and color?
*/
export const GroupIntervalIndicator = ({ seconds }: GroupIntervalIndicatorProps) => {
const durationString = formatPrometheusDuration(seconds * 1000);
return (
<Text variant="bodySmall" color="secondary">
<Stack direction="row" alignItems="center" gap={0.5}>
<Icon name="clock-nine" size="xs" /> {durationString}
</Stack>
</Text>
);
};