TC
/
Zoraxy
mirror of https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!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>
    <link rel="stylesheet" href="../darktheme.css">
    <script src="../script/darktheme.js"></script>
    <br />
    <div class="ui container">
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="showUnexposed" class="hidden" />
          <label for="showUnexposed"
            >Show Containers with Unexposed Ports
            <br />
            <small
              >Please make sure Zoraxy and the target container share a
              network</small
            >
          </label>
        </div>
      </div>
      <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>
      let lines = {};
      let linesAdded = {};

      document
        .getElementById("showUnexposed")
        .addEventListener("change", () => {
          console.log("showUnexposed", $("#showUnexposed").is(":checked"));
          $("#containersList").html('<div class="ui loader active"></div>');

          $("#containersAddedList").empty();
          $("#containersAddedListHeader").attr("hidden", true);

          lines = {};
          linesAdded = {};

          getDockerContainers();
        });

      function getDockerContainers() {
        const hostRequest = $.get("/api/proxy/list?type=host");
        const dockerRequest = $.get("/api/docker/containers");

        Promise.all([hostRequest, dockerRequest])
          .then(([hostData, dockerData]) => {
            if (!dockerData.error && !hostData.error) {
              const { containers, network } = dockerData;

              const existingTargets = new Set(
                hostData.flatMap(({ ActiveOrigins }) =>
                  ActiveOrigins.map(({ OriginIpOrDomain }) => OriginIpOrDomain)
                )
              );

              for (const container of containers) {
                const Ports = container.Ports;
                const name = container.Names[0].replace(/^\//, "");

                for (const portObject of Ports) {
                  let port = portObject.PublicPort;
                  if (!port) {
                    if (!$("#showUnexposed").is(":checked")) {
                      continue;
                    }
                    port = portObject.PrivatePort;
                  }
                  const key = `${name}-${port}`;

                  // if port is not exposed, use container's name and let docker handle the routing
                  // BUT this will only work if the container is on the same network as Zoraxy
                  const targetAddress = portObject.IP || name;

                  if (
                    existingTargets.has(`${targetAddress}:${port}`) &&
                    !linesAdded[key]
                  ) {
                    linesAdded[key] = {
                      name,
                      ip: targetAddress,
                      port,
                    };
                  } else if (!lines[key]) {
                    lines[key] = {
                      name,
                      ip: targetAddress,
                      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(linesAdded)) {
                $("#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(linesAdded).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>