Alerting: allow hiding alert rule column in CentralAlertHistoryScene (#110746)

allow hiding alert rule column

packages/grafana-data/src/types/pluginExtensions.ts

@@ -229,6 +229,7 @@ export type CentralAlertHistorySceneV1Props = {
   defaultLabelsFilter?: string;
   defaultTimeRange?: { from: string; to: string };
   hideFilters?: boolean;
+  hideAlertRuleColumn?: boolean;
 };
 
 export type PluginExtensionQueryEditorRowAdaptiveTelemetryV1Context = {

public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryScene.tsx

@@ -65,6 +65,7 @@ export const CentralAlertHistoryScene = ({
     to: 'now',
   },
   hideFilters,
+  hideAlertRuleColumn,
 }: CentralAlertHistorySceneV1Props = {}) => {
   //track the loading of the central alert state history
 
@@ -134,12 +135,12 @@ export const CentralAlertHistoryScene = ({
         children: [
           getEventsScenesFlexItem(),
           new SceneFlexItem({
-            body: new HistoryEventsListObject({}),
+            body: new HistoryEventsListObject({ hideAlertRuleColumn }),
           }),
         ],
       }),
     });
-  }, [defaultLabelsFilter, defaultTimeRange, hideFilters]);
+  }, [defaultLabelsFilter, defaultTimeRange, hideFilters, hideAlertRuleColumn]);
 
   // we need to call this to sync the url with the scene state
   const isUrlSyncInitialized = useUrlSync(scene);

public/app/features/alerting/unified/components/rules/central-state-history/EventListSceneObject.tsx

