From c8820b8b56ad0467a1cff6917777b50d695c9c9b Mon Sep 17 00:00:00 2001
From: Diksha Godbole <diksha.godbole@gmail.com>
Date: Wed, 29 Aug 2018 12:26:59 +0530
Subject: [PATCH] mgr/dashboard: Added new logs component

Added new Logs component and created a cluster->logs menu item. Moved the logs from the dashboard home page to the dedicated logs page.Additional comments resolved.Dropped Logs from health component.

Fixes: https://tracker.ceph.com/issues/24571
Signed-off-by: Diksha Godbole <diksha.godbole@gmail.com>
---
 .../frontend/src/app/app-routing.module.ts    |  7 ++++
 .../src/app/ceph/cluster/cluster.module.ts    |  4 +-
 .../app/ceph/cluster/logs/logs.component.html | 35 ++++++++++++++++
 .../app/ceph/cluster/logs/logs.component.scss |  4 ++
 .../ceph/cluster/logs/logs.component.spec.ts  | 28 +++++++++++++
 .../app/ceph/cluster/logs/logs.component.ts   | 32 ++++++++++++++
 .../dashboard/health/health.component.html    | 42 +------------------
 .../dashboard/health/health.component.spec.ts | 17 --------
 .../ceph/dashboard/health/health.component.ts |  7 +---
 .../navigation/navigation.component.html      |  8 ++++
 10 files changed, 120 insertions(+), 64 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.spec.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
index 5164c4b76ac..dd04cfbe560 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
@@ -10,6 +10,7 @@ import { ConfigurationFormComponent } from './ceph/cluster/configuration/configu
 import { ConfigurationComponent } from './ceph/cluster/configuration/configuration.component';
 import { CrushmapComponent } from './ceph/cluster/crushmap/crushmap.component';
 import { HostsComponent } from './ceph/cluster/hosts/hosts.component';
+import { LogsComponent } from './ceph/cluster/logs/logs.component';
 import { MonitorComponent } from './ceph/cluster/monitor/monitor.component';
 import { OsdListComponent } from './ceph/cluster/osd/osd-list/osd-list.component';
 import { DashboardComponent } from './ceph/dashboard/dashboard/dashboard.component';
@@ -102,6 +103,12 @@ const routes: Routes = [
     canActivate: [AuthGuardService],
     data: { breadcrumbs: 'Cluster/CRUSH map' }
   },
