Introduce working status system for param runs in history

Author: sxprz

src/ui/base/spinner.re

@@ -0,0 +1,4 @@
+[@react.component]
+let make = () => {
+    <div className="spinner-border spinner-border-sm text-primary" role="status" />
+}

src/ui/icons/IconWarning.re

@@ -0,0 +1,7 @@
+[@react.component]
+let make = () => {
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-exclamation-triangle" viewBox="0 0 16 16">
+      <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
+      <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
+    </svg>
+}

src/ui/icons/IconX.re

@@ -0,0 +1,6 @@
+[@react.component]
+let make = () => {
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-x" viewBox="0 0 16 16">
+      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+    </svg>
+}

src/ui/panel/ParameterView.re

@@ -1,11 +1,17 @@
 open Unix
+//open Lwt
+//open Cohttp
+//open Cohttp_lwt_unix
+// TODO use above mentioned packages for http client to call goblint http server
 
 module ReactDOM = React.Dom
 
+type paramState = Executed | Executing | Canceled | Error;
+
 [@react.component]
 let make = (~parameters) => {
 
-    let params =
+    let initParams =
         parameters
         |> String.split_on_char(' ')
         |> List.map((s) => { String.sub(s, 1, String.length(s)-2)})
@@ -24,9 +30,9 @@ let make = (~parameters) => {
         |> timeToString;
     }
 
-    let (history, setHistory) = React.useState(_ => [|(params, getLocalTime())|]);
-    let (value, setValue) = React.useState(_ => params);
-
+    let (history, setHistory) = React.useState(_ => [|(initParams, getLocalTime(), Executed)|]);
+    let (value, setValue) = React.useState(_ => initParams);
+    let (disableCancel, setDisableCancel) = React.useState(_ => true);
 
     React.useEffect1(() => {
         None
@@ -41,25 +47,45 @@ let make = (~parameters) => {
     };
 
     let on_submit = () => {
-        let new_history = Array.append(history, [|(value, getLocalTime())|])
-        setHistory(_ => new_history)
+        let newHistory = Array.append(history, [|(value, getLocalTime(), Executing)|])
+        setHistory(_ => newHistory)
 
         // TODO transform param string with "' '" seperation mask
         // TODO execute newly transformed params
+
+        // TODO use cohttp to call goblint server
+
+        setDisableCancel(_ => false);
     };
 
+    let on_cancel = () => {
+        let lastElemIndex = Array.length(history) - 1;
+        let (param, time, _) = Array.get(history, lastElemIndex);
+
+        let intermediateHistory = Array.sub(history, 0, lastElemIndex);
+        let newHistory = Array.append(intermediateHistory, [|(param, time, Canceled)|]);
+        setHistory(_ => newHistory);
+
+        setDisableCancel(_ => true);
+    }
+
     let playButton = <Button on_click={on_submit}>
                          <IconPlay fill="bi bi-play-fill" />
                          {"Run" |> React.string}
                      </Button>;
 
     let map_history_entry_to_list_entry = (arr) => {
-        arr |> Array.mapi((i, (entry, time)) =>
+        arr |> Array.mapi((i, (entry, time, paramState)) =>
             {<li key={String.cat("params_", string_of_int(i))} className="list-group-item">
                 <div className="container text-center">
                     <div className="row">
                         <div className="col-2">
-                            <IconCheckmark />
+                            {switch paramState {
+                            | Executing => <Spinner />
+                            | Canceled  => <IconX />
+                            | Executed  => <IconCheckmark />
+                            | Error     => <IconWarning />
+                            }}
                         </div>
                         <div className="col-2">
                             <IconClock />
@@ -79,7 +105,7 @@ let make = (~parameters) => {
     <div>
         <div className="input-group mb-2">
             {playButton}
-            <Button color={`Danger} outline={true}>
+            <Button color={`Danger} outline={true} on_click={on_cancel} disabled={disableCancel}>
                 {"Cancel" |> React.string}
             </Button>
             <Input value on_change on_submit />