mgr/dashboard: Rename side-nav panel items

Fixes: https://tracker.ceph.com/issues/73252

Commit includes changes:
1) Renaming Topic to Notification destination
2) Renaming Tiering to Storage class
3) Renaming Users to User Management
4) fix storage class table refresh after delete
5) Also made changes to internal routing for topic and storage class

Signed-off-by: Naman Munet <[email protected]>

Author: Naman Munet

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-notification-list/rgw-bucket-notification-list.component.ts

@@ -73,8 +73,8 @@ export class RgwBucketNotificationListComponent extends ListWithDetails implemen
         flexGrow: 2
       },
       {
-        name: $localize`Topic`,
-        prop: 'Topic',
+        name: $localize`Destination`,
+        prop: 'Destination',
         flexGrow: 1,
         cellTransformation: CellTemplate.copy
       },

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-tiering-form/rgw-bucket-tiering-form.component.ts

@@ -285,7 +285,7 @@ export class RgwBucketTieringFormComponent extends CdForm implements OnInit {
   }
 
   goToCreateStorageClass() {
-    this.router.navigate(['rgw/tiering/create']);
+    this.router.navigate(['rgw/storage-class/create']);
     this.closeModal();
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-storage-class-form/rgw-storage-class-form.component.ts

@@ -134,8 +134,8 @@ export class RgwStorageClassFormComponent extends CdForm implements OnInit {
     private rgwZoneService: RgwZoneService
   ) {
     super();
-    this.resource = $localize`Tiering Storage Class`;
-    this.editing = this.router.url.startsWith(`/rgw/tiering/${URLVerbs.EDIT}`);
+    this.resource = $localize`Storage Class`;
+    this.editing = this.router.url.startsWith(`/rgw/storage-class/${URLVerbs.EDIT}`);
     this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.CREATE;
   }
 
@@ -619,7 +619,7 @@ export class RgwStorageClassFormComponent extends CdForm implements OnInit {
     }
   }
   goToListView() {
-    this.router.navigate([`rgw/tiering`]);
+    this.router.navigate([`rgw/storage-class`]);
   }
 
   getTierTargetByStorageClass(placementTargetInfo: PlacementTarget, storageClass: string) {

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-storage-class-list/rgw-storage-class-list.component.html

@@ -4,6 +4,7 @@
   </cd-help-text>
 </legend>
 <cd-table
+  #table
   [data]="storageClassList"
   columnMode="flex"
   [columns]="columns"

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-storage-class-list/rgw-storage-class-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit, ViewChild } from '@angular/core';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
@@ -23,15 +23,19 @@ import { URLBuilderService } from '~/app/shared/services/url-builder.service';
 import { Permission } from '~/app/shared/models/permissions';
 import { BucketTieringUtils } from '../utils/rgw-bucket-tiering';
 import { Router } from '@angular/router';
+import { Observable, Subscriber } from 'rxjs';
+import { TableComponent } from '~/app/shared/datatable/table/table.component';
 
-const BASE_URL = 'rgw/tiering';
+const BASE_URL = 'rgw/storage-class';
 @Component({
   selector: 'cd-rgw-storage-class-list',
   templateUrl: './rgw-storage-class-list.component.html',
   styleUrls: ['./rgw-storage-class-list.component.scss'],
   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }]
 })
 export class RgwStorageClassListComponent extends ListWithDetails implements OnInit {
+  @ViewChild('table', { static: true })
+  table: TableComponent;
   columns: CdTableColumn[];
   selection = new CdTableSelection();
   permission: Permission;
@@ -108,7 +112,7 @@ export class RgwStorageClassListComponent extends ListWithDetails implements OnI
         name: this.actionLabels.EDIT,
         permission: 'update',
         icon: Icons.edit,
-        routerLink: () => [`/rgw/tiering/edit/${getStorageUri()}`]
+        routerLink: () => [`/${BASE_URL}/edit/${getStorageUri()}`]
       },
       {
         name: this.actionLabels.REMOVE,
@@ -170,17 +174,30 @@ export class RgwStorageClassListComponent extends ListWithDetails implements OnI
     const storage_class = this.selection.first().storage_class;
     const placement_target = this.selection.first().placement_target;
     this.cdsModalService.show(DeleteConfirmationModalComponent, {
-      itemDescription: $localize`Tiering Storage Class`,
+      itemDescription: $localize`Storage class`,
       itemNames: [storage_class],
       actionDescription: 'remove',
-      submitActionObservable: () =>
-        this.taskWrapper.wrapTaskAroundCall({
-          task: new FinishedTask('rgw/zonegroup/storage-class', {
-            placement_target: placement_target,
-            storage_class: storage_class
-          }),
-          call: this.rgwStorageClassService.removeStorageClass(placement_target, storage_class)
-        })
+      submitActionObservable: () => {
+        return new Observable((observer: Subscriber<any>) => {
+          this.taskWrapper
+            .wrapTaskAroundCall({
+              task: new FinishedTask('rgw/zonegroup/storage-class', {
+                placement_target: placement_target,
+                storage_class: storage_class
+              }),
+              call: this.rgwStorageClassService.removeStorageClass(placement_target, storage_class)
+            })
+            .subscribe({
+              error: (error: any) => {
+                observer.error(error);
+              },
+              complete: () => {
+                observer.complete();
+                this.table.refreshBtn();
+              }
+            });
+        });
+      }
     });
   }
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-details/rgw-topic-details.component.html

