@rxtx4816/cockpit-plugin-base-react 1.0.0

package/src/systemd/ServiceControl.tsx

@@ -0,0 +1,172 @@
+import { useState, type ReactNode } from "react";
+import { Button, Flex, FlexItem, Spinner } from "@patternfly/react-core";
+import { ConfirmDialog } from "../components/ConfirmDialog";
+import { useToast } from "../components/ToastProvider";
+import { startService, stopService, restartService, reloadService } from "./api";
+import type { ServiceStatus } from "./types";
+
+type PendingAction = "start" | "stop" | "restart" | "reload";
+
+export interface ServiceControlLabels {
+  start?: string;
+  stop?: string;
+  restart?: string;
+  reload?: string;
+  cancel?: string;
+  confirmAction?: string;
+  confirmStartTitle?: string;
+  confirmStartBody?: string;
+  confirmStopTitle?: string;
+  confirmStopBody?: string;
+  confirmRestartTitle?: string;
+  confirmRestartBody?: string;
+  confirmReloadTitle?: string;
+  confirmReloadBody?: string;
+}
+
+const DEFAULTS: Required<ServiceControlLabels> = {
+  start: "Start",
+  stop: "Stop",
+  restart: "Restart",
+  reload: "Reload",
+  cancel: "Cancel",
+  confirmAction: "Confirm",
+  confirmStartTitle: "Start service?",
+  confirmStartBody: "The service will be started.",
+  confirmStopTitle: "Stop service?",
+  confirmStopBody: "The service will be stopped.",
+  confirmRestartTitle: "Restart service?",
+  confirmRestartBody: "The service will be restarted.",
+  confirmReloadTitle: "Reload service?",
+  confirmReloadBody: "The service configuration will be reloaded.",
+};
+
+interface Props {
+  unit: string;
+  status: ServiceStatus;
+  loading?: boolean;
+  onRefresh?: () => void;
+  statusBadge?: ReactNode;
+  labels?: ServiceControlLabels;
+}
+
+export function ServiceControl({ unit, status, loading = false, onRefresh, statusBadge, labels }: Props) {
+  const toast = useToast();
+  const l = { ...DEFAULTS, ...labels };
+  const [busy, setBusy] = useState(false);
+  const [pendingAction, setPendingAction] = useState<PendingAction | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const ACTION_FN: Record<PendingAction, () => Promise<void>> = {
+    start: () => startService(unit),
+    stop: () => stopService(unit),
+    restart: () => restartService(unit),
+    reload: () => reloadService(unit),
+  };
+
+  async function runAction() {
+    if (!pendingAction) return;
+    setBusy(true);
+    setActionError(null);
+    try {
+      await ACTION_FN[pendingAction]();
+      setPendingAction(null);
+      onRefresh?.();
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setActionError(msg);
+      toast.error(`${pendingAction} failed`, msg);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function openAction(action: PendingAction) {
+    setActionError(null);
+    setPendingAction(action);
+  }
+
+  const isRunning = status === "active";
+  const notInstalled = status === "not-installed";
+
+  const confirmTitle: Record<PendingAction, string> = {
+    start: l.confirmStartTitle,
+    stop: l.confirmStopTitle,
+    restart: l.confirmRestartTitle,
+    reload: l.confirmReloadTitle,
+  };
+
+  const confirmBody: Record<PendingAction, string> = {
+    start: l.confirmStartBody,
+    stop: l.confirmStopBody,
+    restart: l.confirmRestartBody,
+    reload: l.confirmReloadBody,
+  };
+
+  const isDanger = pendingAction === "stop" || pendingAction === "restart";
+
+  return (
+    <>
+      <Flex alignItems={{ default: "alignItemsCenter" }} gap={{ default: "gapSm" }}>
+        {(loading || statusBadge) && (
+          <FlexItem>
+            {loading ? <Spinner size="sm" /> : statusBadge}
+          </FlexItem>
+        )}
+        <FlexItem>
+          <Button
+            variant="primary"
+            size="sm"
+            isDisabled={busy || notInstalled || isRunning}
+            onClick={() => openAction("start")}
+          >
+            {l.start}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="secondary"
+            size="sm"
+            isDisabled={busy || notInstalled || !isRunning}
+            onClick={() => openAction("stop")}
+          >
+            {l.stop}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="secondary"
+            size="sm"
+            isDisabled={busy || notInstalled || !isRunning}
+            onClick={() => openAction("restart")}
+          >
+            {l.restart}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="plain"
+            size="sm"
+            isDisabled={busy || notInstalled || !isRunning}
+            onClick={() => openAction("reload")}
+          >
+            {l.reload}
+          </Button>
+        </FlexItem>
+      </Flex>
+
+      <ConfirmDialog
+        isOpen={pendingAction !== null}
+        title={pendingAction ? confirmTitle[pendingAction] : ""}
+        body={pendingAction ? confirmBody[pendingAction] : undefined}
+        confirmLabel={l.confirmAction}
+        cancelLabel={l.cancel}
+        variant={isDanger ? "danger" : "primary"}
+        loading={busy}
+        error={actionError}
+        onConfirm={() => void runAction()}
+        onClose={() => { if (!busy) { setPendingAction(null); setActionError(null); } }}
+      />
+    </>
+  );
+}

package/src/systemd/api.test.ts

@@ -0,0 +1,83 @@
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { mockProcess } from "../testing/helpers";
+import {
+  getServiceStatus,
+  startService,
+  stopService,
+  restartService,
+  reloadService,
+} from "./api";
+
+const mockSpawn = vi.fn();
+vi.stubGlobal("cockpit", { spawn: mockSpawn });
+
+beforeEach(() => { mockSpawn.mockReset(); });
+
+describe("getServiceStatus", () => {
+  it("returns 'not-installed' when which fails", async () => {
+    mockSpawn.mockRejectedValueOnce(new Error("not found"));
+    expect(await getServiceStatus("caddy")).toBe("not-installed");
+  });
+
+  it("returns 'active' when systemctl reports active", async () => {
+    mockSpawn.mockResolvedValueOnce(""); // which succeeds
+    mockSpawn.mockResolvedValueOnce("active\n");
+    expect(await getServiceStatus("caddy")).toBe("active");
+  });
+
+  it("returns 'inactive' when systemctl reports inactive", async () => {
+    mockSpawn.mockResolvedValueOnce("");
+    mockSpawn.mockResolvedValueOnce("inactive\n");
+    expect(await getServiceStatus("caddy")).toBe("inactive");
+  });
+
+  it("returns 'failed' when systemctl reports failed", async () => {
+    mockSpawn.mockResolvedValueOnce("");
+    mockSpawn.mockResolvedValueOnce("failed\n");
+    expect(await getServiceStatus("caddy")).toBe("failed");
+  });
+
+  it("returns 'unknown' for unexpected systemctl output", async () => {
+    mockSpawn.mockResolvedValueOnce("");
+    mockSpawn.mockResolvedValueOnce("activating\n");
+    expect(await getServiceStatus("caddy")).toBe("unknown");
+  });
+
+  it("returns 'unknown' when systemctl itself throws", async () => {
+    mockSpawn.mockResolvedValueOnce("");
+    mockSpawn.mockRejectedValueOnce(new Error("timeout"));
+    expect(await getServiceStatus("nginx")).toBe("unknown");
+  });
+
+  it("passes the unit name to which", async () => {
+    mockSpawn.mockRejectedValueOnce(new Error("not found"));
+    await getServiceStatus("nginx");
+    expect(mockSpawn).toHaveBeenCalledWith(["which", "nginx"]);
+  });
+});
+
+describe("service control functions", () => {
+  beforeEach(() => {
+    mockSpawn.mockResolvedValue(mockProcess(""));
+  });
+
+  it("startService calls systemctl start with the unit", async () => {
+    await startService("caddy");
+    expect(mockSpawn).toHaveBeenCalledWith(["systemctl", "start", "caddy"], { superuser: "try" });
+  });
+
+  it("stopService calls systemctl stop with the unit", async () => {
+    await stopService("nginx");
+    expect(mockSpawn).toHaveBeenCalledWith(["systemctl", "stop", "nginx"], { superuser: "try" });
+  });
+
+  it("restartService calls systemctl restart with the unit", async () => {
+    await restartService("caddy");
+    expect(mockSpawn).toHaveBeenCalledWith(["systemctl", "restart", "caddy"], { superuser: "try" });
+  });
+
+  it("reloadService calls systemctl reload with the unit", async () => {
+    await reloadService("caddy");
+    expect(mockSpawn).toHaveBeenCalledWith(["systemctl", "reload", "caddy"], { superuser: "try" });
+  });
+});

package/src/systemd/api.ts

@@ -0,0 +1,36 @@
+import type { ServiceStatus } from "./types";
+
+export async function getServiceStatus(unit: string): Promise<ServiceStatus> {
+  try {
+    await cockpit.spawn(["which", unit]);
+  } catch {
+    return "not-installed";
+  }
+
+  try {
+    const status = await cockpit.spawn(["systemctl", "is-active", unit]);
+    const trimmed = status.trim();
+    if (trimmed === "active") return "active";
+    if (trimmed === "inactive") return "inactive";
+    if (trimmed === "failed") return "failed";
+    return "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+export async function startService(unit: string): Promise<void> {
+  await cockpit.spawn(["systemctl", "start", unit], { superuser: "try" });
+}
+
+export async function stopService(unit: string): Promise<void> {
+  await cockpit.spawn(["systemctl", "stop", unit], { superuser: "try" });
+}
+
+export async function restartService(unit: string): Promise<void> {
+  await cockpit.spawn(["systemctl", "restart", unit], { superuser: "try" });
+}
+
+export async function reloadService(unit: string): Promise<void> {
+  await cockpit.spawn(["systemctl", "reload", unit], { superuser: "try" });
+}

package/src/systemd/index.ts

@@ -0,0 +1,5 @@
+export type { ServiceStatus } from "./types";
+export { getServiceStatus, startService, stopService, restartService, reloadService } from "./api";
+export { useServiceStatus } from "./useServiceStatus";
+export { ServiceControl } from "./ServiceControl";
+export type { ServiceControlLabels } from "./ServiceControl";

package/src/systemd/types.ts

@@ -0,0 +1 @@
+export type ServiceStatus = "active" | "inactive" | "failed" | "unknown" | "not-installed";

package/src/systemd/useServiceStatus.test.ts

@@ -0,0 +1,96 @@
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { useServiceStatus } from "./useServiceStatus";
+
+const mockSpawn = vi.fn();
+vi.stubGlobal("cockpit", { spawn: mockSpawn });
+
+function stubStatus(status: string) {
+  mockSpawn
+    .mockResolvedValueOnce("") // which <unit> succeeds
+    .mockResolvedValueOnce(`${status}\n`); // systemctl is-active <unit>
+}
+
+const flushAsync = async () => {
+  await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
+};
+
+beforeEach(() => { mockSpawn.mockReset(); });
+
+describe("useServiceStatus", () => {
+  it("starts with loading=true and status='unknown'", () => {
+    stubStatus("active");
+    const { result } = renderHook(() => useServiceStatus("caddy"));
+    expect(result.current.loading).toBe(true);
+    expect(result.current.status).toBe("unknown");
+  });
+
+  it("fetches status on mount and clears loading", async () => {
+    stubStatus("active");
+    const { result } = renderHook(() => useServiceStatus("caddy"));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.status).toBe("active");
+    expect(result.current.error).toBeNull();
+  });
+
+  it("resolves 'inactive' status", async () => {
+    stubStatus("inactive");
+    const { result } = renderHook(() => useServiceStatus("caddy"));
+    await waitFor(() => expect(result.current.status).toBe("inactive"));
+  });
+
+  it("resolves 'not-installed' when which fails", async () => {
+    mockSpawn.mockRejectedValueOnce(new Error("not found"));
+    const { result } = renderHook(() => useServiceStatus("caddy"));
+    await waitFor(() => expect(result.current.status).toBe("not-installed"));
+  });
+
+  it("passes the unit name through spawn calls", async () => {
+    stubStatus("active");
+    renderHook(() => useServiceStatus("nginx"));
+    await waitFor(() => expect(mockSpawn).toHaveBeenCalledWith(["which", "nginx"]));
+  });
+
+  it("polls at the given interval", async () => {
+    vi.useFakeTimers();
+    try {
+      stubStatus("inactive");
+      renderHook(() => useServiceStatus("caddy", 2000));
+
+      await act(flushAsync);
+      expect(mockSpawn).toHaveBeenCalledTimes(2); // which + systemctl (1 poll)
+
+      stubStatus("active");
+      await act(async () => {
+        vi.advanceTimersByTime(2000);
+        await flushAsync();
+      });
+      expect(mockSpawn).toHaveBeenCalledTimes(4); // 2 more spawn calls for 2nd poll
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("updates status across poll cycles", async () => {
+    vi.useFakeTimers();
+    try {
+      stubStatus("inactive");
+      const { result } = renderHook(() => useServiceStatus("caddy", 1000));
+
+      await act(flushAsync);
+      expect(result.current.status).toBe("inactive");
+
+      stubStatus("active");
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+        await flushAsync();
+      });
+      expect(result.current.status).toBe("active");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/systemd/useServiceStatus.ts

@@ -0,0 +1,29 @@
+import { useState, useCallback, useEffect } from "react";
+import { useAutoRefresh } from "../hooks/useAutoRefresh";
+import { getServiceStatus } from "./api";
+import type { ServiceStatus } from "./types";
+
+const DEFAULT_INTERVAL = 5000;
+
+export function useServiceStatus(unit: string, intervalMs = DEFAULT_INTERVAL) {
+  const [status, setStatus] = useState<ServiceStatus>("unknown");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const s = await getServiceStatus(unit);
+      setStatus(s);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [unit]);
+
+  useEffect(() => { void refresh(); }, [refresh]);
+  useAutoRefresh(refresh, intervalMs);
+
+  return { status, loading, error, refresh };
+}

package/src/testing/helpers.ts

@@ -0,0 +1,30 @@
+import { vi } from "vitest";
+
+export function mockProcess(data: string | string[], error?: string): CockpitProcess {
+  const chunks = Array.isArray(data) ? data : [data];
+  let streamCb: ((data: string) => void) | null = null;
+  const p = new Promise<string>((resolve, reject) => {
+    queueMicrotask(() => {
+      for (const chunk of chunks) {
+        if (streamCb && chunk) streamCb(chunk);
+      }
+      if (error) reject(new Error(error));
+      else resolve(chunks.join(""));
+    });
+  });
+  return Object.assign(p, {
+    stream: (cb: (data: string) => void) => { streamCb = cb; return p as CockpitProcess; },
+    close: vi.fn(),
+    input: vi.fn(),
+    wait: () => p,
+  }) as CockpitProcess;
+}
+
+export function mockHttpClient(responses: Record<string, string> = {}): CockpitHttpClient {
+  return {
+    get: vi.fn((path: string) => Promise.resolve(responses[path] ?? "{}")),
+    post: vi.fn(() => Promise.resolve("")),
+    request: vi.fn(() => Promise.resolve({ status: 200, headers: {}, data: "" })),
+    close: vi.fn(),
+  };
+}

package/src/testing/setup.ts

@@ -0,0 +1,57 @@
+// Base Vitest setup for Cockpit plugins.
+// Installs DOM mocks that must be in place before i18n initializes.
+// Each plugin's own setup.ts (listed second in vitest setupFiles) adds:
+//   - await import("../i18n")
+//   - vi.stubGlobal("cockpit", { spawn: ..., http: ... })
+
+import "@testing-library/jest-dom/vitest";
+import { vi } from "vitest";
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+
+// localStorage mock must be installed before i18n's cockpitDetector runs.
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => { store[key] = String(value); },
+    removeItem: (key: string) => { delete store[key]; },
+    clear: () => { store = {}; },
+    get length() { return Object.keys(store).length; },
+    key: (index: number) => Object.keys(store)[index] ?? null,
+  };
+})();
+vi.stubGlobal("localStorage", localStorageMock);
+Object.defineProperty(window, "localStorage", { value: localStorageMock });
+
+vi.stubGlobal("requestAnimationFrame", (callback: (timestamp: number) => void) => {
+  callback(0);
+  return 0;
+});
+vi.stubGlobal("cancelAnimationFrame", () => {});
+
+const consoleError = console.error.bind(console);
+vi.spyOn(console, "error").mockImplementation((...args: unknown[]) => {
+  const message = args.map(String).join(" ");
+  if (message.includes("not wrapped in act(...)") || message.includes("Not implemented: navigation to another Document")) {
+    return;
+  }
+  consoleError(...args);
+});
+
+const consoleWarn = console.warn.bind(console);
+vi.spyOn(console, "warn").mockImplementation((...args: unknown[]) => {
+  const message = args.map(String).join(" ");
+  if (message.includes("not wrapped in act(...)") || message.includes("Not implemented: navigation to another Document")) {
+    return;
+  }
+  consoleWarn(...args);
+});
+
+// jsdom doesn't implement HTMLCanvasElement.getContext; stub it to silence the warning
+window.HTMLCanvasElement.prototype.getContext = () => null;

package/tsconfig.base.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  }
+}

package/vitest.config.base.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from "vitest/config";
+import type { TestUserConfig } from "vitest/config";
+
+type TestConfig = TestUserConfig;
+
+export function createVitestConfig(overrides: TestConfig = {}) {
+  const { coverage: coverageOverrides, setupFiles: extraSetupFiles, ...rest } = overrides;
+
+  return defineConfig({
+    server: {
+      // Allow Vite's dev server to serve files from symlinked file: packages
+      // that live outside the consuming project's root directory.
+      fs: { allow: [".."] },
+    },
+    resolve: {
+      // Deduplicate packages that must be singletons when cockpit-plugin-base-react
+      // is installed as a file: link (symlink) — without this, the linked
+      // package resolves these from its own node_modules and React / i18next
+      // end up with two separate instances, breaking hooks and translations.
+      dedupe: ["react", "react-dom", "i18next", "react-i18next", "@patternfly/react-core", "@patternfly/react-icons"],
+    },
+    test: {
+      globals: true,
+      environment: "jsdom",
+      setupFiles: [
+        "@rxtx4816/cockpit-plugin-base-react/testing",
+        ...(Array.isArray(extraSetupFiles) ? extraSetupFiles : extraSetupFiles ? [extraSetupFiles] : []),
+      ],
+      include: ["src/**/*.test.{ts,tsx}"],
+      pool: "threads",
+      maxWorkers: 4,
+      coverage: {
+        provider: "v8",
+        reporter: ["text", "html"],
+        include: ["src/**/*.{ts,tsx}"],
+        thresholds: {
+          lines: 80,
+          branches: 80,
+          functions: 80,
+          statements: 80,
+        },
+        ...coverageOverrides,
+      },
+      ...rest,
+    },
+  });
+}