fix(dialogs): formatting and layout (#1373)

* fix(dialogs): fix vm creation and volume creation dialogs * rename translation keys * add default precision * storage precision = 1
bwsw · Oct 30, 2018 · 7d3eec6 · 7d3eec6
1 parent 4769afd
commit 7d3eec6
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 32 deletions.
diff --git a/src/app/service-offering/service-offering-dialog/service-offering-dialog.component.html b/src/app/service-offering/service-offering-dialog/service-offering-dialog.component.html
@@ -35,8 +35,8 @@ <h3 class="mat-dialog-title">
   <div class="mat-dialog-actions">
     <div>
       <button mat-button color="primary" (click)="showFields = !showFields">
-        {{ (showFields ? 'SERVICE_OFFERING.HIDE_ADDITIONAL_FIELDS'
-        : 'SERVICE_OFFERING.SHOW_ADDITIONAL_FIELDS' )| translate }}
+        {{ (showFields ? 'SERVICE_OFFERING.HIDE_DETAILS'
+        : 'SERVICE_OFFERING.SHOW_DETAILS' )| translate }}
       </button>
     </div>
     <div>

diff --git a/.../shared/components/disk-offering/disk-offering-dialog/disk-offering-dialog.component.html b/.../shared/components/disk-offering/disk-offering-dialog/disk-offering-dialog.component.html
@@ -12,11 +12,12 @@ <h3 class="mat-dialog-title">
         <mat-expansion-panel-header>
           <mat-panel-title>
             <mat-radio-button
-            [value]="offering"
-            [checked]="offering.id === selectedDiskOffering?.id"
-            (click)="selectOffering(offering); preventTriggerExpansionPanel($event)"
-            ></mat-radio-button>
-            {{ offering.name }}
+              [value]="offering"
+              [checked]="offering.id === selectedDiskOffering?.id"
+              (click)="selectOffering(offering); preventTriggerExpansionPanel($event)"
+            >
+              {{ offering.name }}
+            </mat-radio-button>
           </mat-panel-title>
           <mat-panel-description>
             <div

diff --git a/.../shared/components/disk-offering/disk-offering-dialog/disk-offering-dialog.component.scss b/.../shared/components/disk-offering/disk-offering-dialog/disk-offering-dialog.component.scss
@@ -4,27 +4,29 @@
 }
 
 mat-expansion-panel {
-  border-top: 1px solid rgba(0,0,0, .12);
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
   box-shadow: inherit !important;
 
   &:last-child {
-    border-bottom: 1px solid rgba(0,0,0, .12);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
 
 mat-panel-title {
-  flex: 1 1 auto;
+  flex: 1;
   width: 25%;
 }
 
 mat-panel-description {
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   width: 75%;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
-.disk-size, .custom-label {
+.disk-size,
+.custom-label {
   color: black;
   margin-left: 20px;
 }

diff --git a/src/app/shared/components/vm-statistics/vm-statistics.component.ts b/src/app/shared/components/vm-statistics/vm-statistics.component.ts
@@ -170,7 +170,7 @@ export class VmStatisticsComponent implements OnInit, OnChanges {
     value: number,
     max: number,
     units?: string,
-    precision?: number,
+    precision: number = Utils.defaultPrecision,
   ): Observable<string> {
     if (max !== Infinity) {
       return this.getStatsStringWithRestrictions(value, max, units, precision);
@@ -179,10 +179,14 @@ export class VmStatisticsComponent implements OnInit, OnChanges {
     return this.getStatsStringWithNoRestrictions(value, units, precision);
   }
 
-  public getStatsStringFor(resource: keyof ResourcesData, units?: string): Observable<string> {
+  public getStatsStringFor(
+    resource: keyof ResourcesData,
+    units?: string,
+    precision: number = Utils.defaultPrecision,
+  ): Observable<string> {
     const consumed = this.resourceUsage[this.getModeKey()][resource];
     const max = this.resourceUsage.max[resource];
-    return this.getStatsString(consumed, max, units);
+    return this.getStatsString(consumed, max, units, precision);
   }
 
   public get memory(): Observable<string> {
@@ -197,13 +201,13 @@ export class VmStatisticsComponent implements OnInit, OnChanges {
   public get primaryStorage(): Observable<string> {
     return this.translateService
       .get('UNITS.GB')
-      .pipe(switchMap(gb => this.getStatsStringFor('primaryStorage', gb)));
+      .pipe(switchMap(gb => this.getStatsStringFor('primaryStorage', gb, 1)));
   }
 
   public get secondaryStorage(): Observable<string> {
     return this.translateService
       .get('UNITS.GB')
-      .pipe(switchMap(gb => this.getStatsStringFor('secondaryStorage', gb)));
+      .pipe(switchMap(gb => this.getStatsStringFor('secondaryStorage', gb, 1)));
   }
 
   public progressFor(resource: keyof ResourcesData): number {
@@ -247,8 +251,8 @@ export class VmStatisticsComponent implements OnInit, OnChanges {
     precision?: number,
   ): Observable<string> {
     const percents = this.getPercents(value, max);
-    const val = precision ? value.toFixed(precision) : value;
-    const m = precision ? max.toFixed(precision) : max;
+    const val = precision != null ? value.toFixed(precision) : value;
+    const m = precision != null ? max.toFixed(precision) : max;
 
     return of(`${val}/${m} ${units || ''} (${percents}%)`);
   }
@@ -263,7 +267,7 @@ export class VmStatisticsComponent implements OnInit, OnChanges {
     }
 
     if (this.mode === StatsMode.Used) {
-      const val = precision ? value.toFixed(precision) : value;
+      const val = precision != null ? value.toFixed(precision) : value;
       return of(`${val} ${units || ''}`);
     }
   }

diff --git a/src/app/shared/services/utils/utils.service.ts b/src/app/shared/services/utils/utils.service.ts
@@ -2,6 +2,8 @@ import { RouterState } from '@angular/router';
 import * as uuid from 'uuid';
 
 export class Utils {
+  public static defaultPrecision = 0;
+
   public static getUniqueId(): string {
     return uuid.v4();
   }
@@ -10,12 +12,12 @@ export class Utils {
     enumerator: number,
     denominator: number,
     denominatorExponent?: number,
-    precision?: number,
+    precision: number = Utils.defaultPrecision,
   ): number {
     const calculatedExponent = denominatorExponent != null ? denominatorExponent : 1;
     const calculatedDenominator = Math.pow(denominator, calculatedExponent);
 
-    if (precision) {
+    if (precision != null) {
       return +(enumerator / calculatedDenominator).toFixed(precision);
     }
     return enumerator / calculatedDenominator;

diff --git a/src/app/template/template-creation/template-creation.component.html b/src/app/template/template-creation/template-creation.component.html
@@ -135,8 +135,8 @@ <h3 class="mat-dialog-title">{{ modeTranslationToken | translate }}</h3>
 
     <div>
       <button mat-button type="button" (click)="showAdditional=!showAdditional">
-        {{ (showAdditional ? 'TEMPLATE_PAGE.TEMPLATE_CREATION.HIDE_ADDITIONAL'
-        : 'TEMPLATE_PAGE.TEMPLATE_CREATION.SHOW_ADDITIONAL') | translate }}
+        {{ (showAdditional ? 'TEMPLATE_PAGE.TEMPLATE_CREATION.HIDE_DETAILS'
+        : 'TEMPLATE_PAGE.TEMPLATE_CREATION.SHOW_DETAILS') | translate }}
       </button>
     </div>
 

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -735,8 +735,8 @@
       "IS_ROUTING": "Routing",
       "REQUIRES_HVM": "Requires HVM",
       "BOOTABLE": "Bootable",
-      "SHOW_ADDITIONAL": "Show additional fields",
-      "HIDE_ADDITIONAL": "Hide additional fields"
+      "SHOW_DETAILS": "Show details",
+      "HIDE_DETAILS": "Hide details"
     }
   },
   "SNAPSHOT_PAGE": {
@@ -1552,8 +1552,8 @@
     "NO_AVAILABLE_OFFERINGS": "No available offerings",
     "CPU_MHZ": "{{ count }}x{{ speed }} MHz",
     "VM_WILL_BE_RESTARTED": "Virtual machine will be restarted",
-    "SHOW_ADDITIONAL_FIELDS": "Show additional fields",
-    "HIDE_ADDITIONAL_FIELDS": "Hide additional fields",
+    "SHOW_DETAILS": "Show details",
+    "HIDE_DETAILS": "Hide details",
     "CUSTOM_SERVICE_OFFERING": {
       "TITLE": "Custom offering",
       "CPU_NUMBER": "CPU cores",

diff --git a/src/i18n/ru.json b/src/i18n/ru.json
@@ -735,8 +735,8 @@
       "IS_ROUTING": "Маршрутизация",
       "REQUIRES_HVM": "HVM",
       "BOOTABLE": "Загружаемый",
-      "SHOW_ADDITIONAL": "Показать дополнительные параметры",
-      "HIDE_ADDITIONAL": "Скрыть дополнительные параметры"
+      "SHOW_DETAILS": "Показать дополнительные параметры",
+      "HIDE_DETAILS": "Скрыть дополнительные параметры"
     }
   },
   "SNAPSHOT_PAGE": {
@@ -1548,8 +1548,8 @@
     "NO_AVAILABLE_OFFERINGS": "Нет доступных предложений",
     "CPU_MHZ": "{{ count }}x{{ speed }} МГц",
     "VM_WILL_BE_RESTARTED": "Машина будет перезагружена",
-    "SHOW_ADDITIONAL_FIELDS": "Показать дополнительные параметры",
-    "HIDE_ADDITIONAL_FIELDS": "Скрыть дополнительные параметры",
+    "SHOW_DETAILS": "Показать дополнительные параметры",
+    "HIDE_DETAILS": "Скрыть дополнительные параметры",
     "CUSTOM_SERVICE_OFFERING": {
       "TITLE": "Настраиваемое предложение",
       "CPU_NUMBER": "Ядра CPU",