@@ -9,6 +9,7 @@ import {
   CustomVariable,
   SceneComponentProps,
   SceneObjectBase,
+  SceneObjectState,
   TextBoxVariable,
   VariableDependencyConfig,
   VariableValue,
@@ -55,6 +56,7 @@ interface HistoryEventsListProps {
   valueInStateToFilter: VariableValue;
   valueInStateFromFilter: VariableValue;
   addFilter: (key: string, value: string, type: FilterType) => void;
+  hideAlertRuleColumn?: boolean;
 }
 export const HistoryEventsList = ({
   timeRange,
@@ -62,6 +64,7 @@ export const HistoryEventsList = ({
   valueInStateToFilter,
   valueInStateFromFilter,
   addFilter,
+  hideAlertRuleColumn,
 }: HistoryEventsListProps) => {
   const from = timeRange?.from.unix();
   const to = timeRange?.to.unix();
@@ -114,7 +117,12 @@ export const HistoryEventsList = ({
         </Alert>
       )}
       <LoadingIndicator visible={isLoading} />
-      <HistoryLogEvents logRecords={historyRecords} addFilter={addFilter} timeRange={timeRange} />
+      <HistoryLogEvents
+        logRecords={historyRecords}
+        addFilter={addFilter}
+        timeRange={timeRange}
+        hideAlertRuleColumn={hideAlertRuleColumn}
+      />
     </Stack>
   );
 };
@@ -129,15 +137,16 @@ interface HistoryLogEventsProps {
   logRecords: LogRecord[];
   addFilter: (key: string, value: string, type: FilterType) => void;
   timeRange: TimeRange;
+  hideAlertRuleColumn?: boolean;
 }
-function HistoryLogEvents({ logRecords, addFilter, timeRange }: HistoryLogEventsProps) {
+function HistoryLogEvents({ logRecords, addFilter, timeRange, hideAlertRuleColumn }: HistoryLogEventsProps) {
   const { page, pageItems, numberOfPages, onPageChange } = usePagination(logRecords, 1, PAGE_SIZE);
   const styles = useStyles2(getStyles);
 
   return (
     <Stack direction="column" gap={0}>
       <div className={styles.headerContainer}>
-        <ListHeader />
+        <ListHeader hideAlertRuleColumn={hideAlertRuleColumn} />
 
         <div className={styles.triageButtonContainer}>
           <AITriageButtonComponent logRecords={logRecords} timeRange={timeRange} />
@@ -151,6 +160,7 @@ function HistoryLogEvents({ logRecords, addFilter, timeRange }: HistoryLogEvents
               record={record}
               addFilter={addFilter}
               timeRange={timeRange}
+              hideAlertRuleColumn={hideAlertRuleColumn}
             />
           );
         })}
@@ -161,7 +171,7 @@ function HistoryLogEvents({ logRecords, addFilter, timeRange }: HistoryLogEvents
   );
 }
 
-function ListHeader() {
+function ListHeader({ hideAlertRuleColumn }: { hideAlertRuleColumn?: boolean }) {
   const styles = useStyles2(getStyles);
   return (
     <div className={styles.mainHeader}>
@@ -175,11 +185,13 @@ function ListHeader() {
           <Trans i18nKey="alerting.central-alert-history.details.header.state">State</Trans>
         </Text>
       </div>
-      <div className={styles.alertNameCol}>
-        <Text variant="body">
-          <Trans i18nKey="alerting.central-alert-history.details.header.alert-rule">Alert rule</Trans>
-        </Text>
-      </div>
+      {!hideAlertRuleColumn && (
+        <div className={styles.alertNameCol}>
+          <Text variant="body">
+            <Trans i18nKey="alerting.central-alert-history.details.header.alert-rule">Alert rule</Trans>
+          </Text>
+        </div>
+      )}
       <div className={styles.labelsCol}>
         <Text variant="body">
           <Trans i18nKey="alerting.central-alert-history.details.header.instance">Instance</Trans>
@@ -193,8 +205,9 @@ interface EventRowProps {
   record: LogRecord;
   addFilter: (key: string, value: string, type: FilterType) => void;
   timeRange: TimeRange;
+  hideAlertRuleColumn?: boolean;
 }
-function EventRow({ record, addFilter, timeRange }: EventRowProps) {
+function EventRow({ record, addFilter, timeRange, hideAlertRuleColumn }: EventRowProps) {
   const styles = useStyles2(getStyles);
   const [isCollapsed, setIsCollapsed] = useState(true);
   function onLabelClick(label: string, value: string) {
@@ -220,9 +233,11 @@ function EventRow({ record, addFilter, timeRange }: EventRowProps) {
           <div className={styles.transitionCol}>
             <EventTransition previous={record.line.previous} current={record.line.current} addFilter={addFilter} />
           </div>
-          <div className={styles.alertNameCol}>
-            {record.line.labels ? <AlertRuleName labels={record.line.labels} ruleUID={record.line.ruleUID} /> : null}
-          </div>
+          {!hideAlertRuleColumn && (
+            <div className={styles.alertNameCol}>
+              {record.line.labels ? <AlertRuleName labels={record.line.labels} ruleUID={record.line.ruleUID} /> : null}
+            </div>
+          )}
           <div className={styles.labelsCol}>
             <AlertLabels labels={record.line.labels ?? {}} size="xs" onClick={onLabelClick} />
           </div>
@@ -521,7 +536,11 @@ export const getStyles = (theme: GrafanaTheme2) => {
  * This is a scene object that displays a list of history events.
  */
 
-export class HistoryEventsListObject extends SceneObjectBase {
+interface HistoryEventsListObjectState extends SceneObjectState {
+  hideAlertRuleColumn?: boolean;
+}
+
+export class HistoryEventsListObject extends SceneObjectBase<HistoryEventsListObjectState> {
   public static Component = HistoryEventsListObjectRenderer;
 
   protected _variableDependency = new VariableDependencyConfig(this, {
@@ -533,7 +552,7 @@ export type FilterType = 'label' | 'stateFrom' | 'stateTo';
 
 export function HistoryEventsListObjectRenderer({ model }: SceneComponentProps<HistoryEventsListObject>) {
   // This make sure the component is re-rendered when the variables change
-  model.useState();
+  const { hideAlertRuleColumn } = model.useState();
 
   const { value: timeRange } = sceneGraph.getTimeRange(model).useState(); // get time range from scene graph
 
@@ -568,6 +587,7 @@ export function HistoryEventsListObjectRenderer({ model }: SceneComponentProps<H
         addFilter={addFilter}
         valueInStateToFilter={stateToFilterVariable.state.value}
         valueInStateFromFilter={stateFromFilterVariable.state.value}
+        hideAlertRuleColumn={hideAlertRuleColumn}
       />
     );
   } else {