i15-1: display the queue from the daq-queue-service

.devcontainer/devcontainer-lock.json

@@ -0,0 +1,9 @@
+{
+  "features": {
+    "ghcr.io/diamondlightsource/devcontainer-features/bash-config:1": {
+      "version": "1.0.3",
+      "resolved": "ghcr.io/diamondlightsource/devcontainer-features/bash-config@sha256:5b32dfbc5d02a04b200eba276b5f21b6fce31658e8965f7c4b25c002b46dab4c",
+      "integrity": "sha256:5b32dfbc5d02a04b200eba276b5f21b6fce31658e8965f7c4b25c002b46dab4c"
+    }
+  }
+}

apps/i15-1/README.md

@@ -7,6 +7,8 @@ The initial aim of this app to provide a science facing UI for the waffle projec
 To run this locally:
 
 1.  Start the devcontainer in VSCode
-1.  To make sure you have the most up-to-date environment either run `pnpm install` in the container or rebuild the container (via the Ctrl+Shift+P menu in VSCode)
-1.  Run `turbo dev --filter @atlas/i15-1`
-1.  Navigate to http://localhost:5173/
+2.  To make sure you have the most up-to-date environment either run `pnpm install` in the container or rebuild the container (via the Ctrl+Shift+P menu in VSCode)
+3.  In a terminal in this devcontainer run either:
+    - `VITE_QUEUE_MODE=local turbo dev --filter @atlas/i15-1` if running a local queue server on http://127.0.0.1:8001, **OR**
+    - `turbo dev --filter @atlas/i15-1` to use mocked backends
+4.  Navigate to http://localhost:5173/

apps/i15-1/helm/values.yaml

@@ -13,7 +13,14 @@ ui-base:
       rewriteTarget: /
       target:
         external:
-          uri: http://i15-1-blueapi.diamond.ac.uk
+          uri: https://i15-1-blueapi.diamond.ac.uk
+
+    - id: daq-queue
+      path: /api/daq-queue/
+      rewriteTarget: /
+      target:
+        external:
+          uri: https://i15-1-daq-queue.diamond.ac.uk/
 
     - id: supergraph
       path: /api/graphql

apps/i15-1/package.json

@@ -7,7 +7,10 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "generate:queue": "npx @hey-api/openapi-ts -i https://raw.githubusercontent.com/DiamondLightSource/daq-queuing-service/main/docs/reference/rest_api.json -o /workspaces/atlas/apps/i15-1/apps/i15-1/src/queue/generated/",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@apollo/client": "^4.2.3",
@@ -24,6 +27,7 @@
     "axios": "^1.13.4",
     "graphql": "^16.14.2",
     "lucide-react": "^1.17.0",
