Merge pull request ceph#51589 from rhcs-dashboard/services-running

mgr/dashboard: merge running and size columns in services page

Reviewed-by: Aashish Sharma <[email protected]>
Reviewed-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html

@@ -25,3 +25,15 @@
   </cd-table>
 </ng-container>
 <router-outlet name="modal"></router-outlet>
+
+
+<ng-template #runningTpl
+             let-value="value">
+  <span ngbTooltip="Service instances running out of the total number of services requested.">
+    {{ value.running }} / {{ value.size }}
+  </span>
+  <i *ngIf="value.running == 0 || value.size == 0"
+     class="icon-warning-color"
+     [ngClass]="[icons.warning]">
+  </i>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -39,6 +39,8 @@ const BASE_URL = 'services';
 export class ServicesComponent extends ListWithDetails implements OnChanges, OnInit {
   @ViewChild(TableComponent, { static: true })
   table: TableComponent;
+  @ViewChild('runningTpl', { static: true })
+  public runningTpl: TemplateRef<any>;
 
   @Input() hostname: string;
 
@@ -68,6 +70,7 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
   services: Array<CephServiceSpec> = [];
   isLoadingServices = false;
   selection: CdTableSelection = new CdTableSelection();
+  icons = Icons;
 
   constructor(
     private actionLabels: ActionLabelsI18n,
@@ -155,13 +158,9 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
       },
       {
         name: $localize`Running`,
-        prop: 'status.running',
-        flexGrow: 1
-      },
-      {
-        name: $localize`Size`,
-        prop: 'status.size',
-        flexGrow: 1
+        prop: 'status',
+        flexGrow: 1,
+        cellTemplate: this.runningTpl
       },
       {
         name: $localize`Last Refreshed`,