wf template info

dnet-app/frontends/is/src/app/dsm/add-wf-dialog.html

@@ -7,9 +7,9 @@
 			<mat-card-subtitle>{{wf.description}}</mat-card-subtitle>
 		</mat-card-header>
 		<mat-card-content>
-			<table class="dsm-result-table">
+			<table>
 				<tr>
-					<th align="left" width="20%">Expected Eosc Types</th>
+					<th align="left" width="33%">Expected Eosc Types</th>
 					<td>
 						<span *ngIf="!wf.expectedEoscDsTypes.length">ALL</span>
 						<span *ngIf="wf.expectedEoscDsTypes.length">{{wf.expectedEoscDsTypes.join(', ')}}</span>

dnet-app/frontends/is/src/app/dsm/dsm-api.component.html

@@ -21,7 +21,7 @@
 			<mat-card-title>Datasource</mat-card-title>
 		</mat-card-header>
 		<mat-card-content>
-			<table class="dsm-result-table">
+			<table>
 				<tr>
 					<th align="left" width="33%">Name</th>
 					<td>
@@ -82,7 +82,7 @@
 			<mat-card-subtitle>ID: {{apiId}}</mat-card-subtitle>
 		</mat-card-header>
 		<mat-card-content>
-			<table class="dsm-result-table">
+			<table>
 				<tr>
 					<th align="left" width="33%">is Active</th>
 					<td>{{api.active}}

dnet-app/frontends/is/src/app/dsm/dsm-results.component.html

@@ -26,7 +26,7 @@
 		<mat-card-subtitle *ngIf="r.otherName && r.name != r.otherName">{{r.otherName}}</mat-card-subtitle>
 	</mat-card-header>
 	<mat-card-content>
-		<table class="dsm-result-table">
+		<table>
 			<tr>
 				<th align="left" width="20%">Id</th>
 				<td width="80%"><a href="/proxy/byType/datasource_manager/api/ds/{{r.id}}" target="_blank">{{r.id}}</a></td>

dnet-app/frontends/is/src/app/dsm/dsm.component.css

@@ -1,14 +0,0 @@
-.dsm-result-table {
-	margin-top: 1em;
-	border-collapse: collapse;
-}
-
-.dsm-result-table tr:not(:last-child) {
-	border-bottom: 1pt solid lightgrey;
-}
-
-.dsm-result-table td button {
-	font-size: 0.8em !important;
-	padding: 0 !important;
-	height: 2.5em !important;
-}

dnet-app/frontends/is/src/app/dsm/dsm.component.ts

@@ -15,7 +15,7 @@ import { WfTemplateDialog } from '../wf-confs/wf-common.component';
 @Component({
 	selector: 'app-dsm-search',
 	templateUrl: './dsm-search.component.html',
-	styleUrls: ['./dsm.component.css']
+	styleUrls: []
 })
 export class DsmSearchComponent implements OnInit {
 	searchText: string = '';
@@ -45,7 +45,7 @@ export class DsmSearchComponent implements OnInit {
 @Component({
 	selector: 'app-dsm-results',
 	templateUrl: './dsm-results.component.html',
-	styleUrls: ['./dsm.component.css']
+	styleUrls: []
 })
 export class DsmResultsComponent implements OnInit {
 	filterText: string = '';
@@ -116,7 +116,7 @@ export class DsmResultsComponent implements OnInit {
 @Component({
 	selector: 'app-dsm-api',
 	templateUrl: './dsm-api.component.html',
-	styleUrls: ['./dsm.component.css']
+	styleUrls: []
 })
 export class DsmApiComponent implements OnInit {
 
@@ -181,7 +181,7 @@ export class DsmApiComponent implements OnInit {
 @Component({
 	selector: 'dsm-browse-dialog',
 	templateUrl: 'dsm-browse-dialog.html',
-	styleUrls: ['./dsm.component.css']
+	styleUrls: []
 })
 export class DsmBrowseDialog implements OnInit {
 
@@ -215,7 +215,7 @@ export class DsmBrowseDialog implements OnInit {
 @Component({
 	selector: 'dsm-add-api-dialog',
 	templateUrl: './dsm-add-api.dialog.html',
-	styleUrls: ['./dsm.component.css']
+	styleUrls: []
 })
 export class DsmAddApiDialog {
 	selectedProtocol: string = '';
@@ -339,7 +339,7 @@ export class DsmConfService {
 @Component({
 	selector: 'dsm-add-wf-dialog',
 	templateUrl: 'add-wf-dialog.html',
-	styleUrls: ['./dsm.component.css']
+	styleUrls: []
 })
 export class DsmAddWorkflowDialog {
 

dnet-app/frontends/is/src/app/wf-confs/wf-template-dialog.html

@@ -1,7 +1,35 @@
-<h1 mat-dialog-title>Workflow Template: Graph</h1>
+<h1 mat-dialog-title>Workflow Template</h1>
 
-<div mat-dialog-content>
-	{{template | json}}
+<div mat-dialog-content style="height: 500px; overflow: scroll;">
+	<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" animationDuration="0ms">
+		<mat-tab label="Graph">{{template.graph | json}}</mat-tab>
+
+		<mat-tab label="Parameters" *ngIf="template.parameters.length">
+			<table>
+				<tr>
+					<th align="left">Parameter</th>
+					<th>Type</th>
+					<th>is required</th>
+					<th>default value</th>
+				</tr>
+				<tr *ngFor="let p of template.parameters">
+					<td>{{p.name}}<br /><small>{{p.description}}</small></td>
+					<td align="center">{{p.type}}</td>
+					<td align="center"><mat-icon fontIcon="check" *ngIf="p.required"></mat-icon></td>
+					<td align="center">{{p.defaultValue}}</td>
+				</tr>
+			</table>
+		</mat-tab>
+
+		<mat-tab label="Other Info" *ngIf="(template.info | keyvalue).length">
+			<table>
+				<tr *ngFor="let item of template.info | keyvalue">
+					<th align="left" width="25%">{{item.key}}</th>
+					<td>{{item.value}}</td>
+				</tr>
+			</table>
+		</mat-tab>
+	</mat-tab-group>
 </div>
 
 <div mat-dialog-actions>

dnet-app/frontends/is/src/styles.css

@@ -21,12 +21,18 @@ body {
 table {
 	width: 100%;
 	table-layout: fixed !important;
+	margin-top: 1em;
+	border-collapse: collapse;
 }
 
 tr {
 	height: auto !important;
 }
 
+tr:not(:last-child) {
+	border-bottom: 1pt solid lightgrey;
+}
+
 th.mat-sort-header-sorted {
 	color: black !important;
 }