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.

Fixes: https://tracker.ceph.com/issues/24571
Signed-off-by: Diksha Godbole <diksha.godbole@gmail.com>

src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { RbdListComponent } from './ceph/block/rbd-list/rbd-list.component';
 import { CephfsListComponent } from './ceph/cephfs/cephfs-list/cephfs-list.component';
 import { ConfigurationComponent } from './ceph/cluster/configuration/configuration.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';
@@ -79,6 +80,12 @@ const routes: Routes = [
     canActivate: [AuthGuardService],
     data: { breadcrumbs: 'Cluster/Configuration Documentation' }
   },
+  {
+    path: 'logs',
+    component: LogsComponent,
+    canActivate: [AuthGuardService],
+    data: { breadcrumbs: 'Cluster/Logs' }
+  },
   {
     path: 'perf_counters/:type/:id',
     component: PerformanceCounterComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts

@@ -6,11 +6,11 @@ import { RouterModule } from '@angular/router';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TabsModule } from 'ngx-bootstrap/tabs';
-
 import { SharedModule } from '../../shared/shared.module';
 import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
 import { ConfigurationComponent } from './configuration/configuration.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';
@@ -39,7 +39,8 @@ import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.co
     OsdDetailsComponent,
     OsdPerformanceHistogramComponent,
     OsdScrubModalComponent,
-    OsdFlagsModalComponent
+    OsdFlagsModalComponent,
+    LogsComponent
   ]
 })
 export class ClusterModule {}

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

@@ -0,0 +1,41 @@
+<div *ngIf="contentData">
+  <div class="row">
+    <div class="col-md-12">
+	<!-- LOGS -->
+	<div class="well"
+	     *ngIf="contentData.clog || contentData.audit_log">
+	  <fieldset>
+	    <legend i18n>Logs</legend>
+	    <tabset>
+	      <tab heading="Cluster log"
+		   class="text-monospace"
+		   *ngIf="contentData.clog"
+		   i18n-heading>
+		<span *ngFor="let line of contentData.clog">
+		  {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
+		  <span [ngStyle]="line">
+		    {{ line.message }}
+		    <br>
+		  </span>
+		</span>
+	      </tab>
+	      <tab heading="Audit log"
+		   class="text-monospace"
+		   *ngIf="contentData.audit_log"
+		   i18n-heading>
+		<span *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>
+		</span>
+	      </tab>
+	    </tabset>
+	  </fieldset>
+	</div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogsComponent } from './logs.component';
+
+describe('LogsComponent', () => {
+  let component: LogsComponent;
+  let fixture: ComponentFixture<LogsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LogsComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+import * as _ from 'lodash';
+
+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;
+    });
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html

@@ -82,6 +82,14 @@
                routerLink="/configuration">Configuration Doc.
             </a>
           </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_configuration"
+              *ngIf="permissions.configOpt.read">
+            <a i18n
+               class="dropdown-item"
+               routerLink="/logs">Logs
+            </a>
+          </li>
         </ul>
       </li>