dockerContainersList.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Notes: This should be open in its original path-->
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" href="../script/semantic/semantic.min.css" />
  7. <script src="../script/jquery-3.6.0.min.js"></script>
  8. <script src="../script/semantic/semantic.min.js"></script>
  9. </head>
  10. <body>
  11. <br />
  12. <div class="ui container">
  13. <div class="ui header">
  14. <div class="content">
  15. List of Docker Containers
  16. <div class="sub header">
  17. Below is a list of all detected Docker containers currently running
  18. on the system.
  19. </div>
  20. </div>
  21. </div>
  22. <div id="containersList" class="ui middle aligned divided list active">
  23. <div class="ui loader active"></div>
  24. </div>
  25. <div class="ui horizontal divider"></div>
  26. <div id="containersAddedListHeader" class="ui header" hidden>
  27. Already added containers:
  28. </div>
  29. <div
  30. id="containersAddedList"
  31. class="ui middle aligned divided list"
  32. ></div>
  33. </div>
  34. <script>
  35. const lines = {};
  36. const linesAded = {};
  37. function getDockerContainers() {
  38. const hostRequest = $.get("/api/proxy/list?type=host");
  39. const dockerRequest = $.get("/api/docker/containers");
  40. // Wait for both requests to complete
  41. Promise.all([hostRequest, dockerRequest])
  42. .then(([hostData, dockerData]) => {
  43. if (
  44. dockerData.error === undefined &&
  45. hostData.error === undefined
  46. ) {
  47. const { containers, network } = dockerData;
  48. const bridge = network.find(({ Name }) => Name === "bridge");
  49. const {
  50. IPAM: {
  51. Config: [{ Gateway: gateway }],
  52. },
  53. } = bridge;
  54. const existedDomains = hostData.reduce((acc, { ActiveOrigins }) => {
  55. return acc.concat(ActiveOrigins.map(({ OriginIpOrDomain }) => OriginIpOrDomain));
  56. }, []);
  57. for (const container of containers) {
  58. const {
  59. Ports,
  60. Names: [name],
  61. } = container;
  62. for (const portObject of Ports.filter(
  63. ({ IP: ip }) => ip === "::" || ip === '0.0.0.0'
  64. )) {
  65. const { IP: ip, PublicPort: port } = portObject;
  66. const key = `${name}-${port}`;
  67. if (
  68. existedDomains.some((item) => item === `${gateway}:${port}`) &&
  69. !linesAded[key]
  70. ) {
  71. linesAded[key] = {
  72. name: name.replace(/^\//, ""),
  73. ip: gateway,
  74. port,
  75. };
  76. } else if (!lines[key]) {
  77. lines[key] = {
  78. name: name.replace(/^\//, ""),
  79. ip: gateway,
  80. port,
  81. };
  82. }
  83. }
  84. }
  85. for (const [key, line] of Object.entries(lines)) {
  86. $("#containersList").append(
  87. `<div class="item">
  88. <div class="right floated content">
  89. <div class="ui button" onclick="addContainerItem('${key}');">Add</div>
  90. </div>
  91. <div class="content">
  92. <div class="header">${line.name}</div>
  93. <div class="description">
  94. ${line.ip}:${line.port}
  95. </div>
  96. </div>`
  97. );
  98. }
  99. for (const [key, line] of Object.entries(linesAded)) {
  100. $("#containersAddedList").append(
  101. `<div class="item">
  102. <div class="content">
  103. <div class="header">${line.name}</div>
  104. <div class="description">
  105. ${line.ip}:${line.port}
  106. </div>
  107. </div>`
  108. );
  109. }
  110. Object.entries(linesAded).length &&
  111. $("#containersAddedListHeader").removeAttr("hidden");
  112. $("#containersList .loader").removeClass("active");
  113. } else {
  114. parent.msgbox(
  115. `Error loading data: ${dockerData.error || hostData.error}`,
  116. false
  117. );
  118. $("#containersList").html(`<div class="ui basic segment"><i class="ui red times icon"></i> ${dockerData.error || hostData.error}</div>`);
  119. }
  120. })
  121. .catch((error) => {
  122. console.log(error.responseText);
  123. parent.msgbox("Error loading data: " + error.message, false);
  124. });
  125. }
  126. getDockerContainers();
  127. function addContainerItem(item) {
  128. if (lines[item]) {
  129. parent.addContainerItem(lines[item]);
  130. }
  131. }
  132. </script>
  133. </body>
  134. </html>