[helix-front] Workflow: job list for Job Queues
Project: http://git-wip-us.apache.org/repos/asf/helix/repo Commit: http://git-wip-us.apache.org/repos/asf/helix/commit/ca246f48 Tree: http://git-wip-us.apache.org/repos/asf/helix/tree/ca246f48 Diff: http://git-wip-us.apache.org/repos/asf/helix/diff/ca246f48 Branch: refs/heads/master Commit: ca246f48c3c76561b19b9faf734a2e2ee4c991b5 Parents: 24c5239 Author: Vivo Xu <[email protected]> Authored: Mon Jan 29 16:11:05 2018 -0800 Committer: Vivo Xu <[email protected]> Committed: Mon Jul 23 15:12:03 2018 -0700 ---------------------------------------------------------------------- .../disabled-label.component.scss | 2 +- .../client/app/shared/material.module.ts | 9 ++- .../app/workflow/shared/workflow.model.ts | 55 +++++++++++++++- .../workflow-detail.component.html | 68 +++++++++++++++++++- .../workflow-detail.component.scss | 14 ++++ .../workflow-detail.component.spec.ts | 6 +- .../workflow-detail.component.ts | 24 +++++++ .../client/app/workflow/workflow.module.ts | 5 +- helix-front/client/tsconfig.app.json | 4 -- helix-front/package-lock.json | 13 ++-- helix-front/package.json | 3 +- 11 files changed, 180 insertions(+), 23 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/shared/disabled-label/disabled-label.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/disabled-label/disabled-label.component.scss b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss index 0b492f1..a3bdc51 100644 --- a/helix-front/client/app/shared/disabled-label/disabled-label.component.scss +++ b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss @@ -4,7 +4,7 @@ margin-left: 10px; padding: 4px 8px; font-size: 12px; - line-height: 12px; + line-height: 40px; border-radius: 4px; border: 1px solid mat-color(mat-palette($mat-red), 900); background-color: mat-color(mat-palette($mat-red), darker); http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/shared/material.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/material.module.ts b/helix-front/client/app/shared/material.module.ts index c082d0b..bf2d9a8 100644 --- a/helix-front/client/app/shared/material.module.ts +++ b/helix-front/client/app/shared/material.module.ts @@ -17,7 +17,8 @@ import { MatSidenavModule, MatListModule, MatMenuModule, - MatTabsModule + MatTabsModule, + MatExpansionModule } from '@angular/material'; import 'hammerjs'; @@ -40,7 +41,8 @@ import 'hammerjs'; MatSidenavModule, MatListModule, MatMenuModule, - MatTabsModule + MatTabsModule, + MatExpansionModule ], exports: [ BrowserAnimationsModule, @@ -60,7 +62,8 @@ import 'hammerjs'; MatSidenavModule, MatListModule, MatMenuModule, - MatTabsModule + MatTabsModule, + MatExpansionModule ] }) export class MaterialModule { } http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/workflow/shared/workflow.model.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/workflow/shared/workflow.model.ts b/helix-front/client/app/workflow/shared/workflow.model.ts index c3ba621..096af32 100644 --- a/helix-front/client/app/workflow/shared/workflow.model.ts +++ b/helix-front/client/app/workflow/shared/workflow.model.ts @@ -1,16 +1,65 @@ +import * as _ from 'lodash'; + +export class Task { + +} + +export class Job { + readonly name: string; + readonly rawName: string; + readonly startTime: string; + readonly state: string; + + constructor( + rawName: string, + workflowName: string, + startTime: string, + state: string + ) { + this.rawName = rawName; + // try to reduce the name + this.name = _.replace(rawName, workflowName + '_', ''); + this.startTime = startTime; + this.state = state; + } +} + export class Workflow { - readonly name: String; + readonly name: string; readonly config: any; - readonly jobs: string[]; + readonly jobs: Job[]; // TODO vxu: will use a better structure for this readonly parentJobs: any[]; readonly context: any; + get isJobQueue(): boolean { + return this.config && this.config.IsJobQueue.toLowerCase() == 'true'; + } + + get state(): string { + return this.context.STATE || 'NOT STARTED'; + } + constructor(obj: any) { this.name = obj.id; this.config = obj.WorkflowConfig; this.context = obj.WorkflowContext; - this.jobs = obj.Jobs; + this.jobs = this.parseJobs(obj.Jobs); this.parentJobs = obj.ParentJobs; } + + protected parseJobs(list: string[]): Job[] { + let result: Job[] = []; + + _.forEach(list, jobName => { + result.push(new Job( + jobName, + this.name, + _.get(this.context, ['StartTime', jobName]), + _.get(this.context, ['JOB_STATES', jobName]) + )); + }); + + return result; + } } http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html index 848c6c2..0791995 100644 --- a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html +++ b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html @@ -1,6 +1,7 @@ <mat-toolbar class="mat-elevation-z1"> <mat-toolbar-row> <hi-detail-header [cluster]="clusterName" [workflow]="workflow?.name"></hi-detail-header> + <hi-disabled-label *ngIf="!isLoading && workflow.state != 'IN_PROGRESS'" [text]="workflow.state"></hi-disabled-label> </mat-toolbar-row> <mat-toolbar-row class="information"> <a mat-mini-fab routerLink="../"><mat-icon>arrow_back</mat-icon></a> @@ -16,7 +17,70 @@ </mat-toolbar> <section fxLayout="column" fxLayoutAlign="center center"> <mat-spinner *ngIf="isLoading"></mat-spinner> - <section class="content" fxFlexFill> - <ngx-json-viewer [json]="workflow"></ngx-json-viewer> + <section *ngIf="!isLoading" class="content" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" fxFlexFill> + <mat-button-toggle-group #group="matButtonToggleGroup" value="queue"> + <mat-button-toggle value="queue"> + Queue View + </mat-button-toggle> + <mat-button-toggle value="json"> + JSON View + </mat-button-toggle> + </mat-button-toggle-group> + <section class="viewer" [ngSwitch]="group.value" fxFlexFill> + <section *ngSwitchCase="'queue'"> + <section *ngIf="workflow.isJobQueue"> + <ngx-datatable + #jobsTable + class="material" + [headerHeight]="headerHeight" + [rowHeight]="rowHeight" + columnMode="force" + [footerHeight]="rowHeight" + [rows]="workflow.jobs" + selectionType="single" + [sorts]="sorts" + (select)="onSelect($event)" + [messages]="messages"> + <ngx-datatable-column + name="Start Time" + [width]="200" + [resizeable]="false" + [draggable]="false" + [canAutoResize]="false"> + <ng-template let-value="value" ngx-datatable-cell-template> + <span *ngIf="value" [matTooltip]="value | date:'medium'"> + {{ parseTime(value) }} + </span> + <span *ngIf="!value">-</span> + </ng-template> + </ngx-datatable-column> + <ngx-datatable-column name="Job Name" prop="name"> + <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> + <span [matTooltip]="row.rawName"> + ...{{ value }} + </span> + </ng-template> + </ngx-datatable-column> + <ngx-datatable-column + name="State" + [width]="120" + [resizeable]="false" + [draggable]="false" + [canAutoResize]="false"> + <ng-template let-value="value" ngx-datatable-cell-template> + <span *ngIf="value" class="state-default state-{{ value }}"> + {{ value }} + </span> + <span *ngIf="!value" class="state-PENDING">PENDING</span> + </ng-template> + </ngx-datatable-column> + </ngx-datatable> + </section> + <section *ngIf="!workflow.isJobQueue"> + {{ workflow | json }} + </section> + </section> + <ngx-json-viewer *ngSwitchCase="'json'" [json]="workflow"></ngx-json-viewer> + </section> </section> </section> http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss index 6323b95..0c43021 100644 --- a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss +++ b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss @@ -1,3 +1,17 @@ +@import '~@angular/material/theming'; + .content { padding: 20px; } + +.state-default { + color: mat-color(mat-palette($mat-deep-orange)); +} + +.state-COMPLETED { + color: mat-color(mat-palette($mat-green)); +} + +.state-PENDING { + color: mat-color(mat-palette($mat-grey)); +} http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.spec.ts b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.spec.ts index 8c0c2df..731a6d4 100644 --- a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.spec.ts +++ b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.spec.ts @@ -1,8 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { HttpModule } from '@angular/http'; -import { RouterTestingModule } from '@angular/router/testing'; +import { TestingModule } from '../../../testing/testing.module'; import { WorkflowDetailComponent } from './workflow-detail.component'; import { WorkflowService } from '../shared/workflow.service'; @@ -13,8 +12,7 @@ describe('WorkflowDetailComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - HttpModule, - RouterTestingModule + TestingModule ], providers: [ WorkflowService ], declarations: [ WorkflowDetailComponent ], http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.ts b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.ts index 12c3a68..8979d13 100644 --- a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.ts +++ b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.ts @@ -1,6 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; +import * as moment from 'moment'; + +import { Settings } from '../../core/settings'; import { Workflow } from '../shared/workflow.model'; import { WorkflowService } from '../shared/workflow.service'; @@ -15,6 +18,18 @@ export class WorkflowDetailComponent implements OnInit { workflow: Workflow; clusterName: string; + rowHeight = Settings.tableRowHeight; + headerHeight = Settings.tableHeaderHeight; + sorts = [ + { prop: 'startTime', dir: 'desc'}, + { prop: 'name', dir: 'asc'} + ]; + messages = { + emptyMessage: 'The queue is empty.', + totalMessage: 'total', + selectedMessage: 'selected' + }; + constructor( private route: ActivatedRoute, private service: WorkflowService @@ -35,4 +50,13 @@ export class WorkflowDetailComponent implements OnInit { ); } + parseTime(rawTime: string): string { + return moment(parseInt(rawTime)).fromNow(); + } + + onSelect({ selected }) { + const row = selected[0]; + // this.table.rowDetail.toggleExpandRow(row); + } + } http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/app/workflow/workflow.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/workflow/workflow.module.ts b/helix-front/client/app/workflow/workflow.module.ts index 4066ce6..e218928 100644 --- a/helix-front/client/app/workflow/workflow.module.ts +++ b/helix-front/client/app/workflow/workflow.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { NgxDatatableModule } from '@swimlane/ngx-datatable'; + import { WorkflowListComponent } from './workflow-list/workflow-list.component'; import { WorkflowService } from './shared/workflow.service'; import { SharedModule } from '../shared/shared.module'; @@ -9,7 +11,8 @@ import { WorkflowDetailComponent } from './workflow-detail/workflow-detail.compo @NgModule({ imports: [ CommonModule, - SharedModule + SharedModule, + NgxDatatableModule ], providers: [ WorkflowService http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/client/tsconfig.app.json ---------------------------------------------------------------------- diff --git a/helix-front/client/tsconfig.app.json b/helix-front/client/tsconfig.app.json index 126454c..5e2507d 100644 --- a/helix-front/client/tsconfig.app.json +++ b/helix-front/client/tsconfig.app.json @@ -9,9 +9,5 @@ "exclude": [ "test.ts", "**/*.spec.ts" - ], - "include": [ - "**/*", - "../node_modules/ngx-json-viewer/index.ts" ] } http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/package-lock.json ---------------------------------------------------------------------- diff --git a/helix-front/package-lock.json b/helix-front/package-lock.json index f74d545..1123510 100644 --- a/helix-front/package-lock.json +++ b/helix-front/package-lock.json @@ -1,6 +1,6 @@ { "name": "helix-front", - "version": "1.1.0", + "version": "1.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -6578,6 +6578,11 @@ } } }, + "moment": { + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz";, + "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=" + }, "morgan": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.0.tgz";, @@ -6662,9 +6667,9 @@ } }, "ngx-json-viewer": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/ngx-json-viewer/-/ngx-json-viewer-1.0.0.tgz";, - "integrity": "sha1-GI8QVdbk5vKuM2yZ5xEsGfFmcBc=" + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/ngx-json-viewer/-/ngx-json-viewer-2.3.0.tgz";, + "integrity": "sha512-vrsQ1puqd/46hxCMSy0+Xw7KzxYOyeBKFi7jCwFCvf/HPcMUbn3fkUYjw601L9sCZIoLBeQXlCEVOTxOby1acA==" }, "ngx-window-token": { "version": "0.0.4", http://git-wip-us.apache.org/repos/asf/helix/blob/ca246f48/helix-front/package.json ---------------------------------------------------------------------- diff --git a/helix-front/package.json b/helix-front/package.json index 5318e84..b6a3f2e 100644 --- a/helix-front/package.json +++ b/helix-front/package.json @@ -35,9 +35,10 @@ "express-session": "^1.15.6", "hammerjs": "^2.0.8", "lodash": "^4.17.4", + "moment": "^2.22.2", "morgan": "^1.8.2", "ngx-clipboard": "^9.0.0", - "ngx-json-viewer": "^1.0.0", + "ngx-json-viewer": "^2.3.0", "node-sass": "4.5.3", "request": "^2.81.0", "rxjs": "^5.5.5",
