diff --git a/src/functions/api.js b/src/functions/api.js
index 1a944e4b1f1ebaea88499a50dad1143bd4ebbf6a..a4bca3955c65116da7764b3fd965056409515d7d 100644
--- a/src/functions/api.js
+++ b/src/functions/api.js
@@ -2,7 +2,7 @@ import axios from "axios";
import { SERVER_URL } from "../config";
import { loader, errorFeedback, successFeedback } from "./feedback";
import { getScaleValues } from "./scaling";
-import { showDocker } from "./visualValidation";
+import { showDeployIcon } from "./visualValidation";
export const runCustomCode = () => {
loader(true);
@@ -12,7 +12,7 @@ export const runCustomCode = () => {
loader(false);
if (response.status === 200) {
successFeedback();
- showDocker();
+ showDeployIcon();
} else {
errorFeedback(response);
}
@@ -50,7 +50,7 @@ export const restartCustomCode = () => {
loader(false);
if (response.status === 200) {
successFeedback();
- showDocker();
+ showDeployIcon();
} else {
errorFeedback(response);
}
diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index 114ccac21da881ed66eb39722b8698ea9890bdd3..ff2082a7c2ba3937b1e296cde22e4072a3a4e6a3 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -136,6 +136,6 @@ const handleSubmit = (node, code) => {
};
createCustomCode(requestBody);
node.style.visibility = "hidden";
- showCheck(window.selectedFilter);
document.getElementById("Deploy").removeAttribute("disabled");
+ showCheck(window.selectedFilter);
};
diff --git a/src/functions/visualValidation.js b/src/functions/visualValidation.js
index 3705408213056903a09b56d337e4d99dea3cb9fc..9fb0d57e1a5ce825c0fb64247786c90735e56fd9 100644
--- a/src/functions/visualValidation.js
+++ b/src/functions/visualValidation.js
@@ -1,37 +1,62 @@
export const showWarning = (id) => {
const selectedElement = document.getElementById(id);
- var checkDomElement = selectedElement.querySelector("#Warning");
- checkDomElement.style.visibility = "visible";
- var dockerDomElement = selectedElement.querySelector("#Check");
- dockerDomElement.style.visibility = "hidden";
- var dockerDomElement = selectedElement.querySelector("#Docker");
- dockerDomElement.style.visibility = "hidden";
+ selectedElement.style.borderColor = "black";
+ var warningEl = selectedElement.querySelector("#Warning");
+ warningEl && (warningEl.style.visibility = "visible");
+ var checkEl = selectedElement.querySelector("#Check");
+ checkEl && (checkEl.style.visibility = "hidden");
+ var deployEl = selectedElement.querySelector("#DeployIcon");
+ deployEl && (deployEl.style.visibility = "hidden");
+ var pauseEl = selectedElement.querySelector("#PauseIcon");
+ pauseEl && (pauseEl.style.visibility = "hidden");
};
export const showCheck = (id) => {
var selectedElement = document.getElementById(id);
- var checkDomElement = selectedElement.querySelector("#Warning");
- checkDomElement.style.visibility = "hidden";
- var dockerDomElement = selectedElement.querySelector("#Check");
- dockerDomElement.style.visibility = "visible";
- var dockerDomElement = selectedElement.querySelector("#Docker");
- dockerDomElement.style.visibility = "hidden";
+ selectedElement.style.borderColor = "green";
+ var warningEl = selectedElement.querySelector("#Warning");
+ warningEl && (warningEl.style.visibility = "hidden");
+ var checkEl = selectedElement.querySelector("#Check");
+ checkEl && (checkEl.style.visibility = "visible");
+ var deployEl = selectedElement.querySelector("#DeployIcon");
+ deployEl && (deployEl.style.visibility = "hidden");
+ var pauseEl = selectedElement.querySelector("#PauseIcon");
+ pauseEl && (pauseEl.style.visibility = "hidden");
};
-export const showDocker = () => {
+export const showDeployIcon = () => {
let elementsToHide = document.querySelectorAll(
- "#Diagram #Warning, #Diagram #Check"
+ "#Diagram #Warning, #Diagram #Check, #Diagram #PauseIcon"
);
elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
- let elementsToShow = document.querySelectorAll("#Diagram #Docker");
- elementsToShow.forEach((element) => (element.style.visibility = "visible"));
+ let iconsToShow = document.querySelectorAll("#Diagram #DeployIcon");
+ iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+
+ let filterToChange = document.querySelectorAll("#Diagram .Filter");
+ filterToChange.forEach((element) => (element.style.borderColor = "blue"));
+};
+
+export const showPause = () => {
+ let elementsToHide = document.querySelectorAll(
+ "#Diagram #Warning, #Diagram #Check, #Diagram #DeployIcon"
+ );
+ elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
+
+ let iconsToShow = document.querySelectorAll("#Diagram #PauseIcon");
+ iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+
+ let filterToChange = document.querySelectorAll("#Diagram .Filter");
+ filterToChange.forEach((element) => (element.style.borderColor = "orange"));
};
export const showAllWarning = () => {
let elementsToHide = document.querySelectorAll(
- "#Diagram #Docker, #Diagram #Check"
+ "#Diagram #DeployIcon, #Diagram #PauseIcon, #Diagram #Check"
);
elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
- let elementsToShow = document.querySelectorAll("#Diagram #Warning");
- elementsToShow.forEach((element) => (element.style.visibility = "visible"));
+ let iconsToShow = document.querySelectorAll("#Diagram #Warning");
+ iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+
+ let filterToChange = document.querySelectorAll("#Diagram .Filter");
+ filterToChange.forEach((element) => (element.style.borderColor = "black"));
};
diff --git a/src/index.html b/src/index.html
index 6c6a9e4d5ee4eedaba206384a556dc8039232fb9..41e27a1616d38b9c8984106820895e87f15242c9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,10 +31,9 @@
<span id="PipeName"></span>
<i
id="Warning"
- class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+ class="fa-sharp fa-solid fa-xl fa-exclamation"
></i>
- <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
- <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+ <i id="Check" class="fa-sharp fa-xl fa-solid fa-check"></i>
</div>
<div class="Pipe" data-type="Distributor" data-pipetype="Topic">
Topic
@@ -42,10 +41,9 @@
<span id="PipeName"></span>
<i
id="Warning"
- class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+ class="fa-sharp fa-solid fa-xl fa-exclamation"
></i>
- <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
- <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+ <i id="Check" class="fa-sharp fa-xl fa-solid fa-check"></i>
</div>
</div>
<hr />
@@ -56,50 +54,53 @@
<p class="Scale">0</p>
<i
id="Warning"
- class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+ class="fa-sharp fa-solid fa-xl fa-exclamation"
></i>
- <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
- <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+ <i id="Check" class="fa-sharp fa-xl fa-solid fa-check"></i>
+ <i id="DeployIcon" class="fa-solid fa-xl fa-play"></i>
+ <i id="PauseIcon" class="fa-solid fa-xl fa-pause"></i>
</div>
<div class="Filter" data-type="End">
Receiver
<p class="Scale">0</p>
<i
id="Warning"
- class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+ class="fa-sharp fa-solid fa-xl fa-exclamation"
></i>
- <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
- <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+ <i id="Check" class="fa-sharp fa-xl fa-solid fa-check"></i>
+ <i id="DeployIcon" class="fa-solid fa-xl fa-play"></i>
+ <i id="PauseIcon" class="fa-solid fa-xl fa-pause"></i>
</div>
<div class="Filter" data-type="Default">
BL
<p class="Scale">0</p>
<i
id="Warning"
- class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+ class="fa-sharp fa-solid fa-xl fa-exclamation"
></i>
- <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
- <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+ <i id="Check" class="fa-sharp fa-xl fa-solid fa-check"></i>
+ <i id="DeployIcon" class="fa-solid fa-xl fa-play"></i>
+ <i id="PauseIcon" class="fa-solid fa-xl fa-pause"></i>
</div>
<div class="Filter" data-type="Distributor">
Router
<p class="Scale">0</p>
<i
id="Warning"
- class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+ class="fa-sharp fa-solid fa-xl fa-exclamation"
></i>
- <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
- <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+ <i id="Check" class="fa-sharp fa-xl fa-solid fa-check"></i>
+ <i id="DeployIcon" class="fa-solid fa-xl fa-play"></i>
</div>
<div class="Filter" data-type="Collector">
Aggregator
<p class="Scale">0</p>
<i
id="Warning"
- class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+ class="fa-sharp fa-solid fa-xl fa-exclamation"
></i>
- <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
- <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+ <i id="Check" class="fa-sharp fa-xl fa-solid fa-check"></i>
+ <i id="PauseIcon" class="fa-solid fa-xl fa-pause"></i>
</div>
</div>
</div>
diff --git a/src/main.js b/src/main.js
index 6da0d6bb29171b8168b3a594717814aec261a316..799e6f2541b2cfed87394c0017b713a2a5a6bf8d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@ import {
clearModel,
} from "./functions/api";
import { getScaleValues } from "./functions/scaling";
-import { showAllWarning } from "./functions/visualValidation";
+import { showAllWarning, showPause } from "./functions/visualValidation";
import { coorectId } from "./functions/id";
function App() {
@@ -104,7 +104,9 @@ function App() {
pauseElement.addEventListener("click", () => {
stopCustomCode();
+ showPause();
pauseElement.setAttribute("disabled", "disabled");
+ deployElement.innerHTML = "Restart";
deployElement.removeAttribute("disabled");
});
pauseElement.setAttribute("disabled", "disabled");
@@ -126,6 +128,7 @@ function App() {
killDeploymentElement.disabled = true;
await getScaleValues();
showAllWarning();
+ deployElement.innerHTML = "Deploy";
});
}
diff --git a/src/style.css b/src/style.css
index a190381e9fca42ac5da4efded21aa63410084e68..9897965192a6d410bda9c541ce41bd290556caa2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -24,7 +24,7 @@
text-align: center;
align-content: center;
position: absolute;
- border: 2px solid blue;
+ border: 2px solid black;
border-radius: 4px;
width: 84px;
height: 66px;
@@ -269,10 +269,9 @@
#Diagram #Warning {
position: absolute;
- left: -12px;
- top: 0;
- color: orange;
- background-color: ghostwhite;
+ left: -18px;
+ top: -6px;
+ color: red;
}
#Toolbox #Warning {
@@ -282,10 +281,9 @@
#Diagram #Check {
position: absolute;
- left: -12px;
- top: 0;
+ left: -18px;
+ top: -6px;
color: green;
- background-color: ghostwhite;
visibility: hidden;
}
@@ -294,16 +292,29 @@
visibility: hidden;
}
-#Diagram #Docker {
+#Diagram #DeployIcon {
position: absolute;
- left: -12px;
- top: 0;
+ left: -18px;
+ top: -6px;
color: blue;
background-color: ghostwhite;
visibility: hidden;
}
-#Toolbox #Docker {
+#Toolbox #DeployIcon {
+ position: absolute;
+ visibility: hidden;
+}
+
+#Diagram #PauseIcon {
+ position: absolute;
+ left: -18px;
+ top: -6px;
+ color: orange;
+ visibility: hidden;
+}
+
+#Toolbox #PauseIcon {
position: absolute;
visibility: hidden;
}