@checkstack/maintenance-frontend 0.4.29 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @checkstack/maintenance-frontend
 
+## 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.29
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/maintenance-frontend",
-  "version": "0.4.29",
+  "version": "0.5.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/SystemMaintenancePanel.tsx

@@ -9,17 +9,8 @@ import {
   maintenanceRoutes,
   MAINTENANCE_UPDATED,
 } from "@checkstack/maintenance-common";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  Badge,
-  LoadingSpinner,
-  Button,
-} from "@checkstack/ui";
-import { Wrench, Clock, Calendar, History, ChevronRight } from "lucide-react";
-import { formatDistanceToNow, format } from "date-fns";
+import { LoadingSpinner, Button } from "@checkstack/ui";
+import { Wrench, History } from "lucide-react";
 
 type Props = SlotContext<typeof SystemDetailsSlot>;
 
@@ -49,118 +40,61 @@ export const SystemMaintenancePanel: 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 (maintenances.length === 0) {
-    // Show a subtle card with just the history button when no active maintenances
     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">
-              <Wrench className="h-4 w-4" />
-              <span className="text-sm">No active maintenances</span>
-            </div>
-            <Button variant="ghost" size="sm" asChild>
-              <Link
-                to={resolveRoute(maintenanceRoutes.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">
+          <Wrench className="h-3.5 w-3.5" />
+          <span className="text-sm">No planned maintenances</span>
+        </div>
+        <Button variant="ghost" size="sm" className="h-7 text-xs" asChild>
+          <Link
+            to={resolveRoute(maintenanceRoutes.routes.systemHistory, {
+              systemId: system.id,
+            })}
+          >
+            <History className="h-3 w-3 mr-1" />
+            History
+          </Link>
+        </Button>
+      </div>
     );
   }
 
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case "in_progress": {
-        return <Badge variant="warning">In Progress</Badge>;
-      }
-      case "scheduled": {
-        return <Badge variant="info">Scheduled</Badge>;
-      }
-      default: {
-        return <Badge>{status}</Badge>;
-      }
-    }
-  };
+  const active = maintenances.filter((m) => m.status === "in_progress");
+  const scheduled = maintenances.filter((m) => m.status === "scheduled");
 
   return (
-    <Card className="border-warning/30 bg-warning/5">
-      <CardHeader className="border-b border-border bg-warning/10">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Wrench className="h-5 w-5 text-warning" />
-            <CardTitle className="text-lg font-semibold">
-              Planned Maintenance
-            </CardTitle>
-          </div>
-          <Button variant="ghost" size="sm" asChild>
-            <Link
-              to={resolveRoute(maintenanceRoutes.routes.systemHistory, {
-                systemId: system.id,
-              })}
-            >
-              <History className="h-4 w-4 mr-1" />
-              View History
-            </Link>
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent className="p-4 space-y-3">
-        {maintenances.map((m) => (
-          <Link
-            key={m.id}
-            to={`${resolveRoute(maintenanceRoutes.routes.detail, {
-              maintenanceId: m.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">{m.title}</h4>
-                <ChevronRight className="h-4 w-4 text-muted-foreground" />
-              </div>
-              {getStatusBadge(m.status)}
-            </div>
-            {m.description && (
-              <p className="text-sm text-muted-foreground mb-2">
-                {m.description}
-              </p>
-            )}
-            <div className="flex gap-4 text-xs text-muted-foreground">
-              <div className="flex items-center gap-1">
-                <Calendar className="h-3 w-3" />
-                <span>{format(new Date(m.startAt), "MMM d, HH:mm")}</span>
-              </div>
-              <div className="flex items-center gap-1">
-                <Clock className="h-3 w-3" />
-                <span>
-                  {m.status === "scheduled"
-                    ? `Starts ${formatDistanceToNow(new Date(m.startAt), {
-                        addSuffix: true,
-                      })}`
-                    : `Ends ${formatDistanceToNow(new Date(m.endAt), {
-                        addSuffix: true,
-                      })}`}
-                </span>
-              </div>
-            </div>
-          </Link>
-        ))}
-      </CardContent>
-    </Card>
+    <div className="flex items-center justify-between rounded-md border border-warning/30 bg-warning/5 px-3 py-2">
+      <div className="flex items-center gap-2 min-w-0">
+        <Wrench className="h-3.5 w-3.5 text-warning shrink-0" />
+        <span className="text-sm font-medium truncate">
+          {active.length > 0
+            ? `${active.length} in progress`
+            : `${scheduled.length} scheduled`}
+        </span>
+        {active.length > 0 && scheduled.length > 0 && (
+          <span className="text-xs text-muted-foreground">
+            + {scheduled.length} scheduled
+          </span>
+        )}
+      </div>
+      <Button variant="ghost" size="sm" className="h-7 text-xs shrink-0" asChild>
+        <Link
+          to={resolveRoute(maintenanceRoutes.routes.systemHistory, {
+            systemId: system.id,
+          })}
+        >
+          <History className="h-3 w-3 mr-1" />
+          View
+        </Link>
+      </Button>
+    </div>
   );
 };