@@ -11,16 +11,6 @@
                 class="bold">Push endpoint arguments</td>
             <td>{{ selection?.dest?.push_endpoint_args }}</td>
           </tr>
-          <tr>
-            <td i18n
-                class="bold w-25">Push endpoint topic</td>
-            <td class="w-75">{{ selection?.dest?.push_endpoint_topic}}</td>
-          </tr>
-          <tr>
-            <td i18n
-                class="bold w-25">Push endpoint</td>
-            <td class="w-75">{{ selection?.dest?.push_endpoint }}</td>
-          </tr>
           <tr>
             <td i18n
                 class="bold w-25">Stored secret</td>

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-form/rgw-topic-form.component.html

@@ -9,14 +9,14 @@
       {{ action | titlecase }} {{ resource | upperFirst }}
       <cd-help-text>
         <span i18n>
-            Configure the push endpoint parameters to send notifications. On successful creation, you'll receive the topic's unique Amazon Resource Name
+            Configure the push endpoint parameters to send notifications. On successful creation, you'll receive the destination's unique Amazon Resource Name
         </span>
       </cd-help-text>
     </div>
 
     <div class="form-item form-item-append"
          cdsRow>
-      <!-- Topic Type-->
+      <!-- Destination Type-->
       <div cdsCol>
         <cds-select formControlName="endpointType"
                     label="Type"
@@ -25,15 +25,13 @@
                     id="endpointType"
                     (change)="onEndpointTypeChange();"
                     [invalid]="topicForm.controls.endpointType.invalid && topicForm.controls.endpointType.dirty"
-                    [invalidText]="topicTypeError"
-                    helperText="This user will manage and configure the topic’s settings."
-                    i18n-helperText>
+                    [invalidText]="topicTypeError">
           <option i18n
                   *ngIf="endpointType === null"
                   value="null">Loading... </option>
           <option i18n
                   *ngIf="endpointType !== null"
-                  value="">-- Select a Topic type --</option>
+                  value="">-- Select a destination type --</option>
           <option *ngFor="let data of endpointType"
                   i18n>{{ data | upperFirst }} </option>
         </cds-select>
@@ -53,9 +51,7 @@
           cdRequiredField="Owner"
           [invalid]="topicForm.controls.owner.invalid && topicForm.controls.owner.dirty"
           id="owner"
-          helperText="This owner will define and control the topic’s settings"
-          [invalidText]="ownerError"
-          i18n-helperText>
+          [invalidText]="ownerError">
           <option i18n
                   *ngIf="owners === null"
                   value="null">Loading... </option>
@@ -78,16 +74,15 @@
       <div class="form-item form-item-append"
            cdsRow>
 
-        <!-- Topic Name -->
+        <!-- Destination Name -->
         <div cdsCol>
           <cds-text-label
             labelInputID="name"
             i18n
             i18n-helperText
             cdRequiredField="Name"
             [invalid]="topicForm.controls.name.invalid && topicForm.controls.name.dirty"
-            [invalidText]="nameError"
-            helperText="Enter a Topic name">Name
+            [invalidText]="nameError">Name
 
           <input cdsText
                  type="text"
@@ -162,13 +157,13 @@
         <div cdsCol>
           <cds-text-label
             labelInputID="fqdn"
-            cdRequiredField="RGW Gateway Hostname"
+            cdRequiredField="Destination address"
             [invalid]="topicForm.controls.fqdn.invalid && topicForm.controls.fqdn.dirty"
             [invalidText]="fqdnError"
