Test component

Added test component changes as per the mockup

Issue-ID: CCSDK-761
Change-Id: Ie0d86a00d6d0b0ae540bcd78a37dcac74ad903a8
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

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