v0.4.0

lxconsole/templates/access-controls.html

@@ -139,14 +139,6 @@
         }
       })
 
-      // //Populate the Server dropdown in the modal
-      // $.getJSON("../api/servers/list_servers", function (data) {
-      //   data = data.data
-      //   for (var index = 0; index < data.length; index++) {
-      //     $('#serverInput').append('<option value="' + data[index].id + '">' + data[index].name + '</option>');
-      //   }
-      // })
-
       //Populate the Role dropdown in the modal
       $.getJSON("../api/roles/list_roles", function (data) {
         data = data.data

lxconsole/templates/certificates.html

@@ -65,33 +65,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       // Configure Datatable
       $('#myDataTable').DataTable({
         ajax: {

lxconsole/templates/cluster-groups.html

@@ -65,33 +65,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       // Configure Datatable
       $('#myDataTable').DataTable({
         ajax: {

lxconsole/templates/cluster-members.html

@@ -67,32 +67,9 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
 
       // Configure Datatable
       $('#myDataTable').DataTable({

lxconsole/templates/images.html

@@ -65,33 +65,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       // Configure Datatable
       $('#myDataTable').DataTable({
         ajax: {

lxconsole/templates/instance.html

@@ -679,34 +679,10 @@
 
     function loadPageContent(){
       
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId){
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          }
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       //Load Instance Data and Configuration
       loadInstanceData()
 

lxconsole/templates/instances.html

@@ -96,33 +96,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       //Populate the modal Profile dropdown
       $.getJSON("../api/profiles/list_profiles?id="+serverId+"&project="+project, function (data) {
         data = data.metadata

lxconsole/templates/main.html

@@ -99,6 +99,39 @@
         });
       }
 
+      function populateServerSelectDropdown() {
+        //Populate the Server dropdown
+        $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
+          data = data.data
+          for (var index = 0; index < data.length; index++) {
+            if (data[index].name == '')
+              optionText = data[index].addr
+            else
+              optionText = data[index].name + ' (' + data[index].addr + ')'
+            if (data[index].id == serverId)
+              $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
+            else
+              $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
+          }
+        })
+      }
+
+      function populateProjectSelectDropdown() {
+        //Populate the Project dropdown
+        $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
+          data = data.metadata
+          for (var index = 0; index < data.length; index++) {
+            optionText = data[index].replace('/1.0/projects/','');
+            if (optionText == project)
+              $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
+            else
+              $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
+          }
+        })
+      }
+
+
+
       function updateAccount(){
         $.post("../api/users/update_user", {
           id: "{{ page_user_id }}",

lxconsole/templates/navbar.html

@@ -20,7 +20,7 @@
       </li>
       <li id="serverNavbarSelect" class="nav-item" style="display: none;">
         <div class="input-group">
-          <select class="form-select" id="serverListNav" style="width:150px;" onchange="changeServer(this.value)">
+          <select class="form-select" id="serverListNav" style="width:200px;" onchange="changeServer(this.value)">
           </select>
         </div>
       </li>

lxconsole/templates/network-acl.html

@@ -103,33 +103,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       //Get data using jquery call datatable within function, set data: data.ingress for one table and data.exgress for the other
       $('#myDataTable').DataTable({
         ajax: {

lxconsole/templates/network-acls.html

@@ -65,33 +65,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       // Configure Datatable
       $('#myDataTable').DataTable({
         ajax: {

lxconsole/templates/network-zones.html

@@ -65,33 +65,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       // Configure Datatable
       $('#myDataTable').DataTable({
         ajax: {

lxconsole/templates/network.html

@@ -263,34 +263,10 @@
 
     function loadPageContent(){
       
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId){
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          }
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       //Load Network State
       loadNetworkState()
 

lxconsole/templates/networks.html

@@ -65,33 +65,10 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
-
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+      
       // Configure Datatable
       $('#myDataTable').DataTable({
         ajax: {

lxconsole/templates/operations.html

@@ -61,32 +61,9 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
 
       // Configure Datatable
       $('#myDataTable').DataTable({

lxconsole/templates/profiles.html

@@ -65,32 +65,9 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
 
       // Configure Datatable
       $('#myDataTable').DataTable({

lxconsole/templates/projects.html

@@ -65,32 +65,9 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId+"&project="+project, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
 
       // Configure Datatable
       $('#myDataTable').DataTable({

lxconsole/templates/server.html

@@ -244,7 +244,7 @@
 {% block script %}
   
   <script>
-    var reloadTime = 10000;
+    var reloadTime = 20000;
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     const serverId = urlParams.get('id');
@@ -270,8 +270,18 @@
       //Clear the automatic page reload
       clearTimeout(pageReloadTimeout);
 
-      //Reload the datatables content
-      $('#myDataTable').DataTable().ajax.reload(null, false);
+      //Reload various cards
+      loadLxdInformation()
+      loadResourceInformation()
+      loadContainersInformation()
+      loadVirtualMachinesInformation()
+      loadClusterMembersInformation()
+      loadImagesInformation()
+      loadProfilesInformation()
+      loadNetworksInformation()
+      loadStoragePoolsInformation()
+      loadNetworkAclsInformation()
+      loadProjectsInformation()
 
       //Set the automatic page reload
       pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);
@@ -281,37 +291,40 @@
       applySidebarStyles();
       applySidebarLinks();
 
-      //Display the current project
-      $("#selectedProject").text(project);
-
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
+
+      //Populate various cards
+      loadLxdInformation()
+      loadResourceInformation()
+      loadContainersInformation()
+      loadVirtualMachinesInformation()
+      loadClusterMembersInformation()
+      loadImagesInformation()
+      loadProfilesInformation()
+      loadNetworksInformation()
+      loadStoragePoolsInformation()
+      loadNetworkAclsInformation()
+      loadProjectsInformation()
 
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        $("#totalProjects").text(data.length);
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Set hyperlink references for cards
+      $("#containersLink").attr("href", "instances?id="+serverId+"&project="+project)
+      $("#virtualMachinesLink").attr("href", "instances?id="+serverId+"&project="+project+"#virtual-machines")
+      $("#clusterMembersLink").attr("href", "cluster-members?id="+serverId+"&project="+project)
+      $("#imagesLink").attr("href", "images?id="+serverId+"&project="+project)
+      $("#profilesLink").attr("href", "profiles?id="+serverId+"&project="+project)
+      $("#networksLink").attr("href", "networks?id="+serverId+"&project="+project)
+      $("#storagePoolsLink").attr("href", "storage-pools?id="+serverId+"&project="+project)
+      $("#projectsLink").attr("href", "projects?id="+serverId+"&project="+project)
+      $("#networkAclsLink").attr("href", "network-acls?id="+serverId+"&project="+project)
 
+      //Set reload page content
+      pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);
+
+    }
+
+    function loadLxdInformation() {
       //LXD Info
       $.getJSON("../api/server/get_server_info?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
         data = data.metadata.environment;
@@ -333,7 +346,9 @@
         });
 
       });
+    }
 
+    function loadResourceInformation() {
       //Resource Info
       $.getJSON("../api/server/get_server_resources?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
         data = data.metadata;
@@ -401,7 +416,9 @@
         });
 
       });
+    }
 
+    function loadContainersInformation(){
       //Load Containers Info
       $.getJSON("../api/instances/list_instances?id="+encodeURI(serverId)+'&project='+encodeURI(project)+'&filter=container'+'&recursion=1', function (data) {
         data = data.metadata;
@@ -427,7 +444,9 @@
         $("#containerPercentage").text(containerPercentage + '% of containers are running')
         
       });
+    }
 
+    function loadVirtualMachinesInformation(){
       // Load Virtual Machine Info
       $.getJSON("../api/instances/list_instances?id="+encodeURI(serverId)+'&project='+encodeURI(project)+'&filter=virtual-machine'+'&recursion=1', function (data) {
         data = data.metadata;
@@ -453,8 +472,10 @@
         $("#virtualMachinePercentage").text(virtualMachinePercentage + '% of virtual machines are running')
 
       });
+    }
 
-      //Load Cluster Memebers Info
+    function loadClusterMembersInformation() {
+      //Load Cluster Members Info
       $.getJSON("../api/cluster-members/list_cluster_members?id="+encodeURI(serverId)+'&project='+encodeURI(project)+'&recursion=1', function (data) {
         data = data.metadata;
 
@@ -483,52 +504,56 @@
 
         $("#clusterPercentage").text(clusterPercentage + '% of cluster members are online')
       });
+    }
 
+    function loadImagesInformation() {
       //Load Images Info
       $.getJSON("../api/images/list_images?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
         data = data.metadata
         $("#totalImages").text(data.length);
       });
+    }
 
+    function loadProfilesInformation() {
       //Load Profiles Info
       $.getJSON("../api/profiles/list_profiles?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
         data = data.metadata
         $("#totalProfiles").text(data.length);
       });
+    }
 
+    function loadNetworksInformation(){
       //Load Network Info
       $.getJSON("../api/networks/list_networks?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
         data = data.metadata
         $("#totalNetworks").text(data.length);
       });
+    }
 
+    function loadStoragePoolsInformation(){
       //Load Storage Pools Info
       $.getJSON("../api/storage-pools/list_storage_pools?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
         data = data.metadata
         $("#totalStoragePools").text(data.length);
       });
+    }
 
+    function loadNetworkAclsInformation() {
       //Load Network ACLs Info
       $.getJSON("../api/network-acls/list_network_acls?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
         data = data.metadata
         $("#totalNetworkAcls").text(data.length);
       });
+    }
 
-      //Set hyperlink references for cards
-      $("#containersLink").attr("href", "instances?id="+serverId+"&project="+project)
-      $("#virtualMachinesLink").attr("href", "instances?id="+serverId+"&project="+project+"#virtual-machines")
-      $("#clusterMembersLink").attr("href", "cluster-members?id="+serverId+"&project="+project)
-      $("#imagesLink").attr("href", "images?id="+serverId+"&project="+project)
-      $("#profilesLink").attr("href", "profiles?id="+serverId+"&project="+project)
-      $("#networksLink").attr("href", "networks?id="+serverId+"&project="+project)
-      $("#storagePoolsLink").attr("href", "storage-pools?id="+serverId+"&project="+project)
-      $("#projectsLink").attr("href", "projects?id="+serverId+"&project="+project)
-      $("#networkAclsLink").attr("href", "network-acls?id="+serverId+"&project="+project)
-
-      //Set reload page content
-      pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);
-
+    function loadProjectsInformation() {
+      //Populate the Project dropdown
+      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
+        data = data.metadata
+        $("#totalProjects").text(data.length);
+      })
     }
+    
 
     $(document).ready(function(){
 

lxconsole/templates/simplestreams.html

@@ -64,32 +64,9 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
 
       // Configure Datatable
       $('#myDataTable').DataTable({

lxconsole/templates/storage-pools.html

@@ -65,32 +65,9 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
 
       // Configure Datatable
       $('#myDataTable').DataTable({

lxconsole/templates/storage-volumes.html

@@ -73,32 +73,9 @@
       //Display the current project
       $("#selectedProject").text(project);
 
-      //Populate the Server dropdown
-      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
-        data = data.data
-        for (var index = 0; index < data.length; index++) {
-          if (data[index].name == '')
-            optionText = data[index].addr
-          else
-            optionText = data[index].name
-          if (data[index].id == serverId)
-            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
-        }
-      })
-
-      //Populate the Project dropdown
-      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
-        data = data.metadata
-        for (var index = 0; index < data.length; index++) {
-          optionText = data[index].replace('/1.0/projects/','');
-          if (optionText == project)
-            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
-          else
-            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
-        }
-      })
+      //Loaded from main.html template
+      populateServerSelectDropdown()
+      populateProjectSelectDropdown()
 
       // Configure Datatable
       $('#myDataTable').DataTable({