Volumes page displays bind type and status(in use)
This commit is contained in:
lllllllillllllillll
parent
7cf8b84169
commit
a8bf38eedb
|
|
@ -1,59 +1,66 @@
|
|||
import { docker } from '../server.js';
|
||||
|
||||
|
||||
export const Volumes = async function(req, res) {
|
||||
let container_volumes = [];
|
||||
let volume_list = '';
|
||||
|
||||
// Table header
|
||||
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><label class="table-sort" data-sort="sort-type">Type</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-name">Name</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-city">Mount point</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-score">Status</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-date">Created</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-quantity">Size</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-progress">Action</label></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-tbody">`
|
||||
|
||||
// List all containers
|
||||
let containers = await docker.listContainers({ all: true });
|
||||
|
||||
// Get the first 6 volumes from each container
|
||||
for (let i = 0; i < containers.length; i++) {
|
||||
try { container_volumes.push({type: containers[i].Mounts[0].Type, source: containers[i].Mounts[0].Source}); } catch { }
|
||||
try { container_volumes.push({type: containers[i].Mounts[1].Type, source: containers[i].Mounts[1].Source}); } catch { }
|
||||
try { container_volumes.push({type: containers[i].Mounts[2].Type, source: containers[i].Mounts[2].Source}); } catch { }
|
||||
try { container_volumes.push({type: containers[i].Mounts[3].Type, source: containers[i].Mounts[3].Source}); } catch { }
|
||||
try { container_volumes.push({type: containers[i].Mounts[4].Type, source: containers[i].Mounts[4].Source}); } catch { }
|
||||
try { container_volumes.push({type: containers[i].Mounts[5].Type, source: containers[i].Mounts[5].Source}); } catch { }
|
||||
}
|
||||
|
||||
// List ALL volumes
|
||||
let list = await docker.listVolumes({ all: true });
|
||||
let volumes = list.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><label class="table-sort" data-sort="sort-name">Name</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-city">Mount point</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-score">Status</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-date">Created</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-quantity">Size</label></th>
|
||||
<th><label class="table-sort" data-sort="sort-progress">Action</label></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-tbody">`
|
||||
|
||||
|
||||
|
||||
// Create a table row for each volume
|
||||
for (let i = 0; i < volumes.length; i++) {
|
||||
let volume = volumes[i];
|
||||
let name = volume.Name;
|
||||
let mount = volume.Mountpoint;
|
||||
let name = "" + volume.Name;
|
||||
let mount = "" + volume.Mountpoint;
|
||||
let type = "Bind";
|
||||
|
||||
if (name.length > 40) {
|
||||
name = name.slice(0, 37) + '...';
|
||||
}
|
||||
// Check if the volume is being used by any of the containers
|
||||
let status = ` - `;
|
||||
if (container_volumes.some(volume => volume.source === mount)) { status = "In use"; }
|
||||
if (container_volumes.some(volume => volume.source === mount && volume.type === 'volume')) { type = "Volume"; }
|
||||
|
||||
if (mount.length > 70) {
|
||||
mount = mount.slice(0, 67) + '...';
|
||||
}
|
||||
|
||||
// docker.df(volume.Mountpoint).then((data) => {
|
||||
// for (let key in data) {
|
||||
// console.log(data[key]);
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
let details = `
|
||||
let row = `
|
||||
<tr>
|
||||
<td><input class="form-check-input m-0 align-middle" name="select" value="${name}" type="checkbox" aria-label="Select"></td>
|
||||
<td class="sort-type">${type}</td>
|
||||
<td class="sort-name">${name}</td>
|
||||
<td class="sort-city">${mount}</td>
|
||||
<td class="sort-score text-green"> - </td>
|
||||
<td class="sort-score text-green">${status}</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>
|
||||
</tr>`
|
||||
|
||||
volume_list += details;
|
||||
volume_list += row;
|
||||
}
|
||||
|
||||
volume_list += `</tbody>`
|
||||
|
|
@ -102,4 +109,11 @@ export const removeVolume = async function(req, res) {
|
|||
}
|
||||
|
||||
res.redirect("/volumes");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// docker.df(volume.Name).then((data) => {
|
||||
// for (let key in data) {
|
||||
// console.log(data[key]);
|
||||
// }
|
||||
// });
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<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
|
||||
</a>
|
||||
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#not_add-site">
|
||||
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modals-here">
|
||||
<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
|
||||
</a>
|
||||
|
|
@ -79,6 +79,52 @@
|
|||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<!-- HTMX Modal Target -->
|
||||
<div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">New Volume</h5>
|
||||
</div>
|
||||
|
||||
<div class="modal-body text-center">
|
||||
<form method="post" action="/volumes/add">
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-sm-6 col-md-6">
|
||||
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 align-items-end">
|
||||
<div class="col-7">
|
||||
<label class="form-label text-muted">Image</label>
|
||||
<input type="text" class="form-control" name="image" placeholder="lllllllillllllillll/dweebui">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<label class="form-label text-muted">Tag</label>
|
||||
<input type="text" class="form-control" name="tag" placeholder="latest">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<button type="submit" class="btn mt-2">Pull</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue