working usage graphs for containers.
clunky af
This commit is contained in:
lllllllillllllillll
GitHub
parent
c063a5a0e8
commit
46fb7e0faf
6 changed files with 60 additions and 26 deletions
36
app.js
36
app.js
|
|
@ -10,6 +10,7 @@ var docker = new Docker({ socketPath: '/var/run/docker.sock' });
|
|||
const { dashCard } = require('./components/dashCard');
|
||||
|
||||
let DockerContainers, sent_list, clicked, open_ports, ServerMetrics, card_list, external_port, internal_port;
|
||||
let container_stats = {};
|
||||
|
||||
const redisClient = require('redis').createClient({
|
||||
legacyMode:true
|
||||
|
|
@ -79,8 +80,11 @@ io.on('connection', (socket) => {
|
|||
internal_port;
|
||||
|
||||
docker.listContainers({ all: true }, async function (err, data) {
|
||||
|
||||
for (const container of data) {
|
||||
|
||||
console.log(container);
|
||||
|
||||
let imageVersion = container.Image.split('/');
|
||||
let service = imageVersion[imageVersion.length - 1].split(":")[0];
|
||||
|
||||
|
|
@ -104,13 +108,13 @@ io.on('connection', (socket) => {
|
|||
}
|
||||
}
|
||||
|
||||
let volumes = [];
|
||||
// let volumes = [];
|
||||
|
||||
console.log('Volumes:');
|
||||
for (const [key, value] of Object.entries(containerInfo.Mounts)) {
|
||||
// console.log(`${value.Source}: ${value.Destination}: ${value.RW}`);
|
||||
volumes.push(`${value.Source}: ${value.Destination}: ${value.RW}`);
|
||||
}
|
||||
// console.log('Volumes:');
|
||||
// for (const [key, value] of Object.entries(containerInfo.Mounts)) {
|
||||
// console.log(`${value.Source}: ${value.Destination}: ${value.RW}`);
|
||||
// volumes.push(`${value.Source}: ${value.Destination}: ${value.RW}`);
|
||||
// }
|
||||
|
||||
// console.log('Environment Variables:');
|
||||
// for (const [key, value] of Object.entries(containerInfo.Config.Env)) {
|
||||
|
|
@ -123,16 +127,29 @@ io.on('connection', (socket) => {
|
|||
// }
|
||||
|
||||
dockerContainerStats(container.Id).then((data) => {
|
||||
let container_stats = {
|
||||
container_stats = {
|
||||
name: container.Names[0].slice(1),
|
||||
cpu: Math.round(data[0].cpuPercent),
|
||||
ram: Math.round(data[0].memPercent)
|
||||
}
|
||||
console.log(container_stats);
|
||||
socket.emit('container_stats', container_stats);
|
||||
});
|
||||
|
||||
let dockerCard = dashCard(container.Names[0].slice(1), service, container.Id, container.State, container.Image, external_port, internal_port);
|
||||
|
||||
|
||||
let container_info = {
|
||||
name: container.Names[0].slice(1),
|
||||
service: service,
|
||||
id: container.Id,
|
||||
state: container.State,
|
||||
image: container.Image,
|
||||
external_port: external_port,
|
||||
internal_port: internal_port
|
||||
}
|
||||
|
||||
let dockerCard = dashCard(container_info);
|
||||
|
||||
|
||||
// open_ports += `-L ${external_port}:localhost:${external_port} `
|
||||
card_list += dockerCard;
|
||||
|
||||
|
|
@ -145,6 +162,7 @@ io.on('connection', (socket) => {
|
|||
socket.emit('cards', card_list);
|
||||
console.log('Cards updated');
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -141,7 +141,11 @@ function appCard(data) {
|
|||
let volume_check = volumes ? "checked" : "";
|
||||
let volume_bind = volumes.bind.split(":")[0] ? volumes.bind.split(":")[0] : "";
|
||||
let volume_container = volumes.container.split(":")[0] ? volumes.container.split(":")[0] : "";
|
||||
let volume_readwrite = volumes.container.endsWith(":ro") ? "ro" : "rw";
|
||||
let volume_readwrite = "rw"
|
||||
|
||||
if ((volumes.readonly == true) || (volumes.container.endsWith(":ro"))) {
|
||||
volume_readwrite = "ro";
|
||||
}
|
||||
|
||||
volumes_data.push({
|
||||
check: volume_check,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
function dashCard(name, service, id, state, image, external_port, internal_port) {
|
||||
function dashCard(data) {
|
||||
|
||||
let { name, service, id, state, image, external_port, internal_port } = data;
|
||||
|
||||
//disable controls for a docker container depending on its name
|
||||
let enabled = "";
|
||||
|
|
@ -100,7 +102,7 @@ function dashCard(name, service, id, state, image, external_port, internal_port)
|
|||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-stamp card-stamp-sm">
|
||||
<img heigh="300px" width="300px" src="https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/png/${service}.png"></img>
|
||||
<img heigh="150px" width="150px" src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/${service}.png"></img>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
|
|
|
|||
|
|
@ -33,8 +33,17 @@ exports.Install = async function (req, res) {
|
|||
|
||||
} else {
|
||||
|
||||
let container_info = {
|
||||
name: name,
|
||||
service: service_name,
|
||||
state: 'installing',
|
||||
image: image,
|
||||
restart_policy: restart_policy
|
||||
}
|
||||
|
||||
|
||||
let installCard = dashCard(container_info);
|
||||
|
||||
let installCard = dashCard(req.body.name, req.body.service_name, '', 'installing', req.body.image, 0, 0);
|
||||
req.app.locals.install = installCard;
|
||||
|
||||
let compose_file = `version: '3'`;
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ socket.on('cards', (data) => {
|
|||
});
|
||||
|
||||
dockerCards.insertAdjacentHTML("afterend", data);
|
||||
// drawCharts('#cardChart');
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -133,16 +133,21 @@ socket.on('container_stats', (data) => {
|
|||
// get cpu and ram array of the container from local storage
|
||||
var cpu_array = JSON.parse(localStorage.getItem(`${name}_cpu`));
|
||||
var ram_array = JSON.parse(localStorage.getItem(`${name}_ram`));
|
||||
|
||||
console.log(`#1: ${name} cpu: ${cpu_array} ram: ${ram_array}`);
|
||||
|
||||
// if the cpu and ram arrays are null, create both arrays with 30 values of 0
|
||||
if (cpu_array == null) { cpu_array = Array(30).fill(0); }
|
||||
if (ram_array == null) { ram_array = Array(30).fill(0); }
|
||||
console.log(`#2: ${name} cpu: ${cpu_array} ram: ${ram_array}`);
|
||||
|
||||
// add the new cpu and ram values to the arrays, but limit the array to 30 values
|
||||
cpu_array.push(cpu);
|
||||
ram_array.push(ram);
|
||||
console.log(`#3: ${name} cpu: ${cpu_array} ram: ${ram_array}`);
|
||||
|
||||
cpu_array = cpu_array.slice(-30);
|
||||
ram_array = ram_array.slice(-30);
|
||||
console.log(`#4: ${name} cpu: ${cpu_array} ram: ${ram_array}`);
|
||||
|
||||
// save the arrays to local storage
|
||||
localStorage.setItem(`${name}_cpu`, JSON.stringify(cpu_array));
|
||||
|
|
|
|||
|
|
@ -3720,8 +3720,8 @@
|
|||
"Tools"
|
||||
],
|
||||
"description": "ClamAV is an open source antivirus engine for detecting trojans, viruses, malware & other malicious threats.",
|
||||
"image": "mkodockx/docker-clamav:alpine",
|
||||
"logo": "http://www.clamav.net/assets/clamav-trademark.png",
|
||||
"image": "clamav/clamav",
|
||||
"logo": "https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/clamav.png",
|
||||
"name": "clamav",
|
||||
"platform": "linux",
|
||||
"ports": [
|
||||
|
|
@ -3733,19 +3733,15 @@
|
|||
"volumes": [
|
||||
{
|
||||
"bind": "/etc/timezone",
|
||||
"container": "/etc/timezone"
|
||||
},
|
||||
{
|
||||
"bind": "/etc/localtime",
|
||||
"container": "/etc/localtime"
|
||||
},
|
||||
{
|
||||
"bind": "/home/docker/clamav/config",
|
||||
"container": "/etc/clamav"
|
||||
"container": "/etc/timezone:ro"
|
||||
},
|
||||
{
|
||||
"bind": "/home/docker/clamav/virus_definitions",
|
||||
"container": "/var/lib/clamav"
|
||||
},
|
||||
{
|
||||
"bind": "/home/docker",
|
||||
"container": "/scandir"
|
||||
}
|
||||
],
|
||||
"note": ""
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue