@runloop/rl-cli 1.8.0 → 1.10.0

package/dist/screens/BenchmarkDetailScreen.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BenchmarkDetailScreen - Detail page for benchmark definitions
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { useBenchmarkStore } from "../store/benchmarkStore.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getBenchmark } from "../services/benchmarkService.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { colors } from "../utils/theme.js";
+export function BenchmarkDetailScreen({ benchmarkId, }) {
+    const { goBack, navigate } = useNavigation();
+    const benchmarks = useBenchmarkStore((state) => state.benchmarks);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedBenchmark, setFetchedBenchmark] = React.useState(null);
+    // Find benchmark in store first
+    const benchmarkFromStore = benchmarks.find((b) => b.id === benchmarkId);
+    // Polling function
+    const pollBenchmark = React.useCallback(async () => {
+        if (!benchmarkId)
+            return null;
+        return getBenchmark(benchmarkId);
+    }, [benchmarkId]);
+    // Fetch benchmark from API if not in store
+    React.useEffect(() => {
+        if (benchmarkId && !loading && !fetchedBenchmark && !benchmarkFromStore) {
+            setLoading(true);
+            setError(null);
+            getBenchmark(benchmarkId)
+                .then((benchmark) => {
+                setFetchedBenchmark(benchmark);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [benchmarkId, loading, fetchedBenchmark, benchmarkFromStore]);
+    // Use fetched benchmark for full details, fall back to store for basic display
+    const benchmark = fetchedBenchmark || benchmarkFromStore;
+    // Show loading state
+    if (!benchmark && benchmarkId && !error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Definitions" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading benchmark details..." })] }));
+    }
+    // Show error state
+    if (error && !benchmark) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Definitions" },
+                        { label: "Error", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to load benchmark details", error: error })] }));
+    }
+    // Show not found error
+    if (!benchmark) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Definitions" },
+                        { label: "Not Found", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Benchmark ${benchmarkId || "unknown"} not found`, error: new Error("Benchmark not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (benchmark.created_at) {
+        basicFields.push({
+            label: "Created",
+            value: formatTimestamp(benchmark.created_at),
+        });
+    }
+    if (benchmark.description) {
+        basicFields.push({
+            label: "Description",
+            value: benchmark.description,
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Metadata section
+    if (benchmark.metadata &&
+        Object.keys(benchmark.metadata).length > 0) {
+        const metadataFields = Object.entries(benchmark.metadata).map(([key, value]) => ({
+            label: key,
+            value: value,
+        }));
+        detailSections.push({
+            title: "Metadata",
+            icon: figures.identical,
+            color: colors.secondary,
+            fields: metadataFields,
+        });
+    }
+    // Operations available for benchmarks
+    const operations = [
+        {
+            key: "create-job",
+            label: "Create Benchmark Job",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "c",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, resource) => {
+        switch (operation) {
+            case "create-job":
+                navigate("benchmark-job-create", { initialBenchmarkIds: resource.id });
+                break;
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (b) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Benchmark Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", b.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", b.name || "(none)"] }, "core-name"));
+        if (b.description) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Description: ", b.description] }, "core-desc"));
+        }
+        if (b.created_at) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(b.created_at).toLocaleString()] }, "core-created"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Metadata
+        if (b.metadata && Object.keys(b.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
+            Object.entries(b.metadata).forEach(([key, value], idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", key, ": ", value] }, `meta-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "meta-space"));
+        }
+        // Raw JSON
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(b, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    return (_jsx(ResourceDetailPage, { resource: benchmark, resourceType: "Benchmark Definitions", getDisplayName: (b) => b.name || b.id, getId: (b) => b.id, getStatus: (b) => b.status, detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines, breadcrumbPrefix: [{ label: "Home" }, { label: "Benchmarks" }] }));
+}