LR.UI Stop Test Run (#299)

* Added stop button and some functionality - 405 err * Added conditional for icon vis * Lint changes * Changed button/icon conditional * Added hardStop * Updated svg & stopTestRun passed param * Cleanup & added hard stop time
retaildevcrews · Sep 14, 2022 · ca17577 · ca17577
1 parent b9c9b9e
commit ca17577
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 25 deletions.
diff --git a/src/LodeRunner.UI/src/components/ResultPage/index.js b/src/LodeRunner.UI/src/components/ResultPage/index.js
@@ -137,6 +137,18 @@ const TestRun = ({ test, setModalContent }) => (
       <th>Total Completion Time:</th>
       <td>{getMMMDYYYYhmma(test[TEST_RUN.finalCompletionTime]) || "--"}</td>
     </tr>
+    <tr>
+      <td />
+      <td />
+      <th>Cancellation Requested:</th>
+      <td>{test[TEST_RUN.hardStop]?.toString() || "false"}</td>
+    </tr>
+    <tr>
+      <td />
+      <td />
+      <th>Cancellation Time:</th>
+      <td>{getMMMDYYYYhmma(test[TEST_RUN.hardStopTime]) || "--"}</td>
+    </tr>
     {!test[TEST_RUN.finalCompletionTime] &&
       test[TEST_RUN.config][CONFIG.runLoop] && (
         <tr>

diff --git a/src/LodeRunner.UI/src/components/ResultsOverviewPage/index.js b/src/LodeRunner.UI/src/components/ResultsOverviewPage/index.js
@@ -1,10 +1,15 @@
 import { useContext, useEffect, useState } from "react";
 import { A, navigate } from "hookrouter";
 import RefreshIcon from "../RefreshIcon";
+import StopIcon from "../StopIcon";
 import TrashIcon from "../TrashIcon";
 import PencilIcon from "../PencilIcon";
 import { AppContext } from "../../contexts";
-import { getTestRuns, deleteTestRun } from "../../services/testRuns";
+import {
+  getTestRuns,
+  deleteTestRun,
+  stopTestRun,
+} from "../../services/testRuns";
 import getMMMDYYYYhmma from "../../utilities/datetime";
 import { CONFIG, RESULT, TEST_RUN } from "../../models";
 import "./styles.css";
@@ -39,6 +44,31 @@ const ResultsOverviewPage = () => {
     }
   };
 
+  const handleStopTestRun = (id, name) => (e) => {
+    e.stopPropagation();
+
+    // eslint-disable-next-line no-alert
+    const isStopTestRun = window.confirm(
+      `Stop load test run, ${name} (${id})?`
+    );
+
+    if (isStopTestRun) {
+      setIsPending(true);
+
+      stopTestRun(id)
+        .catch((err) => {
+          // eslint-disable-next-line no-alert
+          alert(
+            `Unable to stop load test run, ${name} (${id})\n\n${err.message}`
+          );
+        })
+        .finally(() => {
+          setFetchResultsTrigger(Date.now());
+          setIsPending(false);
+        });
+    }
+  };
+
   useEffect(() => {
     setIsPending(true);
     getTestRuns()
@@ -72,6 +102,7 @@ const ResultsOverviewPage = () => {
           [TEST_RUN.createdTime]: createdTime,
           [TEST_RUN.scheduledStartTime]: scheduledStartTime,
           [TEST_RUN.finalCompletionTime]: finalCompletionTime,
+          [TEST_RUN.hardStop]: hardStop,
           [TEST_RUN.results]: clientResults,
           [TEST_RUN.config]: {
             [CONFIG.runLoop]: isRunLoop,
@@ -153,19 +184,35 @@ const ResultsOverviewPage = () => {
                     hoverColor="var(--c-neutral-lightest)"
                   />
                 </A>
-                <button
-                  className="unset deleterun"
-                  type="button"
-                  onClick={handleDeleteTestRun(testId, testName)}
-                  onKeyDown={handleDeleteTestRun(testId, testName)}
-                  aria-label="Delete Test Run"
-                >
-                  <TrashIcon
-                    width="2em"
-                    fillColor="var(--c-neutral-light)"
-                    hoverColor="var(--c-neutral-lightest)"
-                  />
-                </button>
+                {finalCompletionTime || hardStop ? (
+                  <button
+                    className="unset deleterun"
+                    type="button"
+                    onClick={handleDeleteTestRun(testId, testName)}
+                    onKeyDown={handleDeleteTestRun(testId, testName)}
+                    aria-label="Delete Test Run"
+                  >
+                    <TrashIcon
+                      width="2em"
+                      fillColor="var(--c-neutral-light)"
+                      hoverColor="var(--c-neutral-lightest)"
+                    />
+                  </button>
+                ) : (
+                  <button
+                    className="unset stoprun"
+                    type="button"
+                    onClick={handleStopTestRun(testId, testName)}
+                    onKeyDown={handleStopTestRun(testId, testName)}
+                    aria-label="Stop Test Run"
+                  >
+                    <StopIcon
+                      width="2em"
+                      fillColor="var(--c-neutral-light)"
+                      hoverColor="var(--c-neutral-lightest)"
+                    />
+                  </button>
+                )}
               </div>
             </div>
           );

diff --git a/src/LodeRunner.UI/src/components/StopIcon/index.js b/src/LodeRunner.UI/src/components/StopIcon/index.js
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+const StopIcon = ({ fillColor, hoverColor, width }) => {
+  const [currentColor, setCurrentColor] = useState(fillColor);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={width}
+      height={width}
+      viewBox="0 0 60 60"
+      onPointerEnter={() => setCurrentColor(hoverColor)}
+      onPointerLeave={() => setCurrentColor(fillColor)}
+    >
+      <g>
+        <path
+          fill={currentColor}
+          d="M 30 0 C 13.458 0 0 13.458 0 30 s 13.458 30 30 30 s 30 -13.458 30 -30 S 46.542 0 30 0 z M 30 58 C 14.561 58 2 45.439 2 30 S 14.561 2 30 2 s 28 12.561 28 28 S 45.439 58 30 58 z M 18 16 C 17 16 16 17 16 18 V 42 C 16 43 17 44 18 44 l 24 0 C 43 44 44 43 44 42 l 0 -24 C 44 17 43 16 42 16 z M 18 42 V 18 L 42 18 L 42 42 z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+StopIcon.defaultProps = {
+  fillColor: "var(--c-neutral-darkest)",
+  hoverColor: "var(--c-neutral)",
+  width: "1em",
+};
+
+StopIcon.propTypes = {
+  fillColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  width: PropTypes.string,
+};
+
+export default StopIcon;
diff --git a/src/LodeRunner.UI/src/models/index.js b/src/LodeRunner.UI/src/models/index.js
@@ -58,6 +58,8 @@ export const TEST_RUN = {
   scheduledStartTime: "startTime",
   finalCompletionTime: "completedTime",
   results: "clientResults",
+  hardStop: "hardStop",
+  hardStopTime: "hardStopTime",
 };
 
 export const RESULT = {

diff --git a/src/LodeRunner.UI/src/services/testRuns.js b/src/LodeRunner.UI/src/services/testRuns.js
@@ -49,4 +49,10 @@ const postTestRun = async (inputs) => {
   return writeApi("POST", "TestRuns")(inputs);
 };
 
-export { deleteTestRun, getTestRunById, getTestRuns, postTestRun };
+const stopTestRun = async (id) => {
+  const inputs = await getTestRunById(id);
+  inputs.hardStop = true;
+  return writeApi("PUT", `TestRuns/${id}`)(inputs);
+};
+
+export { deleteTestRun, getTestRunById, getTestRuns, postTestRun, stopTestRun };
diff --git a/src/LodeRunner.UI/src/services/utilities.js b/src/LodeRunner.UI/src/services/utilities.js
@@ -62,19 +62,25 @@ const getApi = async (endpoint) => {
 
 const writeApi = (method, endpoint) => async (payload) => {
   try {
-    const res = await fetch(`${REACT_APP_SERVER}/api/${endpoint}`, {
-      method,
-      headers: {
-        accept: "application/json",
-        "Content-Type": "application/json",
-        ...generatePropagationHeaders(),
-      },
-      body: JSON.stringify(payload),
-    });
+    const res = await fetch(
+      `${REACT_APP_SERVER}/api/${endpoint}`,
+      {
+        method,
+        headers: {
+          accept: "application/json",
+          "Content-Type": "application/json",
+          ...generatePropagationHeaders(),
+        },
+        body: JSON.stringify(payload),
+      }
+    );
     return await getResponseBody(res);
   } catch (err) {
     // eslint-disable-next-line no-console
-    console.error(`Issue with ${method} request at ${endpoint}`, err);
+    console.error(
+      `Issue with ${method} request at ${endpoint}`,
+      err
+    );
     throw err;
   }
 };