diff --git a/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx b/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx index 54eb489cb73..19918e21d7e 100644 --- a/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx +++ b/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx @@ -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 () => { diff --git a/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx b/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx index 2be1e91a3a3..950c460d1e2 100644 --- a/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx +++ b/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx @@ -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={} > diff --git a/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx b/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx index 9fbd32edc35..43a81389079 100644 --- a/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx +++ b/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx @@ -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 ( } + href={detailsLink} isOpen={false} > diff --git a/public/app/features/alerting/unified/rule-list/components/GroupIntervalMetadata.tsx b/public/app/features/alerting/unified/rule-list/components/GroupIntervalMetadata.tsx new file mode 100644 index 00000000000..bdf2995e05b --- /dev/null +++ b/public/app/features/alerting/unified/rule-list/components/GroupIntervalMetadata.tsx @@ -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 ( + + + {durationString} + + + ); +};