Alerting: Alerts page improvements (#113172)

* Remove column header from Triage workbench

* Use md size for details Drawers

* Fix top workbench border

* Fix query filter for alert instances

* Remove the default grouping

* Update translations

public/app/features/alerting/unified/triage/Timeline.tsx

@@ -1,37 +0,0 @@
-import { scaleTime } from 'd3-scale';
-import { useMemo } from 'react';
-import { useMeasure } from 'react-use';
-
-import { Stack, Text } from '@grafana/ui';
-
-import { Domain } from './types';
-
-interface TimelineProps {
-  domain: Domain;
-}
-
-export const TimelineHeader = ({ domain }: TimelineProps) => {
-  const [ref, { width }] = useMeasure<HTMLDivElement>();
-
-  const ticks = useMemo(() => {
-    const xScale = scaleTime().domain(domain).range([0, width]).nice(0);
-    const tickFormatter = xScale.tickFormat();
-
-    return xScale.ticks(5).map((value) => ({
-      value: tickFormatter(value),
-      xOffset: xScale(value),
-    }));
-  }, [domain, width]);
-
-  return (
-    <div ref={ref} style={{ width: '100%' }}>
-      <Stack flex={1} direction="row" justifyContent="space-between">
-        {ticks.map((tick) => (
-          <Text key={`${tick.value}-${tick.xOffset}`} variant="bodySmall" color="secondary">
-            {tick.value}
-          </Text>
-        ))}
-      </Stack>
-    </div>
-  );
-};

public/app/features/alerting/unified/triage/Workbench.tsx

@@ -4,15 +4,12 @@ import { useState } from 'react';
 import { useMeasure } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { t } from '@grafana/i18n';
 import { SceneQueryRunner } from '@grafana/scenes';
 import { ScrollContainer, useSplitter, useStyles2 } from '@grafana/ui';
 import { DEFAULT_PER_PAGE_PAGINATION } from 'app/core/constants';
 
-import { EditorColumnHeader } from '../components/EditorColumnHeader';
 import LoadMoreHelper from '../rule-list/LoadMoreHelper';
 
-import { TimelineHeader } from './Timeline';
 import { WorkbenchProvider } from './WorkbenchContext';
 import { AlertRuleRow } from './rows/AlertRuleRow';
 import { FolderGroupRow } from './rows/FolderGroupRow';
@@ -141,12 +138,6 @@ export function Workbench({ domain, data, queryRunner }: WorkbenchProps) {
           <SummaryStatsReact />
           <SummaryChartReact />
         </div>
-        <div className={cx(styles.groupItemWrapper(leftColumnWidth), styles.headerContainer)}>
-          <EditorColumnHeader label={t('alerting.left-column.label-instances', 'Instances')} />
-          <EditorColumnHeader>
-            <TimelineHeader domain={domain} />
-          </EditorColumnHeader>
-        </div>
         {/* Render actual data */}
         <div className={styles.virtualizedContainer}>
           <WorkbenchProvider leftColumnWidth={leftColumnWidth} domain={domain} queryRunner={queryRunner}>

public/app/features/alerting/unified/triage/instance-details/InstanceDetailsDrawer.tsx

@@ -84,7 +84,7 @@ export function InstanceDetailsDrawer({ ruleUID, instanceLabels, onClose }: Inst
     <Drawer
       title={<InstanceDetailsDrawerTitle instanceLabels={instanceLabels} rule={rule.grafana_alert} />}
       onClose={onClose}
-      size="lg"
+      size="md"
     >
       <Stack direction="column" gap={3}>
         <Stack justifyContent="flex-end">

public/app/features/alerting/unified/triage/rows/GenericRow.tsx

@@ -108,10 +108,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       position: 'relative',
       flexBasis: 0,
-      border: 'solid 1px transparent',
-      borderBottom: `1px solid ${theme.colors.border.medium}`,
-      borderLeft: `1px solid ${theme.colors.border.medium}`,
-      borderRight: `1px solid ${theme.colors.border.medium}`,
+      border: `1px solid ${theme.colors.border.medium}`,
     }),
     leftColumn: css({
       overflow: 'hidden',

public/app/features/alerting/unified/triage/rule-details/RuleDetailsDrawer.tsx

@@ -48,7 +48,7 @@ export function RuleDetailsDrawer({ ruleUID, onClose }: RuleDetailsDrawerProps)
 
   if (error) {
     return (
-      <Drawer title={t('alerting.triage.rule-details.title', 'Rule Details')} onClose={onClose} size="lg">
+      <Drawer title={t('alerting.triage.rule-details.title', 'Rule Details')} onClose={onClose} size="md">
         <ErrorContent error={error} />
       </Drawer>
     );
@@ -56,7 +56,7 @@ export function RuleDetailsDrawer({ ruleUID, onClose }: RuleDetailsDrawerProps)
 
   if (loading || !rule) {
     return (
-      <Drawer title={t('alerting.triage.rule-details.title', 'Rule Details')} onClose={onClose} size="lg">
+      <Drawer title={t('alerting.triage.rule-details.title', 'Rule Details')} onClose={onClose} size="md">
         <div>{t('alerting.common.loading', 'Loading...')}</div>
       </Drawer>
     );
@@ -69,7 +69,6 @@ export function RuleDetailsDrawer({ ruleUID, onClose }: RuleDetailsDrawerProps)
   return (
     <Drawer
       onClose={onClose}
-      subtitle={`HELLO`}
       title={
         <Stack direction="column">
           <Stack direction="row" alignItems="center">
@@ -104,7 +103,7 @@ export function RuleDetailsDrawer({ ruleUID, onClose }: RuleDetailsDrawerProps)
           <Text color="secondary">{t('alerting.triage.rule-details.subtitle', 'Rule details and conditions')}</Text>
         </Stack>
       }
-      size="lg"
+      size="md"
       tabs={
         <TabsBar>
           <Tab

public/app/features/alerting/unified/triage/scene/AlertRuleInstances.tsx

@@ -12,7 +12,7 @@ import { METRIC_NAME } from '../constants';
 import { GenericRow } from '../rows/GenericRow';
 import { InstanceRow } from '../rows/InstanceRow';
 
-import { getDataQuery } from './utils';
+import { getDataQuery, useQueryFilter } from './utils';
 
 function extractInstancesFromData(series: DataFrame[] | undefined) {
   if (!series) {
@@ -47,9 +47,11 @@ type AlertRuleInstancesProps = {
 export function AlertRuleInstances({ ruleUID, depth = 0 }: AlertRuleInstancesProps) {
   const { leftColumnWidth } = useWorkbenchContext();
   const [timeRange] = useTimeRange();
+  const queryFilter = useQueryFilter();
 
+  const filters = queryFilter ? `grafana_rule_uid="${ruleUID}",${queryFilter}` : `grafana_rule_uid="${ruleUID}"`;
   const query = getDataQuery(
-    `count without (alertname, grafana_alertstate, grafana_folder, grafana_rule_uid) (${METRIC_NAME}{grafana_rule_uid="${ruleUID}"})`,
+    `count without (alertname, grafana_alertstate, grafana_folder, grafana_rule_uid) (${METRIC_NAME}{${filters}})`,
     { format: 'timeseries', legendFormat: '{{alertstate}}' }
   );
 

public/app/features/alerting/unified/triage/scene/TriageScene.tsx

@@ -41,7 +41,6 @@ export const triageScene = new EmbeddedSceneWithContext({
         },
         allowCustomValue: true,
         applyMode: 'manual',
-        value: 'grafana_folder',
       }),
       new AdHocFiltersVariable({
         name: 'filters',

public/locales/en-US/grafana.json

@@ -1720,9 +1720,6 @@
       "placeholder-key": "key",
       "placeholder-value": "value"
     },
-    "left-column": {
-      "label-instances": "Instances"
-    },
     "link-to-contact-points": {
       "aria-label-view-or-create-contact-points": "View or create contact points",
       "view-or-create-contact-points": "View or create contact points"