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

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

@ -115,7 +115,9 @@ 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 &&
row.original.status &&
row.original.status != "building" && (
<Badge <Badge
variant={ variant={
row.original.status == "ready" ? "success" : "destructive" row.original.status == "ready" ? "success" : "destructive"
@ -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),
{
loadingText: "Getting machine url...",
},
); );
if (url && typeof url !== "object") { if (url && typeof url !== "object") {
window.open(url, "_blank"); window.open(url, "_blank");
} else if (url && typeof url === "object" && url.error) { } else if (url && typeof url === "object" && url.error) {
console.error(url.error); console.error(url.error);
} }
toast.dismiss(id) }}
}}> >
Open ComfyUI Open ComfyUI
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
callServerPromise(buildMachine({ callServerPromise(
buildMachine({
id: machine.id, id: machine.id,
}), { }),
loadingText: "Starting machine build process" {
}) loadingText: "Starting machine build process",
},
);
}} }}
> >
Rebuild Rebuild
@ -250,8 +264,7 @@ 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}
@ -298,9 +311,8 @@ export const columns: ColumnDef<Machine>[] = [
}, },
}} }}
/> />
) )}
} </DropdownMenu>
</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={
@ -419,7 +431,7 @@ export function MachineList({
? 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>
))} ))}