fix(recurring-snapshots): reorder components and update styles for Recurring Snapshots dialog

src/app/snapshot/recurring-snapshots/day-of-week/day-of-week.component.html

@@ -1,4 +1,4 @@
-<md-select
+<md-select [style.width.%]="100"
   *ngIf="daysOfWeek$ | async as daysOfWeek"
   name="dayOfWeek"
   [(ngModel)]="dayOfWeek"

src/app/snapshot/recurring-snapshots/day-period/day-period.component.scss

@@ -4,5 +4,7 @@
     min-width: 80px;
   }
   width: 80px;
+  padding-top: 0px !important;
+  vertical-align: middle;
 }
 

src/app/snapshot/recurring-snapshots/policy-editor/monthly/monthly-policy.component.html

@@ -1,12 +1,12 @@
 <div class="flex-container">
-  <cs-time-picker
+  <cs-time-picker class="column"
     name="time"
     [timeFormat]="timeFormat"
     [ngModel]="time"
     (ngModelChange)="updateTime($event)"
   ></cs-time-picker>
 
-  <md-select
+  <md-select class="column"
     name="dayOfMonth"
     [ngModel]="dayOfMonth"
     (ngModelChange)="updateDayOfMonth($event)"

src/app/snapshot/recurring-snapshots/policy-editor/monthly/monthly-policy.component.scss

@@ -3,10 +3,18 @@
   align-content: space-between;
 }
 
-.flex-container *:first-child {
-  flex: 1;
-}
-
 :host /deep/ md-select {
   padding-top: 16px !important;
 }
+
+
+.column {
+  min-width: 300px;
+  max-width: 300px;
+  &:first-child {
+    margin-right: 10px;
+  }
+  &:last-child {
+    margin-left: 10px;
+  }
+}

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.html

@@ -33,10 +33,11 @@
   </div>
 
   <div class="flex-container">
-    <cs-time-zone
+    <cs-time-zone class="column"
       name="timeZone"
       [(ngModel)]="timeZone"
     ></cs-time-zone>
+    <div class="column">
 
     <cs-stored-number
       name="storedNumber"
@@ -46,11 +47,15 @@
       [minValue]="minStoredSnapshots"
       [maxValue]="maxStoredSnapshots"
     ></cs-stored-number>
-  </div>
 
-  <div class="button-wrapper">
-    <button md-button color="primary" [disabled]="!policyEditorForm.valid">
-      {{ 'COMMON.SAVE' | translate }}
-    </button>
+      <div class="button-wrapper">
+        <button
+          md-icon-button
+          [disabled]="!policyEditorForm.valid"
+        >
+          <md-icon>add</md-icon>
+        </button>
+      </div>
+    </div>
   </div>
 </form>

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.scss

@@ -7,6 +7,16 @@
   align-content: space-between;
 }
 
