marcel/zoraxy
1
0
Fork 0
mirror of https://github.com/tobychui/zoraxy.git synced 2025-06-01 13:17:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #643 from eyerrock/refactor-docker-container-list

Browse Source 
refactor: docker container list
This commit is contained in:
Toby Chui 2025-04-30 07:21:51 +08:00 committed by GitHub
commit b1824a66a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 416 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docker/Dockerfile
View File

@ -72,6 +72,8 @@ ENV WEBROOT="./www"
VOLUME [ "/opt/zoraxy/config/" ] VOLUME [ "/opt/zoraxy/config/" ]
LABEL com.imuslab.zoraxy.container-identifier="Zoraxy"
ENTRYPOINT [ "/opt/zoraxy/entrypoint.sh" ] ENTRYPOINT [ "/opt/zoraxy/entrypoint.sh" ]
HEALTHCHECK --interval=15s --timeout=5s --start-period=10s --retries=3 CMD nc -vz 127.0.0.1 $PORT || exit 1 HEALTHCHECK --interval=15s --timeout=5s --start-period=10s --retries=3 CMD nc -vz 127.0.0.1 $PORT || exit 1

8
docker/README.md
View File

@ -19,6 +19,7 @@ Once setup, access the webui at `http://<host-ip>:8000` to configure Zoraxy. Cha
docker run -d \ docker run -d \
--name zoraxy \ --name zoraxy \
--restart unless-stopped \ --restart unless-stopped \
--add-host=host.docker.internal:host-gateway \
-p 80:80 \ -p 80:80 \
-p 443:443 \ -p 443:443 \
-p 8000:8000 \ -p 8000:8000 \
@ -47,6 +48,8 @@ services:
- /path/to/zoraxy/plugin/:/opt/zoraxy/plugin/ - /path/to/zoraxy/plugin/:/opt/zoraxy/plugin/
- /var/run/docker.sock:/var/run/docker.sock - /var/run/docker.sock:/var/run/docker.sock
- /etc/localtime:/etc/localtime - /etc/localtime:/etc/localtime
extra_hosts:
- "host.docker.internal:host-gateway"
environment: environment:
FASTGEOIP: "true" FASTGEOIP: "true"
``` ```
@ -68,6 +71,11 @@ services:
| `/var/run/docker.sock` | Docker socket. Used for additional functionality with Zoraxy. | | `/var/run/docker.sock` | Docker socket. Used for additional functionality with Zoraxy. |
| `/etc/localtime` | Localtime. Set to ensure the host and container are synchronized. | | `/etc/localtime` | Localtime. Set to ensure the host and container are synchronized. |
### Extra Hosts
| Host | Details |
|:-|:-|
| `host.docker.internal:host-gateway` | Resolves host.docker.internal to the host’s gateway IP on the Docker bridge network, allowing containers to access services running on the host machine. |
### Environment ### Environment
Variables are the same as those in [Start Parameters](https://github.com/tobychui/zoraxy?tab=readme-ov-file#start-paramters). Variables are the same as those in [Start Parameters](https://github.com/tobychui/zoraxy?tab=readme-ov-file#start-paramters).

2
docker/docker-compose.yml
View File

@ -12,5 +12,7 @@ services:
- /path/to/zoraxy/plugin/:/opt/zoraxy/plugin/ - /path/to/zoraxy/plugin/:/opt/zoraxy/plugin/
- /var/run/docker.sock:/var/run/docker.sock - /var/run/docker.sock:/var/run/docker.sock
- /etc/localtime:/etc/localtime - /etc/localtime:/etc/localtime
extra_hosts:
- "host.docker.internal:host-gateway"
environment: environment:
FASTGEOIP: "true" FASTGEOIP: "true"

2
src/mod/dockerux/docker.go
View File

@ -20,7 +20,7 @@ func (d *UXOptimizer) HandleDockerAvailable(w http.ResponseWriter, r *http.Reque
} }
func (d *UXOptimizer) HandleDockerContainersList(w http.ResponseWriter, r *http.Request) { func (d *UXOptimizer) HandleDockerContainersList(w http.ResponseWriter, r *http.Request) {
apiClient, err := client.NewClientWithOpts(client.WithVersion("1.43")) apiClient, err := client.NewClientWithOpts(client.FromEnv, client.WithAPIVersionNegotiation())
if err != nil { if err != nil {
d.SystemWideLogger.PrintAndLog("Docker", "Unable to create new docker client", err) d.SystemWideLogger.PrintAndLog("Docker", "Unable to create new docker client", err)
utils.SendErrorResponse(w, "Docker client initiation failed") utils.SendErrorResponse(w, "Docker client initiation failed")

597
src/web/snippet/dockerContainersList.html
View File

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- Notes: This should be open in its original path--> <!-- Notes: This should be open in its original path -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="../script/semantic/semantic.min.css" /> <link rel="stylesheet" href="../script/semantic/semantic.min.css" />
<script src="../script/jquery-3.6.0.min.js"></script> <script src="../script/jquery-3.6.0.min.js"></script>
<script src="../script/semantic/semantic.min.js"></script> <script src="../script/semantic/semantic.min.js"></script>
</head> </head>
<body> <body>
<link rel="stylesheet" href="../darktheme.css"> <link rel="stylesheet" href="../darktheme.css" />
<script src="../script/darktheme.js"></script> <script src="../script/darktheme.js"></script>
<br /> <br />
<div class="ui container"> <div class="ui container">
@ -17,48 +17,428 @@
<input <input
id="searchbar" id="searchbar"
type="text" type="text"
placeholder="Search..." placeholder="Search Containers ..."
autocomplete="off" autocomplete="off"
/> />
</div> </div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="showOnlyRunning" class="hidden" />
<label for="showOnlyRunning">Show Only Running Containers</label>
</div>
</div>
<div class="field"> <div class="field">
<div class="ui checkbox"> <div class="ui checkbox">
<input type="checkbox" id="showUnexposed" class="hidden" /> <input type="checkbox" id="showUnexposed" class="hidden" />
<label for="showUnexposed" <label for="showUnexposed"
>Show Containers with unexposed ports >Show Containers with Unexposed Ports</label
<br /> >
<small
>Please make sure Zoraxy and the target container share a
network</small
>
</label>
</div> </div>
</div> </div>
</div> </div>
<!-- Networked Containers Lists -->
<div class="ui header"> <div class="ui header">
<div class="content"> <div class="content">
List of Docker Containers Containers on Zoraxy's Networks
<div class="sub header"> <div class="sub header">
Below is a list of all detected Docker containers currently running These containers share a network with Zoraxy.<br />
on the system. Your networks must support Docker DNS-based name resolution.
</div> </div>
</div> </div>
</div> </div>
<div id="containersList" class="ui middle aligned divided list active"> <div id="networkedList" class="ui middle aligned divided list">
<div class="ui loader active"></div> <div class="ui active loader"></div>
</div> </div>
<div class="ui horizontal divider"></div> <div class="ui horizontal divider"></div>
<div id="containersAddedListHeader" class="ui header" hidden> <!-- Host Mode Containers List -->
Already added containers: <div id="hostmodeListHeader" class="ui header" hidden>
<div class="content">
Containers using Host Network
<div class="sub header">
These containers use the host network configuration.<br />
Ports must be manually configured.
</div>
</div>
</div> </div>
<div <div id="hostmodeList" class="ui middle aligned divided list"></div>
id="containersAddedList" <div class="ui horizontal divider"></div>
class="ui middle aligned divided list" <!-- Other Containers List -->
></div> <div id="othersListHeader" class="ui header" hidden>
<div class="content">
Containers on different Networks
<div class="sub header">
These containers are not connected to Zoraxy's networks.<br />
Manual configuration is required.
</div>
</div>
</div>
<div id="othersList" class="ui middle aligned divided list"></div>
<div class="ui horizontal divider"></div>
<!-- Existing List -->
<div id="existingListHeader" class="ui header" hidden>
Containers with existing Proxy Rules
<div class="sub header">
These containers are already configured in the proxy rules.
</div>
</div>
<div id="existingList" class="ui middle aligned divided list"></div>
</div> </div>
<script> <script>
// debounce function to prevent excessive calls to a function // DOM elements
const $networkedList = $("#networkedList");
const $hostmodeListHeader = $("#hostmodeListHeader");
const $hostmodeList = $("#hostmodeList");
const $othersListHeader = $("#othersListHeader");
const $othersList = $("#othersList");
const $existingListHeader = $("#existingListHeader");
const $existingList = $("#existingList");
const $searchbar = $("#searchbar");
const $showOnlyRunning = $("#showOnlyRunning");
const $showUnexposed = $("#showUnexposed");
// maps for containers
let networkedEntries = {};
let hostmodeEntries = {};
let othersEntries = {};
let existingEntries = {};
// initial load
$(document).ready(() => {
loadCheckboxState("showUnexposed", $showUnexposed);
loadCheckboxState("showOnlyRunning", $showOnlyRunning);
initializeEventListeners();
getDockerContainers();
});
// event listeners
function initializeEventListeners() {
$showUnexposed.on("change", () => {
saveCheckboxState("showUnexposed", $showUnexposed);
getDockerContainers();
});
$showOnlyRunning.on("change", () => {
saveCheckboxState("showOnlyRunning", $showOnlyRunning);
getDockerContainers();
});
// debounce searchbar input to prevent excessive filtering
$searchbar.on(
"input",
debounce(() => filterLists($searchbar.val().toLowerCase()), 300)
);
$networkedList.on("click", ".add-button", (event) => {
const key = $(event.currentTarget).data("key");
if (networkedEntries[key]) {
parent.addContainerItem(networkedEntries[key]);
}
});
$hostmodeList.on("click", ".add-button", (event) => {
const key = $(event.currentTarget).data("key");
if (hostmodeEntries[key]) {
parent.addContainerItem(hostmodeEntries[key]);
}
});
}
// filter lists by toggling item visibility
function filterLists(searchTerm) {
$(".list .item").each((_, item) => {
const content = $(item).text().toLowerCase();
$(item).toggle(content.includes(searchTerm));
});
}
// reset UI and state
function reset() {
networkedEntries = {};
hostmodeEntries = {};
othersEntries = {};
existingEntries = {};
$networkedList.empty();
$hostmodeList.empty();
$othersList.empty();
$existingList.empty();
$hostmodeListHeader.attr("hidden", true);
$othersListHeader.attr("hidden", true);
$existingListHeader.attr("hidden", true);
}
// process docker data
async function getDockerContainers() {
reset();
$networkedList.html('<div class="ui active loader"></div>');
try {
const [hostData, dockerData] = await Promise.all([
$.get("/api/proxy/list?type=host"),
$.get("/api/docker/containers"),
]);
if (!hostData.error && !dockerData.error) {
processDockerData(hostData, dockerData);
} else {
showError(hostData.error || dockerData.error);
}
} catch (error) {
console.error(error);
parent.msgbox("Error loading data: " + error.message, false);
}
}
function processDockerData(hostData, dockerData) {
const { containers } = dockerData;
const existingTargets = new Set(
hostData.flatMap(({ ActiveOrigins }) =>
ActiveOrigins.map(({ OriginIpOrDomain }) => OriginIpOrDomain)
)
);
// identify the Zoraxy container to determine shared networks
const zoraxyContainer = containers.find(
(container) =>
container.Labels &&
container.Labels["com.imuslab.zoraxy.container-identifier"] ===
"Zoraxy"
);
const zoraxyNetworkIDs = zoraxyContainer
? Object.values(zoraxyContainer.NetworkSettings.Networks).map(
(network) => network.NetworkID
)
: [];
// iterate over all containers
containers.forEach((container) => {
// skip containers in network mode "none"
if (container.HostConfig.NetworkMode === "none") {
return;
}
// skip containers not running, if the option is enabled
if (
container.State !== "running" &&
$showOnlyRunning.prop("checked")
) {
return;
}
// sanitize container name
const containerName = container.Names[0].replace(/^\//, "");
// containers in network mode "host" should resolve to "host.docker.internal"
if (
container.HostConfig.NetworkMode === "host" &&
!hostmodeEntries[container.Id]
) {
hostmodeEntries[container.Id] = {
name: containerName,
ip: "host.docker.internal",
};
return;
}
// networks that are shared with Zoraxy
const sharedNetworks = Object.values(
container.NetworkSettings.Networks
).filter((network) => zoraxyNetworkIDs.includes(network.NetworkID));
if (!sharedNetworks.length) {
const ips = Object.values(container.NetworkSettings.Networks).map(
(network) => network.IPAddress
);
const ports = container.Ports.map((portObject) => {
return portObject.PublicPort || portObject.PrivatePort;
});
othersEntries[container.Id] = {
name: containerName,
ips,
ports,
};
return;
}
// add the container to the networked list, using it's name as address
container.Ports.forEach((portObject) => {
const port = portObject.PublicPort || portObject.PrivatePort;
const key = `${containerName}:${port}`;
// always include existing proxy-rule targets
if (existingTargets.has(key)) {
if (!existingEntries[key]) {
existingEntries[key] = {
name: containerName,
ip: containerName,
port,
};
}
}
// otherwise, include only if exposed or checkbox is checked
else if (portObject.PublicPort || $showUnexposed.is(":checked")) {
if (!networkedEntries[key]) {
networkedEntries[key] = {
name: containerName,
ip: containerName,
port,
};
}
}
});
});
// finally update the UI
updateNetworkedList();
updateHostmodeList();
updateOthersList();
updateExistingList();
}
// update networked list
function updateNetworkedList() {
$networkedList.empty();
let html = "";
Object.entries(networkedEntries)
.sort()
.forEach(([key, entry]) => {
html += `
<div class="item">
<div class="content" style="display: flex; justify-content: space-between;">
<div>
<div class="header">${entry.name}</div>
<div class="description">
<p>${entry.ip}:${entry.port}</p>
</div>
</div>
<button class="ui button add-button" data-key="${key}">
Add
</button>
</div>
</div>
`;
});
$networkedList.append(html);
}
// update hostmode list
function updateHostmodeList() {
$hostmodeList.empty();
let html = "";
Object.entries(hostmodeEntries)
.sort()
.forEach(([key, entry]) => {
html += `
<div class="item">
<div class="content" style="display: flex; justify-content: space-between;">
<div>
<div class="header">${entry.name}</div>
<div class="description">
<p>${entry.ip}</p>
</div>
</div>
<button class="ui right floated button add-button" data-key="${key}">
Add
</button>
</div>
</div>
`;
});
$hostmodeList.append(html);
if (Object.keys(hostmodeEntries).length) {
$hostmodeListHeader.removeAttr("hidden");
}
}
// update others list
function updateOthersList() {
$othersList.empty();
let html = "";
Object.entries(othersEntries)
.sort()
.forEach(([key, entry]) => {
html += `
<div class="item">
<div class="header">${entry.name}</div>
${
entry.ips.length === 0 ||
entry.ips.every((ip) => ip === "") ||
entry.ports.length === 0 ||
entry.ports.every((port) => port === "")
? `<div class="description">
<p>No IPs or Ports</p>
</div>`
: `<div class="description">
<p>
IPs: ${entry.ips.join(", ")}<br />
Ports: ${entry.ports.join(", ")}
</p>
</div>`
}
</div>
`;
});
$othersList.append(html);
if (Object.keys(othersEntries).length) {
$othersListHeader.removeAttr("hidden");
}
}
// update existing rules list
function updateExistingList() {
$existingList.empty();
let html = "";
Object.entries(existingEntries)
.sort()
.forEach(([key, entry]) => {
html += `
<div class="item">
<div class="content">
<div class="header">${entry.name}</div>
<div class="description">
<p>${entry.ip}:${entry.port}</p>
</div>
</div>
</div>
`;
});
$existingList.append(html);
if (Object.keys(existingEntries).length) {
$existingListHeader.removeAttr("hidden");
}
}
// show error message
function showError(error) {
$networkedList.html(
`<div class="ui basic segment"><i class="ui red times icon"></i> ${error}</div>`
);
parent.msgbox(`Error loading data: ${error}`, false);
}
//
// utils
//
// local storage handling
function loadCheckboxState(id, $elem) {
const state = localStorage.getItem(id);
if (state !== null) {
$elem.prop("checked", state === "true");
}
}
function saveCheckboxState(id, $elem) {
localStorage.setItem(id, $elem.prop("checked"));
}
// debounce function
function debounce(func, delay) { function debounce(func, delay) {
let timeout; let timeout;
return (...args) => { return (...args) => {
@ -66,177 +446,6 @@
timeout = setTimeout(() => func(...args), delay); timeout = setTimeout(() => func(...args), delay);
}; };
} }
// wait until DOM is fully loaded before executing script
$(document).ready(() => {
const $containersList = $("#containersList");
const $containersAddedList = $("#containersAddedList");
const $containersAddedListHeader = $("#containersAddedListHeader");
const $searchbar = $("#searchbar");
const $showUnexposed = $("#showUnexposed");
let lines = {};
let linesAdded = {};
// load showUnexposed checkbox state from local storage
function loadShowUnexposedState() {
const storedState = localStorage.getItem("showUnexposed");
if (storedState !== null) {
$showUnexposed.prop("checked", storedState === "true");
}
}
// save showUnexposed checkbox state to local storage
function saveShowUnexposedState() {
localStorage.setItem("showUnexposed", $showUnexposed.prop("checked"));
}
// fetch docker containers
function getDockerContainers() {
$containersList.html('<div class="ui loader active"></div>');
$containersAddedList.empty();
$containersAddedListHeader.attr("hidden", true);
lines = {};
linesAdded = {};
const hostRequest = $.get("/api/proxy/list?type=host");
const dockerRequest = $.get("/api/docker/containers");
Promise.all([hostRequest, dockerRequest])
.then(([hostData, dockerData]) => {
if (!hostData.error && !dockerData.error) {
processDockerData(hostData, dockerData);
} else {
showError(hostData.error || dockerData.error);
}
})
.catch((error) => {
console.error(error);
parent.msgbox("Error loading data: " + error.message, false);
});
}
// process docker data and update ui
function processDockerData(hostData, dockerData) {
const { containers } = dockerData;
const existingTargets = new Set(
hostData.flatMap(({ ActiveOrigins }) =>
ActiveOrigins.map(({ OriginIpOrDomain }) => OriginIpOrDomain)
)
);
containers.forEach((container) => {
const name = container.Names[0].replace(/^\//, "");
container.Ports.forEach((portObject) => {
let port = portObject.PublicPort || portObject.PrivatePort;
if (!portObject.PublicPort && !$showUnexposed.is(":checked"))
return;
// 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;
const key = `${name}-${port}`;
if (
existingTargets.has(`${targetAddress}:${port}`) &&
!linesAdded[key]
) {
linesAdded[key] = { name, ip: targetAddress, port };
} else if (!lines[key]) {
lines[key] = { name, ip: targetAddress, port };
}
});
});
// update ui
updateContainersList();
updateAddedContainersList();
}
// update containers list
function updateContainersList() {
$containersList.empty();
Object.entries(lines).forEach(([key, line]) => {
$containersList.append(`
<div class="item">
<div class="right floated content">
<div class="ui button add-button" data-key="${key}">Add</div>
</div>
<div class="content">
<div class="header">${line.name}</div>
<div class="description">${line.ip}:${line.port}</div>
</div>
</div>
`);
});
$containersList.find(".loader").removeClass("active");
}
// update the added containers list
function updateAddedContainersList() {
Object.entries(linesAdded).forEach(([key, line]) => {
$containersAddedList.append(`
<div class="item">
<div class="content">
<div class="header">${line.name}</div>
<div class="description">${line.ip}:${line.port}</div>
</div>
</div>
`);
});
if (Object.keys(linesAdded).length) {
$containersAddedListHeader.removeAttr("hidden");
}
}
// show error message
function showError(error) {
$containersList.html(
`<div class="ui basic segment"><i class="ui red times icon"></i> ${error}</div>`
);
parent.msgbox(`Error loading data: ${error}`, false);
}
//
// event listeners
//
$showUnexposed.on("change", () => {
saveShowUnexposedState(); // save the new state to local storage
getDockerContainers();
});
$searchbar.on(
"input",
debounce(() => {
// debounce searchbar input with 300ms delay, then filter list
// this prevents excessive calls to the filter function
const search = $searchbar.val().toLowerCase();
$("#containersList .item").each((index, item) => {
const content = $(item).text().toLowerCase();
$(item).toggle(content.includes(search));
});
}, 300)
);
$containersList.on("click", ".add-button", (event) => {
const key = $(event.currentTarget).data("key");
if (lines[key]) {
parent.addContainerItem(lines[key]);
}
});
//
// initial calls
//
// load state of showUnexposed checkbox
loadShowUnexposedState();
// initial load of docker containers
getDockerContainers();
});
</script> </script>
</body> </body>
</html> </html>