v0.1.0

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 0.1.0
+- Corrected image unit size, changing GiB to MiB
+- Added option filter for storage volumes by adding filter=custom to URL
+- Changed the image catalog for adding images to a dynamic list generated from https://images.linuxcontainers.org
+
 # v0.0.2
 - Fix for reloading/loading of page content bug in network-acl page
 

lxconsole/api/access_controls.py

@@ -104,6 +104,7 @@ def privilege_check(privilege, server_id = 0):
       'list_profiles',
       'list_projects',
       'list_roles',
+      'list_simplestream_images',
       'list_simplestreams',
       'list_storage_pools',
       'list_storage_volumes',
@@ -239,6 +240,7 @@ def privilege_check(privilege, server_id = 0):
       'list_profiles',
       'list_projects',
       'list_roles',
+      'list_simplestream_images',
       'list_simplestreams',
       'list_storage_pools',
       'list_storage_volumes',
@@ -374,6 +376,7 @@ def privilege_check(privilege, server_id = 0):
       'list_profiles',
       'list_projects',
       'list_roles',
+      'list_simplestream_images',
       'list_simplestreams',
       'list_storage_pools',
       'list_storage_volumes',
@@ -509,6 +512,7 @@ def privilege_check(privilege, server_id = 0):
       'list_profiles',
       'list_projects',
       'list_roles',
+      'list_simplestream_images',
       'list_simplestreams',
       'list_storage_pools',
       'list_storage_volumes',

lxconsole/api/images.py

@@ -27,6 +27,16 @@ def api_images_endpoint(endpoint):
     client_cert = get_client_crt()
     client_key = get_client_key()
 
+    image = request.form.get('image')
+
+    # When using the manual form, the version and variant are included in the image string
+    if request.form.get('image_version'):
+      if request.form.get('image_variant'):
+        image = request.form.get('image') + '/' + request.form.get('image_version') + '/' + request.form.get('image_variant')
+      else :
+        image = request.form.get('image') + '/' + request.form.get('image_version')
+        
+
     data = {}
     source = {}
     source.update({'type': 'image'})
@@ -40,7 +50,7 @@ def api_images_endpoint(endpoint):
       source.update({'allow_inconsistent': 'false'})
     else:
       source.update({'server': request.form.get('repo')})
-    source.update({'alias': request.form.get('image')})
+    source.update({'alias': image })
     source.update({'image_type': request.form.get('image_type')})
 
     data.update({'source': source})
@@ -60,6 +70,23 @@ def api_images_endpoint(endpoint):
     results = requests.delete(url, verify=server.ssl_verify, cert=(client_cert, client_key))
     return jsonify(results.json())
 
+  if endpoint == 'list_simplestream_images':
+    id = request.args.get('id')
+    project = request.args.get('project')
+    server = Server.query.filter_by(id=id).first()
+    url = 'https://images.linuxcontainers.org/streams/v1/index.json'
+    client_cert = get_client_crt()
+    client_key = get_client_key()
+    results = requests.get(url, verify=True, cert=(client_cert, client_key))
+    images = []
+    image_results = json.dumps(results.json())
+    image_results = json.loads(image_results)
+    if 'index' in image_results.keys():
+      if 'images' in image_results['index'].keys():
+        if 'products' in image_results['index']['images'].keys():
+          images = image_results['index']['images']['products']
+    return jsonify(images)
+
 
   if endpoint == 'list_images':
     id = request.args.get('id')

lxconsole/templates/images.html

@@ -150,7 +150,7 @@
                 if (row.size) {
                   if (type === 'display'){
                     size = row.size / 1024 / 1024
-                    return size.toFixed(2) + ' GiB'
+                    return size.toFixed(2) + ' MiB'
                   }
                   return row.size
                 }
@@ -186,6 +186,9 @@
         }
       })
 
+      //Populate the image catalog choices
+      updateCatalog()
+
       //Set reload page content
       pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);
 
@@ -263,11 +266,14 @@
       });
     }
 
