i15-1: display basic feedback from blueapi

apps/i15-1/src/components/AbortPlanButton.tsx

@@ -0,0 +1,65 @@
+import {
+  Alert,
+  Button,
+  Snackbar,
+  Tooltip,
+  type SnackbarCloseReason,
+} from "@mui/material";
+
+import type { WorkerStateRequest } from "@atlas/blueapi";
+import { useSetWorkerState } from "@atlas/blueapi-query";
+import React, { useState } from "react";
+
+export function AbortPlanButton() {
+  const workerState = useSetWorkerState();
+  const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
+
+  const abortPlan = async () => {
+    const workerRequest: WorkerStateRequest = {
+      new_state: "ABORTING",
+      reason: "Abort button pressed",
+    };
+    workerState.mutate(workerRequest);
+  };
+
+  const handleClick = async () => {
+    setOpenSnackbar(true);
+    await abortPlan();
+  };
+
+  const handleSnackbarClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpenSnackbar(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Abort current blueapi operation" placement="bottom">
+        <Button
+          variant="contained"
+          color="error"
+          sx={{ width: "150px" }}
+          onClick={handleClick}
+        >
+          Abort
+        </Button>
+      </Tooltip>
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={5000}
+        onClose={handleSnackbarClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      >
+        <Alert onClose={handleSnackbarClose} severity="warning">
+          Abort button pressed, will abort current plan ...
+        </Alert>
+      </Snackbar>
+    </React.Fragment>
+  );
+}

apps/i15-1/src/components/BlueapiWorkerState.tsx

@@ -0,0 +1,48 @@
+import { useGetWorkerState } from "@atlas/blueapi-query";
+import { Card, CardContent, Stack, Typography, useTheme } from "@mui/material";
+
+function getStateColorMap() {
+  const theme = useTheme();
+  return {
+    IDLE: theme.palette.info.main,
+    RUNNING: theme.palette.success.main,
+    PAUSING: theme.palette.warning.main,
+    PAUSED: theme.palette.warning.main,
+    HALTING: theme.palette.warning.main,
+    STOPPING: theme.palette.error.main,
+    ABORTING: theme.palette.error.main,
+    SUSPENDING: theme.palette.error.main,
+    PANICKED: theme.palette.error.main,
+    UNKNOWN: theme.palette.background.paper,
+  };
+}
+
+export function BlueapiWorkerState() {
+  const theme = useTheme();
+  const workerState = useGetWorkerState();
+  const stateMap = getStateColorMap();
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        minWidth: 250,
+        maxHeight: 100,
+        bgcolor: theme.palette.background.paper,
+        borderColor: theme.palette.text.primary,
+      }}
+    >
+      <CardContent>
+        <Stack direction={"column"} spacing={"1"}>
+          <Typography>Blueapi worker state: </Typography>
+          <Typography
+            variant="body1"
+            color={stateMap[workerState.data ? workerState.data : "UNKNOWN"]}
+          >
+            {workerState.data}
+          </Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

apps/i15-1/src/components/RunPlanButton.tsx

@@ -1,12 +1,20 @@
-import { Button } from "@mui/material";
-import { useState } from "react";
+import {
+  Alert,
+  Button,
+  Snackbar,
+  Tooltip,
+  type SnackbarCloseReason,
+} from "@mui/material";
+import React, { useState } from "react";
 
 import {
+  useBlueapi,
   useGetWorkerState,
   useSetActiveTask,
   useSubmitTask,
+  useTask,
 } from "@atlas/blueapi-query";
