From 1ad00504e3e5478fb24f1e84a5cb22a61453060e Mon Sep 17 00:00:00 2001
From: Pedro Gonzalez Gomez <pegonzal@redhat.com>
Date: Fri, 22 Jul 2022 07:37:11 +0200
Subject: [PATCH] mgr/dashboard: changes to first layout

CHANGES:

 - Renamed dashboardcomponents

 - Removed unnecesary styling

 - Added unit tests

Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
---
 .../frontend/src/app/app-routing.module.ts    |  8 ++--
 .../app/ceph/dashboard/dashboard.module.ts    |  4 +-
 .../dashboard/dashboard.component.spec.ts     | 10 ++---
 .../dashboard/dashboard.component.ts          |  2 +-
 .../new-dashboard/card/card.component.html    | 18 +++------
 .../new-dashboard/card/card.component.scss    | 40 -------------------
 .../new-dashboard/card/card.component.spec.ts |  9 +++++
 .../ceph/new-dashboard/card/card.component.ts |  8 +---
 .../ceph/new-dashboard/dashboard.module.ts    |  4 +-
 .../dashboard/dashboard.component.html        | 24 +++++------
 .../dashboard/dashboard.component.spec.ts     | 30 ++++++++++++++
 .../dashboard/dashboard.component.ts          |  4 +-
 12 files changed, 73 insertions(+), 88 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.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 27d388093a696..c5778092bda23 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
@@ -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 4bdfd50a51bfd..98f29e571a2c6 100644
--- 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 7bc4980bb82be..86a9927129197 100644
--- 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 354e389035965..b5d62a62c4797 100644
--- 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 8a414fb63a163..c483de92bbad2 100644
--- 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 897d09a9a4b93..e69de29bb2d1d 100644
--- 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 c7817894d7671..fdc34fdf7b22a 100644
--- 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 c11e256d28cd1..b6bb99c66909d 100644
--- 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 87c9eca3e4e01..27ed0f2d76054 100644
--- 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 26e25d194a651..24cfd5445b4c1 100644
--- 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
index 0000000000000..0e29e14954d5c
--- /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 52fccfe1e8626..e18b06df0333c 100644
--- 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 {}
-- 
2.39.5