pdb-js/src/app/dashboard-page/dashboard-page.component.html

@@ -1,4 +1,13 @@
 <style>
+  :host {
+  /*
+  height: calc(100% - 29px);
+  */
+  width: 100%;
+  position: absolute;
+  padding: 0.5em;
+}
+
     .center {
       position: absolute;
       top: 50%;
@@ -10,6 +19,7 @@
     }
     .is-error {
       font-size: 3rem;
+      font-weight: bold;
       color: #333;
     }
 </style>
@@ -17,14 +27,17 @@
 <div *ngIf="loading" class="center">
   <mat-spinner></mat-spinner>
 </div>
-<div *ngIf="error" class="center is-error .center-content">
+<div *ngIf="error" class="center is-error center-content ">
   {{error}}
 </div>
 <div *ngIf="!loading && !error">
   <div class="toolbar">
     <button mat-button (click)="createNewDashboard()">New</button>
   </div>
-  <table mat-table [dataSource]="dataSource" >
+  <div *ngIf="dataSource.length == 0" class="center center-content is-error">
+    No Dashboard Found
+  </div>
+  <table *ngIf="dataSource.length > 0" mat-table [dataSource]="dataSource" >
 
     <!-- Name Column -->
     <ng-container matColumnDef="name">

pdb-js/src/app/dashboard-page/dashboard-page.component.scss

@@ -1,8 +0,0 @@
-
-:host {
-  height: calc(100% - 29px);
-  position: absolute;
-  width: 100%;
-  padding: 0.5em;
-}
-

pdb-js/src/app/dashboard-page/dashboard-page.component.ts

@@ -6,8 +6,7 @@ import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
 
 @Component({
   selector: 'app-dashboard-page',
-  templateUrl: './dashboard-page.component.html',
-  styleUrls: ['./dashboard-page.component.scss']
+  templateUrl: './dashboard-page.component.html'
 })
 export class DashboardPageComponent implements OnInit {
 

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -15,6 +15,7 @@
   }
   .is-error {
     font-size: 3rem;
+    font-weight: bold;
     color: #333;
   }