Dashboard Component test page

src/app/commons/service/rest.service.ts

@@ -14,7 +14,7 @@ export class RESTService {
   constructor(
     @Inject(HttpClient) private _httpClient: HttpClient,
   ) {
-    this.baseURL = 'http://192.168.1.101:80/webapp';
+    this.baseURL = 'http://192.168.1.103:19090/webapp';
     this.httpHeaders = new HttpHeaders()
       .set('Accept', 'application/json')
       .set('Content-Type', 'application/json');

src/app/pages/dashboard/dashboard-page.component.html

@@ -1,3 +1,76 @@
-<p>
+<div class="inbox" fxLayout="column" [ngStyle]="{ 'height': height }">
-  dashboard-page works!
+
-</p>
+  <div class="header mat-elevation-z2"></div>
+
+  <div class="container" fxLayout="row">
+      <div class="navigation" fxFlex="250px" [fxHide]="true" [fxHide.gt-md]="false">
+        <div class="title-container">
+            <mat-icon>mail</mat-icon>
+            <span class="title">Dashboard</span>
+        </div>
+
+        <div class="compose-container">
+            <h3 mat-subheader>Dashboard > Dashboard > Dashboard</h3>
+        </div>
+
+        <mat-nav-list class="nav-list" >
+            <h3 mat-subheader>Search Box</h3>
+            <a class="nav-item mt0" mat-list-item>
+                <h3 class="nav-title" mat-line>
+                   <mat-icon class="icon">mail</mat-icon>
+                   <span class="text">inbox </span>
+               </h3>
+           </a>
+        </mat-nav-list>
+      </div>
+      <div class="content-container" fxFlex fxLayout="column">
+          <!-- Contents Area -->
+          <div class="example-container mat-elevation-z8">
+              <mat-table #table [dataSource]="dataSource" matSort>
+            
+                <ng-container matColumnDef="name">
+                  <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+                  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+                </ng-container>
+            
+                <ng-container matColumnDef="ip">
+                  <mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
+                  <mat-cell *matCellDef="let element"> {{element.ip}} </mat-cell>
+                </ng-container>
+            
+                <ng-container matColumnDef="os">
+                  <mat-header-cell *matHeaderCellDef mat-sort-header> OS </mat-header-cell>
+                  <mat-cell *matCellDef="let element"> {{element.os}} </mat-cell>
+                </ng-container>
+            
+                <ng-container matColumnDef="cidr">
+                  <mat-header-cell *matHeaderCellDef mat-sort-header> CIDR </mat-header-cell>
+                  <mat-cell *matCellDef="let element"> {{element.cidr}} </mat-cell>
+                </ng-container>
+            
+                <ng-container matColumnDef="targetCnt">
+                  <mat-header-cell *matHeaderCellDef mat-sort-header> Targets </mat-header-cell>
+                  <mat-cell *matCellDef="let element"> {{element.targetCnt}} </mat-cell>
+                </ng-container>
+            
+                <ng-container matColumnDef="date">
+                  <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
+                  <mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
+                </ng-container>
+            
+                <ng-container matColumnDef="authBy">
+                  <mat-header-cell *matHeaderCellDef mat-sort-header> AuthBy </mat-header-cell>
+                  <mat-cell *matCellDef="let element"> {{element.authBy}} </mat-cell>
+                </ng-container>
+            
+                <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
+                <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+              </mat-table>
+            
+              <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
+              </mat-paginator>
+            </div>
+      </div>
+  </div>
+
+</div>

src/app/pages/dashboard/dashboard-page.component.scss

@@ -0,0 +1,139 @@
+$color__inactive: #616161;
+$color__primary: #3F51B5;
+$color__read: #9F9F9F;
+$color__checkbox__star: #616161;
+
+$height__search__title: 56px;
+$margin-top__search__title: 42px;
+
+:host {
+  display: block;
+  position: relative;
+  height: 100%;
+}
+
+.inbox {
+    background-color: white;
+
+.header {
+    min-height: 200px;
+    max-height: 200px;
+    background: #039be5 url('/assets/bg20.jpg') no-repeat center center fixed;
+    background-size: cover;
+}
+.footer {
+    width: 100%;
+    padding: 20px 0px ;
+    text-align: center;
+    h6 {
+        margin: 5px 0 0 0 !important;
+    }
+}
+
+  .container {
+    margin-top: -200px;
+    max-height: 100%;
+    box-sizing: border-box;
+    height: 100%;
+  }
+
+  .navigation {
+    padding: $margin-top__search__title 24px 0;
+
+    .title-container {
+      min-height: $height__search__title;
+      max-height: $height__search__title;
+      padding-left: 16px;
+      padding-right: 16px;
+      color: white;
+      font-size: 28px;
+
+      mat-icon {
+        margin-right: 4px;
+        height: 24px;
+        width: 24px;
+        font-size: 24px;
+        vertical-align: sub;
+      }
+
+      .title {
+        vertical-align: middle;
+      }
+    }
+
+    .compose-container {
+      margin: 52px 16px 0 12px;
+
+      .compose {
+        padding-left: 20px;
+        padding-right: 32px;
+        width: 100%;
+
+        mat-icon {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .nav-list {
+        margin-top: 28px;
+        height: 400px; overflow-y: auto;
+
+      .nav-item {
+        color: $color__inactive;
+        margin: 8px 0;
+
+        .nav-title {
+
+          .icon {
+            margin-right: 12px;
+            font-size: 22px;
+            width: 22px;
+            height: 22px;
+          }
+
+          .text {
+            font-size: 14px;
+          }
+
+          .icon, .text {
+            font-weight: 500;
+            vertical-align: middle;
+          }
+        }
+
+        &.active {
+          color: #3F51B5;
+        }
+      }
+    }
+
+    mat-divider {
+      margin: 0 16px;
+    }
+  }
+
+  .content-container {
+    max-width: 100%;
+    height: 100%;
+
+    .search {
+      margin-top: $margin-top__search__title;
+    }
+
+    .mails-container {
+      margin-top: 43px;
+      background: white;
+      position: relative;
+      height: 100%;
+    }
+  }
+}
+
+@media only screen and (min-width: 1280px) {
+  .inbox {
+    .content-container {
+      max-width: calc(100% - 290px); // 250px sidebar + 40px margin
+    }
+  }
+}

src/app/pages/dashboard/dashboard-page.component.ts

@@ -1,14 +1,58 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatSort } from '@angular/material';
+import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+
+
+export interface Probe {
+  id: string;
+  name: string;
+  ip: string;
+  os: string;
+  cidr: string;
+  targetCnt: number;
+  date: string;
+  authBy: string;
+}
 
 @Component({
   selector: 'of-dashboard-page',
   templateUrl: './dashboard-page.component.html',
   styleUrls: ['./dashboard-page.component.scss']
 })
-export class DashboardPageComponent implements OnInit {
+
+export class DashboardPageComponent implements OnInit, AfterContentInit {
+
+  displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
+  dataSource: MatTableDataSource<Probe>;
+  @ViewChild(MatSort) sort: MatSort;
 
   constructor() { }
 
+  ngAfterContentInit() {
+    // temporary data
+    const data: Probe[] = new Array();
+    for (let i = 0; i < 10; i++) {
+      const p: Probe = {
+        id: String('id' + i),
+        name: String('name' + i),
+        ip: String('ip' + i),
+        os: String('os' + i),
+        cidr: String('cidr' + i),
+        targetCnt: i,
+        date: String('date' + i),
+        authBy: String('insanity')
+      };
+      data.push(p);
+    }
+
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+  }
+
+  handleRowClick(obj: Probe) {
+    // this.router.navigate(['probe', obj.id]);
+  }
+
   ngOnInit() {
   }