add docker containers list to set rules

2025-08-06 21:28:30 +02:00 · 2024-06-15 17:19:19 +03:00
parent fc88dfe72e
commit 443cd961d2
4 changed files with 199 additions and 1 deletions
--- a/src/web/snippet/dockerContainersList.html
+++ b/src/web/snippet/dockerContainersList.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- Notes: This should be open in its original path-->
+    <link rel="stylesheet" href="../script/semantic/semantic.min.css" />
+    <script src="../script/jquery-3.6.0.min.js"></script>
+    <script src="../script/semantic/semantic.min.js"></script>
+  </head>
+  <body>
+    <br />
+    <div class="ui container">
+      <div class="ui header">
+        <div class="content">
+          List of Docker Containers
+          <div class="sub header">
+            Below is a list of all detected Docker containers currently running
+            on the system.
+          </div>
+        </div>
+      </div>
+      <div id="containersList" class="ui middle aligned divided list active">
+        <div class="ui loader active"></div>
+      </div>
+      <div class="ui horizontal divider"></div>
+      <div id="containersAddedListHeader" class="ui header" hidden>
+        Already added containers:
+      </div>
+      <div
+        id="containersAddedList"
+        class="ui middle aligned divided list"
+      ></div>
+    </div>
+
+    <script>
+      const lines = {};
+      const linesAded = [];
+
+      function getDockerContainers() {
+        const hostRequest = $.get("/api/proxy/list?type=host");
+        const dockerRequest = $.get("/api/docker/containers");
+
+        // Wait for both requests to complete
+        Promise.all([hostRequest, dockerRequest])
+          .then(([hostData, dockerData]) => {
+            if (
+              dockerData.error === undefined &&
+              hostData.error === undefined
+            ) {
+              const { containers, network } = dockerData;
+              const bridge = network.find(({ Name }) => Name === "bridge");
+              const {
+                IPAM: {
+                  Config: [{ Gateway: gateway }],
+                },
+              } = bridge;
+              const existedDomains = hostData.map(({ Domain }) => Domain);
+
+              for (const container of containers) {
+                const {
+                  Ports,
+                  Names: [name],
+                } = container;
+
+                for (const portObject of Ports.filter(
+                  ({ IP: ip }) => ip === "::"
+                )) {
+                  const { IP: ip, PublicPort: port } = portObject;
+                  const key = `${name}-${port}`;
+
+                  if (
+                    existedDomains.some((item) => item === `${gateway}:${port}`)
+                  ) {
+                    linesAded.push({
+                      name: name.replace(/^\//, ""),
+                      ip: gateway,
+                      port,
+                    });
+                  } else if (!lines[key]) {
+                    lines[key] = {
+                      name: name.replace(/^\//, ""),
+                      ip: gateway,
+                      port,
+                    };
+                  }
+                }
+              }
+
+              for (const [key, line] of Object.entries(lines)) {
+                $("#containersList").append(
+                  `<div class="item">
+                    <div class="right floated content">
+                      <div class="ui button" onclick="addContainerItem('${key}');">Add</div>
+                    </div>
+                    <div class="content">
+                      <div class="header">${line.name}</div>
+                      <div class="description">
+                        ${line.ip}:${line.port}
+                      </div>
+                    </div>`
+                );
+              }
+              for (const line of linesAded) {
+                $("#containersAddedList").append(
+                  `<div class="item">
+                    <div class="content">
+                      <div class="header">${line.name}</div>
+                      <div class="description">
+                        ${line.ip}:${line.port}
+                      </div>
+                    </div>`
+                );
+              }
+              linesAded.length &&
+                $("#containersAddedListHeader").removeAttr("hidden");
+              $("#containersList .loader").removeClass("active");
+            } else {
+              parent.msgbox(
+                `Error loading data: ${dockerData.error || hostData.error}`,
+                false
+              );
+            }
+          })
+          .catch((error) => {
+            parent.msgbox("Error loading data: " + error.message, false);
+          });
+      }
+
+      getDockerContainers();
+
+      function addContainerItem(item) {
+        if (lines[item]) {
+          parent.addContainerItem(lines[item]);
+        }
+      }
+    </script>
+  </body>
+</html>