TC
/
Zoraxy
Mirror von https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<!DOCTYPE html>
<html>
  <head>
    <!-- Notes: This should be open in its original path-->
    <meta charset="utf-8">
    <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.reduce((acc, { ActiveOrigins }) => {
                return acc.concat(ActiveOrigins.map(({ OriginIpOrDomain }) => OriginIpOrDomain));
              }, []);

              for (const container of containers) {
                const {
                  Ports,
                  Names: [name],
                } = container;

                for (const portObject of Ports.filter(
                  ({ IP: ip }) => ip === "::" || ip === '0.0.0.0'
                )) {
                  const { IP: ip, PublicPort: port } = portObject;
                  const key = `${name}-${port}`;

                  if (
                    existedDomains.some((item) => item === `${gateway}:${port}`) &&
                    !linesAded[key]
                  ) {
                    linesAded[key] = {
                      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 [key, line] of Object.entries(linesAded)) {
                $("#containersAddedList").append(
                  `<div class="item">
                    <div class="content">
                      <div class="header">${line.name}</div>
                      <div class="description">
                        ${line.ip}:${line.port}
                      </div>
                    </div>`
                );
              }
              Object.entries(linesAded).length &&
                $("#containersAddedListHeader").removeAttr("hidden");
              $("#containersList .loader").removeClass("active");
            } else {
              parent.msgbox(
                `Error loading data: ${dockerData.error || hostData.error}`,
                false
              );
              $("#containersList").html(`<div class="ui basic segment"><i class="ui red times icon"></i> ${dockerData.error || hostData.error}</div>`);
            }
          })
          .catch((error) => {
            console.log(error.responseText);
            parent.msgbox("Error loading data: " + error.message, false);
          });
      }

      getDockerContainers();

      function addContainerItem(item) {
        if (lines[item]) {
          parent.addContainerItem(lines[item]);
        }
      }
    </script>
  </body>
</html>