@checkstack/dependency-frontend 0.2.0

package/src/components/HealthCheckRulesEditor.tsx

@@ -0,0 +1,194 @@
+import React, { useState } from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { HealthCheckApi } from "@checkstack/healthcheck-common";
+import type { ImpactType } from "@checkstack/dependency-common";
+import { Button, Badge } from "@checkstack/ui";
+import { Plus, Trash2, ChevronDown, ChevronUp, Activity } from "lucide-react";
+
+interface HealthCheckRule {
+  healthCheckId: string;
+  overrideImpactType: ImpactType;
+}
+
+interface Props {
+  /** The upstream system ID to query health checks for */
+  targetSystemId: string;
+  /** Current rules */
+  rules: HealthCheckRule[];
+  /** Callback when rules change */
+  onChange: (rules: HealthCheckRule[]) => void;
+  /** Compact mode for tight layouts like the map edge editor */
+  compact?: boolean;
+}
+
+/**
+ * Collapsible editor for health check rules on a dependency edge.
+ * When rules are configured, the dependency only triggers for failures
+ * of the specified health checks (with optional per-check impact override).
+ */
+export const HealthCheckRulesEditor: React.FC<Props> = ({
+  targetSystemId,
+  rules,
+  onChange,
+  compact = false,
+}) => {
+  const [expanded, setExpanded] = useState(rules.length > 0);
+
+  // Fetch health checks for the target (upstream) system
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+  const { data: associations } =
+    healthCheckClient.getSystemAssociations.useQuery(
+      { systemId: targetSystemId },
+      { enabled: !!targetSystemId },
+    );
+
+  const availableChecks = associations ?? [];
+
+  // Filter out already-added checks
+  const unusedChecks = availableChecks.filter(
+    (check) => !rules.some((r) => r.healthCheckId === check.configurationId),
+  );
+
+  const handleAddRule = (configurationId: string) => {
+    onChange([
+      ...rules,
+      { healthCheckId: configurationId, overrideImpactType: "critical" },
+    ]);
+  };
+
+  const handleRemoveRule = (healthCheckId: string) => {
+    onChange(rules.filter((r) => r.healthCheckId !== healthCheckId));
+  };
+
+  const handleImpactChange = (
+    healthCheckId: string,
+    impactType: ImpactType,
+  ) => {
+    onChange(
+      rules.map((r) =>
+        r.healthCheckId === healthCheckId
+          ? { ...r, overrideImpactType: impactType }
+          : r,
+      ),
+    );
+  };
+
+  const getCheckName = (healthCheckId: string): string =>
+    availableChecks.find((c) => c.configurationId === healthCheckId)
+      ?.configurationName ?? healthCheckId;
+
+  if (availableChecks.length === 0) {
+    return;
+  }
+
+  return (
+    <div
+      className={`rounded-lg border border-border ${compact ? "p-2" : "p-3"} bg-muted/20`}
+    >
+      <button
+        type="button"
+        className="flex items-center justify-between w-full text-left"
+        onClick={() => setExpanded(!expanded)}
+      >
+        <div className="flex items-center gap-2">
+          <Activity className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className={`font-medium ${compact ? "text-xs" : "text-sm"}`}>
+            Health check rules
+          </span>
+          {rules.length > 0 && (
+            <Badge variant="outline" className="text-xs h-5">
+              {rules.length}
+            </Badge>
+          )}
+        </div>
+        {expanded ? (
+          <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        )}
+      </button>
+
+      {expanded && (
+        <div className="mt-2 space-y-2">
+          <p className="text-xs text-muted-foreground">
+            When rules are configured, this dependency only triggers warnings
+            when the specified health checks fail. Each rule can override the
+            impact type.
+          </p>
+
+          {/* Existing rules */}
+          {rules.map((rule) => (
+            <div
+              key={rule.healthCheckId}
+              className="flex items-center gap-2 rounded border border-border bg-background p-2"
+            >
+              <span className="text-xs flex-1 truncate font-medium">
+                {getCheckName(rule.healthCheckId)}
+              </span>
+              <select
+                className="text-xs rounded border border-input bg-background px-2 py-1"
+                value={rule.overrideImpactType}
+                onChange={(e) =>
+                  handleImpactChange(
+                    rule.healthCheckId,
+                    e.target.value as ImpactType,
+                  )
+                }
+              >
+                <option value="informational">Info</option>
+                <option value="degraded">Degraded</option>
+                <option value="critical">Critical</option>
+              </select>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => handleRemoveRule(rule.healthCheckId)}
+              >
+                <Trash2 className="h-3 w-3 text-destructive" />
+              </Button>
+            </div>
+          ))}
+
+          {/* Add new rule */}
+          {unusedChecks.length > 0 && (
+            <div className="flex items-center gap-2">
+              <select
+                id="add-hc-rule"
+                className="flex-1 text-xs rounded border border-input bg-background px-2 py-1.5"
+                defaultValue=""
+                onChange={(e) => {
+                  if (e.target.value) {
+                    handleAddRule(e.target.value);
+                    e.target.value = "";
+                  }
+                }}
+              >
+                <option value="" disabled>
+                  Add health check...
+                </option>
+                {unusedChecks.map((check) => (
+                  <option
+                    key={check.configurationId}
+                    value={check.configurationId}
+                  >
+                    {check.configurationName}
+                  </option>
+                ))}
+              </select>
+              <Plus className="h-3.5 w-3.5 text-muted-foreground" />
+            </div>
+          )}
+
+          {rules.length === 0 && unusedChecks.length > 0 && (
+            <p className="text-xs text-muted-foreground/60 italic">
+              No rules configured — all health check failures trigger this
+              dependency.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/canvas/DependencyEdge.tsx

@@ -0,0 +1,89 @@
+
+import {
+  BaseEdge,
+  getBezierPath,
+  type EdgeProps,
+  type Edge,
+} from "@xyflow/react";
+import type { ImpactType } from "@checkstack/dependency-common";
+
+export interface DependencyEdgeData extends Record<string, unknown> {
+  impactType: ImpactType;
+  transitive: boolean;
+  label?: string | null;
+}
+
+export type DependencyEdge = Edge<DependencyEdgeData, "dependency">;
+
+const impactColors: Record<ImpactType, string> = {
+  informational: "stroke-sky-400/50",
+  degraded: "stroke-amber-400/60",
+  critical: "stroke-red-400/70",
+};
+
+const impactStrokeWidths: Record<ImpactType, number> = {
+  informational: 1.5,
+  degraded: 2,
+  critical: 2.5,
+};
+
+/**
+ * Custom React Flow edge displaying dependency impact type via color + thickness.
+ * Transitive edges use dashed stroke.
+ */
+export function DependencyEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  selected,
+}: EdgeProps<DependencyEdge>) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const impactType = data?.impactType ?? "informational";
+  const isTransitive = data?.transitive ?? false;
+  const colorClass = impactColors[impactType];
+  const strokeWidth = impactStrokeWidths[impactType];
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        className={`${colorClass} ${selected ? "!stroke-primary" : ""}`}
+        style={{
+          strokeWidth: selected ? strokeWidth + 1 : strokeWidth,
+          strokeDasharray: isTransitive ? "6 4" : undefined,
+        }}
+      />
+
+      {/* Edge label */}
+      {data?.label && (
+        <foreignObject
+          x={labelX - 40}
+          y={labelY - 10}
+          width={80}
+          height={20}
+          className="pointer-events-none overflow-visible"
+        >
+          <div className="flex justify-center">
+            <span className="text-[10px] bg-background/90 border border-border rounded px-1.5 py-0.5 text-muted-foreground whitespace-nowrap">
+              {data.label}
+            </span>
+          </div>
+        </foreignObject>
+      )}
+    </>
+  );
+}

package/src/components/canvas/SystemNode.tsx

@@ -0,0 +1,142 @@
+import { memo } from "react";
+import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
+
+export interface SystemNodeData extends Record<string, unknown> {
+  label: string;
+  status?: "operational" | "degraded" | "down";
+  derivedState?: "info" | "degraded" | "down";
+  systemId: string;
+}
+
+export type SystemNode = Node<SystemNodeData, "system">;
+
+const statusStyles: Record<string, { border: string; bg: string; glow: string; dot: string }> = {
+  operational: {
+    border: "border-emerald-500/40",
+    bg: "bg-emerald-500/5",
+    glow: "shadow-emerald-500/10",
+    dot: "bg-emerald-500",
+  },
+  degraded: {
+    border: "border-amber-500/40",
+    bg: "bg-amber-500/5",
+    glow: "shadow-amber-500/10",
+    dot: "bg-amber-500",
+  },
+  down: {
+    border: "border-red-500/40",
+    bg: "bg-red-500/5",
+    glow: "shadow-red-500/10",
+    dot: "bg-red-500",
+  },
+};
+
+function combineStatus(
+  status?: string,
+  derivedState?: string,
+): "operational" | "degraded" | "down" {
+  const order = { operational: 0, info: 0, degraded: 1, down: 2 };
+  const ownLevel = order[(status ?? "operational") as keyof typeof order] ?? 0;
+  const derivedLevel =
+    order[(derivedState ?? "operational") as keyof typeof order] ?? 0;
+  const level = Math.max(ownLevel, derivedLevel);
+  if (level >= 2) return "down";
+  if (level >= 1) return "degraded";
+  return "operational";
+}
+
+/**
+ * Custom React Flow node representing a system in the dependency graph.
+ * Color-coded by worst of own status and derived warning state.
+ */
+export const SystemNodeComponent = memo(function SystemNodeComponent({
+  data,
+  selected,
+}: NodeProps<SystemNode>) {
+  const effectiveStatus = combineStatus(data.status, data.derivedState);
+  const styles = statusStyles[effectiveStatus];
+
+  return (
+    <>
+      {/* Target handle (left) — "I am depended upon" */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!w-2.5 !h-2.5 !bg-muted-foreground/40 !border-2 !border-background"
+      />
+
+      <div
+        className={`
+          px-4 py-3 rounded-xl border-2 shadow-lg backdrop-blur-sm
+          transition-all duration-200
+          ${styles.border} ${styles.bg} ${styles.glow}
+          ${selected ? "ring-2 ring-primary ring-offset-2 ring-offset-background" : ""}
+          hover:scale-[1.02] cursor-grab active:cursor-grabbing
+          min-w-[140px] max-w-[200px]
+        `}
+      >
+        <div className="flex items-center gap-2">
+          {/* Status dot */}
+          <div className="relative flex-shrink-0">
+            <div
+              className={`w-2.5 h-2.5 rounded-full ${styles.dot}`}
+            />
+            {effectiveStatus !== "operational" && (
+              <div
+                className={`absolute inset-0 w-2.5 h-2.5 rounded-full ${styles.dot} animate-ping opacity-75`}
+              />
+            )}
+          </div>
+
+          {/* System name */}
+          <span className="text-sm font-medium text-foreground truncate">
+            {data.label}
+          </span>
+        </div>
+
+        {/* Status labels */}
+        <div className="mt-1.5 flex flex-col gap-0.5">
+          <span
+            className={`text-[10px] uppercase tracking-wider font-semibold ${
+              (data.status ?? "operational") === "operational"
+                ? "text-emerald-500/70"
+                : (data.status ?? "operational") === "degraded"
+                  ? "text-amber-500/70"
+                  : "text-red-500/70"
+            }`}
+          >
+            {(data.status ?? "operational") === "operational"
+              ? "Healthy"
+              : (data.status ?? "operational") === "degraded"
+                ? "Degraded"
+                : "Unhealthy"}
+          </span>
+          {data.derivedState && (
+            <span
+              className={`text-[10px] uppercase tracking-wider font-semibold ${
+                data.derivedState === "info"
+                  ? "text-blue-400/70"
+                  : data.derivedState === "degraded"
+                    ? "text-amber-500/70"
+                    : "text-red-500/70"
+              }`}
+            >
+              {data.derivedState === "info"
+                ? "↑ Upstream issue"
+                : data.derivedState === "degraded"
+                  ? "↑ Upstream degraded"
+                  : "↑ Upstream down"}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Source handle (right) — "I depend on..." */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!w-2.5 !h-2.5 !bg-muted-foreground/40 !border-2 !border-background"
+      />
+    </>
+  );
+});

package/src/index.tsx

@@ -0,0 +1,51 @@
+import {
+  createFrontendPlugin,
+  createSlotExtension,
+  UserMenuItemsSlot,
+} from "@checkstack/frontend-api";
+import {
+  pluginMetadata,
+  dependencyRoutes,
+  dependencyAccess,
+} from "@checkstack/dependency-common";
+import {
+  SystemDetailsTopSlot,
+  SystemStateBadgesSlot,
+  SystemEditorSlot,
+} from "@checkstack/catalog-common";
+import { DependencyBadge } from "./components/DependencyBadge";
+import { DependencyAlert } from "./components/DependencyAlert";
+import { DependencyEditor } from "./components/DependencyEditor";
+import { DependencyMapPage } from "./components/DependencyMapPage";
+import { DependencyMenuItems } from "./components/DependencyMenuItems";
+
+export default createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: dependencyRoutes.routes.map,
+      element: <DependencyMapPage />,
+      title: "Dependency Map",
+      accessRule: dependencyAccess.dependency.read,
+    },
+  ],
+  apis: [],
+  extensions: [
+    createSlotExtension(SystemStateBadgesSlot, {
+      id: "dependency.system-state-badge",
+      component: DependencyBadge,
+    }),
+    createSlotExtension(SystemDetailsTopSlot, {
+      id: "dependency.system-details-top.alert",
+      component: DependencyAlert,
+    }),
+    createSlotExtension(SystemEditorSlot, {
+      id: "dependency.system-editor",
+      component: DependencyEditor,
+    }),
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "dependency.user-menu.map",
+      component: DependencyMenuItems,
+    }),
+  ],
+});

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@checkstack/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ]
+}