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