diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules')
2 files changed, 81 insertions, 29 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html index 1fca8d1b7..7c225d285 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html @@ -19,34 +19,53 @@ limitations under the License. ============LICENSE_END============================================ --> <div style="display: flex;flex-direction: row"> - <div style="width: 20%;margin: 2px"> - <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> - <!-- This is the tree node template for leaf nodes --> - <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> - <!-- use a disabled button to provide padding for tree leaf --> - <button mat-icon-button disabled></button> - <span (click)="fileClicked(node.name)">{{node.name}}</span> - </mat-tree-node> - <!-- This is the tree node template for expandable nodes --> - <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> - <button mat-icon-button matTreeNodeToggle - [attr.aria-label]="'toggle ' + node.name"> - <mat-icon class="mat-icon-rtl-mirror"> - {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} - </mat-icon> - </button> - <span (click)="fileClicked(node.name)">{{node.name}}</span> - </mat-tree-node> - </mat-tree> + + <div style="width: 12%; height: 553px;"> + + <mat-accordion> + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Workflows + </mat-panel-title> + </mat-expansion-panel-header> + <div class="flex-container"> + <div style="cursor: pointer; padding: 2px" (click)="createRequest(workflow)" class="item-box" *ngFor="let workflow of workflows">{{workflow.name}}</div> + </div> + </mat-expansion-panel> + </mat-accordion> + </div> + + <div style="width: 90%;display: flex;flex-direction: row; margin-left: 1em"> + <div style="width: 50%; margin: 2px;"> + <p>Request</p> + <textarea style=" width: 99%; + min-height: 27rem; + font-family: Lucida Console, Monaco, monospace; + font-size: 0.8rem; + line-height: 1.2;" cols="30" rows="10">{{request }}</textarea> + <div style="height: 10%"> + <button style="margin: 1em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em;min-width: 6em;">Submit</button> + <button style="margin: 1em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em;min-width: 6em;">Clear</button> + </div> + </div> + + <div style="width: 50%; margin: 2px;"> + <p>Response</p> + <textarea style=" width: 99%; + min-height: 27rem; + font-family: Lucida Console, Monaco, monospace; + font-size: 0.8rem; + line-height: 1.2;" cols="30" rows="10"></textarea> + </div> </div> - <div style="width: 80%;background-color: gainsboro;height: 533px;"></div> -</div> -<div> - <button style=" background-color: #3f51b5; - color: white; - border: 2px solid; - width: 8em; - height: 3em; - border-radius: 2em;">Test</button> </div> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts index 2c87e8739..ee33fd737 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts @@ -22,6 +22,14 @@ limitations under the License. import { Component, OnInit } from '@angular/core'; import {FlatTreeControl} from '@angular/cdk/tree'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; +import { Observable, Subscription } from 'rxjs'; +import { Store } from '@ngrx/store'; + +import { IAppState } from '../../../common/core/store/state/app.state'; +import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import { IMetaData } from '../../../common/core/store/models/metadata.model'; +import { LoadBlueprintSuccess } from 'src/app/common/core/store/actions/blueprint.action'; @@ -86,6 +94,9 @@ interface ExampleFlatNode { styleUrls: ['./test-template.component.scss'] }) export class TestTemplateComponent implements OnInit { + private blueprintpState: Subscription; + private request ; + private workflows = []; private transformer = (node: FoodNode, level: number) => { return { @@ -103,7 +114,15 @@ export class TestTemplateComponent implements OnInit { dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - constructor() { + constructor(private store: Store<IAppState>) { + this.blueprintpState = this.store.select('blueprint') + .subscribe((data: any)=>{ + console.log(data); + if(data.blueprint.topology_template && data.blueprint.topology_template.workflows) { + this.buildWorkflowData(data.blueprint.topology_template.workflows); + // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4); + } + }); this.dataSource.data = TREE_DATA; } @@ -116,4 +135,18 @@ export class TestTemplateComponent implements OnInit { console.log('selected file:' + file); } + buildWorkflowData(data) { + this.workflows = []; + for (var property1 in data) { + data[property1].name = property1; + this.workflows.push(data[property1]) + } + this.request = this.workflows[0]; + } + + createRequest(workflow) { + this.request = JSON.stringify(workflow, undefined, 4); + + } + } |