-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow editing workflows on CPUs (#32)
- Loading branch information
Showing
5 changed files
with
256 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import * as React from "react" | ||
| import { cva, type VariantProps } from "class-variance-authority" | ||
|
|
||
| import { cn } from "~/lib/utils" | ||
|
|
||
| const alertVariants = cva( | ||
| "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: "bg-background text-foreground", | ||
| destructive: | ||
| "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: "default", | ||
| }, | ||
| } | ||
| ) | ||
|
|
||
| const Alert = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> | ||
| >(({ className, variant, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| role="alert" | ||
| className={cn(alertVariants({ variant }), className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| Alert.displayName = "Alert" | ||
|
|
||
| const AlertTitle = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <h5 | ||
| ref={ref} | ||
| className={cn("mb-1 font-medium leading-none tracking-tight", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AlertTitle.displayName = "AlertTitle" | ||
|
|
||
| const AlertDescription = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("text-sm [&_p]:leading-relaxed", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AlertDescription.displayName = "AlertDescription" | ||
|
|
||
| export { Alert, AlertTitle, AlertDescription } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import { LoaderFunctionArgs, json } from "@remix-run/node"; | ||
| import { Link, useLoaderData } from "@remix-run/react"; | ||
| import { useEffect, useState } from "react"; | ||
| import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert"; | ||
| import { X } from "lucide-react"; | ||
|
|
||
| import LoadingIndicator from "~/components/loading-indicator"; | ||
|
|
||
| export async function loader({ params }: LoaderFunctionArgs) { | ||
| const appName = params.appName; | ||
| const url = `${process.env.APP_BUILDER_API_BASE_URL}/apps/${appName}/workflow-urls`; | ||
|
|
||
| try { | ||
| const response = await fetch(url, { | ||
| method: "GET", | ||
| headers: { | ||
| X_API_KEY: process.env.APP_BUILDER_API_KEY!, | ||
| }, | ||
| }); | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error("Failed to fetch edit URL"); | ||
| } | ||
|
|
||
| const data = await response.json(); | ||
| console.log("Edit workflow url", data["edit_url"]); | ||
| console.log("Run workflow url", data["run_url"]); | ||
| return json({ | ||
| editUrl: data["edit_url"] as string, | ||
| runUrl: data["run_url"] as string, | ||
| }); | ||
| } catch (error) { | ||
| console.error("Error fetching edit workflow URL:", error); | ||
| return json({ error: "Failed to load edit workflow URL" }, { status: 500 }); | ||
| } | ||
| } | ||
|
|
||
| export default function AppEditPage() { | ||
| const data = useLoaderData<typeof loader>(); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
| const [showAlert, setShowAlert] = useState(true); | ||
|
|
||
| // Once the edit url is loaded, wait 15 seconds before setting isLoading to false | ||
| // This is to prevent the iframe from loading too quickly and giving error because the tunnel is not ready | ||
| useEffect(() => { | ||
| if ("editUrl" in data) { | ||
| const timer = setTimeout(() => { | ||
| setIsLoading(false); | ||
| }, 15000); | ||
|
|
||
| return () => clearTimeout(timer); | ||
| } | ||
| }, [data]); | ||
|
|
||
| if ("error" in data) { | ||
| return <div className="text-rose-500">{data.error}</div>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="h-screen flex flex-col relative"> | ||
| <div className="flex-grow relative"> | ||
| {isLoading ? ( | ||
| <LoadingIndicator /> | ||
| ) : ( | ||
| <> | ||
| {data.editUrl && ( | ||
| <iframe | ||
| title={data.editUrl} | ||
| src={data.editUrl} | ||
| className="w-full h-full border-0" | ||
| /> | ||
| )} | ||
| {showAlert && ( | ||
| <div className="absolute top-4 left-4 right-4 z-10"> | ||
| <Alert variant="default" className="pr-12 relative"> | ||
| <AlertTitle>Heads up!</AlertTitle> | ||
| <AlertDescription> | ||
| You can use this page to edit your workflows. It runs on CPU | ||
| to avoid GPU costs while editing your workflows.Please save | ||
| the workflow file before closing the page. | ||
| <br /> | ||
| Please use this{" "} | ||
| <Link | ||
| to={data.runUrl} | ||
| className="underline" | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| > | ||
| link | ||
| </Link>{" "} | ||
| to run your workflows on GPUs | ||
| </AlertDescription> | ||
| <button | ||
| onClick={() => setShowAlert(false)} | ||
| className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-200 transition-colors" | ||
| aria-label="Close alert" | ||
| > | ||
| <X size={16} /> | ||
| </button> | ||
| </Alert> | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters