diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/core/layouts')
12 files changed, 267 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.html new file mode 100644 index 000000000..0680b43f9 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.html @@ -0,0 +1 @@ +<router-outlet></router-outlet> diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.spec.ts new file mode 100644 index 000000000..faee6aa9b --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { configureTestBed } from '~/testing/unit-test-helper'; +import { BlankLayoutComponent } from './blank-layout.component'; + +describe('DefaultLayoutComponent', () => { + let component: BlankLayoutComponent; + let fixture: ComponentFixture<BlankLayoutComponent>; + + configureTestBed({ + declarations: [BlankLayoutComponent], + imports: [RouterTestingModule] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BlankLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.ts new file mode 100644 index 000000000..761bb3b87 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'cd-blank-layout', + templateUrl: './blank-layout.component.html', + styleUrls: ['./blank-layout.component.scss'] +}) +export class BlankLayoutComponent {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html new file mode 100644 index 000000000..1222fcc2a --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html @@ -0,0 +1,34 @@ +<main class="login full-height"> + <header> + <nav class="navbar p-4"> + <a class="navbar-brand"></a> + <div class="form-inline"> + <cd-language-selector></cd-language-selector> + </div> + </nav> + </header> + <section> + <div class="container"> + <div class="row full-height"> + <div class="col-sm-12 col-md-6 d-sm-block login-form"> + <router-outlet></router-outlet> + </div> + <div class="col-sm-12 col-md-6 d-sm-block branding-info"> + <img src="assets/Ceph_Ceph_Logo_with_text_white.svg" + alt="Ceph" + class="img-fluid pb-3"> + <ul class="list-inline"> + <li class="list-inline-item p-3" + *ngFor="let docItem of docItems"> + <cd-doc section="{{ docItem.section }}" + docText="{{ docItem.text }}" + noSubscribe="true" + i18n-docText></cd-doc> + </li> + </ul> + <cd-custom-login-banner></cd-custom-login-banner> + </div> + </div> + </div> + </section> +</main> diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss new file mode 100644 index 000000000..d5c9f73ec --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss @@ -0,0 +1,61 @@ +@use './src/styles/vendor/variables' as vv; + +::ng-deep cd-login-layout .login { + background-color: vv.$secondary; + background-image: url('../../../../assets/ceph_background.gif'); + background-position: right bottom; + background-repeat: no-repeat; + color: vv.$body-color-bright; + + header { + position: absolute; + width: 100vw; + + .navbar { + .dropdown-menu { + margin-top: 0.2rem; + + li a { + &:hover { + background-color: vv.$primary; + } + } + } + } + } + + section { + display: inline-flex; + min-height: 100vh; + width: 100vw; + } + + .list-inline { + margin-bottom: 0; + margin-left: 20%; + } + + a { + color: vv.$fg-color-over-dark-bg; + + &:hover { + color: vv.$fg-hover-color-over-dark-bg; + } + } + + @media screen and (min-width: vv.$screen-sm-min) { + .login-form, + .branding-info { + padding-top: 30vh; + } + } + @media screen and (max-width: vv.$screen-sm-max) { + .login-form { + padding-top: 10vh; + } + + .branding-info { + padding-top: 0; + } + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.spec.ts new file mode 100644 index 000000000..b57e9a36e --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.spec.ts @@ -0,0 +1,28 @@ +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { SharedModule } from '~/app/shared/shared.module'; +import { configureTestBed } from '~/testing/unit-test-helper'; +import { LoginLayoutComponent } from './login-layout.component'; + +describe('LoginLayoutComponent', () => { + let component: LoginLayoutComponent; + let fixture: ComponentFixture<LoginLayoutComponent>; + + configureTestBed({ + declarations: [LoginLayoutComponent], + imports: [BrowserAnimationsModule, HttpClientTestingModule, RouterTestingModule, SharedModule] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts new file mode 100644 index 000000000..69d591cd1 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'cd-login-layout', + templateUrl: './login-layout.component.html', + styleUrls: ['./login-layout.component.scss'] +}) +export class LoginLayoutComponent { + docItems: any[] = [ + { section: 'help', text: $localize`Help` }, + { section: 'security', text: $localize`Security` }, + { section: 'trademarks', text: $localize`Trademarks` } + ]; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.html new file mode 100644 index 000000000..3979ad7a4 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.html @@ -0,0 +1,10 @@ +<block-ui> + <cd-navigation> + <div class="container-fluid h-100" + [ngClass]="{'dashboard':isDashboardPage()} "> + <cd-context></cd-context> + <cd-breadcrumbs></cd-breadcrumbs> + <router-outlet></router-outlet> + </div> + </cd-navigation> +</block-ui> diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss new file mode 100644 index 000000000..7ec90d43e --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss @@ -0,0 +1,12 @@ +@use './src/styles/vendor/variables' as vv; + +.dashboard { + background-color: vv.$body-bg-alt; + margin: 0; + padding: 0; +} + +.container-fluid { + overflow: auto; + position: absolute; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.spec.ts new file mode 100644 index 000000000..faf8c9cdf --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.spec.ts @@ -0,0 +1,35 @@ +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { ToastrModule } from 'ngx-toastr'; + +import { RbdService } from '~/app/shared/api/rbd.service'; +import { CssHelper } from '~/app/shared/classes/css-helper'; +import { PipesModule } from '~/app/shared/pipes/pipes.module'; +import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; +import { configureTestBed } from '~/testing/unit-test-helper'; +import { WorkbenchLayoutComponent } from './workbench-layout.component'; + +describe('WorkbenchLayoutComponent', () => { + let component: WorkbenchLayoutComponent; + let fixture: ComponentFixture<WorkbenchLayoutComponent>; + + configureTestBed({ + imports: [RouterTestingModule, ToastrModule.forRoot(), PipesModule, HttpClientTestingModule], + declarations: [WorkbenchLayoutComponent], + schemas: [NO_ERRORS_SCHEMA], + providers: [AuthStorageService, CssHelper, RbdService] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WorkbenchLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.ts new file mode 100644 index 000000000..f2070be5f --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.ts @@ -0,0 +1,39 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Subscription } from 'rxjs'; + +import { FaviconService } from '~/app/shared/services/favicon.service'; +import { SummaryService } from '~/app/shared/services/summary.service'; +import { TaskManagerService } from '~/app/shared/services/task-manager.service'; + +@Component({ + selector: 'cd-workbench-layout', + templateUrl: './workbench-layout.component.html', + styleUrls: ['./workbench-layout.component.scss'], + providers: [FaviconService] +}) +export class WorkbenchLayoutComponent implements OnInit, OnDestroy { + private subs = new Subscription(); + + constructor( + private router: Router, + private summaryService: SummaryService, + private taskManagerService: TaskManagerService, + private faviconService: FaviconService + ) {} + + ngOnInit() { + this.subs.add(this.summaryService.startPolling()); + this.subs.add(this.taskManagerService.init(this.summaryService)); + this.faviconService.init(); + } + + ngOnDestroy() { + this.subs.unsubscribe(); + } + + isDashboardPage() { + return this.router.url === '/dashboard'; + } +} |