mgr/dashboard: Add help menu entry

Signed-off-by: Ricardo Marques <rimarques@suse.com>

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
new file mode 100644 (file)
index 0000000..0204c71
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
@@ -0,0 +1,27 @@
+<div dropdown>
+  <a dropdownToggle
+     class="dropdown-toggle"
+     data-toggle="dropdown">
+    <i class="fa fa-question-circle-o"></i>
+    <span i18n>Help</span>
+    <span class="caret"></span>
+  </a>
+  <ul *dropdownMenu
+      class="dropdown-menu">
+    <li>
+      <a i18n
+         class="dropdown-item"
+         [ngClass]="{'disabled': !docsUrl}"
+         href="{{ docsUrl }}"
+         target="_blank">Documentation
+      </a>
+    </li>
+    <li>
+      <a i18n
+         class="dropdown-item"
+         href="/docs"
+         target="_blank">API
+      </a>
+    </li>
+  </ul>
+</div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.scss
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.spec.ts
new file mode 100644 (file)
index 0000000..f6a3e5b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.spec.ts
@@ -0,0 +1,27 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SharedModule } from '../../../shared/shared.module';
+import { configureTestBed } from '../../../shared/unit-test-helper';
+import { DashboardHelpComponent } from './dashboard-help.component';
+
+describe('DashboardHelpComponent', () => {
+  let component: DashboardHelpComponent;
+  let fixture: ComponentFixture<DashboardHelpComponent>;
+
+  configureTestBed({
+    imports: [HttpClientTestingModule, SharedModule],
+    declarations: [DashboardHelpComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardHelpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+});

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
new file mode 100644 (file)
index 0000000..10adf68
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+import { CephReleaseNamePipe } from '../../../shared/pipes/ceph-release-name.pipe';
+import { SummaryService } from '../../../shared/services/summary.service';
+
+@Component({
+  selector: 'cd-dashboard-help',
+  templateUrl: './dashboard-help.component.html',
+  styleUrls: ['./dashboard-help.component.scss']
+})
+export class DashboardHelpComponent implements OnInit {
+
+  docsUrl: string;
+
+  constructor(private summaryService: SummaryService,
+              private cephReleaseNamePipe: CephReleaseNamePipe) {}
+
+  ngOnInit() {
+    const subs = this.summaryService.summaryData$.subscribe((summary: any) => {
+      const releaseName = this.cephReleaseNamePipe.transform(summary.version);
+      this.docsUrl = `http://docs.ceph.com/docs/${releaseName}/mgr/dashboard/`;
+      subs.unsubscribe();
+    });
+  }
+}

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 acac6adce0247798e8995ddfb3a1b82053680b32..40760e9d8f4d30e25fee3966b43d25dffcfca4c6 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,6 +7,7 @@ import { BsDropdownModule, CollapseModule, PopoverModule } from 'ngx-bootstrap';
 import { AppRoutingModule } from '../../app-routing.module';
 import { SharedModule } from '../../shared/shared.module';
 import { AuthModule } from '../auth/auth.module';
+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';
@@ -22,7 +23,12 @@ import { TaskManagerComponent } from './task-manager/task-manager.component';
     SharedModule,
     RouterModule
   ],
-  declarations: [NavigationComponent, NotificationsComponent, TaskManagerComponent],
+  declarations: [
+    NavigationComponent,
+    NotificationsComponent,
+    TaskManagerComponent,
+    DashboardHelpComponent
+  ],
   exports: [NavigationComponent]
 })
 export class NavigationModule {}

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 942436cb949c85c80176817d0b93df536c3c937d..a215f51c5690effda9441d99ea468d646a1a6148 100644 (file)
--- 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
@@ -204,6 +204,9 @@
       <li>
         <cd-notifications class="oa-navbar"></cd-notifications>
       </li>
+      <li>
+        <cd-dashboard-help class="oa-navbar"></cd-dashboard-help>
+      </li>
       <li class="tc_logout">
         <cd-logout class="oa-navbar"></cd-logout>
       </li>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
index f7f20a3dd5e128a0b7f59770b2899aa5653d4fe5..64616df677268432f56611f0a2f5fa5698ec2352 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
@@ -8,6 +8,7 @@ import { NotificationService } from '../../../shared/services/notification.servi
 import { SharedModule } from '../../../shared/shared.module';
 import { configureTestBed } from '../../../shared/unit-test-helper';
 import { LogoutComponent } from '../../auth/logout/logout.component';
+import { DashboardHelpComponent } from '../dashboard-help/dashboard-help.component';
 import { NotificationsComponent } from '../notifications/notifications.component';
 import { TaskManagerComponent } from '../task-manager/task-manager.component';
 import { NavigationComponent } from './navigation.component';
@@ -30,7 +31,8 @@ describe('NavigationComponent', () => {
       NavigationComponent,
       NotificationsComponent,
       LogoutComponent,
-      TaskManagerComponent
+      TaskManagerComponent,
+      DashboardHelpComponent
     ],
     providers: [{ provide: NotificationService, useValue: fakeService }]
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/openattic-theme.scss b/src/pybind/mgr/dashboard/frontend/src/openattic-theme.scss
index 235de7feb7b5d4b83124d22663717a807820e299..e0822d37cf781e5a49e527acc454873340038600 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/openattic-theme.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/openattic-theme.scss
@@ -323,8 +323,12 @@ ul.task-queue-pagination {
 .navbar-openattic .navbar-collapse {
   padding: 0;
 }
+.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>ul>li>.dropdown-item {
+  font-size: 12px;
+}
 .navbar-openattic .navbar-nav>li>a,
-.navbar-openattic .navbar-nav>li>.oa-navbar>a {
+.navbar-openattic .navbar-nav>li>.oa-navbar>a,
+.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a {
   color: #ececec;
   line-height: 1;
   padding: 10px 20px;
@@ -335,11 +339,15 @@ ul.task-queue-pagination {
 .navbar-openattic .navbar-nav>li>a:focus,
 .navbar-openattic .navbar-nav>li>a:hover,
 .navbar-openattic .navbar-nav>li>.oa-navbar>a:focus,
-.navbar-openattic .navbar-nav>li>.oa-navbar>a:hover {
+.navbar-openattic .navbar-nav>li>.oa-navbar>a:hover,
+.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a:focus,
+.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a:hover {
   color: #ececec;
 }
 .navbar-openattic .navbar-nav>li>a:hover,
-.navbar-openattic .navbar-nav>li>.oa-navbar>a:hover {
+.navbar-openattic .navbar-nav>li>.oa-navbar>a:hover,
+.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a:hover,
+.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown].open>a {
   background-color: #505050;
 }
 .navbar-openattic .navbar-nav>.open>a,
@@ -347,7 +355,10 @@ ul.task-queue-pagination {
 .navbar-openattic .navbar-nav>.open>a:focus,
 .navbar-openattic .navbar-nav>.open>.oa-navbar>a,
 .navbar-openattic .navbar-nav>.open>.oa-navbar>a:hover,
-.navbar-openattic .navbar-nav>.open>.oa-navbar>a:focus {
+.navbar-openattic .navbar-nav>.open>.oa-navbar>a:focus,
+.navbar-openattic .navbar-nav>.open>.oa-navbar>[dropdown]>a,
+.navbar-openattic .navbar-nav>.open>.oa-navbar>[dropdown]>a:hover,
+.navbar-openattic .navbar-nav>.open>.oa-navbar>li>a:focus {
   color: #ececec;
   border-color: transparent;
   background-color: transparent;