From 83a47d4733442142960ade48a7ac30a47fb7bf2b Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Wed, 19 Jun 2024 13:39:13 +0200
Subject: [PATCH] Naming, Styling + CHANGE clearing and killing
---
src/functions/codeEditor.js | 2 +-
src/functions/scaling.js | 20 +++++++++---
src/functions/visualValidation.js | 10 ++++++
src/index.html | 7 ++--
src/main.js | 53 +++++++++++++++++++------------
src/style.css | 33 +++++++++++++------
6 files changed, 87 insertions(+), 38 deletions(-)
diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index 949a2c3..64f5bf9 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -103,5 +103,5 @@ const handleSubmit = (node, code) => {
createCustomCode(requestBody);
node.style.visibility = "hidden";
showCheck(window.selectedFilter);
- document.getElementById("Run").removeAttribute("disabled");
+ document.getElementById("Deploy").removeAttribute("disabled");
};
diff --git a/src/functions/scaling.js b/src/functions/scaling.js
index ae4f580..7eef173 100644
--- a/src/functions/scaling.js
+++ b/src/functions/scaling.js
@@ -2,9 +2,19 @@ import { scaleValues } from "./api";
export const getScaleValues = async () => {
const values = await scaleValues();
- values.forEach((value) => {
- const filter = document.getElementById(value.id);
- const scale = filter.querySelector(".Scale");
- scale.textContent = value.count;
- });
+ if (values.length !== 0) {
+ values.forEach((value) => {
+ const filter = document.getElementById(value.id);
+ const scale = filter.querySelector(".Scale");
+ scale.textContent = value.count;
+ });
+ } else {
+ // kill Deployment was triggerd
+ const diagramElement = document.getElementById("Diagram");
+ const allArchElements = diagramElement.querySelectorAll(".Filter");
+ allArchElements.forEach((element) => {
+ const scale = element.querySelector(".Scale");
+ scale.textContent = 0;
+ });
+ }
};
diff --git a/src/functions/visualValidation.js b/src/functions/visualValidation.js
index 08dcc3e..3705408 100644
--- a/src/functions/visualValidation.js
+++ b/src/functions/visualValidation.js
@@ -25,3 +25,13 @@ export const showDocker = () => {
let elementsToShow = document.querySelectorAll("#Diagram #Docker");
elementsToShow.forEach((element) => (element.style.visibility = "visible"));
};
+
+export const showAllWarning = () => {
+ let elementsToHide = document.querySelectorAll(
+ "#Diagram #Docker, #Diagram #Check"
+ );
+ elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
+
+ let elementsToShow = document.querySelectorAll("#Diagram #Warning");
+ elementsToShow.forEach((element) => (element.style.visibility = "visible"));
+};
diff --git a/src/index.html b/src/index.html
index 62fef17..fb357c9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -104,9 +104,10 @@
<div id="Loader"></div>
<i id="Success" class="far fa-check-circle"></i>
<i id="Error" class="far fa-times-circle"></i>
- <button id="ClearArchitecture">Clear Architecture</button>
- <button id="Run">Run</button>
- <button id="Stop">Stop</button>
+ <button id="ClearModel">Clear Model</button>
+ <button id="KillDeployment" disabled="true">Kill Deployment</button>
+ <button id="Deploy">Deploy</button>
+ <button id="Pause">Pause</button>
</div>
</div>
</div>
diff --git a/src/main.js b/src/main.js
index 1520ba5..d521c4a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,7 @@ import {
clearArchitecture,
} from "./functions/api";
import { getScaleValues } from "./functions/scaling";
+import { showAllWarning } from "./functions/visualValidation";
function App() {
const instance = jsPlumb.getInstance({});
@@ -71,38 +72,50 @@ function App() {
initContextmenu(instance);
});
- document.getElementById("Run").addEventListener("click", () => {
+ const deployElement = document.getElementById("Deploy");
+ const pauseElement = document.getElementById("Pause");
+ const clearModelElement = document.getElementById("ClearModel");
+ const killDeploymentElement = document.getElementById("KillDeployment");
+
+ deployElement.addEventListener("click", () => {
if (!appState.getState().beenPaused) {
runCustomCode();
- document.getElementById("Run").removeAttribute("disabled");
+ deployElement.removeAttribute("disabled");
appState.setBeenPaused(true);
} else {
restartCustomCode();
}
getScaleValues();
- document.getElementById("Run").setAttribute("disabled", "disabled");
- document.getElementById("Stop").removeAttribute("disabled");
+ deployElement.setAttribute("disabled", "disabled");
+ pauseElement.removeAttribute("disabled");
+ killDeploymentElement.disabled = false;
+ clearModelElement.disabled = true;
});
- document.getElementById("Stop").addEventListener("click", () => {
+ pauseElement.addEventListener("click", () => {
stopCustomCode();
- document.getElementById("Stop").setAttribute("disabled", "disabled");
- document.getElementById("Run").removeAttribute("disabled");
+ pauseElement.setAttribute("disabled", "disabled");
+ deployElement.removeAttribute("disabled");
});
- document.getElementById("Stop").setAttribute("disabled", "disabled");
- document.getElementById("Run").setAttribute("disabled", "disabled");
+ pauseElement.setAttribute("disabled", "disabled");
+ deployElement.setAttribute("disabled", "disabled");
- document
- .getElementById("ClearArchitecture")
- .addEventListener("click", async () => {
- await clearArchitecture();
- let elements = document.querySelectorAll(
- "#Diagram .Filter, #Diagram .Pipe, .jtk-endpoint, .jtk-connector"
- );
- elements.forEach((element) => element.remove());
- document.getElementById("Stop").setAttribute("disabled", "disabled");
- document.getElementById("Run").setAttribute("disabled", "disabled");
- });
+ clearModelElement.addEventListener("click", async () => {
+ let elements = document.querySelectorAll(
+ "#Diagram .Filter, #Diagram .Pipe, .jtk-endpoint, .jtk-connector"
+ );
+ elements.forEach((element) => element.remove());
+ });
+
+ killDeploymentElement.addEventListener("click", async () => {
+ await clearArchitecture();
+ pauseElement.setAttribute("disabled", "disabled");
+ deployElement.setAttribute("disabled", "disabled");
+ clearModelElement.disabled = false;
+ killDeploymentElement.disabled = true;
+ await getScaleValues();
+ showAllWarning();
+ });
}
App();
diff --git a/src/style.css b/src/style.css
index e1fb5af..b9bb7a4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -149,11 +149,11 @@
font-weight: bold;
}
-#Run {
+#Deploy {
position: absolute;
right: 90px;
top: 24px;
- width: 60px;
+ width: 72px;
background-color: #04aa6d;
border: 1px black solid;
border-radius: 4px;
@@ -163,11 +163,11 @@
cursor: pointer;
}
-#Stop {
+#Pause {
position: absolute;
right: 12px;
top: 24px;
- width: 60px;
+ width: 72px;
background-color: red;
border: 1px black solid;
border-radius: 4px;
@@ -176,7 +176,8 @@
padding-bottom: 6px;
cursor: pointer;
}
-#ClearArchitecture {
+
+#ClearModel {
position: absolute;
left: 12px;
top: 24px;
@@ -190,15 +191,29 @@
cursor: pointer;
}
-#Stop:disabled {
+#KillDeployment {
+ position: absolute;
+ left: 144px;
+ top: 24px;
+ width: 120px;
+ background-color: lightblue;
+ border: 1px black solid;
+ border-radius: 4px;
+ padding: 12px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ cursor: pointer;
+}
+
+#Pause:disabled {
cursor: not-allowed;
background-color: lightgray;
- color: black;
+ color: rgba(0, 0, 0, 0.5);
}
-#Run:disabled {
+#Deploy:disabled {
cursor: not-allowed;
background-color: lightgray;
- color: black;
+ color: rgba(0, 0, 0, 0.5);
}
#Loader {
--
GitLab