feat: implement workspace runtime selection

This commit is contained in:
2024-12-02 09:38:01 +00:00
parent daf9bab49f
commit a92f5e8189
11 changed files with 268 additions and 119 deletions

2
.gitignore vendored
View File

@@ -214,3 +214,5 @@ $RECYCLE.BIN/
# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux,go,goland
data.sqlite
dist/

View File

@@ -5,6 +5,7 @@ CREATE TABLE IF NOT EXISTS workspaces
container_id TEXT NOT NULL,
image_tag TEXT NOT NULL,
created_at TEXT NOT NULL,
runtime TEXT NOT NULL,
CONSTRAINT pk_workspaces PRIMARY KEY (id)
);

View File

@@ -6,7 +6,7 @@ type baseTemplate struct {
Content string `json:"-"`
}
var baseTemplates = []baseTemplate{fedora40WithSSH}
var baseTemplates = []baseTemplate{fedora40WithSSH, fedora40SSHDocker}
var baseTemplateMap = map[string]baseTemplate{
"empty": {
@@ -15,6 +15,7 @@ var baseTemplateMap = map[string]baseTemplate{
Content: "",
},
"fedora-40-openssh": fedora40WithSSH,
"fedora-40-openssh-docker": fedora40SSHDocker,
}
var fedora40WithSSH = baseTemplate{
@@ -22,12 +23,36 @@ var fedora40WithSSH = baseTemplate{
ID: "fedora-40-openssh",
Content: `FROM fedora:40
ARG user
ARG password
RUN dnf install -y openssh-server \
&& mkdir -p /etc/ssh \
&& ssh-keygen -q -N "" -t rsa -b 4096 -f /etc/ssh/ssh_host_rsa_key \
&& useradd testuser \
&& echo "testuser:12345678" | chpasswd
&& usermod -aG wheel testuser
&& useradd "$user" \
&& echo "$user:$password" | chpasswd \
&& usermod -aG wheel "$user"
CMD ["/usr/sbin/sshd", "-D"]
`,
}
var fedora40SSHDocker = baseTemplate{
Name: "Fedora 40 + OpenSSH Server + Docker",
ID: "fedora-40-openssh-docker",
Content: `FROM fedora:40
ARG user
ARG password
RUN dnf install -y openssh-server dnf-plugins-core \
&& dnf-3 config-manager --add-repo https://download.docker.com/linux/fedora/docker-ce.repo \
&& dnf install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin \
&& mkdir -p /etc/ssh \
&& ssh-keygen -q -N "" -t rsa -b 4096 -f /etc/ssh/ssh_host_rsa_key \
&& useradd "$user" \
&& echo "$user:$password" | chpasswd \
&& usermod -aG wheel,docker "$user"
CMD ["/usr/sbin/sshd", "-D"]
`,

View File

@@ -10,6 +10,7 @@ import (
type createWorkspaceRequestBody struct {
ImageID string `json:"imageId"`
Runtime string `json:"runtime"`
}
type updateWorkspaceRequestBody struct {
@@ -79,6 +80,7 @@ func createWorkspace(c echo.Context, workspaceName string) error {
w, err := mgr.createWorkspace(c.Request().Context(), createWorkspaceOptions{
name: workspaceName,
imageID: body.ImageID,
runtime: body.Runtime,
})
if err != nil {
if errors.Is(err, errImageNotFound) {
@@ -164,3 +166,12 @@ func deleteWorkspacePortMapping(c echo.Context) error {
return c.NoContent(http.StatusOK)
}
func fetchWorkspaceRuntimes(c echo.Context) error {
mgr := workspaceManagerFrom(c)
runtimes, err := mgr.findAvailableWorkspaceRuntimes(c.Request().Context())
if err != nil {
return err
}
return c.JSON(http.StatusOK, runtimes)
}

View File

@@ -11,4 +11,5 @@ func DefineRoutes(g *echo.Group, services service.Services) {
g.POST("/workspaces/:workspaceName", updateOrCreateWorkspace, currentWorkspaceMiddleware(true))
g.DELETE("/workspaces/:workspaceName", deleteWorkspace, currentWorkspaceMiddleware(false))
g.DELETE("/workspaces/:workspaceName/forwarded-ports/:portName", deleteWorkspacePortMapping, currentWorkspaceMiddleware(false))
g.GET("/workspace-runtimes", fetchWorkspaceRuntimes)
}

View File

@@ -36,6 +36,8 @@ type workspace struct {
Status status `bun:"-" json:"status"`
PortMappings []portMapping `bun:"rel:has-many,join:id=workspace_id" json:"ports,omitempty"`
Runtime string `json:"runtime"`
}
type portMapping struct {
@@ -48,6 +50,11 @@ type portMapping struct {
Workspace workspace `bun:"rel:belongs-to,join:workspace_id=id" json:"-"`
}
type workspaceRuntime struct {
Name string `json:"name"`
Path string `json:"path"`
}
// status represents the status of a workspace.
type status string

View File

@@ -31,10 +31,12 @@ type workspaceManager struct {
type createWorkspaceOptions struct {
name string
imageID string
runtime string
}
var errImageNotFound = errors.New("image not found")
var errWorkspaceNotFound = errors.New("workspace not found")
var errRuntimeNotFound = errors.New("runtime not found")
func (mgr workspaceManager) findAllWorkspaces(ctx context.Context) ([]workspace, error) {
var workspaces []workspace
@@ -126,6 +128,16 @@ func (mgr workspaceManager) hasWorkspace(ctx context.Context, name string) (bool
}
func (mgr workspaceManager) createWorkspace(ctx context.Context, opts createWorkspaceOptions) (*workspace, error) {
info, err := mgr.dockerClient.Info(ctx)
if err != nil {
return nil, err
}
_, ok := info.Runtimes[opts.runtime]
if !ok {
return nil, errRuntimeNotFound
}
tx, err := mgr.db.BeginTx(ctx, nil)
if err != nil {
return nil, err
@@ -157,6 +169,7 @@ func (mgr workspaceManager) createWorkspace(ctx context.Context, opts createWork
{"127.0.0.1", ""},
},
},
Runtime: opts.runtime,
}
res, err := mgr.dockerClient.ContainerCreate(ctx, containerConfig, hostConfig, nil, nil, opts.name)
@@ -372,3 +385,20 @@ func (mgr workspaceManager) deletePortMapping(ctx context.Context, workspace *wo
return nil
}
func (mgr workspaceManager) findAvailableWorkspaceRuntimes(ctx context.Context) ([]workspaceRuntime, error) {
info, err := mgr.dockerClient.Info(ctx)
if err != nil {
return nil, err
}
runtimes := make([]workspaceRuntime, 0, len(info.Runtimes))
for name, r := range info.Runtimes {
runtimes = append(runtimes, workspaceRuntime{
Name: name,
Path: r.Path,
})
}
return runtimes, nil
}

View File

@@ -197,6 +197,7 @@ function BuildArgRow({
const finishEditing = useCallback(() => {
onFinish({ argName, arg });
setIsEditing(false);
}, [argName, arg, onFinish]);
return (

View File

@@ -4,10 +4,17 @@ import {
WorkspaceStatus,
type Workspace,
type WorkspacePortMapping,
type WorkspaceRuntime,
} from "./types";
import { useCallback, useState } from "react";
import type { QueryStatus } from "@/lib/query";
interface CreateWorkspaceConfig {
workspaceName: string;
imageId: string;
runtime: string;
}
function useWorkspaces() {
return useSWR(
"/workspaces",
@@ -24,17 +31,15 @@ function useCreateWorkspace() {
async ({
workspaceName,
imageId,
}: {
workspaceName: string;
imageId: string;
}): Promise<Workspace | null> => {
runtime,
}: CreateWorkspaceConfig): Promise<Workspace | null> => {
setStatus({ type: "loading" });
try {
const workspace = await mutate(
"/workspaces",
fetchApi(`/workspaces/${workspaceName}`, {
method: "POST",
body: JSON.stringify({ imageId }),
body: JSON.stringify({ imageId, runtime }),
headers: {
"Content-Type": "application/json",
},
@@ -195,10 +200,19 @@ function useAddWorkspacePort() {
return { addWorkspacePort, status };
}
function useWorkspaceRuntimes() {
return useSWR(
"/workspace-runtimes",
(): Promise<WorkspaceRuntime[]> =>
fetchApi("/workspace-runtimes").then((res) => res.json()),
);
}
export {
useWorkspaces,
useCreateWorkspace,
useChangeWorkspaceStatus,
useDeleteWorkspace,
useAddWorkspacePort,
useWorkspaceRuntimes,
};

View File

@@ -27,24 +27,101 @@ import { superstructResolver } from "@hookform/resolvers/superstruct";
import { useRef, useEffect } from "react";
import { useForm } from "react-hook-form";
import { nonempty, object, pattern, string, type Infer } from "superstruct";
import { useCreateWorkspace } from "./api";
import { useCreateWorkspace, useWorkspaceRuntimes } from "./api";
import type { TemplateImage } from "@/templates/types";
import type { WorkspaceRuntime } from "./types";
interface NewWorkspaceDialogProps {
onCreateSuccess: () => void;
}
const NewWorkspaceForm = object({
const NewWorkspaceFormSchema = object({
workspaceName: pattern(string(), /^[\w-]+$/),
imageId: nonempty(string()),
runtime: nonempty(string()),
});
function NewWorkspaceDialog({ onCreateSuccess }: NewWorkspaceDialogProps) {
const { data: templateImages, isLoading, error } = useTemplateImages();
const {
data: templateImages,
isLoading: isLoadingImages,
error,
} = useTemplateImages();
const { data: runtimes, isLoading: isLoadingRuntimes } =
useWorkspaceRuntimes();
const isLoading = isLoadingImages || isLoadingRuntimes;
function content() {
if (error) {
console.log(error);
return (
<p className="opacity-80">
An error occurred when fetching available options.
</p>
);
}
if (isLoading) {
return (
<div className="w-full flex items-center justify-center">
<LoadingSpinner />
</div>
);
}
if (!templateImages || !runtimes) {
return null;
}
if (templateImages.length === 0) {
return (
<>
<p className="opacity-80">
No images found. Create and build a template, and the resulting
image will show up here.
</p>
<Alert>
<AlertTitle>What are images?</AlertTitle>
<AlertDescription>
An image is used to bootstrap a workspace, including the operating
system, the environment, and packages, as specified by a template.
</AlertDescription>
</Alert>
</>
);
}
return (
<NewWorkspaceForm
templateImages={templateImages}
runtimes={runtimes}
onCreateSuccess={onCreateSuccess}
/>
);
}
return (
<DialogContent>
<DialogHeader>
<DialogTitle>New workspace</DialogTitle>
</DialogHeader>
{content()}
</DialogContent>
);
}
function NewWorkspaceForm({
templateImages,
runtimes,
onCreateSuccess,
}: {
templateImages: TemplateImage[];
runtimes: WorkspaceRuntime[];
onCreateSuccess: () => void;
}) {
const form = useForm({
resolver: superstructResolver(NewWorkspaceForm),
resolver: superstructResolver(NewWorkspaceFormSchema),
defaultValues: {
workspaceName: "",
imageId: "",
runtime: "",
},
});
const { createWorkspace, status } = useCreateWorkspace();
@@ -77,50 +154,14 @@ function NewWorkspaceDialog({ onCreateSuccess }: NewWorkspaceDialogProps) {
}
}, [status.type, toast, onCreateSuccess]);
async function onSubmit(values: Infer<typeof NewWorkspaceForm>) {
async function onSubmit(values: Infer<typeof NewWorkspaceFormSchema>) {
await createWorkspace({
workspaceName: values.workspaceName,
imageId: values.imageId,
runtime: values.runtime,
});
}
function content() {
if (error) {
console.log(error);
return (
<p className="opacity-80">
An error occurred when fetching available options.
</p>
);
}
if (isLoading) {
return (
<div className="w-full flex items-center justify-center">
<LoadingSpinner />
</div>
);
}
if (!templateImages) {
return null;
}
if (templateImages.length === 0) {
return (
<>
<p className="opacity-80">
No images found. Create and build a template, and the resulting
image will show up here.
</p>
<Alert>
<AlertTitle>What are images?</AlertTitle>
<AlertDescription>
An image is used to bootstrap a workspace, including the operating
system, the environment, and packages, as specified by a template.
</AlertDescription>
</Alert>
</>
);
}
return (
<Form {...form}>
<form
@@ -151,10 +192,7 @@ function NewWorkspaceDialog({ onCreateSuccess }: NewWorkspaceDialogProps) {
render={({ field }) => (
<FormItem>
<FormLabel>Image for this workspace</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select an image" />
@@ -173,22 +211,36 @@ function NewWorkspaceDialog({ onCreateSuccess }: NewWorkspaceDialogProps) {
)}
/>
<FormField
control={form.control}
name="runtime"
render={({ field }) => (
<FormItem>
<FormLabel>Docker runtime</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a Docker runtime" />
</SelectTrigger>
</FormControl>
<SelectContent>
{runtimes.map((runtime) => (
<SelectItem key={runtime.name} value={runtime.name}>
{runtime.name}
</SelectItem>
))}
</SelectContent>
</Select>
</FormItem>
)}
/>
<DialogFooter>
<Button type="submit">Create</Button>
</DialogFooter>
</form>
</Form>
);
}
return (
<DialogContent>
<DialogHeader>
<DialogTitle>New workspace</DialogTitle>
</DialogHeader>
{content()}
</DialogContent>
);
}
export { NewWorkspaceDialog };

View File

@@ -20,5 +20,10 @@ interface Workspace {
ports?: WorkspacePortMapping[];
}
interface WorkspaceRuntime {
name: string;
path: string;
}
export { WorkspaceStatus };
export type { Workspace, WorkspacePortMapping };
export type { Workspace, WorkspaceRuntime, WorkspacePortMapping };