From: Pedro Gonzalez Gomez <pegonzal@redhat.com>
Date: Thu, 27 Mar 2025 01:09:02 +0000 (+0100)
Subject: mgr/dashboard: add separation for service section in smb cluster form
X-Git-Tag: v20.3.0~199^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=82990e1ea389b2e56b729606d7e5e4ba91dedee3;p=ceph.git

mgr/dashboard: add separation for service section in smb cluster form

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>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-form/smb-cluster-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-form/smb-cluster-form.component.html
index e0db02f92703..45a95a32b557 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-form/smb-cluster-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-form/smb-cluster-form.component.html
@@ -206,205 +206,99 @@
         </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
@@ -415,35 +309,143 @@
               <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"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html
index 0c4253f5ec11..5e59c032a8ce 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html
@@ -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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts
index e4b71d10e657..722f5a8a6804 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.ts
@@ -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;
 }