new-is-app-angular2 #12
|
@ -3,7 +3,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav {
|
.sidenav {
|
||||||
width: 400px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav .mat-toolbar {
|
.sidenav .mat-toolbar {
|
||||||
|
@ -15,4 +15,3 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,6 @@ import { AppComponent } from './app.component';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
import { InfoComponent } from './info/info.component';
|
import { InfoComponent } from './info/info.component';
|
||||||
import { DatafilterPipe } from './datafilter.pipe';
|
|
||||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { LayoutModule } from '@angular/cdk/layout';
|
import { LayoutModule } from '@angular/cdk/layout';
|
||||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||||
|
@ -24,17 +23,18 @@ import { MatTableModule } from '@angular/material/table';
|
||||||
import { ProtocolsComponent } from './protocols/protocols.component';
|
import { ProtocolsComponent } from './protocols/protocols.component';
|
||||||
import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.component';
|
import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.component';
|
||||||
import { MatExpansionModule } from '@angular/material/expansion';
|
import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
import { WfHistoryComponent } from './wf-history/wf-history.component';
|
import { WfDialog, WfHistoryComponent } from './wf-history/wf-history.component';
|
||||||
|
import { MatDialogModule } from '@angular/material/dialog';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
InfoComponent,
|
|
||||||
DatafilterPipe,
|
|
||||||
MainMenuTreeComponent,
|
|
||||||
ProtocolsComponent,
|
|
||||||
MainMenuPanelsComponent,
|
MainMenuPanelsComponent,
|
||||||
WfHistoryComponent
|
MainMenuTreeComponent,
|
||||||
|
InfoComponent,
|
||||||
|
ProtocolsComponent,
|
||||||
|
WfHistoryComponent,
|
||||||
|
WfDialog
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -54,7 +54,8 @@ import { WfHistoryComponent } from './wf-history/wf-history.component';
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
MatInputModule,
|
MatInputModule,
|
||||||
MatTableModule,
|
MatTableModule,
|
||||||
MatExpansionModule
|
MatExpansionModule,
|
||||||
|
MatDialogModule
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
import { DatafilterPipe } from './datafilter.pipe';
|
|
||||||
|
|
||||||
describe('DatafilterPipe', () => {
|
|
||||||
it('create an instance', () => {
|
|
||||||
const pipe = new DatafilterPipe();
|
|
||||||
expect(pipe).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,22 +0,0 @@
|
||||||
import { Pipe, PipeTransform } from '@angular/core';
|
|
||||||
|
|
||||||
@Pipe({
|
|
||||||
name: 'datafilter'
|
|
||||||
})
|
|
||||||
export class DatafilterPipe implements PipeTransform {
|
|
||||||
|
|
||||||
transform(items: any[], searchTerm?: string) {
|
|
||||||
let filteredList: any[] = [];
|
|
||||||
if (searchTerm) {
|
|
||||||
return items.filter(item =>
|
|
||||||
Object.keys(item).some(k => item[k] != null &&
|
|
||||||
item[k].toString().toLowerCase()
|
|
||||||
.includes(searchTerm.toLowerCase()))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return items;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -1,18 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { ISService } from '../is.service';
|
import { ISService } from '../is.service';
|
||||||
import { MatTableDataSource } from '@angular/material/table';
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
import { KeyValue, Module } from '../model/controller.model';
|
||||||
export interface KeyValue {
|
|
||||||
k: string;
|
|
||||||
v: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Module {
|
|
||||||
group: string;
|
|
||||||
name: string;
|
|
||||||
versions: string[];
|
|
||||||
files: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface KeyValueDatasource {
|
export interface KeyValueDatasource {
|
||||||
name: string;
|
name: string;
|
||||||
|
|
|
@ -6,6 +6,18 @@ export interface ResourceType {
|
||||||
simple:boolean
|
simple:boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface KeyValue {
|
||||||
|
k: string;
|
||||||
|
v: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Module {
|
||||||
|
group: string;
|
||||||
|
name: string;
|
||||||
|
versions: string[];
|
||||||
|
files: string[];
|
||||||
|
}
|
||||||
|
|
||||||
export interface ProtocolParams {
|
export interface ProtocolParams {
|
||||||
name:string
|
name:string
|
||||||
label:string
|
label:string
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
<h1 mat-dialog-title>Details</h1>
|
||||||
|
|
||||||
|
<div mat-dialog-content>
|
||||||
|
|
||||||
|
<mat-form-field style="width: 100%;">
|
||||||
|
<mat-label>Filter</mat-label>
|
||||||
|
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #filterParams />
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<table mat-table [dataSource]="wfDatasource" class="mat-elevation-z8">
|
||||||
|
|
||||||
|
<ng-container matColumnDef="k">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>k</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{element.k}}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="v">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>v</th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.v}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- <tr mat-header-row *matHeaderRowDef="colums"></tr> -->
|
||||||
|
<tr mat-row *matRowDef="let row; columns: colums;"></tr>
|
||||||
|
|
||||||
|
<!-- Row shown when there is no matching data. -->
|
||||||
|
<tr class="mat-row" *matNoDataRow>
|
||||||
|
<td class="mat-cell" colspan="2">No data matching the filter "{{filterParams.value}}"</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
|
@ -12,16 +12,18 @@
|
||||||
<span *ngIf="from >= 0 && to < 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> <i>undefined</i></span>
|
<span *ngIf="from >= 0 && to < 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> <i>undefined</i></span>
|
||||||
<span *ngIf="from < 0 && to >= 0"><b>Workflows from </b><i>undefined</i> <b>to</b> {{to | date:"yyyy-MM-dd HH:mm:ss"}}</span>
|
<span *ngIf="from < 0 && to >= 0"><b>Workflows from </b><i>undefined</i> <b>to</b> {{to | date:"yyyy-MM-dd HH:mm:ss"}}</span>
|
||||||
<br />
|
<br />
|
||||||
<span><b>Count :</b> {{wfDatasource.filteredData.length}}</span>
|
<span><b>Count :</b> {{historyDatasource.filteredData.length}}</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<table mat-table [dataSource]="wfDatasource" class="mat-elevation-z8">
|
<table mat-table [dataSource]="historyDatasource" class="mat-elevation-z8">
|
||||||
|
|
||||||
<ng-container matColumnDef="processId">
|
<ng-container matColumnDef="processId">
|
||||||
<th mat-header-cell *matHeaderCellDef> Process Id </th>
|
<th mat-header-cell *matHeaderCellDef> Process Id </th>
|
||||||
<td mat-cell *matCellDef="let element"> {{element.processId}} </td>
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<a (click)="openWfDialog(element)">{{element.processId}}</a>
|
||||||
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="name">
|
<ng-container matColumnDef="name">
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, Inject } from '@angular/core';
|
||||||
import { ISService } from '../is.service';
|
import { ISService } from '../is.service';
|
||||||
import { MatTableDataSource } from '@angular/material/table';
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
import { WfHistoryEntry } from '../model/controller.model';
|
import { WfHistoryEntry } from '../model/controller.model';
|
||||||
import { ActivatedRoute } from '@angular/router';
|
import { ActivatedRoute } from '@angular/router';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { map } from 'rxjs/operators';
|
import { map } from 'rxjs/operators';
|
||||||
|
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import { KeyValue } from '../model/controller.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-wf-history',
|
selector: 'app-wf-history',
|
||||||
|
@ -13,7 +15,7 @@ import {map} from 'rxjs/operators';
|
||||||
})
|
})
|
||||||
export class WfHistoryComponent {
|
export class WfHistoryComponent {
|
||||||
|
|
||||||
wfDatasource:MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
|
historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
|
||||||
|
|
||||||
colums: string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
|
colums: string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
|
||||||
|
|
||||||
|
@ -21,7 +23,7 @@ export class WfHistoryComponent {
|
||||||
from: number = -1
|
from: number = -1
|
||||||
to: number = -1
|
to: number = -1
|
||||||
|
|
||||||
constructor(public service:ISService, route: ActivatedRoute) {
|
constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) {
|
||||||
|
|
||||||
let totalP = route.snapshot.paramMap.get('total');
|
let totalP = route.snapshot.paramMap.get('total');
|
||||||
let fromP = route.snapshot.queryParamMap.get('from');
|
let fromP = route.snapshot.queryParamMap.get('from');
|
||||||
|
@ -32,14 +34,48 @@ export class WfHistoryComponent {
|
||||||
if (toP) { this.to = parseInt(toP); }
|
if (toP) { this.to = parseInt(toP); }
|
||||||
|
|
||||||
this.service.loadWfHistory(this.total, this.from, this.to).subscribe({
|
this.service.loadWfHistory(this.total, this.from, this.to).subscribe({
|
||||||
next:(data:WfHistoryEntry[]) => this.wfDatasource.data = data,
|
next: (data: WfHistoryEntry[]) => this.historyDatasource.data = data,
|
||||||
error: error => console.log(error),
|
error: error => console.log(error),
|
||||||
complete: () => console.log("Completed")
|
complete: () => console.log("Completed")
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
applyFilter(event: Event) {
|
||||||
|
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
||||||
|
this.historyDatasource.filter = filterValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
openWfDialog(wf: WfHistoryEntry): void {
|
||||||
|
const wfDialogRef = this.dialog.open(WfDialog, {
|
||||||
|
data: wf
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'wf-dialog',
|
||||||
|
templateUrl: 'wf-dialog.html',
|
||||||
|
})
|
||||||
|
export class WfDialog {
|
||||||
|
|
||||||
|
wfDatasource: MatTableDataSource<KeyValue> = new MatTableDataSource<KeyValue>([]);
|
||||||
|
colums: string[] = ['k', 'v'];
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public dialogRef: MatDialogRef<WfDialog>,
|
||||||
|
@Inject(MAT_DIALOG_DATA) public data: WfHistoryEntry,
|
||||||
|
) {
|
||||||
|
let list:KeyValue[] = [];
|
||||||
|
for (let [key, value] of new Map(Object.entries(data.details))) {
|
||||||
|
list.push({k: key, v: value});
|
||||||
|
}
|
||||||
|
this.wfDatasource.data = list;
|
||||||
|
}
|
||||||
applyFilter(event: Event) {
|
applyFilter(event: Event) {
|
||||||
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
||||||
this.wfDatasource.filter = filterValue;
|
this.wfDatasource.filter = filterValue;
|
||||||
}
|
}
|
||||||
|
onNoClick(): void {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -14,3 +14,14 @@ table {
|
||||||
.text-monospace {
|
.text-monospace {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:not([href]) {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
color: #336699;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue