diff --git a/web/src/components/MachinesWS.tsx b/web/src/components/MachinesWS.tsx
index c923040..6f543c6 100644
--- a/web/src/components/MachinesWS.tsx
+++ b/web/src/components/MachinesWS.tsx
@@ -1,5 +1,7 @@
"use client";
+import { LogsViewer } from "./LogsViewer";
+import { getConnectionStatus } from "./getConnectionStatus";
import { Badge } from "@/components/ui/badge";
import {
Dialog,
@@ -10,9 +12,8 @@ import {
DialogTrigger,
} from "@/components/ui/dialog";
import type { getMachines } from "@/server/curdMachine";
-import { Check, CircleOff, SatelliteDish } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import useWebSocket, { ReadyState } from "react-use-websocket";
+import React, { useEffect, useState } from "react";
+import useWebSocket from "react-use-websocket";
import { create } from "zustand";
type State = {
@@ -98,17 +99,7 @@ function MachineWS({
}
);
- const connectionStatus = {
- [ReadyState.CONNECTING]: (
-
- ),
- [ReadyState.OPEN]:
,
- [ReadyState.CLOSING]:
,
- [ReadyState.CLOSED]:
,
- [ReadyState.UNINSTANTIATED]: "Uninstantiated",
- }[readyState];
-
- const container = useRef
(null);
+ const connectionStatus = getConnectionStatus(readyState);
useEffect(() => {
if (!lastMessage?.data) return;
@@ -130,18 +121,6 @@ function MachineWS({
}
}, [lastMessage]);
- useEffect(() => {
- // console.log(logs.length, container.current);
- if (container.current) {
- const scrollHeight = container.current.scrollHeight;
-
- container.current.scrollTo({
- top: scrollHeight,
- behavior: "smooth",
- });
- }
- }, [logs.length]);
-
return (
);
diff --git a/web/src/components/getConnectionStatus.tsx b/web/src/components/getConnectionStatus.tsx
new file mode 100644
index 0000000..5d454d6
--- /dev/null
+++ b/web/src/components/getConnectionStatus.tsx
@@ -0,0 +1,17 @@
+import { Check, CircleOff, SatelliteDish } from "lucide-react";
+import React from "react";
+import { ReadyState } from "react-use-websocket";
+
+export function getConnectionStatus(readyState: ReadyState) {
+ const connectionStatus = {
+ [ReadyState.CONNECTING]: (
+
+ ),
+ [ReadyState.OPEN]: ,
+ [ReadyState.CLOSING]: ,
+ [ReadyState.CLOSED]: ,
+ [ReadyState.UNINSTANTIATED]: "Uninstantiated",
+ }[readyState];
+
+ return connectionStatus;
+}
diff --git a/web/src/db/schema.ts b/web/src/db/schema.ts
index 7ce9490..a04bba0 100644
--- a/web/src/db/schema.ts
+++ b/web/src/db/schema.ts
@@ -108,6 +108,12 @@ export const machinesType = pgEnum("machine_type", [
"modal-serverless",
]);
+export const machinesStatus = pgEnum("machine_status", [
+ "ready",
+ "building",
+ "error",
+]);
+
// We still want to keep the workflow run record.
export const workflowRunsTable = dbSchema.table("workflow_runs", {
id: uuid("id").primaryKey().defaultRandom().notNull(),
@@ -193,6 +199,9 @@ export const machinesTable = dbSchema.table("machines", {
disabled: boolean("disabled").default(false).notNull(),
auth_token: text("auth_token"),
type: machinesType("type").notNull().default("classic"),
+ status: machinesStatus("status").notNull().default("ready"),
+ snapshot: jsonb("snapshot").$type(),
+ build_log: text("build_log"),
});
export const insertMachineSchema = createInsertSchema(machinesTable, {
diff --git a/web/src/server/addMachineSchema.ts b/web/src/server/addMachineSchema.ts
index 1119930..9f5bc5c 100644
--- a/web/src/server/addMachineSchema.ts
+++ b/web/src/server/addMachineSchema.ts
@@ -1,4 +1,5 @@
-import { insertMachineSchema } from "@/db/schema";
+import { insertMachineSchema, machinesTable } from "@/db/schema";
+import { createInsertSchema } from "drizzle-zod";
export const addMachineSchema = insertMachineSchema.pick({
name: true,
@@ -6,3 +7,14 @@ export const addMachineSchema = insertMachineSchema.pick({
type: true,
auth_token: true,
});
+
+export const insertCustomMachineSchema = createInsertSchema(machinesTable, {
+ name: (schema) => schema.name.default("My Machine"),
+ type: (schema) => schema.type.default("modal-serverless"),
+});
+
+export const addCustomMachineSchema = insertCustomMachineSchema.pick({
+ name: true,
+ type: true,
+ snapshot: true,
+});
diff --git a/web/src/server/curdMachine.ts b/web/src/server/curdMachine.ts
index 91af5e1..48e886a 100644
--- a/web/src/server/curdMachine.ts
+++ b/web/src/server/curdMachine.ts
@@ -1,12 +1,17 @@
"use server";
-import type { addMachineSchema } from "./addMachineSchema";
+import type {
+ addCustomMachineSchema,
+ addMachineSchema,
+} from "./addMachineSchema";
import { withServerPromise } from "./withServerPromise";
import { db } from "@/db/db";
import { machinesTable } from "@/db/schema";
import { auth } from "@clerk/nextjs";
-import { and, eq } from "drizzle-orm";
+import { and, eq, isNull } from "drizzle-orm";
import { revalidatePath } from "next/cache";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
import "server-only";
import type { z } from "zod";
@@ -27,6 +32,26 @@ export async function getMachines() {
return machines;
}
+export async function getMachineById(id: string) {
+ const { userId, orgId } = auth();
+ if (!userId) throw new Error("No user id");
+ const machines = await db
+ .select()
+ .from(machinesTable)
+ .where(
+ and(
+ orgId
+ ? eq(machinesTable.org_id, orgId)
+ : and(
+ eq(machinesTable.user_id, userId),
+ isNull(machinesTable.org_id)
+ ),
+ eq(machinesTable.id, id)
+ )
+ );
+ return machines[0];
+}
+
export const addMachine = withServerPromise(
async (data: z.infer) => {
const { userId, orgId } = auth();
@@ -42,6 +67,72 @@ export const addMachine = withServerPromise(
}
);
+export const addCustomMachine = withServerPromise(
+ async (data: z.infer) => {
+ const { userId, orgId } = auth();
+ const headersList = headers();
+
+ if (!userId) return { error: "No user id" };
+
+ // Insert to our db
+ const a = await db
+ .insert(machinesTable)
+ .values({
+ ...data,
+ org_id: orgId,
+ user_id: userId,
+ status: "building",
+ endpoint: "not-ready",
+ })
+ .returning();
+
+ const b = a[0];
+
+ // const origin = new URL(request.url).origin;
+ const domain = headersList.get("x-forwarded-host") || "";
+ const protocol = headersList.get("x-forwarded-proto") || "";
+ // console.log("domain", domain);
+ // console.log("domain", `${protocol}://${domain}/api/machine-built`);
+ // return { message: "Machine Building" };
+
+ if (domain === "") {
+ throw new Error("No domain");
+ }
+
+ // Call remote builder
+ const result = await fetch(`${process.env.MODAL_BUILDER_URL!}/create`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ machine_id: b.id,
+ name: b.id,
+ snapshot: JSON.parse(data.snapshot as string),
+ callback_url: `${protocol}://${domain}/api/machine-built`,
+ }),
+ });
+
+ if (!result.ok) {
+ const error_log = await result.text();
+ await db
+ .update(machinesTable)
+ .set({
+ ...data,
+ status: "error",
+ build_log: error_log,
+ })
+ .where(eq(machinesTable.id, b.id));
+ throw new Error(`Error: ${result.statusText} ${error_log}`);
+ }
+
+ redirect(`/machines/${b.id}`);
+
+ // revalidatePath("/machines");
+ return { message: "Machine Building" };
+ }
+);
+
export const updateMachine = withServerPromise(
async ({
id,
diff --git a/web/src/server/withServerPromise.ts b/web/src/server/withServerPromise.ts
index dc5e126..94f8540 100644
--- a/web/src/server/withServerPromise.ts
+++ b/web/src/server/withServerPromise.ts
@@ -1,5 +1,8 @@
+import { isRedirectError } from "next/dist/client/components/redirect";
+
export async function wrapServerPromise(result: Promise) {
return result.catch((error) => {
+ if (isRedirectError(error)) throw error;
return {
error: error.message,
};