@checkstack/dashboard-frontend 0.3.35 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @checkstack/dashboard-frontend
 
+## 0.4.0
+
+### Minor Changes
+
+- bb1fea0: feat: implement active incident and maintenance overview sheets on dashboard
+
+  - Replaces direct routing on status cards with slide-out overview sheets to gracefully degrade for users without manage permissions
+  - Refactors dashboard system groups into a clean table-style list layout for better density
+  - Makes global status cards more compact
+
+### Patch Changes
+
+- Updated dependencies [bb1fea0]
+- Updated dependencies [bb1fea0]
+  - @checkstack/ui@1.4.0
+  - @checkstack/catalog-common@1.4.0
+  - @checkstack/catalog-frontend@0.7.0
+  - @checkstack/auth-frontend@0.5.26
+  - @checkstack/command-frontend@0.2.28
+  - @checkstack/queue-frontend@0.2.28
+
 ## 0.3.35
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dashboard-frontend",
-  "version": "0.3.35",
+  "version": "0.4.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/Dashboard.tsx

@@ -50,6 +50,8 @@ import {
 import { authApiRef } from "@checkstack/auth-frontend/api";
 import { QueueLagAlert } from "@checkstack/queue-frontend";
 import { SystemBadgeDataProvider } from "./components/SystemBadgeDataProvider";
+import { IncidentOverviewSheet } from "./components/IncidentOverviewSheet";
+import { MaintenanceOverviewSheet } from "./components/MaintenanceOverviewSheet";
 
 const CATALOG_PLUGIN_ID = "catalog";
 const MAX_TERMINAL_ENTRIES = 8;
@@ -99,6 +101,9 @@ export const Dashboard: React.FC = () => {
     Record<string, boolean>
   >({});
 
+  const [isIncidentSheetOpen, setIncidentSheetOpen] = useState(false);
+  const [isMaintenanceSheetOpen, setMaintenanceSheetOpen] = useState(false);
+
   // -------------------------------------------------------------------------
   // DATA QUERIES
   // -------------------------------------------------------------------------
@@ -117,12 +122,29 @@ export const Dashboard: React.FC = () => {
   const incidents = incidentsData?.incidents ?? [];
 
   // Fetch active maintenances
-  const { data: maintenancesData, isLoading: maintenancesLoading } =
+  const { data: inProgressMaintenancesData, isLoading: inProgressLoading } =
     maintenanceClient.listMaintenances.useQuery(
       { status: "in_progress" },
       { staleTime: 30_000 },
     );
-  const maintenances = maintenancesData?.maintenances ?? [];
+
+  // Fetch scheduled maintenances
+  const { data: scheduledMaintenancesData, isLoading: scheduledLoading } =
+    maintenanceClient.listMaintenances.useQuery(
+      { status: "scheduled" },
+      { staleTime: 30_000 },
+    );
+
+  const maintenances = useMemo(() => {
+    return [
+      ...(inProgressMaintenancesData?.maintenances ?? []),
+      ...(scheduledMaintenancesData?.maintenances ?? []),
+    ].toSorted(
+      (a, b) => new Date(a.startAt).getTime() - new Date(b.startAt).getTime(),
+    );
+  }, [inProgressMaintenancesData, scheduledMaintenancesData]);
+
+  const maintenancesLoading = inProgressLoading || scheduledLoading;
 
   // Fetch subscriptions (only when logged in)
   const { data: subscriptions = [], refetch: refetchSubscriptions } =
@@ -294,7 +316,7 @@ export const Dashboard: React.FC = () => {
                   )}
                 </div>
               </CardHeader>
-              <CardContent className="p-4">
+              <CardContent className="p-0">
                 {group.systems.length === 0 ? (
                   <div className="py-8 text-center">
                     <p className="text-sm text-muted-foreground">
@@ -302,32 +324,26 @@ export const Dashboard: React.FC = () => {
                     </p>
                   </div>
                 ) : (
-                  <div
-                    className={`grid gap-3 ${
-                      group.systems.length === 1
-                        ? "grid-cols-1"
-                        : "grid-cols-1 sm:grid-cols-2"
-                    }`}
-                  >
+                  <div className="flex flex-col divide-y divide-border">
                     {group.systems.map((system) => (
                       <button
                         key={system.id}
                         onClick={() => handleSystemClick(system.id)}
-                        className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 transition-all cursor-pointer hover:border-border/80 hover:shadow-sm text-left"
+                        className="flex items-center gap-4 px-4 py-3 bg-card hover:bg-muted/50 transition-colors text-left w-full group"
                       >
-                        <div className="flex items-center gap-3 min-w-24 flex-shrink-0">
+                        <div className="flex items-center gap-3 min-w-32 flex-shrink-0">
                           <Activity className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                           <p className="text-sm font-medium text-foreground truncate">
                             {system.name}
                           </p>
                         </div>
-                        <div className="flex items-center gap-2 flex-wrap flex-1 justify-end">
+                        <div className="flex items-center gap-2 flex-wrap flex-1 justify-end min-w-0">
                           <ExtensionSlot
                             slot={SystemStateBadgesSlot}
                             context={{ system }}
                           />
                         </div>
-                        <ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                        <ChevronRight className="h-4 w-4 text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity flex-shrink-0 ml-2" />
                       </button>
                     ))}
                   </div>
@@ -381,10 +397,21 @@ export const Dashboard: React.FC = () => {
                   : "Unresolved issues requiring attention"
               }
               icon={<AlertTriangle className="w-4 h-4" />}
+              onClick={
+                activeIncidentsCount > 0
+                  ? () => setIncidentSheetOpen(true)
+                  : undefined
+              }
+              className={
+                activeIncidentsCount > 0
+                  ? "cursor-pointer hover:opacity-90 hover:scale-[1.02]"
+                  : ""
+              }
             />
 
             <StatusCard
-              title="Active Maintenances"
+              variant={activeMaintenancesCount > 0 ? "gradient" : "default"}
+              title="Active & Scheduled Maintenances"
               value={
                 loading ? (
                   "..."
@@ -395,9 +422,19 @@ export const Dashboard: React.FC = () => {
               description={
                 activeMaintenancesCount === 0
                   ? "No scheduled maintenance"
-                  : "Ongoing or scheduled maintenance windows"
+                  : "Ongoing or upcoming maintenance windows"
               }
               icon={<Wrench className="w-4 h-4" />}
+              onClick={
+                activeMaintenancesCount > 0
+                  ? () => setMaintenanceSheetOpen(true)
+                  : undefined
+              }
+              className={
+                activeMaintenancesCount > 0
+                  ? "cursor-pointer hover:opacity-90 hover:scale-[1.02]"
+                  : ""
+              }
             />
           </div>
         </section>
@@ -428,6 +465,19 @@ export const Dashboard: React.FC = () => {
           </section>
         </div>
       </div>
+
+      <IncidentOverviewSheet
+        open={isIncidentSheetOpen}
+        onOpenChange={setIncidentSheetOpen}
+        incidents={incidents}
+        systems={systems}
+      />
+      <MaintenanceOverviewSheet
+        open={isMaintenanceSheetOpen}
+        onOpenChange={setMaintenanceSheetOpen}
+        maintenances={maintenances}
+        systems={systems}
+      />
     </>
   );
 };

package/src/components/IncidentOverviewSheet.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetBody,
+  Button,
+  Badge,
+} from "@checkstack/ui";
+import { Link } from "react-router-dom";
+import { usePluginRoute, useApi, accessApiRef } from "@checkstack/frontend-api";
+import {
+  incidentRoutes,
+  incidentAccess,
+  type IncidentWithSystems,
+} from "@checkstack/incident-common";
+import { resolveRoute } from "@checkstack/common";
+import type { System } from "@checkstack/catalog-common";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  incidents: IncidentWithSystems[];
+  systems: System[];
+}
+
+export const IncidentOverviewSheet: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  incidents,
+  systems,
+}) => {
+  const getRoute = usePluginRoute();
+  const accessApi = useApi(accessApiRef);
+  const { allowed: canManage } = accessApi.useAccess(incidentAccess.incident.manage);
+
+  // Map of systemId -> systemName
+  const systemMap = new Map(systems.map((s) => [s.id, s.name]));
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader className="flex flex-row items-start justify-between gap-4 pt-6">
+          <div className="flex flex-col gap-1 text-left">
+            <SheetTitle>Active Incidents</SheetTitle>
+            <p className="text-sm text-muted-foreground">
+              Overview of unresolved issues
+            </p>
+          </div>
+          {canManage && (
+            <Button variant="outline" size="sm" asChild>
+              <Link to={getRoute(incidentRoutes.routes.config)}>Manage</Link>
+            </Button>
+          )}
+        </SheetHeader>
+
+        <SheetBody className="flex flex-col gap-3 pb-8">
+          {incidents.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No active incidents
+            </p>
+          ) : (
+            incidents.map((incident) => {
+              const affectedSystemNames = incident.systemIds
+                .map((id) => systemMap.get(id) || id)
+                .join(", ");
+
+              const variant =
+                incident.severity === "critical"
+                  ? "destructive"
+                  : incident.severity === "major"
+                    ? "warning"
+                    : "info";
+
+              return (
+                <Link
+                  key={incident.id}
+                  to={resolveRoute(incidentRoutes.routes.detail, { incidentId: incident.id })}
+                  onClick={() => onOpenChange(false)}
+                  className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4 hover:border-primary/50 hover:shadow-sm transition-all text-left"
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <h4 className="font-medium text-foreground">
+                      {incident.title}
+                    </h4>
+                    <Badge variant={variant} className="capitalize flex-shrink-0">
+                      {incident.severity}
+                    </Badge>
+                  </div>
+                  <div className="flex flex-col gap-1 mt-2">
+                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                      Affected Systems
+                    </span>
+                    <span className="text-sm text-foreground">
+                      {affectedSystemNames || "None"}
+                    </span>
+                  </div>
+                </Link>
+              );
+            })
+          )}
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+};

package/src/components/MaintenanceOverviewSheet.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetBody,
+  Button,
+  Badge,
+} from "@checkstack/ui";
+import { Link } from "react-router-dom";
+import { usePluginRoute, useApi, accessApiRef } from "@checkstack/frontend-api";
+import {
+  maintenanceRoutes,
+  maintenanceAccess,
+  type MaintenanceWithSystems,
+} from "@checkstack/maintenance-common";
+import { resolveRoute } from "@checkstack/common";
+import type { System } from "@checkstack/catalog-common";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  maintenances: MaintenanceWithSystems[];
+  systems: System[];
+}
+
+export const MaintenanceOverviewSheet: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  maintenances,
+  systems,
+}) => {
+  const getRoute = usePluginRoute();
+  const accessApi = useApi(accessApiRef);
+  const { allowed: canManage } = accessApi.useAccess(maintenanceAccess.maintenance.manage);
+
+  const systemMap = new Map(systems.map((s) => [s.id, s.name]));
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader className="flex flex-row items-start justify-between gap-4 pt-6">
+          <div className="flex flex-col gap-1 text-left">
+            <SheetTitle>Active & Scheduled Maintenances</SheetTitle>
+            <p className="text-sm text-muted-foreground">
+              Overview of scheduled and ongoing windows
+            </p>
+          </div>
+          {canManage && (
+            <Button variant="outline" size="sm" asChild>
+              <Link to={getRoute(maintenanceRoutes.routes.config)}>Manage</Link>
+            </Button>
+          )}
+        </SheetHeader>
+
+        <SheetBody className="flex flex-col gap-3 pb-8">
+          {maintenances.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No active maintenances
+            </p>
+          ) : (
+            maintenances.map((maintenance) => {
+              const affectedSystemNames = maintenance.systemIds
+                .map((id) => systemMap.get(id) || id)
+                .join(", ");
+
+              const badgeVariant = 
+                maintenance.status === "in_progress"
+                  ? "warning"
+                  : maintenance.status === "scheduled"
+                    ? "info"
+                    : maintenance.status === "completed"
+                      ? "success"
+                      : "secondary";
+
+              return (
+                <Link
+                  key={maintenance.id}
+                  to={resolveRoute(maintenanceRoutes.routes.detail, { maintenanceId: maintenance.id })}
+                  onClick={() => onOpenChange(false)}
+                  className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4 hover:border-primary/50 hover:shadow-sm transition-all text-left"
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <h4 className="font-medium text-foreground">
+                      {maintenance.title}
+                    </h4>
+                    <Badge variant={badgeVariant} className="capitalize flex-shrink-0">
+                      {maintenance.status.replace("_", " ")}
+                    </Badge>
+                  </div>
+                  <div className="flex flex-col gap-1 mt-2">
+                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                      Affected Systems
+                    </span>
+                    <span className="text-sm text-foreground">
+                      {affectedSystemNames || "None"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-1 mt-2">
+                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                      Schedule
+                    </span>
+                    <span className="text-sm text-foreground">
+                      {new Date(maintenance.startAt).toLocaleString(undefined, {
+                        month: "short",
+                        day: "numeric",
+                        hour: "numeric",
+                        minute: "2-digit",
+                      })}
+                      {" - "}
+                      {new Date(maintenance.endAt).toLocaleString(undefined, {
+                        month: "short",
+                        day: "numeric",
+                        hour: "numeric",
+                        minute: "2-digit",
+                      })}
+                    </span>
+                  </div>
+                </Link>
+              );
+            })
+          )}
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+};