@checkstack/healthcheck-frontend 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @checkstack/healthcheck-frontend
 
+## 0.13.0
+
+### Minor Changes
+
+- 26d8bae: Distributed satellite health checks and Assignment IDE page
+
+  **Satellite System**
+
+  - New `satellite-backend`, `satellite-common`, `satellite-frontend`, and `satellite` agent packages for distributed health check execution
+  - WebSocket-based satellite connectivity with authentication, heartbeats, and live configuration push
+  - Satellite management UI with create dialog, status badges, and list page
+
+  **Live Configuration Updates**
+
+  - Added `assignmentChanged` hook to `healthcheck-backend` for cross-plugin communication
+  - `satellite-backend` subscribes to assignment changes and pushes config updates to connected satellites in real-time
+
+  **Assignment IDE Page**
+
+  - Replaced the 1028-line modal-based `SystemHealthCheckAssignment` component with a full-page IDE layout
+  - New modular components: `AssignmentTree`, `GeneralPanel`, `ThresholdsPanel`, `RetentionPanel`, `ExecutionPanel`
+  - Added unassign capability and sorted assignment lists for stable ordering
+
+  **Shared IDE Primitives**
+
+  - Extracted `IDETreeNode`, `IDETreeSection`, `IDEStatusBar`, `IDELayout` to `@checkstack/ui` for cross-plugin reuse
+  - Migrated existing health check IDE editor to use shared primitives
+
+  **Infrastructure**
+
+  - Added `Dockerfile.satellite` for containerized satellite deployment
+  - WebSocket route registry in `@checkstack/backend` and `@checkstack/backend-api`
+
+- 26d8bae: Source attribution and filtering for satellite health checks
+
+  **Source Attribution**
+
+  - Fixed satellite result attribution: runs from satellites now correctly display their source instead of defaulting to "Local"
+  - Added `sourceId` and `sourceLabel` to both public and detailed history API responses
+
+  **Source Filtering**
+
+  - Added `sourceFilter` parameter to `getHistory`, `getDetailedHistory`, and `getDetailedAggregatedHistory` RPC endpoints
+  - Source filter supports "local" (core-only), specific satellite UUID, or all sources
+  - Filter applies to all three aggregation tiers (raw, hourly, daily)
+
+  **Frontend**
+
+  - System detail accordion shows source filter buttons (All / Local / per-satellite) next to date range filter
+  - Filter applies to both charts and recent runs table
+  - Source column added to the recent runs table with Local/Remote badges
+  - Health check history detail page includes per-satellite source filter buttons
+
+### Patch Changes
+
+- Updated dependencies [26d8bae]
+- Updated dependencies [26d8bae]
+  - @checkstack/ui@1.3.0
+  - @checkstack/healthcheck-common@0.11.0
+  - @checkstack/satellite-common@0.2.0
+  - @checkstack/auth-frontend@0.5.19
+  - @checkstack/dashboard-frontend@0.3.27
+
 ## 0.12.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,14 +12,14 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.5.17",
-    "@checkstack/catalog-common": "1.3.0",
-    "@checkstack/common": "0.6.4",
-    "@checkstack/dashboard-frontend": "0.3.25",
-    "@checkstack/frontend-api": "0.3.8",
-    "@checkstack/healthcheck-common": "0.10.0",
-    "@checkstack/signal-frontend": "0.0.14",
-    "@checkstack/ui": "1.2.0",
+    "@checkstack/auth-frontend": "0.5.18",
+    "@checkstack/catalog-common": "1.3.1",
+    "@checkstack/common": "0.6.5",
+    "@checkstack/dashboard-frontend": "0.3.26",
+    "@checkstack/frontend-api": "0.3.9",
+    "@checkstack/healthcheck-common": "0.10.1",
+    "@checkstack/signal-frontend": "0.0.15",
+    "@checkstack/ui": "1.2.1",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -28,7 +28,8 @@
     "react-router-dom": "^6.20.0",
     "recharts": "^3.6.0",
     "uuid": "^13.0.0",
-    "zod": "^4.2.1"
+    "zod": "^4.2.1",
+    "@checkstack/satellite-common": "0.1.0"
   },
   "devDependencies": {
     "@checkstack/scripts": "0.1.2",

package/src/components/HealthCheckRunsTable.tsx

@@ -10,7 +10,7 @@ import {
   Pagination,
 } from "@checkstack/ui";
 import { formatDistanceToNow, format } from "date-fns";
-import { ExternalLink, Loader2 } from "lucide-react";
+import { ExternalLink, Loader2, Satellite, Server } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
@@ -22,6 +22,10 @@ export interface HealthCheckRunDetailed {
   status: "healthy" | "unhealthy" | "degraded";
   result: Record<string, unknown>;
   timestamp: Date;
+  /** Source ID for result attribution (undefined = local core, UUID = satellite) */
+  sourceId?: string;
+  /** Human-readable source label (e.g. "Local" or "EU West (eu-west-1)") */
+  sourceLabel?: string;
 }
 
 export interface HealthCheckRunsTableProps {
@@ -93,6 +97,7 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                 </>
               )}
               <TableHead>Timestamp</TableHead>
+              <TableHead>Source</TableHead>
               {showFilterColumns && <TableHead className="w-16"></TableHead>}
             </TableRow>
           </TableHeader>
@@ -123,6 +128,19 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                     })}
                   </span>
                 </TableCell>
