Feature: Job prep/release task support v1

app/app.module.ts

@@ -28,6 +28,7 @@ import { TaskModule } from "app/components/task/task.module";
 import { BatchLabsErrorHandler } from "app/error-handler";
 
 // services
+import { HttpModule } from "@angular/http";
 import { PollService } from "app/services/core";
 import {
     AccountService,
@@ -45,6 +46,7 @@ import {
     FileSystemService,
     GithubDataService,
     HttpUploadService,
+    JobHookTaskService,
     JobService,
     LocalFileStorage,
     NodeService,
@@ -86,6 +88,7 @@ const modules = [
         FormsModule,
         MaterialModule,
         ReactiveFormsModule,
+        HttpModule,
         RouterModule.forRoot(routes, { useHash: true }),
         BaseModule,
         ...modules,
@@ -107,6 +110,7 @@ const modules = [
         FileSystemService,
         GithubDataService,
         HttpUploadService,
+        JobHookTaskService,
         JobService,
         LocalFileStorage,
         NodeService,

app/components/base/focus-section/focus-section.module.ts

@@ -16,7 +16,7 @@ import { FocusSectionComponent } from "./focus-section.component";
         BrowserModule,
         FormsModule,
         RouterModule,
-        MaterialModule.forRoot(),
+        MaterialModule,
     ],
 })
 export class FocusSectionModule {

app/components/base/form/form.module.ts

@@ -43,7 +43,7 @@ const components = [
         BrowserModule,
         ButtonsModule,
         FormsModule,
-        MaterialModule.forRoot(),
+        MaterialModule,
         ReactiveFormsModule,
         RouterModule,
         ...modules,

app/components/base/quick-list/quick-list.module.ts

@@ -26,7 +26,7 @@ import { QuickListComponent, QuickListItemStatusComponent } from "./quick-list.c
         BrowserModule,
         FormsModule,
         RouterModule,
-        MaterialModule.forRoot(),
+        MaterialModule,
         ContextMenuModule,
     ],
 })

app/components/base/sidebar/sidebar.ts

