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}
+
+
+ );
+};