]> git.apps.os.sepia.ceph.com Git - ceph.git/commitdiff
mgr/dashboard: add separation for service section in smb cluster form 62542/head
authorPedro Gonzalez Gomez <pegonzal@redhat.com>
Thu, 27 Mar 2025 01:09:02 +0000 (02:09 +0100)
committerPedro Gonzalez Gomez <pegonzal@redhat.com>
Fri, 28 Mar 2025 09:54:38 +0000 (10:54 +0100)
update the form-advanced component to use a custom title to display for custom advanced section

Fixes: https://tracker.ceph.com/issues/70693
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-form/smb-cluster-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts

index e0db02f92703cc61b4907a9b7e9b8c735ae0e249..45a95a32b557d60fc8030b5e6dbb2e28c3e6f1c1 100644 (file)
         </button>
       </div>
 
-      <!-- Placement -->
-      <ng-container *ngIf="orchStatus.available">
-        <div class="form-item">
-          <cds-select
-            label="Placement"
-            for="placement"
-            formControlName="placement"
-            id="placement"
-          >
-            <option value="hosts"
-                    i18n>Hosts</option>
-            <option value="label"
-                    i18n>Labels</option>
-          </cds-select>
-        </div>
-        <ng-container *ngIf="hostsAndLabels$ | async as data">
-          <!-- Label -->
-          <div *ngIf="smbForm.controls.placement.value === 'label'"
-               class="form-item">
-            <cds-combo-box
-              type="multi"
-              selectionFeedback="top-after-reopen"
-              label="Label"
-              formControlName="label"
-              id="label"
-              placeholder="Select labels..."
-              [appendInline]="true"
-              [items]="data.labels"
-              i18n-placeholder
-              (selected)="multiSelector($event, 'label')"
-              [invalid]="smbForm.controls.label.invalid && smbForm.controls.label.dirty"
-              [invalidText]="labelError"
-              cdRequiredField="Label"
-              i18n
+      <cd-form-advanced-fieldset title="Service specifications">
+        <!-- Placement -->
+        <ng-container *ngIf="orchStatus.available">
+          <div class="form-item">
+            <cds-select
+              label="Placement"
+              for="placement"
+              formControlName="placement"
+              id="placement"
             >
-              <cds-dropdown-list></cds-dropdown-list>
-            </cds-combo-box>
-            <ng-template #labelError>
-              <span
-                class="invalid-feedback"
-                *ngIf="smbForm.showError('label', formDir, 'required')"
+              <option value="hosts"
+                      i18n>Hosts</option>
+              <option value="label"
+                      i18n>Labels</option>
+            </cds-select>
+          </div>
+          <ng-container *ngIf="hostsAndLabels$ | async as data">
+            <!-- Label -->
+            <div *ngIf="smbForm.controls.placement.value === 'label'"
+                 class="form-item">
+              <cds-combo-box
+                type="multi"
+                selectionFeedback="top-after-reopen"
+                label="Label"
+                formControlName="label"
+                id="label"
+                placeholder="Select labels..."
+                [appendInline]="true"
+                [items]="data.labels"
+                i18n-placeholder
+                (selected)="multiSelector($event, 'label')"
+                [invalid]="smbForm.controls.label.invalid && smbForm.controls.label.dirty"
+                [invalidText]="labelError"
+                cdRequiredField="Label"
                 i18n
-                >This field is required.</span
               >
-            </ng-template>
-          </div>
+                <cds-dropdown-list></cds-dropdown-list>
+              </cds-combo-box>
+              <ng-template #labelError>
+                <span
+                  class="invalid-feedback"
+                  *ngIf="smbForm.showError('label', formDir, 'required')"
+                  i18n
+                  >This field is required.</span
+                >
+              </ng-template>
+            </div>
 