-import type { TaskRequest } from "@atlas/blueapi";
+import type { TaskRequest, TaskResponse } from "@atlas/blueapi";
 import { useUserAuth } from "../context/userAuth/useUserAuth";
 
 type RunPlanButtonProps = {
@@ -16,36 +24,97 @@ type RunPlanButtonProps = {
   buttonText?: string;
 };
 
+type SeverityLevel = "success" | "info" | "warning" | "error";
+
 const RunPlanButton = ({
   name,
   params,
   instrumentSession,
   buttonText = "Run",
 }: RunPlanButtonProps) => {
+  const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
+  const [msg, setMsg] = useState<string>(`Running ${name} plan`);
+  const [severity, setSeverity] = useState<SeverityLevel>("info");
+
+  const [loading, setLoading] = useState<boolean>(false);
+
   const user = useUserAuth();
 
+  const workerState = useGetWorkerState();
+  const blueapi = useBlueapi();
+
   const submitTask = useSubmitTask();
   const startTask = useSetActiveTask();
-  const submitAndRunTask = async (task: TaskRequest) => {
-    await submitTask
-      .mutateAsync(task)
-      .then((response) => startTask.mutateAsync(response.task_id));
+
+  const waitForIdle = async (ms: number): Promise<void> => {
+    return new Promise((res) => setTimeout(res, ms));
+  };
+
+  const runTask = async (task_id: string) => {
+    await startTask.mutateAsync(task_id).then(async (response) => {
+      if (response) {
+        let status = workerState.data;
+        while (status !== "IDLE" && status !== "ABORTING") {
+          await waitForIdle(10);
+          status = workerState.data;
+        }
+        const data = await blueapi.tasks.get(task_id);
+        if (data.is_complete) {
+          if (data.outcome?.outcome === "success") {
+            setSeverity("success");
+            setMsg("Plan succeeded");
+          } else if (data.outcome?.outcome === "error") {
+            throw new Error(`${data.errors[0]}`);
+          }
+        }
+      }
+    });
+  };
+
+  const submitAndRunTask = async (
+    task: TaskRequest,
+  ): Promise<TaskResponse | void> => {
+    await submitTask.mutateAsync(task).then(async (response) => {
+      if (response) {
+        await runTask(response.task_id).catch((error) => {
+          throw new Error(error);
+        });
+      } else {
+        throw new Error("Task couldn't be submitted");
+      }
+    });
   };
 
-  const [loading, setLoading] = useState<boolean>(false);
   const handleClick = async () => {
+    setOpenSnackbar(true);
+    setLoading(true);
     const taskRequest: TaskRequest = {
       name: name,
       params: params,
       instrument_session: instrumentSession,
     };
-    setLoading(true);
-    await submitAndRunTask(taskRequest);
+    await submitAndRunTask(taskRequest).catch((error) => {
+      setSeverity("error");
+      setMsg(
+        `Failed to run plan ${name}, see console and blueapi logs for full error.`,
+      );
+      console.log(`${msg}.\n Reason: ${error}`);
+    });
     setLoading(false);
   };
 
+  const handleSnackbarClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpenSnackbar(false);
+  };
+
   const isButtonDisabled = () => {
-    const workerState = useGetWorkerState();
     const disable =
       user.person == null ||
       user.person == undefined ||
@@ -54,15 +123,27 @@ const RunPlanButton = ({
   };
 
   return (
-    <Button
-      variant="contained"
-      loading={loading}
-      sx={{ width: "150px" }}
-      onClick={handleClick}
-      disabled={isButtonDisabled()}
-    >
-      {buttonText}
-    </Button>
+    <React.Fragment>
+      <Button
+        variant="contained"
+        loading={loading}
+        sx={{ width: "150px" }}
+        onClick={handleClick}
+        disabled={isButtonDisabled()}
+      >
+        {buttonText}
+      </Button>
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={10000}
+        onClose={handleSnackbarClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      >
+        <Alert onClose={handleSnackbarClose} severity={severity}>
+          {msg}
+        </Alert>
+      </Snackbar>
+    </React.Fragment>
   );
 };
 

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

@@ -3,11 +3,15 @@ import { http, HttpResponse, ws } from "msw";
 const fakeTaskId = "7304e8e0-81c6-4978-9a9d-9046ab79ce3c";
 let workerStatus = { status: "IDLE", duration: 0 };
 
+function setWorkerState(new_state: string) {
+  workerStatus.status = new_state;
+}
+
 const fakePvws = ws.link("wss://pvws.diamond.ac.uk/pvws/pv");
 
 export const handlers = [
   http.put("/api/worker/task", () => {
-    workerStatus.status = "RUNNING";
+    setWorkerState("RUNNING");
     return HttpResponse.json({
       task_id: fakeTaskId,
     });
@@ -19,8 +23,25 @@ export const handlers = [
     });
   }),
 
-  http.put("/api/worker/state", () => {
-    return HttpResponse.json("IDLE");
+  http.get("/api/tasks/:task_id", () => {
+    return HttpResponse.json({
+      task_id: fakeTaskId,
+      task: { name: "fake-task", params: {}, metadata: {} },
+      request_id: "00",
+      is_complete: true,
+      is_pending: false,
+      errors: [],
+      outcome: { outcome: "success", type: "str", result: null },
+    });
+  }),
+
+  http.put("/api/worker/state", async ({ request }) => {
+    // @ts-ignore
+    const { new_state } = await request.json();
+    if (new_state === "ABORTING") {
+      setWorkerState(new_state);
+    }
+    return HttpResponse.json(workerStatus.status);
   }),
 
   http.get("/oauth2/userinfo", () => {

apps/i15-1/src/routes/Robot.tsx

@@ -1,10 +1,12 @@
 import { useInstrumentSession } from "../context/instrumentSession/useInstrumentSession";
-import { Box, Typography, Stack, useTheme, TextField } from "@mui/material";
+import { Box, Typography, Stack, useTheme } from "@mui/material";
 import { useState } from "react";
 import { NumberInput } from "../components/NumberInput";
 import RunPlanButton from "../components/RunPlanButton";
 import { ReadOnlyPv } from "@atlas/pvws-config";
 import { StatusCard } from "../components/StatusCard";
+import { BlueapiWorkerState } from "../components/BlueapiWorkerState";
+import { AbortPlanButton } from "../components/AbortPlanButton";
 
 type RobotSampleFormData = {
   puck: number;
@@ -16,6 +18,7 @@ function StatusSidebar() {
   return (
     <Box sx={{ ml: 5 }}>
       <Stack direction={"column"} spacing={2}>
+        <BlueapiWorkerState />
         <StatusCard
           title="Currently loaded"
           bgColor={theme.palette.info.light}
@@ -59,7 +62,6 @@ function Robot() {
   const theme = useTheme();
   return (
     <Box
-      // component={"section"}
       sx={{
         display: "flex",
         justifyContent: "center",
@@ -76,7 +78,7 @@ function Robot() {
           borderColor: theme.palette.primary.main,
         }}
       >
-        <Stack direction={"column"} spacing={3} alignItems={"center"}>
+        <Stack direction={"column"} spacing={4} alignItems={"center"}>
           <Typography component="h1" variant="h5">
             Sample Position
           </Typography>
@@ -98,17 +100,20 @@ function Robot() {
               }}
             />
           </Stack>
-          <RunPlanButton
-            name="robot_load"
-            params={formData}
-            instrumentSession={instrumentSession}
-            buttonText="Load Sample"
-          />
-          <RunPlanButton
-            name="robot_unload"
-            instrumentSession={instrumentSession}
-            buttonText="Unload Sample"
-          />
+          <Stack direction={"row"} spacing={3} alignItems={"center"}>
+            <RunPlanButton
+              name="robot_load"
+              params={formData}
+              instrumentSession={instrumentSession}
+              buttonText="Load Sample"
+            />
+            <RunPlanButton
+              name="robot_unload"
+              instrumentSession={instrumentSession}
+              buttonText="Unload Sample"
+            />
+          </Stack>
+          <AbortPlanButton />
         </Stack>
       </Box>
       <StatusSidebar />