Add a missing hostname property.

This change includes ordering the list of devices by hostname, and
a similar change is also applied to the job page to create an arrow in
order to indicate users how the list of jobs is ordered.

Test: go/vtslab-schedule-dev
Bug: 116078450
Change-Id: If3f7f809d001f136a98979a63f57acdab00bc288

5 files changed, 15 insertions, 6 deletions

diff --git a/gae/frontend/src/app/app.module.ts b/gae/frontend/src/app/app.module.ts
index cacff6e..8eb7026 100644
--- a/gae/frontend/src/app/app.module.ts
+++ b/gae/frontend/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 
@@ -78,6 +79,7 @@ const appRoutes: Routes = [
     MatProgressSpinnerModule,
     MatSnackBarModule,
     MatSelectModule,
+    MatSortModule,
     MatTableModule,
     MatTabsModule,
   ],
@@ -92,6 +94,7 @@ const appRoutes: Routes = [
     MatProgressSpinnerModule,
     MatSnackBarModule,
     MatSelectModule,
+    MatSortModule,
     MatTableModule,
     MatTabsModule,
   ]
diff --git a/gae/frontend/src/app/menu/device/device.component.html b/gae/frontend/src/app/menu/device/device.component.html
index 762e198..2ff28f4 100644
--- a/gae/frontend/src/app/menu/device/device.component.html
+++ b/gae/frontend/src/app/menu/device/device.component.html
@@ -16,7 +16,7 @@
   <app-filter (applyFilters)="applyFilters($event)" [disabled]="loading"></app-filter>
 </div>
 <div class="mat-elevation-z2 entity-table" [ngStyle]="{'opacity': (loading) ? 0.2 : 1 }">
-  <table mat-table [dataSource]="dataSource">
+  <mat-table [dataSource]="dataSource" matSort matSortActive="hostname" matSortDirection="asc">
     <!-- Index Column -->
     <ng-container matColumnDef="_index">
       <mat-header-cell *matHeaderCellDef>No.</mat-header-cell>
@@ -25,7 +25,7 @@
 
     <!-- Host Name Column -->
     <ng-container matColumnDef="hostname">
-      <mat-header-cell *matHeaderCellDef>Host Name</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header disabled>Host Name</mat-header-cell>
       <mat-cell *matCellDef="let device"> {{device.hostname}} </mat-cell>
     </ng-container>
 
@@ -61,8 +61,7 @@
 
     <mat-header-row *matHeaderRowDef="columnTitles"></mat-header-row>
     <mat-row *matRowDef="let row; columns: columnTitles;"></mat-row>
-  </table>
-
+  </mat-table>
   <mat-paginator [length]="count"
                  [pageSize]="pageSize"
                  [pageSizeOptions]="pageSizeOptions"
diff --git a/gae/frontend/src/app/menu/device/device.component.ts b/gae/frontend/src/app/menu/device/device.component.ts
index 1c95fda..31407d5 100644
--- a/gae/frontend/src/app/menu/device/device.component.ts
+++ b/gae/frontend/src/app/menu/device/device.component.ts
@@ -47,6 +47,9 @@ export class DeviceComponent extends MenuBaseClass implements OnInit {
   schedulingStatusEnum = SchedulingStatus;
   appliedFilters: FilterItem[];
 
+  sort = '';
+  sortDirection = '';
+
   @ViewChild(FilterComponent) filterComponent: FilterComponent;
 
   constructor(private deviceService: DeviceService,
@@ -55,6 +58,9 @@ export class DeviceComponent extends MenuBaseClass implements OnInit {
   }
 
   ngOnInit(): void {
+    this.sort = 'hostname';
+    this.sortDirection = 'asc';
+
     this.filterComponent.setSelectorList(Device);
     this.getCount();
     this.getDevices(this.pageSize, this.pageSize * this.pageIndex);
@@ -73,7 +79,7 @@ export class DeviceComponent extends MenuBaseClass implements OnInit {
   getDevices(size = 0, offset = 0) {
     this.loading = true;
     const filterJSON = (this.appliedFilters) ? JSON.stringify(this.appliedFilters) : '';
-    this.deviceService.getDevices(size, offset, filterJSON, '', '')
+    this.deviceService.getDevices(size, offset, filterJSON, this.sort, this.sortDirection)
       .subscribe(
         (response) => {
           this.loading = false;
diff --git a/gae/frontend/src/app/menu/job/job.component.html b/gae/frontend/src/app/menu/job/job.component.html
index 62ce0f6..3c7220a 100644
--- a/gae/frontend/src/app/menu/job/job.component.html
+++ b/gae/frontend/src/app/menu/job/job.component.html
@@ -155,7 +155,7 @@
     </ng-container>
 
     <!-- Timestamp Column -->
-    <ng-container matColumnDef="timestamp">
+    <ng-container matColumnDef="timestamp" mat-sort-header disabled>
       <mat-header-cell *matHeaderCellDef>Timestamp</mat-header-cell>
       <mat-cell *matCellDef="let job"> {{getRelativeTime(job.timestamp)}} </mat-cell>
     </ng-container>
diff --git a/gae/webapp/src/proto/model.py b/gae/webapp/src/proto/model.py
index 52b7a8a..608c9b2 100644
--- a/gae/webapp/src/proto/model.py
+++ b/gae/webapp/src/proto/model.py
@@ -231,6 +231,7 @@ class DeviceInfoMessage(messages.Message):
     product = messages.StringField(2)
     status = messages.IntegerField(3)
     scheduling_status = messages.IntegerField(4)
+    hostname = messages.StringField(5)
 
 
 class HostInfoMessage(messages.Message):