-          <!-- Hosts -->
-          <div *ngIf="smbForm.controls.placement.value === 'hosts'"
-               class="form-item">
-            <cds-combo-box
-              type="multi"
-              selectionFeedback="top-after-reopen"
-              label="Hosts"
-              formControlName="hosts"
-              id="hosts"
-              placeholder="Select hosts..."
-              i18n-placeholder
-              [appendInline]="true"
-              [items]="data.hosts"
-              (selected)="multiSelector($event, 'hosts')"
-              i18n
-            >
-              <cds-dropdown-list></cds-dropdown-list>
-            </cds-combo-box>
-          </div>
+            <!-- Hosts -->
+            <div *ngIf="smbForm.controls.placement.value === 'hosts'"
+                 class="form-item">
+              <cds-combo-box
+                type="multi"
+                selectionFeedback="top-after-reopen"
+                label="Hosts"
+                formControlName="hosts"
+                id="hosts"
+                placeholder="Select hosts..."
+                i18n-placeholder
+                [appendInline]="true"
+                [items]="data.hosts"
+                (selected)="multiSelector($event, 'hosts')"
+                i18n
+              >
+                <cds-dropdown-list></cds-dropdown-list>
+              </cds-combo-box>
+            </div>
+          </ng-container>
         </ng-container>
-      </ng-container>
-
-      <div class="form-item">
-        <cds-number
-          [id]="'count'"
-          [formControlName]="'count'"
-          [label]="'Count'"
-          [min]="1"
-        ></cds-number>
-      </div>
 
-      <!-- Custom DNS -->
-      <ng-container formArrayName="custom_dns"
-                    *ngFor="let _ of custom_dns.controls; index as i">
-        <div cdsRow
-             class="form-item form-item-append">
-          <div cdsCol
-               [columnNumbers]="{ lg: 14 }">
-            <cds-text-label
-              for="custom_dns"
-              i18n
-            >DNS
-            <input cdsText
-                   [formControlName]="i"
-                   placeholder="192.168.76.204"/>
-            </cds-text-label>
-          </div>
-          <div
-            cdsCol
-            [columnNumbers]="{ lg: 1 }"
-            class="item-action-btn spacing"
-          >
-            <cds-icon-button
-              kind="danger"
-              size="sm"
-              (click)="removeCustomDNS(i)"
-            >
-              <svg
-                cdsIcon="trash-can"
-                size="32"
-                class="cds--btn__icon"
-              >
-              </svg>
-            </cds-icon-button>
-          </div>
+        <div class="form-item">
+          <cds-number
+            [id]="'count'"
+            [formControlName]="'count'"
+            [label]="'Count'"
+            [min]="1"
+          ></cds-number>
         </div>
-      </ng-container>
-
-      <div class="form-item">
-        <button cdsButton="tertiary"
-                type="button"
-                (click)="addCustomDns()"
-                i18n>
-          Add custom DNS
-          <svg
-            cdsIcon="add"
-            size="32"
-            class="cds--btn__icon"
-            icon></svg>
-        </button>
-        <cd-helper i18n>One or more IP Addresses that will be
-          applied to the Samba containers to override
-          the default DNS resolver(s). This option is
-          intended to be used when the host Ceph node
-          is not configured to resolve DNS entries within
-          AD domain(s).
-        </cd-helper>
-      </div>
 
-      <!-- Clustering -->
-      <div class="form-item">
-        <cds-select
-          formControlName="clustering"
-          for="clustering"
-          label="Clustering"
-          id="clustering"
-          helperText="Default value indicates that clustering should be enabled if the placement count value is any value other than 1. Always value enables clustering regardless of the placement count. Never value disables clustering regardless of the placement count. "
-          i18n-helperText
-        >
-          <option *ngFor="let data of allClustering"
-                  i18n>{{ data | upperFirst }}</option>
-        </cds-select>
-      </div>
-
-      <!-- Public addrs -->
-      <ng-container formArrayName="public_addrs"
-                    *ngFor="let _ of public_addrs.controls; index as i">
-        <ng-container [formGroupName]="i">
+        <!-- Custom DNS -->
+        <ng-container formArrayName="custom_dns"
+                      *ngFor="let _ of custom_dns.controls; index as i">
           <div cdsRow
                class="form-item form-item-append">
