@checkstack/incident-frontend 0.4.25 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @checkstack/incident-frontend
 
+## 0.5.1
+
+### Patch Changes
+
+- @checkstack/dashboard-frontend@0.4.1
+
+## 0.5.0
+
+### Minor Changes
+
+- bb1fea0: Redesign system detail page with hero banner, two-column layout, plugin metric tiles, and health check slide-over drawer.
+
+  ### New Components
+
+  - **MetricTile** (`@checkstack/ui`): Compact stat tile with icon, label, value, variant coloring
+  - **Sheet** (`@checkstack/ui`): Slide-over drawer built on Radix Dialog primitives
+
+  ### New Extension Slot
+
+  - **SystemOverviewMetricsSlot** (`@checkstack/catalog-common`): Plugin-contributed at-a-glance metric tiles in the system detail hero banner
+
+  ### Layout Changes
+
+  - System detail page now uses a hero banner with breadcrumb, status badges, and metric tile strip
+  - Two-column layout: monitoring content (left) and system context (right)
+  - Health checks rendered as compact card rows instead of heavy accordions
+  - Clicking a health check opens a slide-over drawer with summary tiles, timeline charts, and recent runs
+  - Right column uses lightweight borderless sections with dividers instead of heavy Card wrappers
+
+  ### Plugin Extensions
+
+  - Health check, SLO, Incident, and Maintenance plugins each contribute a metric tile to the hero banner
+
+### Patch Changes
+
+- Updated dependencies [bb1fea0]
+- Updated dependencies [bb1fea0]
+  - @checkstack/dashboard-frontend@0.4.0
+  - @checkstack/ui@1.4.0
+  - @checkstack/catalog-common@1.4.0
+  - @checkstack/auth-frontend@0.5.26
+
 ## 0.4.25
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/incident-frontend",
-  "version": "0.4.25",
+  "version": "0.5.1",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/SystemIncidentPanel.tsx

@@ -10,49 +10,13 @@ import {
   INCIDENT_UPDATED,
   type IncidentWithSystems,
 } from "@checkstack/incident-common";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  Badge,
-  LoadingSpinner,
-  Button,
-} from "@checkstack/ui";
-import { AlertTriangle, Clock, History, ChevronRight } from "lucide-react";
-import { formatDistanceToNow } from "date-fns";
+import { Badge, LoadingSpinner, Button } from "@checkstack/ui";
+import { AlertTriangle, History } from "lucide-react";
 
 type Props = SlotContext<typeof SystemDetailsTopSlot>;
 
 const SEVERITY_WEIGHTS = { critical: 3, major: 2, minor: 1 } as const;
 
-function getSeverityColor(severity: string): string {
-  switch (severity) {
-    case "critical": {
-      return "border-destructive/30 bg-destructive/5";
-    }
-    case "major": {
-      return "border-warning/30 bg-warning/5";
-    }
-    default: {
-      return "border-info/30 bg-info/5";
-    }
-  }
-}
-
-function getSeverityHeaderColor(severity: string): string {
-  switch (severity) {
-    case "critical": {
-      return "bg-destructive/10";
-    }
-    case "major": {
-      return "bg-warning/10";
-    }
-    default: {
-      return "bg-info/10";
-    }
-  }
-}
 
 function findMostSevereIncident(
   incidents: IncidentWithSystems[]
@@ -97,137 +61,78 @@ export const SystemIncidentPanel: React.FC<Props> = ({ system }) => {
 
   if (loading) {
     return (
-      <Card>
-        <CardContent className="p-6 flex justify-center">
-          <LoadingSpinner />
-        </CardContent>
-      </Card>
+      <div className="flex items-center justify-center rounded-md border border-border/50 bg-card px-3 py-2">
+        <LoadingSpinner />
+      </div>
     );
   }
 
   if (incidents.length === 0) {
-    // Show a subtle card with just the history button when no active incidents
     return (
-      <Card className="border-border/50">
-        <CardContent className="p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <AlertTriangle className="h-4 w-4" />
-              <span className="text-sm">No active incidents</span>
-            </div>
-            <Button variant="ghost" size="sm" asChild>
-              <Link
-                to={resolveRoute(incidentRoutes.routes.systemHistory, {
-                  systemId: system.id,
-                })}
-              >
-                <History className="h-4 w-4 mr-1" />
-                View History
-              </Link>
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+      <div className="flex items-center justify-between rounded-md border border-border/50 bg-card px-3 py-2">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <AlertTriangle className="h-3.5 w-3.5" />
+          <span className="text-sm">No active incidents</span>
+        </div>
+        <Button variant="ghost" size="sm" className="h-7 text-xs" asChild>
+          <Link
+            to={resolveRoute(incidentRoutes.routes.systemHistory, {
+              systemId: system.id,
+            })}
+          >
+            <History className="h-3 w-3 mr-1" />
+            History
+          </Link>
+        </Button>
+      </div>
     );
   }
 
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case "investigating": {
-        return <Badge variant="destructive">Investigating</Badge>;
-      }
-      case "identified": {
-        return <Badge variant="warning">Identified</Badge>;
-      }
-      case "fixing": {
-        return <Badge variant="warning">Fixing</Badge>;
-      }
-      case "monitoring": {
-        return <Badge variant="info">Monitoring</Badge>;
-      }
-      default: {
-        return <Badge>{status}</Badge>;
-      }
-    }
-  };
-
-  // Use the most severe incident for the card styling
   const mostSevere = findMostSevereIncident(incidents);
