mgr/dashboard: add url links to services

Fixes: https://tracker.ceph.com/issues/66736
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html
index d84449e237eebc9e394984b0c58e16a9ec8c9542..567f6ae099bd795a1dd5e9529a956c8505680d56 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html
@@ -37,3 +37,24 @@
      [ngClass]="[icons.warning]">
   </i>
 </ng-template>
+
+<ng-template #urlTpl
+             let-row="row">
+  <ng-container *ngIf="serviceUrls[row.service_type] else noUrl">
+    <a *ngIf="!isMgmtGateway else mgmtGateway"
+       target="_blank"
+       [href]="serviceUrls[row.service_type]">
+      {{ row.service_name }}
+      <i class="fa fa-external-link"></i>
+    </a>
+
+    <ng-template #mgmtGateway>
+      <a target="_blank"
+         [href]="row.service_type">
+        {{ row.service_name }}
+        <i class="fa fa-external-link"></i>
+      </a>
+    </ng-template>
+  </ng-container>
+  <ng-template #noUrl>{{row.service_name}}</ng-template>
+</ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts
index 82a975c9df47ed58f6de09ec861a47b4e5a8ee0e..72a07de971804f0195c6719322fef14ec1615f9c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts
@@ -27,6 +27,7 @@ import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
 import { PlacementPipe } from './placement.pipe';
 import { ServiceFormComponent } from './service-form/service-form.component';
+import { SettingsService } from '~/app/shared/api/settings.service';
 
 const BASE_URL = 'services';
 
@@ -41,6 +42,8 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
   table: TableComponent;
   @ViewChild('runningTpl', { static: true })
   public runningTpl: TemplateRef<any>;
+  @ViewChild('urlTpl', { static: true })
+  public urlTpl: TemplateRef<any>;
 
   @Input() hostname: string;
 
@@ -71,6 +74,8 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
   isLoadingServices = false;
   selection: CdTableSelection = new CdTableSelection();
   icons = Icons;
+  serviceUrls = { grafana: '', prometheus: '', alertmanager: '' };
+  isMgmtGateway: boolean = false;
 
   constructor(
     private actionLabels: ActionLabelsI18n,
@@ -80,7 +85,8 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
     private cephServiceService: CephServiceService,
     private relativeDatePipe: RelativeDatePipe,
     private taskWrapperService: TaskWrapperService,
-    private router: Router
+    private router: Router,
+    private settingsService: SettingsService
   ) {
     super();
     this.permissions = this.authStorageService.getPermissions();
@@ -148,7 +154,8 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
       {
         name: $localize`Service`,
         prop: 'service_name',
-        flexGrow: 1
+        flexGrow: 1,
+        cellTemplate: this.urlTpl
       },
       {
         name: $localize`Placement`,
@@ -178,6 +185,12 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
       this.orchStatus = status;
       this.showDocPanel = !status.available;
     });
+
+    if (!this.isMgmtGateway) {
+      this.configureServiceUrl('api/grafana/url', 'grafana');
+      this.configureServiceUrl('ui-api/prometheus/prometheus-api-host', 'prometheus');
+      this.configureServiceUrl('ui-api/prometheus/alertmanager-api-host', 'alertmanager');
+    }
   }
 
   ngOnChanges() {
@@ -219,6 +232,9 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
         this.services = services;
         this.count = pagination_obs.count;
         this.services = this.services.filter((col: any) => {
+          if (col.service_type === 'mgmt-gateway' && col.status.running) {
+            this.isMgmtGateway = true;
+          }
           return !this.hiddenServices.includes(col.service_name);
         });
         this.isLoadingServices = false;
@@ -229,6 +245,15 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
         context.error();
       }
     );
+    if (
+      this.isMgmtGateway &&
+      !this.services.find(
+        (service: CephServiceSpec) =>
+          service.service_type !== 'mgmt-gateway' && service.status.running > 0
+      )
+    ) {
+      this.isMgmtGateway = false;
+    }
   }
 
   updateSelection(selection: CdTableSelection) {
@@ -258,4 +283,10 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
           )
     });
   }
+
+  private configureServiceUrl(url: string, serviceType: string) {
+    this.settingsService.ifSettingConfigured(url, (url) => {
+      this.serviceUrls[serviceType] = url;
+    });
+  }
 }