-            <!-- Address -->
-            <div cdsCol
-                 [columnNumbers]="{ lg: 7 }">
-              <cds-text-label
-                for="public_addrs"
-                i18n
-                helperText="This address will be assigned to one of the host's network devices and managed automatically."
-                i18n-helperText
-                cdrequiredField
-                [invalid]="smbForm?.controls['public_addrs']?.controls[i].controls.address.invalid && smbForm?.controls['public_addrs']?.controls[i].controls.address.dirty"
-                [invalidText]="addressError"
-              >Address
-                <input
-                  cdsText
-                  type="text"
-                  formControlName="address"
-                  placeholder="192.168.4.51/24"
-                  [invalid]="smbForm?.controls['public_addrs'].controls[i].controls.address.invalid && smbForm?.controls['public_addrs']?.controls[i].controls.address.dirty"
-                />
-              </cds-text-label>
-              <ng-template #addressError>
-                <span
-                  class="invalid-feedback"
-                >
-                  <ng-container i18n> This field is required. </ng-container>
-                </span>
-              </ng-template>
-            </div>
-            <!-- Destination -->
             <div cdsCol
-                 [columnNumbers]="{ lg: 7 }">
+                 [columnNumbers]="{ lg: 14 }">
               <cds-text-label
-                for="public_addrs"
+                for="custom_dns"
                 i18n
-                helperText="Defines where the system will assign the managed IPs. Each string value must be a network address."
-                i18n-helperText
-              >Destination
-              <input
-                cdsText
-                type="text"
-                formControlName="destination"
-                placeholder="192.168.4.0/24"/>
+              >DNS
+              <input cdsText
+                     [formControlName]="i"
+                     placeholder="192.168.76.204"/>
               </cds-text-label>
             </div>
             <div
               <cds-icon-button
                 kind="danger"
                 size="sm"
-                (click)="removePublicAddrs(i)"
+                (click)="removeCustomDNS(i)"
               >
-                <svg cdsIcon="trash-can"
-                     size="32"
-                     class="cds--btn__icon"></svg>
+                <svg
+                  cdsIcon="trash-can"
+                  size="32"
+                  class="cds--btn__icon"
+                >
+                </svg>
               </cds-icon-button>
             </div>
           </div>
         </ng-container>
