You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@helix.apache.org by jx...@apache.org on 2018/07/23 22:14:08 UTC
[2/2] helix git commit: [helix-front] Workflow: job list for Job
Queues
[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 <vx...@linkedin.com>
Authored: Mon Jan 29 16:11:05 2018 -0800
Committer: Vivo Xu <vx...@linkedin.com>
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",