+  {
+    path: 'logs',
+    component: LogsComponent,
+    canActivate: [AuthGuardService],
+    data: { breadcrumbs: 'Cluster/Logs' }
+  },
   {
     path: 'perf_counters/:type/:id',
     component: PerformanceCounterComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index ba7bb2e4dfe..bf2177d9878 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -18,6 +18,7 @@ import { ConfigurationComponent } from './configuration/configuration.component'
 import { CrushmapComponent } from './crushmap/crushmap.component';
 import { HostDetailsComponent } from './hosts/host-details/host-details.component';
 import { HostsComponent } from './hosts/hosts.component';
+import { LogsComponent } from './logs/logs.component';
 import { MonitorComponent } from './monitor/monitor.component';
 import { OsdDetailsComponent } from './osd/osd-details/osd-details.component';
 import { OsdFlagsModalComponent } from './osd/osd-flags-modal/osd-flags-modal.component';
@@ -60,7 +61,8 @@ import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.co
     ConfigurationDetailsComponent,
     ConfigurationFormComponent,
     OsdReweightModalComponent,
-    CrushmapComponent
+    CrushmapComponent,
+    LogsComponent
   ]
 })
 export class ClusterModule {}
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
new file mode 100644
index 00000000000..e3ed20b5807
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -0,0 +1,35 @@
+<div *ngIf="contentData"> 
+<tabset>
+  <tab i18n-heading
+       heading="Cluster Logs">
+  <div class="well">
+  <div *ngIf="contentData.clog">
+  <p *ngFor="let line of contentData.clog">
+    {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
+    <span [ngStyle]="line">
+    {{ line.message }}
+    <br>
+    </span>
+    </p>
+  </div>
+  </div>
+  </tab>
+
+  <tab i18n-heading
+       heading="Audit Logs">
+  <div class="well">
+  <div *ngIf="contentData.audit_log">
+    <p *ngFor="let line of contentData.audit_log">
+    {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
+    <span [ngStyle]="line">
+    <span style="font-weight: bold;">
+    {{ line.message }}
+    </span>
+    <br>
+    </span>
+    </p>
+  </div>
+  </div>
+  </tab>
+</tabset>
+</div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
new file mode 100644
index 00000000000..9d435e65d40
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
@@ -0,0 +1,4 @@
+p {
+  font-family: monospace;
+  color: black;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.spec.ts
new file mode 100644
index 00000000000..6a8007edbb0
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.spec.ts
@@ -0,0 +1,28 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabsModule } from 'ngx-bootstrap/tabs';
+
+import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { SharedModule } from '../../../shared/shared.module';
+import { LogsComponent } from './logs.component';
+
+describe('LogsComponent', () => {
+  let component: LogsComponent;
+  let fixture: ComponentFixture<LogsComponent>;
+
+  configureTestBed({
+    imports: [HttpClientTestingModule, TabsModule.forRoot(), SharedModule],
+    declarations: [LogsComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000000..19d3ec97506
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+import { DashboardService } from '../../../shared/api/dashboard.service';
+
+@Component({
+  selector: 'cd-logs',
+  templateUrl: './logs.component.html',
+  styleUrls: ['./logs.component.scss']
+})
+export class LogsComponent implements OnInit, OnDestroy {
+  contentData: any;
+  interval: number;
+
+  constructor(private dashboardService: DashboardService) {}
+
+  ngOnInit() {
+    this.getInfo();
+    this.interval = window.setInterval(() => {
+      this.getInfo();
+    }, 5000);
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  getInfo() {
+    this.dashboardService.getHealth().subscribe((data: any) => {
+      this.contentData = data;
+    });
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
index 1c2d0519465..efe3657e3f1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -20,7 +20,7 @@
       <ng-container *ngIf="contentData.health?.checks?.length > 0">
         <ng-template #healthChecks>
           <p class="logs-link"
-             i18n>&rarr; See <a (click)="viewportScroller.scrollToAnchor('logs')">Logs</a> for more details.</p>
+             i18n>&rarr; See <a routerLink="/logs">Logs</a> for more details.</p>
           <ul>
             <li *ngFor="let check of contentData.health.checks">
               <span [ngStyle]="check.severity | healthColor">{{ check.type }}</span>: {{ check.summary.message }}
@@ -238,7 +238,7 @@
                     *ngIf="contentData.pg_info">
         <ng-template #pgStatus>
           <p class="logs-link"
-             i18n>&rarr; See <a (click)="viewportScroller.scrollToAnchor('logs')">Logs</a> for more details.</p>
+             i18n>&rarr; See <a routerLink="/logs">Logs</a> for more details.</p>
           <ul>
             <li *ngFor="let pgStatesText of contentData.pg_info.statuses | keyvalue">
               {{ pgStatesText.key }}: {{ pgStatesText.value }}
@@ -260,42 +260,4 @@
       </cd-info-card>
     </div>
   </cd-info-group>
-
-  <cd-info-group groupTitle="Logs"
-                 i18n-groupTitle
-                 class="row info-group"
-                 id="logs"
-                 *ngIf="contentData.clog || contentData.audit_log">
-
-    <cd-info-card cardTitle="Cluster"
-                  i18n-cardTitle
-                  class="col-md-12 col-lg-6"
-                  cardClass="card-medium"
-                  contentClass="no-center scroll text-monospace"
-                  *ngIf="contentData.clog">
-      <p *ngFor="let line of contentData.clog">
-        {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
-        <span [ngStyle]="line | logColor">
-          {{ line.message }}
-          <br>
-        </span>
-      </p>
-    </cd-info-card>
-    <cd-info-card cardTitle="Audit"
-                  i18n-cardTitle
-                  class="col-md-12 col-lg-6"
-                  cardClass="card-medium"
-                  contentClass="no-center scroll text-monospace"
-                  *ngIf="contentData.audit_log">
-      <p *ngFor="let line of contentData.audit_log">
-        {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
-        <span [ngStyle]="line | logColor">
-          <span style="font-weight: bold;">
-            {{ line.message }}
-          </span>
-          <br>
-        </span>
-      </p>
-    </cd-info-card>
-  </cd-info-group>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
index 58cc5db7fd1..44593d6ac97 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
@@ -140,21 +140,4 @@ describe('HealthComponent', () => {
       expect(infoGroup.querySelectorAll('cd-info-card').length).toBe(1);
     });
   });
-
-  // @TODO: remove this test when logs are no longer in landing page
-  // See https://tracker.ceph.com/issues/24571 & https://github.com/ceph/ceph/pull/23834
-  it('should render Logs group & cards in addition to the other ones', () => {
-    const payload = _.cloneDeep(healthPayload);
-    payload['clog'] = [];
-    payload['audit_log'] = [];
-
-    getHealthSpy.and.returnValue(of(payload));
-    fixture.detectChanges();
-
-    const infoGroups = fixture.debugElement.nativeElement.querySelectorAll('cd-info-group');
-    expect(infoGroups.length).toBe(4);
-
-    const infoCards = fixture.debugElement.nativeElement.querySelectorAll('cd-info-card');
-    expect(infoCards.length).toBe(20);
-  });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
index f2917f6ab62..eb65a16f7ad 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
@@ -1,4 +1,3 @@
-import { ViewportScroller } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import { I18n } from '@ngx-translate/i18n-polyfill';
@@ -15,11 +14,7 @@ export class HealthComponent implements OnInit, OnDestroy {
   contentData: any;
   interval: number;
 
-  constructor(
-    private dashboardService: DashboardService,
-    public viewportScroller: ViewportScroller,
-    private i18n: I18n
-  ) {}
+  constructor(private dashboardService: DashboardService, private i18n: I18n) {}
 
   ngOnInit() {
     this.getInfo();
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index f772617c1f5..c26ca1fbbf4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -83,6 +83,14 @@
                class="dropdown-item"
                routerLink="/crush-map">CRUSH map</a>
           </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_log"
+              *ngIf="permissions.log.read">
+            <a i18n
+               class="dropdown-item"
+               routerLink="/logs">Logs
+            </a>
+          </li>
         </ul>
       </li>
 
-- 
2.39.5