D-Net
/
dnet-applications
23
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

wf history

This commit is contained in:
Michele Artini 2023-01-20 16:57:03 +01:00
parent 8791d61303
commit 118c3ac7d3
18 changed files with 264 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontends/dnet-is-application/src/app/app-routing.module.ts
View File

@ -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({

4
frontends/dnet-is-application/src/app/app.module.ts
View File

@ -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,

66
frontends/dnet-is-application/src/app/info/info.component.html
View File

@ -3,7 +3,7 @@
<mat-card-title>Container Info</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 />
@ -35,39 +35,39 @@
</div>
<div style="margin-top: 3em;" *ngIf="moduleDatasource.filteredData.length > 0">
<h3>Modules</h3>
<table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">
<div style="margin-top: 3em;" *ngIf="moduleDatasource.filteredData.length > 0">
<h3>Modules</h3>
<table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">
<ng-container matColumnDef="group">
<th mat-header-cell *matHeaderCellDef> Group </th>
<td mat-cell *matCellDef="let element"> {{element.group}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="versions">
<th mat-header-cell *matHeaderCellDef> Versions </th>
<td mat-cell *matCellDef="let element"> {{element.versions}} </td>
</ng-container>
<ng-container matColumnDef="files">
<th mat-header-cell *matHeaderCellDef> Files </th>
<td mat-cell *matCellDef="let element"> {{element.files}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedModuleColumns;"></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>
</div>
<ng-container matColumnDef="group">
<th mat-header-cell *matHeaderCellDef> Group </th>
<td mat-cell *matCellDef="let element"> {{element.group}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="versions">
<th mat-header-cell *matHeaderCellDef> Versions </th>
<td mat-cell *matCellDef="let element"> {{element.versions}} </td>
</ng-container>
<ng-container matColumnDef="files">
<th mat-header-cell *matHeaderCellDef> Files </th>
<td mat-cell *matCellDef="let element"> {{element.files}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedModuleColumns;"></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>
</div>
</mat-card-content>
</mat-card>

7
frontends/dnet-is-application/src/app/info/info.component.ts
View File

@ -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 => {

8
frontends/dnet-is-application/src/app/iscommon.service.spec.ts → frontends/dnet-is-application/src/app/is.service.spec.ts
View File

@ -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', () => {

37
frontends/dnet-is-application/src/app/is.service.ts Normal file
View File

@ -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});
}
}

26
frontends/dnet-is-application/src/app/iscommon.service.ts
View File

@ -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/");
}
}

3
frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
View File

@ -11,3 +11,6 @@
text-align: center;
float: right;
}
.collapse-buttons { text-align: right; }
.collapse-buttons button { font-size: 0.6em; }

8
frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html
View File

@ -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>

12
frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.ts
View File

@ -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',
@ -8,10 +9,13 @@ import { ISCommonService } from '../iscommon.service';
styleUrls: ['./main-menu-panels.component.css']
})
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);
}
}

4
frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html
View File

@ -1,3 +1,7 @@
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
<button mat-icon-button disabled></button>

4
frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts
View File

@ -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,

13
frontends/dnet-is-application/src/app/model/controller.model.ts
View File

@ -17,4 +17,17 @@ export interface ProtocolParams {
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>
}

4
frontends/dnet-is-application/src/app/protocols/protocols.component.ts
View File

@ -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
frontends/dnet-is-application/src/app/wf-history/wf-history.component.css Normal file
View File

74
frontends/dnet-is-application/src/app/wf-history/wf-history.component.html Normal file
View File

@ -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>

23
frontends/dnet-is-application/src/app/wf-history/wf-history.component.spec.ts Normal file
View File

@ -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();
});
});

45
frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts Normal file
View File

@ -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;
}
}