]>
Commit | Line | Data |
---|---|---|
9f95a23c TL |
1 | <cd-modal [modalRef]="bsModalRef"> |
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 class="cd-col-form-label" | |
12 | for="name" | |
13 | i18n>Name</label> | |
14 | <div class="cd-col-form-input"> | |
15 | <input type="text" | |
16 | id="name" | |
17 | name="name" | |
18 | class="form-control" | |
19 | placeholder="Name..." | |
20 | formControlName="name" | |
21 | autofocus> | |
22 | <span class="invalid-feedback" | |
23 | *ngIf="form.showError('name', frm, 'required')" | |
24 | i18n>This field is required!</span> | |
25 | <span class="invalid-feedback" | |
26 | *ngIf="form.showError('name', frm, 'pattern')" | |
27 | i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span> | |
28 | <span class="invalid-feedback" | |
29 | *ngIf="form.showError('name', frm, 'uniqueName')" | |
30 | i18n>The chosen erasure code profile name is already in use.</span> | |
31 | </div> | |
32 | </div> | |
33 | ||
34 | <div class="form-group row"> | |
35 | <label for="plugin" | |
36 | class="cd-col-form-label"> | |
37 | <span class="required" | |
38 | i18n>Plugin</span> | |
39 | <cd-helper [html]="tooltips.plugins[plugin].description"> | |
40 | </cd-helper> | |
41 | </label> | |
42 | <div class="cd-col-form-input"> | |
43 | <select class="form-control custom-select" | |
44 | id="plugin" | |
45 | name="plugin" | |
46 | formControlName="plugin"> | |
47 | <option *ngIf="!plugins" | |
48 | ngValue="" | |
49 | i18n>Loading...</option> | |
50 | <option *ngFor="let plugin of plugins" | |
51 | [ngValue]="plugin"> | |
52 | {{ plugin }} | |
53 | </option> | |
54 | </select> | |
55 | <span class="invalid-feedback" | |
56 | *ngIf="form.showError('name', frm, 'required')" | |
57 | i18n>This field is required!</span> | |
58 | </div> | |
59 | </div> | |
60 | ||
61 | <div class="form-group row"> | |
62 | <label for="k" | |
63 | class="cd-col-form-label"> | |
e306af50 | 64 | <span class="required" |
9f95a23c TL |
65 | i18n>Data chunks (k)</span> |
66 | <cd-helper [html]="tooltips.k"> | |
67 | </cd-helper> | |
68 | </label> | |
69 | <div class="cd-col-form-input"> | |
70 | <input type="number" | |
71 | id="k" | |
72 | name="k" | |
73 | class="form-control" | |
74 | ng-model="$ctrl.erasureCodeProfile.k" | |
75 | placeholder="Data chunks..." | |
76 | formControlName="k"> | |
77 | <span class="invalid-feedback" | |
78 | *ngIf="form.showError('k', frm, 'required')" | |
79 | i18n>This field is required!</span> | |
80 | <span class="invalid-feedback" | |
81 | *ngIf="form.showError('k', frm, 'min')" | |
82 | i18n>Must be equal to or greater than 2.</span> | |
e306af50 TL |
83 | <span class="invalid-feedback" |
84 | *ngIf="form.showError('k', frm, 'max')" | |
85 | i18n>Chunks (k+m) have exceeded the available OSDs of {{deviceCount}}.</span> | |
86 | <span class="invalid-feedback" | |
87 | *ngIf="form.showError('k', frm, 'unequal')" | |
88 | i18n>For an equal distribution k has to be a multiple of (k+m)/l.</span> | |
89 | <span class="invalid-feedback" | |
90 | *ngIf="form.showError('k', frm, 'kLowerM')" | |
91 | i18n>K has to be equal to or greater than m in order to recover data correctly through c.</span> | |
92 | <span *ngIf="plugin === 'lrc'" | |
93 | class="form-text text-muted" | |
94 | i18n>Distribution factor: {{lrcMultiK}}</span> | |
9f95a23c TL |
95 | </div> |
96 | </div> | |
97 | ||
98 | <div class="form-group row"> | |
99 | <label for="m" | |
100 | class="cd-col-form-label"> | |
e306af50 | 101 | <span class="required" |
9f95a23c TL |
102 | i18n>Coding chunks (m)</span> |
103 | <cd-helper [html]="tooltips.m"> | |
104 | </cd-helper> | |
105 | </label> | |
106 | <div class="cd-col-form-input"> | |
107 | <input type="number" | |
108 | id="m" | |
109 | name="m" | |
110 | class="form-control" | |
111 | placeholder="Coding chunks..." | |
112 | formControlName="m"> | |
113 | <span class="invalid-feedback" | |
114 | *ngIf="form.showError('m', frm, 'required')" | |
115 | i18n>This field is required!</span> | |
116 | <span class="invalid-feedback" | |
117 | *ngIf="form.showError('m', frm, 'min')" | |
118 | i18n>Must be equal to or greater than 1.</span> | |
e306af50 TL |
119 | <span class="invalid-feedback" |
120 | *ngIf="form.showError('m', frm, 'max')" | |
121 | i18n>Chunks (k+m) have exceeded the available OSDs of {{deviceCount}}.</span> | |
9f95a23c TL |
122 | </div> |
123 | </div> | |
124 | ||
125 | <div class="form-group row" | |
126 | *ngIf="plugin === 'shec'"> | |
127 | <label for="c" | |
128 | class="cd-col-form-label"> | |
e306af50 TL |
129 | <span class="required" |
130 | i18n>Durability estimator (c)</span> | |
9f95a23c TL |
131 | <cd-helper [html]="tooltips.plugins.shec.c"> |
132 | </cd-helper> | |
133 | </label> | |
134 | <div class="cd-col-form-input"> | |
135 | <input type="number" | |
136 | id="c" | |
137 | name="c" | |
138 | class="form-control" | |
139 | placeholder="Coding chunks..." | |
140 | formControlName="c"> | |
141 | <span class="invalid-feedback" | |
142 | *ngIf="form.showError('c', frm, 'min')" | |
143 | i18n>Must be equal to or greater than 1.</span> | |
e306af50 TL |
144 | <span class="invalid-feedback" |
145 | *ngIf="form.showError('c', frm, 'cGreaterM')" | |
146 | i18n>C has to be equal to or lower than m as m defines the amount of chunks that can be used.</span> | |
9f95a23c TL |
147 | </div> |
148 | </div> | |
149 | ||
adb31ebb TL |
150 | <div class="form-group row" |
151 | *ngIf="plugin === 'clay'"> | |
152 | <label for="d" | |
153 | class="cd-col-form-label"> | |
154 | <span class="required" | |
155 | i18n>Helper chunks (d)</span> | |
156 | <cd-helper [html]="tooltips.plugins.clay.d"> | |
157 | </cd-helper> | |
158 | </label> | |
159 | <div class="cd-col-form-input"> | |
160 | <div class="input-group"> | |
161 | <input type="number" | |
162 | id="d" | |
163 | name="d" | |
164 | class="form-control" | |
165 | placeholder="Helper chunks..." | |
166 | formControlName="d"> | |
167 | <span class="input-group-append"> | |
168 | <button class="btn btn-light" | |
169 | id="d-calc-btn" | |
170 | ngbTooltip="Set d manually or use the plugin's default calculation that maximizes d." | |
171 | i18n-ngbTooltip | |
172 | type="button" | |
173 | (click)="toggleDCalc()"> | |
174 | <i [ngClass]="dCalc ? icons.unlock : icons.lock" | |
175 | aria-hidden="true"></i> | |
176 | </button> | |
177 | </span> | |
178 | </div> | |
179 | <span class="form-text text-muted" | |
180 | *ngIf="dCalc" | |
181 | i18n>D is automatically updated on k and m changes</span> | |
182 | <ng-container | |
183 | *ngIf="!dCalc"> | |
184 | <span class="form-text text-muted" | |
185 | *ngIf="getDMin() < getDMax()" | |
186 | i18n>D can be set from {{getDMin()}} to {{getDMax()}}</span> | |
187 | <span class="form-text text-muted" | |
188 | *ngIf="getDMin() === getDMax()" | |
189 | i18n>D can only be set to {{getDMax()}}</span> | |
190 | </ng-container> | |
191 | <span class="invalid-feedback" | |
192 | *ngIf="form.showError('d', frm, 'dMin')" | |
193 | i18n>D has to be greater than k ({{getDMin()}}).</span> | |
194 | <span class="invalid-feedback" | |
195 | *ngIf="form.showError('d', frm, 'dMax')" | |
196 | i18n>D has to be lower than k + m ({{getDMax()}}).</span> | |
197 | </div> | |
198 | </div> | |
199 | ||
9f95a23c TL |
200 | <div class="form-group row" |
201 | *ngIf="plugin === PLUGIN.LRC"> | |
202 | <label class="cd-col-form-label" | |
203 | for="l"> | |
204 | <span class="required" | |
205 | i18n>Locality (l)</span> | |
206 | <cd-helper [html]="tooltips.plugins.lrc.l"> | |
207 | </cd-helper> | |
208 | </label> | |
209 | <div class="cd-col-form-input"> | |
210 | <input type="number" | |
211 | id="l" | |
212 | name="l" | |
213 | class="form-control" | |
214 | placeholder="Coding chunks..." | |
215 | formControlName="l"> | |
216 | <span class="invalid-feedback" | |
217 | *ngIf="form.showError('l', frm, 'required')" | |
218 | i18n>This field is required!</span> | |
219 | <span class="invalid-feedback" | |
220 | *ngIf="form.showError('l', frm, 'min')" | |
221 | i18n>Must be equal to or greater than 1.</span> | |
e306af50 TL |
222 | <span class="invalid-feedback" |
223 | *ngIf="form.showError('l', frm, 'unequal')" | |
224 | i18n>Can't split up chunks (k+m) correctly with the current locality.</span> | |
225 | <span class="form-text text-muted" | |
226 | i18n>Locality groups: {{lrcGroups}}</span> | |
9f95a23c TL |
227 | </div> |
228 | </div> | |
229 | ||
230 | <div class="form-group row"> | |
231 | <label for="crushFailureDomain" | |
232 | class="cd-col-form-label"> | |
233 | <ng-container i18n>Crush failure domain</ng-container> | |
234 | <cd-helper [html]="tooltips.crushFailureDomain"> | |
235 | </cd-helper> | |
236 | </label> | |
237 | <div class="cd-col-form-input"> | |
238 | <select class="form-control custom-select" | |
239 | id="crushFailureDomain" | |
240 | name="crushFailureDomain" | |
241 | formControlName="crushFailureDomain"> | |
242 | <option *ngIf="!failureDomains" | |
243 | ngValue="" | |
244 | i18n>Loading...</option> | |
e306af50 | 245 | <option *ngFor="let domain of failureDomainKeys" |
9f95a23c | 246 | [ngValue]="domain"> |
e306af50 | 247 | {{ domain }} ( {{failureDomains[domain].length}} ) |
9f95a23c TL |
248 | </option> |
249 | </select> | |
250 | </div> | |
251 | </div> | |
252 | ||
253 | <div class="form-group row" | |
254 | *ngIf="plugin === PLUGIN.LRC"> | |
255 | <label for="crushLocality" | |
256 | class="cd-col-form-label"> | |
257 | <ng-container i18n>Crush Locality</ng-container> | |
258 | <cd-helper [html]="tooltips.plugins.lrc.crushLocality"> | |
259 | </cd-helper> | |
260 | </label> | |
261 | <div class="cd-col-form-input"> | |
262 | <select class="form-control custom-select" | |
263 | id="crushLocality" | |
264 | name="crushLocality" | |
265 | formControlName="crushLocality"> | |
266 | <option *ngIf="!failureDomains" | |
267 | ngValue="" | |
268 | i18n>Loading...</option> | |
e306af50 | 269 | <option *ngIf="failureDomainKeys.length > 0" |
9f95a23c TL |
270 | ngValue="" |
271 | i18n>None</option> | |
e306af50 | 272 | <option *ngFor="let domain of failureDomainKeys" |
9f95a23c | 273 | [ngValue]="domain"> |
e306af50 | 274 | {{ domain }} ( {{failureDomains[domain].length}} ) |
9f95a23c TL |
275 | </option> |
276 | </select> | |
277 | </div> | |
278 | </div> | |
279 | ||
280 | <div class="form-group row" | |
adb31ebb TL |
281 | *ngIf="PLUGIN.CLAY === plugin"> |
282 | <label for="scalar_mds" | |
283 | class="cd-col-form-label"> | |
284 | <ng-container i18n>Scalar mds</ng-container> | |
285 | <cd-helper [html]="tooltips.plugins.clay.scalar_mds"> | |
286 | </cd-helper> | |
287 | </label> | |
288 | <div class="cd-col-form-input"> | |
289 | <select class="form-control custom-select" | |
290 | id="scalar_mds" | |
291 | name="scalar_mds" | |
292 | formControlName="scalar_mds"> | |
293 | <option *ngFor="let plugin of [PLUGIN.JERASURE, PLUGIN.ISA, PLUGIN.SHEC]" | |
294 | [ngValue]="plugin"> | |
295 | {{ plugin }} | |
296 | </option> | |
297 | </select> | |
298 | </div> | |
299 | </div> | |
300 | ||
301 | <div class="form-group row" | |
302 | *ngIf="[PLUGIN.JERASURE, PLUGIN.ISA, PLUGIN.CLAY].includes(plugin)"> | |
9f95a23c TL |
303 | <label for="technique" |
304 | class="cd-col-form-label"> | |
305 | <ng-container i18n>Technique</ng-container> | |
306 | <cd-helper [html]="tooltips.plugins[plugin].technique"> | |
307 | </cd-helper> | |
308 | </label> | |
309 | <div class="cd-col-form-input"> | |
310 | <select class="form-control custom-select" | |
311 | id="technique" | |
312 | name="technique" | |
313 | formControlName="technique"> | |
314 | <option *ngFor="let technique of techniques" | |
315 | [ngValue]="technique"> | |
316 | {{ technique }} | |
317 | </option> | |
318 | </select> | |
319 | </div> | |
320 | </div> | |
321 | ||
322 | <div class="form-group row" | |
323 | *ngIf="plugin === PLUGIN.JERASURE"> | |
324 | <label for="packetSize" | |
325 | class="cd-col-form-label"> | |
326 | <ng-container i18n>Packetsize</ng-container> | |
327 | <cd-helper [html]="tooltips.plugins.jerasure.packetSize"> | |
328 | </cd-helper> | |
329 | </label> | |
330 | <div class="cd-col-form-input"> | |
331 | <input type="number" | |
332 | id="packetSize" | |
333 | name="packetSize" | |
334 | class="form-control" | |
335 | placeholder="Packetsize..." | |
336 | formControlName="packetSize"> | |
337 | <span class="invalid-feedback" | |
338 | *ngIf="form.showError('packetSize', frm, 'min')" | |
339 | i18n>Must be equal to or greater than 1.</span> | |
340 | </div> | |
341 | </div> | |
342 | ||
343 | <div class="form-group row"> | |
344 | <label for="crushRoot" | |
345 | class="cd-col-form-label"> | |
346 | <ng-container i18n>Crush root</ng-container> | |
347 | <cd-helper [html]="tooltips.crushRoot"> | |
348 | </cd-helper> | |
349 | </label> | |
350 | <div class="cd-col-form-input"> | |
e306af50 TL |
351 | <select class="form-control custom-select" |
352 | id="crushRoot" | |
353 | name="crushRoot" | |
354 | formControlName="crushRoot"> | |
355 | <option *ngIf="!buckets" | |
356 | ngValue="" | |
357 | i18n>Loading...</option> | |
358 | <option *ngFor="let bucket of buckets" | |
359 | [ngValue]="bucket"> | |
360 | {{ bucket.name }} | |
361 | </option> | |
362 | </select> | |
9f95a23c TL |
363 | </div> |
364 | </div> | |
365 | ||
366 | <div class="form-group row"> | |
367 | <label for="crushDeviceClass" | |
368 | class="cd-col-form-label"> | |
369 | <ng-container i18n>Crush device class</ng-container> | |
370 | <cd-helper [html]="tooltips.crushDeviceClass"> | |
371 | </cd-helper> | |
372 | </label> | |
373 | <div class="cd-col-form-input"> | |
374 | <select class="form-control custom-select" | |
375 | id="crushDeviceClass" | |
376 | name="crushDeviceClass" | |
377 | formControlName="crushDeviceClass"> | |
378 | <option ngValue="" | |
e306af50 | 379 | i18n>Let Ceph decide</option> |
9f95a23c TL |
380 | <option *ngFor="let deviceClass of devices" |
381 | [ngValue]="deviceClass"> | |
382 | {{ deviceClass }} | |
383 | </option> | |
384 | </select> | |
e306af50 TL |
385 | <span class="form-text text-muted" |
386 | i18n>Available OSDs: {{deviceCount}}</span> | |
9f95a23c TL |
387 | </div> |
388 | </div> | |
389 | ||
390 | <div class="form-group row"> | |
391 | <label for="directory" | |
392 | class="cd-col-form-label"> | |
393 | <ng-container i18n>Directory</ng-container> | |
394 | <cd-helper [html]="tooltips.directory"> | |
395 | </cd-helper> | |
396 | </label> | |
397 | <div class="cd-col-form-input"> | |
398 | <input type="text" | |
399 | id="directory" | |
400 | name="directory" | |
401 | class="form-control" | |
402 | placeholder="Path..." | |
403 | formControlName="directory"> | |
404 | </div> | |
405 | </div> | |
406 | </div> | |
407 | ||
408 | <div class="modal-footer"> | |
409 | <cd-submit-button (submitAction)="onSubmit()" | |
410 | i18n="form action button|Example: Create Pool@@formActionButton" | |
411 | [form]="frm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button> | |
412 | <cd-back-button [back]="bsModalRef.hide"></cd-back-button> | |
413 | </div> | |
414 | </form> | |
415 | </ng-container> | |
416 | </cd-modal> |