Merge pull request ceph#65704 from rhcs-dashboard/rename-sidenav-items

mgr/dashboard: Rename side-nav panel items

Reviewed-by: Ankush Behl <[email protected]>
Reviewed-by: Puja Shahu <[email protected]>
Reviewed-by: Afreen Misbah <[email protected]>
Reviewed-by: Dnyaneshwari  talwekar <[email protected]>
Reviewed-by: Aashish Sharma <[email protected]>

Author: nizamial09

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)