+  const severityColor =
+    mostSevere.severity === "critical"
+      ? "border-destructive/30 bg-destructive/5"
+      : mostSevere.severity === "major"
+        ? "border-warning/30 bg-warning/5"
+        : "border-info/30 bg-info/5";
 
   return (
-    <Card className={getSeverityColor(mostSevere.severity)}>
-      <CardHeader
-        className={`border-b border-border ${getSeverityHeaderColor(
-          mostSevere.severity
-        )}`}
-      >
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <AlertTriangle className="h-5 w-5 text-destructive" />
-            <CardTitle className="text-lg font-semibold">
-              Active Incidents ({incidents.length})
-            </CardTitle>
-          </div>
-          <Button variant="ghost" size="sm" asChild>
-            <Link
-              to={resolveRoute(incidentRoutes.routes.systemHistory, {
-                systemId: system.id,
-              })}
+    <div
+      className={`flex items-center justify-between rounded-md border px-3 py-2 ${severityColor}`}
+    >
+      <div className="flex items-center gap-2 min-w-0">
+        <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
+        <span className="text-sm font-medium truncate">
+          {incidents.length} active incident{incidents.length > 1 ? "s" : ""}
+        </span>
+        <div className="flex items-center gap-1.5">
+          {incidents.map((i) => (
+            <Badge
+              key={i.id}
+              variant={
+                i.severity === "critical"
+                  ? "destructive"
+                  : i.severity === "major"
+                    ? "warning"
+                    : "secondary"
+              }
+              className="text-xs"
             >
-              <History className="h-4 w-4 mr-1" />
-              View History
-            </Link>
-          </Button>
+              {i.severity}
+            </Badge>
+          ))}
         </div>
-      </CardHeader>
-      <CardContent className="p-4 space-y-3">
-        {incidents.map((i) => (
-          <Link
-            key={i.id}
-            to={`${resolveRoute(incidentRoutes.routes.detail, {
-              incidentId: i.id,
-            })}?from=${system.id}`}
-            className="block p-3 rounded-lg border border-border bg-background hover:bg-muted/50 transition-colors"
-          >
-            <div className="flex items-start justify-between mb-2">
-              <div className="flex items-center gap-2">
-                <h4 className="font-medium text-foreground">{i.title}</h4>
-                <ChevronRight className="h-4 w-4 text-muted-foreground" />
-              </div>
-              <div className="flex items-center gap-2">
-                <Badge
-                  variant={
-                    i.severity === "critical"
-                      ? "destructive"
-                      : i.severity === "major"
-                      ? "warning"
-                      : "secondary"
-                  }
-                >
-                  {i.severity}
-                </Badge>
-                {getStatusBadge(i.status)}
-              </div>
-            </div>
-            {i.description && (
-              <p className="text-sm text-muted-foreground mb-2">
-                {i.description}
-              </p>
-            )}
-            <div className="flex gap-4 text-xs text-muted-foreground">
-              <div className="flex items-center gap-1">
-                <Clock className="h-3 w-3" />
-                <span>
-                  Started{" "}
-                  {formatDistanceToNow(new Date(i.createdAt), {
-                    addSuffix: true,
-                  })}
-                </span>
-              </div>
-            </div>
-          </Link>
-        ))}
-      </CardContent>
-    </Card>
+      </div>
+      <Button variant="ghost" size="sm" className="h-7 text-xs shrink-0" asChild>
+        <Link
+          to={resolveRoute(incidentRoutes.routes.systemHistory, {
+            systemId: system.id,
+          })}
+        >
+          <History className="h-3 w-3 mr-1" />
+          View
+        </Link>
+      </Button>
+    </div>
   );
 };