+                <TableCell>
+                  {run.sourceId ? (
+                    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600">
+                      <Satellite className="h-3 w-3" />
+                      {run.sourceLabel ?? "Remote"}
+                    </span>
+                  ) : (
+                    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                      <Server className="h-3 w-3" />
+                      {run.sourceLabel ?? "Local"}
+                    </span>
+                  )}
+                </TableCell>
                 {showFilterColumns && (
                   <TableCell>
                     <ExternalLink className="h-4 w-4 text-muted-foreground" />

package/src/components/HealthCheckSystemOverview.tsx

@@ -15,6 +15,7 @@ import {
   healthCheckAccess,
   healthcheckRoutes,
 } from "@checkstack/healthcheck-common";
+import { SatelliteApi, satelliteAccess } from "@checkstack/satellite-common";
 import { resolveRoute } from "@checkstack/common";
 import {
   HealthBadge,
@@ -36,10 +37,14 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
-
 } from "@checkstack/ui";
 import { formatDistanceToNow } from "date-fns";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Satellite as SatelliteIcon,
+  Server,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { HealthCheckSparkline } from "./HealthCheckSparkline";
 import { HealthCheckLatencyChart } from "./HealthCheckLatencyChart";
@@ -71,14 +76,24 @@ interface ExpandedRowProps {
   systemId: string;
 }
 
-
 const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
+  const satelliteClient = usePluginClient(SatelliteApi);
   const navigate = useNavigate();
   const accessApi = useApi(accessApiRef);
   const { allowed: canViewDetails } = accessApi.useAccess(
     healthCheckAccess.details,
   );
+  const { allowed: canReadSatellites } = accessApi.useAccess(
+    satelliteAccess.satellite.read,
+  );
+
+  // Fetch satellites for source filter (only if user has access)
+  const { data: satellitesData } = satelliteClient.listSatellites.useQuery(
+    {},
+    { enabled: canReadSatellites },
+  );
+  const satellites = satellitesData?.satellites ?? [];
 
   // Date range state for filtering - default to last 24 hours
   const [dateRange, setDateRange] = useState(() =>
@@ -86,6 +101,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   );
   // Track if a rolling preset is active (vs custom range)
   const [isRollingPreset, setIsRollingPreset] = useState(true);
+  const [sourceFilter, setSourceFilter] = useState<string | undefined>();
 
   // Callback to handle date range changes from the filter
   const handleDateRangeChange = useCallback(
@@ -139,6 +155,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     configurationId: item.configurationId,
     strategyId: item.strategyId,
     dateRange,
+    sourceFilter,
     isRollingPreset,
     // Update endDate to current time when new runs are detected (only for rolling presets)
     onDateRangeRefresh: (newEndDate) => {
@@ -161,6 +178,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     offset: pagination.offset,
     startDate: dateRange.startDate,
     // Don't pass endDate - backend defaults to 'now' so new runs are included
+    sourceFilter,
     sortOrder: "desc",
   });
 
@@ -191,7 +209,6 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
       : `Window mode (${item.stateThresholds.windowSize} runs): Degraded at ${item.stateThresholds.degraded.minFailureCount}+ failures, Unhealthy at ${item.stateThresholds.unhealthy.minFailureCount}+ failures`
     : "Using default thresholds";
 
-
   // Render charts - charts handle data transformation internally
   const renderCharts = () => {
     if (chartLoading) {
@@ -266,8 +283,6 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
         </div>
       </div>
 
-
-
       {/* Date Range Filter with Loading Spinner */}
       <div className="flex items-center gap-3 flex-wrap">
         <DateRangeFilter
@@ -292,6 +307,49 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
           <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
         )}
       </div>
+      {/* Source filter (visible when satellites exist and user has read access) */}
+      {canReadSatellites && satellites.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">Source:</span>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setSourceFilter(undefined)}
+              className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                sourceFilter === undefined
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+            >
+              All
+            </button>
+            <button
+              onClick={() => setSourceFilter("local")}
+              className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                sourceFilter === "local"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+            >
+              <Server className="h-3 w-3" />
+              Local
+            </button>
+            {satellites.map((sat) => (
+              <button
+                key={sat.id}
+                onClick={() => setSourceFilter(sat.id)}
+                className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                  sourceFilter === sat.id
+                    ? "bg-orange-500 text-white"
+                    : "bg-orange-500/10 text-orange-600 hover:bg-orange-500/20"
+                }`}
+              >
+                <SatelliteIcon className="h-3 w-3" />
+                {sat.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
 
       {/* Charts Section */}
       {renderCharts()}
@@ -309,12 +367,14 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
             </span>
             <div className="flex-1 h-px bg-border" />
           </div>
+
           <div className="rounded-md border">
             <Table>
               <TableHeader>
                 <TableRow>
                   <TableHead className="w-24">Status</TableHead>
                   <TableHead>Time</TableHead>
+                  <TableHead>Source</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -348,6 +408,19 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
                         addSuffix: true,
                       })}
                     </TableCell>
+                    <TableCell>
+                      {run.sourceId ? (
+                        <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600">
+                          <SatelliteIcon className="h-3 w-3" />
+                          {run.sourceLabel ?? "Remote"}
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                          <Server className="h-3 w-3" />
+                          {run.sourceLabel ?? "Local"}
+                        </span>
+                      )}
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>