Skip to content

Commit

Permalink
fix(ui): fix displayed data + toggle button (#4920)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sguiheux
sguiheux committed Jan 27, 2020
1 parent 7fbafaa commit 3f73e5e
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 71 deletions.
3 changes: 2 additions & 1 deletion ui/src/app/model/pipeline.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ export class PipelineStatus {
}

static isDone(status: string) {
return status === this.SUCCESS || status === this.STOPPED || status === this.FAIL;
return status === this.SUCCESS || status === this.STOPPED || status === this.FAIL ||
status === this.SKIPPED || status === this.DISABLED;
}
}

Expand Down
6 changes: 3 additions & 3 deletions ui/src/app/shared/table/data-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export enum ColumnType {
}

export type SelectorType<T> = (d: T) => ColumnType;
export type Selector<T> = (d: T) => any;
export type Selector<T> = (d: T, index?: number) => any;
export type Filter<T> = (f: string) => (d: T) => boolean;
export type Select<T> = (d: T) => boolean;

Expand All @@ -51,7 +51,7 @@ export class Column<T> {

@Pipe({ name: 'selector' })
export class SelectorPipe<T> implements PipeTransform {
transform(columns: Array<Column<T>>, data: T): Array<any> {
transform(columns: Array<Column<T>>, data: T, index?: number): Array<any> {
return columns.map(c => {
let type: ColumnType;
switch (typeof c.type) {
Expand All @@ -63,7 +63,7 @@ export class SelectorPipe<T> implements PipeTransform {
break;
}

let selector = c.selector(data);
let selector = c.selector(data, index);

let translate: boolean;
if (!type || type === ColumnType.TEXT) {
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/shared/table/data-table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<label></label>
</div>
</td>
<ng-container *ngFor="let c of (columns | selector:d)">
<ng-container *ngFor="let c of (columns | selector:d:i)">
<td *ngIf="!c.disabled" [ngSwitch]="c.type" class="wide" [ngClass]="c.class">
<i *ngSwitchCase="'icon'" [ngClass]="c.selector"></i>
<a *ngSwitchCase="'router-link'" class="ui" [routerLink]="c.selector.link">
Expand Down
3 changes: 2 additions & 1 deletion ui/src/app/store/workflow.state.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Action, createSelector, State, StateContext } from '@ngxs/store';
import { PipelineStatus } from 'app/model/pipeline.model';
import { WNode, WNodeHook, WNodeTrigger, Workflow } from 'app/model/workflow.model';
import { WorkflowNodeRun, WorkflowRun } from 'app/model/workflow.run.model';
import { NavbarService } from 'app/service/navbar/navbar.service';
Expand Down Expand Up @@ -720,7 +721,7 @@ export class WorkflowState {
tap((wr: WorkflowRun) => {
const stateRun = ctx.getState();
let wnr = stateRun.workflowNodeRun;
if (wnr && wr.nodes && wr.nodes[wnr.workflow_node_id]) {
if (wnr && !PipelineStatus.isDone(wnr.status) && wr.nodes && wr.nodes[wnr.workflow_node_id]) {
let wnrUpdated = wr.nodes[wnr.workflow_node_id].find(wnnr => wnnr.id === wnr.id);
if (wnrUpdated) {
wnr = wnrUpdated;
Expand Down
151 changes: 93 additions & 58 deletions ui/src/app/views/workflow/run/node/test/table/test.table.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
import { Failure, TestCase, Tests } from 'app/model/pipeline.model';
import { ThemeStore } from 'app/service/services.module';
import { Column, ColumnType, Filter } from 'app/shared/table/data-table.component';
import { Subscription } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { Failure, TestCase, Tests } from '../../../../../../model/pipeline.model';


@Component({
Expand All @@ -20,62 +20,27 @@ export class WorkflowRunTestTableComponent implements OnInit {
codeMirrorConfig: any;
columns: Array<Column<TestCase>>;
filter: Filter<TestCase>;

beforeClickFilter: string;
filterInput: string;
filterIndex: number;
countFilteredElement: number;

testCaseSelected: TestCase;
@Input() tests: Tests;
themeSubscription: Subscription;
testcases = new Array<TestCase>();

statusFilter(status: string) {
this.testCaseSelected = null;
if (status === 'all') {
this.filterInput = '';
} else if (status !== '') {
this.filterInput = 'status:' + status;
_tests: Tests;
testcases: Array<TestCase>;
@Input('tests')
set tests(data: Tests) {
this._tests = data;
if (this._tests && this._tests.ko > 0 && (!this.filterInput || this.filterInput === '')) {
this.statusFilter('failed');
}
this.initTestCases(data);
}

getTestCases() {
let testcases = new Array<TestCase>();
if (!this.tests || !this.tests.test_suites) {
return;
}
for (let ts of this.tests.test_suites) {
if (ts.tests) {
let testCase = ts.tests.map(tc => {
tc.fullname = ts.name + ' / ' + tc.name;
if (!tc.errors && !tc.failures) {
tc.status = 'success';
} else if ((tc.errors && tc.errors.length > 0) || (tc.failures && tc.failures.length > 0)) {
tc.status = 'failed';
} else {
tc.status = 'skipped';
}

return tc;
});
testcases.push(...testCase);
}
}
return testcases;
}

ngOnInit(): void {
this.themeSubscription = this._theme.get()
.pipe(finalize(() => this._cd.markForCheck()))
.subscribe(t => {
this.codeMirrorConfig.theme = t === 'night' ? 'darcula' : 'default';
if (this.codemirror1 && this.codemirror1.instance) {
this.codemirror1.instance.setOption('theme', this.codeMirrorConfig.theme);
}
if (this.codemirror2 && this.codemirror2.instance) {
this.codemirror2.instance.setOption('theme', this.codeMirrorConfig.theme);
}
if (this.codemirror3 && this.codemirror3.instance) {
this.codemirror3.instance.setOption('theme', this.codeMirrorConfig.theme);
}
this._cd.markForCheck();
});
get tests() {
return this._tests;
}

constructor(private _theme: ThemeStore, private _cd: ChangeDetectorRef) {
Expand Down Expand Up @@ -117,27 +82,97 @@ export class WorkflowRunTestTableComponent implements OnInit {
type: ColumnType.BUTTON,
name: '',
class: 'two right aligned',
selector: (tc: TestCase) => {
selector: (tc: TestCase, index?: number) => {
return {
icon: 'eye',
class: 'icon small',
click: () => this.clickTestCase(tc)
click: () => this.clickTestCase(tc, index)
};
},
},
];
}

clickTestCase(tc: TestCase): void {
if (this.testCaseSelected && this.testCaseSelected.fullname === tc.fullname) {
resetFilter(count: number): void {
if (this.countFilteredElement !== count) {
this.countFilteredElement = count;
delete this.testCaseSelected;
delete this.beforeClickFilter;
}
}

ngOnInit(): void {
this.themeSubscription = this._theme.get()
.pipe(finalize(() => this._cd.markForCheck()))
.subscribe(t => {
this.codeMirrorConfig.theme = t === 'night' ? 'darcula' : 'default';
if (this.codemirror1 && this.codemirror1.instance) {
this.codemirror1.instance.setOption('theme', this.codeMirrorConfig.theme);
}
if (this.codemirror2 && this.codemirror2.instance) {
this.codemirror2.instance.setOption('theme', this.codeMirrorConfig.theme);
}
if (this.codemirror3 && this.codemirror3.instance) {
this.codemirror3.instance.setOption('theme', this.codeMirrorConfig.theme);
}
this._cd.markForCheck();
});
}


statusFilter(status: string) {
let newFilter = '';
if (status !== 'all') {
newFilter = 'status:' + status;
}

if (this.filterInput === newFilter) {
return;
}
this.testCaseSelected = null;
this.filterInput = newFilter;
this._cd.markForCheck();
}

initTestCases(data: Tests) {
this.testcases = new Array<TestCase>();
if (!data || !data.test_suites) {
return;
}
for (let ts of data.test_suites) {
if (ts.tests) {
let testCase = ts.tests.map(tc => {
tc.fullname = ts.name + ' / ' + tc.name;
if (!tc.errors && !tc.failures) {
tc.status = 'success';
} else if ((tc.errors && tc.errors.length > 0) || (tc.failures && tc.failures.length > 0)) {
tc.status = 'failed';
} else {
tc.status = 'skipped';
}

return tc;
});
this.testcases.push(...testCase);
}
}
this._cd.detectChanges();
}

clickTestCase(tc: TestCase, index: number): void {
if (this.testCaseSelected && this.testCaseSelected.fullname === tc.fullname && this.filterIndex === index) {
this.testCaseSelected = undefined;
this.filterInput = '';
this.filterInput = this.beforeClickFilter;
delete this.beforeClickFilter;
return
}
this.filterIndex = index;
this.beforeClickFilter = this.filterInput;
this.filterInput = tc.fullname;
tc.errorsAndFailures = this.getFailureString(tc.errors)
tc.errorsAndFailures += this.getFailureString(tc.failures)
tc.errorsAndFailures = this.getFailureString(tc.errors);
tc.errorsAndFailures += this.getFailureString(tc.failures);
this.testCaseSelected = tc;
this._cd.markForCheck();
}

getFailureString(fs: Array<Failure>): string {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/views/workflow/run/node/test/table/test.table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<div class="ui grid">
<div class="sixteen wide column">
<app-data-table [withPagination]="20" [filter]="filterInput" [withFilter]="filter"
[columns]="columns" [data]="getTestCases()">
[columns]="columns" [data]="testcases" (dataChange)="resetFilter($event)">
</app-data-table>
</div>
<div class="sixteen wide column" *ngIf="testCaseSelected">
Expand Down Expand Up @@ -70,4 +70,4 @@ <h4>Systemerr</h4>
</div>
</div>
</div>
</div>
</div>
8 changes: 4 additions & 4 deletions ui/src/app/views/workflow/run/node/test/tests.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import { Coverage } from '../../../../../model/coverage.model';
import { Tests } from '../../../../../model/pipeline.model';
import { Coverage } from 'app/model/coverage.model';
import { Tests } from 'app/model/pipeline.model';

@Component({
selector: 'app-workflow-tests-result',
Expand Down Expand Up @@ -32,7 +32,7 @@ export class WorkflowRunTestsResultComponent {
set coverage(data: Coverage) {
if (data && data.workflow_id) {
this._coverage = data;
if (this._coverage.report.total_branches && this._coverage.report.total_branches > 0) {
if (this._coverage.report.total_branches) {
this.percentBranches =
parseFloat((this._coverage.report.covered_branches * 100 / this._coverage.report.total_branches)
.toFixed(2));
Expand All @@ -49,7 +49,7 @@ export class WorkflowRunTestsResultComponent {
/ this._coverage.trend.default_branch_report.total_branches).toFixed(2));
}
}
if (this._coverage.report.total_functions && this._coverage.report.total_functions > 0) {
if (this._coverage.report.total_functions) {
this.percentFunctions =
parseFloat((this._coverage.report.covered_functions * 100 / this._coverage.report.total_functions)
.toFixed(2));
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/views/workflow/run/node/workflow.run.node.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ export class WorkflowNodeRunComponent {
if (!s.workflow || this.workflowName !== s.workflow.name) {
return;
}
this._cd.markForCheck();
this.workflowRun = s.workflowRun;
this.nodeRun = cloneDeep(s.workflowNodeRun);
if (this.workflowRun && this.workflowRun.workflow && this.nodeRun) {
Expand All @@ -114,6 +113,7 @@ export class WorkflowNodeRunComponent {
}
this.updateTitle();
}
this._cd.markForCheck();
});

this._activatedRoute.params.subscribe(params => {
Expand Down

0 comments on commit 3f73e5e

Please sign in to comment.