Merge pull request #44014 from rhcs-dashboard/host-detail-service-column

mgr/dashboard: extend daemon actions to host details 

Reviewed-by: Aashish Sharma <aasharma@redhat.com>
Reviewed-by: Avan Thakkar <athakkar@redhat.com>
Reviewed-by: Nizamudeen A <nia@redhat.com>
Reviewed-by: sunilangadi2 <NOT@FOUND>

src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/services.po.ts

@@ -17,9 +17,8 @@ export class ServicesPageHelper extends PageHelper {
   };
 
   serviceDetailColumnIndex = {
-    hostname: 1,
-    daemonType: 2,
-    status: 8
+    daemonName: 2,
+    status: 7
   };
 
   check_for_service() {
@@ -114,14 +113,28 @@ export class ServicesPageHelper extends PageHelper {
   }
 
   checkServiceStatus(daemon: string, expectedStatus = 'running') {
-    cy.get('cd-service-daemon-list').within(() => {
-      this.getTableCell(this.serviceDetailColumnIndex.daemonType, daemon)
-        .parent()
-        .find(`datatable-body-cell:nth-child(${this.serviceDetailColumnIndex.status}) .badge`)
-        .should(($ele) => {
-          const status = $ele.toArray().map((v) => v.innerText);
-          expect(status).to.include(expectedStatus);
-        });
+    let daemonNameIndex = this.serviceDetailColumnIndex.daemonName;
+    let statusIndex = this.serviceDetailColumnIndex.status;
+
+    // since hostname row is hidden from the hosts details table,
+    // we'll need to manually override the indexes when this check is being
+    // done for the daemons in host details page. So we'll get the url and
+    // verify if the current page is not the services index page
+    cy.url().then((url) => {
+      if (!url.includes(pages.index.url)) {
+        daemonNameIndex = 1;
+        statusIndex = 6;
+      }
+
+      cy.get('cd-service-daemon-list').within(() => {
+        this.getTableCell(daemonNameIndex, daemon, true)
+          .parent()
+          .find(`datatable-body-cell:nth-child(${statusIndex}) .badge`)
+          .should(($ele) => {
+            const status = $ele.toArray().map((v) => v.innerText);
+            expect(status).to.include(expectedStatus);
+          });
+      });
     });
   }
 

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/09-services.e2e-spec.ts

@@ -4,6 +4,7 @@ import { ServicesPageHelper } from '../../cluster/services.po';
 
 describe('Services page', () => {
   const services = new ServicesPageHelper();
+  const mdsDaemonName = 'mds.test';
   beforeEach(() => {
     cy.login();
     Cypress.Cookies.preserveOnce('token');
@@ -17,51 +18,51 @@ describe('Services page', () => {
   it('should create an mds service', () => {
     services.navigateTo('create');
     services.addService('mds', false);
-    services.checkExist('mds.test', true);
+    services.checkExist(mdsDaemonName, true);
 
-    services.clickServiceTab('mds.test', 'Details');
+    services.clickServiceTab(mdsDaemonName, 'Details');
     cy.get('cd-service-details').within(() => {
-      services.checkServiceStatus('mds');
+      services.checkServiceStatus(mdsDaemonName);
     });
   });
 
   it('should stop a daemon', () => {
-    services.clickServiceTab('mds.test', 'Details');
-    services.checkServiceStatus('mds');
+    services.clickServiceTab(mdsDaemonName, 'Details');
+    services.checkServiceStatus(mdsDaemonName);
 
     services.daemonAction('mds', 'stop');
-    services.checkServiceStatus('mds', 'stopped');
+    services.checkServiceStatus(mdsDaemonName, 'stopped');
   });
 
   it('should restart a daemon', () => {
-    services.checkExist('mds.test', true);
-    services.clickServiceTab('mds.test', 'Details');
+    services.checkExist(mdsDaemonName, true);
+    services.clickServiceTab(mdsDaemonName, 'Details');
     services.daemonAction('mds', 'restart');
-    services.checkServiceStatus('mds', 'running');
+    services.checkServiceStatus(mdsDaemonName, 'running');
   });
 
   it('should redeploy a daemon', () => {
-    services.checkExist('mds.test', true);
-    services.clickServiceTab('mds.test', 'Details');
+    services.checkExist(mdsDaemonName, true);
+    services.clickServiceTab(mdsDaemonName, 'Details');
 
     services.daemonAction('mds', 'stop');
-    services.checkServiceStatus('mds', 'stopped');
+    services.checkServiceStatus(mdsDaemonName, 'stopped');
     services.daemonAction('mds', 'redeploy');
-    services.checkServiceStatus('mds', 'running');
+    services.checkServiceStatus(mdsDaemonName, 'running');
   });
 
   it('should start a daemon', () => {
-    services.checkExist('mds.test', true);
-    services.clickServiceTab('mds.test', 'Details');
+    services.checkExist(mdsDaemonName, true);
+    services.clickServiceTab(mdsDaemonName, 'Details');
 
     services.daemonAction('mds', 'stop');
-    services.checkServiceStatus('mds', 'stopped');
+    services.checkServiceStatus(mdsDaemonName, 'stopped');
     services.daemonAction('mds', 'start');
-    services.checkServiceStatus('mds', 'running');
+    services.checkServiceStatus(mdsDaemonName, 'running');
   });
 
   it('should delete an mds service', () => {
-    services.deleteService('mds.test');
+    services.deleteService(mdsDaemonName);
   });
 
   it('should create and delete snmp-gateway service with version V2c', () => {

src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts

@@ -196,10 +196,16 @@ export abstract class PageHelper {
     }
   }
 
-  getTableCell(columnIndex: number, exactContent: string) {
+  getTableCell(columnIndex: number, exactContent: string, partialMatch = false) {
     this.waitDataTableToLoad();
     this.clearTableSearchInput();
     this.searchTable(exactContent);
+    if (partialMatch) {
+      return cy.contains(
+        `datatable-body-row datatable-body-cell:nth-child(${columnIndex})`,
+        exactContent
+      );
+    }
     return cy.contains(
       `datatable-body-row datatable-body-cell:nth-child(${columnIndex})`,
       new RegExp(`^${exactContent}$`)

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html

@@ -24,7 +24,8 @@
          i18n>Daemons</a>
       <ng-template ngbNavContent>
         <cd-service-daemon-list [hostname]="selectedHostname"
-                                flag="hostDetails">
+                                flag="hostDetails"
+                                [hiddenColumns]="['hostname']">
         </cd-service-daemon-list>
       </ng-template>
     </li>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html

@@ -1,13 +1,7 @@
 <cd-orchestrator-doc-panel *ngIf="showDocPanel"></cd-orchestrator-doc-panel>
 
 <div *ngIf="flag === 'hostDetails'; else serviceDetailsTpl">
-  <cd-table *ngIf="hasOrchestrator"
-            #daemonsTable
-            [data]="daemons"
-            [columns]="columns"
-            columnMode="flex"
-            (fetchData)="getDaemons($event)">
-  </cd-table>
+  <ng-container *ngTemplateOutlet="serviceDaemonDetailsTpl"></ng-container>
 </div>
 
 <ng-template #serviceDetailsTpl>
@@ -20,22 +14,7 @@
         <a ngbNavLink
            i18n>Details</a>
         <ng-template ngbNavContent>
-          <cd-table *ngIf="hasOrchestrator"
-                    #daemonsTable
-                    [data]="daemons"
-                    selectionType="single"
-                    [columns]="columns"
-                    columnMode="flex"
-                    identifier="daemon_id"
-                    (fetchData)="getDaemons($event)"
-                    (updateSelection)="updateSelection($event)">
-            <cd-table-actions id="service-daemon-list-actions"
-                              class="table-actions"
-                              [selection]="selection"
-                              [permission]="permissions.hosts"
-                              [tableActions]="tableActions">
-            </cd-table-actions>
-          </cd-table>
+          <ng-container *ngTemplateOutlet="serviceDaemonDetailsTpl"></ng-container>
         </ng-template>
       </li>
       <li ngbNavItem="service_events">
@@ -89,3 +68,22 @@
     </div>
   </ng-template>
 </ng-template>
+
+<ng-template #serviceDaemonDetailsTpl>
+  <cd-table *ngIf="hasOrchestrator"
+            #daemonsTable
+            [data]="daemons"
+            selectionType="single"
+            [columns]="columns"
+            columnMode="flex"
+            identifier="daemon_name"
+            (fetchData)="getDaemons($event)"
+            (updateSelection)="updateSelection($event)">
+    <cd-table-actions id="service-daemon-list-actions"
+                      class="table-actions"
+                      [selection]="selection"
+                      [permission]="permissions.hosts"
+                      [tableActions]="tableActions">
+    </cd-table-actions>
+  </cd-table>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts

@@ -56,6 +56,9 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI
   @Input()
   hostname?: string;
 
+  @Input()
+  hiddenColumns: string[] = [];
+
   @Input()
   flag?: string;
 
@@ -127,14 +130,8 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI
         filterable: true
       },
       {
-        name: $localize`Daemon type`,
-        prop: 'daemon_type',
-        flexGrow: 1,
-        filterable: true
-      },
-      {
-        name: $localize`Daemon ID`,
-        prop: 'daemon_id',
+        name: $localize`Daemon name`,
+        prop: 'daemon_name',
         flexGrow: 1,
         filterable: true
       },
@@ -216,6 +213,10 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI
       this.hasOrchestrator = data.available;
       this.showDocPanel = !data.available;
     });
+
+    this.columns = this.columns.filter((col: any) => {
+      return !this.hiddenColumns.includes(col.prop);
+    });
   }
 
   ngOnChanges() {