Merge pull request #23834 from DikshaGodbole/wip-feature-24571

mgr/dashboard: Move Cluster/Audit logs from front page to dedicated Logs page Reviewed-by: Alfonso Martínez <almartin@redhat.com> Reviewed-by: Tiago Melo <tmelo@suse.com> Reviewed-by: Volker Theile <vtheile@suse.com>
ceph · Nov 26, 2018 · 924c36d · 924c36d
2 parents c98db4e + c8820b8
commit 924c36d
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 64 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/...ybind/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>