Design improvements

src/app/appliance/appliance-list-dialog/appliance-list-dialog.component.html

@@ -1,5 +1,10 @@
-<h1 mat-dialog-title>Appliances list</h1>
 <div mat-dialog-content>
+    <div class="example-header">
+      <mat-form-field floatPlaceholder="never">
+        <input matInput #filter placeholder="Filter appliances">
+      </mat-form-field>
+    </div>
+
     <mat-table #table [dataSource]="dataSource">
 
       <ng-container matColumnDef="name">
@@ -11,7 +16,6 @@
       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </mat-table>
 </div>
-<div mat-dialog-actions>
+<div mat-dialog-actions align="end">
   <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
-  <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
 </div>

src/app/appliance/appliance-list-dialog/appliance-list-dialog.component.scss

@@ -0,0 +1,19 @@
+.example-header {
+  min-height: 64px;
+  display: flex;
+  align-items: baseline;
+  padding: 8px 24px 0;
+  font-size: 20px;
+  justify-content: space-between;
+}
+
+
+.mat-table {
+  overflow: auto;
+  max-height: 400px;
+}
+
+.mat-form-field {
+  font-size: 16px;
+  flex-grow: 1;
+}

src/app/appliance/appliance-list-dialog/appliance-list-dialog.component.ts

@@ -1,10 +1,18 @@
-import {Component, Inject, Input, OnInit} from '@angular/core';
+import {Component, ElementRef, Inject, Input, OnInit, ViewChild} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
 import {DataSource} from "@angular/cdk/collections";
 import {Observable} from "rxjs/Observable";
 import {Appliance} from "../../shared/models/appliance";
 import {ApplianceService} from "../../shared/services/appliance.service";
 import {Server} from "../../shared/models/server";
+import {BehaviorSubject} from "rxjs/BehaviorSubject";
+
+import 'rxjs/add/operator/startWith';
+import 'rxjs/add/observable/merge';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/observable/fromEvent';
 
 
 @Component({
@@ -17,6 +25,8 @@ export class ApplianceListDialogComponent implements OnInit {
   dataSource: ApplianceDataSource;
   displayedColumns = ['name'];
 
+  @ViewChild('filter') filter: ElementRef;
+
   constructor(
     public dialogRef: MatDialogRef<ApplianceListDialogComponent>,
     private applianceService: ApplianceService,
@@ -26,20 +36,36 @@ export class ApplianceListDialogComponent implements OnInit {
 
   ngOnInit() {
     this.dataSource = new ApplianceDataSource(this.server, this.applianceService);
-  }
 
-  onAddClick(): void {
-    this.dialogRef.close();
+    Observable.fromEvent(this.filter.nativeElement, 'keyup')
+      .debounceTime(150)
+      .distinctUntilChanged()
+      .subscribe(() => {
+        if (!this.dataSource) { return; }
+        this.dataSource.filter = this.filter.nativeElement.value;
+      });
+
   }
 
   onNoClick(): void {
     this.dialogRef.close();
   }
 
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+  }
+
 }
 
 
 export class ApplianceDataSource extends DataSource<Appliance> {
+  filterChange = new BehaviorSubject('');
+
+  get filter(): string { return this.filterChange.value; }
+  set filter(filter: string) { this.filterChange.next(filter); }
+
   constructor(private server: Server, private applianceService: ApplianceService) {
     super();
   }

src/app/project-map/project-map.component.html

@@ -3,10 +3,22 @@
 
   <div class="project-toolbar">
     <mat-toolbar color="primary" class="project-toolbar">
-      <button mat-icon-button [routerLink]="['/server', server.id, 'projects']">
+
+      <button mat-icon-button [matMenuTriggerFor]="mainMenu">
         <mat-icon svgIcon="gns3"></mat-icon>
       </button>
 
+      <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
+        <button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
+          <mat-icon>work</mat-icon>
+          <span>Projects</span>
+        </button>
+        <button mat-menu-item [routerLink]="['/servers']">
+          <mat-icon>developer_board</mat-icon>
+          <span>Servers</span>
+        </button>
+      </mat-menu>
+
       <mat-toolbar-row>
         <button mat-icon-button (click)="createSnapshotModal()">
           <mat-icon>snooze</mat-icon>

src/app/projects/projects.component.html

@@ -16,7 +16,7 @@
 
         <ng-container matColumnDef="actions">
           <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
-          <mat-cell *matCellDef="let row">
+          <mat-cell *matCellDef="let row" style="text-align: right">
             <button mat-icon-button (click)="delete(row)">
               <mat-icon aria-label="Delete project">delete</mat-icon>
             </button>