FEAT: Scaling frontend

src/functions/api.js

@@ -95,3 +95,23 @@ export const clearArchitecture = async () => {
       console.error(error);
     });
 };
+
+export const scaleOut = async (id) => {
+  const requestBody = { id: id };
+  loader(true);
+  await axios
+    .post(`${SERVER_URL}/deployment/scaleOut`, requestBody)
+    .then((response) => {
+      loader(false);
+      if (response.status === 200) {
+        successFeedback();
+      } else {
+        errorFeedback(response);
+      }
+    })
+    .catch((error) => {
+      loader(false);
+      errorFeedback(error);
+      console.error(error);
+    });
+};

src/functions/codeEditor.js

@@ -96,6 +96,7 @@ const handleSubmit = (node, code) => {
     code: code,
     isDeployed: false,
     isPaused: false,
+    isScaled: false,
   };
   createCustomCode(requestBody);
   node.style.visibility = "hidden";

src/functions/contextmenu.js

 import { duplicatePipe, duplicateFilter } from "./duplication";
 import { codeEditor } from "./codeEditor";
+import { scaleOut } from "./api";
 
 export const initContextmenu = (instance) => {
   // Kontext Menü zum Löschen von Connections
@@ -38,6 +39,9 @@ export const initContextmenu = (instance) => {
         <button style='border: none; padding: 6px 12px;' class='code-filter'>
           Code Filter
         </button>
+        <button style='background-color: blue; color: white; border: none; padding: 6px 12px;' class='scale-out'>
+          SCALE OUT
+        </button>
         <button style='background-color: red; color: white; border: none; padding: 6px 12px;' class='delete-filter'>
           Delete Filter
         </button>
@@ -56,6 +60,9 @@ export const initContextmenu = (instance) => {
   $("body").on("click", ".code-filter", (event) => {
     codeEditor(instance);
   });
+  $("body").on("click", ".scale-out", (event) => {
+    scaleOut(window.selectedFilter);
+  });
 
   // Kontext Menü zum Löschen von Pipes
   $("body").on("contextmenu", "#Diagram .Pipe", (event) => {