From 2dfe280ac0d080d4fe4de44f001cedb335a1d98d Mon Sep 17 00:00:00 2001 From: bryanmontalvan <68972382+bryanmontalvan@users.noreply.github.com> Date: Thu, 7 Jul 2022 12:36:15 -0400 Subject: [PATCH] Start of landing-page dashboard revamp v3 This commit add the following - A new dashboard component, which will exist in parallel with in the current landing-page - Created a route for this dashboard `/dashboard_3` - Created a bare-bones bootstrap grid with mock-up card components Signed-off-by: bryanmontalvan Signed-off-by: Pedro Gonzalez Gomez --- .../frontend/src/app/app-routing.module.ts | 2 + .../frontend/src/app/ceph/ceph.module.ts | 2 + .../new-dashboard/card/card.component.html | 18 ++++++++ .../new-dashboard/card/card.component.scss | 40 ++++++++++++++++++ .../new-dashboard/card/card.component.spec.ts | 24 +++++++++++ .../ceph/new-dashboard/card/card.component.ts | 17 ++++++++ .../ceph/new-dashboard/dashboard.module.ts | 29 +++++++++++++ .../dashboard/dashboard.component.html | 41 +++++++++++++++++++ .../dashboard/dashboard.component.scss | 3 ++ .../dashboard/dashboard.component.ts | 8 ++++ .../workbench-layout.component.ts | 2 +- 11 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts 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 index 333a8422ebebe..27d388093a696 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts @@ -25,6 +25,7 @@ import { ServiceFormComponent } from './ceph/cluster/services/service-form/servi import { ServicesComponent } from './ceph/cluster/services/services.component'; import { TelemetryComponent } from './ceph/cluster/telemetry/telemetry.component'; import { DashboardComponent } from './ceph/dashboard/dashboard/dashboard.component'; +import { NewDashboardComponent } from './ceph/new-dashboard/dashboard/dashboard.component'; import { NfsFormComponent } from './ceph/nfs/nfs-form/nfs-form.component'; import { NfsListComponent } from './ceph/nfs/nfs-list/nfs-list.component'; import { PerformanceCounterComponent } from './ceph/performance-counter/performance-counter/performance-counter.component'; @@ -88,6 +89,7 @@ const routes: Routes = [ canActivateChild: [AuthGuardService, ChangePasswordGuardService], children: [ { path: 'dashboard', component: DashboardComponent }, + { path: 'dashboard_3', component: NewDashboardComponent }, { path: 'error', component: ErrorComponent }, // Cluster diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/ceph.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/ceph.module.ts index 47772304b505f..17d6246976153 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/ceph.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/ceph.module.ts @@ -5,6 +5,7 @@ import { SharedModule } from '../shared/shared.module'; import { CephfsModule } from './cephfs/cephfs.module'; import { ClusterModule } from './cluster/cluster.module'; import { DashboardModule } from './dashboard/dashboard.module'; +import { NewDashboardModule } from './new-dashboard/dashboard.module'; import { NfsModule } from './nfs/nfs.module'; import { PerformanceCounterModule } from './performance-counter/performance-counter.module'; @@ -13,6 +14,7 @@ import { PerformanceCounterModule } from './performance-counter/performance-coun CommonModule, ClusterModule, DashboardModule, + NewDashboardModule, PerformanceCounterModule, CephfsModule, NfsModule, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html new file mode 100644 index 0000000000000..8a414fb63a163 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html @@ -0,0 +1,18 @@ +
+
+

+ {{ cardTitle }} + + + {{ cardTitle }} + +

+ +
+ +
+
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss new file mode 100644 index 0000000000000..897d09a9a4b93 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss @@ -0,0 +1,40 @@ +@use './src/styles/vendor/variables' as vv; +@use './src/styles/defaults/mixins'; + +$card-font-min-width: 320px; +$card-font-max-width: 2048px; +$card-font-min-size: 12px; +$card-font-max-size: 21px; + +.card { + @include mixins.fluid-font-size( + $card-font-min-width, + $card-font-max-width, + $card-font-min-size, + $card-font-max-size + ); + border: 0.5px solid vv.$gray-300; + border-radius: 3px; + height: 100%; + + .card-body { + padding-top: 40px !important; + + .card-title { + left: -0.6rem; + position: absolute; + top: -0.3rem; + } + } +} + +.no-center { + left: unset; + position: unset; + top: unset; + transform: unset; +} + +.content-highlight { + font-weight: bold; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.spec.ts new file mode 100644 index 0000000000000..c7817894d7671 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { configureTestBed } from '~/testing/unit-test-helper'; +import { CardComponent } from './card.component'; + +describe('CardComponent', () => { + let component: CardComponent; + let fixture: ComponentFixture; + + configureTestBed({ + imports: [RouterTestingModule], + declarations: [CardComponent] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CardComponent); + component = fixture.componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.ts new file mode 100644 index 0000000000000..c11e256d28cd1 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.ts @@ -0,0 +1,17 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'cd-card', + templateUrl: './card.component.html', + styleUrls: ['./card.component.scss'] +}) +export class CardComponent { + @Input() + cardTitle: string; + @Input() + link: string; + @Input() + cardClass = ''; + @Input() + contentClass: string; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts new file mode 100644 index 0000000000000..87c9eca3e4e01 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard.module.ts @@ -0,0 +1,29 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; + +import { NgbNavModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'; +import { ChartsModule } from 'ng2-charts'; + +import { SharedModule } from '~/app/shared/shared.module'; +import { CephSharedModule } from '../shared/ceph-shared.module'; +import { CardComponent } from './card/card.component'; +import { NewDashboardComponent } from './dashboard/dashboard.component'; + +@NgModule({ + imports: [ + CephSharedModule, + CommonModule, + NgbNavModule, + SharedModule, + ChartsModule, + RouterModule, + NgbPopoverModule, + FormsModule, + ReactiveFormsModule + ], + + declarations: [NewDashboardComponent, CardComponent] +}) +export class NewDashboardModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html new file mode 100644 index 0000000000000..26e25d194a651 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html @@ -0,0 +1,41 @@ +
+
+ + Text + + + + Text + + + + Text + +
+ +
+ + Text + + + + Text + + + + Text + +
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss new file mode 100644 index 0000000000000..04eee2d6f2560 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss @@ -0,0 +1,3 @@ +div { + padding-top: 20px; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts new file mode 100644 index 0000000000000..52fccfe1e8626 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'cd-new-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'] +}) +export class NewDashboardComponent {} 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 index f2070be5fe0e9..3840cbe3561cf 100644 --- 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 @@ -34,6 +34,6 @@ export class WorkbenchLayoutComponent implements OnInit, OnDestroy { } isDashboardPage() { - return this.router.url === '/dashboard'; + return this.router.url === '/dashboard' || this.router.url === '/dashboard_3'; } } -- 2.39.5