mgr/dashboard: make the logs component configurable and reusable

This will make the logs component easier to reuse for now in upgrade
component and later, wherever we want

Fixes: https://tracker.ceph.com/issues/62016
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit 0243a955b8be31be89ba939f21287780fa003cc8)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
index cd03f04d55383d86037ed2764e287a726e58e991..68dc0f87faf48203901b375ed9ba8de18d9443c7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -4,7 +4,9 @@
   <nav ngbNav
        #nav="ngbNav"
        class="nav-tabs"
-       cdStatefulTab="logs">
+       cdStatefulTab="logs"
+       [cdStatefulTabDefault]="defaultTab"
+       [hidden]="hideNavLinks">
     <ng-container ngbNavItem="cluster-logs">
       <a ngbNavLink
          i18n>Cluster Logs</a>
@@ -13,14 +15,16 @@
              *ngIf="clog">
           <div class="btn-group"
                role="group"
-               *ngIf="clog.length">
+               *ngIf="clog.length && !hideClusterLogs">
             <cd-download-button [objectItem]="clog"
                                 [textItem]="clogText"
-                                fileName="cluster_log">
+                                fileName="cluster_log"
+                                *ngIf="!hideDwnldCpyBtn">
             </cd-download-button>
             <cd-copy-2-clipboard-button
                     [source]="clogText"
-                    [byId]="false">
+                    [byId]="false"
+                    *ngIf="!hideDwnldCpyBtn">
             </cd-copy-2-clipboard-button>
           </div>
           <div class="card-body">
@@ -41,17 +45,19 @@
          i18n>Audit Logs</a>
       <ng-template ngbNavContent>
         <div class="card bg-light mb-3"
-             *ngIf="audit_log">
+             *ngIf="audit_log && !hideAuditLogs">
           <div class="btn-group"
                role="group"
                *ngIf="audit_log.length">
             <cd-download-button [objectItem]="audit_log"
                                 [textItem]="auditLogText"
-                                fileName="audit_log">
+                                fileName="audit_log"
+                                *ngIf="!hideDwnldCpyBtn">
             </cd-download-button>
             <cd-copy-2-clipboard-button
                     [source]="auditLogText"
-                    [byId]="false">
+                    [byId]="false"
+                    *ngIf="!hideDwnldCpyBtn">
             </cd-copy-2-clipboard-button>
           </div>
           <div class="card-body">
@@ -71,7 +77,7 @@
       <a ngbNavLink
          i18n>Daemon Logs</a>
       <ng-template ngbNavContent>
-        <ng-container *ngIf="lokiServiceStatus$ | async as lokiServiceStatus; else daemonLogsTpl">
+        <ng-container *ngIf="!hideDaemonLogs && lokiServiceStatus$ | async as lokiServiceStatus ; else daemonLogsTpl ">
           <div *ngIf="promtailServiceStatus$ | async as promtailServiceStatus; else daemonLogsTpl">
             <cd-grafana i18n-title
                         title="Daemon logs"
@@ -90,7 +96,8 @@
 </div>
 
 <ng-template #logFiltersTpl>
-  <div class="row mb-3">
+  <div class="row mb-3"
+       *ngIf="!hideFilterTools">
   <div class="col-lg-10 d-flex">
     <div class="col-sm-1 me-3">
       <label for="logs-priority"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts
index ed8c721eaf3e1f6b3440d091c4c829dc01edf366..acddc0194b21297825b931caf1939dca4a12e1df 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts
@@ -1,5 +1,5 @@
 import { DatePipe } from '@angular/common';
-import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
 
 import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 import { Observable } from 'rxjs';
@@ -15,6 +15,21 @@ import { Icons } from '~/app/shared/enum/icons.enum';
   styleUrls: ['./logs.component.scss']
 })
 export class LogsComponent implements OnInit, OnDestroy {
+  @Input()
+  hideClusterLogs = false;
+  @Input()
+  hideAuditLogs = false;
+  @Input()
+  hideDaemonLogs = false;
+  @Input()
+  hideNavLinks = false;
+  @Input()
+  hideFilterTools = false;
+  @Input()
+  hideDwnldCpyBtn = false;
+  @Input()
+  defaultTab = '';
+
   contentData: any;
   clog: Array<any>;
   audit_log: Array<any>;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts
index 5cebefbc98a76f7fd4eaae5556afaeda3e06afed..295bb008c36174df82e3a6ae3723c6c9a35ec98d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts
@@ -25,4 +25,14 @@ describe('StatefulTabDirective', () => {
     directive.onNavChange(event);
     expect(window.localStorage.getItem('tabset_bar')).toBe('xyz');
   });
+
+  it('should select the default tab if provided', () => {
+    const nav = new NgbNav('tablist', new NgbNavConfig(new NgbConfig()), <any>null, null);
+    spyOn(nav, 'select');
+    const directive = new StatefulTabDirective(nav);
+    directive.cdStatefulTab = 'bar';
+    directive.cdStatefulTabDefault = 'defaultTab';
+    directive.ngOnInit();
+    expect(nav.select).toHaveBeenCalledWith('defaultTab');
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts
index cf6f27e9592d473073ef838b974f2233ba46908b..67d6d0b68f6176f4894bd0bdddfc53a08be6d3bf 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts
@@ -8,6 +8,8 @@ import { NgbNav, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
 export class StatefulTabDirective implements OnInit {
   @Input()
   cdStatefulTab: string;
+  @Input()
+  cdStatefulTabDefault = '';
 
   private localStorage = window.localStorage;
 
@@ -15,7 +17,8 @@ export class StatefulTabDirective implements OnInit {
 
   ngOnInit() {
     // Is an activate tab identifier stored in the local storage?
-    const activeId = this.localStorage.getItem(`tabset_${this.cdStatefulTab}`);
+    const activeId =
+      this.cdStatefulTabDefault || this.localStorage.getItem(`tabset_${this.cdStatefulTab}`);
     if (activeId) {
       this.nav.select(activeId);
     }