finished websocket implementation

Author: jan hof

src/scss/_variables.scss

@@ -27,3 +27,8 @@ $info-gradient: (
   "start": #39f,
   "stop": #2982cc,
 );
+
+$secondary-gradient: (
+  "start": #c8d2dcb2,
+  "stop": #4c4f54,
+);

src/types/ServiceTypes.ts

@@ -3,12 +3,20 @@ interface Service {
   name: string;
   description: string;
   version: string;
-  running: boolean;
+  state: ServiceState;
   required: boolean;
 }
 
+enum ServiceState {
+  RUNNNING = 0,
+  IDLE = 1,
+  STARTING = 2,
+  STOPPED = 3,
+}
+
 interface SocketMessage{
   channel: string;
 }
 
+export {ServiceState}
 export type { Service, SocketMessage };

src/views/dashboard/Dashboard.tsx

@@ -9,26 +9,56 @@ import {
   CWidgetDropdown,
 } from "@coreui/react";
 import useServiceFetcher from "../../hooks/ServiceFetcher";
-import { Service } from "../../types/ServiceTypes";
+import { Service, ServiceState } from "../../types/ServiceTypes";
 import CIcon from "@coreui/icons-react";
 
-const ws = new WebSocket("ws:/127.0.0.1:3000");
+let ws: WebSocket;
 
-ws.onopen = () => {
-  console.log("WebSocket Client Connected");
-};
+function connect() {
+  ws = new WebSocket("ws:/127.0.0.1:3000");
+  ws.onopen = () => {
+    console.log("WebSocket Client Connected");
+  };
+
+  ws.onerror = function(error) {
+    console.log(error);
+  };
+
+  ws.onclose = function(close) {
+    if (close.code !== 1000) {
+      //1000 = Normal Closure
+      console.log("reconnecting in 3 seconds...");
+      setTimeout(() => connect(), 3000);
+    }
+  };
+}
 
 function send(data: any) {
   ws.send(JSON.stringify(data));
 }
 
+function getStateStyle(service: Service) {
+  switch (service.state) {
+    case ServiceState.STARTING:
+      return "gradient-warning";
+    case ServiceState.RUNNNING:
+      return "gradient-success";
+    case ServiceState.IDLE:
+      return "gradient-secondary";
+    case ServiceState.STOPPED:
+      return "gradient-danger";
+  }
+}
+
 const Dashboard = () => {
   const [services, setServices] = useState<Service[]>([]);
 
-  useServiceFetcher(setServices);
+  //useServiceFetcher(setServices);
 
   useEffect(() => {
+    connect();
     ws.onmessage = (message) => {
+      console.log(message);
       let data = JSON.parse(message.data);
       console.log(data);
       if (data && data.channel === "service-update") {
@@ -40,12 +70,12 @@ const Dashboard = () => {
   return (
     <CRow>
       {services
-        .sort((a, b) => (a.running === b.running ? 0 : a.running ? -1 : 1))
+        .sort((a, b) => a.state - b.state)
         .map((service) => {
           return (
             <CCol sm="6" lg="3">
               <CWidgetDropdown
-                color={service.running ? "gradient-success" : "gradient-danger"}
+                color={getStateStyle(service)}
                 header={service.name}
                 text={"Version: " + service.version}
                 key={service.namespace}
@@ -59,21 +89,26 @@ const Dashboard = () => {
                   </CDropdownToggle>
                   <CDropdownMenu className="pt-0 dark" placement="bottom-end">
                     <CDropdownItem
-                      disabled={service.required && service.running}
+                      disabled={
+                        service.required &&
+                        service.state !== ServiceState.STOPPED
+                      }
                       onClick={() =>
                         send({
-                          channel: "service-interact",
-                          namespace: service.namespace,
-                          activeState: service.running
-                            ? "DEACTIVATE"
-                            : "ACTIVATE",
+                          channel: "service-toggle",
+                          data: {
+                            namespace: service.namespace,
+                          },
                         })
                       }
                     >
-                      {service.running ? "Disable" : "Enable"}
-                      {service.required && service.running && (
-                        <CIcon name="cil-ban" className="pull-right" />
-                      )}
+                      {service.state === ServiceState.STOPPED
+                        ? "Enable"
+                        : "Disable"}
+                      {service.required &&
+                        service.state !== ServiceState.STOPPED && (
+                          <CIcon name="cil-ban" className="pull-right" />
+                        )}
                     </CDropdownItem>
                   </CDropdownMenu>
                 </CDropdown>