add paused badge

public/app/features/alerting/unified/components/rule-viewer/PausedBadge.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Icon, Stack, Text } from '@grafana/ui';
+
+export default function PausedBadge() {
+  return (
+    <Text variant="bodySmall" color="warning">
+      <Stack direction="row" alignItems={'center'} gap={0.25} wrap={'nowrap'} flex={'0 0 auto'}>
+        <Icon name="pause" size="xs" /> Paused
+      </Stack>
+    </Text>
+  );
+}

public/app/features/alerting/unified/components/rule-viewer/RuleViewer.tsx

@@ -6,7 +6,6 @@ import { NavModelItem, UrlQueryValue } from '@grafana/data';
 import { Alert, LinkButton, Stack, TabContent, Text, TextLink, useStyles2 } from '@grafana/ui';
 import { PageInfoItem } from 'app/core/components/Page/types';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
-import InfoPausedRule from 'app/features/alerting/unified/components/InfoPausedRule';
 import { CombinedRule, RuleHealth, RuleIdentifier } from 'app/types/unified-alerting';
 import { PromAlertingRuleState, PromRuleType } from 'app/types/unified-alerting-dto';
 
@@ -31,6 +30,7 @@ import { RedirectToCloneRule } from '../rules/CloneRule';
 import { useAlertRulePageActions } from './Actions';
 import { useDeleteModal } from './DeleteModal';
 import { FederatedRuleWarning } from './FederatedRuleWarning';
+import PausedBadge from './PausedBadge';
 import { useAlertRule } from './RuleContext';
 import { RecordingBadge, StateBadge } from './StateBadges';
 import { Details } from './tabs/Details';
@@ -71,7 +71,10 @@ const RuleViewer = () => {
   const isProvisioned = isGrafanaRulerRule(rule.rulerRule) && Boolean(rule.rulerRule.grafana_alert.provenance);
   const isPaused = isGrafanaRulerRule(rule.rulerRule) && isGrafanaRulerRulePaused(rule.rulerRule);
 
+  const showError = hasError && !isPaused;
+
   const summary = annotations[Annotation.summary];
+
   return (
     <AlertingPageWrapper
       pageNav={pageNav}
@@ -80,7 +83,8 @@ const RuleViewer = () => {
       renderTitle={(title) => (
         <Title
           name={title}
-          state={!isPaused && isAlertType ? promRule.state : undefined}
+          paused={isPaused}
+          state={isAlertType ? promRule.state : undefined}
           health={rule.promRule?.health}
           ruleType={rule.promRule?.type}
         />
@@ -89,7 +93,6 @@ const RuleViewer = () => {
       info={createMetadata(rule)}
       subTitle={
         <Stack direction="column">
-          {isPaused && <InfoPausedRule />}
           {summary}
           {/* alerts and notifications and stuff */}
           {isFederatedRule && <FederatedRuleWarning />}
@@ -98,7 +101,7 @@ const RuleViewer = () => {
             <ProvisioningAlert resource={ProvisionedResource.AlertRule} bottomSpacing={0} topSpacing={2} />
           )}
           {/* error state */}
-          {hasError && (
+          {showError && (
             <Alert title="Something went wrong when evaluating this alert rule" bottomSpacing={0} topSpacing={2}>
               <pre style={{ marginBottom: 0 }}>
                 <code>{rule.promRule?.lastError ?? 'No error message'}</code>
@@ -213,13 +216,14 @@ export const createListFilterLink = (values: Array<[string, string]>) => {
 
 interface TitleProps {
   name: string;
+  paused?: boolean;
   // recording rules don't have a state
   state?: PromAlertingRuleState;
   health?: RuleHealth;
   ruleType?: PromRuleType;
 }
 
-export const Title = ({ name, state, health, ruleType }: TitleProps) => {
+export const Title = ({ name, paused = false, state, health, ruleType }: TitleProps) => {
   const styles = useStyles2(getStyles);
   const isRecordingRule = ruleType === PromRuleType.Recording;
 
@@ -229,9 +233,15 @@ export const Title = ({ name, state, health, ruleType }: TitleProps) => {
       <Text variant="h1" truncate>
         {name}
       </Text>
-      {/* recording rules won't have a state */}
-      {state && <StateBadge state={state} health={health} />}
-      {isRecordingRule && <RecordingBadge health={health} />}
+      {paused ? (
+        <PausedBadge />
+      ) : (
+        <>
+          {/* recording rules won't have a state */}
+          {state && <StateBadge state={state} health={health} />}
+          {isRecordingRule && <RecordingBadge health={health} />}
+        </>
+      )}
     </div>
   );
 };