show package list when selecting a custom image in the instance wizard

app/src/app/catalog/models/image.ts

@@ -16,3 +16,11 @@ export class CatalogImage
   image_size: number;
   price: number;
 }
+
+export enum CatalogImageType
+{
+  InfrastructureContainer = 1,
+  VirtualMachine = 2,
+  Docker = 3,
+  Custom = 4
+}

app/src/app/catalog/packages/packages.component.ts

@@ -5,6 +5,7 @@ import { takeUntil } from 'rxjs/operators';
 import { FileSizePipe } from '../../pipes/file-size.pipe';
 import { CatalogService } from '../helpers/catalog.service';
 import { CatalogImage } from '../../catalog/models/image';
+import { CatalogImageType } from '../models/image';
 
 @Component({
   selector: 'app-packages',
@@ -120,9 +121,9 @@ export class PackagesComponent implements OnInit, OnDestroy, OnChanges
 
     // Setup the operating systems array-like object, sorted alphabetically
     this.packageGroups = Object.keys(this.packages)
-      .filter(x =>
+      .filter(packageGroup =>
       {
-        this.packages[x].forEach(p =>
+        this.packages[packageGroup].forEach(p =>
         {
           if (p.name === this.package)
             this._selectedPackage = p;
@@ -132,27 +133,42 @@ export class PackagesComponent implements OnInit, OnDestroy, OnChanges
             p.visible = true;
             return;
           }
+          else
+          {
+            p.visible = true;
+          }
 
           if (this.image.requirements.brand)
-            p.visible = this.image.requirements.brand === p.brand;
+            p.visible = p.visible && this.image.requirements.brand === p.brand;
 
           if (this.image.type === 'zone-dataset')
-            p.visible = ['Spearhead', 'Spearhead-minimal'].includes(p.brand);
+            p.visible = p.visible && ['Spearhead', 'Spearhead-minimal'].includes(p.brand);
 
           if (this.image.type === 'lx-dataset')
-            p.visible = p.brand === 'lx';
+            p.visible = p.visible && p.brand === 'lx';
 
           if (this.image.type === 'zvol')
-            p.visible = ['bhyve', 'kvm'].includes(p.brand);
+            p.visible = p.visible && ['bhyve', 'kvm'].includes(p.brand);
+
+          if (this.imageType === CatalogImageType.InfrastructureContainer)
+            p.visible = p.visible && packageGroup === 'infrastructure container';
+          else if (this.imageType === CatalogImageType.VirtualMachine)
+            p.visible = p.visible && packageGroup === 'virtual machine';
         });
 
         switch (this.imageType | 0)
         {
-          case 1:
+          case CatalogImageType.InfrastructureContainer:
-            return this.packages[x].length && (!x || ['cpu', 'disk', 'memory optimized', 'standard', 'triton'].includes(x));
+            return this.packages[packageGroup].filter(x => x.visible).length &&
+            (!packageGroup || ['cpu', 'disk', 'memory optimized', 'standard', 'triton'].includes(packageGroup));
 
-          case 2:
+          case CatalogImageType.VirtualMachine:
-            return this.packages[x].length && (!x || ['standard', 'triton', 'bhyve'].includes(x));
+            return this.packages[packageGroup].filter(x => x.visible).length &&
+              (!packageGroup || ['standard', 'triton', 'bhyve'].includes(packageGroup));
+
+          case CatalogImageType.Custom:
+            return this.packages[packageGroup].filter(x => x.visible).length &&
+              packageGroup !== 'infrastructure container' && packageGroup !== 'virtual machine';
 
           default:
             return false;

app/src/app/instances/instance-wizard/instance-wizard.component.scss

@@ -298,7 +298,7 @@ p
 {
   color: #00e7ff;
   text-transform: uppercase;
-  background: #0f1626;
+  background-color: #0f1626;
   border-color: #00e7ff;
   border-radius: 3rem;
 }

app/src/app/instances/instance-wizard/instance-wizard.component.ts

@@ -13,6 +13,7 @@ import { ToastrService } from 'ngx-toastr';
 import { VolumesService } from '../../volumes/helpers/volumes.service';
 import { AuthService } from '../../helpers/auth.service';
 import { TranslateService } from '@ngx-translate/core';
+import { CatalogImageType } from '../../catalog/models/image';
 
 @Component({
   selector: 'app-instance-wizard',
@@ -171,7 +172,7 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
         const imageList = [];
         const operatingSystems = {};
 
-        if (imageType === 1)
+        if (imageType === CatalogImageType.InfrastructureContainer)
         {
           for (const image of this.images)
             if (['lx-dataset', 'zone-dataset'].includes(image.type) && image.owner !== this.userId)
@@ -180,7 +181,7 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
               imageList.push(image);
             }
         }
-        else if (imageType === 2)
+        else if (imageType === CatalogImageType.VirtualMachine)
         {
           for (const image of this.images)
             if (['zvol'].includes(image.type) && image.owner !== this.userId)
@@ -189,7 +190,7 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
               imageList.push(image);
             }
         }
-        else if (imageType === 3)
+        else if (imageType === CatalogImageType.Custom)
         {
           for (const image of this.images)
             if (image.owner === this.userId)
@@ -221,7 +222,7 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
         const imageList = [];
         const operatingSystems = {};
 
-        if (imageType === 1)
+        if (imageType === CatalogImageType.InfrastructureContainer)
         {
           for (const image of this.images)
             if (['lx-dataset', 'zone-dataset'].includes(image.type) && (!imageOs || imageOs === image.os) && image.owner !== this.userId)
@@ -230,7 +231,7 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
               imageList.push(image);
             }
         }
-        else if (imageType === 2)
+        else if (imageType === CatalogImageType.VirtualMachine)
         {
           for (const image of this.images)
             if (['zvol'].includes(image.type) && (!imageOs || imageOs === image.os) && image.owner !== this.userId)
@@ -239,7 +240,7 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
               imageList.push(image);
             }
         }
-        else if (imageType === 3)
+        else if (imageType === CatalogImageType.Custom)
         {
           for (const image of this.images)
             if (image.owner === this.userId)
@@ -288,10 +289,10 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
       .pipe(takeUntil(this.destroy$))
       .subscribe(this.setAffinity.bind(this));
 
-      this.editorForm.get('estimatedMinutesRan').valueChanges
+    this.editorForm.get('estimatedMinutesRan').valueChanges
-       .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntil(this.destroy$))
-       .subscribe(this.computeEstimatedCost.bind(this))
+      .subscribe(this.computeEstimatedCost.bind(this));
- }
+  }
 
   // ----------------------------------------------------------------------------------------------------------------
   private computeEstimatedCost()