better fiter state management (ABER FRAGLICH)

src/functions/api.js

@@ -2,7 +2,6 @@ import axios from "axios";
 import { SERVER_URL } from "../config";
 import { loader, errorFeedback, successFeedback } from "./feedback";
 import { getScaleValues } from "./scaling";
-import { showDeployIcon } from "./visualValidation";
 
 export const runCustomCode = () => {
   loader(true);
@@ -12,7 +11,6 @@ export const runCustomCode = () => {
       loader(false);
       if (response.status === 200) {
         successFeedback();
-        showDeployIcon();
       } else {
         errorFeedback(response);
       }
@@ -50,7 +48,6 @@ export const restartCustomCode = () => {
       loader(false);
       if (response.status === 200) {
         successFeedback();
-        showDeployIcon();
       } else {
         errorFeedback(response);
       }

src/functions/scaling.js

 import { scaleValues } from "./api";
+import { showDeployIcon } from "./visualValidation";
 
 export const getScaleValues = async () => {
   const values = await scaleValues();
@@ -7,6 +8,7 @@ export const getScaleValues = async () => {
       const filter = document.getElementById(value.id);
       const scale = filter.querySelector(".Scale");
       scale.textContent = value.count;
+      value.count > 0 ? showDeployIcon(value.id) : null;
     });
   } else {
     // kill Deployment was triggerd

src/functions/visualValidation.js

@@ -10,6 +10,7 @@ export const showWarning = (id) => {
   var pauseEl = selectedElement.querySelector("#PauseIcon");
   pauseEl && (pauseEl.style.visibility = "hidden");
 };
+
 export const showCheck = (id) => {
   var selectedElement = document.getElementById(id);
   selectedElement.style.borderColor = "green";
@@ -22,30 +23,58 @@ export const showCheck = (id) => {
   var pauseEl = selectedElement.querySelector("#PauseIcon");
   pauseEl && (pauseEl.style.visibility = "hidden");
 };
-export const showDeployIcon = () => {
-  let elementsToHide = document.querySelectorAll(
-    "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #PauseIcon"
-  );
-  elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
 
-  let iconsToShow = document.querySelectorAll("#Diagram .Filter #DeployIcon");
-  iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+// before Change - not sure what to take
+// export const showDeployIcons = () => {
+//   let elementsToHide = document.querySelectorAll(
+//     "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #PauseIcon"
+//   );
+//   elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
 
-  let filterToChange = document.querySelectorAll("#Diagram .Filter");
-  filterToChange.forEach((element) => (element.style.borderColor = "blue"));
+//   let iconsToShow = document.querySelectorAll("#Diagram .Filter #DeployIcon");
+//   iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+
+//   let filterToChange = document.querySelectorAll("#Diagram .Filter");
+//   filterToChange.forEach((element) => (element.style.borderColor = "blue"));
+// };
+
+export const showDeployIcon = (id) => {
+  var selectedElement = document.getElementById(id);
+  selectedElement.style.borderColor = "blue";
+  var warningEl = selectedElement.querySelector("#Warning");
+  warningEl && (warningEl.style.visibility = "hidden");
+  var checkEl = selectedElement.querySelector("#Check");
+  checkEl && (checkEl.style.visibility = "hidden");
+  var deployEl = selectedElement.querySelector("#DeployIcon");
+  deployEl && (deployEl.style.visibility = "visible");
+  var pauseEl = selectedElement.querySelector("#PauseIcon");
+  pauseEl && (pauseEl.style.visibility = "hidden");
 };
 
-export const showPause = () => {
-  let elementsToHide = document.querySelectorAll(
-    "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #DeployIcon"
-  );
-  elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
+// before Change - not sure what to take
+// export const showPause = () => {
+//   let elementsToHide = document.querySelectorAll(
+//     "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #DeployIcon"
+//   );
+//   elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
 
-  let iconsToShow = document.querySelectorAll("#Diagram .Filter #PauseIcon");
-  iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+//   let iconsToShow = document.querySelectorAll("#Diagram .Filter #PauseIcon");
+//   iconsToShow.forEach((element) => (element.style.visibility = "visible"));
 
-  let filterToChange = document.querySelectorAll("#Diagram .Filter");
-  filterToChange.forEach((element) => (element.style.borderColor = "orange"));
+//   let filterToChange = document.querySelectorAll("#Diagram .Filter");
+//   filterToChange.forEach((element) => (element.style.borderColor = "orange"));
+// };
+
+export const showPause = () => {
+  let elementsToHide = document.querySelectorAll("#Diagram .Filter");
+  elementsToHide.forEach((el) => {
+    const isVisible = el.childNodes[7].style.visibility === "visible";
+    if (isVisible) {
+      el.childNodes[7].style.visibility = "hidden";
+      el.childNodes[9].style.visibility = "visible";
+      el.style.borderColor = "orange";
+    }
+  });
 };
 
 export const showAllWarning = () => {