v0.03

* Container graphs now load instantly
* Working net indicator
* Redis now installed as docker container

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,8 +31,16 @@ 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>`;
 });
@@ -40,15 +48,6 @@ socket.on('metrics', (data) => {
 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

views/pages/dashboard.ejs

@@ -89,7 +89,7 @@
                           </div>
                           <div class="col">
                             <div class="font-weight-medium">
-                              <label id="net-text" class="net-text mb-1" for="network">NET</label>
+                              <label id="net-text" class="net-text mb-1" for="network">Down: 0MB  Up: 0MB</label>
                             </div>
                             <div id="net-bar" class="meter animate blue">
                               <span style="width: 25%"><span></span></span>

views/partials/footer.ejs

@@ -24,7 +24,7 @@
           </li>
           <li class="list-inline-item">
             <a href="#" class="link-secondary" rel="noopener">
-              v0.01
+              v0.03
             </a>
           </li>
         </ul>