Merge pull request #6 from lllllllillllllillll/dev

v0.03

CHANGELOG.md

@@ -1,9 +1,15 @@
-## 0.02 (Nov 1st 2023)
+## v0.03 (Nov 5th 2023)
+* Container graphs now load instantly on refresh
+* Working net data for server dashboard
+* Redis is now installed as a docker container.
+
+
+## v0.02 (Nov 1st 2023)
 * Significant code clean-up and improvements
 * CPU and RAM graphs for each container
 * Updated Templates.json
 * Fixed text color of VPN and VNC buttons
 
 
-## 0.01 (Oct 15th 2023)
+## v0.01 (Oct 15th 2023)
 * First release. Not much working.

README.md

@@ -1,12 +1,12 @@
 # DweebUI
 
 
-DweebUI is a simple docker web interface created with Javascript and Node.js
+DweebUI is a simple Docker web interface created with javascript and node.js
 
-Pre-Pre-Pre-Pre-Pre Alpha v 0.02 ( :fire: Experimental. Don't install on any servers you care about :fire: )
+Pre-Pre-Pre-Pre-Pre Alpha v 0.03 ( :fire: Experimental. Don't install on any servers you care about :fire: )
 
-* I haven't used Github very much, and I'm still new to Javascript
-* This is the first project I've ever released, and I'm sure it's full of plenty of bugs and mistakes.
+* I haven't used Github very much and I'm still new to javascript
+* This is the first project I've ever released and I'm sure it's full of plenty of bugs and mistakes.
 * I probably should have waited a lot longer to share this :|
 
 Requirements: Fresh Install of Debian 12.2
@@ -19,8 +19,8 @@ Requirements: Fresh Install of Debian 12.2
 * Partial Portainer Template Support (Network Mode, Ports, Volumes, Enviroment Variables, Labels, Commands, Restart Policy, Nvidia Hardware Acceleration).
 * Light/Dark Mode.
 * Support for multiple users is built in (but unused).
-* Caddy Proxy Manager
-* Pure Javascript. No Typescript. No Frameworks.
+* Caddy Proxy Manager (very simple. proof of concept)
+* Pure javascript. No frameworks or typescript.
 * User data is stored in a sqlite database and uses browser sessions and a redis store for authentication.
 * Templates.json maintains compatability with Portainer, so you can use the template without needing to use DweebUI.
 

app.js

@@ -9,6 +9,9 @@ const { serverStats, containerList, containerStats, containerAction } = require(
 let sent_list, clicked;
 
 const redisClient = require('redis').createClient({
+    host:'localhost',
+    port:6379,
+    password:'somesupersecretpassword',
     legacyMode:true
 });
 redisClient.connect().catch(console.log);

components/dashCard.js

@@ -4,7 +4,7 @@ module.exports.dashCard = function dashCard(data) {
 
   //disable controls for a docker container depending on its name
   let enabled = "";
-  if (name.startsWith('dweeb')) {
+  if (name.startsWith('Dweeb')) {
     enabled = 'disabled=""';
   }
 

functions/system_information.js

@@ -77,7 +77,6 @@ module.exports.containerList = async function () {
         }
 
         let dockerCard = dashCard(container_info);
-
         card_list += dockerCard;
 
     }

public/js/main.js

@@ -31,24 +31,23 @@ socket.on('metrics', (data) => {
 
     cpuText.innerHTML = `<span>CPU ${cpu} %</span>`;
     cpuBar.innerHTML = `<span style="width: ${cpu}%"><span></span></span>`;
+
     ramText.innerHTML = `<span>RAM ${ram} %</span>`;
     ramBar.innerHTML = `<span style="width: ${ram}%"><span></span></span>`;
+
+    tx = Math.round(tx / 1024 / 1024);
+    rx = Math.round(rx / 1024 / 1024);
+
+    netText.innerHTML = `<span>Down: ${rx}MB</span><span>  Up: ${tx}MB</span>`;
+    netBar.innerHTML = `<span style="width: 50%"><span></span></span>`;
+
     diskText.innerHTML = `<span>DISK ${disk} %</span>`;
     diskBar.innerHTML = `<span style="width: ${disk}%"><span></span></span>`;
 });
 
 function drawCharts(name, cpu_array, ram_array) {
   var elements = document.querySelectorAll(`${name}`);
 
-  if (cpu_array == undefined) {
-    cpu_array = [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67];
-  }
-
-  if (ram_array == undefined) {
-    ram_array = [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37];
-  }
-
-
   Array.from(elements).forEach(function(element) {
     if (window.ApexCharts) {
       new ApexCharts(element, {
@@ -125,6 +124,17 @@ socket.on('cards', (data) => {
   });
 
   dockerCards.insertAdjacentHTML("afterend", data);
+
+  // check localStorage for items ending with _cpu and redraw the charts
+  for (let i = 0; i < localStorage.length; i++) {
+    if (localStorage.key(i).endsWith('_cpu')) {
+      let name = localStorage.key(i).split('_')[0];
+      let cpu_array = JSON.parse(localStorage.getItem(`${name}_cpu`));
+      let ram_array = JSON.parse(localStorage.getItem(`${name}_ram`));
+      drawCharts(`#${name}_chart`, cpu_array, ram_array);
+    }
+  }
+
 
 });
 
@@ -136,27 +146,23 @@ 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));
   localStorage.setItem(`${name}_ram`, JSON.stringify(ram_array));
 
-  // replace the old chart with the new one without breaking the surrounding elements
+  // replace the old chart with the new one
   let chart = document.getElementById(`${name}_chart`);
   let newChart = document.createElement('div');
   newChart.id = `${name}_chart`;

setup.sh

@@ -31,12 +31,16 @@ sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plug
 # Create docker network
 docker network create -d bridge AppBridge 
 
+# Create a redis docker container with persistent storage and a password
+docker run -d --name DweebCache --restart unless-stopped -v /home/docker/redis:/data -p 6379:6379 redis redis-server --requirepass "somesupersecretpassword"
+
+
 # Install redis
-curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
-echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
-apt-get update -y
-apt-get install -y redis
-systemctl enable --now redis-server
+# curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
+# echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
+# apt-get update -y
+# apt-get install -y redis
+# systemctl enable --now redis-server
 
 # Install nodejs
 mkdir -p /etc/apt/keyrings
@@ -46,10 +50,7 @@ echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.co
 sudo apt-get update
 sudo apt-get install nodejs -y
 
-
-# Install pnpm and nodejs modules
-npm install -g pnpm
-pnpm i
+npm i
 
 # Prep for caddy
 mkdir -p /home/docker/caddy/sites