Scaling anzeige

src/functions/api.js

 import axios from "axios";
 import { SERVER_URL } from "../config";
 import { loader, errorFeedback, successFeedback } from "./feedback";
+import { getScaleValues } from "./scaling";
 
 export const runCustomCode = () => {
   loader(true);
@@ -105,6 +106,7 @@ export const scaleOut = async (id) => {
       loader(false);
       if (response.status === 200) {
         successFeedback();
+        getScaleValues();
       } else {
         errorFeedback(response);
       }
@@ -115,3 +117,22 @@ export const scaleOut = async (id) => {
       console.error(error);
     });
 };
+
+export const scaleValues = async () => {
+  loader(true);
+  try {
+    const response = await axios.get(`${SERVER_URL}/deployment/scaleValues`);
+    loader(false);
+
+    if (response.status === 200) {
+      successFeedback();
+      return response.data.result;
+    } else {
+      errorFeedback(response);
+    }
+  } catch (error) {
+    loader(false);
+    errorFeedback(error);
+    console.error(error);
+  }
+};

src/functions/codeEditor.js

@@ -37,28 +37,24 @@ export const codeEditor = (instance) => {
     editorContainer.appendChild(closingX);
 
     let editorValues;
-    switch (filterToCode.type) {
-      case "Sender":
-        editorValues = {
-          doc: "// publisher.js\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n        const queue = 'hello';\n\n        channel.assertQueue(queue, {\n            durable: false\n        });\n\n        const sendMessage = () => {\n            const msg = 'Hello World! ' + new Date().toISOString();\n            channel.sendToQueue(queue, Buffer.from(msg));\n            console.log(\" [x] Sent '%s'\", msg);\n        };\n\n        setInterval(sendMessage, 1000);\n    });\n});\n",
-          extensions: [basicSetup, javascript()],
-          parent: editorContainer,
-        };
-        break;
-      case "Receiver":
-        editorValues = {
-          doc: "// consumer.js\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n\tif (error0) {\n\t\tthrow error0;\n\t}\n\tconnection.createChannel((error1, channel) => {\n\t\tif (error1) {\n\t\t\tthrow error1;\n\t\t}\n\n\t\tconst queue = 'hello';\n\n\t\tchannel.assertQueue(queue, {\n\t\t\tdurable: false\n\t\t});\n\n\t\tconsole.log(\" [*] Waiting for messages in %s. To exit press CTRL+C\", queue);\n\n\t\t// Funktion, um eine Nachricht aus der Queue zu konsumieren\n\t\tconst consumeMessage = () => {\n\t\t\tchannel.get(queue, { noAck: false }, (error, msg) => {\n\t\t\t\tif (error) {\n\t\t\t\t\tthrow error;\n\t\t\t\t}\n\t\t\t\tif (msg) {\n\t\t\t\t\tconsole.log(\" [x] Received '%s'\", msg.content.toString());\n\t\t\t\t\t// Nachricht bestätigen (acknowledge)\n\t\t\t\t\tchannel.ack(msg);\n\t\t\t\t} else {\n\t\t\t\t\tconsole.log(\" [x] No message received at this interval.\");\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// Setze ein Intervall von 3 Sekunden\n\t\tsetInterval(consumeMessage, 3000);\n\t});\n});\n",
-          extensions: [basicSetup, javascript()],
-          parent: editorContainer,
-        };
-        break;
-      default:
-        editorValues = {
-          doc: "const amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n        //TODO: Code logic here\n});\n",
-          extensions: [basicSetup, javascript()],
-          parent: editorContainer,
-        };
-        break;
+    if (filterToCode.type.includes("Sender"))
+      editorValues = {
+        doc: "// publisher.js\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n        const queue = 'hello';\n\n        channel.assertQueue(queue, {\n            durable: false\n        });\n\n        const sendMessage = () => {\n            const msg = 'Hello World! ' + new Date().toISOString();\n            channel.sendToQueue(queue, Buffer.from(msg));\n            console.log(\" [x] Sent '%s'\", msg);\n        };\n\n        setInterval(sendMessage, 1000);\n    });\n});\n",
+        extensions: [basicSetup, javascript()],
+        parent: editorContainer,
+      };
+    else if (filterToCode.type.includes("Receiver")) {
+      editorValues = {
+        doc: "// consumer.js\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n\tif (error0) {\n\t\tthrow error0;\n\t}\n\tconnection.createChannel((error1, channel) => {\n\t\tif (error1) {\n\t\t\tthrow error1;\n\t\t}\n\n\t\tconst queue = 'hello';\n\n\t\tchannel.assertQueue(queue, {\n\t\t\tdurable: false\n\t\t});\n\n\t\tconsole.log(\" [*] Waiting for messages in %s. To exit press CTRL+C\", queue);\n\n\t\t// Funktion, um eine Nachricht aus der Queue zu konsumieren\n\t\tconst consumeMessage = () => {\n\t\t\tchannel.get(queue, { noAck: false }, (error, msg) => {\n\t\t\t\tif (error) {\n\t\t\t\t\tthrow error;\n\t\t\t\t}\n\t\t\t\tif (msg) {\n\t\t\t\t\tconsole.log(\" [x] Received '%s'\", msg.content.toString());\n\t\t\t\t\t// Nachricht bestätigen (acknowledge)\n\t\t\t\t\tchannel.ack(msg);\n\t\t\t\t} else {\n\t\t\t\t\tconsole.log(\" [x] No message received at this interval.\");\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// Setze ein Intervall von 3 Sekunden\n\t\tsetInterval(consumeMessage, 3000);\n\t});\n});\n",
+        extensions: [basicSetup, javascript()],
+        parent: editorContainer,
+      };
+    } else {
+      editorValues = {
+        doc: "const amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n        //TODO: Code logic here\n});\n",
+        extensions: [basicSetup, javascript()],
+        parent: editorContainer,
+      };
     }
     const editor = new EditorView(editorValues);
 

src/functions/scaling.js

+import { scaleValues } from "./api";
+
+export const getScaleValues = async () => {
+  const values = await scaleValues();
+  console.log("### values: ", values);
+  values.forEach((value) => {
+    const filter = document.getElementById(value.id);
+    const scale = filter.querySelector(".Scale");
+    scale.textContent = value.count;
+  });
+};

src/index.html

@@ -27,11 +27,26 @@
           <hr />
           <div>
             <h5>FILTER</h5>
-            <div class="Filter" data-type="Start">Sender</div>
-            <div class="Filter" data-type="End">Receiver</div>
-            <div class="Filter" data-type="Default">BL</div>
-            <div class="Filter" data-type="Distributor">Router</div>
-            <div class="Filter" data-type="Collector">Aggregator</div>
+            <div class="Filter" data-type="Start">
+              Sender
+              <p class="Scale">0</p>
+            </div>
+            <div class="Filter" data-type="End">
+              Receiver
+              <p class="Scale">0</p>
+            </div>
+            <div class="Filter" data-type="Default">
+              BL
+              <p class="Scale">0</p>
+            </div>
+            <div class="Filter" data-type="Distributor">
+              Router
+              <p class="Scale">0</p>
+            </div>
+            <div class="Filter" data-type="Collector">
+              Aggregator
+              <p class="Scale">0</p>
+            </div>
           </div>
         </div>
         <div id="Diagram">

src/main.js

@@ -11,6 +11,7 @@ import {
   restartCustomCode,
   clearArchitecture,
 } from "./functions/api";
+import { getScaleValues } from "./functions/scaling";
 
 function App() {
   const appState = (() => {
@@ -86,6 +87,7 @@ function App() {
     } else {
       restartCustomCode();
     }
+    getScaleValues();
     document.getElementById("Run").setAttribute("disabled", "disabled");
     document.getElementById("Stop").removeAttribute("disabled");
   });

src/style.css

@@ -233,3 +233,18 @@
   margin: auto;
   visibility: hidden;
 }
+
+#Diagram .Scale {
+  position: absolute;
+  right: -6px;
+  top: -24px;
+  border: 2px black solid;
+  border-radius: 24px;
+  background-color: ghostwhite;
+  padding: 3px;
+}
+
+#Toolbox .Scale {
+  position: absolute;
+  visibility: hidden;
+}