new-is-app-angular2 #12
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.sidenav {
|
||||
width: 400px;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.sidenav .mat-toolbar {
|
||||
|
@ -15,4 +15,3 @@
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@ import { AppComponent } from './app.component';
|
|||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { InfoComponent } from './info/info.component';
|
||||
import { DatafilterPipe } from './datafilter.pipe';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { LayoutModule } from '@angular/cdk/layout';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
|
@ -24,17 +23,18 @@ import { MatTableModule } from '@angular/material/table';
|
|||
import { ProtocolsComponent } from './protocols/protocols.component';
|
||||
import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.component';
|
||||
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({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
InfoComponent,
|
||||
DatafilterPipe,
|
||||
MainMenuTreeComponent,
|
||||
ProtocolsComponent,
|
||||
MainMenuPanelsComponent,
|
||||
WfHistoryComponent
|
||||
MainMenuTreeComponent,
|
||||
InfoComponent,
|
||||
ProtocolsComponent,
|
||||
WfHistoryComponent,
|
||||
WfDialog
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
@ -54,7 +54,8 @@ import { WfHistoryComponent } from './wf-history/wf-history.component';
|
|||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatTableModule,
|
||||
MatExpansionModule
|
||||
MatExpansionModule,
|
||||
MatDialogModule
|
||||
],
|
||||
providers: [],
|
||||
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 { ISService } from '../is.service';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
export interface KeyValue {
|
||||
k: string;
|
||||
v: string;
|
||||
}
|
||||
|
||||
export interface Module {
|
||||
group: string;
|
||||
name: string;
|
||||
versions: string[];
|
||||
files: string[];
|
||||
}
|
||||
import { KeyValue, Module } from '../model/controller.model';
|
||||
|
||||
export interface KeyValueDatasource {
|
||||
name: string;
|
||||
|
|
|
@ -6,6 +6,18 @@ export interface ResourceType {
|
|||
simple:boolean
|
||||
}
|
||||
|
||||
export interface KeyValue {
|
||||
k: string;
|
||||
v: string;
|
||||
}
|
||||
|
||||
export interface Module {
|
||||
group: string;
|
||||
name: string;
|
||||
versions: string[];
|
||||
files: string[];
|
||||
}
|
||||
|
||||
export interface ProtocolParams {
|
||||
name: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><i>undefined</i> <b>to</b> {{to | date:"yyyy-MM-dd HH:mm:ss"}}</span>
|
||||
<br />
|
||||
<span><b>Count :</b> {{wfDatasource.filteredData.length}}</span>
|
||||
<span><b>Count :</b> {{historyDatasource.filteredData.length}}</span>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<table mat-table [dataSource]="wfDatasource" class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="historyDatasource" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="processId">
|
||||
<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 matColumnDef="name">
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { ISService } from '../is.service';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { WfHistoryEntry } from '../model/controller.model';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { KeyValue } from '../model/controller.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-wf-history',
|
||||
|
@ -13,7 +15,7 @@ import {map} from 'rxjs/operators';
|
|||
})
|
||||
export class WfHistoryComponent {
|
||||
|
||||
wfDatasource:MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
|
||||
historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
|
||||
|
||||
colums: string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
|
||||
|
||||
|
@ -21,7 +23,7 @@ export class WfHistoryComponent {
|
|||
from: 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 fromP = route.snapshot.queryParamMap.get('from');
|
||||
|
@ -32,14 +34,48 @@ export class WfHistoryComponent {
|
|||
if (toP) { this.to = parseInt(toP); }
|
||||
|
||||
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),
|
||||
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) {
|
||||
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
||||
this.wfDatasource.filter = filterValue;
|
||||
}
|
||||
onNoClick(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
|
@ -14,3 +14,14 @@ table {
|
|||
.text-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