0ct0pu5/DweebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated images, networks, and volumes pages.

Browse source
This commit is contained in:
lllllllillllllillll 2024-01-08 17:30:20 -08:00
parent bd34d78648
commit 3e7f714115
7 changed files with 113 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app.js
View file

@ -76,7 +76,7 @@ app.use([
]);
// Initialize server
server.listen(port, () => {
server.listen(port, async () => {
async function init() {
try {
await sequelize.authenticate().then(() => { console.log('[Connected to DB]') });
@ -88,11 +88,12 @@ server.listen(port, () => {
} catch {
console.log('[Could not Sync Models]', error);
}
getHidden();
await getHidden();
containerCards();
console.log(`\nServer listening on http://localhost:${port}`);
}
init();
await init();
app.emit("appStarted");
console.log(`\nServer listening on http://localhost:${port}`);
});
// Server metrics

1
controllers/images.js
View file

@ -1,5 +1,4 @@
import { docker } from '../app.js';
import { dockerImages } from 'systeminformation';
export const Images = async function(req, res) {

44
controllers/networks.js
View file

@ -3,11 +3,55 @@ import { docker } from '../app.js';
export const Networks = async function(req, res) {
let networks = await docker.listNetworks({ all: true });
console.log(networks);
let network_list = `
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
<th><button class="table-sort" data-sort="sort-city">ID</button></th>
<th><button class="table-sort" data-sort="sort-type">Tag</button></th>
<th><button class="table-sort" data-sort="sort-score">Status</button></th>
<th><button class="table-sort" data-sort="sort-date">Created</button></th>
<th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
<th><button class="table-sort" data-sort="sort-progress">Action</button></th>
</tr>
</thead>
<tbody class="table-tbody">`
// for (let i = 0; i < networks.length; i++) {
// let date = new Date(images[i].Created * 1000);
// let created = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
// let details = `
// <tr>
// <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
// <td class="sort-name">${images[i].RepoTags}</td>
// <td class="sort-city">${images[i].Id}</td>
// <td class="sort-type">Latest</td>
// <td class="sort-score text-green">In use</td>
// <td class="sort-date" data-date="1628122643">${created}</td>
// <td class="sort-quantity">${size} MB</td>
// <td class="text-end"><a class="btn" href="#">Details</a></td>
// </tr>`
// image_list += details;
// }
// image_list += `</tbody>`
res.render("networks", {
name: req.session.user,
role: req.session.role,
avatar: req.session.avatar,
network_list: network_list,
network_count: networks.length
});
}

51
controllers/volumes.js
View file

@ -1,9 +1,58 @@
import { docker } from '../app.js';
export const Volumes = (req, res) => {
export const Volumes = async function(req, res) {
let volumes = await docker.listVolumes();
console.log(volumes);
let volume_list = `
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
<th><button class="table-sort" data-sort="sort-city">ID</button></th>
<th><button class="table-sort" data-sort="sort-type">Tag</button></th>
<th><button class="table-sort" data-sort="sort-score">Status</button></th>
<th><button class="table-sort" data-sort="sort-date">Created</button></th>
<th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
<th><button class="table-sort" data-sort="sort-progress">Action</button></th>
</tr>
</thead>
<tbody class="table-tbody">`
// for (let i = 0; i < images.length; i++) {
// let date = new Date(images[i].Created * 1000);
// let created = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
// let size = images[i].Size / 1000 / 1000; // to match docker desktop
// size = size.toFixed(2);
// let details = `
// <tr>
// <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
// <td class="sort-name">${images[i].RepoTags}</td>
// <td class="sort-city">${images[i].Id}</td>
// <td class="sort-type">Latest</td>
// <td class="sort-score text-green">In use</td>
// <td class="sort-date" data-date="1628122643">${created}</td>
// <td class="sort-quantity">${size} MB</td>
// <td class="text-end"><a class="btn" href="#">Details</a></td>
// </tr>`
// image_list += details;
// }
// image_list += `</tbody>`
res.render("volumes", {
name: req.session.user,
role: req.session.role,
avatar: req.session.avatar,
volume_list: volumes_list,
volume_count: volumes.length
});
}

4
views/images.ejs
View file

@ -36,11 +36,11 @@
<div class="card-options btn-list">
<a href="/refreshsites" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path> </svg>
Scan
Refresh
</a>
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#add-site">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path> </svg>
Add Image
New Image
</a>
</div>
</div>

50
views/networks.ejs
View file

@ -36,11 +36,11 @@
<div class="card-options btn-list">
<a href="/refreshsites" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path> </svg>
Scan
Refresh
</a>
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#add-site">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path> </svg>
Create Network
New Network
</a>
</div>
</div>
@ -109,47 +109,9 @@
<div id="table-default" class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
<th><button class="table-sort" data-sort="sort-city">ID</button></th>
<th><button class="table-sort" data-sort="sort-type">Tag</button></th>
<th><button class="table-sort" data-sort="sort-score">Status</button></th>
<th><button class="table-sort" data-sort="sort-date">Created</button></th>
<th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
<th><button class="table-sort" data-sort="sort-progress">Action</button></th>
</tr>
</thead>
<tbody class="table-tbody"><tr>
<td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
<td class="sort-name">Caddy</td>
<td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
<td class="sort-type">Latest</td>
<td class="sort-score text-green">In use</td>
<td class="sort-date" data-date="1628122643">August 05, 2021</td>
<td class="sort-quantity">69.27 MB</td>
<td class="text-end"><a class="btn" href="#">Details</a></td>
</tr><tr>
<td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
<td class="sort-name">clamav/clamav</td>
<td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
<td class="sort-type">Latest</td>
<td class="sort-score text-green">In use</td>
<td class="sort-date" data-date="1546344668">January 01, 2019</td>
<td class="sort-quantity">546.22 MB</td>
<td class="text-end"><a class="btn" href="#">Details</a></td>
</tr><tr>
<td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
<td class="sort-name">linuxserver/code-server</td>
<td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
<td class="sort-type">Latest</td>
<td class="sort-score text-yellow">Unused</td>
<td class="sort-date" data-date="1545977105">December 28, 2018</td>
<td class="sort-quantity">63.91 MB</td>
<td class="text-end"><a class="btn" href="#">Details</a></td>
</tr>
</tbody>
<%- network_list %>
</table>
</div>
@ -172,7 +134,7 @@
</form>
<p class="m-0 text-muted ms-auto">3 Images</p>
<p class="m-0 text-muted ms-auto"><%- network_count %> Networks</p>
</div>
</div>

50
views/volumes.ejs
View file

@ -36,11 +36,11 @@
<div class="card-options btn-list">
<a href="/refreshsites" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path> </svg>
Scan
Refresh
</a>
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#add-site">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path> </svg>
Create Volume
New Volume
</a>
</div>
</div>
@ -109,47 +109,9 @@
<div id="table-default" class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
<th><button class="table-sort" data-sort="sort-city">ID</button></th>
<th><button class="table-sort" data-sort="sort-type">Tag</button></th>
<th><button class="table-sort" data-sort="sort-score">Status</button></th>
<th><button class="table-sort" data-sort="sort-date">Created</button></th>
<th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
<th><button class="table-sort" data-sort="sort-progress">Action</button></th>
</tr>
</thead>
<tbody class="table-tbody"><tr>
<td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
<td class="sort-name">Caddy</td>
<td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
<td class="sort-type">Latest</td>
<td class="sort-score text-green">In use</td>
<td class="sort-date" data-date="1628122643">August 05, 2021</td>
<td class="sort-quantity">69.27 MB</td>
<td class="text-end"><a class="btn" href="#">Details</a></td>
</tr><tr>
<td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
<td class="sort-name">clamav/clamav</td>
<td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
<td class="sort-type">Latest</td>
<td class="sort-score text-green">In use</td>
<td class="sort-date" data-date="1546344668">January 01, 2019</td>
<td class="sort-quantity">546.22 MB</td>
<td class="text-end"><a class="btn" href="#">Details</a></td>
</tr><tr>
<td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
<td class="sort-name">linuxserver/code-server</td>
<td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
<td class="sort-type">Latest</td>
<td class="sort-score text-yellow">Unused</td>
<td class="sort-date" data-date="1545977105">December 28, 2018</td>
<td class="sort-quantity">63.91 MB</td>
<td class="text-end"><a class="btn" href="#">Details</a></td>
</tr>
</tbody>
<%- volume_list %>
</table>
</div>
@ -172,7 +134,7 @@
</form>
<p class="m-0 text-muted ms-auto">3 Images</p>
<p class="m-0 text-muted ms-auto"><%- volume_count %> Volumes</p>
</div>
</div>