mgr/dashboard: changes to first layout

CHANGES:

 - Renamed dashboardcomponents

 - Removed unnecesary styling

 - Added unit tests

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 27d388093a69686bcc1371c3b77353cff267bca2..c5778092bda2385e5bce9ee95d78dad1c4f0e1c9 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
@@ -24,8 +24,8 @@ import { SilenceListComponent } from './ceph/cluster/prometheus/silence-list/sil
 import { ServiceFormComponent } from './ceph/cluster/services/service-form/service-form.component';
 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 { DeprecatedDashboardComponent } from './ceph/dashboard/dashboard/dashboard.component';
+import { DashboardComponent } 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,8 +88,8 @@ const routes: Routes = [
     canActivate: [AuthGuardService, ChangePasswordGuardService],
     canActivateChild: [AuthGuardService, ChangePasswordGuardService],
     children: [
-      { path: 'dashboard', component: DashboardComponent },
-      { path: 'dashboard_3', component: NewDashboardComponent },
+      { path: 'dashboard', component: DeprecatedDashboardComponent },
+      { path: 'dashboard_3', component: DashboardComponent },
       { path: 'error', component: ErrorComponent },
 
       // Cluster

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
index 4bdfd50a51bfd25d5125c89acbae7811303e85d5..98f29e571a2c66364b407c05364647e96b5e0dce 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
@@ -9,7 +9,7 @@ import { ChartsModule } from 'ng2-charts';
 import { SharedModule } from '~/app/shared/shared.module';
 import { CephSharedModule } from '../shared/ceph-shared.module';
 import { FeedbackComponent } from '../shared/feedback/feedback.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
+import { DeprecatedDashboardComponent } from './dashboard/dashboard.component';
 import { HealthPieComponent } from './health-pie/health-pie.component';
 import { HealthComponent } from './health/health.component';
 import { InfoCardComponent } from './info-card/info-card.component';
@@ -34,7 +34,7 @@ import { OsdSummaryPipe } from './osd-summary.pipe';
 
   declarations: [
     HealthComponent,
-    DashboardComponent,
+    DeprecatedDashboardComponent,
     MonSummaryPipe,
     OsdSummaryPipe,
     MgrSummaryPipe,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.spec.ts
index 7bc4980bb82be3945ebb9197f4edd0088536941b..86a9927129197356693e4d6fde58b7771db3b83a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.spec.ts
@@ -4,20 +4,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '~/testing/unit-test-helper';
-import { DashboardComponent } from './dashboard.component';
+import { DeprecatedDashboardComponent } from './dashboard.component';
 
 describe('DashboardComponent', () => {
-  let component: DashboardComponent;
-  let fixture: ComponentFixture<DashboardComponent>;
+  let component: DeprecatedDashboardComponent;
+  let fixture: ComponentFixture<DeprecatedDashboardComponent>;
 
   configureTestBed({
     imports: [NgbNavModule],
-    declarations: [DashboardComponent],
+    declarations: [DeprecatedDashboardComponent],
     schemas: [NO_ERRORS_SCHEMA]
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardComponent);
+    fixture = TestBed.createComponent(DeprecatedDashboardComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.ts
index 354e3890359657279488c0be4bb92c5c9d0ba5e3..b5d62a62c479733c1c2da6270e19149caed18cea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.ts
@@ -5,6 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent {
+export class DeprecatedDashboardComponent {
   hasGrafana = false; // TODO: Temporary var, remove when grafana is implemented
 }

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
index 8a414fb63a163bcf27b9f9bd937868c50c9528a9..c483de92bbad2f85c6cd37d09ce32a6914aea582 100644 (file)
--- 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
@@ -1,17 +1,9 @@
-<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>
+<div class="card shadow-sm">
+  <div class="card-body">
+    <h4 class="card-title m-2">
+        {{ title }}
     </h4>
-
-    <div class="card-text text-center"
-         [ngClass]="contentClass">
+    <div class="card-text">
       <ng-content></ng-content>
     </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
index 897d09a9a4b937d20dee95636059c29eda0883b9..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
--- 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
@@ -1,40 +0,0 @@
-@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
index c7817894d76719caa2efb1c92cd5ed8d51b0d0bd..fdc34fdf7b22adcaad91ed04f91d312ba4557b4e 100644 (file)
--- 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
@@ -21,4 +21,13 @@ describe('CardComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('Setting cards title makes title visible', () => {
+    const title = 'Card Title';
+    component.title = title;
+    fixture.detectChanges();
+    const titleDiv = fixture.debugElement.nativeElement.querySelector('.card-title');
+
+    expect(titleDiv.textContent).toContain(title);
+  });
 });

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
index c11e256d28cd1d24839cc5f185fc32c07de89a34..b6bb99c66909d40a2fcb45765ec21ea2f8660fd5 100644 (file)
--- 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
@@ -7,11 +7,5 @@ import { Component, Input } from '@angular/core';
 })
 export class CardComponent {
   @Input()
-  cardTitle: string;
-  @Input()
-  link: string;
-  @Input()
-  cardClass = '';
-  @Input()
-  contentClass: string;
+  title: 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
index 87c9eca3e4e01803620ad2f66406945f34be9fab..27ed0f2d760549c02101fe6bf6295ac1ddae4554 100644 (file)
--- 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
@@ -9,7 +9,7 @@ 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';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 @NgModule({
   imports: [
@@ -24,6 +24,6 @@ import { NewDashboardComponent } from './dashboard/dashboard.component';
     ReactiveFormsModule
   ],
 
-  declarations: [NewDashboardComponent, CardComponent]
+  declarations: [DashboardComponent, 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
index 26e25d194a651df332a67e33ed5ebe5242f03451..24cfd5445b4c1113594858b41cd5874a21f50753 100644 (file)
--- 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
@@ -1,39 +1,39 @@
 <div class="container-fluid">
   <div class="row mx-0">
-    <cd-card cardTitle="Details"
-             i18n-cardTitle
+    <cd-card title="Details"
+             i18n-title
              class="col-sm-3 px-3">
              Text
     </cd-card>
 
-    <cd-card cardTitle="Status"
-             i18n-cardTitle
+    <cd-card title="Status"
+             i18n-title
              class="col-sm-6 px-3">
              Text
     </cd-card>
 
-    <cd-card cardTitle="Capacity"
-             i18n-cardTitle
+    <cd-card title="Capacity"
+             i18n-title
              class="col-sm-3 px-3">
              Text
     </cd-card>
   </div>
 
   <div class="row mx-0">
-    <cd-card cardTitle="Inventory"
-             i18n-cardTitle
+    <cd-card title="Inventory"
+             i18n-title
              class="col-sm-3 px-3">
              Text
     </cd-card>
 
-    <cd-card cardTitle="Capacity utilization"
-             i18n-cardTitle
+    <cd-card title="Capacity utilization"
+             i18n-title
              class="col-sm-6 px-3">
              Text
     </cd-card>
 
-    <cd-card cardTitle="Events"
-             i18n-cardTitle
+    <cd-card title="Events"
+             i18n-title
              class="col-sm-3 px-3">
              Text
     </cd-card>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
new file mode 100644 (file)
index 0000000..0e29e14
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { configureTestBed } from '~/testing/unit-test-helper';
+import { CardComponent } from '../card/card.component';
+import { DashboardComponent } from './dashboard.component';
+
+describe('CardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  configureTestBed({
+    imports: [RouterTestingModule],
+    declarations: [DashboardComponent, CardComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render all cards', () => {
+    const dashboardCards = fixture.debugElement.nativeElement.querySelectorAll('cd-card');
+    expect(dashboardCards.length).toBe(6);
+  });
+});

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
index 52fccfe1e86264dde8ad85c7be2dcfc4c031b2d0..e18b06df0333ce9199a5f83b2b0aa7b1f6a725cd 100644 (file)
--- 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
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'cd-new-dashboard',
+  selector: 'cd-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class NewDashboardComponent {}
+export class DashboardComponent {}