From 4a100cf9d4992c4aa3786031ecd46f030bfe9a03 Mon Sep 17 00:00:00 2001 From: Dragos Date: Tue, 1 Jun 2021 14:23:30 +0300 Subject: [PATCH] display packages based on the "group" --- .../app/catalog/helpers/catalog.service.ts | 23 ++- app/src/app/catalog/models/package-groups.ts | 5 + .../catalog/packages/packages.component.html | 12 +- .../catalog/packages/packages.component.ts | 165 +++++------------- .../machine-wizard.component.html | 8 +- .../machine-wizard.component.ts | 16 +- app/src/app/machines/machines.component.html | 4 +- app/src/app/machines/machines.component.ts | 18 ++ app/src/app/machines/models/machine.ts | 1 + app/src/styles/styles.scss | 5 +- 10 files changed, 108 insertions(+), 149 deletions(-) create mode 100644 app/src/app/catalog/models/package-groups.ts diff --git a/app/src/app/catalog/helpers/catalog.service.ts b/app/src/app/catalog/helpers/catalog.service.ts index 66b0b38..9790a1b 100644 --- a/app/src/app/catalog/helpers/catalog.service.ts +++ b/app/src/app/catalog/helpers/catalog.service.ts @@ -5,6 +5,8 @@ import { Cacheable } from 'ts-cacheable'; import { delay, filter, map, mergeMap, repeatWhen, take, tap } from 'rxjs/operators'; import { CatalogPackage } from '../models/package'; import { CatalogImage } from '../models/image'; +import { PackageGroupsEnum } from '../models/package-groups'; +import { FileSizePipe } from 'src/app/pipes/file-size.pipe'; const cacheBuster$ = new Subject(); const imagesCacheBuster$ = new Subject(); @@ -15,7 +17,8 @@ const imagesCacheBuster$ = new Subject(); export class CatalogService { // ---------------------------------------------------------------------------------------------------------------- - constructor(private readonly httpClient: HttpClient) { } + constructor(private readonly httpClient: HttpClient, + private readonly fileSizePipe: FileSizePipe) { } // ---------------------------------------------------------------------------------------------------------------- @Cacheable({ @@ -43,9 +46,23 @@ export class CatalogService { return this.httpClient.get(`./assets/data/packages.json`).pipe(map(prices => { - packages.forEach(x => x.price = prices[x.id]) + let filteredPackages: CatalogPackage[] = []; - return packages; + for (let pkg of packages) + if (pkg.group === PackageGroupsEnum.Vm || pkg.group === PackageGroupsEnum.Infra) + { + pkg.price = prices[pkg.id]; + + let size = this.fileSizePipe.transform(pkg.memory * 1024 * 1024); + [pkg.memorySize, pkg.memorySizeLabel] = size.split(' '); + + size = this.fileSizePipe.transform(pkg.disk * 1024 * 1024); + [pkg.diskSize, pkg.diskSizeLabel] = size.split(' '); + + filteredPackages.push(pkg); + } + + return filteredPackages; })) })); } diff --git a/app/src/app/catalog/models/package-groups.ts b/app/src/app/catalog/models/package-groups.ts new file mode 100644 index 0000000..9d61846 --- /dev/null +++ b/app/src/app/catalog/models/package-groups.ts @@ -0,0 +1,5 @@ +export enum PackageGroupsEnum +{ + Vm = 'Virtual machine', + Infra = 'Infrastructure container' +} \ No newline at end of file diff --git a/app/src/app/catalog/packages/packages.component.html b/app/src/app/catalog/packages/packages.component.html index 1a19941..95ab8be 100644 --- a/app/src/app/catalog/packages/packages.component.html +++ b/app/src/app/catalog/packages/packages.component.html @@ -5,16 +5,9 @@ -
- -
-
- - + +
-
-
+
+
- -
diff --git a/app/src/app/machines/machines.component.ts b/app/src/app/machines/machines.component.ts index 1305a7d..0f52a22 100644 --- a/app/src/app/machines/machines.component.ts +++ b/app/src/app/machines/machines.component.ts @@ -388,6 +388,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- startMachine(machine: Machine) { + machine.contextMenu = false; + if (machine.state !== 'stopped') return; @@ -425,6 +427,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- restartMachine(machine: Machine) { + machine.contextMenu = false; + if (machine.state !== 'running') return; @@ -462,6 +466,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- stopMachine(machine: Machine) { + machine.contextMenu = false; + if (machine.state !== 'running') return; @@ -498,6 +504,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- resizeMachine(machine: Machine) { + machine.contextMenu = false; + const modalConfig = { ignoreBackdropClick: true, keyboard: false, @@ -541,6 +549,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- renameMachine(machine: Machine) { + machine.contextMenu = false; + const machineName = machine.name; const modalConfig = { @@ -590,6 +600,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- showTagEditor(machine: Machine, showMetadata = false) { + machine.contextMenu = false; + const modalConfig = { ignoreBackdropClick: true, keyboard: false, @@ -609,6 +621,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- createImageFromMachine(machine: Machine) { + machine.contextMenu = false; + const modalConfig = { ignoreBackdropClick: true, keyboard: false, @@ -673,6 +687,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- deleteMachine(machine: Machine) { + machine.contextMenu = false; + const modalConfig = { ignoreBackdropClick: true, keyboard: false, @@ -716,6 +732,8 @@ export class MachinesComponent implements OnInit, OnDestroy // ---------------------------------------------------------------------------------------------------------------- showMachineHistory(machine: Machine) { + machine.contextMenu = false; + const modalConfig = { ignoreBackdropClick: true, keyboard: false, diff --git a/app/src/app/machines/models/machine.ts b/app/src/app/machines/models/machine.ts index 7f73805..a0c5b15 100644 --- a/app/src/app/machines/models/machine.ts +++ b/app/src/app/machines/models/machine.ts @@ -51,4 +51,5 @@ export class Machine extends MachineRequest volumesEnabled: boolean; metadataKeys: string[]; tagKeys: string[]; + contextMenu: boolean; } diff --git a/app/src/styles/styles.scss b/app/src/styles/styles.scss index 4f61749..bb68123 100644 --- a/app/src/styles/styles.scss +++ b/app/src/styles/styles.scss @@ -547,11 +547,10 @@ accordion .price { color: #cd5c5c; - vertical-align: middle; - padding: 0 .5rem; - margin-bottom: .25rem; display: inline-block; text-transform: none; + font-size: 1rem; + vertical-align: baseline; } .badge-discreet