From 9d8159b392b745478372b8cff69bed41b9e165b0 Mon Sep 17 00:00:00 2001
From: "michele.artini"
Date: Mon, 23 Jan 2023 14:22:14 +0100
Subject: [PATCH] first dialog
---
.../src/app/app.component.css | 3 +-
.../dnet-is-application/src/app/app.module.ts | 17 ++---
.../src/app/datafilter.pipe.spec.ts | 8 ---
.../src/app/datafilter.pipe.ts | 22 -------
.../src/app/info/info.component.ts | 13 +---
.../src/app/model/controller.model.ts | 12 ++++
.../src/app/wf-history/wf-dialog.html | 31 ++++++++++
.../app/wf-history/wf-history.component.html | 8 ++-
.../app/wf-history/wf-history.component.ts | 62 +++++++++++++++----
frontends/dnet-is-application/src/styles.css | 11 ++++
10 files changed, 119 insertions(+), 68 deletions(-)
delete mode 100644 frontends/dnet-is-application/src/app/datafilter.pipe.spec.ts
delete mode 100644 frontends/dnet-is-application/src/app/datafilter.pipe.ts
create mode 100644 frontends/dnet-is-application/src/app/wf-history/wf-dialog.html
diff --git a/frontends/dnet-is-application/src/app/app.component.css b/frontends/dnet-is-application/src/app/app.component.css
index 16aa103f..1f3a5e34 100644
--- a/frontends/dnet-is-application/src/app/app.component.css
+++ b/frontends/dnet-is-application/src/app/app.component.css
@@ -3,7 +3,7 @@
}
.sidenav {
- width: 400px;
+ width: 350px;
}
.sidenav .mat-toolbar {
@@ -15,4 +15,3 @@
top: 0;
z-index: 1;
}
-
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/app.module.ts b/frontends/dnet-is-application/src/app/app.module.ts
index 16c370b6..35ac35ef 100644
--- a/frontends/dnet-is-application/src/app/app.module.ts
+++ b/frontends/dnet-is-application/src/app/app.module.ts
@@ -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]
diff --git a/frontends/dnet-is-application/src/app/datafilter.pipe.spec.ts b/frontends/dnet-is-application/src/app/datafilter.pipe.spec.ts
deleted file mode 100644
index 872c8c8a..00000000
--- a/frontends/dnet-is-application/src/app/datafilter.pipe.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { DatafilterPipe } from './datafilter.pipe';
-
-describe('DatafilterPipe', () => {
- it('create an instance', () => {
- const pipe = new DatafilterPipe();
- expect(pipe).toBeTruthy();
- });
-});
diff --git a/frontends/dnet-is-application/src/app/datafilter.pipe.ts b/frontends/dnet-is-application/src/app/datafilter.pipe.ts
deleted file mode 100644
index 2f26b1a1..00000000
--- a/frontends/dnet-is-application/src/app/datafilter.pipe.ts
+++ /dev/null
@@ -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;
- }
- }
-
-}
diff --git a/frontends/dnet-is-application/src/app/info/info.component.ts b/frontends/dnet-is-application/src/app/info/info.component.ts
index 1416a49c..c8a5599f 100644
--- a/frontends/dnet-is-application/src/app/info/info.component.ts
+++ b/frontends/dnet-is-application/src/app/info/info.component.ts
@@ -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;
diff --git a/frontends/dnet-is-application/src/app/model/controller.model.ts b/frontends/dnet-is-application/src/app/model/controller.model.ts
index 2d02df5a..ae71bdaf 100644
--- a/frontends/dnet-is-application/src/app/model/controller.model.ts
+++ b/frontends/dnet-is-application/src/app/model/controller.model.ts
@@ -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
diff --git a/frontends/dnet-is-application/src/app/wf-history/wf-dialog.html b/frontends/dnet-is-application/src/app/wf-history/wf-dialog.html
new file mode 100644
index 00000000..9872724e
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/wf-history/wf-dialog.html
@@ -0,0 +1,31 @@
+Details
+
+
+
+
+ Filter
+
+
+
+
+
+
+ k |
+ {{element.k}} |
+
+
+
+ v |
+ {{element.v}} |
+
+
+
+
+
+
+
+ No data matching the filter "{{filterParams.value}}" |
+
+
+
+
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.html b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.html
index 54edac1b..1e25d063 100644
--- a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.html
+++ b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.html
@@ -12,16 +12,18 @@
= 0 && to < 0">Workflows from {{from | date:"yyyy-MM-dd HH:mm:ss"}} to undefined
= 0">Workflows from undefined to {{to | date:"yyyy-MM-dd HH:mm:ss"}}
- Count : {{wfDatasource.filteredData.length}}
+ Count : {{historyDatasource.filteredData.length}}
-
+
Process Id |
- {{element.processId}} |
+
+ {{element.processId}}
+ |
diff --git a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts
index 444f1990..0bb19362 100644
--- a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts
+++ b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts
@@ -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 { 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,16 +15,16 @@ import {map} from 'rxjs/operators';
})
export class WfHistoryComponent {
- wfDatasource:MatTableDataSource = new MatTableDataSource([]);
-
- colums : string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
+ historyDatasource: MatTableDataSource = new MatTableDataSource([]);
- total:number = 100
- from:number = -1
- to:number = -1
+ colums: string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
+
+ total: number = 100
+ from: number = -1
+ to: number = -1
+
+ constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) {
- 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');
@@ -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,
- error:error => console.log(error),
- complete:() => console.log("Completed")
+ 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 = new MatTableDataSource([]);
+ colums: string[] = ['k', 'v'];
+
+ constructor(
+ public dialogRef: MatDialogRef,
+ @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();
+ }
}
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/styles.css b/frontends/dnet-is-application/src/styles.css
index 3ed3130d..4acdef93 100644
--- a/frontends/dnet-is-application/src/styles.css
+++ b/frontends/dnet-is-application/src/styles.css
@@ -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;
+}
+
\ No newline at end of file