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

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 () => {

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={<GroupIntervalIndicator seconds={group.interval} />}
     >
       <DataSourceGroupLoader groupIdentifier={groupIdentifier} expectedRulesCount={group.rules.length} />
     </ListGroup>

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 (
     <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} />

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 (
+    <Text variant="bodySmall" color="secondary">
+      <Stack direction="row" alignItems="center" gap={0.5}>
+        <Icon name="clock-nine" size="xs" /> {durationString}
+      </Stack>
+    </Text>
+  );
+};