Deploy component

Created UI for buleprint deploy and save

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

3 files changed, 116 insertions, 6 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html
index fc7083df3..739ef0479 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html
@@ -18,8 +18,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
+<div style="height: 556px;">
+<div style="height: 90%;overflow-y: scroll;border: 1px solid grey">
+  <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>
 
-<p>
-  deploy-template works!
-</p>
-<router-outlet></router-outlet>
+<div style="height: 10%">
+  <button style="margin: 1em;
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 2em;
+  padding: 0.5em;">Deploy/Save</button>
+  <button style="margin: 1em;
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 2em;
+  padding: 0.5em;">Download</button>
+</div>
+
+</div>
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.ts
index 22854e670..ab636b905 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.ts
@@ -19,6 +19,59 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 import { Component, OnInit } from '@angular/core';
+import {FlatTreeControl} from '@angular/cdk/tree';
+import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
+
+interface FoodNode {
+  name: string;
+  children?: FoodNode[];
+}
+
+const TREE_DATA: FoodNode[] = [
+  {
+    name: 'Definitions',
+    children: [
+      {name: 'activation-blueprint.json'},
+      {name: 'artifacts_types.json'},
+      {name: 'data_types.json'},
+    ]
+  }, 
+  {
+    name: 'Scripts',
+    children: [
+      {
+        name: 'kotlin',
+        children: [
+          {name: 'ScriptComponent.cba.kts'},
+          {name: 'ResourceAssignmentProcessor.cba.kts'},
+        ]
+      }
+    ]
+  },
+  {
+    name: 'Templates',
+    children: [
+      {
+        name: 'baseconfig-template'
+      }
+    ]
+  },
+  {
+    name: 'TOSCA-Metada',
+    children: [
+      {
+        name: 'TOSCA.meta'
+      }
+    ]
+  },
+];
+
+/** Flat node with expandable and level information */
+interface ExampleFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+}
 
 @Component({
   selector: 'app-deploy-template',
@@ -27,9 +80,33 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DeployTemplateComponent implements OnInit {
 
-  constructor() { }
+  private transformer = (node: FoodNode, level: number) => {
+    return {
+      expandable: !!node.children && node.children.length > 0,
+      name: node.name,
+      level: level,
+    };
+  }
+
+  treeControl = new FlatTreeControl<ExampleFlatNode>(
+      node => node.level, node => node.expandable);
+
+  treeFlattener = new MatTreeFlattener(
+      this.transformer, node => node.level, node => node.expandable, node => node.children);
+
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  constructor() { 
+    this.dataSource.data = TREE_DATA;
+  }
+
+  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 
   ngOnInit() {
   }
 
+  fileClicked(file) {
+    console.log('selected file:' + file);
+  }
+
 }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.module.ts
index e39beacb2..5d5a6000e 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.module.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.module.ts
@@ -22,6 +22,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DeployTemplateComponent } from './deploy-template.component';
 import { DeployTemplateRoutingModule } from './deploy-template-routing.module';
+import { AppMaterialModule } from '../../../common/modules/app-material.module';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { DeployTemplateRoutingModule } from './deploy-template-routing.module';
   ],
   imports: [
     CommonModule,
-    DeployTemplateRoutingModule
+    DeployTemplateRoutingModule,
+    AppMaterialModule
   ]
 })
 export class DeployTemplateModule { }