+    "material-react-table": "^3.2.1",
     "react-error-boundary": "^6.0.0"
   },
   "devDependencies": {
@@ -40,7 +44,7 @@
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-relay": "^2.1.0",
-    "vitest": "*"
+    "vitest": "^4.0.18"
   },
   "msw": {
     "workerDirectory": [

apps/i15-1/src/main.tsx

@@ -8,8 +8,10 @@ import { router } from "./router.tsx";
 import { createApi } from "@atlas/blueapi";
 import { AppProviders } from "./AppProviders.tsx";
 
+const QUEUE_MODE = import.meta.env.VITE_QUEUE_MODE;
+
 async function enableMocking() {
-  if (import.meta.env.DEV) {
+  if (import.meta.env.DEV && QUEUE_MODE != "local") {
     const { worker } = await import("./mocks/browser");
     return worker.start();
   }

apps/i15-1/src/mocks/handlers.ts

@@ -41,6 +41,106 @@ const fakeExperiments = {
 
 const fakePvws = ws.link("wss://pvws.diamond.ac.uk/pvws/pv");
 
+const fakeQueue = [
+  {
+    experiment_definition: {
+      plan_name: "sleep",
+      sample_id: "1",
+      params: {
+        time: 10,
+      },
+      instrument_session: "cm12345-1",
+    },
+    id: "aaa",
+    status: "Complete",
+    blueapi_calls: [
+      {
+        task_request: {
+          name: "sleep",
+          params: {
+            time: 10,
+          },
+          instrument_session: "cm12345-1",
+        },
+        status: "Success",
+        parent_task_id: "aaa",
+        result: { outcome: "success" },
+        errors: [],
+        time_started: "2026-05-28T15:09:29.507128",
+        time_completed: "2026-05-28T15:09:39.561053",
+        blueapi_id: fakeTaskId,
+      },
+    ],
+    position: 0,
+  },
+  {
+    experiment_definition: {
+      plan_name: "robot_load",
+      sample_id: "1",
+      params: {
+        puck: 1,
+        position: 1,
+      },
+      instrument_session: "cm12345-1",
+    },
+    id: "bbb",
+    status: "In progress",
+    blueapi_calls: [
+      {
+        task_request: {
+          name: "robot_load",
+          params: {
+            puck: 1,
+            position: 1,
+          },
+          instrument_session: "cm12345-1",
+        },
+        status: "In progress",
+        parent_task_id: "bbb",
+        result: null,
+        errors: [],
+        time_started: "2026-05-28T15:09:39.812345",
+        time_completed: null,
+        blueapi_id: fakeTaskId,
+      },
+    ],
+    position: 1,
+  },
+  {
+    experiment_definition: {
+      plan_name: "static_collection_plan",
+      sample_id: "1",
+      params: {
+        frames: 10,
+        exposure_time: 0.5,
+      },
+      instrument_session: "cm12345-1",
+    },
+    id: "ccc",
+    status: "Queued",
+    blueapi_calls: [
+      {
+        task_request: {
+          name: "Queued",
+          params: {
+            frames: 10,
+            exposure_time: 0.5,
+          },
+          instrument_session: "cm12345-1",
+        },
+        status: "Waiting",
+        parent_task_id: "ccc",
+        result: null,
+        errors: [],
+        time_started: null,
+        time_completed: null,
+        blueapi_id: fakeTaskId,
+      },
+    ],
+    position: 2,
+  },
+];
+
 export const handlers = [
   http.put("/api/blueapi/worker/task", () => {
     workerStatus.status = "RUNNING";
@@ -82,4 +182,12 @@ export const handlers = [
   http.get("/api/blueapi/plans", () => {
     return HttpResponse.json(plansResponse);
   }),
+
+  http.get("/api/daq-queue/queue/state", () => {
+    return HttpResponse.json({ paused: true });
+  }),
+
+  http.get("/api/daq-queue/queue", () => {
+    return HttpResponse.json(fakeQueue);
+  }),
 ];

apps/i15-1/src/queue/QueueStatusPanel.test.tsx

@@ -0,0 +1,103 @@
+import { fireEvent, render, screen } from "@atlas/vitest-conf";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { QueueStatusPanel, QueueControlButton } from "./QueueStatusPanel";
+import * as queueService from "./queueService";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("QueueStatusPanel", () => {
+  it("shows Queue Running when queue not paused and not empty", () => {
+    vi.spyOn(queueService, "useConnected").mockReturnValue({
+      connected: true,
+    } as any);
+
+    vi.spyOn(queueService, "useGetQueuedTasks").mockReturnValue({
+      data: [{ id: 1 }],
+    } as any);
+
+    vi.spyOn(queueService, "useToggleQueueState").mockReturnValue({
+      paused: false,
+    } as any);
+
+    render(<QueueStatusPanel />);
+
+    expect(screen.getByText(/Queue Running/i)).toBeInTheDocument();
+  });
+
+  it("shows Queue Finished when queue empty", () => {
+    vi.spyOn(queueService, "useConnected").mockReturnValue({
+      connected: true,
+    } as any);
+
+    vi.spyOn(queueService, "useGetQueuedTasks").mockReturnValue({
+      data: [],
+    } as any);
+
+    vi.spyOn(queueService, "useToggleQueueState").mockReturnValue({
+      paused: false,
+    } as any);
+
+    render(<QueueStatusPanel />);
+
+    expect(screen.getByText(/Queue Finished/i)).toBeInTheDocument();
+  });
+
+  it("shows Queue Paused when queue paused", () => {
+    vi.spyOn(queueService, "useConnected").mockReturnValue({
+      connected: true,
+    } as any);
+
+    vi.spyOn(queueService, "useGetQueuedTasks").mockReturnValue({
+      data: [{ id: 1 }],
+    } as any);
+
+    vi.spyOn(queueService, "useToggleQueueState").mockReturnValue({
+      paused: true,
+    } as any);
+
+    render(<QueueStatusPanel />);
+
+    expect(screen.getByText(/Queue Paused/i)).toBeInTheDocument();
+  });
+
+  it("shows Queue Not Connected when queue not connected", () => {
+    vi.spyOn(queueService, "useConnected").mockReturnValue({
+      connected: false,
+    } as any);
+
+    vi.spyOn(queueService, "useGetQueuedTasks").mockReturnValue({
+      data: [{ id: 1 }],
+    } as any);
+
+    vi.spyOn(queueService, "useToggleQueueState").mockReturnValue({
+      paused: true,
+    } as any);
+
+    render(<QueueStatusPanel />);
+
+    expect(screen.getByText(/Queue Not Connected/i)).toBeInTheDocument();
+  });
+});
+
+describe("QueueControlButton", () => {
+  it("calls toggle on click", () => {
+    const toggle = vi.fn();
+
+    vi.spyOn(queueService, "useConnected").mockReturnValue({
+      connected: true,
+    } as any);
+
+    vi.spyOn(queueService, "useToggleQueueState").mockReturnValue({
+      paused: false,
+      toggle,
+      isLoading: false,
+    } as any);
+
+    render(<QueueControlButton />);
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(toggle).toHaveBeenCalled();
+  });
+});

apps/i15-1/src/queue/QueueStatusPanel.tsx

@@ -0,0 +1,96 @@
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Stack,
+  Typography,
+} from "@mui/material";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import PauseIcon from "@mui/icons-material/Pause";
+import {
+  useConnected,
+  useGetQueuedTasks,
+  useToggleQueueState,
+} from "./queueService";
+
+export function QueueControlButton() {
+  const { paused, toggle, isLoading } = useToggleQueueState();
+  const { connected } = useConnected();
+
+  const icon = isLoading ? (
+    <CircularProgress size={16} />
+  ) : paused ? (
+    <PlayArrowIcon fontSize="small" />
+  ) : (
+    <PauseIcon fontSize="small" />
+  );
+
+  return (
+    <Button
+      sx={{
+        height: 28,
+        width: 100,
+        alignItems: "center",
+        "& .MuiButton-startIcon": {
+          display: "flex",
+          alignItems: "center",
+        },
+      }}
+      variant="contained"
+      color={!connected ? "error" : paused ? "warning" : "success"}
+      onClick={toggle}
+      disabled={!connected}
+      startIcon={icon}
+    >
+      {paused ? "Resume" : "Pause"}
+    </Button>
+  );
+}
+
+export function QueueStatusPanel() {
+  const { paused } = useToggleQueueState();
+  const queuedTasks = useGetQueuedTasks();
+  const empty = !queuedTasks.data || queuedTasks.data.length === 0;
+  const { connected } = useConnected();
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        border: "1px solid",
+        borderColor: !connected
+          ? "error.main"
+          : paused
+            ? "warning.main"
+            : "success.main",
+        borderRadius: 1,
+        padding: 1,
+      }}
+    >
+      <Stack direction="row" spacing={2} alignItems="center">
+        <Typography
+          variant="h6"
+          sx={{
+            color: !connected
+              ? "error.main"
+              : paused
+                ? "warning.main"
+                : "success.main",
+            fontWeight: 500,
+            fontSize: 17,
+          }}
+        >
+          Queue{" "}
+          {!connected
+            ? "Not Connected"
+            : empty
+              ? "Finished"
+              : paused
+                ? "Paused"
+                : "Running"}
+        </Typography>
+        <QueueControlButton />
+      </Stack>
+    </Box>
+  );
+}