-    function addCatalogImage(imageType, image, repo){
-      if (repo == 'ubuntu') { repo = 'https://cloud-images.ubuntu.com/releases'}
-      if (repo == 'images') { repo = 'https://images.linuxcontainers.org'}
+    function addCatalogImage(){
+      image = $("#operatingSystem").val();
+      repo = 'https://images.linuxcontainers.org'
+      imageVersion = $("#operatingSystemVersion").val();
+      imageVariant = $("#operatingSystemVariant").val();
+      imageType = $("#operatingSystemType").val();
       console.log("Info: downloading image " + image + " from " + repo);
-      $.post("../api/images/add_image?id="+serverId+"&project="+project, { image: image, repo: repo, image_type: imageType },  function (data) {
+      $.post("../api/images/add_image?id="+serverId+"&project="+project, { image: image, repo: repo, image_version: imageVersion, image_variant: imageVariant, image_type: imageType },  function (data) {
         console.log(data);
         if (data.error_code >= 400){
           alert(data.error);
@@ -278,6 +284,97 @@
       });
     }
 
+    function updateCatalog(){
+      catalog_images = {}
+      // Check if session variable catalog_images is not yet set
+      if (sessionStorage.getItem("catalog_images") === null) {
+        console.log("Info: updating catalog images");
+        $.get("../api/images/list_simplestream_images",  function (data) {
+          //Clear operating system select options in modal
+          $("#operatingSystem").empty();
+          //Loop through each operating system item
+          for (i = 0; i < data.length; i++) {
+            // Split the string by semicolon. Ex: "almalinux:8:amd64:cloud"
+            image = data[i].split(':')
+            //Check that operating system is not already in catalog_images object
+            if (!(image[0] in catalog_images)){
+              catalog_images[image[0]] = { "versions": [ image[1] ], "variants": [image[3]] }
+              $('#operatingSystem').append('<option value="' + image[0] + '">' + image[0] + '</option>');
+            }
+            //Populate OS versions
+            if (!(catalog_images[image[0]]['versions'].includes(image[1]))){
+              catalog_images[image[0]]['versions'].push(image[1])
+            }
+            //Populate OS variants
+            if (!(catalog_images[image[0]]['variants'].includes(image[3]))){
+              catalog_images[image[0]]['variants'].push(image[3])
+            }
+          }
+          //Check if we populated any operating systems and store them in session storage
+          if (Object.keys(catalog_images).length > 0) {
+            sessionStorage.setItem('catalog_images', JSON.stringify(catalog_images))
+          }
+  
+          //Update the OS version options based on selected OS
+          updateOSVersion()
+
+        });
+      }
+      else {
+        //Set catalog_images from session storage
+        catalog_images = JSON.parse(sessionStorage.getItem('catalog_images'))
+        //Double check to make sure there are actually operating systems as keys
+        if (Object.keys(catalog_images).length > 0) {
+          //Clear operating system select options in modal
+          $("#operatingSystem").empty();
+        
+          //Loop through each operating system to populate operating system select options
+          for (var catalog_image in catalog_images){
+            $('#operatingSystem').append('<option value="' + catalog_image + '">' + catalog_image + '</option>');
+          }
+
+          //Update the OS version options based on selected OS
+          updateOSVersion()
+        }
+      }
+    }
+
+    function updateOSVersion(){
+      catalog_images = {}
+      if (sessionStorage.getItem("catalog_images") != null) {
+        catalog_images = JSON.parse(sessionStorage.getItem('catalog_images'))
+        if (Object.keys(catalog_images).length > 0) {
+          $("#operatingSystemVersion").empty();
+          os = $("#operatingSystem option:selected").text();
+          for (let i = 0; i < catalog_images[os]['versions'].length; i++) {
+            $('#operatingSystemVersion').append('<option value="' + catalog_images[os]['versions'][i] + '">' + catalog_images[os]['versions'][i] + '</option>');
+          }
+        }
+      }
+      //Update the OS Variant
+      updateOSVariant()
+    }
+
+    function updateOSVariant(){
+      catalog_images = {}
+      if (sessionStorage.getItem("catalog_images") != null) {
+        catalog_images = JSON.parse(sessionStorage.getItem('catalog_images'))
+        if (Object.keys(catalog_images).length > 0) {
+          $("#operatingSystemVariant").empty();
+          os = $("#operatingSystem option:selected").text();
+          for (let i = 0; i < catalog_images[os]['variants'].length; i++) {
+            if (catalog_images[os]['variants'][i] == 'default') {
+              $('#operatingSystemVariant').append('<option value="' + catalog_images[os]['variants'][i] + '" selected>' + catalog_images[os]['variants'][i] + '</option>');
+            }
+            else {
+              $('#operatingSystemVariant').append('<option value="' + catalog_images[os]['variants'][i] + '">' + catalog_images[os]['variants'][i] + '</option>');
+            }
+          }
+        }
+      }
+    }
+
+
     $(document).ready(function(){
 
       //If id or project variables are missing redirect to servers page

lxconsole/templates/main.html

@@ -40,7 +40,7 @@
 
       <footer class="main-footer">
         <div class="float-right d-none d-sm-block">
-          Version 0.0.2
+          Version 0.1.0
         </div>
         Copyright &copy; 2020-Present <a href="https://penninglabs.com">Penning Labs</a>. All rights reserved.
       </footer>

lxconsole/templates/modals/images.html

@@ -1,6 +1,6 @@
   <!-- Add Modal-->
   <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl" role="document">
+    <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">Download Image</h5>
@@ -19,520 +19,74 @@
           </ul>
           <div class="tab-content" id="myTabContent">
             <div class="tab-pane fade show active" id="catalog" role="tabpanel" aria-labelledby="catelog-tab">
-              <div class="row mt-4">
-
-                <!--Ubuntu 22.04 Official Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Ubuntu</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          OFFICAL</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/ubuntu.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">22.04</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">22.04</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">ubuntu</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','22.04','ubuntu')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','22.04','ubuntu')">Virtual Machine</a>
-                        </div>
-                      </div> 
-                    </div>
-                  </div>
-                </div>
-                <!--End Ubuntu 22.04 Download-->
-
-                <!--CentOS 9 Stream Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Centos</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/centos.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">9 Stream</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">centos/9-Stream</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','centos/9-Stream','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','centos/9-Stream','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!--End CentOS 9 Stream Download-->
-
-                <!--Debian Bullseye Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Debian</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/debian.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">Bullseye</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">debian/bullseye</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','debian/bullseye','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','debian/bullseye','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!--End Debian Bullseye Download-->
-
-                <!--OpenSUSE 15.4 Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">OpenSUSE</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/opensuse.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">15.4</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">opensuse/15.4</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','opensuse/15.4','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','opensuse/15.4','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!--End openSUSE 15.4 Download-->
-
-                <!--Alpine Linux 3.16 Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Alpine Linux</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/alpine.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">3.16</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">alpine/3.16</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','alpine/3.16','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','alpine/3.16','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!--End Alpine 3.16 Linux Download-->
 
-                <!--Arch Linux Current Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Arch Linux</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/archlinux.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">Current</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">archlinux/current</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','archlinux/current','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','archlinux/current','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
+              <div class="row mt-4">
+                <label class="col-3 col-form-label text-right">Operating System: </label>
+                <div class="col-7">
+                  <div class="form-group">
+                    <select id="operatingSystem" onchange="updateOSVersion()" class="form-control" name="operating_system">
+                      <option value="">unavailable</option>
+                    </select>
                   </div>
                 </div>
-                <!--End Arch Linux Download-->
-
-                <!--CentOS 7 Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Centos</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/centos.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">7</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">centos/7</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','centos/7','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','centos/7','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                <div class="col-1">
+                  <i class="far fa-sm fa-question-circle" title='Select the operating system.'></i>
                 </div>
-                <!--End CentOS 7 Download-->
+              </div>
 
-                <!--CentOS 8 Stream Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Centos</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/centos.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">8 Stream</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">centos/8-Stream</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','centos/8-Stream','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','centos/8-Stream','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
+              <div class="row">
+                <label class="col-3 col-form-label text-right">OS Version: </label>
+                <div class="col-7">
+                  <div class="form-group">
+                    <select id="operatingSystemVersion" onchange="" class="form-control" name="version">
+                      <option value="">unavailable</option>
+                    </select>
                   </div>
                 </div>
-                <!--End CentOS 8 Stream Download-->
-
-                <!--Kali Current Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Kali</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/kali.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">Current</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">kali/current</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','kali/current','images')">Container</a>
-                          <!-- <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','kali/current','images')">Virtual Machine</a> -->
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                <div class="col-1">
+                  <i class="far fa-sm fa-question-circle" title='Select the operating system version.'></i>
                 </div>
-                <!--End Kali Download-->
+              </div>
 
-                <!--OpenSUSE Tumbleweed Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">OpenSUSE</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/opensuse.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">Tumbleweed</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="" style="font-size: .99rem;">opensuse/tumbleweed</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','opensuse/tumbleweed','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','opensuse/tumbleweed','images')">Virtual Machine</a>
-                        </div>
-                      </div>
-                    </div>
+              <div class="row">
+                <label class="col-3 col-form-label text-right">Image Variant: </label>
+                <div class="col-7">
+                  <div class="form-group">
+                    <select id="operatingSystemVariant" onchange="" class="form-control" name="variant">
+                      <option value="">unavailable</option>
+                    </select>
                   </div>
                 </div>
-                <!--End openSUSE Tumbleweed Download-->
-
-                <!--OpenWrt 22.03 Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">OpenWrt</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/openwrt.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">22.03</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="" style="font-size: .99rem;">openwrt/22.03</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','openwrt/22.03','images')">Container</a>
-                          <!-- <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','openwrt/22.03','images')">Virtual Machine</a> -->
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                <div class="col-1">
+                  <i class="far fa-sm fa-question-circle" title='Select the image variant such as default or cloud. Default: default'></i>
                 </div>
-                <!--End OpenWrt 22.03 Download-->
+              </div>
 
-                <!--Ubuntu 20.04 Official Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Ubuntu</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          OFFICAL</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/ubuntu.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">20.04</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">20.04</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">ubuntu</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','20.04','ubuntu')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','20.04','ubuntu')">Virtual Machine</a>
-                        </div>
-                      </div> 
-                    </div>
+              <div class="row">
+                <label class="col-3 col-form-label text-right">Image Type: </label>
+                <div class="col-7">
+                  <div class="form-group">
+                    <select id="operatingSystemType" onchange="" class="form-control" name="type">
+                      <option value="container">container</option>
+                      <option value="virtual-machine">virtual-machine</option>
+                    </select>
                   </div>
                 </div>
-                <!--End Ubuntu 20.04 Download-->
-
-                <!--Ubuntu 22.10 Download-->
-                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-3 mb-4">
-                  <div class="card shadow">
-                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
-                      <h6 class="m-0 font-weight-bold text-primary">Ubuntu</h6>
-                      <div class="dropdown no-arrow">
-                        <button class="btn btn-outline-success btn-xs" href="#" onclick="" title="" aria-hidden="true">
-                          COMMUNITY</button>
-                      </div>
-                    </div>
-                    <!-- Card Body -->
-                    <div class="card-body pb-0">
-                      <div class="row">
-                        <div class="col-4">
-                          <img class="mb-2" src="../static/assets/img/operatingsystems/ubuntu.png" style="width: 65px; height: 65px;"><br>
-                        </div>
-                        <div class="col-8 text-center mt-3">
-                          <span class="h5">22.10</span>
-                        </div>
-                      </div>
-                      
-                      <span class="font-weight-bold">Image</span>: <span class="">ubuntu/kinetic</span> <br />
-                      <span class="font-weight-bold">Repository</span>: <span class="">images</span>
-                    </div>
-                    <div class="card-footer bg-transparent border-0 text-right">
-                      <div class="dropdown">
-                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Download
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('container','ubuntu/kinetic','images')">Container</a>
-                          <a class="dropdown-item" href="#" data-dismiss="modal" onclick="addCatalogImage('virtual-machine','ubuntu/kinetic','images')">Virtual Machine</a>
-                        </div>
-                      </div> 
-                    </div>
-                  </div>
+                <div class="col-1">
+                  <i class="far fa-sm fa-question-circle" title='Select the type of image such as container of virtual-machine.'></i>
                 </div>
-                <!--End Ubuntu 22.10 Download-->
+              </div>
 
+              <div class="modal-footer">
+                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                <a class="btn btn-primary" href="#" onclick="addCatalogImage()" data-dismiss="modal">Ok</a>
               </div>
+
             </div>
             <div class="tab-pane fade" id="form" role="tabpanel" aria-labelledby="form-tab">
               <form id="addForm">
                 <div class="row mt-4">
+
                   <label class="col-2 col-form-label text-right">Image/Alias: <span class="text-danger">*</span></label>
                   <div class="col-8">
                     <div class="form-group">
@@ -543,7 +97,7 @@
                     <i class="far fa-sm fa-question-circle" data-toggle="tooltip" data-html="true" title='(Required) - Enter in the repository specific name. For example, ubuntu/20.04 would be used for the images repository and simply 20.04 would be used for the ubuntu repositories.'></i>
                   </div>
     
-                  <label class="col-2 col-form-label text-right">Repository: <span class="text-danger">*</span></label>
+                  <label class="col-2 col-form-label text-right">Repository: </label>
                   <div class="col-8">
                     <div class="form-group">
                       <select id="selectRepoInput" class="form-control" name="simplestreams_id">
@@ -551,7 +105,7 @@
                     </div>
                   </div>
                   <div class="col-1">
-                    <i class="far fa-sm fa-question-circle" title='(Required) - Select a repository from the configured simplestreams.'></i>
+                    <i class="far fa-sm fa-question-circle" title='Select a repository from the configured simplestreams.'></i>
                   </div>
     
                   <label class="col-2 col-form-label text-right">Image Type:</label>
@@ -566,19 +120,18 @@
                   <div class="col-1">
                     <i class="far fa-sm fa-question-circle" title='Select whether to download a container based image or virtual machine. Default: container'></i>
                   </div>
+
                 </div>
               </form>            
-
               <div class="modal-footer">
                 <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                 <a class="btn btn-primary" href="#" onclick="addItem()" data-dismiss="modal">Ok</a>
               </div>
-
             </div>
           </div>
         </div>
-        <div class="modal-footer">
-          <a href="#" data-toggle="modal" data-target="#trademarkNotices" title="Download Image" aria-hidden="true">Trademark notices</a>
+        <div class="modal-footer text-center">
+          <!--<a href="#" data-toggle="modal" data-target="#trademarkNotices" title="Download Image" aria-hidden="true">Trademark notices</a>-->
         </div>
       </div>
     </div>
@@ -613,40 +166,3 @@
       </div>
     </div>
   </div>
-
-  <!-- Trademark Notices Modal-->
-  <div class="modal fade" id="trademarkNotices" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Trademark Notices</h5>
-          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">×</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="row">
-            <div class="col-12">
-              <div>
-                The LXD Dashboard has made all efforts to keep within trademark usage guidlines when using the logos and names of Linux operating systems. Resources for acceptable use guidlines are provided below. The LXD Dashboard is not affliated with any of the Linux operating systems.
-                <ul>
-                  <li>Alpine is a trademark of Alpine Linux Development Team. Information on Alpine Linux trademark guidelines can be found here <a href="https://alpinelinux.org/" target="_blank">https://alpinelinux.org/</a></li>
-                  <li>Arch Linux is a registered trademark of Aaron Griffin and Judd Vinet, on behalf of Arch Linux. Information on Arch Linux trademark guidelines can be found here <a href="https://wiki.archlinux.org/title/DeveloperWiki:TrademarkPolicy" target="_blank">https://wiki.archlinux.org/title/DeveloperWiki:TrademarkPolicy</a></li>
-                  <li>CentOS is a trademarks of Red Hat, Inc. (“Red Hat”). Information on CentOS Linux trademark guidelines can be found here <a href="https://www.centos.org/legal/trademarks/" target="_blank">https://www.centos.org/legal/trademarks/</a></li>
-                  <li>Debian is a registered trademark owned by Software in the Public Interest, Inc. Information on Debian Linux trademark guidelines can be found here <a href="https://www.debian.org/trademark" target="_blank">https://www.debian.org/trademark</a></li>
-                  <li>Gentoo is a registered trademark of the Gentoo Foundation, Inc. Information on the Gentoo Linux trademark guidelines can be found here <a href="https://www.gentoo.org/inside-gentoo/foundation/name-logo-guidelines.html" target="_blank">https://www.gentoo.org/inside-gentoo/foundation/name-logo-guidelines.html</a></li>
-                  <li>Kali Linux is a registered trademark of Offensive Security. Information on Kali Linux trademark guidelines can be found here <a href="https://www.kali.org/docs/policy/trademark/" target="_blank">https://www.kali.org/docs/policy/trademark/</a></li>
-                  <li>OpenSUSE is a registered trademark of SUSE LLC. Information on the OpenSUSE trademark guidelines can be found here <a href="https://en.opensuse.org/openSUSE:Trademark_guidelines" target="_blank">https://en.opensuse.org/openSUSE:Trademark_guidelines</a></li>
-                  <li>OpenWrt trademark is a registered United States trademark of Software Freedom Conservancy (SFC). Information on OpenWrt trademark guidelines can be found here <a href="https://openwrt.org/trademark" target="blank">https://openwrt.org/trademark</a></li>
-                  <li>Ubuntu is a registered trademark of Canonical Ltd. Information on Ubuntu Linux trademark guidelines can be found here <a href="https://design.ubuntu.com/brand/ubuntu-logo/" target="_blank">https://design.ubuntu.com/brand/ubuntu-logo/</a></li>           
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button class="btn btn-secondary" type="button" data-dismiss="modal">Dismiss</button>
-        </div>
-      </div>
-    </div>
-  </div>

lxconsole/templates/modals/main.html

@@ -13,7 +13,7 @@
           <div class="col-12">
             <p>Lxconsole is an open source management console providing a web-based user interface capable of managing multiple LXD servers from a single location.</p>
             <p>
-              <strong>Version</strong>: <span id="versionNumber">v0.0.2</span> <br />
+              <strong>Version</strong>: <span id="versionNumber">v0.1.0</span> <br />
               <strong>License</strong>: AGPL-3.0 <br />
               <strong>URL</strong>: https://lxconsole.com <br />
             </p>          

lxconsole/templates/storage-volumes.html

@@ -44,6 +44,13 @@
     const serverId = urlParams.get('id');
     const project = urlParams.get('project');
     const pool = urlParams.get('pool');
+    if (urlParams.get('filter') == 'custom'){
+      var filter = urlParams.get('filter')
+    } 
+    else {
+      var filter = ''
+    }
+
     var editedStorageVolume = ''
     applySidebarStyles();
     applySidebarLinks();
@@ -175,7 +182,17 @@
             },
           },
         ],
+        searchCols: [
+          null,
+          {"search":filter},
+          null,
+          null,
+          null,
+          null,
+
+        ],
         order: [],
+
       });
 
       //Set reload page content

roadmap.txt

@@ -1,8 +1,3 @@
-# 0.1.0
-- Filter storage volumes to show only custom type by default
-- Add alerts when connection problem with remote server
-- Catalog images from remote simplestreams server instead of static list
-
 # 0.2.0
 - Add cluster groups