-            helperText="Enter the FQDN to configure the topic's settings and behavior"
+            helperText="Enter the FQDN/hostname/IP address for the push endpoint"
             i18n-helperText
             i18n>
-           RGW Gateway hostname
+           Destination address
           <input cdsText
                  type="text"
                  id="fqdn"
@@ -188,7 +183,7 @@
           <cds-number
             id="Port"
             formControlName="port"
-            cdRequiredField="Port"
+            cdRequiredField="Destination port"
             label="Port"
             i18n-label
             [min]="1"
@@ -424,7 +419,7 @@
                   cdsCol
                   class="cd-header">
             Additional common attributes
-            <cd-help-text>Configure additional attributes to customize the topic's behavior and settings</cd-help-text>
+            <cd-help-text>Configure additional attributes to customize the destination behavior and settings</cd-help-text>
           </legend>
 
           <!-- Persistent-->
@@ -445,7 +440,7 @@
             <cds-text-label labelInputID="opaque_data"
                             i18n
                             i18n-helperText
-                            helperText="A user-defined metadata added to all notifications that are triggered by the topic.">
+                            helperText="A user-defined metadata added to all notifications that are triggered by the destination.">
               Opaque data
               <input cdsText
                      type="text"

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-form/rgw-topic-form.component.ts

@@ -26,7 +26,7 @@ import {
   Endpoint
 } from '~/app/shared/models/topic.model';
 
-const BASE_URL = 'rgw/topic';
+const BASE_URL = 'rgw/destination';
 @Component({
   selector: 'cd-rgw-topic-form',
   templateUrl: './rgw-topic-form.component.html',
@@ -65,9 +65,9 @@ export class RgwTopicFormComponent extends CdForm implements OnInit, AfterViewCh
     private route: ActivatedRoute
   ) {
     super();
-    this.editing = this.router.url.startsWith(`/rgw/topic/${URLVerbs.EDIT}`);
+    this.editing = this.router.url.startsWith(`/${BASE_URL}/${URLVerbs.EDIT}`);
     this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.CREATE;
-    this.resource = $localize`topic`;
+    this.resource = $localize`notification destination`;
   }
 
   ngAfterViewChecked(): void {
@@ -397,8 +397,8 @@ export class RgwTopicFormComponent extends CdForm implements OnInit, AfterViewCh
       return this.topicForm.setErrors({ cdSubmitButton: true });
     }
     const notificationTitle = this.editing
-      ? $localize`Topic updated successfully`
-      : $localize`Topic created successfully`;
+      ? $localize`Notification destination updated successfully`
+      : $localize`Notification destination created successfully`;
     const formValue = this.topicForm.getRawValue();
     const topicPolicy = this.getTopicPolicy();
     const payload = this.generatePayload(formValue, topicPolicy);

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-list/rgw-topic-list.component.html

@@ -1,5 +1,7 @@
   <ng-container>
   <cd-table #table
+            headerTitle="Notification destination"
+            headerDescription="Delivers bucket and object change notifications to external services like Kafka or AMQP."
             [autoReload]="false"
             [data]="topics$ | async"
             [columns]="columns"

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-list/rgw-topic-list.component.ts

@@ -22,7 +22,7 @@ import { Topic } from '~/app/shared/models/topic.model';
 import { BehaviorSubject, Observable, of, Subscriber } from 'rxjs';
 import { catchError, shareReplay, switchMap } from 'rxjs/operators';
 
-const BASE_URL = 'rgw/topic';
+const BASE_URL = 'rgw/destination';
 @Component({
   selector: 'cd-rgw-topic-list',
   templateUrl: './rgw-topic-list.component.html',
@@ -129,13 +129,13 @@ export class RgwTopicListComponent extends ListWithDetails implements OnInit {
     const key = this.selection.first().key;
     const name = this.selection.first().name;
     this.modalService.show(DeleteConfirmationModalComponent, {
-      itemDescription: $localize`Topic`,
+      itemDescription: $localize`Notification destination`,
       itemNames: [name],
       submitActionObservable: () => {
         return new Observable((observer: Subscriber<any>) => {
           this.taskWrapper
             .wrapTaskAroundCall({
-              task: new FinishedTask('rgw/topic/delete', {
+              task: new FinishedTask(`${BASE_URL}/delete`, {
                 name: [name]
               }),
               call: this.rgwTopicService.delete(key)