mgr/dashboard: Add "About" modal

Fixes: https://tracker.ceph.com/issues/24646
Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
new file mode 100644 (file)
index 0000000..ed57049
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
@@ -0,0 +1,26 @@
+<div class="modal-header">
+  <button type="button"
+          class="close pull-right"
+          aria-label="Close"
+          (click)="modalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <h1>ceph</h1>
+  <div class="product-versions">
+    <strong>Ceph version</strong>
+    {{ versionNumber }}
+    <br>
+    {{ versionHash }}
+    <br>
+    {{ versionName }}
+  </div>
+</div>
+<div class="modal-footer">
+  <div class="text-right">
+    <img src="assets/Ceph_Logo_Stacked_RGB_120411_fa_348x348.png"
+         class="ceph-logo"
+         alt="Ceph">
+  </div>
+</div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
new file mode 100644 (file)
index 0000000..f80b0e1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
@@ -0,0 +1,22 @@
+.product-versions {
+  margin-top: 30px;
+}
+.product-versions strong {
+  margin-right: 10px;
+}
+.modal-header {
+  border-bottom: none;
+}
+.modal-body {
+  padding-left: 80px;
+  padding-right: 80px;
+}
+.modal-footer {
+  border-top: none;
+}
+h1 {
+  font-size: 4em;
+}
+.ceph-logo {
+  width: 25%;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.spec.ts
new file mode 100644 (file)
index 0000000..d2c5370
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.spec.ts
@@ -0,0 +1,46 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BsModalRef } from 'ngx-bootstrap';
+import 'rxjs/add/observable/of';
+import { Observable } from 'rxjs/Observable';
+
+import { SummaryService } from '../../../shared/services/summary.service';
+import { SharedModule } from '../../../shared/shared.module';
+import { configureTestBed } from '../../../shared/unit-test-helper';
+import { AboutComponent } from './about.component';
+
+class SummaryServiceMock {
+  summaryData$ = Observable.of({
+    version:
+      'ceph version 14.0.0-855-gb8193bb4cd ' +
+      '(b8193bb4cda16ccc5b028c3e1df62bc72350a15d) nautilus (dev)'
+  });
+}
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  configureTestBed({
+    imports: [SharedModule, HttpClientTestingModule],
+    declarations: [AboutComponent],
+    providers: [BsModalRef, { provide: SummaryService, useClass: SummaryServiceMock }]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should parse version', () => {
+    expect(component.versionNumber).toBe('14.0.0-855-gb8193bb4cd');
+    expect(component.versionHash).toBe('(b8193bb4cda16ccc5b028c3e1df62bc72350a15d)');
+    expect(component.versionName).toBe('nautilus (dev)');
+  });
+});

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts
new file mode 100644 (file)
index 0000000..471e4ce
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+import { BsModalRef } from 'ngx-bootstrap';
+import { Subscription } from 'rxjs';
+
+import { SummaryService } from '../../../shared/services/summary.service';
+
+@Component({
+  selector: 'cd-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit, OnDestroy {
+  versionNumber: string;
+  versionHash: string;
+  versionName: string;
+  subs: Subscription;
+
+  constructor(public modalRef: BsModalRef, private summaryService: SummaryService) {}
+
+  ngOnInit() {
+    this.subs = this.summaryService.summaryData$.subscribe((summary: any) => {
+      if (!summary) {
+        return;
+      }
+      const version = summary.version.replace('ceph version ', '').split(' ');
+      this.versionNumber = version[0];
+      this.versionHash = version[1];
+      this.versionName = version.slice(2, version.length).join(' ');
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
index 629c62418a0f80a189b66fb19102947c52099c10..b2f0945691179ecdaab02c195bc84b90b738ee7f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
@@ -24,5 +24,11 @@
          target="_blank">API
       </a>
     </li>
+    <li>
+      <a i18n
+         class="dropdown-item"
+         (click)="openAboutModal()">About
+      </a>
+    </li>
   </ul>
 </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
index 74a554a177ecf1460fd8c787120d34c223a00938..563f9a24349bbc3ab6285075e3a907dcbf54ce07 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
+import { BsModalRef, BsModalService } from 'ngx-bootstrap';
+
 import { CephReleaseNamePipe } from '../../../shared/pipes/ceph-release-name.pipe';
 import { SummaryService } from '../../../shared/services/summary.service';
+import { AboutComponent } from '../about/about.component';
 
 @Component({
   selector: 'cd-dashboard-help',
@@ -9,11 +12,14 @@ import { SummaryService } from '../../../shared/services/summary.service';
   styleUrls: ['./dashboard-help.component.scss']
 })
 export class DashboardHelpComponent implements OnInit {
-
   docsUrl: string;
+  modalRef: BsModalRef;
 
-  constructor(private summaryService: SummaryService,
-              private cephReleaseNamePipe: CephReleaseNamePipe) {}
+  constructor(
+    private summaryService: SummaryService,
+    private cephReleaseNamePipe: CephReleaseNamePipe,
+    private modalService: BsModalService
+  ) {}
 
   ngOnInit() {
     const subs = this.summaryService.summaryData$.subscribe((summary: any) => {
@@ -25,4 +31,8 @@ export class DashboardHelpComponent implements OnInit {
       subs.unsubscribe();
     });
   }
+
+  openAboutModal() {
+    this.modalRef = this.modalService.show(AboutComponent);
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index 54bf549d2eeef0df6f5952f7458172b620360ca7..aaf9bb91fe80a704982b569959e56824fb32cb6b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -7,12 +7,14 @@ import { BsDropdownModule, CollapseModule, PopoverModule, TooltipModule } from '
 import { AppRoutingModule } from '../../app-routing.module';
 import { SharedModule } from '../../shared/shared.module';
 import { AuthModule } from '../auth/auth.module';
+import { AboutComponent } from './about/about.component';
 import { DashboardHelpComponent } from './dashboard-help/dashboard-help.component';
 import { NavigationComponent } from './navigation/navigation.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { TaskManagerComponent } from './task-manager/task-manager.component';
 
 @NgModule({
+  entryComponents: [AboutComponent],
   imports: [
     CommonModule,
     AuthModule,
@@ -25,6 +27,7 @@ import { TaskManagerComponent } from './task-manager/task-manager.component';
     RouterModule
   ],
   declarations: [
+    AboutComponent,
     NavigationComponent,
     NotificationsComponent,
     TaskManagerComponent,

diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/Ceph_Logo_Stacked_RGB_120411_fa_348x348.png b/src/pybind/mgr/dashboard/frontend/src/assets/Ceph_Logo_Stacked_RGB_120411_fa_348x348.png
new file mode 100644 (file)
index 0000000..d46bd73
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/Ceph_Logo_Stacked_RGB_120411_fa_348x348.png differ