enhance build + add instances vue.js page

* remove previous useless assets for every build
* reproduce instances data to easily test it on Vite
* add instances page to build
* update instances builder to fit new components : list pairs and form data
* form submit working on instances actions

src/client/build.js

@@ -97,7 +97,7 @@ async function setBuildTempToUI() {
   fs.readdir(resolve("./templates"), (err, files) => {
     // Read content
     files.forEach((file) => {
-      const data = fs.readFile(
+      fs.readFile(
         resolve(`./templates/${file}`),
         {
           encoding: "utf8",
@@ -109,7 +109,8 @@ async function setBuildTempToUI() {
           }
           let updateData = data;
           // I want to remove the first "/" for href="/css", href="/js", href="/img", href="/favicon", src="/assets" or src="/js"
-          const regexPaths = /href="\/(css|js|img|favicon)|src="\/(assets|js)/g;
+          const regexPaths =
+            /href="\/(css|js|img|favicon|assets|js)|src="\/(assets|js)/g;
           updateData = data.replace(regexPaths, (match) => {
             return match.replace("/", "");
           });
@@ -163,8 +164,17 @@ async function moveBuildStaticToUI() {
   });
 }
 
+async function delPrevDirs() {
+  // Delete prev existing dir
+  delElRecursive(`${appStaticDir}/css`);
+  delElRecursive(`${appStaticDir}/assets`);
+  delElRecursive(`${appStaticDir}/flags`);
+  delElRecursive(`${appStaticDir}/img`);
+}
+
 async function build() {
   // Build client and setup
+  await delPrevDirs();
   await buildVite();
   await updateClientDir();
   await setBuildTempToUI();

src/client/tests/home.py

@@ -1,4 +1,6 @@
-stats = [
+import json
+
+home = [
     {
         "type": "card",
         "link": "https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro",
@@ -85,3 +87,7 @@
         ],
     },
 ]
+
+# store on a file
+with open("home.json", "w") as f:
+    json.dump(home, f, indent=4)

src/client/tests/instances.json

@@ -0,0 +1 @@
+[{"type": "card", "containerColumns": {"pc": 6, "tablet": 6, "mobile": 12}, "widgets": [{"type": "Instance", "data": {"pairs": [{"key": "instances_hostname", "value": "bunkerweb"}, {"key": "instances_type", "value": "manual"}, {"key": "instances_status", "value": "instances_active"}], "status": "success", "title": "bunkerweb", "buttons": [{"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"reload\" }"}, "text": "action_reload", "color": "warning"}, {"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"stop\" }"}, "text": "action_stop", "color": "error"}]}}]}, {"type": "card", "containerColumns": {"pc": 6, "tablet": 6, "mobile": 12}, "widgets": [{"type": "Instance", "data": {"pairs": [{"key": "instances_hostname", "value": "bunkerweb"}, {"key": "instances_type", "value": "manual"}, {"key": "instances_status", "value": "instances_active"}], "status": "success", "title": "bunkerweb", "buttons": [{"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"reload\" }"}, "text": "action_reload", "color": "warning"}, {"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"stop\" }"}, "text": "action_stop", "color": "error"}]}}]}]

src/client/tests/instances.py

@@ -0,0 +1,77 @@
+import json
+
+
+# Create instance class using keys from the instances list
+class Instance:
+    def __init__(self, _type, health, _id, hostname, name):
+        self._type = _type
+        self.health = health
+        self._id = _id
+        self.hostname = hostname
+        self.name = name
+
+
+instances = [
+    Instance("manual", True, "bunkerweb", "bunkerweb", "bunkerweb"),
+    Instance("manual", True, "bunkerweb", "bunkerweb", "bunkerweb"),
+]
+
+
+def instances_builder(instances: list):
+    """
+    It returns the home page in JSON format for the Vue.js builder
+    """
+    builder = []
+
+    for instance in instances:
+        # setup actions buttons
+        actions = (
+            ["restart", "stop"]
+            if instance._type == "local" and instance.health
+            else (
+                ["reload", "stop"]
+                if not instance._type == "local" and instance.health
+                else ["start"] if instance._type == "local" and not instance.health else []
+            )
+        )
+        buttons = [
+            {
+                "attrs": {
+                    "data-submit-form": f"""{{"INSTANCE_ID" : "{instance._id}", "operation" : "{action}" }}""",
+                },
+                "text": f"action_{action}",
+                "color": "success" if action == "start" else "error" if action == "stop" else "warning",
+            }
+            for action in actions
+        ]
+
+        component = {
+            "type": "card",
+            "containerColumns": {"pc": 6, "tablet": 6, "mobile": 12},
+            "widgets": [
+                {
+                    "type": "Instance",
+                    "data": {
+                        "pairs": [
+                            {"key": "instances_hostname", "value": instance.hostname},
+                            {"key": "instances_type", "value": instance._type},
+                            {"key": "instances_status", "value": "instances_active" if instance.health else "instances_inactive"},
+                        ],
+                        "status": "success" if instance.health else "error",
+                        "title": instance.name,
+                        "buttons": buttons,
+                    },
+                }
+            ],
+        }
+
+        builder.append(component)
+
+    return builder
+
+
+builder = instances_builder(instances)
+
+# store on a file
+with open("instances.json", "w") as f:
+    json.dump(builder, f)

src/client/vite/src/pages/instances/index.html

@@ -14,7 +14,7 @@
          data-server-flash='[{"type" : "success", "title" : "title", "message" : "Success feedback"}, {"type" : "error", "title" : "title", "message" : "Error feedback"}, {"type" : "warning", "title" : "title", "message" : "Warning feedback"}, {"type" : "info", "title" : "title", "message" : "Info feedback"}]'>
     </div>
     <div class="hidden"
-         data-server-builder='[{"type":"card","containerColumns":{"pc":6,"tablet":6,"mobile":12},"widgets":[{"type":"Instance","data":{"pairs":[{"key":"instances_hostname","value":"bunkerweb"},{"key":"instances_type","value":"manual"},{"key":"instances_status","value":"instances_active"}],"status":"success","title":"bunkerweb","buttons":[{"attrs":{"data-submit-form": {"operation" : "reload", "INSTANCE_ID" : "bunkerweb"}  },"text":"action_reload","color":"warning","size":"normal"},{"attrs":{"data-submit-form": { "operation" : "stop", "INSTANCE_ID" : "bunkerweb"} },"text":"action_stop","color":"error","size":"normal"}]}}]}]'>
+         data-server-builder='[{"type": "card", "containerColumns": {"pc": 6, "tablet": 6, "mobile": 12}, "widgets": [{"type": "Instance", "data": {"pairs": [{"key": "instances_hostname", "value": "bunkerweb"}, {"key": "instances_type", "value": "manual"}, {"key": "instances_status", "value": "instances_active"}], "status": "success", "title": "bunkerweb", "buttons": [{"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"reload\" }"}, "text": "action_reload", "color": "warning"}, {"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"stop\" }"}, "text": "action_stop", "color": "error"}]}}]}, {"type": "card", "containerColumns": {"pc": 6, "tablet": 6, "mobile": 12}, "widgets": [{"type": "Instance", "data": {"pairs": [{"key": "instances_hostname", "value": "bunkerweb"}, {"key": "instances_type", "value": "manual"}, {"key": "instances_status", "value": "instances_active"}], "status": "success", "title": "bunkerweb", "buttons": [{"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"reload\" }"}, "text": "action_reload", "color": "warning"}, {"attrs": {"data-submit-form": "{\"INSTANCE_ID\" : \"bunkerweb\", \"operation\" : \"stop\" }"}, "text": "action_stop", "color": "error"}]}}]}]'>
     </div>
     <div id="app"></div>
     <script type="module" src="instances.js"></script>

src/client/vite/src/utils/form.js

@@ -52,7 +52,7 @@ function useSubmitForm(data) {
     input.value = data[key];
     form.appendChild(input);
   }
-  // Append the form to the body and submit it
+  // Append to be able to submit
   document.querySelector("body").appendChild(form);
   form.submit();
 }

src/client/vite/vite.config.js

@@ -36,6 +36,7 @@ export default defineConfig({
     rollupOptions: {
       input: {
         home: resolve(__dirname, "./src/pages/home/index.html"),
+        instances: resolve(__dirname, "./src/pages/instances/index.html"),
       },
     },
   },

src/ui/main.py

@@ -1043,10 +1043,11 @@ def instances_builder(instances: list):
         )
         buttons = [
             {
-                "attrs": {"data-form-INSTANCE_ID": instance._id, "data-form-operation": action, "data-submit-form": "true"},
+                "attrs": {
+                    "data-submit-form": f"""{{"INSTANCE_ID" : "{instance._id}", "operation" : "{action}" }}""",
+                },
                 "text": f"action_{action}",
                 "color": "success" if action == "start" else "error" if action == "stop" else "warning",
-                "size": "normal",
             }
             for action in actions
         ]
@@ -1058,7 +1059,7 @@ def instances_builder(instances: list):
                 {
                     "type": "Instance",
                     "data": {
-                        "details": [
+                        "pairs": [
                             {"key": "instances_hostname", "value": instance.hostname},
                             {"key": "instances_type", "value": instance._type},
                             {"key": "instances_status", "value": "instances_active" if instance.health else "instances_inactive"},
@@ -1116,8 +1117,9 @@ def instances():
 
     # Display instances
     instances = app.config["INSTANCES"].get_instances()
+
     data_server_builder = instances_builder(instances)
-    return render_template("instances.html", title="Instances", data_server_builder=data_server_builder, instances=instances, username=current_user.get_id())
+    return render_template("instances.html", title="Instances", data_server_builder=json.dumps(data_server_builder))
 
 
 @app.route("/services", methods=["GET", "POST"])

src/ui/templates/home.html

@@ -7,7 +7,8 @@
     <link rel="stylesheet" href="css/flag-icons.min.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BunkerWeb | DASHBOARD</title>
-    <script nonce="{{ script_nonce }}"  type="module" crossorigin src="assets/home-7b366ea2.js"></script>
+    <script nonce="{{ script_nonce }}"  type="module" crossorigin src="assets/home-ef55bffd.js"></script>
+    <link rel="modulepreload" crossorigin href="assets/Title-9ae7a316.js">
   </head>
   <body>
 <div class="hidden" data-csrf-token="{{ csrf_token() }}"></div>