]>
Commit | Line | Data |
---|---|---|
f67539c2 | 1 | <cd-modal [modalRef]="activeModal"> |
9f95a23c TL |
2 | <ng-container i18n="form title|Example: Create Pool@@formTitle" |
3 | class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container> | |
4 | ||
5 | <ng-container class="modal-content"> | |
6 | <form #frm="ngForm" | |
7 | [formGroup]="form" | |
8 | novalidate> | |
9 | <div class="modal-body"> | |
10 | <div class="form-group row"> | |
11 | <label for="name" | |
e306af50 | 12 | class="cd-col-form-label"> |
9f95a23c TL |
13 | <ng-container i18n>Name</ng-container> |
14 | <span class="required"></span> | |
15 | </label> | |
e306af50 | 16 | <div class="cd-col-form-input"> |
9f95a23c TL |
17 | <input type="text" |
18 | id="name" | |
19 | name="name" | |
20 | class="form-control" | |
21 | placeholder="Name..." | |
22 | formControlName="name" | |
23 | autofocus> | |
24 | <span class="invalid-feedback" | |
25 | *ngIf="form.showError('name', frm, 'required')" | |
26 | i18n>This field is required!</span> | |
27 | <span class="invalid-feedback" | |
28 | *ngIf="form.showError('name', frm, 'pattern')" | |
29 | i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span> | |
30 | <span class="invalid-feedback" | |
31 | *ngIf="form.showError('name', frm, 'uniqueName')" | |
32 | i18n>The chosen erasure code profile name is already in use.</span> | |
33 | </div> | |
34 | </div> | |
35 | ||
36 | <!-- Root --> | |
37 | <div class="form-group row"> | |
38 | <label for="root" | |
e306af50 | 39 | class="cd-col-form-label"> |
9f95a23c TL |
40 | <ng-container i18n>Root</ng-container> |
41 | <cd-helper [html]="tooltips.root"> | |
42 | </cd-helper> | |
43 | <span class="required"></span> | |
44 | </label> | |
e306af50 | 45 | <div class="cd-col-form-input"> |
9f95a23c TL |
46 | <select class="form-control custom-select" |
47 | id="root" | |
48 | name="root" | |
49 | formControlName="root"> | |
50 | <option *ngIf="!buckets" | |
51 | ngValue="" | |
52 | i18n>Loading...</option> | |
53 | <option *ngFor="let bucket of buckets" | |
54 | [ngValue]="bucket"> | |
55 | {{ bucket.name }} | |
56 | </option> | |
57 | </select> | |
58 | <span class="invalid-feedback" | |
59 | *ngIf="form.showError('root', frm, 'required')" | |
60 | i18n>This field is required!</span> | |
61 | </div> | |
62 | </div> | |
63 | ||
64 | <!-- Failure Domain Type --> | |
65 | <div class="form-group row"> | |
66 | <label for="failure_domain" | |
e306af50 | 67 | class="cd-col-form-label"> |
9f95a23c TL |
68 | <ng-container i18n>Failure domain type</ng-container> |
69 | <cd-helper [html]="tooltips.failure_domain"> | |
70 | </cd-helper> | |
71 | <span class="required"></span> | |
72 | </label> | |
e306af50 | 73 | <div class="cd-col-form-input"> |
9f95a23c TL |
74 | <select class="form-control custom-select" |
75 | id="failure_domain" | |
76 | name="failure_domain" | |
77 | formControlName="failure_domain"> | |
78 | <option *ngIf="!failureDomains" | |
79 | ngValue="" | |
80 | i18n>Loading...</option> | |
e306af50 | 81 | <option *ngFor="let domain of failureDomainKeys" |
9f95a23c TL |
82 | [ngValue]="domain"> |
83 | {{ domain }} ( {{failureDomains[domain].length}} ) | |
84 | </option> | |
85 | </select> | |
86 | <span class="invalid-feedback" | |
87 | *ngIf="form.showError('failure_domain', frm, 'required')" | |
88 | i18n>This field is required!</span> | |
89 | </div> | |
90 | </div> | |
91 | ||
92 | <!-- Class --> | |
93 | <div class="form-group row"> | |
94 | <label for="device_class" | |
e306af50 | 95 | class="cd-col-form-label"> |
9f95a23c TL |
96 | <ng-container i18n>Device class</ng-container> |
97 | <cd-helper [html]="tooltips.device_class"> | |
98 | </cd-helper> | |
99 | </label> | |
e306af50 | 100 | <div class="cd-col-form-input"> |
9f95a23c TL |
101 | <select class="form-control custom-select" |
102 | id="device_class" | |
103 | name="device_class" | |
104 | formControlName="device_class"> | |
105 | <option ngValue="" | |
106 | i18n>Let Ceph decide</option> | |
107 | <option *ngFor="let deviceClass of devices" | |
108 | [ngValue]="deviceClass"> | |
109 | {{ deviceClass }} | |
110 | </option> | |
111 | </select> | |
112 | </div> | |
113 | </div> | |
114 | </div> | |
115 | ||
116 | <div class="modal-footer"> | |
f67539c2 TL |
117 | <cd-form-button-panel (submitActionEvent)="onSubmit()" |
118 | [form]="form" | |
119 | [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel> | |
9f95a23c TL |
120 | </div> |
121 | </form> | |
122 | </ng-container> | |
123 | </cd-modal> |