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 <bmontalv@redhat.com>
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>

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 333a8422ebebed788c7f2d5966177373d5518ff5..27d388093a69686bcc1371c3b77353cff267bca2 100644 (file)
--- 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 47772304b505ffa50bbbd0072c076e9bdb4fa994..17d6246976153694d1d750d44e66c491fb6e35e3 100644 (file)
--- 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 (file)
index 0000000..8a414fb
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html
@@ -0,0 +1,18 @@
+<div class="card shadow-sm"
+     [ngClass]="cardClass">
+  <div class="card-body align-items-center justify-content-center">
+    <h4 class="card-title m-4">
+      <a *ngIf="link; else noLinkTitle"
+         [routerLink]="link">{{ cardTitle }}</a>
+
+      <ng-template #noLinkTitle>
+        {{ cardTitle }}
+      </ng-template>
+    </h4>
+
+    <div class="card-text text-center"
+         [ngClass]="contentClass">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

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 (file)
index 0000000..897d09a
--- /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 (file)
index 0000000..c781789
--- /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<CardComponent>;
+
+  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 (file)
index 0000000..c11e256
--- /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 (file)
index 0000000..87c9eca
--- /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 (file)
index 0000000..26e25d1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
@@ -0,0 +1,41 @@
+<div class="container-fluid">
+  <div class="row mx-0">
+    <cd-card cardTitle="Details"
+             i18n-cardTitle
+             class="col-sm-3 px-3">
+             Text
+    </cd-card>
+
+    <cd-card cardTitle="Status"
+             i18n-cardTitle
+             class="col-sm-6 px-3">
+             Text
+    </cd-card>
+
+    <cd-card cardTitle="Capacity"
+             i18n-cardTitle
+             class="col-sm-3 px-3">
+             Text
+    </cd-card>
+  </div>
+
+  <div class="row mx-0">
+    <cd-card cardTitle="Inventory"
+             i18n-cardTitle
+             class="col-sm-3 px-3">
+             Text
+    </cd-card>
+
+    <cd-card cardTitle="Capacity utilization"
+             i18n-cardTitle
+             class="col-sm-6 px-3">
+             Text
+    </cd-card>
+
+    <cd-card cardTitle="Events"
+             i18n-cardTitle
+             class="col-sm-3 px-3">
+             Text
+    </cd-card>
+  </div>
+</div>

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 (file)
index 0000000..04eee2d
--- /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 (file)
index 0000000..52fccfe
--- /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 f2070be5fe0e9f2f2cf838d722aad48a2f47dd5b..3840cbe3561cf96ced298c889119b13222d146a7 100644 (file)
--- 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';
   }
 }