[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / rgw / rgw-multisite-zone-form / rgw-multisite-zone-form.component.html

<cd-modal [modalRef]="activeModal">
  <ng-container i18n="form title"
                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>

  <ng-container class="modal-content">
    <form name="multisiteZoneForm"
          #formDir="ngForm"
          [formGroup]="multisiteZoneForm"
          novalidate>
    <div class="modal-body">
      <div class="form-group row">
        <label class="cd-col-form-label"
               for="selectedZonegroup"
               i18n>Select Zone Group</label>
        <div class="cd-col-form-input">
          <select class="form-select"
                  id="selectedZonegroup"
                  [attr.disabled]="action === 'edit' ? true : null"
                  formControlName="selectedZonegroup"
                  name="selectedZonegroup"
                  (change)="onZoneGroupChange($event.target.value)">
            <option *ngFor="let zonegroupName of zonegroupList"
                    [value]="zonegroupName.name"
                    [selected]="zonegroupName.name === multisiteZoneForm.getValue('selectedZonegroup')">
            {{ zonegroupName.name }}
            </option>
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label class="cd-col-form-label required"
               for="zonegroupName"
               i18n>Zone Name</label>
        <div class="cd-col-form-input">
          <input class="form-control"
                 type="text"
                 placeholder="Zone name..."
                 id="zoneName"
                 name="zoneName"
                 formControlName="zoneName">
          <span class="invalid-feedback"
                *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'required')"
                i18n>This field is required.</span>
          <span class="invalid-feedback"
                *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'uniqueName')"
                i18n>The chosen zone name is already in use.</span>
          <div class="custom-control custom-checkbox">
            <input class="form-check-input"
                   id="default_zone"
                   name="default_zone"
                   formControlName="default_zone"
                   [attr.disabled]="action === 'edit' ? true : null"
                   type="checkbox">
            <label class="form-check-label"
                   for="default_zone"
                   i18n>Default</label>
            <span *ngIf="disableDefault && action === 'create'">
              <cd-helper i18n>Default zone can only exist in a default zone group.
              </cd-helper>
            </span>
            <span *ngIf="isDefaultZone">
              <cd-helper i18n>You cannot unset the default flag.
              </cd-helper>
            </span>
            <cd-helper *ngIf="action === 'edit' && !isDefaultZone">
              <span i18n>Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover mechanism</span>
            </cd-helper><br>
          </div>
          <div class="custom-control custom-checkbox">
            <input class="form-check-input"
                   id="master_zone"
                   name="master_zone"
                   formControlName="master_zone"
                   [attr.disabled]="action === 'edit' ? true : null"
                   type="checkbox">
            <label class="form-check-label"
                   for="master_zone"
                   i18n>Master</label>
            <span *ngIf="disableMaster">
              <cd-helper i18n>Master zone already exists for the selected zone group.
              </cd-helper>
            </span>
            <span *ngIf="isMasterZone">
              <cd-helper i18n>You cannot unset the master flag.
              </cd-helper>
            </span>
            <cd-helper *ngIf="action === 'edit' && !isMasterZone">
              <span i18n>Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover mechanism</span>
            </cd-helper>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <label class="cd-col-form-label required"
               for="zone_endpoints"
               i18n>Endpoints</label>
        <div class="cd-col-form-input">
          <input class="form-control"
                 type="text"
                 placeholder="e.g, http://ceph-node-00.com:80"
                 id="zone_endpoints"
                 name="zone_endpoints"
                 formControlName="zone_endpoints">
          <span class="invalid-feedback"
                *ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'required')"
                i18n>This field is required.</span>
          <span class="invalid-feedback"
                *ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'endpoint')"
                i18n>Please enter a valid IP address.</span>
        </div>
      </div>
      <div class="form-group row">
        <label class="cd-col-form-label required"
               for="access_key"
               i18n>S3 access key
          <cd-helper>
            <span>To see or copy your S3 access key, go to <b>Object Gateway > Users</b> and click on your user name. In <b>Keys</b>, click <b>Show</b>. View the access key by clicking Show and copy the key by clicking <b>Copy to Clipboard</b>.</span>
          </cd-helper>
        </label>
        <div class="cd-col-form-input">
          <input class="form-control"
                 type="text"
                 placeholder="DiPt4V7WWvy2njL1z6aC"
                 id="access_key"
                 name="access_key"
                 formControlName="access_key">
        </div>
      </div>
      <div class="form-group row">
        <label class="cd-col-form-label required"
               for="access_key"
               i18n>S3 secret key
          <cd-helper>
            <span>To see or copy your S3 access key, go to <b>Object Gateway > Users</b> and click on your user name. In <b>Keys</b>, click <b>Show</b>. View the secret key by clicking Show and copy the key by clicking <b>Copy to Clipboard</b>.</span>
          </cd-helper>
        </label>
        <div class="cd-col-form-input">
          <input class="form-control"
                 type="text"
                 placeholder="xSZUdYky0bTctAdCEEW8ikhfBVKsBV5LFYL82vvh"
                 id="secret_key"
                 name="secret_key"
                 formControlName="secret_key">
        </div>
      </div>
      <div class="form-group row"
           *ngIf="action === 'edit'">
        <div *ngIf="action === 'edit'">
          <legend>Placement Targets</legend>
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="placementTarget"
                   i18n>Placement target</label>
            <div class="cd-col-form-input">
              <select class="form-select"
                      id="placementTarget"
                      formControlName="placementTarget"
                      name="placementTarget"
                      (change)="getZonePlacementData($event.target.value)">
                <option *ngFor="let placement of placementTargets"
                        [value]="placement.name"
                        [selected]="placement.name === multisiteZoneForm.getValue('placementTarget')">
                {{ placement.name }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="placementDataPool"
                   i18n>Data pool</label>
            <div class="cd-col-form-input">
              <select class="form-select"
                      id="placementDataPool"
                      formControlName="placementDataPool"
                      [value]="placementDataPool"
                      name="placementDataPool">
                <option *ngFor="let pool of poolList"
                        [value]="pool.poolname"
                        [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataPool')">
                {{ pool.poolname }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="placementIndexPool"
                   i18n>Index pool</label>
            <div class="cd-col-form-input">
              <select class="form-select"
                      id="placementIndexPool"
                      formControlName="placementIndexPool"
                      name="placementIndexPool">
                <option *ngFor="let pool of poolList"
                        [value]="pool.poolname"
                        [selected]="pool.poolname === multisiteZoneForm.getValue('placementIndexPool')">
                {{ pool.poolname }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="placementDataExtraPool"
                   i18n>Data extra pool</label>
            <div class="cd-col-form-input">
              <select class="form-select"
                      id="placementDataExtraPool"
                      formControlName="placementDataExtraPool"
                      name="placementDataExtraPool">
                <option *ngFor="let pool of poolList"
                        [value]="pool.poolname"
                        [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataExtraPool')">
                {{ pool.poolname }}
                </option>
              </select>
            </div>
          </div>
          <div>
            <legend>Storage Classes</legend>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="storageClass"
                     i18n>Storage Class</label>
              <div class="cd-col-form-input">
                <select class="form-select"
                        id="storageClass"
                        formControlName="storageClass"
                        (change)="getStorageClassData($event.target.value)"
                        name="storageClass">
                  <option *ngFor="let str of storageClassList"
                          [value]="str.value">
                  {{ str.value }}
                  </option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="storageDataPool"
                     i18n>Data pool</label>
              <div class="cd-col-form-input">
                <select class="form-select"
                        id="storageDataPool"
                        formControlName="storageDataPool"
                        name="storageDataPool">
                  <option *ngFor="let pool of poolList"
                          [value]="pool.poolname"
                          [selected]="pool.poolname === multisiteZoneForm.getValue('storageDataPool')">
                  {{ pool.poolname }}
                  </option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="cd-col-form-label"
                     for="storageCompression"
                     i18n>Compression</label>
              <div class="cd-col-form-input">
                <select class="form-select"
                        id="storageCompression"
                        formControlName="storageCompression"
                        name="storageCompression">
                  <option *ngFor="let compression of compressionTypes"
                          [value]="compression">
                  {{ compression }}
                  </option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <cd-form-button-panel (submitActionEvent)="submit()"
                            [form]="multisiteZoneForm"
                            [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
    </div>
    </form>
  </ng-container>
</cd-modal>
Commit	Line	Data
aee94f69 TL	1	<cd-modal [modalRef]="activeModal">
	2	<ng-container i18n="form title"
	3	class="modal-title">{{ action \| titlecase }} {{ resource \| upperFirst }}</ng-container>
	4
	5	<ng-container class="modal-content">
	6	<form name="multisiteZoneForm"
	7	#formDir="ngForm"
	8	[formGroup]="multisiteZoneForm"
	9	novalidate>
	10	<div class="modal-body">
	11	<div class="form-group row">
	12	<label class="cd-col-form-label"
	13	for="selectedZonegroup"
	14	i18n>Select Zone Group</label>
	15	<div class="cd-col-form-input">
	16	<select class="form-select"
	17	id="selectedZonegroup"
	18	[attr.disabled]="action === 'edit' ? true : null"
	19	formControlName="selectedZonegroup"
	20	name="selectedZonegroup"
	21	(change)="onZoneGroupChange($event.target.value)">
	22	<option *ngFor="let zonegroupName of zonegroupList"
	23	[value]="zonegroupName.name"
	24	[selected]="zonegroupName.name === multisiteZoneForm.getValue('selectedZonegroup')">
	25	{{ zonegroupName.name }}
	26	</option>
	27	</select>
	28	</div>
	29	</div>
	30	<div class="form-group row">
	31	<label class="cd-col-form-label required"
	32	for="zonegroupName"
	33	i18n>Zone Name</label>
	34	<div class="cd-col-form-input">
	35	<input class="form-control"
	36	type="text"
	37	placeholder="Zone name..."
	38	id="zoneName"
	39	name="zoneName"
	40	formControlName="zoneName">
	41	<span class="invalid-feedback"
	42	*ngIf="multisiteZoneForm.showError('zoneName', formDir, 'required')"
	43	i18n>This field is required.</span>
	44	<span class="invalid-feedback"
	45	*ngIf="multisiteZoneForm.showError('zoneName', formDir, 'uniqueName')"
	46	i18n>The chosen zone name is already in use.</span>
	47	<div class="custom-control custom-checkbox">
	48	<input class="form-check-input"
	49	id="default_zone"
	50	name="default_zone"
	51	formControlName="default_zone"
	52	[attr.disabled]="action === 'edit' ? true : null"
	53	type="checkbox">
	54	<label class="form-check-label"
	55	for="default_zone"
	56	i18n>Default</label>
	57	<span *ngIf="disableDefault && action === 'create'">
	58	<cd-helper i18n>Default zone can only exist in a default zone group.
	59	</cd-helper>
	60	</span>
	61	<span *ngIf="isDefaultZone">
	62	<cd-helper i18n>You cannot unset the default flag.
	63	</cd-helper>
	64	</span>
65	<cd-helper *ngIf="action === 'edit' && !isDefaultZone">
66	<span i18n>Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover mechanism</span>
67	</cd-helper><br>
68	</div>
69	<div class="custom-control custom-checkbox">
70	<input class="form-check-input"
71	id="master_zone"
72	name="master_zone"
73	formControlName="master_zone"
74	[attr.disabled]="action === 'edit' ? true : null"
75	type="checkbox">
76	<label class="form-check-label"
77	for="master_zone"
78	i18n>Master</label>
79	<span *ngIf="disableMaster">
80	<cd-helper i18n>Master zone already exists for the selected zone group.
81	</cd-helper>
82	</span>
83	<span *ngIf="isMasterZone">
84	<cd-helper i18n>You cannot unset the master flag.
85	</cd-helper>
86	</span>
87	<cd-helper *ngIf="action === 'edit' && !isMasterZone">
88	<span i18n>Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover mechanism</span>
89	</cd-helper>
90	</div>
91	</div>
92	</div>
93	<div class="form-group row">
94	<label class="cd-col-form-label required"
95	for="zone_endpoints"
96	i18n>Endpoints</label>
97	<div class="cd-col-form-input">
98	<input class="form-control"
99	type="text"
100	placeholder="e.g, http://ceph-node-00.com:80"
101	id="zone_endpoints"
102	name="zone_endpoints"
103	formControlName="zone_endpoints">
104	<span class="invalid-feedback"
105	*ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'required')"
106	i18n>This field is required.</span>
107	<span class="invalid-feedback"
108	*ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'endpoint')"
109	i18n>Please enter a valid IP address.</span>
110	</div>
111	</div>
112	<div class="form-group row">
113	<label class="cd-col-form-label required"
114	for="access_key"
115	i18n>S3 access key
116	<cd-helper>
117	<span>To see or copy your S3 access key, go to <b>Object Gateway > Users</b> and click on your user name. In <b>Keys</b>, click <b>Show</b>. View the access key by clicking Show and copy the key by clicking <b>Copy to Clipboard</b>.</span>
118	</cd-helper>
119	</label>
120	<div class="cd-col-form-input">
121	<input class="form-control"
122	type="text"
123	placeholder="DiPt4V7WWvy2njL1z6aC"
124	id="access_key"
125	name="access_key"
126	formControlName="access_key">
127	</div>
128	</div>
129	<div class="form-group row">
130	<label class="cd-col-form-label required"
131	for="access_key"
132	i18n>S3 secret key
133	<cd-helper>
134	<span>To see or copy your S3 access key, go to <b>Object Gateway > Users</b> and click on your user name. In <b>Keys</b>, click <b>Show</b>. View the secret key by clicking Show and copy the key by clicking <b>Copy to Clipboard</b>.</span>
135	</cd-helper>
136	</label>
137	<div class="cd-col-form-input">
138	<input class="form-control"
139	type="text"
140	placeholder="xSZUdYky0bTctAdCEEW8ikhfBVKsBV5LFYL82vvh"
141	id="secret_key"
142	name="secret_key"
143	formControlName="secret_key">
144	</div>
145	</div>
146	<div class="form-group row"
147	*ngIf="action === 'edit'">
148	<div *ngIf="action === 'edit'">
149	<legend>Placement Targets</legend>
150	<div class="form-group row">
151	<label class="cd-col-form-label"
152	for="placementTarget"
153	i18n>Placement target</label>
154	<div class="cd-col-form-input">
155	<select class="form-select"
156	id="placementTarget"
157	formControlName="placementTarget"
158	name="placementTarget"
159	(change)="getZonePlacementData($event.target.value)">
160	<option *ngFor="let placement of placementTargets"
161	[value]="placement.name"
162	[selected]="placement.name === multisiteZoneForm.getValue('placementTarget')">
163	{{ placement.name }}
164	</option>
165	</select>
166	</div>
167	</div>
168	<div class="form-group row">
169	<label class="cd-col-form-label"
170	for="placementDataPool"
171	i18n>Data pool</label>
172	<div class="cd-col-form-input">
173	<select class="form-select"
174	id="placementDataPool"
175	formControlName="placementDataPool"
176	[value]="placementDataPool"
177	name="placementDataPool">
178	<option *ngFor="let pool of poolList"
179	[value]="pool.poolname"
180	[selected]="pool.poolname === multisiteZoneForm.getValue('placementDataPool')">
181	{{ pool.poolname }}
182	</option>
183	</select>
184	</div>
185	</div>
186	<div class="form-group row">
187	<label class="cd-col-form-label"
188	for="placementIndexPool"
189	i18n>Index pool</label>
190	<div class="cd-col-form-input">
191	<select class="form-select"
192	id="placementIndexPool"
193	formControlName="placementIndexPool"
194	name="placementIndexPool">
195	<option *ngFor="let pool of poolList"
196	[value]="pool.poolname"
197	[selected]="pool.poolname === multisiteZoneForm.getValue('placementIndexPool')">
198	{{ pool.poolname }}
199	</option>
200	</select>
201	</div>
202	</div>
203	<div class="form-group row">
204	<label class="cd-col-form-label"
205	for="placementDataExtraPool"
206	i18n>Data extra pool</label>
207	<div class="cd-col-form-input">
208	<select class="form-select"
209	id="placementDataExtraPool"
210	formControlName="placementDataExtraPool"
211	name="placementDataExtraPool">
212	<option *ngFor="let pool of poolList"
213	[value]="pool.poolname"
214	[selected]="pool.poolname === multisiteZoneForm.getValue('placementDataExtraPool')">
215	{{ pool.poolname }}
216	</option>
217	</select>
218	</div>
219	</div>
220	<div>
221	<legend>Storage Classes</legend>
222	<div class="form-group row">
223	<label class="cd-col-form-label"
224	for="storageClass"
225	i18n>Storage Class</label>
226	<div class="cd-col-form-input">
227	<select class="form-select"
228	id="storageClass"
229	formControlName="storageClass"
230	(change)="getStorageClassData($event.target.value)"
231	name="storageClass">
232	<option *ngFor="let str of storageClassList"
233	[value]="str.value">
234	{{ str.value }}
235	</option>
236	</select>
237	</div>
238	</div>
239	<div class="form-group row">
240	<label class="cd-col-form-label"
241	for="storageDataPool"
242	i18n>Data pool</label>
243	<div class="cd-col-form-input">
244	<select class="form-select"
245	id="storageDataPool"
246	formControlName="storageDataPool"
247	name="storageDataPool">
248	<option *ngFor="let pool of poolList"
249	[value]="pool.poolname"
250	[selected]="pool.poolname === multisiteZoneForm.getValue('storageDataPool')">
251	{{ pool.poolname }}
252	</option>
253	</select>
254	</div>
255	</div>
256	<div class="form-group row">
257	<label class="cd-col-form-label"
258	for="storageCompression"
259	i18n>Compression</label>
260	<div class="cd-col-form-input">
261	<select class="form-select"
262	id="storageCompression"
263	formControlName="storageCompression"
264	name="storageCompression">
265	<option *ngFor="let compression of compressionTypes"
266	[value]="compression">
267	{{ compression }}
268	</option>
269	</select>
270	</div>
271	</div>
272	</div>
273	</div>
274	</div>
275	</div>
276	<div class="modal-footer">
277	<cd-form-button-panel (submitActionEvent)="submit()"
278	[form]="multisiteZoneForm"
279	[submitText]="(action \| titlecase) + ' ' + (resource \| upperFirst)"></cd-form-button-panel>
280	</div>
281	</form>
282	</ng-container>
283	</cd-modal>