showing topology template in configuration dashboard

Issue-ID: CCSDK-3041
Signed-off-by: Eltanany Shaaban <shaaban.eltanany.ext@orange.com>
Change-Id: Iea8fc8f2712185ca3caf41b191e295319556b83c

7 files changed, 98 insertions, 4 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 9f0028bd9..305ffa6f3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -728,9 +728,11 @@
                                     </div>
                                 </div>
                             </div>
-                            <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
-                                    data-target="#enrichModal">
-                                <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
+                            <button type="button" class="btn btn-sm mb-2 btn-enrich"
+                                    (click)="enrichBluePrint()">
+                                   <!-- data-toggle="modal" data-target="#enrichModal"-->
+
+                                <i class="icon-enrich" aria-hidden="true"></i> Enrich
                             </button>
 
 
@@ -758,6 +760,9 @@
                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+                            <a class="nav-item nav-link" id="nav-topologytemplate-tab" data-toggle="tab"
+                               href="#nav-topologytemplate" role="tab" aria-controls="nav-authentication"
+                               aria-selected="false">Topology Template</a>
                         </div>
                     </div>
 
@@ -790,6 +795,14 @@
                                     </div>
                                 </div>
                             </div>
+                            <div class="tab-pane fade" id="nav-topologytemplate" role="tabpanel"
+                                 aria-labelledby="nav-authentication-tab">
+                                <div class="card creat-card">
+                                    <div class="editor-container">
+                                        <app-topology-template></app-topology-template>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
new file mode 100644
index 000000000..f67364421
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
@@ -0,0 +1,13 @@
+<p>topology-template works!</p>
+<ul class="defintionsNote">
+    <li><b>To add new property: </b></li>
+    <li>1. Use Copy and paste option or</li>
+    <li>2. Write them manually</li>
+</ul>
+<ace-editor [(text)]="content" [mode]="'json'"
+            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
+            (textChanged)="textChanged($event)"
+            #editor style="height:300px;"
+            (autocomplete)="content"
+>
+</ace-editor>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.ts
new file mode 100644
index 000000000..8fce6954d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.ts
@@ -0,0 +1,56 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
+import {DesignerStore} from '../../designer/designer.store';
+import {Subject} from 'rxjs';
+import {PackageCreationUtils} from '../package-creation.utils';
+import {PackageCreationStore} from '../package-creation.store';
+
+@Component({
+    selector: 'app-topology-template',
+    templateUrl: './topology-template.component.html',
+    styleUrls: ['./topology-template.component.css']
+})
+export class TopologyTemplateComponent implements OnInit, OnDestroy {
+
+    ngUnsubscribe = new Subject();
+    content = ' ';
+    private cbaPackage: any;
+    private designerState: any;
+
+    constructor(private designerStore: DesignerStore,
+                private packageCreationUtils: PackageCreationUtils,
+                private packageCreationStore: PackageCreationStore) {
+
+        this.packageCreationStore.state$
+            .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
+                takeUntil(this.ngUnsubscribe))
+            .subscribe(
+                cbaPackage => {
+                    this.cbaPackage = cbaPackage;
+                });
+        this.designerStore.state$.pipe(
+            distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
+            takeUntil(this.ngUnsubscribe))
+            .subscribe(state => {
+                this.designerState = state;
+                this.content =
+                    this.packageCreationUtils.transformToJson(state.template);
+                console.log(this.content);
+                console.log(state.template);
+            });
+    }
+
+    ngOnInit() {
+    }
+
+    textChanged($event: {}) {
+        this.cbaPackage.templateTopology.content = this.content;
+        this.designerState.template = JSON.parse(this.content);
+
+    }
+
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
index e69de29bb..953346b89 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
@@ -0,0 +1,6 @@
+.dot {
+    height: 8px;
+    width: 1px;
+    background-color: #0ABDE3;
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index ca88c6571..dea94dbe6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -33,6 +33,8 @@
                             <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom">
                                 {{bluePrint.artifactName}}</p>
                             <span class="package-version">v{{bluePrint.artifactVersion}}</span>
+                            <button *ngIf="bluePrint.published.includes('Y')" type="button"
+                                    class="dot"><i class="glyphicon glyphicon-ok"></i></button>
                         </a>
 
                     </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index ad79a1321..e231ebeb5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -36,6 +36,8 @@ import { ImportPackageComponent } from './packages-dashboard/import-package/impo
 import { FunctionsAttributeComponent } from './designer/functions-attribute/functions-attribute.component';
 import { ActionAttributesComponent } from './designer/action-attributes/action-attributes.component';
 import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatSortModule, MatTableModule } from '@angular/material';
+import { TopologyTemplateComponent } from './package-creation/topology-template/topology-template.component';
+import {CollapseModule} from 'ngx-bootstrap/collapse';
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
@@ -61,6 +63,7 @@ import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatSortMo
         ImportPackageComponent,
         FunctionsAttributeComponent,
         ActionAttributesComponent,
+        TopologyTemplateComponent,
 
     ],
     imports: [
@@ -80,7 +83,8 @@ import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatSortMo
         MatTableModule,
         MatPaginatorModule,
         MatSortModule,
-        MatProgressSpinnerModule
+        MatProgressSpinnerModule,
+        CollapseModule
     ],
     providers: [ApiService, JsonPipe, ComponentCanDeactivateGuard],
     bootstrap: []