Display Logs in workflow UI - #1566#1566

backend/graph-proxy/src/graphql/workflows.rs

@@ -373,16 +373,17 @@ impl Artifact<'_> {
             .expires_in(std::time::Duration::from_secs(3600))
             .build()
             .unwrap();
-        s3_client
+        let req = s3_client
             .get_object()
             .bucket(s3_bucket.clone())
             .key(key)
             .presigned(presigning_config)
             .await
-            .map_err(|_| WorkflowParsingError::InvalidPresignedS3Url)
-            .and_then(|req| {
-                Url::parse(req.uri()).map_err(|_| WorkflowParsingError::InvalidPresignedS3Url)
-            })
+            .map_err(|_| WorkflowParsingError::InvalidPresignedS3Url)?;
+
+        tracing::info!("PRESIGNED URL: {}", req.uri());
+
+        Url::parse(req.uri()).map_err(|_| WorkflowParsingError::InvalidPresignedS3Url)
     }
 
     /// The MIME type of the artifact data

backend/graph-proxy/src/main.rs

@@ -141,7 +141,6 @@ async fn main() {
             // it's necessary. probably needs a tweak on the telemetry lib.
             let metrics = otlp_guard.meter_provider.as_ref().unwrap();
             let metrics_state = Arc::new(Metrics::new(metrics));
-
             info!(?args, "Starting GraphQL Server");
             let s3_client = Client::from(args.s3_client);
             let schema = root_schema_builder()

frontend/.devcontainer/devcontainer-lock.json

@@ -0,0 +1,14 @@
+{
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2.4.2": {
+      "version": "2.4.2",
+      "resolved": "ghcr.io/devcontainers/features/common-utils@sha256:bebfdcd6097a35506bf0f064a31e52ad4205467d9d7a226a688f51b851c88b65",
+      "integrity": "sha256:bebfdcd6097a35506bf0f064a31e52ad4205467d9d7a226a688f51b851c88b65"
+    },
+    "ghcr.io/devcontainers/features/git-lfs:1.2.3": {
+      "version": "1.2.3",
+      "resolved": "ghcr.io/devcontainers/features/git-lfs@sha256:7acbf0a99325949b6a2906ebf5aa421dad72b89ab8045031a60e69cb394a16b1",
+      "integrity": "sha256:7acbf0a99325949b6a2906ebf5aa421dad72b89ab8045031a60e69cb394a16b1"
+    }
+  }
+}

frontend/dashboard/src/routes/SingleWorkflowPage.tsx

@@ -3,11 +3,12 @@ import { useParams, Link, useSearchParams } from "react-router-dom";
 import { Suspense, useMemo } from "react";
 import "react-resizable/css/styles.css";
 import { Breadcrumbs } from "@diamondlightsource/sci-react-ui";
-import { SingleWorkflowView, WorkflowsNavbar } from "relay-workflows-lib";
+
 import {
   visitTextToVisit,
   WorkflowErrorBoundaryWithRetry,
 } from "workflows-lib";
+import { SingleWorkflowView, WorkflowsNavbar } from "relay-workflows-lib";
 import { tidyPath } from "./utils";
 
 function SingleWorkflowPage() {
@@ -68,6 +69,13 @@ function SingleWorkflowPage() {
                     workflowId={workflowId}
                     taskIds={taskIds}
                   />
+
+                  {/* Real-time Task Log Viewer */}
+                  {/* <TaskLogViewer
+                    visit={visit}
+                    workflowName={workflowName}
+                    selectedTaskId={selectedTaskId}
+                  /> */}
                 </Suspense>
               )}
             </WorkflowErrorBoundaryWithRetry>
@@ -82,7 +90,6 @@ function SingleWorkflowPage() {
           mb={4}
         >
           <Typography>No valid workflow selected</Typography>
-          {/* Go to instrumentSession or home page */}
         </Box>
       )}
     </>

frontend/relay-workflows-lib/lib/components/BaseWorkflowRelay.tsx

@@ -51,6 +51,7 @@
   expanded?: boolean;
   onChange?: () => void;
   fragmentRef: BaseWorkflowRelayFragment$key;
+  onSelectTask?: (taskId: string) => void;
 }
 
 export default function BaseWorkflowRelay({
@@ -59,8 +60,16 @@
   expanded,
   onChange,
   fragmentRef,
+  onSelectTask,
 }: BaseWorkflowRelayProps) {
+  const { workflowName: workflowNameURL } = useParams<{
+    workflowName: string;
+  }>();
+
+  const navigate = useNavigate();
+
   const data = useFragment(BaseWorkflowRelayFragment, fragmentRef);
+
   const statusText = data.status?.__typename ?? "Unknown";
   const submittedTime =
     data.status?.__typename === "WorkflowRunningStatus" ||
@@ -77,6 +86,7 @@
       const isCtrl = event?.ctrlKey || event?.metaKey;
 
       let updatedTaskIds: string[];
+      console.log("TASK CLICKED", taskId);
 
       if (isCtrl) {
         updatedTaskIds = selectedTaskIds.includes(taskId)
@@ -86,8 +96,23 @@
         updatedTaskIds = [taskId];
       }
       setSelectedTaskIds(updatedTaskIds);
+
+      if (workflowNameURL !== data.name) {
+        void navigate(`/workflows/${visitToText(data.visit)}/${data.name}`);
+      }
+
+      if (onSelectTask) {
+        onSelectTask(taskId);
+      }
     },
