chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: log viewer

Browse Source
This commit is contained in:
bennykok 2024-01-31 21:21:22 +08:00
parent d4d7e98487
commit de641f0acf
3 changed files with 73 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/components/LogsViewer.tsx
View File

@ -9,7 +9,10 @@ export type LogsType = {
timestamp: number;
}[];
export function LogsViewer({ logs }: { logs: LogsType }) {
export function LogsViewer({
logs,
hideTimestamp,
}: { logs: LogsType; hideTimestamp?: boolean }) {
const container = useRef<HTMLDivElement | null>(null);
useEffect(() => {
@ -37,7 +40,7 @@ export function LogsViewer({ logs }: { logs: LogsType }) {
}
container.current = ref;
}}
className="flex flex-col text-xs p-2 overflow-y-scroll whitespace-break-spaces"
className="h-full w-full flex flex-col text-xs p-2 overflow-y-scroll whitespace-break-spaces"
>
{logs.map((x, i) => (
<div
@ -48,10 +51,14 @@ export function LogsViewer({ logs }: { logs: LogsType }) {
navigator.clipboard.writeText(x.logs);
}}
>
<span className="min-w-fit">
{new Date(x.timestamp).toLocaleString()}
</span>
<div className="h-full w-[1px] bg-stone-400 flex-shrink-0"></div>
{!hideTimestamp && (
<>
<span className="w-[150px] flex-shrink-0">
{new Date(x.timestamp * 1000).toLocaleString()}
</span>
<div className="h-full w-[1px] bg-stone-400 flex-shrink-0"></div>
</>
)}
{/* Display timestamp */}
<div>{x.logs}</div>
</div>

97
web/src/components/MachineBuildLog.tsx
View File

@ -16,7 +16,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
} from "@/components/ui/alert-dialog";
import { useRouter } from "next/navigation";
export function MachineBuildLog({
@ -41,7 +41,7 @@ export function MachineBuildLog({
reconnectAttempts: 20,
reconnectInterval: 1000,
queryParams: query,
}
},
);
const connectionStatus = getConnectionStatus(readyState);
@ -57,59 +57,70 @@ export function MachineBuildLog({
setLogs((logs) => [...(logs ?? []), message.data]);
} else if (message?.event === "FINISHED") {
setFinished(true);
setStatus(message.data.status)
setStatus(message.data.status);
}
}, [lastMessage]);
const router = useRouter()
const router = useRouter();
return (
<div>
{connectionStatus}
<LogsViewer logs={logs} />
<LogsViewer logs={logs} hideTimestamp />
<AlertDialog open={finished}>
<AlertDialogContent>
{
status == "succuss" ? (
<>
<AlertDialogHeader>
<AlertDialogTitle>Machine Built</AlertDialogTitle>
<AlertDialogDescription>
Your machine is built, you can now integrate your API, or directly run to check this machines.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction onClick={() => {
router.push("/workflows")
}}>See Workflows</AlertDialogAction>
<AlertDialogAction onClick={() => {
router.push("/machines")
}}>See All Machines</AlertDialogAction>
</AlertDialogFooter></>
) : (
<>
<AlertDialogHeader>
<AlertDialogTitle>Machine Failed</AlertDialogTitle>
<AlertDialogDescription>
Something went wrong with the machine build, please check the log.
Possible cause could be conflits with custom nodes, build got stuck, timeout, or too many custom nodes installed.
Please attempt a rebuild or remove some of the custom nodes.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>See logs</AlertDialogCancel>
<AlertDialogAction onClick={() => {
router.push("/machines")
}}>Back to machines</AlertDialogAction>
</AlertDialogFooter></>
)
}
{status == "succuss" ? (
<>
<AlertDialogHeader>
<AlertDialogTitle>Machine Built</AlertDialogTitle>
<AlertDialogDescription>
Your machine is built, you can now integrate your API, or
directly run to check this machines.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction
onClick={() => {
router.push("/workflows");
}}
>
See Workflows
</AlertDialogAction>
<AlertDialogAction
onClick={() => {
router.push("/machines");
}}
>
See All Machines
</AlertDialogAction>
</AlertDialogFooter>
</>
) : (
<>
<AlertDialogHeader>
<AlertDialogTitle>Machine Failed</AlertDialogTitle>
<AlertDialogDescription>
Something went wrong with the machine build, please check the
log. Possible cause could be conflits with custom nodes, build
got stuck, timeout, or too many custom nodes installed. Please
attempt a rebuild or remove some of the custom nodes.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>See logs</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
router.push("/machines");
}}
>
Back to machines
</AlertDialogAction>
</AlertDialogFooter>
</>
)}
</AlertDialogContent>
</AlertDialog>
</div>
);
}

10
web/src/components/MachinesWS.tsx
View File

@ -36,7 +36,7 @@ type State = {
json: {
event: string;
data: any;
}
},
) => void;
};
@ -82,7 +82,7 @@ function MachineWS({
const logs = useStore((x) =>
x.logs
.filter((p) => p.machine_id === machine.id)
.sort((a, b) => a.timestamp - b.timestamp)
.sort((a, b) => a.timestamp - b.timestamp),
);
const [sid, setSid] = useState("");
@ -96,7 +96,7 @@ function MachineWS({
// queryParams: {
// clientId: sid,
// },
}
},
);
const connectionStatus = getConnectionStatus(readyState);
@ -135,7 +135,9 @@ function MachineWS({
You can view your run&apos;s outputs here
</DialogDescription>
</DialogHeader>
<LogsViewer logs={logs} />
<div className="h-[400px]">
<LogsViewer logs={logs} hideTimestamp />
</div>
</DialogContent>
</Dialog>
);