@checkstack/catalog-frontend 0.10.7 → 0.11.0

package/src/components/manage/GroupsTab.tsx

@@ -0,0 +1,274 @@
+import { useMemo, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Input,
+  EmptyState,
+  ListEmptyState,
+} from "@checkstack/ui";
+import {
+  useProvenanceLock,
+  GitOpsSourceBadge,
+} from "@checkstack/gitops-frontend";
+import { Plus, LayoutGrid, Check, Pencil, Trash2, X } from "lucide-react";
+import type { Group, System } from "../../api";
+import { AssignMenu } from "./AssignMenu";
+
+export interface GroupsTabProps {
+  /** Groups after search/filter. */
+  groups: Group[];
+  totalCount: number;
+  allSystems: System[];
+  onAddGroup: () => void;
+  onDeleteGroup: (id: string) => void;
+  onRenameGroup: (id: string, name: string) => void;
+  onAddToGroup: (systemId: string, groupId: string) => void;
+  onRemoveFromGroup: (groupId: string, systemId: string) => void;
+  onClearFilters: () => void;
+}
+
+export function GroupsTab(props: GroupsTabProps): React.ReactElement {
+  const { groups, totalCount, allSystems, onAddGroup } = props;
+
+  const systemsById = useMemo(() => {
+    const map = new Map<string, System>();
+    for (const system of allSystems) map.set(system.id, system);
+    return map;
+  }, [allSystems]);
+
+  const header = (
+    <div className="mb-4 flex items-center justify-between gap-2">
+      <h2 className="flex items-center gap-2 text-lg font-semibold">
+        <LayoutGrid className="h-5 w-5 text-muted-foreground" />
+        Groups
+        <span className="text-sm font-normal text-muted-foreground">
+          {totalCount}
+        </span>
+      </h2>
+      <Button size="sm" onClick={onAddGroup}>
+        <Plus className="mr-2 h-4 w-4" />
+        Add Group
+      </Button>
+    </div>
+  );
+
+  if (totalCount === 0) {
+    return (
+      <div>
+        {header}
+        <EmptyState
+          icon={<LayoutGrid className="size-10" />}
+          title="No groups yet"
+          description="Groups roll up the health of related systems into one status - useful per team, product, or environment."
+          steps={[
+            "Click “Add Group” and give it a meaningful name.",
+            "Add systems to the group from here or the Systems tab.",
+            "Subscribe to the group to alert your team on rolled-up incidents.",
+          ]}
+          actions={
+            <Button onClick={onAddGroup}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add your first group
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {header}
+      {groups.length === 0 ? (
+        <ListEmptyState
+          resource="groups"
+          description="No groups match the current search."
+          actions={
+            <Button variant="outline" onClick={props.onClearFilters}>
+              Clear filters
+            </Button>
+          }
+        />
+      ) : (
+        <div className="rounded-lg border border-border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-64">Name</TableHead>
+                <TableHead>Systems</TableHead>
+                <TableHead className="w-px text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {groups.map((group) => (
+                <GroupRow
+                  key={group.id}
+                  group={group}
+                  systemsById={systemsById}
+                  allSystems={allSystems}
+                  onDelete={props.onDeleteGroup}
+                  onRename={props.onRenameGroup}
+                  onAddToGroup={props.onAddToGroup}
+                  onRemoveFromGroup={props.onRemoveFromGroup}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface GroupRowProps {
+  group: Group;
+  systemsById: Map<string, System>;
+  allSystems: System[];
+  onDelete: (id: string) => void;
+  onRename: (id: string, name: string) => void;
+  onAddToGroup: (systemId: string, groupId: string) => void;
+  onRemoveFromGroup: (groupId: string, systemId: string) => void;
+}
+
+function GroupRow({
+  group,
+  systemsById,
+  allSystems,
+  onDelete,
+  onRename,
+  onAddToGroup,
+  onRemoveFromGroup,
+}: GroupRowProps): React.ReactElement {
+  const { isLocked, provenance } = useProvenanceLock({
+    kind: "Group",
+    entityId: group.id,
+  });
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(group.name);
+
+  const memberIds = group.systemIds ?? [];
+  const members = memberIds
+    .map((id) => systemsById.get(id))
+    .filter((s): s is System => s !== undefined);
+  const available = allSystems.filter((s) => !memberIds.includes(s.id));
+  const lockTitle = isLocked ? "Managed by GitOps" : undefined;
+
+  const commitRename = (): void => {
+    const next = draft.trim();
+    if (next && next !== group.name) onRename(group.id, next);
+    else setDraft(group.name);
+    setEditing(false);
+  };
+
+  return (
+    <TableRow>
+      <TableCell className="align-top">
+        {editing ? (
+          <Input
+            autoFocus
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onBlur={commitRename}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commitRename();
+              if (e.key === "Escape") {
+                setDraft(group.name);
+                setEditing(false);
+              }
+            }}
+            className="h-8"
+            aria-label={`Rename ${group.name}`}
+          />
+        ) : (
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-foreground">{group.name}</span>
+            {isLocked && provenance ? (
+              <GitOpsSourceBadge provenance={provenance} />
+            ) : (
+              <button
+                type="button"
+                aria-label={`Rename ${group.name}`}
+                className="text-muted-foreground hover:text-foreground"
+                onClick={() => {
+                  setDraft(group.name);
+                  setEditing(true);
+                }}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        )}
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {members.length === 0 && (
+            <span className="text-xs text-muted-foreground">No systems</span>
+          )}
+          {members.map((system) => (
+            <span
+              key={system.id}
+              className="inline-flex items-center gap-1 rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
+            >
+              {system.name}
+              <button
+                type="button"
+                disabled={isLocked}
+                title={lockTitle ?? `Remove ${system.name}`}
+                aria-label={`Remove ${system.name} from ${group.name}`}
+                onClick={() => onRemoveFromGroup(group.id, system.id)}
+                className="text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </span>
+          ))}
+          <AssignMenu
+            disabled={isLocked || available.length === 0}
+            triggerLabel={lockTitle ?? `Add a system to ${group.name}`}
+            trigger={
+              <>
+                <Plus className="h-3 w-3" />
+                System
+              </>
+            }
+            items={available.map((s) => ({ id: s.id, label: s.name }))}
+            emptyLabel="All systems added"
+            onSelect={(systemId) => onAddToGroup(systemId, group.id)}
+          />
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center justify-end gap-1">
+          {editing && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              aria-label="Save name"
+              onClick={commitRename}
+            >
+              <Check className="h-3.5 w-3.5" />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive/90"
+            disabled={isLocked}
+            title={lockTitle}
+            aria-label={`Delete ${group.name}`}
+            onClick={() => onDelete(group.id)}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/components/manage/SystemsTab.tsx

@@ -0,0 +1,430 @@
+import { useMemo, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Checkbox,
+  EmptyState,
+  ListEmptyState,
+  cn,
+} from "@checkstack/ui";
+import { ExtensionSlot } from "@checkstack/frontend-api";
+import {
+  CatalogSystemActionsSlot,
+  SystemStateBadgesSlot,
+} from "@checkstack/catalog-common";
+import {
+  useProvenanceLock,
+  GitOpsSourceBadge,
+} from "@checkstack/gitops-frontend";
+import { Plus, Server, Edit, Trash2, X, Trash } from "lucide-react";
+import type { Environment, Group, System } from "../../api";
+import { AssignMenu } from "./AssignMenu";
+
+export interface SystemsTabProps {
+  /** Systems after search/filter. */
+  systems: System[];
+  /** Total systems before filtering (distinguishes empty-catalog vs no-matches). */
+  totalCount: number;
+  allGroups: Group[];
+  allEnvironments: Environment[];
+  /** systemId -> the group ids it belongs to. */
+  systemGroupMap: Map<string, string[]>;
+  /** systemId -> the environment ids it's attached to. */
+  systemEnvMap: Map<string, string[]>;
+  onAddSystem: () => void;
+  onEditSystem: (system: System) => void;
+  onDeleteSystem: (id: string) => void;
+  onBulkDeleteSystems: (ids: string[]) => void;
+  onAddToGroup: (systemId: string, groupId: string) => void;
+  onRemoveFromGroup: (groupId: string, systemId: string) => void;
+  onAddToEnvironment: (systemId: string, environmentId: string) => void;
+  onRemoveFromEnvironment: (systemId: string, environmentId: string) => void;
+  onClearFilters: () => void;
+}
+
+export function SystemsTab(props: SystemsTabProps): React.ReactElement {
+  const {
+    systems,
+    totalCount,
+    allGroups,
+    allEnvironments,
+    systemGroupMap,
+    systemEnvMap,
+    onAddSystem,
+    onBulkDeleteSystems,
+    onAddToGroup,
+    onAddToEnvironment,
+  } = props;
+
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const visibleIds = useMemo(() => systems.map((s) => s.id), [systems]);
+  const selectedVisible = visibleIds.filter((id) => selected.has(id));
+  const allSelected =
+    visibleIds.length > 0 && selectedVisible.length === visibleIds.length;
+
+  const toggle = (id: string): void =>
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  const toggleAll = (): void =>
+    setSelected(allSelected ? new Set() : new Set(visibleIds));
+
+  const clearSelection = (): void => setSelected(new Set());
+
+  const header = (
+    <div className="mb-4 flex items-center justify-between gap-2">
+      <h2 className="flex items-center gap-2 text-lg font-semibold">
+        <Server className="h-5 w-5 text-muted-foreground" />
+        Systems
+        <span className="text-sm font-normal text-muted-foreground">
+          {totalCount}
+        </span>
+      </h2>
+      <Button size="sm" onClick={onAddSystem}>
+        <Plus className="mr-2 h-4 w-4" />
+        Add System
+      </Button>
+    </div>
+  );
+
+  if (totalCount === 0) {
+    return (
+      <div>
+        {header}
+        <EmptyState
+          icon={<Server className="size-10" />}
+          title="No systems yet"
+          description="Systems are the things you monitor. Add one, then attach health checks, SLOs, maintenance windows and incident history to it."
+          steps={[
+            "Click “Add System” to register your first service, host or job.",
+            "Group related systems so dashboards and on-call rotations stay tidy.",
+            "Wire health checks so a system's status reflects reality.",
+          ]}
+          actions={
+            <Button onClick={onAddSystem}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add your first system
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {header}
+
+      {selectedVisible.length > 0 && (
+        <div className="mb-3 flex items-center gap-3 rounded-md border border-border bg-muted/40 px-3 py-2">
+          <span className="text-sm font-medium">
+            {selectedVisible.length} selected
+          </span>
+          <AssignMenu
+            triggerLabel="Assign selected systems to a group"
+            trigger={<span>Assign to group</span>}
+            items={allGroups.map((g) => ({ id: g.id, label: g.name }))}
+            emptyLabel="No groups yet"
+            onSelect={(groupId) => {
+              for (const sysId of selectedVisible) {
+                if (!systemGroupMap.get(sysId)?.includes(groupId)) {
+                  onAddToGroup(sysId, groupId);
+                }
+              }
+              clearSelection();
+            }}
+          />
+          <AssignMenu
+            triggerLabel="Attach selected systems to an environment"
+            trigger={<span>Add to environment</span>}
+            items={allEnvironments.map((e) => ({ id: e.id, label: e.name }))}
+            emptyLabel="No environments yet"
+            onSelect={(envId) => {
+              for (const sysId of selectedVisible) {
+                if (!systemEnvMap.get(sysId)?.includes(envId)) {
+                  onAddToEnvironment(sysId, envId);
+                }
+              }
+              clearSelection();
+            }}
+          />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive/90"
+            onClick={() => {
+              onBulkDeleteSystems(selectedVisible);
+              clearSelection();
+            }}
+          >
+            <Trash className="mr-1.5 h-4 w-4" />
+            Delete
+          </Button>
+        </div>
+      )}
+
+      {systems.length === 0 ? (
+        <ListEmptyState
+          resource="systems"
+          description="No systems match the current search and filters."
+          actions={
+            <Button variant="outline" onClick={props.onClearFilters}>
+              Clear filters
+            </Button>
+          }
+        />
+      ) : (
+        <div className="rounded-lg border border-border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10">
+                  <Checkbox
+                    checked={allSelected}
+                    onCheckedChange={toggleAll}
+                    aria-label="Select all systems"
+                  />
+                </TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead className="w-44">Health</TableHead>
+                <TableHead>Groups</TableHead>
+                <TableHead>Environments</TableHead>
+                <TableHead className="w-px text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {systems.map((system) => (
+                <SystemRow
+                  key={system.id}
+                  system={system}
+                  allGroups={allGroups}
+                  allEnvironments={allEnvironments}
+                  assignedGroupIds={systemGroupMap.get(system.id) ?? []}
+                  assignedEnvIds={systemEnvMap.get(system.id) ?? []}
+                  selected={selected.has(system.id)}
+                  onToggleSelected={() => toggle(system.id)}
+                  onEdit={props.onEditSystem}
+                  onDelete={props.onDeleteSystem}
+                  onAddToGroup={props.onAddToGroup}
+                  onRemoveFromGroup={props.onRemoveFromGroup}
+                  onAddToEnvironment={props.onAddToEnvironment}
+                  onRemoveFromEnvironment={props.onRemoveFromEnvironment}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SystemRowProps {
+  system: System;
+  allGroups: Group[];
+  allEnvironments: Environment[];
+  assignedGroupIds: string[];
+  assignedEnvIds: string[];
+  selected: boolean;
+  onToggleSelected: () => void;
+  onEdit: (system: System) => void;
+  onDelete: (id: string) => void;
+  onAddToGroup: (systemId: string, groupId: string) => void;
+  onRemoveFromGroup: (groupId: string, systemId: string) => void;
+  onAddToEnvironment: (systemId: string, environmentId: string) => void;
+  onRemoveFromEnvironment: (systemId: string, environmentId: string) => void;
+}
+
+/** A removable membership chip. */
+function Chip({
+  label,
+  onRemove,
+  removeLabel,
+  disabled,
+  disabledTitle,
+}: {
+  label: string;
+  onRemove: () => void;
+  removeLabel: string;
+  disabled?: boolean;
+  disabledTitle?: string;
+}): React.ReactElement {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
+      {label}
+      <button
+        type="button"
+        disabled={disabled}
+        title={disabled ? disabledTitle : removeLabel}
+        aria-label={removeLabel}
+        onClick={onRemove}
+        className="text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </span>
+  );
+}
+
+function SystemRow({
+  system,
+  allGroups,
+  allEnvironments,
+  assignedGroupIds,
+  assignedEnvIds,
+  selected,
+  onToggleSelected,
+  onEdit,
+  onDelete,
+  onAddToGroup,
+  onRemoveFromGroup,
+  onAddToEnvironment,
+  onRemoveFromEnvironment,
+}: SystemRowProps): React.ReactElement {
+  const { isLocked, provenance } = useProvenanceLock({
+    kind: "System",
+    entityId: system.id,
+  });
+
+  const assignedGroups = allGroups.filter((g) =>
+    assignedGroupIds.includes(g.id),
+  );
+  const availableGroups = allGroups.filter(
+    (g) => !assignedGroupIds.includes(g.id),
+  );
+  const assignedEnvs = allEnvironments.filter((e) =>
+    assignedEnvIds.includes(e.id),
+  );
+  const availableEnvs = allEnvironments.filter(
+    (e) => !assignedEnvIds.includes(e.id),
+  );
+  const lockTitle = isLocked ? "Managed by GitOps" : undefined;
+
+  return (
+    <TableRow data-state={selected ? "selected" : undefined}>
+      <TableCell>
+        <Checkbox
+          checked={selected}
+          onCheckedChange={onToggleSelected}
+          aria-label={`Select ${system.name}`}
+        />
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center gap-2">
+          <div className="min-w-0">
+            <p className="font-medium leading-snug text-foreground">
+              {system.name}
+            </p>
+            {system.description && (
+              <p className="truncate text-xs text-muted-foreground">
+                {system.description}
+              </p>
+            )}
+          </div>
+          {isLocked && provenance && (
+            <GitOpsSourceBadge provenance={provenance} />
+          )}
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-wrap items-center gap-1">
+          <ExtensionSlot slot={SystemStateBadgesSlot} context={{ system }} />
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {assignedGroups.map((group) => (
+            <Chip
+              key={group.id}
+              label={group.name}
+              removeLabel={`Remove ${system.name} from ${group.name}`}
+              disabled={isLocked}
+              disabledTitle={lockTitle}
+              onRemove={() => onRemoveFromGroup(group.id, system.id)}
+            />
+          ))}
+          <AssignMenu
+            disabled={isLocked || availableGroups.length === 0}
+            triggerLabel={lockTitle ?? `Add ${system.name} to a group`}
+            trigger={
+              <>
+                <Plus className="h-3 w-3" />
+                Group
+              </>
+            }
+            items={availableGroups.map((g) => ({ id: g.id, label: g.name }))}
+            emptyLabel="No more groups"
+            onSelect={(groupId) => onAddToGroup(system.id, groupId)}
+          />
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {assignedEnvs.map((env) => (
+            <Chip
+              key={env.id}
+              label={env.name}
+              removeLabel={`Remove ${system.name} from ${env.name}`}
+              onRemove={() => onRemoveFromEnvironment(system.id, env.id)}
+            />
+          ))}
+          <AssignMenu
+            disabled={availableEnvs.length === 0}
+            triggerLabel={`Attach ${system.name} to an environment`}
+            trigger={
+              <>
+                <Plus className="h-3 w-3" />
+                Environment
+              </>
+            }
+            items={availableEnvs.map((e) => ({ id: e.id, label: e.name }))}
+            emptyLabel="No more environments"
+            onSelect={(envId) => onAddToEnvironment(system.id, envId)}
+          />
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center justify-end gap-1">
+          <ExtensionSlot
+            slot={CatalogSystemActionsSlot}
+            context={{ systemId: system.id, systemName: system.name }}
+          />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0"
+            disabled={isLocked}
+            title={lockTitle}
+            aria-label={`Edit ${system.name}`}
+            onClick={() => onEdit(system)}
+          >
+            <Edit className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              "h-7 w-7 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive/90",
+            )}
+            disabled={isLocked}
+            title={lockTitle}
+            aria-label={`Delete ${system.name}`}
+            onClick={() => onDelete(system.id)}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}