@checkstack/dashboard-frontend 0.4.6 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @checkstack/dashboard-frontend
 
+## 0.5.0
+
+### Minor Changes
+
+- 8d1ef12: ## Anomaly Detection & UI Improvements
+
+  ### Anomaly Detection Enhancements (Phase 2)
+
+  - **`@checkstack/anomaly-backend`**: Implemented background baseline analyzer jobs and anomaly trend deviation detection mechanics.
+  - **`@checkstack/anomaly-common`**: Added new baseline statistical logic and inference rules.
+  - **`@checkstack/anomaly-frontend`**: Added new Anomaly Widget and refactored system detail rendering to be more human-readable.
+  - **`@checkstack/dashboard-frontend`**: Refined the global anomaly widget and fixed hardcoded access gating to render appropriately.
+  - **`@checkstack/healthcheck-backend`**: Connected executor telemetry to the anomaly pipeline.
+  - **`@checkstack/healthcheck-frontend`**: Reconciled baseline display consistency in Drawer and charts.
+
+  ### Notification Identifiers
+
+  - **`@checkstack/incident-backend`**: Resolved system IDs to human-readable System Names within Incident notifications to eliminate ID-only alert content.
+  - **`@checkstack/maintenance-backend`**: Adopted the same resolution strategy for Maintenance notifications to keep parity.
+
+  ### UI Experience
+
+  - **`@checkstack/incident-frontend`**: Fixed the "Back to X" BackLink to properly use `react-router` hook `useNavigate` instead of doing a full application reload.
+  - **`@checkstack/healthcheck-frontend`**: Implemented `useNavigate` for seamless SPA back-linking.
+  - **`@checkstack/integration-frontend`**: Updated connections and delivery logs links to navigate without hard reloads.
+
+### Patch Changes
+
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+  - @checkstack/healthcheck-common@0.12.0
+  - @checkstack/anomaly-common@0.2.0
+  - @checkstack/common@0.7.0
+  - @checkstack/queue-frontend@0.3.0
+  - @checkstack/ui@1.6.0
+  - @checkstack/auth-frontend@0.5.30
+  - @checkstack/catalog-common@1.5.2
+  - @checkstack/catalog-frontend@0.8.6
+  - @checkstack/command-common@0.2.9
+  - @checkstack/command-frontend@0.2.31
+  - @checkstack/frontend-api@0.3.11
+  - @checkstack/incident-common@0.4.9
+  - @checkstack/maintenance-common@0.4.11
+  - @checkstack/notification-common@0.2.9
+  - @checkstack/signal-frontend@0.0.16
+
 ## 0.4.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dashboard-frontend",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -13,20 +13,22 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.5.28",
-    "@checkstack/catalog-common": "1.4.1",
-    "@checkstack/catalog-frontend": "0.8.3",
+    "@checkstack/anomaly-common": "0.1.0",
+    "@checkstack/auth-frontend": "0.5.29",
+    "@checkstack/catalog-common": "1.5.1",
+    "@checkstack/catalog-frontend": "0.8.5",
     "@checkstack/command-common": "0.2.8",
-    "@checkstack/command-frontend": "0.2.29",
+    "@checkstack/command-frontend": "0.2.30",
     "@checkstack/common": "0.6.5",
-    "@checkstack/frontend-api": "0.3.9",
+    "@checkstack/frontend-api": "0.3.10",
     "@checkstack/healthcheck-common": "0.11.0",
-    "@checkstack/incident-common": "0.4.7",
-    "@checkstack/maintenance-common": "0.4.9",
+    "@checkstack/incident-common": "0.4.8",
+    "@checkstack/maintenance-common": "0.4.10",
     "@checkstack/notification-common": "0.2.8",
-    "@checkstack/queue-frontend": "0.2.30",
+    "@checkstack/queue-frontend": "0.2.31",
     "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.0",
+    "@checkstack/ui": "1.5.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0"

package/src/Dashboard.tsx

@@ -19,6 +19,7 @@ import {
 } from "@checkstack/notification-common";
 import { IncidentApi } from "@checkstack/incident-common";
 import { MaintenanceApi } from "@checkstack/maintenance-common";