-      </ng-container>
-      <div
-        *ngIf="(this.smbForm.get('count').value > 1 && this.smbForm.get('clustering').value.toLowerCase() == CLUSTERING.Default) || this.smbForm.get('clustering').value.toLowerCase() == CLUSTERING.Always"
-        class="form-item"
-      >
-        <button cdsButton="tertiary"
-                type="button"
-                (click)="addPublicAddrs()"
-                i18n>
-          Add public address
-          <svg
-            cdsIcon="add"
-            size="32"
-            class="cds--btn__icon"
-            icon></svg>
-        </button>
-        <cd-helper i18n>Assign virtual IP addresses that will be managed
-          by the clustering subsystem and may automatically
-          move between nodes running Samba containers.</cd-helper>
-      </div>
+
+        <div class="form-item">
+          <button cdsButton="tertiary"
+                  type="button"
+                  (click)="addCustomDns()"
+                  i18n>
+            Add custom DNS
+            <svg
+              cdsIcon="add"
+              size="32"
+              class="cds--btn__icon"
+              icon></svg>
+          </button>
+          <cd-helper i18n>One or more IP Addresses that will be
+            applied to the Samba containers to override
+            the default DNS resolver(s). This option is
+            intended to be used when the host Ceph node
+            is not configured to resolve DNS entries within
+            AD domain(s).
+          </cd-helper>
+        </div>
+
+        <!-- Clustering -->
+        <div class="form-item">
+          <cds-select
+            formControlName="clustering"
+            for="clustering"
+            label="Clustering"
+            id="clustering"
+            helperText="Default value indicates that clustering should be enabled if the placement count value is any value other than 1. Always value enables clustering regardless of the placement count. Never value disables clustering regardless of the placement count. "
+            i18n-helperText
+          >
+            <option *ngFor="let data of allClustering"
+                    i18n>{{ data | upperFirst }}</option>
+          </cds-select>
+        </div>
+
+        <!-- Public addrs -->
+        <ng-container formArrayName="public_addrs"
+                      *ngFor="let _ of public_addrs.controls; index as i">
+          <ng-container [formGroupName]="i">
+            <div cdsRow
+                 class="form-item form-item-append">
+              <!-- Address -->
+              <div cdsCol
+                   [columnNumbers]="{ lg: 7 }">
+                <cds-text-label
+                  for="public_addrs"
+                  i18n
+                  helperText="This address will be assigned to one of the host's network devices and managed automatically."
+                  i18n-helperText
+                  cdrequiredField
+                  [invalid]="smbForm?.controls['public_addrs']?.controls[i].controls.address.invalid && smbForm?.controls['public_addrs']?.controls[i].controls.address.dirty"
+                  [invalidText]="addressError"
+                >Address
+                  <input
+                    cdsText
+                    type="text"
+                    formControlName="address"
+                    placeholder="192.168.4.51/24"
+                    [invalid]="smbForm?.controls['public_addrs'].controls[i].controls.address.invalid && smbForm?.controls['public_addrs']?.controls[i].controls.address.dirty"
+                  />
+                </cds-text-label>
+                <ng-template #addressError>
+                  <span
+                    class="invalid-feedback"
+                  >
+                    <ng-container i18n> This field is required. </ng-container>
+                  </span>
+                </ng-template>
+              </div>
+              <!-- Destination -->
+              <div cdsCol
+                   [columnNumbers]="{ lg: 7 }">
+                <cds-text-label
+                  for="public_addrs"
+                  i18n
+                  helperText="Defines where the system will assign the managed IPs. Each string value must be a network address."
+                  i18n-helperText
+                >Destination
+                <input
+                  cdsText
+                  type="text"
+                  formControlName="destination"
+                  placeholder="192.168.4.0/24"/>
+                </cds-text-label>
+              </div>
+              <div
+                cdsCol
+                [columnNumbers]="{ lg: 1 }"
+                class="item-action-btn spacing"
+              >
+                <cds-icon-button
+                  kind="danger"
+                  size="sm"
+                  (click)="removePublicAddrs(i)"
+                >
+                  <svg cdsIcon="trash-can"
+                       size="32"
+                       class="cds--btn__icon"></svg>
+                </cds-icon-button>
+              </div>
+            </div>
+          </ng-container>
+        </ng-container>
+        <div
+          *ngIf="(this.smbForm.get('count').value > 1 && this.smbForm.get('clustering').value.toLowerCase() == CLUSTERING.Default) || this.smbForm.get('clustering').value.toLowerCase() == CLUSTERING.Always"
+          class="form-item"
+        >
+          <button cdsButton="tertiary"
+                  type="button"
+                  (click)="addPublicAddrs()"
+                  i18n>
+            Add public address
+            <svg
+              cdsIcon="add"
+              size="32"
+              class="cds--btn__icon"
+              icon></svg>
+          </button>
+          <cd-helper i18n>Assign virtual IP addresses that will be managed
+            by the clustering subsystem and may automatically
+            move between nodes running Samba containers.</cd-helper>
+        </div>
+      </cd-form-advanced-fieldset>
       <cd-form-button-panel
         (submitActionEvent)="submitAction()"
         [form]="smbForm"
index 0c4253f5ec11249020b0cdbca6235d0cffe0eadb..5e59c032a8ce3e44cba4968e81d76260db75a974 100644 (file)
@@ -1,7 +1,7 @@
 <fieldset>
   <cds-accordion size="lg"
                  class="form-item">
-    <cds-accordion-item [title]="title"
+    <cds-accordion-item [title]="titleTpl"
                         i18n
                         id="advanced-fieldset"
                         (selected)="showAdvanced = !showAdvanced">
@@ -9,7 +9,8 @@
     </cds-accordion-item>
   </cds-accordion>
 
-  <ng-template #title>
-    <h5 class="cds--accordion__title cd-header">Advanced</h5>
+  <ng-template #titleTpl>
+    <h5 class="cds--accordion__title cd-header"
+        i18n>{{title}}</h5>
   </ng-template>
 </fieldset>
index e4b71d10e65726e80a81be77cde1248059798277..722f5a8a68044728dd640509bafdb14559e6ae4f 100644 (file)
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'cd-form-advanced-fieldset',
@@ -6,5 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./form-advanced-fieldset.component.scss']
 })
 export class FormAdvancedFieldsetComponent {
+  @Input()
+  title: string = 'Advanced';
   showAdvanced: boolean = false;
 }