From 768092342aa51614188d72bc63723973ba7a2f67 Mon Sep 17 00:00:00 2001 From: Eltanany Shaaban Date: Sun, 13 Dec 2020 20:16:17 +0200 Subject: showing topology template in configuration dashboard Issue-ID: CCSDK-3041 Signed-off-by: Eltanany Shaaban Change-Id: Iea8fc8f2712185ca3caf41b191e295319556b83c --- .../configuration-dashboard.component.html | 19 ++++++-- .../topology-template.component.css | 0 .../topology-template.component.html | 13 +++++ .../topology-template.component.ts | 56 ++++++++++++++++++++++ .../package-list/package-list.component.css | 6 +++ .../package-list/package-list.component.html | 2 + .../feature-modules/packages/packages.module.ts | 6 ++- 7 files changed, 98 insertions(+), 4 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.ts 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 @@ - @@ -758,6 +760,9 @@ EXTERNAL SYSTEM AUTHENTICATION PROPERTIES + Topology Template @@ -790,6 +795,14 @@ + 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 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 @@ +

topology-template works!

+ + + 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 @@

{{bluePrint.artifactName}}

v{{bluePrint.artifactVersion}} + 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: [] -- cgit 1.2.3-korg