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

feat: add loading text for machine operation

Browse Source
This commit is contained in:
bennykok 2024-01-27 22:33:42 +08:00
parent e5097a5ed5
commit 5443dcd20b
1 changed files with 97 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
web/src/components/MachineList.tsx
View File

@ -115,16 +115,18 @@ export const columns: ColumnDef<Machine>[] = [
{row.original.status} <LoadingIcon /> {row.original.status} <LoadingIcon />
</Badge> </Badge>
)} )}
{!row.original.disabled && row.original.status && row.original.status != "building" && ( {!row.original.disabled &&
<Badge row.original.status &&
variant={ row.original.status != "building" && (
row.original.status == "ready" ? "success" : "destructive" <Badge
} variant={
className="capitalize" row.original.status == "ready" ? "success" : "destructive"
> }
{row.original.status} className="capitalize"
</Badge> >
)} {row.original.status}
</Badge>
)}
</div> </div>
// </a> // </a>
); );
@ -194,7 +196,9 @@ export const columns: ColumnDef<Machine>[] = [
<DropdownMenuItem <DropdownMenuItem
className="text-destructive" className="text-destructive"
onClick={async () => { onClick={async () => {
callServerPromise(deleteMachine(machine.id)); callServerPromise(deleteMachine(machine.id), {
loadingText: "Deleting machine",
});
}} }}
> >
Delete Machine Delete Machine
@ -202,7 +206,9 @@ export const columns: ColumnDef<Machine>[] = [
{machine.disabled ? ( {machine.disabled ? (
<DropdownMenuItem <DropdownMenuItem
onClick={async () => { onClick={async () => {
callServerPromise(enableMachine(machine.id)); callServerPromise(enableMachine(machine.id), {
loadingText: "Enabling machine",
});
}} }}
> >
Enable Machine Enable Machine
@ -211,7 +217,9 @@ export const columns: ColumnDef<Machine>[] = [
<DropdownMenuItem <DropdownMenuItem
className="text-destructive" className="text-destructive"
onClick={async () => { onClick={async () => {
callServerPromise(disableMachine(machine.id)); callServerPromise(disableMachine(machine.id), {
loadingText: "Disabling machine",
});
}} }}
> >
Disable Machine Disable Machine
@ -219,27 +227,33 @@ export const columns: ColumnDef<Machine>[] = [
)} )}
{machine.type === "comfy-deploy-serverless" && ( {machine.type === "comfy-deploy-serverless" && (
<> <>
<DropdownMenuItem onClick={async () => { <DropdownMenuItem
const id = toast.loading("Getting machine url...") onClick={async () => {
const url = await callServerPromise( const url = await callServerPromise(
editWorkflowOnMachine(machine.id), editWorkflowOnMachine(machine.id),
); {
if (url && typeof url !== "object") { loadingText: "Getting machine url...",
window.open(url, "_blank"); },
} else if (url && typeof url === "object" && url.error) { );
console.error(url.error); if (url && typeof url !== "object") {
} window.open(url, "_blank");
toast.dismiss(id) } else if (url && typeof url === "object" && url.error) {
}}> console.error(url.error);
}
}}
>
Open ComfyUI Open ComfyUI
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
callServerPromise(buildMachine({ callServerPromise(
id: machine.id, buildMachine({
}), { id: machine.id,
loadingText: "Starting machine build process" }),
}) {
loadingText: "Starting machine build process",
},
);
}} }}
> >
Rebuild Rebuild
@ -250,57 +264,55 @@ export const columns: ColumnDef<Machine>[] = [
Edit Edit
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
{ {machine.type === "comfy-deploy-serverless" ? (
machine.type === "comfy-deploy-serverless" ? ( <UpdateModal
<UpdateModal dialogClassName="sm:max-w-[600px]"
dialogClassName="sm:max-w-[600px]" data={machine}
data={machine} open={open}
open={open} setOpen={setOpen}
setOpen={setOpen} title="Edit"
title="Edit" description="Edit machines"
description="Edit machines" serverAction={updateCustomMachine}
serverAction={updateCustomMachine} formSchema={addCustomMachineSchema}
formSchema={addCustomMachineSchema} fieldConfig={{
fieldConfig={{ type: {
type: { fieldType: "fallback",
fieldType: "fallback", inputProps: {
inputProps: { disabled: true,
disabled: true, showLabel: false,
showLabel: false, type: "hidden",
type: "hidden",
},
}, },
snapshot: { },
fieldType: "snapshot", snapshot: {
fieldType: "snapshot",
},
models: {
fieldType: "models",
},
gpu: {
inputProps: {},
},
}}
/>
) : (
<UpdateModal
data={machine}
open={open}
setOpen={setOpen}
title="Edit"
description="Edit machines"
serverAction={updateMachine}
formSchema={addMachineSchema}
fieldConfig={{
auth_token: {
inputProps: {
type: "password",
}, },
models: { },
fieldType: "models", }}
}, />
gpu: { )}
inputProps: {}, </DropdownMenu>
},
}}
/>
) : (
<UpdateModal
data={machine}
open={open}
setOpen={setOpen}
title="Edit"
description="Edit machines"
serverAction={updateMachine}
formSchema={addMachineSchema}
fieldConfig={{
auth_token: {
inputProps: {
type: "password",
},
},
}}
/>
)
}
</DropdownMenu >
); );
}, },
}, },
@ -315,7 +327,7 @@ export function MachineList({
}) { }) {
const [sorting, setSorting] = React.useState<SortingState>([]); const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>( const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[] [],
); );
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
@ -356,7 +368,7 @@ export function MachineList({
dialogClassName="sm:max-w-[600px]" dialogClassName="sm:max-w-[600px]"
disabled={ disabled={
data.some( data.some(
(machine) => machine.type === "comfy-deploy-serverless" (machine) => machine.type === "comfy-deploy-serverless",
) && !userMetadata.betaFeaturesAccess ) && !userMetadata.betaFeaturesAccess
} }
tooltip={ tooltip={
@ -418,9 +430,9 @@ export function MachineList({
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender( : flexRender(
header.column.columnDef.header, header.column.columnDef.header,
header.getContext() header.getContext(),
)} )}
</TableHead> </TableHead>
); );
})} })}
@ -438,7 +450,7 @@ export function MachineList({
<TableCell key={cell.id}> <TableCell key={cell.id}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext(),
)} )}
</TableCell> </TableCell>
))} ))}