@@ -24,7 +24,7 @@ import { SidebarPageComponent } from "./sidebar-page";
     imports: [
         BrowserModule,
         FormsModule,
-        MaterialModule.forRoot(),
+        MaterialModule,
     ],
     providers: [
         SidebarManager,

app/components/base/tabs/tab-group.component.ts

@@ -1,5 +1,5 @@
 import {
-    AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Input, OnInit, QueryList,
+    AfterViewInit, ChangeDetectorRef, Component, ContentChildren, Input, OnInit, QueryList,
 } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
@@ -8,7 +8,6 @@ import { TabComponent } from "./tab.component";
 @Component({
     selector: "bl-tab-group",
     templateUrl: "tab-group.html",
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TabGroupComponent implements AfterViewInit, OnInit {
     @Input()
@@ -57,6 +56,10 @@ export class TabGroupComponent implements AfterViewInit, OnInit {
         });
     }
 
+    public detectChanges() {
+        this.changeDetector.markForCheck();
+    }
+
     private _updateSelectedTab() {
         if (!this.tabs) {
             return;

app/components/job/details/job-details.component.ts

@@ -38,6 +38,8 @@ export class JobDetailsComponent implements OnInit, OnDestroy {
     public decorator: JobDecorator;
     public data: RxEntityProxy<JobParams, Job>;
 
+    public hasHookTask = false;
+
     private _paramsSubscriber: Subscription;
 
     constructor(
@@ -51,6 +53,7 @@ export class JobDetailsComponent implements OnInit, OnDestroy {
         this.data = this.jobService.get(null, {});
         this.data.item.subscribe((job) => {
             this.job = job;
+            this.hasHookTask = Boolean(job && job.jobPreparationTask);
             if (job) {
                 this.decorator = new JobDecorator(job);
             }

app/components/job/details/job-details.html

@@ -40,6 +40,10 @@
                     <bl-tab-label>Configuration</bl-tab-label>
                     <bl-job-configuration [job]="job"></bl-job-configuration>
                 </bl-tab>
+                <bl-tab key="hooktasks" [disabled]="!hasHookTask">
+                    <bl-tab-label>Prep/Release tasks</bl-tab-label>
+                    <bl-job-hook-task-browser [job]="job" *ngIf="hasHookTask"></bl-job-hook-task-browser>
+                </bl-tab>
             </bl-tab-group>
         </md-card>
     </div>

app/components/job/details/job-details.module.ts

@@ -5,6 +5,7 @@ import { BaseModule } from "app/components/base";
 import { FileBrowseModule } from "app/components/file/browse";
 import { FileDetailsModule } from "app/components/file/details";
 import { TaskBrowseModule } from "app/components/task/browse";
+import { JobHookTaskModule } from "../job-hook-task";
 import { JobErrorDisplayComponent } from "./error-display";
 import { JobConfigurationComponent } from "./job-configuration.component";
 import { JobDefaultComponent } from "./job-default.component";
@@ -20,7 +21,7 @@ const components = [
 ];
 
 const modules = [
-    BaseModule, FileBrowseModule, FileDetailsModule, TaskBrowseModule,
+    BaseModule, FileBrowseModule, FileDetailsModule, TaskBrowseModule, JobHookTaskModule,
 ];
 
 @NgModule({

app/components/job/job-hook-task/index.ts

@@ -0,0 +1 @@
+export * from "./job-hook-task.module";

app/components/job/job-hook-task/job-hook-task-browser/index.ts

@@ -0,0 +1 @@
+export * from "./job-hook-task-browser.component";

app/components/job/job-hook-task/job-hook-task-browser/job-hook-task-browser.component.ts

@@ -0,0 +1,125 @@
+import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from "@angular/core";
+import { FormControl } from "@angular/forms";
+import { List } from "immutable";
+import { Subscription } from "rxjs";
+
+import { Job, JobHookTask, JobHookTaskResult, JobHookTaskState } from "app/models";
+import { JobHookTaskListParams, JobHookTaskService } from "app/services";
+import { RxListProxy } from "app/services/core";
+import { DateUtils } from "app/utils";
+import { FilterBuilder } from "app/utils/filter-builder";
+
+import "./job-hook-task-browser.scss";
+
+type HookTaskType = "preparationTask" | "releaseTask";
+const HookTaskType = {
+    preparationTask: "preparationTask" as HookTaskType,
+    releaseTask: "releaseTask" as HookTaskType,
+};
+
+@Component({
+    selector: "bl-job-hook-task-browser",
+    templateUrl: "job-hook-task-browser.html",
+})
+export class JobHookTaskBrowserComponent implements OnDestroy, OnChanges {
+    public HookTaskType = HookTaskType;
+
+    public onlyFailedControl = new FormControl(false);
+
+    @Input()
+    public job: Job;
+
+    public data: RxListProxy<JobHookTaskListParams, JobHookTask>;
+
+    public tasks: List<JobHookTask>;
+    public displayItems: any[];
+    public pickedTaskId: string;
+    public pickedTask: JobHookTask;
+
+    public type: HookTaskType = "preparationTask";
+    private _sub: Subscription;
+
+    constructor(jobHookTaskService: JobHookTaskService) {
+        this.data = jobHookTaskService.list();
+        this.data.items.subscribe((items) => {
+            this.tasks = items;
+            this._computeDisplayItems();
+        });
+
+        this._sub = this.onlyFailedControl.valueChanges.subscribe((onlyFailed) => {
+            const filter = FilterBuilder.prop("jobPreparationTaskExecutionInfo/exitCode").ne(0).toOData();
+            this.data.patchOptions({
+                filter: filter,
+            });
+            this.data.fetchNext();
+        });
+    }
+
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes.job) {
+            const { previousValue, currentValue } = changes.job;
+            if (previousValue && currentValue && previousValue.id === currentValue.id) {
+                return;
+            }
+            this.data.params = { jobId: this.job.id };
+            this.data.refresh();
+        }
+    }
+
+    public ngOnDestroy() {
+        this.data.dispose();
+        this._sub.unsubscribe();
+    }
+
+    public formatDate(date: Date) {
+        return DateUtils.prettyDate(date, 7);
+    }
+
+    public updateType(type) {
+        if (type === HookTaskType.releaseTask && !this.hasReleaseTask) {
+            return;
+        }
+        this.type = type;
+        this._computeDisplayItems();
+    }
+
+    public status(task: JobHookTask) {
+        const info = task[this.type];
+
+        if (!info) {
+            return "waiting";
+        }
+        const { state, result } = info;
+
+        if (state === JobHookTaskState.running) {
+            return "runnning";
+        } else if (result === JobHookTaskResult.success) {
+            return "success";
+        } else {
+            return "failure";
+        }
+    }
+
+    public pickTask(id: string) {
+        this.pickedTaskId = id;
+        this.pickedTask = this.tasks.filter(x => x.id === id).first();
+    }
+
+    public get hasReleaseTask() {
+        return Boolean(this.job.jobReleaseTask);
+    }
+
+    private _computeDisplayItems() {
+        this.displayItems = this.tasks.map((task) => {
+            const info = task[this.type];
+            return {
+                id: task.id,
+                nodeId: task.nodeId,
+                status: this.status(task),
+                startTime: this.formatDate(info && info.startTime),
+                endTime: this.formatDate(info && info.endTime),
+                exitCode: info && info.exitCode,
+            };
+        }).toArray();
+    }
+}

app/components/job/job-hook-task/job-hook-task-browser/job-hook-task-browser.html

@@ -0,0 +1,39 @@
+<div class="filters">
+    <div style="padding: 10px; flex: 1">
+        <md-checkbox [formControl]="onlyFailedControl">Only failed</md-checkbox>
+    </div>
+    <div class="type-toggle">
+        <div class="option" (click)="updateType(HookTaskType.preparationTask)" [class.active]="type === HookTaskType.preparationTask">
+            Preparation Tasks
+        </div>
+        <div class="option" (click)="updateType(HookTaskType.releaseTask)" [class.active]="type === HookTaskType.releaseTask" [class.disabled]="!hasReleaseTask">
+            Release tasks
+        </div>
+    </div>
+</div>
+<div class="content">
+    <bl-table class="list" [activeItem]="pickedTaskId" (activeItemChange)="pickTask($event)">
+        <bl-thead>
+            <bl-column>NodeId</bl-column>
+            <bl-column style="width: 45px">Status</bl-column>
+            <bl-column style="width: 100px" *ngIf="!pickedTask">Started</bl-column>
+            <bl-column style="width: 100px" *ngIf="!pickedTask">Completed</bl-column>
+            <bl-column style="width: 100px">Exit code</bl-column>
+        </bl-thead>
+
+        <bl-row *ngFor="let task of displayItems; trackBy: task?.id" [key]="task.id">
+            <bl-cell>{{task.nodeId}}</bl-cell>
+            <bl-cell style="width: 45px" [title]="task.status">
+                <span *ngIf="task.status === 'running'" class="fa fa-spinner"></span>
+                <span *ngIf="task.status === 'success'" class="fa fa-check-circle"></span>
+                <span *ngIf="task.status === 'failure'" class="fa fa-times-circle"></span>
+            </bl-cell>
+            <bl-cell style="width: 100px" *ngIf="!pickedTask">{{task.startTime}}</bl-cell>
+            <bl-cell style="width: 100px" *ngIf="!pickedTask">{{task.endTime}}</bl-cell>
+            <bl-cell style="width: 100px">{{task.exitCode}}</bl-cell>
+        </bl-row>
+    </bl-table>
+    <div *ngIf="pickedTask" class="details">
+        <bl-job-hook-task-details [task]="pickedTask" [type]="type"></bl-job-hook-task-details>
+    </div>
+</div>

app/components/job/job-hook-task/job-hook-task-browser/job-hook-task-browser.scss

@@ -0,0 +1,37 @@
+@import "app/styles/variables";
+
+bl-job-hook-task-browser {
+    .filters {
+        display: flex;
+    }
+
+    .content {
+        display: flex;
+        border-top: 1px solid #d5d5d5;
+
+        > .details {
+            padding-top: 10px;
+            border-left: 1px solid $border-color;
+            width: 600px;
+        }
+    }
+
+    .type-toggle {
+        margin: 10px;
+        text-align: right;
+        cursor: pointer;
+        > .option {
+            display: inline-block;
+        }
+
+        > .option.active {
+            text-decoration: underline;
+            cursor: default;
+        }
+
+        > .option.disabled {
+            opacity: 0.5;
+            cursor: default;
+        }
+    }
+}

app/components/job/job-hook-task/job-hook-task-details/index.ts

@@ -0,0 +1 @@
+export * from "./job-hook-task-details.component";

app/components/job/job-hook-task/job-hook-task-details/job-hook-task-details.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+import { JobHookTask } from "app/models";
+
+import "./job-hook-task-details.scss";
+
+@Component({
+    selector: "bl-job-hook-task-details",
+    templateUrl: "job-hook-task-details.html",
+})
+export class JobHookTaskDetailsComponent {
+    @Input()
+    public task: JobHookTask;
+
+    @Input()
+    public type: string = "preparationTask";
+
+    public get currentFolder() {
+        const info = this.task[this.type];
+        return info && info.taskRootDirectory;
+    }
+}

app/components/job/job-hook-task/job-hook-task-details/job-hook-task-details.html

@@ -0,0 +1,9 @@
+    <div *ngIf="task">
+    <bl-property-group>
+        <bl-link-property label="Pool" [value]="task.poolId" [link]="['/pools', task.poolId]"></bl-link-property>
+        <bl-link-property label="Node" [value]="task.nodeId" [link]="['/pools', task.poolId, 'nodes', task.nodeId]"></bl-link-property>
+
+        <bl-node-file-list #list [poolId]="task.poolId" [nodeId]="task.nodeId" [quickList]="false" [folder]="currentFolder" [manualLoading]="true" *ngIf="currentFolder">
+        </bl-node-file-list>
+    </bl-property-group>
+</div>