From 3a4d8ce1de75bde43850fe437525e5bc1ba26eeb Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Wed, 12 Jun 2024 17:01:36 +0200
Subject: [PATCH] Scaling anzeige
---
src/functions/api.js | 21 +++++++++++++++++++
src/functions/codeEditor.js | 40 +++++++++++++++++--------------------
src/functions/scaling.js | 11 ++++++++++
src/index.html | 25 ++++++++++++++++++-----
src/main.js | 2 ++
src/style.css | 15 ++++++++++++++
6 files changed, 87 insertions(+), 27 deletions(-)
create mode 100644 src/functions/scaling.js
diff --git a/src/functions/api.js b/src/functions/api.js
index 9cb1ecc..7eb8090 100644
--- a/src/functions/api.js
+++ b/src/functions/api.js
@@ -1,6 +1,7 @@
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);
+ }
+};
diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index a4fb17c..fff9218 100644
--- a/src/functions/codeEditor.js
+++ b/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);
diff --git a/src/functions/scaling.js b/src/functions/scaling.js
new file mode 100644
index 0000000..791af2a
--- /dev/null
+++ b/src/functions/scaling.js
@@ -0,0 +1,11 @@
+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;
+ });
+};
diff --git a/src/index.html b/src/index.html
index d4572f7..d7c4f48 100644
--- a/src/index.html
+++ b/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">
diff --git a/src/main.js b/src/main.js
index cc28ea3..9b4774e 100644
--- a/src/main.js
+++ b/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");
});
diff --git a/src/style.css b/src/style.css
index a64016c..02aca29 100644
--- a/src/style.css
+++ b/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;
+}
--
GitLab