import React, { RefObject, useRef, useState } from "react"; import { FormattedRelativeTime } from "react-intl"; import useSWR, { useSWRConfig } from "swr"; import { WorkerData } from "../api/workersRoute.ts"; import { Counter } from "./Counter.tsx"; import { fetchApi, handleResponse } from "./apiClient.ts"; export function WorkersPage(props: { sessionId: string | null }) { const { sessionId } = props; const addDialogRef = useRef(null); const getSession = useSWR( sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null, (args) => fetchApi(...args).then(handleResponse), ); const getUser = useSWR( getSession.data?.userId ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const : null, (args) => fetchApi(...args).then(handleResponse), ); const getWorkers = useSWR( ["workers", "GET", {}] as const, (args) => fetchApi(...args).then(handleResponse), { refreshInterval: 5000 }, ); return ( <> {getWorkers.data?.length ? ( ) : getWorkers.data?.length === 0 ?

No workers

: getWorkers.error ?

Loading workers failed

:
} {getUser.data?.admin && ( )} ); } function AddWorkerDialog(props: { dialogRef: RefObject; sessionId: string | null; }) { const { dialogRef, sessionId } = props; const { mutate } = useSWRConfig(); return (
{ e.preventDefault(); const data = new FormData(e.target as HTMLFormElement); const key = data.get("key") as string; const name = data.get("name") as string; const sdUrl = data.get("url") as string; const user = data.get("user") as string; const password = data.get("password") as string; console.log(key, name, user, password); mutate( (key) => Array.isArray(key) && key[0] === "workers", async () => fetchApi("workers", "POST", { query: { sessionId: sessionId! }, body: { type: "application/json", data: { key, name: name || null, sdUrl, sdAuth: user && password ? { user, password } : null, }, }, }).then(handleResponse), { populateCache: false }, ); dialogRef.current?.close(); }} >
); } function WorkerListItem(props: { worker: WorkerData; sessionId: string | null; }) { const { worker, sessionId } = props; const editDialogRef = useRef(null); const deleteDialogRef = useRef(null); const getSession = useSWR( sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null, (args) => fetchApi(...args).then(handleResponse), ); const getUser = useSWR( getSession.data?.userId ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const : null, (args) => fetchApi(...args).then(handleResponse), ); return (
  • {worker.name ?? worker.key} {worker.gpu}
    {worker.isActive ?

    ✅ Active

    : ( <>

    Last seen {worker.lastOnlineTime ? ( ) : "never"}

    {worker.lastError && (

    {worker.lastError.message} ( )

    )} )}

    images per minute, {" "} steps per minute

    {getUser.data?.admin && (

    )}
  • ); } function EditWorkerDialog(props: { dialogRef: RefObject; workerId: string; sessionId: string | null; }) { const { dialogRef, workerId, sessionId } = props; const { mutate } = useSWRConfig(); return (
    { e.preventDefault(); const data = new FormData(e.target as HTMLFormElement); const user = data.get("user") as string; const password = data.get("password") as string; console.log(user, password); mutate( (key) => Array.isArray(key) && key[0] === "workers", async () => fetchApi("workers/{workerId}", "PATCH", { params: { workerId: workerId }, query: { sessionId: sessionId! }, body: { type: "application/json", data: { sdAuth: user && password ? { user, password } : null, }, }, }).then(handleResponse), { populateCache: false }, ); dialogRef.current?.close(); }} >
    ); } function DeleteWorkerDialog(props: { dialogRef: RefObject; workerId: string; sessionId: string | null; }) { const { dialogRef, workerId, sessionId } = props; const { mutate } = useSWRConfig(); return (
    { e.preventDefault(); mutate( (key) => Array.isArray(key) && key[0] === "workers", async () => fetchApi("workers/{workerId}", "DELETE", { params: { workerId: workerId }, query: { sessionId: sessionId! }, }).then(handleResponse), { populateCache: false }, ); dialogRef.current?.close(); }} >

    Are you sure you want to delete this worker?

    ); }