-.flex-container *:first-child {
-  flex: 1;
+.column {
+  min-width: 300px;
+  max-width: 300px;
+  &:first-child {
+    margin-right: 10px;
+  }
+  &:last-child {
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.ts

@@ -1,10 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { TimeFormat } from '../../../shared/services/language.service';
 import { PolicyType } from '../recurring-snapshots.component';
 import { TimeZone } from '../time-zone/time-zone.service';

src/app/snapshot/recurring-snapshots/policy-editor/weekly/weekly-policy.component.html

@@ -1,12 +1,12 @@
 <div class="flex-container">
-  <cs-time-picker
+  <cs-time-picker class="column"
     name="time"
     [timeFormat]="timeFormat"
     [ngModel]="time"
     (ngModelChange)="updateTime($event)"
   ></cs-time-picker>
 
-  <cs-day-of-week
+  <cs-day-of-week class="column"
     name="dayOfWeek"
     [ngModel]="dayOfWeek"
     (ngModelChange)="updateDayOfWeek($event)"

src/app/snapshot/recurring-snapshots/policy-editor/weekly/weekly-policy.component.scss

@@ -3,8 +3,19 @@
   align-content: space-between;
 }
 
-.flex-container *:first-child {
+/*.flex-container *:first-child {
   flex: 1;
+}*/
+
+.column {
+  min-width: 300px;
+  max-width: 300px;
+  &:first-child {
+    margin-right: 10px;
+  }
+  &:last-child {
+    margin-left: 10px;
+  }
 }
 
 :host /deep/ md-select {

src/app/snapshot/recurring-snapshots/recurring-snapshots.component.html

@@ -2,6 +2,15 @@ <h3 class="mat-dialog-title">
   {{ 'SNAPSHOT_POLICIES.TITLE' | translate }}
 </h3>
 <div class="mat-dialog-content">
+  <div *ngIf="policies?.length" class="list">
+    <cs-policy-list
+      [timeFormat]="timeFormat$ | async"
+      [policies]="policies"
+      (onPolicyDelete)="deletePolicy($event)"
+      (onPolicyRowClick)="changeTab($event)"
+    ></cs-policy-list>
+  </div>
+  <div *ngIf="!policies?.length" class="list">{{ 'SNAPSHOT_POLICIES.NO_RESULTS' | translate }}</div>
 
   <md-tab-group
     [selectedIndex]="policyMode"
@@ -21,22 +30,12 @@ <h3 class="mat-dialog-title">
     ></cs-policy-editor>
   </div>
 
-  <div *ngIf="policies?.length" class="list">
-    <cs-policy-list
-      [timeFormat]="timeFormat$ | async"
-      [policies]="policies"
-      (onPolicyDelete)="deletePolicy($event)"
-      (onPolicyRowClick)="changeTab($event)"
-    ></cs-policy-list>
-  </div>
-
-
-<div class="mat-dialog-actions">
-  <button
-    md-button
-    color="primary"
-    mdDialogClose
-  >
-    {{ 'COMMON.CLOSE' | translate }}
-  </button></div>
+  <div class="mat-dialog-actions">
+    <button
+      md-button
+      color="primary"
+      mdDialogClose
+    >
+      {{ 'COMMON.CLOSE' | translate }}
+    </button></div>
 </div>

src/app/snapshot/recurring-snapshots/recurring-snapshots.component.scss

@@ -7,13 +7,15 @@
   width: 730px !important;
 }
 /deep/ .mat-dialog-content {
-  overflow: hidden;
   .mat-dialog-actions {
     margin-bottom: 0px;
   }
 }
 
-.editor,
-.list {
+.editor {
   margin-top: 10px;
 }
+
+.list {
+  margin-bottom: 30px;
+}

src/app/snapshot/recurring-snapshots/stored-number/stored-number.component.html

@@ -1,4 +1,4 @@
-<md-form-field [style.width.px]="300">
+<md-form-field >
   <input
     mdInput
     name="store"

src/app/snapshot/recurring-snapshots/stored-number/stored-number.component.ts

@@ -24,7 +24,7 @@ export class StoredNumberComponent implements ControlValueAccessor {
   constructor(private translateService: TranslateService) {}
 
   public get errorMessage(): Observable<string> {
-    return this.translateService.get('BETWEEN', {
+    return this.translateService.get('SNAPSHOT_POLICIES.BETWEEN', {
       lowerLimit: this.min,
       upperLimit: this.max
     });

src/i18n/en.json

@@ -964,6 +964,7 @@
   "SNAPSHOT_POLICIES": {
     "TITLE": "Recurring snapshots",
     "SCHEDULED_SNAPSHOTS": "Scheduled snapshots",
+    "NO_RESULTS": "No recurring snapshot schedule",
     "KEEP": "Keep",
     "STORE_SNAPSHOTS": "Number of stored snapshots",
     "MINUTE": "Minute",
@@ -978,7 +979,8 @@
     "HOURLY": "Hourly",
     "DAILY": "Daily",
     "WEEKLY": "Weekly",
-    "MONTHLY": "Monthly"
+    "MONTHLY": "Monthly",
+    "BETWEEN": "From {{ lowerLimit }} to {{ upperLimit }}"
   },
   "SUGGESTION_DIALOG": {
     "WOULD_YOU_LIKE_TO_CREATE_VM": "Would you like to create a virtual machine?",

src/i18n/ru.json

@@ -964,6 +964,7 @@
   "SNAPSHOT_POLICIES": {
     "TITLE": "Повторяемые снимки",
     "SCHEDULED_SNAPSHOTS": "Расписание снимков",
+    "NO_RESULTS": "Расписание снимков не найдено",
     "KEEP": "Сохранять",
     "STORE_SNAPSHOTS": "Количество хранимых снимков",
     "MINUTE": "Минута",
@@ -978,7 +979,8 @@
     "HOURLY": "Ежечасно",
     "DAILY": "Ежедневно",
     "WEEKLY": "Еженедельно",
-    "MONTHLY": "Ежемесячно"
+    "MONTHLY": "Ежемесячно",
+    "BETWEEN": "От {{ lowerLimit }} до {{ upperLimit }}"
   },
   "SUGGESTION_DIALOG": {
     "WOULD_YOU_LIKE_TO_CREATE_VM": "Хотите создать виртуальную машину?",