feat: cluster status tags

Author: cvxluo

static/app/views/issueList/pages/dynamicGrouping.tsx

@@ -27,6 +27,7 @@ import Redirect from 'sentry/components/redirect';
 import TimeSince from 'sentry/components/timeSince';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import {
+  IconArrow,
   IconCalendar,
   IconChevron,
   IconClock,
@@ -35,7 +36,9 @@ import {
   IconEllipsis,
   IconFire,
   IconFix,
+  IconRefresh,
   IconSeer,
+  IconStar,
   IconUpload,
   IconUser,
 } from 'sentry/icons';
@@ -188,8 +191,11 @@ function CompactIssuePreview({group}: {group: Group}) {
 
 interface ClusterStats {
   firstSeen: string | null;
+  hasRegressedIssues: boolean;
+  isEscalating: boolean;
   isPending: boolean;
   lastSeen: string | null;
+  newIssuesCount: number;
   totalEvents: number;
   totalUsers: number;
 }
@@ -220,6 +226,9 @@ function useClusterStats(groupIds: number[]): ClusterStats {
         totalUsers: 0,
         firstSeen: null,
         lastSeen: null,
+        newIssuesCount: 0,
+        hasRegressedIssues: false,
+        isEscalating: false,
         isPending,
       };
     }
@@ -229,6 +238,19 @@ function useClusterStats(groupIds: number[]): ClusterStats {
     let earliestFirstSeen: Date | null = null;
     let latestLastSeen: Date | null = null;
 
+    // Calculate new issues (first seen within last week)
+    const oneWeekAgo = new Date();
+    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+    let newIssuesCount = 0;
+
+    // Check for regressed issues
+    let hasRegressedIssues = false;
+
+    // Calculate escalation by summing event stats across all issues
+    // We'll compare the first half of the 24h stats to the second half
+    let firstHalfEvents = 0;
+    let secondHalfEvents = 0;
+
     for (const group of groups) {
       totalEvents += parseInt(group.count, 10) || 0;
       totalUsers += group.userCount || 0;
@@ -238,6 +260,10 @@ function useClusterStats(groupIds: number[]): ClusterStats {
         if (!earliestFirstSeen || firstSeenDate < earliestFirstSeen) {
           earliestFirstSeen = firstSeenDate;
         }
+        // Check if this issue is new (first seen within last week)
+        if (firstSeenDate >= oneWeekAgo) {
+          newIssuesCount++;
+        }
       }
 
       if (group.lastSeen) {
@@ -246,13 +272,39 @@ function useClusterStats(groupIds: number[]): ClusterStats {
           latestLastSeen = lastSeenDate;
         }
       }
+
+      // Check for regressed substatus
+      if (group.substatus === GroupSubstatus.REGRESSED) {
+        hasRegressedIssues = true;
+      }
+
+      // Aggregate 24h stats for escalation detection
+      const stats24h = group.stats?.['24h'];
+      if (stats24h && stats24h.length > 0) {
+        const midpoint = Math.floor(stats24h.length / 2);
+        for (let i = 0; i < stats24h.length; i++) {
+          const eventCount = stats24h[i]?.[1] ?? 0;
+          if (i < midpoint) {
+            firstHalfEvents += eventCount;
+          } else {
+            secondHalfEvents += eventCount;
+          }
+        }
+      }
     }
 
+    // Determine if escalating: second half has >1.5x events compared to first half
+    // Only consider escalating if there were events in the first half (avoid division by zero)
+    const isEscalating = firstHalfEvents > 0 && secondHalfEvents > firstHalfEvents * 1.5;
+
     return {
       totalEvents,
       totalUsers,
       firstSeen: earliestFirstSeen?.toISOString() ?? null,
       lastSeen: latestLastSeen?.toISOString() ?? null,
+      newIssuesCount,
+      hasRegressedIssues,
+      isEscalating,
       isPending,
     };
   }, [groups, isPending]);
@@ -464,6 +516,41 @@ function ClusterCard({cluster}: {cluster: ClusterSummary}) {
             </StatItem>
           )}
         </ClusterStats>
+        {!clusterStats.isPending &&
+          (clusterStats.newIssuesCount > 0 ||
+            clusterStats.hasRegressedIssues ||
+            clusterStats.isEscalating) && (
+            <ClusterStatusTags>
+              {clusterStats.newIssuesCount > 0 && (
+                <StatusTag color="purple">
+                  <IconStar size="xs" />
+                  <Text size="xs" bold>
+                    {tn(
+                      '%s new issue this week',
+                      '%s new issues this week',
+                      clusterStats.newIssuesCount
+                    )}
+                  </Text>
+                </StatusTag>
+              )}
+              {clusterStats.hasRegressedIssues && (
+                <StatusTag color="yellow">
+                  <IconRefresh size="xs" />
+                  <Text size="xs" bold>
+                    {t('Has regressed issues')}
+                  </Text>
+                </StatusTag>
+              )}
+              {clusterStats.isEscalating && (
+                <StatusTag color="red">
+                  <IconArrow direction="up" size="xs" />
+                  <Text size="xs" bold>
+                    {t('Escalating')}
+                  </Text>
+                </StatusTag>
+              )}
+            </ClusterStatusTags>
+          )}
       </CardHeader>
 
       <TabSection>
@@ -1070,6 +1157,45 @@ const StatItem = styled('div')`
   gap: ${space(0.5)};
 `;
 
+// Status tags row for new/regressed/escalating indicators
+const ClusterStatusTags = styled('div')`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${space(1)};
+  margin-top: ${space(1)};
+`;
+
+const StatusTag = styled('div')<{color: 'purple' | 'yellow' | 'red'}>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${space(0.5)};
+  padding: ${space(0.5)} ${space(1)};
+  border-radius: ${p => p.theme.borderRadius};
+  font-size: ${p => p.theme.fontSize.xs};
+
+  ${p => {
+    switch (p.color) {
+      case 'purple':
+        return `
+          background: ${p.theme.purple100};
+          color: ${p.theme.purple400};
+        `;
+      case 'yellow':
+        return `
+          background: ${p.theme.yellow100};
+          color: ${p.theme.yellow400};
+        `;
+      case 'red':
+        return `
+          background: ${p.theme.red100};
+          color: ${p.theme.red400};
+        `;
+      default:
+        return '';
+    }
+  }}
+`;
+
 // Tab section for Summary / Preview Issues
 const TabSection = styled('div')``;