Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Console streaming #15

Merged
merged 5 commits into from
Nov 19, 2024
Merged

Console streaming #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb3bea7
packages/api: streaming route for the console output
brnovasco Nov 19, 2024
cb0236d
apps/spu-ui: component for rendering the console output data
brnovasco Nov 19, 2024
f0bb8f8
apps/spu-ui: placing the console component in the experiment component
brnovasco Nov 19, 2024
21a5375
apps/spu-ui: moving queue elements to the queue component
brnovasco Nov 19, 2024
be8c89c
apps/spu-ui: animation element for pointing to the drop area
brnovasco Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions apps/spu-ui/src/app/_components/console.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
"use client";

import { useEffect, useRef } from "react";
import { cn } from "@sophys-web/ui";
import { api } from "../../trpc/react";

export function Console() {
const { data: messages } = api.consoleOutput.stream.useQuery();
const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
if (ref.current) {
ref.current.scrollTop = ref.current.scrollHeight;
}
}, [messages]);

return (
<div
className="max-h-60 min-h-40 min-w-96 overflow-y-auto rounded-lg bg-gray-900 p-4 pr-8 font-mono text-sm text-gray-300"
ref={ref}
>
{(!messages || messages.length === 0) && (
<div>Waiting for new messages...</div>
)}
{messages?.map((message) => (
<ConsoleMessage key={message.timestamp} message={message} />
))}
</div>
);
}

interface ParsedLogMessage {
logLevel: string;
date: string;
timestamp: string;
service: string;
textMessage: string;
}

function ConsoleMessage({ message }: { message: ParsedLogMessage }) {
const formattedServiceName = (service: string) => {
if (service.includes("bluesky_queueserver.manager")) {
const splitNames = service.split(".");
return splitNames[splitNames.length - 1].toUpperCase();
}
return service.toUpperCase();
};

return (
<div className="mb-2">
<span className="mr-2 text-gray-500">
[{message.logLevel.toUpperCase()}] {message.date} {message.timestamp}
</span>
<span
className={cn("mr-2", "text-gray-300", {
"text-purple-400":
message.service === "bluesky_queueserver.manager.manager",
"text-blue-400":
message.service === "bluesky_queueserver.manager.start_manager",
"text-cyan-400":
message.service === "bluesky_queueserver.manager.profile_ops",
"text-green-400":
message.service === "bluesky_queueserver.manager.worker",
"text-rose-400":
message.service === "bluesky_queueserver.manager.executor",
})}
>
{formattedServiceName(message.service)}
</span>
<span>{message.textMessage}</span>
</div>
);
}
9 changes: 6 additions & 3 deletions apps/spu-ui/src/app/_components/dropzone.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so much better

Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { useDroppable } from "@dnd-kit/core";
import { ArrowBigDownDashIcon } from "lucide-react";
import { cn } from "@sophys-web/ui";

interface DropzoneProps {
Expand All @@ -22,9 +23,11 @@ export function Dropzone(props: DropzoneProps) {
ref={setNodeRef}
>
{props.children}
<p className="absolute -bottom-8 mt-2 text-center text-sm text-gray-500">
{isOver ? "Drop here" : "Drag and drop here"}
</p>
{isOver ? (
<div className="absolute bottom-1/2 animate-bounce rounded-full bg-rose-600/20 p-2 shadow-md">
<ArrowBigDownDashIcon className="h-6 w-6 text-rose-800" />
</div>
) : null}
</div>
);
}
87 changes: 7 additions & 80 deletions apps/spu-ui/src/app/_components/experiment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,21 @@ import type {
} from "@dnd-kit/core";
import { useCallback, useState } from "react";
import { DndContext, DragOverlay } from "@dnd-kit/core";
import { PlayIcon, SquareIcon, Trash2Icon, UploadIcon } from "lucide-react";
import { Trash2Icon, UploadIcon } from "lucide-react";
import { Button } from "@sophys-web/ui/button";
import { toast } from "@sophys-web/ui/sonner";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@sophys-web/ui/tabs";
import type { SampleParams } from "../../lib/schemas/sample";
import type { Sample } from "./sample";
import { useQueue } from "../_hooks/use-queue";
import { useSSEData } from "../_hooks/use-sse-data";
import { useStatus } from "../_hooks/use-status";
import { trayOptions } from "../../lib/constants";
import { kwargsSubmitSchema, planName } from "../../lib/schemas/acquisition";
import { api } from "../../trpc/react";
import {
clearSamples as clearServerSamples,
setSamples as setServerSamples,
} from "../actions/samples";
import { EnvMenu } from "./env-menu";
import { Console } from "./console";
import { Queue } from "./queue";
import { SampleItem } from "./sample";
import { Tray } from "./tray";
Expand All @@ -45,11 +43,7 @@ export default function Experiment({
}: {
initialSamples: Sample[];
}) {
const utils = api.useUtils();
const { add, clear } = useQueue();
const { status } = useStatus();
const start = api.queue.start.useMutation();
const stop = api.queue.stop.useMutation();
const { add } = useQueue();
const [samples] = useSSEData("/api/samples", {
initialData: initialSamples,
});
Expand Down Expand Up @@ -96,37 +90,6 @@ export default function Experiment({
[samples, add],
);

const startQueue = useCallback(() => {
start.mutate(undefined, {
onSuccess: async () => {
await utils.queue.get.invalidate();
toast.success("Queue started");
},
onError: async () => {
await utils.queue.get.invalidate();
toast.error("Failed to start queue");
},
});
}, [start, utils.queue.get]);

const stopQueue = useCallback(() => {
stop.mutate(undefined, {
onSuccess: async () => {
await utils.queue.get.invalidate();
toast.success("Queue stopped");
},
onError: async () => {
await utils.queue.get.invalidate();
toast.error("Failed to stop queue");
},
});
}, [stop, utils.queue.get]);

const clearQueue = useCallback(async () => {
await clear.mutateAsync();
toast.info("Queue cleared");
}, [clear]);

const clearSamples = async () => {
return clearServerSamples();
};
Expand Down Expand Up @@ -172,7 +135,7 @@ export default function Experiment({

return (
<DndContext onDragEnd={handleDragEnd} onDragStart={handleDragStart}>
<div className="mx-auto flex items-center justify-center gap-4">
<div className="flex h-[calc(100vh-64px)] items-start justify-center gap-4 px-4 pt-4">
<Tabs defaultValue="tray1">
<div className="flex items-center gap-2">
<TabsList>
Expand Down Expand Up @@ -203,45 +166,9 @@ export default function Experiment({
/>
</TabsContent>
</Tabs>
<div className="flex w-2/3 flex-col space-y-4 p-4">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-center gap-2">
<h1 className="mr-auto text-lg font-medium">Experiment Queue</h1>
<EnvMenu />
<Button
disabled={
!status.data?.reState || status.data.itemsInQueue === 0
}
onClick={() => {
status.data?.reState === "running"
? stopQueue()
: startQueue();
}}
variant="default"
>
{status.data?.reState !== "running" ? (
<>
<PlayIcon className="mr-2 h-4 w-4" />
Start Queue
</>
) : (
<>
<SquareIcon className="mr-2 h-4 w-4" />
Stop Queue
</>
)}
</Button>
<Button
disabled={status.data?.itemsInQueue === 0}
onClick={clearQueue}
variant="outline"
>
<Trash2Icon className="mr-2 h-4 w-4" />
Clear Queue
</Button>
</div>
<Queue />
</div>
<div className="flex w-2/3 flex-col gap-4">
<Queue />
<Console />
</div>
</div>
<DragOverlay>
Expand Down
Loading