Merge pull request #74 from qua-platform/bugfixes/error_mesages_edit_…

…state_update Bugfixes/error mesages edit state update
qua-platform · Sep 4, 2024 · 4857b63 · 4857b63
2 parents e43ec8e + cb3b382
commit 4857b63
Show file tree

Hide file tree

Showing 11 changed files with 390 additions and 222 deletions.
diff --git a/frontend/src/common/interfaces/Api.ts b/frontend/src/common/interfaces/Api.ts
@@ -1,5 +1,7 @@
+import { NodeStatusErrorWithDetails } from "../../modules/Nodes/context/NodesContext";
+
 export type Res<P = Record<string, never>> = {
   isOk: boolean;
-  error?: string | { detail: string };
+  error?: string | { detail: string } | NodeStatusErrorWithDetails;
   result?: P;
 };
diff --git a/frontend/src/modules/Nodes/components/NodeElement/NodeElement.module.scss b/frontend/src/modules/Nodes/components/NodeElement/NodeElement.module.scss
@@ -16,20 +16,21 @@
 .row {
   display: flex;
   justify-content: space-between;
-  flex: 1;
   flex-direction: row;
   padding-bottom: 10px;
+  max-width: 100%;
 }
 
 .dot {
-  height: 7px;
-  width: 7px;
+  min-height: 7px;
+  min-width: 7px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
 }
 
-.titleOrName {
+.titleOrNameWrapper {
+  max-width: calc(100% - 127px);
   display: flex;
   flex: 1;
   font-size: 18px;
@@ -38,6 +39,11 @@
   gap: 10px;
 }
 
+.titleOrName {
+  display: block;
+  max-width: 100%;
+}
+
 .description {
   align-content: center;
   font-size: 12px;

diff --git a/frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx b/frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx
@@ -3,7 +3,7 @@ import styles from "./NodeElement.module.scss";
 import BlueButton from "../../../../ui-lib/components/Button/BlueButton";
 import InputField from "../../../../DEPRECATED_components/common/Input/InputField";
 import { Checkbox, CircularProgress } from "@mui/material";
-import { useNodesContext } from "../../context/NodesContext";
+import { NodeStatusErrorWithDetails, useNodesContext } from "../../context/NodesContext";
 import { classNames } from "../../../../utils/classnames";
 import { NodesApi } from "../../api/NodesAPI";
 import { InputParameter, Parameters, SingleParameter } from "../../../common/Parameters";
@@ -78,11 +78,33 @@ export const NodeElement: React.FC<{ nodeKey: string; node: NodeDTO }> = ({ node
     return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
   }
 
-  const handleClick = () => {
+  const handleClick = async () => {
     setIsNodeRunning(true);
     setRunningNode(node);
-    setRunningNodeInfo({ timestampOfRun: formatDate(new Date()), status: "running" });
-    NodesApi.submitNodeParameters(node.name, transformInputParameters(node.parameters as InputParameter));
+    const result = await NodesApi.submitNodeParameters(node.name, transformInputParameters(node.parameters as InputParameter));
+    if (result.isOk) {
+      console.log("result", result);
+      setRunningNodeInfo({ timestampOfRun: formatDate(new Date()), status: "running" });
+    } else {
+      const errorWithDetails = result.error as NodeStatusErrorWithDetails;
+      setRunningNodeInfo({
+        timestampOfRun: formatDate(new Date()),
+        status: "error",
+        error: {
+          error_class: errorWithDetails.detail[0].type,
+          traceback: undefined,
+          message: errorWithDetails.detail[0].msg,
+        },
+      });
+    }
+  };
+
+  const insertSpaces = (str: string, interval = 40) => {
+    let result = "";
+    for (let i = 0; i < str.length; i += interval) {
+      result += str.slice(i, i + interval) + " ";
+    }
+    return result.trim();
   };
 
   return (
@@ -93,9 +115,9 @@ export const NodeElement: React.FC<{ nodeKey: string; node: NodeDTO }> = ({ node
       }}
     >
       <div className={styles.row}>
-        <div className={styles.titleOrName}>
+        <div className={styles.titleOrNameWrapper}>
           <div className={styles.dot}></div>
-          {node.title ?? node.name}
+          <div className={styles.titleOrName}>{insertSpaces(node.title ?? node.name)}</div>
         </div>
         <div className={styles.description}>{node.description}</div>
         <div className={styles.runButtonWrapper}>

diff --git a/frontend/src/modules/Nodes/components/RunningJob/RunningJob.module.scss b/frontend/src/modules/Nodes/components/RunningJob/RunningJob.module.scss
@@ -12,6 +12,8 @@
 }
 
 .title {
+  display: flex;
+  align-items: center;
   gap: 10px;
   font-size: 20px;
   vertical-align: middle;
@@ -26,6 +28,18 @@
   display: inline-block;
 }
 
+.stopButtonWrapper {
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 10px;
+}
+
+.stopButton {
+  background-color: #e02525;
+}
+
 .infoWrapper {
   overflow: scroll;
   display: flex;
@@ -96,6 +110,27 @@
   font-size: 12px;
 }
 
+.stateUpdateValueTextWrapper {
+  padding-top: 5px;
+  align-items: center;
+  display: flex;
+}
+
+.editIconWrapper {
+  padding-left: 5px;
+}
+
+.newValueOfState {
+  padding-left: 5px;
+
+  input {
+    font-size: 12px;
+    padding: 0 !important;
+    height: 20px !important;
+  }
+
+}
+
 .nodeStatusErrorWrapper {
   overflow: scroll;
   padding-left: 52px;