Updated images, networks, and volumes pages.

app.js

@@ -76,7 +76,7 @@ app.use([
 ]);
 
 // Initialize server
-server.listen(port, () => {
+server.listen(port, async () => {
     async function init() {
         try {
             await sequelize.authenticate().then(() => { console.log('[Connected to DB]') });
@@ -88,11 +88,12 @@ server.listen(port, () => {
         } catch {
             console.log('[Could not Sync Models]', error);
         }
-        getHidden();
+        await getHidden();
         containerCards();
-        console.log(`\nServer listening on http://localhost:${port}`);
     }
-    init();
+    await init();
+    app.emit("appStarted");
+    console.log(`\nServer listening on http://localhost:${port}`);
 });
 
 // Server metrics

controllers/images.js

@@ -1,5 +1,4 @@
 import { docker } from '../app.js';
-import { dockerImages } from 'systeminformation';
 
 export const Images = async function(req, res) {
 

controllers/networks.js

@@ -3,11 +3,55 @@ import { docker } from '../app.js';
 
 export const Networks = async function(req, res) {
 
+    let networks = await docker.listNetworks({ all: true });
+    console.log(networks);
 
+    let network_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><button class="table-sort" data-sort="sort-name">Name</button></th>
+                <th><button class="table-sort" data-sort="sort-city">ID</button></th>
+                <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
+                <th><button class="table-sort" data-sort="sort-score">Status</button></th>
+                <th><button class="table-sort" data-sort="sort-date">Created</button></th>
+                <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
+                <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
+            </tr>
+        </thead>
+    <tbody class="table-tbody">`
+
+
+    // for (let i = 0; i < networks.length; i++) {
+
+    //     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="" 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-date" data-date="1628122643">${created}</td>
+    //             <td class="sort-quantity">${size} MB</td>
+    //             <td class="text-end"><a class="btn" href="#">Details</a></td>
+    //         </tr>`
+    //     image_list += details;
+    // }
+    
+    // image_list += `</tbody>`
+
+    
     res.render("networks", {
         name: req.session.user,
         role: req.session.role,
         avatar: req.session.avatar,
+        network_list: network_list,
+        network_count: networks.length
     });
 
 }

controllers/volumes.js

@@ -1,9 +1,58 @@
 import { docker } from '../app.js';
 
-export const Volumes = (req, res) => {
+
+export const Volumes = async function(req, res) {
+
+    let volumes = await docker.listVolumes();
+    console.log(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><button class="table-sort" data-sort="sort-name">Name</button></th>
+            <th><button class="table-sort" data-sort="sort-city">ID</button></th>
+            <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
+            <th><button class="table-sort" data-sort="sort-score">Status</button></th>
+            <th><button class="table-sort" data-sort="sort-date">Created</button></th>
+            <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
+            <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
+        </tr>
+    </thead>
+    <tbody class="table-tbody">`
+
+
+    // for (let i = 0; i < images.length; i++) {
+
+    //     let date = new Date(images[i].Created * 1000);
+    //     let created = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+
+    //     let size = images[i].Size / 1000 / 1000; // to match docker desktop
+    //     size = size.toFixed(2);
+
+    //     let details = `
+    //         <tr>
+    //             <td><input class="form-check-input m-0 align-middle" name="select" value="" 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-date" data-date="1628122643">${created}</td>
+    //             <td class="sort-quantity">${size} MB</td>
+    //             <td class="text-end"><a class="btn" href="#">Details</a></td>
+    //         </tr>`
+    //     image_list += details;
+    // }
+    
+    // image_list += `</tbody>`
+
+    
     res.render("volumes", {
         name: req.session.user,
         role: req.session.role,
         avatar: req.session.avatar,
+        volume_list: volumes_list,
+        volume_count: volumes.length
     });
+
 }

views/images.ejs

@@ -36,11 +36,11 @@
                       <div class="card-options btn-list">                  
                           <a href="/refreshsites" 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>
-                          Scan
+                          Refresh
                           </a>
                           <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#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>
-                          Add Image
+                          New Image
                           </a>
                       </div>
                   </div>

views/networks.ejs

@@ -36,11 +36,11 @@
                       <div class="card-options btn-list">                  
                           <a href="/refreshsites" 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>
-                          Scan
+                          Refresh
                           </a>
                           <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#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>
-                          Create Network
+                          New Network
                           </a>
                       </div>
                   </div>
@@ -109,47 +109,9 @@
 
                   <div id="table-default" class="table-responsive">
                     <table class="table">
-                      <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><button class="table-sort" data-sort="sort-name">Name</button></th>
-                          <th><button class="table-sort" data-sort="sort-city">ID</button></th>
-                          <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
-                          <th><button class="table-sort" data-sort="sort-score">Status</button></th>
-                          <th><button class="table-sort" data-sort="sort-date">Created</button></th>
-                          <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
-                          <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
-                        </tr>
-                      </thead>
-                      <tbody class="table-tbody"><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">Caddy</td>
-                          <td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-green">In use</td>
-                          <td class="sort-date" data-date="1628122643">August 05, 2021</td>
-                          <td class="sort-quantity">69.27 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">clamav/clamav</td>
-                          <td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-green">In use</td>
-                          <td class="sort-date" data-date="1546344668">January 01, 2019</td>
-                          <td class="sort-quantity">546.22 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">linuxserver/code-server</td>
-                          <td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-yellow">Unused</td>
-                          <td class="sort-date" data-date="1545977105">December 28, 2018</td>
-                          <td class="sort-quantity">63.91 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr>
-                      </tbody>
+                      
+                      <%- network_list %>
+
                     </table>
                   </div>
 
@@ -172,7 +134,7 @@
 
                   </form>
                                         
-                    <p class="m-0 text-muted ms-auto">3 Images</p>
+                    <p class="m-0 text-muted ms-auto"><%- network_count %> Networks</p>
 
                   </div>
                 </div>

views/volumes.ejs

@@ -36,11 +36,11 @@
                       <div class="card-options btn-list">                  
                           <a href="/refreshsites" 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>
-                          Scan
+                          Refresh
                           </a>
                           <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#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>
-                          Create Volume
+                          New Volume
                           </a>
                       </div>
                   </div>
@@ -109,47 +109,9 @@
 
                   <div id="table-default" class="table-responsive">
                     <table class="table">
-                      <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><button class="table-sort" data-sort="sort-name">Name</button></th>
-                          <th><button class="table-sort" data-sort="sort-city">ID</button></th>
-                          <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
-                          <th><button class="table-sort" data-sort="sort-score">Status</button></th>
-                          <th><button class="table-sort" data-sort="sort-date">Created</button></th>
-                          <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
-                          <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
-                        </tr>
-                      </thead>
-                      <tbody class="table-tbody"><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">Caddy</td>
-                          <td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-green">In use</td>
-                          <td class="sort-date" data-date="1628122643">August 05, 2021</td>
-                          <td class="sort-quantity">69.27 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">clamav/clamav</td>
-                          <td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-green">In use</td>
-                          <td class="sort-date" data-date="1546344668">January 01, 2019</td>
-                          <td class="sort-quantity">546.22 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">linuxserver/code-server</td>
-                          <td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-yellow">Unused</td>
-                          <td class="sort-date" data-date="1545977105">December 28, 2018</td>
-                          <td class="sort-quantity">63.91 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr>
-                      </tbody>
+                      
+                      <%- volume_list %>
+
                     </table>
                   </div>
 
@@ -172,7 +134,7 @@
 
                   </form>
                                         
-                    <p class="m-0 text-muted ms-auto">3 Images</p>
+                    <p class="m-0 text-muted ms-auto"><%- volume_count %> Volumes</p>
 
                   </div>
                 </div>