Fixed client disconnect and navigation glitch

lib/rabbit/workers/TestResultsWorker.js

@@ -29,8 +29,6 @@ export default class TestResultsWorker extends Worker {
     // Alter to start next test
     // TODO the delay should be autopopulated either by the suite, or filled in by the server
     if (pipeline) return this.pipelineTrigger(pipeline);
-    const { dashboardSocketId: dsi } = pipeline;
-    this.pipelineClose(dsi);
   }
 
   pipelineTrigger(pipeline) {
@@ -38,7 +36,4 @@ export default class TestResultsWorker extends Worker {
     this.skio.to(dsi).emit(evt.PPL_TRG, pipeline);
   }
 
-  pipelineClose(socketId) {
-    this.skio.to(socketId).emit(evt.PPL_CLS);
-  }
 }

lib/sockets/clients/Executor.js

@@ -1,4 +1,4 @@
-import { Manager } from "socket.io-client";
+import io from "socket.io-client";
 import cp from "child_process";
 
 import modes from "../modes.js";
@@ -46,10 +46,9 @@ export default class Executor {
   }
 
   runJob() {
-    const mgr = new Manager(this.url, {
+    this.socket = io(this.url, {
       query: { mode: this.mode, jobId: this.jobId },
     });
-    this.socket = mgr.socket("/");
     this.socket.on("connect", this.spawn);
     this.socket.on("disconnect", this.onClose);
   }
@@ -57,7 +56,6 @@ export default class Executor {
   onClose() {
     console.log("Server disconnected, terminating process.");
     if (this.proc) this.proc.kill("SIGKILL");
-
   }
 
   onProcClose(code) {

lib/sockets/clients/Initiator.js

@@ -1,4 +1,4 @@
-import { Manager } from "socket.io-client";
+import { io } from "socket.io-client";
 import modes from "../modes.js";
 import events from "../events.js";
 
@@ -21,17 +21,20 @@ export default class Initiator {
   }
 
   async newJob(jobRequest, onLog, onClose, onCreate) {
-    const mgr = new Manager(this.url, {
-      query: { mode: this.mode, job: JSON.stringify(jobRequest) },
-    });
     onLog = onLog ?? this.onLog.bind(this);
     onClose = onClose ?? this.onClose.bind(this);
     onCreate = onCreate ?? this.onCreate.bind(this);
-    this.sk = mgr.socket("/");
+    const sk = io(this.url, {
-    this.sk.on(events.JOB_LOG, onLog);
+      query: { mode: this.mode, job: JSON.stringify(jobRequest) },
-    this.sk.on(events.JOB_CLS, onClose);
+    });
+    sk.on(events.JOB_LOG, onLog);
+    sk.on(events.JOB_CLS, function onJobClose(c) {
+      sk.disconnect();
+      onClose(c);
+    });
+    this.sk = sk;
     return new Promise((res) =>
-      this.sk.on(events.JOB_CRT, function onJobCreate(id) {
+      sk.on(events.JOB_CRT, function onJobCreate(id) {
         onCreate(id);
         res({ ...jobRequest, id });
       })
@@ -46,9 +49,6 @@ export default class Initiator {
     onPipelineTrigger,
     onPipelineClose
   ) {
-    const mgr = new Manager(this.url, {
-      query: { mode: this.mode, job: JSON.stringify(jobRequest) },
-    });
     onLog = onLog ?? this.onLog.bind(this);
     onClose = onClose ?? this.onClose.bind(this);
     onCreate = onCreate ?? this.onCreate.bind(this);
@@ -85,13 +85,18 @@ export default class Initiator {
         }
       });
     onPipelineClose = onPipelineClose ?? this.onPipelineClose.bind(this);
-    this.sk = mgr.socket("/");
+    const sk = io(this.url, {
-    this.sk.on(events.JOB_LOG, onLog);
+      query: { mode: this.mode, job: JSON.stringify(jobRequest) },
-    this.sk.on(events.JOB_CLS, onClose);
+    });
-    this.sk.on(events.PPL_TRG, onPipelineTrigger);
+    sk.on(events.JOB_LOG, onLog);
-    this.sk.on(events.PPL_CLS, onPipelineClose);
+    sk.on(events.JOB_CLS, function onJobClose(c) {
+      sk.disconnect();
+      onClose(c);
+    });
+    sk.on(events.PPL_TRG, onPipelineTrigger);
+    this.sk = sk;
     return new Promise((res) =>
-      this.sk.on(events.JOB_CRT, function onJobCreate(id) {
+      sk.on(events.JOB_CRT, function onJobCreate(id) {
         onCreate(id);
         res({ ...jobRequest, id });
       })

lib/sockets/clients/Viewer.js

@@ -1,4 +1,4 @@
-import { Manager } from "socket.io-client";
+import io from "socket.io-client";
 import modes from "../modes.js";
 import events from "../events.js";
 
@@ -14,12 +14,11 @@ export default class Viewer {
   }
 
   viewJob(jobId, onLog, onClose) {
-    const mgr = new Manager(this.url, {
-      query: { mode: this.mode, jobId },
-    });
     onLog = onLog ?? this.onLog.bind(this);
     onClose = onClose ?? this.onClose.bind(this);
-    const sk = mgr.socket("/");
+    const sk = io(this.url, {
+      query: { mode: this.mode, jobId },
+    });
     sk.on(events.JOB_LOG, onLog);
     sk.on(events.JOB_CLS, onClose);
     return sk;

lib/sockets/events.js

@@ -3,7 +3,6 @@ const JOB_LOG = "jl"; // Job Log Event
 const JOB_CLS = "jc"; // Job Close Event
 const JOB_CRT = "jcr"; // Job Create Event
 const PPL_TRG = "plr"; // Pipeline Trigger Event
-const PPL_CLS = "plc"; // Pipeline Close Event
 const ERR = "e"; // Socket Error
 
 export default {
@@ -12,6 +11,5 @@ export default {
   JOB_CLS,
   JOB_CRT,
   PPL_TRG,
-  PPL_CLS,
   ERR,
 };

src/views/jobs/JobView.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useJobNav } from "@qltr/util/JobTools";
 import JobContext, { jobStatus } from "@qltr/jobs";
 import StoreContext from "@qltr/store";
 import Box from "@mui/material/Box";
@@ -23,10 +23,10 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 
 export default function JobView(props) {
-  const navigate = useNavigate();
   const { job } = props;
   const { jobFactory, jobCancel, jobDestroy } = useContext(JobContext);
   const { state: store } = useContext(StoreContext);
+  const jobNav = useJobNav();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -51,7 +51,7 @@ export default function JobView(props) {
 
   function retryJob() {
     const jobId = jobFactory(job.builderCache);
-    if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
+    if (store.focusJob) jobNav.toJob(jobId);
   }
 
   function downloadLog() {
@@ -74,8 +74,8 @@ export default function JobView(props) {
   };
 
   function navigateToJobs() {
-    if (job.isPipeline) return navigate(`/qualiteer/jobs#p${job.pipelineId}`);
+    if (job.isPipeline) return jobNav.toPipeline(job.pipelineId);
-    navigate("/qualiteer/jobs");
+    jobNav.toJobs();
   }
 
   return (