working 'remove' on images and networks pages
This commit is contained in:
lllllllillllllillll
parent
e786b32161
commit
377ba6ae67
13 changed files with 126 additions and 60 deletions
|
|
@ -74,7 +74,7 @@ export const containerCard = (data) => {
|
|||
<button class="dropdown-item text-secondary" name="${name}" data-hx-get="/modal" data-hx-target="#modals-here" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Details</button>
|
||||
<button class="dropdown-item text-secondary" name="${name}" id="logs" data-hx-get="/logs" data-hx-target="#logView" data-bs-toggle="modal" data-bs-target="#log_view">Logs</button>
|
||||
<button class="dropdown-item text-secondary" name="${name}" id="edit">Edit</button>
|
||||
<button class="dropdown-item text-primary" name="${name}" id="update">Update</button>
|
||||
<button class="dropdown-item text-primary" name="${name}" id="update" disabled="">Update</button>
|
||||
<button class="dropdown-item text-danger" name="${name}" id="remove" data-bs-toggle="modal" data-bs-target="#${name}_uninstall_modal" href="#">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -249,10 +249,12 @@ export const permissionsModal = (data) => {
|
|||
<div class="modal-footer">
|
||||
<div class="row">
|
||||
|
||||
<div class="col">
|
||||
<label class="form-check form-switch col">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<span class="form-check-label">Reset</span>
|
||||
<input class="form-check-input" type="checkbox">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@ export const Images = async function(req, res) {
|
|||
|
||||
let details = `
|
||||
<tr>
|
||||
<td><input class="form-check-input m-0 align-middle" name="select" value="${images[i].RepoTags}" type="checkbox" aria-label="Select"></td>
|
||||
<td><input class="form-check-input m-0 align-middle" name="select" value="${images[i].Id}" 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-score text-green"> - </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>
|
||||
|
|
@ -53,4 +53,28 @@ export const Images = async function(req, res) {
|
|||
image_count: images.length
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const removeImage = async function(req, res) {
|
||||
|
||||
let images = req.body.select;
|
||||
|
||||
console.log(images);
|
||||
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
|
||||
if (images[i] != 'on') {
|
||||
try {
|
||||
console.log(`Removing image: ${images[i]}`);
|
||||
let image = docker.getImage(images[i]);
|
||||
await image.remove();
|
||||
} catch (error) {
|
||||
console.log(`Unable to remove image: ${images[i]}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
res.redirect("/images");
|
||||
}
|
||||
|
|
@ -23,15 +23,13 @@ export const Networks = async function(req, res) {
|
|||
|
||||
// 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="${networks[i].Name}" type="checkbox" aria-label="Select"></td>
|
||||
<td><input class="form-check-input m-0 align-middle" name="select" value="${networks[i].Id}" type="checkbox" aria-label="Select"></td>
|
||||
<td class="sort-name">${networks[i].Name}</td>
|
||||
<td class="sort-city">${networks[i].Id}</td>
|
||||
<td class="sort-score text-green">In use</td>
|
||||
<td class="sort-score text-green"> - </td>
|
||||
<td class="sort-date" data-date="1628122643">${networks[i].Created}</td>
|
||||
<td class="text-end"><a class="btn" href="#">Details</a></td>
|
||||
</tr>`
|
||||
|
|
@ -49,4 +47,27 @@ export const Networks = async function(req, res) {
|
|||
network_count: networks.length
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export const removeNetwork = async function(req, res) {
|
||||
|
||||
let networks = req.body.select;
|
||||
|
||||
for (let i = 0; i < networks.length; i++) {
|
||||
|
||||
if (networks[i] != 'on') {
|
||||
try {
|
||||
console.log(`Removing network: ${networks[i]}`);
|
||||
let network = docker.getNetwork(networks[i]);
|
||||
await network.remove();
|
||||
} catch (error) {
|
||||
console.log(`Unable to remove network: ${networks[i]}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
res.redirect("/networks");
|
||||
}
|
||||
|
|
@ -47,10 +47,10 @@ export const Volumes = async function(req, res) {
|
|||
<td><input class="form-check-input m-0 align-middle" name="select" value="${name}" type="checkbox" aria-label="Select"></td>
|
||||
<td class="sort-name">${name}</td>
|
||||
<td class="sort-city">${mount}</td>
|
||||
<td class="sort-score text-green">In use</td>
|
||||
<td class="sort-score text-green"> - </td>
|
||||
<td class="sort-date" data-date="1628122643">${volume.CreatedAt}</td>
|
||||
<td class="sort-quantity">MB</td>
|
||||
<td class="text-end"><a class="btn" href="#">Details</a></td>
|
||||
<td class="text-end"><a class="btn" href="#" disabled="">Details</a></td>
|
||||
</tr>`
|
||||
|
||||
volume_list += details;
|
||||
|
|
@ -67,4 +67,25 @@ export const Volumes = async function(req, res) {
|
|||
volume_count: volumes.length
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const removeVolume = async function(req, res) {
|
||||
|
||||
let volumes = req.body.select;
|
||||
|
||||
for (let i = 0; i < volumes.length; i++) {
|
||||
let volume = docker.getVolume(volumes[i]);
|
||||
try {
|
||||
volume.remove();
|
||||
} catch (error) {
|
||||
console.log(`Unable to remove volume ${volumes[i]}`);
|
||||
}
|
||||
}
|
||||
|
||||
res.redirect("/volumes");
|
||||
}
|
||||
|
|
@ -7,20 +7,15 @@ import { Register, submitRegister } from "../controllers/register.js";
|
|||
import { Dashboard, searchDashboard } from "../controllers/dashboard.js";
|
||||
import { Apps, appSearch } from "../controllers/apps.js";
|
||||
import { Users } from "../controllers/users.js";
|
||||
import { Images } from "../controllers/images.js";
|
||||
import { Images, removeImage } from "../controllers/images.js";
|
||||
import { Networks, removeNetwork } from "../controllers/networks.js";
|
||||
import { Volumes, removeVolume } from "../controllers/volumes.js";
|
||||
import { Account } from "../controllers/account.js";
|
||||
import { Settings } from "../controllers/settings.js";
|
||||
import { Supporters } from "../controllers/supporters.js";
|
||||
import { Networks } from "../controllers/networks.js";
|
||||
import { Volumes } from "../controllers/volumes.js";
|
||||
import { Syslogs } from "../controllers/syslogs.js";
|
||||
import { Portal } from "../controllers/portal.js"
|
||||
|
||||
// Functions
|
||||
import { Install } from "../functions/install.js"
|
||||
import { Uninstall } from "../functions/uninstall.js"
|
||||
|
||||
|
||||
// Auth middleware
|
||||
const auth = (req, res, next) => {
|
||||
if (req.session.role == "admin") {
|
||||
|
|
@ -38,28 +33,17 @@ router.get("/logout", Logout);
|
|||
router.get("/register", Register);
|
||||
router.post("/register", submitRegister);
|
||||
|
||||
|
||||
router.get("/", auth, Dashboard);
|
||||
router.post("/", auth, searchDashboard);
|
||||
|
||||
router.get("/images", auth, Images);
|
||||
|
||||
router.post("/submitImages", (req, res, next) => {
|
||||
console.log(req.body);
|
||||
next();
|
||||
}, Images);
|
||||
router.post("/removeImage", removeImage);
|
||||
|
||||
router.get("/volumes", auth, Volumes);
|
||||
router.post("/submitVolumes", (req, res, next) => {
|
||||
console.log(req.body);
|
||||
next();
|
||||
}, Volumes);
|
||||
router.post("/removeVolume", removeVolume);
|
||||
|
||||
router.get("/networks", auth, Networks);
|
||||
router.post("/submitNetworks", (req, res, next) => {
|
||||
console.log(req.body);
|
||||
next();
|
||||
}, Networks);
|
||||
router.post("/removeNetwork", removeNetwork);
|
||||
|
||||
router.get("/portal", Portal)
|
||||
|
||||
|
|
@ -70,11 +54,14 @@ router.post("/apps", auth, appSearch);
|
|||
router.get("/users", auth, Users);
|
||||
router.get("/syslogs", auth, Syslogs);
|
||||
|
||||
|
||||
router.get("/account", Account);
|
||||
router.get("/settings", auth, Settings);
|
||||
router.get("/supporters", Supporters);
|
||||
|
||||
|
||||
// Functions
|
||||
import { Install } from "../functions/install.js"
|
||||
import { Uninstall } from "../functions/uninstall.js"
|
||||
|
||||
router.post("/install", auth, Install);
|
||||
router.post("/uninstall", auth, Uninstall);
|
||||
13
server.js
13
server.js
|
|
@ -155,6 +155,8 @@ setInterval(async () => {
|
|||
|
||||
|
||||
router.get('/stats', async (req, res) => {
|
||||
if (req.session.UUID == undefined) { return; }
|
||||
|
||||
switch (req.header('HX-Trigger')) {
|
||||
case 'cpu':
|
||||
let info = '<div class="font-weight-medium">';
|
||||
|
|
@ -196,6 +198,8 @@ router.get('/stats', async (req, res) => {
|
|||
});
|
||||
|
||||
router.get('/containers', async (req, res) => {
|
||||
if (req.session.UUID == undefined) { return; }
|
||||
|
||||
await getHidden();
|
||||
await containerCards();
|
||||
sentList = cardList;
|
||||
|
|
@ -203,6 +207,8 @@ router.get('/containers', async (req, res) => {
|
|||
});
|
||||
|
||||
router.get('/action', async (req, res) => {
|
||||
if (req.session.UUID == undefined) { return; }
|
||||
|
||||
let name = req.header('hx-trigger-name');
|
||||
let id = req.header('hx-trigger');
|
||||
let value = req.query[name];
|
||||
|
|
@ -225,6 +231,8 @@ router.get('/action', async (req, res) => {
|
|||
});
|
||||
|
||||
router.get('/hide', async (req, res) => {
|
||||
if (req.session.UUID == undefined) { return; }
|
||||
|
||||
let name = req.header('hx-trigger-name');
|
||||
let id = req.header('hx-trigger');
|
||||
|
||||
|
|
@ -250,6 +258,8 @@ router.get('/hide', async (req, res) => {
|
|||
|
||||
|
||||
router.get('/logs', async (req, res) => {
|
||||
if (req.session.UUID == undefined) { return; }
|
||||
|
||||
let name = req.header('hx-trigger-name');
|
||||
|
||||
function containerLogs (data) {
|
||||
|
|
@ -297,6 +307,7 @@ router.get('/sse_event', (req, res) => {
|
|||
|
||||
|
||||
router.get('/modal', async (req, res) => {
|
||||
if (req.session.UUID == undefined) { return; }
|
||||
|
||||
let name = req.header('hx-trigger-name');
|
||||
let id = req.header('hx-trigger');
|
||||
|
|
@ -343,6 +354,8 @@ router.get('/modal', async (req, res) => {
|
|||
|
||||
let stats = {};
|
||||
router.get('/chart', async (req, res) => {
|
||||
if (req.session.UUID == undefined) { return; }
|
||||
|
||||
let name = req.header('hx-trigger-name');
|
||||
// create an empty array if it doesn't exist
|
||||
if (!stats[name]) {
|
||||
|
|
|
|||
|
|
@ -228,13 +228,19 @@
|
|||
strokeDashArray: 4
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
padding: 0
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
max: 150,
|
||||
labels: {
|
||||
padding: 4
|
||||
}
|
||||
},
|
||||
colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
|
||||
legend: {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
All rights reserved.
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="#" class="link-secondary" rel="noopener">
|
||||
<a href="https://github.com/lllllllillllllillll/DweebUI/releases" class="link-secondary" rel="noopener">
|
||||
v0.21
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -37,11 +37,11 @@
|
|||
<div class="card-options btn-list">
|
||||
<a href="#" 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>
|
||||
Refresh
|
||||
Refresh
|
||||
</a>
|
||||
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#not_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>
|
||||
New Image
|
||||
New Image
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,20 +57,7 @@
|
|||
|
||||
<div class="card-footer d-flex align-items-center">
|
||||
|
||||
<span class="dropdown">
|
||||
<button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">Actions</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<button class="dropdown-item" type="submit" formaction="/submitImages">
|
||||
Enable
|
||||
</button>
|
||||
<button class="dropdown-item" type="submit" formaction="/submitImages">
|
||||
Disable
|
||||
</button>
|
||||
<button class="dropdown-item" type="submit" formaction="/submitImages">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
<button class="btn" type="submit" formaction="/removeImage">Remove</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,10 @@
|
|||
|
||||
<div class="card-footer d-flex align-items-center">
|
||||
|
||||
<span class="dropdown">
|
||||
|
||||
<button class="btn" type="submit" formaction="/removeNetwork">Remove</button>
|
||||
|
||||
<!-- <span class="dropdown">
|
||||
<button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">Actions</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<button class="dropdown-item" type="submit" formaction="/submitNetworks">
|
||||
|
|
@ -69,7 +72,7 @@
|
|||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
</span> -->
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<h4 class="subheader">Menu</h4>
|
||||
<div class="list-group list-group-transparent">
|
||||
<a href="/account" class="list-group-item list-group-item-action d-flex align-items-center">Accounts</a>
|
||||
<a href="/variables" class="list-group-item list-group-item-action d-flex align-items-center" disabled="">Variables</a>
|
||||
<a href="/settings" class="list-group-item list-group-item-action d-flex align-items-center">Settings</a>
|
||||
</div>
|
||||
<h4 class="subheader mt-4">Other</h4>
|
||||
|
|
|
|||
|
|
@ -37,11 +37,11 @@
|
|||
<div class="card-options btn-list">
|
||||
<a href="#" 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>
|
||||
Refresh
|
||||
Refresh
|
||||
</a>
|
||||
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#not_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>
|
||||
New Volume
|
||||
New Volume
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,7 +57,9 @@
|
|||
|
||||
<div class="card-footer d-flex align-items-center">
|
||||
|
||||
<span class="dropdown">
|
||||
<button class="btn" type="submit" formaction="/removeVolume">Remove</button>
|
||||
|
||||
<!-- <span class="dropdown">
|
||||
<button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">Actions</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<button class="dropdown-item" type="submit" formaction="/submitVolumes">
|
||||
|
|
@ -70,10 +72,9 @@
|
|||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
</span> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="m-0 text-muted ms-auto"><%- volume_count %> Volumes</p>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue