Extend rows to have extended features.

Test: go/vtslab-schedule-dev/redirect/20180921t132238-dot-vtslab-schedule-dev
Bug: 74575555
Change-Id: I6acc2ae820d6b3c5d464efbdd43ec4f14e5db04c

5 files changed, 97 insertions, 2 deletions

diff --git a/gae/frontend/src/app/app.module.ts b/gae/frontend/src/app/app.module.ts
index 2a60df1..cacff6e 100644
--- a/gae/frontend/src/app/app.module.ts
+++ b/gae/frontend/src/app/app.module.ts
@@ -51,6 +51,9 @@ import { NavModule } from './shared/navbar/navbar';
 // Other dependencies.
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+// User directives for CDK (Component Development Kit).
+import { CdkDetailRowDirective } from './menu/cdk-detail-row.directive';
+
 
 const appRoutes: Routes = [
   { path: 'device', component: DeviceComponent },
@@ -100,6 +103,7 @@ export class MaterialModule {}
   declarations: [
     AppComponent,
     BuildComponent,
+    CdkDetailRowDirective,
     DashboardComponent,
     DeviceComponent,
     FilterComponent,
diff --git a/gae/frontend/src/app/menu/cdk-detail-row.directive.ts b/gae/frontend/src/app/menu/cdk-detail-row.directive.ts
new file mode 100644
index 0000000..60b490a
--- /dev/null
+++ b/gae/frontend/src/app/menu/cdk-detail-row.directive.ts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (C) 2018 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Directive, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, ViewContainerRef} from '@angular/core';
+
+
+@Directive({
+  selector: '[appCdkDetailRow]'
+})
+export class CdkDetailRowDirective {
+  private row: any;
+  private tRef: TemplateRef<any>;
+  private opened: boolean;
+
+  @HostBinding('class.expanded')
+  get expended(): boolean {
+    return this.opened;
+  }
+
+  @Input()
+  set appCdkDetailRow(value: any) {
+    if (value !== this.row) {
+      this.row = value;
+      // this.render();
+    }
+  }
+
+  @Input('appCdkDetailRowTpl')
+  set template(value: TemplateRef<any>) {
+    if (value !== this.tRef) {
+      this.tRef = value;
+    }
+  }
+
+  @Output() toggleChange = new EventEmitter<CdkDetailRowDirective>();
+
+  constructor(public vcRef: ViewContainerRef) { }
+
+  @HostListener('click')
+  onClick(): void {
+    this.toggle();
+  }
+
+  toggle(): void {
+    if (this.opened) {
+      this.vcRef.clear();
+    } else {
+      this.render();
+    }
+    this.opened = this.vcRef.length > 0;
+    this.toggleChange.emit(this);
+  }
+
+  private render(): void {
+    this.vcRef.clear();
+    if (this.tRef && this.row) {
+      this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
+    }
+  }
+}
diff --git a/gae/frontend/src/app/menu/job/job.component.html b/gae/frontend/src/app/menu/job/job.component.html
index e938c8a..62ce0f6 100644
--- a/gae/frontend/src/app/menu/job/job.component.html
+++ b/gae/frontend/src/app/menu/job/job.component.html
@@ -167,9 +167,11 @@
     </ng-container>
 
     <mat-header-row *matHeaderRowDef="columnTitles"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: columnTitles;"></mat-row>
+    <mat-row *matRowDef="let row; columns: columnTitles;"
+             matRipple
+             class="element-row"
+             [appCdkDetailRow]="row" [appCdkDetailRowTpl]="job_detail"></mat-row>
   </mat-table>
-
   <mat-paginator [length]="count"
                  [pageSize]="pageSize"
                  [pageSizeOptions]="pageSizeOptions"
@@ -177,6 +179,11 @@
                  (page)="pageEvent = onPageEvent($event)">
   </mat-paginator>
 </div>
+<ng-template #job_detail let-job>
+  <div class="mat-row div-expandable" [@detailExpand] style="overflow: hidden">
+    <a href="{{job.infra_log_url}}" download><button mat-raised-button [disabled]="(!job.infra_log_url)">Download Infra Log</button></a>
+  </div>
+</ng-template>
 <div class="loading-spinner" *ngIf="loading">
   <mat-spinner color="primary"></mat-spinner>
 </div>
diff --git a/gae/frontend/src/app/menu/job/job.component.ts b/gae/frontend/src/app/menu/job/job.component.ts
index 33670d4..383ae19 100644
--- a/gae/frontend/src/app/menu/job/job.component.ts
+++ b/gae/frontend/src/app/menu/job/job.component.ts
@@ -15,6 +15,7 @@
  */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSnackBar, MatTableDataSource, PageEvent } from '@angular/material';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 import { FilterComponent } from '../../shared/filter/filter.component';
 import { FilterCondition } from '../../model/filter_condition';
@@ -33,6 +34,13 @@ import * as moment from 'moment-timezone';
   templateUrl: './job.component.html',
   providers: [ JobService ],
   styleUrls: ['./job.component.scss'],
+  animations: [
+    trigger('detailExpand', [
+      state('void', style({height: '0px', minHeight: '0', visibility: 'hidden'})),
+      state('*', style({height: '*', visibility: 'visible'})),
+      transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
 export class JobComponent extends MenuBaseClass implements OnInit {
   columnTitles = [
diff --git a/gae/frontend/src/styles.scss b/gae/frontend/src/styles.scss
index 61e8933..0c95e64 100644
--- a/gae/frontend/src/styles.scss
+++ b/gae/frontend/src/styles.scss
@@ -40,3 +40,7 @@ body {
   right: 0;
   position: fixed;
 }
+
+.div-expandable {
+  padding: 10px;
+}