new-is-app-angular2 #12
|
@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
|
|||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { InfoComponent } from './info/info.component';
|
||||
import { ProtocolsComponent } from './protocols/protocols.component';
|
||||
import { WfHistoryComponent } from './wf-history/wf-history.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path:"info" , component:InfoComponent},
|
||||
{ path:"adv_resources/protocol" , component:ProtocolsComponent}
|
||||
{ path:"adv_resources/protocol" , component:ProtocolsComponent},
|
||||
{ path:"wf_history" , component:WfHistoryComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
@ -24,6 +24,7 @@ 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';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -32,7 +33,8 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
|||
DatafilterPipe,
|
||||
MainMenuTreeComponent,
|
||||
ProtocolsComponent,
|
||||
MainMenuPanelsComponent
|
||||
MainMenuPanelsComponent,
|
||||
WfHistoryComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ISCommonService } from '../iscommon.service';
|
||||
import { ISService } from '../is.service';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
export interface KeyValue {
|
||||
|
@ -19,7 +19,6 @@ export interface KeyValueDatasource {
|
|||
datasource: MatTableDataSource<any>;
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-info',
|
||||
templateUrl: './info.component.html',
|
||||
|
@ -28,12 +27,12 @@ export interface KeyValueDatasource {
|
|||
export class InfoComponent {
|
||||
|
||||
kvDatasources:KeyValueDatasource[] = [];
|
||||
moduleDatasource:MatTableDataSource<Module[]> = new MatTableDataSource<Module[]>([]);
|
||||
moduleDatasource:MatTableDataSource<Module> = new MatTableDataSource<Module>([]);
|
||||
|
||||
displayedKVColumns: string[] = ['k', 'v'];
|
||||
displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
|
||||
|
||||
constructor(public service:ISCommonService) {
|
||||
constructor(public service:ISService) {
|
||||
this.service.loadInfo().subscribe({
|
||||
next:(data:any[]) => {
|
||||
data.forEach(section => {
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ISCommonService } from './iscommon.service';
|
||||
import { ISService } from './is.service';
|
||||
|
||||
describe('ISCommonService', () => {
|
||||
let service: ISCommonService;
|
||||
describe('ISService', () => {
|
||||
let service: ISService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(ISCommonService);
|
||||
service = TestBed.inject(ISService);
|
||||
});
|
||||
|
||||
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;
|
||||
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-header>
|
||||
<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 { ISCommonService } from '../iscommon.service';
|
||||
import { ISService } from '../is.service';
|
||||
import {MatAccordion} from '@angular/material/expansion';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-menu-panels',
|
||||
|
@ -9,9 +10,12 @@ import { ISCommonService } from '../iscommon.service';
|
|||
})
|
||||
export class MainMenuPanelsComponent {
|
||||
|
||||
@ViewChild(MatAccordion)
|
||||
accordion!:MatAccordion;
|
||||
|
||||
resTypes:ResourceType[] = [];
|
||||
|
||||
constructor(public service:ISCommonService) {
|
||||
constructor(public service:ISService) {
|
||||
this.service.loadResourceTypes().subscribe((data:ResourceType[]) => this.resTypes = data);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
|
||||
<button mat-icon-button disabled></button>
|
||||
|
|
|
@ -3,7 +3,7 @@ import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'
|
|||
import { FlatTreeControl } from '@angular/cdk/tree';
|
||||
import { menuData } from './menu-data';
|
||||
import { ResourceType } from '../model/controller.model';
|
||||
import { ISCommonService } from '../iscommon.service';
|
||||
import { ISService } from '../is.service';
|
||||
|
||||
export interface MenuNode {
|
||||
name: string;
|
||||
|
@ -38,7 +38,7 @@ export class MainMenuTreeComponent {
|
|||
/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
|
||||
dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;
|
||||
|
||||
constructor(public service:ISCommonService) {
|
||||
constructor(public service:ISService) {
|
||||
this.treeFlattener = new MatTreeFlattener(
|
||||
this.transformer,
|
||||
this.getLevel,
|
||||
|
|
|
@ -18,3 +18,16 @@ export interface Protocol {
|
|||
id: string
|
||||
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 { ISCommonService } from '../iscommon.service';
|
||||
import { ISService } from '../is.service';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { Protocol, ProtocolParams } from '../model/controller.model';
|
||||
|
||||
|
@ -17,7 +17,7 @@ export class ProtocolsComponent {
|
|||
protDatasources:ProtocolDatasource[] = [];
|
||||
colums : string[] = ['name', 'label', 'type', 'optional', 'hasSelFunction'];
|
||||
|
||||
constructor(public service:ISCommonService) {
|
||||
constructor(public service:ISService) {
|
||||
this.service.loadProtocols().subscribe({
|
||||
next:(data:Protocol[]) => {
|
||||
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