implemented websocket

Author: jan hof

package-lock.json

@@ -44,7 +44,8 @@
     "react-dom": "^16.13.1",
     "react-redux": "7.2.1",
     "react-router-dom": "^5.2.0",
-    "redux": "4.0.5"
+    "redux": "4.0.5",
+    "ws": "^7.3.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.6.0",

package.json

@@ -2,12 +2,10 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { Service } from "../../src/types/ServiceTypes";
 
-export default function useServiceFetcher() {
-  const [services, setServices] = useState<Service[]>([]);
+export default function useServiceFetcher(setter: any) {
   useEffect(() => {
     axios.get<Service[]>("/api/services").then((response) => {
-      setServices(response.data);
+      setter(response.data);
     });
   }, []);
-  return services;
 }

src/hooks/ServiceFetcher.ts

@@ -3,6 +3,11 @@
   padding: 1.25rem;
 }
 
+.pull-right {
+  float: right;
+  margin-left: auto;
+}
+
 .c-app.dark-theme.c-default-layout {
   color: #e1e1e1 !important;
   background-color: #0a0b18;
@@ -18,6 +23,10 @@
   color: #e1e1e1 !important;
 }
 
+.dropdown-menu > .dropdown-item.disabled {
+  color: hsla(0, 0%, 88.2%, 0.6) !important;
+}
+
 .dropdown-menu > .dropdown-item:hover {
   color: #e1e1e1;
   background-color: hsla(0, 0%, 100%, 0.1);

src/scss/_custom.scss

@@ -1,8 +1,14 @@
 interface Service {
+  namespace: string;
   name: string;
   description: string;
   version: string;
   running: boolean;
+  required: boolean;
 }
 
-export type { Service };
+interface SocketMessage{
+  channel: string;
+}
+
+export type { Service, SocketMessage };

src/types/ServiceTypes.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   CCol,
   CDropdown,
@@ -12,9 +12,31 @@ import useServiceFetcher from "../../hooks/ServiceFetcher";
 import { Service } from "../../types/ServiceTypes";
 import CIcon from "@coreui/icons-react";
 
+const ws = new WebSocket("ws:/127.0.0.1:3000");
+
+ws.onopen = () => {
+  console.log("WebSocket Client Connected");
+};
+
+function send(data: any) {
+  ws.send(JSON.stringify(data));
+}
+
 const Dashboard = () => {
-  const services: Service[] = useServiceFetcher();
-  console.log(services);
+  const [services, setServices] = useState<Service[]>([]);
+
+  useServiceFetcher(setServices);
+
+  useEffect(() => {
+    ws.onmessage = (message) => {
+      let data = JSON.parse(message.data);
+      console.log(data);
+      if (data && data.channel === "service-update") {
+        setServices(data.services);
+      }
+    };
+  }, []);
+
   return (
     <CRow>
       {services
@@ -26,21 +48,33 @@ const Dashboard = () => {
                 color={service.running ? "gradient-success" : "gradient-danger"}
                 header={service.name}
                 text={"Version: " + service.version}
+                key={service.namespace}
                 footerSlot={
                   <p className="add-padding">{service.description}</p>
                 }
               >
                 <CDropdown>
-                  <CDropdownToggle color="transparent">
+                  <CDropdownToggle caret={false} color="transparent">
                     <CIcon name="cil-settings" />
                   </CDropdownToggle>
                   <CDropdownMenu className="pt-0 dark" placement="bottom-end">
-                    <CDropdownItem>
+                    <CDropdownItem
+                      disabled={service.required && service.running}
+                      onClick={() =>
+                        send({
+                          channel: "service-interact",
+                          namespace: service.namespace,
+                          activeState: service.running
+                            ? "DEACTIVATE"
+                            : "ACTIVATE",
+                        })
+                      }
+                    >
                       {service.running ? "Disable" : "Enable"}
+                      {service.required && service.running && (
+                        <CIcon name="cil-ban" className="pull-right" />
+                      )}
                     </CDropdownItem>
-                    <CDropdownItem>Another action</CDropdownItem>
-                    <CDropdownItem>Something else here...</CDropdownItem>
-                    <CDropdownItem disabled>Disabled action</CDropdownItem>
                   </CDropdownMenu>
                 </CDropdown>
               </CWidgetDropdown>