+import { AnomalyApi } from "@checkstack/anomaly-common";
 import { HEALTH_CHECK_RUN_COMPLETED } from "@checkstack/healthcheck-common";
 import { useSignal } from "@checkstack/signal-frontend";
 import {
@@ -46,12 +47,14 @@ import {
   AlertTriangle,
   Wrench,
   Terminal,
+  ActivitySquare,
 } from "lucide-react";
 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";
+import { AnomalyOverviewSheet } from "./components/AnomalyOverviewSheet";
 
 const CATALOG_PLUGIN_ID = "catalog";
 const MAX_TERMINAL_ENTRIES = 8;
@@ -87,6 +90,7 @@ export const Dashboard: React.FC = () => {
   const notificationClient = usePluginClient(NotificationApi);
   const incidentClient = usePluginClient(IncidentApi);
   const maintenanceClient = usePluginClient(MaintenanceApi);
+  const anomalyClient = usePluginClient(AnomalyApi);
 
   const navigate = useNavigate();
   const toast = useToast();
@@ -103,6 +107,7 @@ export const Dashboard: React.FC = () => {
 
   const [isIncidentSheetOpen, setIncidentSheetOpen] = useState(false);
   const [isMaintenanceSheetOpen, setMaintenanceSheetOpen] = useState(false);
+  const [isAnomalySheetOpen, setAnomalySheetOpen] = useState(false);
 
   // -------------------------------------------------------------------------
   // DATA QUERIES
@@ -146,6 +151,13 @@ export const Dashboard: React.FC = () => {
 
   const maintenancesLoading = inProgressLoading || scheduledLoading;
 
+  // Fetch active anomalies
+  const { data: anomalies = [], isLoading: anomaliesLoading } =
+    anomalyClient.getAnomalies.useQuery(
+      { limit: 100, state: "anomaly" },
+      { staleTime: 30_000 },
+    );
+
   // Fetch subscriptions (only when logged in)
   const { data: subscriptions = [], refetch: refetchSubscriptions } =
     notificationClient.getSubscriptions.useQuery(
@@ -154,7 +166,11 @@ export const Dashboard: React.FC = () => {
     );
 
   // Combined loading state
-  const loading = entitiesLoading || incidentsLoading || maintenancesLoading;
+  const loading =
+    entitiesLoading ||
+    incidentsLoading ||
+    maintenancesLoading ||
+    anomaliesLoading;
 
   // -------------------------------------------------------------------------
   // MUTATIONS
@@ -188,6 +204,7 @@ export const Dashboard: React.FC = () => {
   const systemsCount = systems.length;
   const activeIncidentsCount = incidents.length;
   const activeMaintenancesCount = maintenances.length;
+  const activeAnomaliesCount = anomalies.length;
 
   // Map groups to include their systems
   const groupsWithSystems = useMemo<GroupWithSystems[]>(() => {
@@ -373,7 +390,7 @@ export const Dashboard: React.FC = () => {
             title="Overview"
             icon={<Activity className="w-5 h-5" />}
           />
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
             <StatusCard
               title="Total Systems"
               value={loading ? "..." : <AnimatedCounter value={systemsCount} />}
@@ -436,6 +453,30 @@ export const Dashboard: React.FC = () => {
                   : ""
               }
             />
+
+            <StatusCard
+              variant={activeAnomaliesCount > 0 ? "gradient" : "default"}
+              title="Active Anomalies"
+              value={
+                loading ? (
+                  "..."
+                ) : (
+                  <AnimatedCounter value={activeAnomaliesCount} />
+                )
+              }
+              description="Unusual behavior detected"
+              icon={<ActivitySquare className="w-4 h-4" />}
+              onClick={
+                activeAnomaliesCount > 0
+                  ? () => setAnomalySheetOpen(true)
+                  : undefined
+              }
+              className={
+                activeAnomaliesCount > 0
+                  ? "cursor-pointer hover:opacity-90 hover:scale-[1.02] bg-gradient-to-br from-warning/20 to-warning/5 border-warning/30"
+                  : ""
+              }
+            />
           </div>
         </section>
 
@@ -478,6 +519,12 @@ export const Dashboard: React.FC = () => {
         maintenances={maintenances}
         systems={systems}
       />
+      <AnomalyOverviewSheet
+        open={isAnomalySheetOpen}
+        onOpenChange={setAnomalySheetOpen}
+        anomalies={anomalies}
+        systems={systems}
+      />
     </>
   );
 };

package/src/components/AnomalyOverviewSheet.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetBody,
+  Badge,
+} from "@checkstack/ui";
+import { Link } from "react-router-dom";
+import {
+  catalogRoutes,
+  type System,
+} from "@checkstack/catalog-common";
+import { resolveRoute } from "@checkstack/common";
+import { type AnomalyDto } from "@checkstack/anomaly-common";
+import { formatDistanceToNow } from "date-fns";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  anomalies: AnomalyDto[];
+  systems: System[];
+}
+
+export const AnomalyOverviewSheet: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  anomalies,
+  systems,
+}) => {
+  // 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 Anomalies</SheetTitle>
+            <p className="text-sm text-muted-foreground">
+              Overview of unusual system behavior
+            </p>
+          </div>
+        </SheetHeader>
+
+        <SheetBody className="flex flex-col gap-3 pb-8">
+          {anomalies.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No active anomalies
+            </p>
+          ) : (
+            anomalies.map((anomaly) => {
+              const systemName = systemMap.get(anomaly.systemId) || anomaly.systemId;
+              const deviationText = anomaly.deviation 
+                ? `${anomaly.deviation.toFixed(1)}σ`
+                : "unusual";
+
+              return (
+                <Link
+                  key={anomaly.id}
+                  to={resolveRoute(catalogRoutes.routes.systemDetail, { systemId: anomaly.systemId })}
+                  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">
+                      {systemName}
+                    </h4>
+                    <Badge variant="warning" className="flex-shrink-0 font-mono">
+                      {deviationText}
+                    </Badge>
+                  </div>
+                  <div className="flex flex-col gap-1 mt-2">
+                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                      Metric
+                    </span>
+                    <span className="text-sm font-mono text-foreground break-all">
+                      {anomaly.fieldPath}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between mt-2 pt-2 border-t border-border/50 text-xs text-muted-foreground">
+                    <span className="font-mono">
+                      Observed: {anomaly.observedValue} <span className="opacity-70">(~{anomaly.baselineValue})</span>
+                    </span>
+                    <span>
+                      {formatDistanceToNow(new Date(anomaly.startedAt), { addSuffix: true })}
+                    </span>
+                  </div>
+                </Link>
+              );
+            })
+          )}
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+};