-    [selectedTaskIds, setSelectedTaskIds],
+    [
+      navigate,
+      selectedTaskIds,
+      setSelectedTaskIds,
+      workflowNameURL,
+      data,
+      onSelectTask,
+    ],
   );
 
   return (

frontend/relay-workflows-lib/lib/components/RelayEnvironment.ts

@@ -103,9 +103,34 @@ const fetchFn: FetchFunction = async (request, variables) => {
 
   return await resp.json(); // eslint-disable-line @typescript-eslint/no-unsafe-return
 };
-
+console.log("HTTP_ENDPOINTXXXXXXXXXXXXXXXXXXXXXXXXXXXX:", HTTP_ENDPOINT);
+console.log(
+  "WS_ENDPOINTYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY:",
+  WS_ENDPOINT,
+);
 export const wsClient = createClient({
   url: WS_ENDPOINT,
+  on: {
+    connecting: () => {
+      console.log("WS connecting");
+    },
+    opened: () => {
+      console.log("WS opened");
+    },
+    connected: () => {
+      console.log("WS connected");
+    },
+    closed: (event) => {
+      console.log("WS closed", event);
+    },
+  },
+  webSocketImpl: class extends WebSocket {
+    constructor(url: string | URL, protocols?: string | string[]) {
+      console.log("Creating browser WebSocket:", url);
+      super(url, protocols);
+    }
+  },
+
   connectionParams: async () => {
     if (!USE_AUTH_GATEWAY && !keycloak.authenticated) {
       await ensureKeycloakInit();
@@ -120,6 +145,8 @@ export const wsClient = createClient({
 });
 
 const subscribeFn: SubscribeFunction = (operation, variables) => {
+  console.log("WS SUBSCRIBE STARTED:", operation.name, variables);
+
   return Observable.create((sink) => {
     const cleanup = wsClient.subscribe(
       {
@@ -129,20 +156,23 @@ const subscribeFn: SubscribeFunction = (operation, variables) => {
       },
       {
         next: (response) => {
-          const data = response.data;
-          if (data) {
-            sink.next({ data } as GraphQLResponse);
-          } else if (data == null) {
-            console.warn("Data is null:", response);
-          } else {
-            console.error("Subscription error response:", response);
-            sink.error(new Error("Subscription response missing data"));
-          }
+          console.log("WS SUBSCRIPTION RESPONSE:", response);
+
+          sink.next(response as GraphQLResponse);
+        },
+
+        error: (error) => {
+          console.error("WS SUBSCRIPTION ERROR:", error);
+          sink.error(error as Error);
+        },
+
+        complete: () => {
+          console.log("WS SUBSCRIPTION COMPLETE");
+          sink.complete();
         },
-        error: sink.error.bind(sink),
-        complete: sink.complete.bind(sink),
       },
     );
+
     return cleanup;
   });
 };

frontend/relay-workflows-lib/lib/components/TasksFlow.tsx

@@ -144,30 +144,38 @@ const TasksFlow: React.FC<TasksFlowProps> = ({
 
   useEffect(() => {
     const handleResizeAndOverflow = () => {
-      if (containerRef.current) {
+      if (containerRef.current && reactFlowInstance.current) {
         const { width, height } = containerRef.current.getBoundingClientRect();
-        const boundingBox = getNodesBounds(layoutedNodes);
+
+        const nodeLookup = reactFlowInstance.current.getNodes();
+
+        const boundingBox = getNodesBounds(nodeLookup);
+
         setIsOverflow(boundingBox.width > width || boundingBox.height > height);
       }
     };
+
     const resizeObserver = new ResizeObserver(handleResizeAndOverflow);
+
     const currentContainerRef = containerRef.current;
 
     if (currentContainerRef) {
       resizeObserver.observe(currentContainerRef);
     }
+
     handleResizeAndOverflow();
+
     window.addEventListener("resize", handleResizeAndOverflow);
 
     return () => {
       if (currentContainerRef) {
         resizeObserver.unobserve(currentContainerRef);
       }
+
       resizeObserver.disconnect();
       window.removeEventListener("resize", handleResizeAndOverflow);
     };
   }, [layoutedNodes, layoutedEdges]);
-
   return (
     <Box ref={containerRef} display="flex" height="100%" width="100%">
       <Box

frontend/relay-workflows-lib/lib/main.ts

@@ -1,4 +1,5 @@
 export { default as Workflow } from "./components/WorkflowRelay";
+export * from "./views/TaskLogViewer";
 export { default as Submission } from "./components/SubmissionForm";
 export { default as RetriggerWorkflow } from "./query-components/RetriggerWorkflow";
 export { default as SubmittedMessagesList } from "./components/SubmittedMessagesList";

frontend/relay-workflows-lib/lib/utils/coreUtils.ts

@@ -109,10 +109,13 @@ export function isFinished(
     | LiveSingleWorkflowViewSubscription$data
     | LiveWorkflowRelaySubscription$data,
 ) {
-  return (
-    data.workflow?.status?.__typename &&
-    finishedStatuses.has(data.workflow.status.__typename)
-  );
+  const workflow = data.workflow;
+
+  if (!workflow?.status) {
+    return false;
+  }
+
+  return finishedStatuses.has(workflow.status.__typename);
 }
 
 //** An abstraction to allow mocking of window.location.assign in tests */