Skip to content
Snippets Groups Projects
Commit 3a4d8ce1 authored by Robin Leber's avatar Robin Leber
Browse files

Scaling anzeige

parent 234206eb
No related branches found
No related tags found
No related merge requests found
import axios from "axios"; import axios from "axios";
import { SERVER_URL } from "../config"; import { SERVER_URL } from "../config";
import { loader, errorFeedback, successFeedback } from "./feedback"; import { loader, errorFeedback, successFeedback } from "./feedback";
import { getScaleValues } from "./scaling";
export const runCustomCode = () => { export const runCustomCode = () => {
loader(true); loader(true);
...@@ -105,6 +106,7 @@ export const scaleOut = async (id) => { ...@@ -105,6 +106,7 @@ export const scaleOut = async (id) => {
loader(false); loader(false);
if (response.status === 200) { if (response.status === 200) {
successFeedback(); successFeedback();
getScaleValues();
} else { } else {
errorFeedback(response); errorFeedback(response);
} }
...@@ -115,3 +117,22 @@ export const scaleOut = async (id) => { ...@@ -115,3 +117,22 @@ export const scaleOut = async (id) => {
console.error(error); 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);
}
};
...@@ -37,28 +37,24 @@ export const codeEditor = (instance) => { ...@@ -37,28 +37,24 @@ export const codeEditor = (instance) => {
editorContainer.appendChild(closingX); editorContainer.appendChild(closingX);
let editorValues; let editorValues;
switch (filterToCode.type) { if (filterToCode.type.includes("Sender"))
case "Sender": editorValues = {
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",
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()],
extensions: [basicSetup, javascript()], parent: editorContainer,
parent: editorContainer, };
}; else if (filterToCode.type.includes("Receiver")) {
break; editorValues = {
case "Receiver": 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",
editorValues = { extensions: [basicSetup, javascript()],
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", parent: editorContainer,
extensions: [basicSetup, javascript()], };
parent: editorContainer, } else {
}; editorValues = {
break; 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",
default: extensions: [basicSetup, javascript()],
editorValues = { parent: editorContainer,
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;
} }
const editor = new EditorView(editorValues); const editor = new EditorView(editorValues);
......
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;
});
};
...@@ -27,11 +27,26 @@ ...@@ -27,11 +27,26 @@
<hr /> <hr />
<div> <div>
<h5>FILTER</h5> <h5>FILTER</h5>
<div class="Filter" data-type="Start">Sender</div> <div class="Filter" data-type="Start">
<div class="Filter" data-type="End">Receiver</div> Sender
<div class="Filter" data-type="Default">BL</div> <p class="Scale">0</p>
<div class="Filter" data-type="Distributor">Router</div> </div>
<div class="Filter" data-type="Collector">Aggregator</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> </div>
<div id="Diagram"> <div id="Diagram">
......
...@@ -11,6 +11,7 @@ import { ...@@ -11,6 +11,7 @@ import {
restartCustomCode, restartCustomCode,
clearArchitecture, clearArchitecture,
} from "./functions/api"; } from "./functions/api";
import { getScaleValues } from "./functions/scaling";
function App() { function App() {
const appState = (() => { const appState = (() => {
...@@ -86,6 +87,7 @@ function App() { ...@@ -86,6 +87,7 @@ function App() {
} else { } else {
restartCustomCode(); restartCustomCode();
} }
getScaleValues();
document.getElementById("Run").setAttribute("disabled", "disabled"); document.getElementById("Run").setAttribute("disabled", "disabled");
document.getElementById("Stop").removeAttribute("disabled"); document.getElementById("Stop").removeAttribute("disabled");
}); });
......
...@@ -233,3 +233,18 @@ ...@@ -233,3 +233,18 @@
margin: auto; margin: auto;
visibility: hidden; 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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment