new-is-app-angular2 #12
|
@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
import { InfoComponent } from './info/info.component';
|
import { InfoComponent } from './info/info.component';
|
||||||
import { ProtocolsComponent } from './protocols/protocols.component';
|
import { ProtocolsComponent } from './protocols/protocols.component';
|
||||||
|
import { WfHistoryComponent } from './wf-history/wf-history.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path:"info" , component:InfoComponent},
|
{ path:"info" , component:InfoComponent},
|
||||||
{ path:"adv_resources/protocol" , component:ProtocolsComponent}
|
{ path:"adv_resources/protocol" , component:ProtocolsComponent},
|
||||||
|
{ path:"wf_history" , component:WfHistoryComponent}
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
@ -24,6 +24,7 @@ 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';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -32,7 +33,8 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
DatafilterPipe,
|
DatafilterPipe,
|
||||||
MainMenuTreeComponent,
|
MainMenuTreeComponent,
|
||||||
ProtocolsComponent,
|
ProtocolsComponent,
|
||||||
MainMenuPanelsComponent
|
MainMenuPanelsComponent,
|
||||||
|
WfHistoryComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { ISCommonService } from '../iscommon.service';
|
import { ISService } from '../is.service';
|
||||||
import { MatTableDataSource } from '@angular/material/table';
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
|
||||||
export interface KeyValue {
|
export interface KeyValue {
|
||||||
|
@ -19,7 +19,6 @@ export interface KeyValueDatasource {
|
||||||
datasource: MatTableDataSource<any>;
|
datasource: MatTableDataSource<any>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-info',
|
selector: 'app-info',
|
||||||
templateUrl: './info.component.html',
|
templateUrl: './info.component.html',
|
||||||
|
@ -28,12 +27,12 @@ export interface KeyValueDatasource {
|
||||||
export class InfoComponent {
|
export class InfoComponent {
|
||||||
|
|
||||||
kvDatasources:KeyValueDatasource[] = [];
|
kvDatasources:KeyValueDatasource[] = [];
|
||||||
moduleDatasource:MatTableDataSource<Module[]> = new MatTableDataSource<Module[]>([]);
|
moduleDatasource:MatTableDataSource<Module> = new MatTableDataSource<Module>([]);
|
||||||
|
|
||||||
displayedKVColumns: string[] = ['k', 'v'];
|
displayedKVColumns: string[] = ['k', 'v'];
|
||||||
displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
|
displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
|
||||||
|
|
||||||
constructor(public service:ISCommonService) {
|
constructor(public service:ISService) {
|
||||||
this.service.loadInfo().subscribe({
|
this.service.loadInfo().subscribe({
|
||||||
next:(data:any[]) => {
|
next:(data:any[]) => {
|
||||||
data.forEach(section => {
|
data.forEach(section => {
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import { TestBed } from '@angular/core/testing';
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
import { ISCommonService } from './iscommon.service';
|
import { ISService } from './is.service';
|
||||||
|
|
||||||
describe('ISCommonService', () => {
|
describe('ISService', () => {
|
||||||
let service: ISCommonService;
|
let service: ISService;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
TestBed.configureTestingModule({});
|
TestBed.configureTestingModule({});
|
||||||
service = TestBed.inject(ISCommonService);
|
service = TestBed.inject(ISService);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should be created', () => {
|
it('should be created', () => {
|
|
@ -0,0 +1,37 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||||
|
import { ResourceType,Protocol,WfHistoryEntry } from './model/controller.model';
|
||||||
|
import { Observable, Observer } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class ISService {
|
||||||
|
|
||||||
|
constructor(public client:HttpClient) { }
|
||||||
|
|
||||||
|
|
||||||
|
loadResourceTypes():Observable<ResourceType[]> {
|
||||||
|
return this.client.get<ResourceType[]>("/ajax/resourceTypes");
|
||||||
|
}
|
||||||
|
|
||||||
|
loadInfo():Observable<any[]> {
|
||||||
|
return this.client.get<any[]>("/ajax/info/");
|
||||||
|
}
|
||||||
|
|
||||||
|
loadProtocols():Observable<Protocol[]> {
|
||||||
|
return this.client.get<Protocol[]>("/ajax/protocols/");
|
||||||
|
}
|
||||||
|
|
||||||
|
loadWfHistory(total?:number, from?:number, to?:number):Observable<WfHistoryEntry[]> {
|
||||||
|
let params = new HttpParams();
|
||||||
|
|
||||||
|
if (total && total > 0) { params = params.append('total', total); }
|
||||||
|
if (from && from > 0) { params = params.append('from', from); }
|
||||||
|
if (to && to > 0) { params = params.append('to', to); }
|
||||||
|
|
||||||
|
|
||||||
|
return this.client.get<WfHistoryEntry[]>('/ajax/wfs/', {params: params});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,26 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
|
||||||
import { ResourceType,Protocol } from './model/controller.model';
|
|
||||||
import { Observable, Observer } from 'rxjs';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class ISCommonService {
|
|
||||||
|
|
||||||
constructor(public client:HttpClient) { }
|
|
||||||
|
|
||||||
|
|
||||||
loadResourceTypes():Observable<ResourceType[]> {
|
|
||||||
return this.client.get<ResourceType[]>("/ajax/resourceTypes");
|
|
||||||
}
|
|
||||||
|
|
||||||
loadInfo():Observable<any[]> {
|
|
||||||
return this.client.get<any[]>("/ajax/info/");
|
|
||||||
}
|
|
||||||
|
|
||||||
loadProtocols():Observable<Protocol[]> {
|
|
||||||
return this.client.get<any[]>("/ajax/protocols/");
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -11,3 +11,6 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.collapse-buttons { text-align: right; }
|
||||||
|
.collapse-buttons button { font-size: 0.6em; }
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
<mat-accordion>
|
|
||||||
|
<div class="collapse-buttons">
|
||||||
|
<button mat-button (click)="accordion.openAll()">Expand All</button>
|
||||||
|
<button mat-button (click)="accordion.closeAll()">Collapse All</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-accordion multi>
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>Home</mat-panel-title>
|
<mat-panel-title>Home</mat-panel-title>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import {Component, ViewChild} from '@angular/core';
|
||||||
import { ResourceType } from '../model/controller.model';
|
import { ResourceType } from '../model/controller.model';
|
||||||
import { ISCommonService } from '../iscommon.service';
|
import { ISService } from '../is.service';
|
||||||
|
import {MatAccordion} from '@angular/material/expansion';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-main-menu-panels',
|
selector: 'app-main-menu-panels',
|
||||||
|
@ -9,9 +10,12 @@ import { ISCommonService } from '../iscommon.service';
|
||||||
})
|
})
|
||||||
export class MainMenuPanelsComponent {
|
export class MainMenuPanelsComponent {
|
||||||
|
|
||||||
|
@ViewChild(MatAccordion)
|
||||||
|
accordion!:MatAccordion;
|
||||||
|
|
||||||
resTypes:ResourceType[] = [];
|
resTypes:ResourceType[] = [];
|
||||||
|
|
||||||
constructor(public service:ISCommonService) {
|
constructor(public service:ISService) {
|
||||||
this.service.loadResourceTypes().subscribe((data:ResourceType[]) => this.resTypes = data);
|
this.service.loadResourceTypes().subscribe((data:ResourceType[]) => this.resTypes = data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
|
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
|
||||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
|
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
|
||||||
<button mat-icon-button disabled></button>
|
<button mat-icon-button disabled></button>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'
|
||||||
import { FlatTreeControl } from '@angular/cdk/tree';
|
import { FlatTreeControl } from '@angular/cdk/tree';
|
||||||
import { menuData } from './menu-data';
|
import { menuData } from './menu-data';
|
||||||
import { ResourceType } from '../model/controller.model';
|
import { ResourceType } from '../model/controller.model';
|
||||||
import { ISCommonService } from '../iscommon.service';
|
import { ISService } from '../is.service';
|
||||||
|
|
||||||
export interface MenuNode {
|
export interface MenuNode {
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -38,7 +38,7 @@ export class MainMenuTreeComponent {
|
||||||
/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
|
/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
|
||||||
dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;
|
dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;
|
||||||
|
|
||||||
constructor(public service:ISCommonService) {
|
constructor(public service:ISService) {
|
||||||
this.treeFlattener = new MatTreeFlattener(
|
this.treeFlattener = new MatTreeFlattener(
|
||||||
this.transformer,
|
this.transformer,
|
||||||
this.getLevel,
|
this.getLevel,
|
||||||
|
|
|
@ -18,3 +18,16 @@ export interface Protocol {
|
||||||
id: string
|
id: string
|
||||||
params: ProtocolParams[]
|
params: ProtocolParams[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface WfHistoryEntry {
|
||||||
|
processId: string,
|
||||||
|
name: string,
|
||||||
|
family: string,
|
||||||
|
status: string,
|
||||||
|
startDate: string,
|
||||||
|
endDate: string,
|
||||||
|
dsId?: string,
|
||||||
|
dsName?: string,
|
||||||
|
dsApi?: string,
|
||||||
|
details: Map<string,string>
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { ISCommonService } from '../iscommon.service';
|
import { ISService } from '../is.service';
|
||||||
import { MatTableDataSource } from '@angular/material/table';
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
import { Protocol, ProtocolParams } from '../model/controller.model';
|
import { Protocol, ProtocolParams } from '../model/controller.model';
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ export class ProtocolsComponent {
|
||||||
protDatasources:ProtocolDatasource[] = [];
|
protDatasources:ProtocolDatasource[] = [];
|
||||||
colums : string[] = ['name', 'label', 'type', 'optional', 'hasSelFunction'];
|
colums : string[] = ['name', 'label', 'type', 'optional', 'hasSelFunction'];
|
||||||
|
|
||||||
constructor(public service:ISCommonService) {
|
constructor(public service:ISService) {
|
||||||
this.service.loadProtocols().subscribe({
|
this.service.loadProtocols().subscribe({
|
||||||
next:(data:Protocol[]) => {
|
next:(data:Protocol[]) => {
|
||||||
data.forEach(p => {
|
data.forEach(p => {
|
||||||
|
|
|
@ -0,0 +1,74 @@
|
||||||
|
<mat-card>
|
||||||
|
<mat-card-header>
|
||||||
|
<mat-card-title>Workflow History</mat-card-title>
|
||||||
|
</mat-card-header>
|
||||||
|
<mat-card-content>
|
||||||
|
|
||||||
|
<mat-form-field style="margin-top: 3em; width: 100%;">
|
||||||
|
<mat-label>Filter</mat-label>
|
||||||
|
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<span *ngIf="from < 0 && to < 0"><b>Recent workflows</b> (max {{total}})</span>
|
||||||
|
<span *ngIf="from >= 0 && to >= 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> {{to | date:"yyyy-MM-dd HH:mm:ss"}}</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>
|
||||||
|
<br />
|
||||||
|
<span><b>Count :</b> {{wfDatasource.filteredData.length}}</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table mat-table [dataSource]="wfDatasource" 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>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="name">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Workflow Name </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="family">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Workflow Family </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.family}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="dsName">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Datasource </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.dsName}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="status">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Status </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.status}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="startDate">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Start Date </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="endDate">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> End Date </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.endDate}} </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="4">No data matching the filter "{{input.value}}"</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { WfHistoryComponent } from './wf-history.component';
|
||||||
|
|
||||||
|
describe('WfHistoryComponent', () => {
|
||||||
|
let component: WfHistoryComponent;
|
||||||
|
let fixture: ComponentFixture<WfHistoryComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ WfHistoryComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(WfHistoryComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { Component } 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';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-wf-history',
|
||||||
|
templateUrl: './wf-history.component.html',
|
||||||
|
styleUrls: ['./wf-history.component.css']
|
||||||
|
})
|
||||||
|
export class WfHistoryComponent {
|
||||||
|
|
||||||
|
wfDatasource:MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
|
||||||
|
|
||||||
|
colums : string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
|
||||||
|
|
||||||
|
total:number = 100
|
||||||
|
from:number = -1
|
||||||
|
to:number = -1
|
||||||
|
|
||||||
|
constructor(public service:ISService, route: ActivatedRoute) {
|
||||||
|
|
||||||
|
let totalP = route.snapshot.paramMap.get('total');
|
||||||
|
let fromP = route.snapshot.queryParamMap.get('from');
|
||||||
|
let toP = route.snapshot.queryParamMap.get('to');
|
||||||
|
|
||||||
|
if (totalP) { this.total = parseInt(totalP); }
|
||||||
|
if (fromP) { this.from = parseInt(fromP); }
|
||||||
|
if (toP) { this.to = parseInt(toP); }
|
||||||
|
|
||||||
|
this.service.loadWfHistory(this.total, this.from, this.to).subscribe({
|
||||||
|
next:(data:WfHistoryEntry[]) => this.wfDatasource.data = data,
|
||||||
|
error:error => console.log(error),
|
||||||
|
complete:() => console.log("Completed")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
applyFilter(event: Event) {
|
||||||
|
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
||||||
|
this.wfDatasource.filter = filterValue;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue