diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/service-path-creator')
8 files changed, 422 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.html b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.html new file mode 100644 index 0000000000..bbbf6ae694 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.html @@ -0,0 +1,5 @@ +<ui-element-dropdown data-tests-id="linkSrc" [readonly]="!link.isFirst || (link.isFirst && !link.canEdit)" class="cell link-selector" [values]="source" [(value)]="link.fromNode" (valueChange)="onSourceSelected($event)"></ui-element-dropdown> +<ui-element-dropdown data-tests-id="linkSrcCP" [readonly]="!link.isFirst || (link.isFirst && !link.canEdit)" class="cell link-selector" [values]="srcCP" [(value)]="link.fromCP" (valueChange)="onSrcCPSelected($event)"></ui-element-dropdown> +<ui-element-dropdown data-tests-id="linkTarget" [readonly]="!link.canEdit" class="cell link-selector" [values]="target" [(value)]="link.toNode" (valueChange)="onTargetSelected($event)"></ui-element-dropdown> +<ui-element-dropdown data-tests-id="linkTargetCP" [readonly]="!link.canEdit" class="cell link-selector" [values]="targetCP" [(value)]="link.toCP" (valueChange)="onTargetCPSelected($event)"></ui-element-dropdown> +<div class="cell remove" data-tests-id="removeLnk"><span *ngIf="link.canRemove" class="sprite-new delete-item-icon" (click)="removeRow()"></span></div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.less b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.less new file mode 100644 index 0000000000..beec9bd567 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.less @@ -0,0 +1,21 @@ +@import './../../../../../assets/styles/variables.less'; +.remove { + display: flex; + align-items: center; + justify-content: center; +} + +.cell { + padding: 0; +} + +/deep/ .link-selector { + select { + height: 30px; + border: none; + stroke: none; + } + +} + + diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.ts b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.ts new file mode 100644 index 0000000000..16433242d6 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link-row.component.ts @@ -0,0 +1,110 @@ +import {Component, Input} from '@angular/core'; +import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; +import {Link} from './link.model'; +import {ServicePathMapItem} from "app/models/graph/nodes-and-links-map"; + +@Component({ + selector: 'link-row', + templateUrl: './link-row.component.html', + styleUrls: ['./link-row.component.less'] +}) + + +export class LinkRowComponent { + @Input() data:Array<ServicePathMapItem>; + @Input() link:Link; + @Input() removeRow:Function; + source:Array<DropdownValue> = []; + target: Array<DropdownValue> = []; + srcCP: Array<DropdownValue> = []; + targetCP: Array<DropdownValue> = []; + + ngOnChanges() { + if (this.data) { + this.parseInitialData(this.data); + } + } + + parseInitialData(data: Array<ServicePathMapItem>) { + this.source = this.convertValuesToDropDownOptions(data); + if (this.link.fromNode) { + let srcCPOptions = this.findOptions(data, this.link.fromNode); + if (!srcCPOptions) { return; } + this.srcCP = this.convertValuesToDropDownOptions(srcCPOptions); + if (this.link.fromCP) { + let targetOptions = this.findOptions(srcCPOptions, this.link.fromCP); + if (!targetOptions) { return; } + this.target = this.convertValuesToDropDownOptions(targetOptions); + if (this.link.toNode) { + let targetCPOptions = this.findOptions(targetOptions, this.link.toNode); + if (!targetCPOptions) { return; } + this.targetCP = this.convertValuesToDropDownOptions(targetCPOptions); + } + } + } + } + + private findOptions(items: Array<ServicePathMapItem>, nodeOrCPId: string) { + let item = items.find((dataItem)=> nodeOrCPId === dataItem.id); + if (item && item.data && item.data.options) { + return item.data.options; + } + console.warn('no option was found to match selection of Node/CP with id:' + nodeOrCPId); + return null; + } + + private convertValuesToDropDownOptions(values: Array<ServicePathMapItem>) : Array<DropdownValue> { + let result = []; + for (let i = 0; i < values.length ; i++) { + result[result.length] = new DropdownValue(values[i].id, values[i].data.name); + } + return result; + } + + onSourceSelected(id) { + if (id) { + let srcCPOptions = this.findOptions(this.data, id); + this.srcCP = this.convertValuesToDropDownOptions(srcCPOptions); + this.link.fromCP = ''; + this.link.toNode = ''; + this.link.toCP = ''; + this.target = []; + this.targetCP = []; + } + } + + onSrcCPSelected (id) { + if (id) { + let srcCPData = this.data.find((dataItem)=> this.link.fromNode === dataItem.id).data; + let srcCPOptions = srcCPData.options; + let targetOptions = this.findOptions(srcCPOptions, id); + this.target = this.convertValuesToDropDownOptions(targetOptions); + this.link.fromCPOriginId = srcCPData.ownerId; + this.link.toNode = ''; + this.link.toCP = ''; + this.targetCP = []; + } + + } + + onTargetSelected(id) { + if (id) { + let srcCPOptions = this.findOptions(this.data, this.link.fromNode); + let targetOptions = this.findOptions(srcCPOptions, this.link.fromCP); + let targetCPOptions = this.findOptions(targetOptions, id); + this.targetCP = this.convertValuesToDropDownOptions(targetCPOptions); + this.link.toCP = ''; + } + + } + + onTargetCPSelected(id) { + if (id) { + let srcCPOptions = this.findOptions(this.data, this.link.fromNode); + let targetOptions = this.findOptions(srcCPOptions, this.link.fromCP); + let targetCPOptions = this.findOptions(targetOptions, this.link.toNode); + let targetCPDataObj = targetCPOptions.find((dataItem)=> id === dataItem.id).data; + this.link.toCPOriginId = targetCPDataObj.ownerId; + } + } +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link.model.ts b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link.model.ts new file mode 100644 index 0000000000..80128eb42e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/link-row/link.model.ts @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +'use strict'; +import {ForwardingPathLink} from "app/models/forwarding-path-link"; + +export class Link extends ForwardingPathLink { + public canEdit:boolean = false; + public canRemove:boolean = false; + public isFirst:boolean = false; + + constructor(link: ForwardingPathLink, canEdit: boolean, canRemove: boolean, isFirst: boolean) { + super(link.fromNode,link.fromCP, link.toNode, link.toCP, link.fromCPOriginId, link.toCPOriginId); + this.canEdit = canEdit; + this.canRemove = canRemove; + this.isFirst = isFirst; + } +} + + diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.html b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.html new file mode 100644 index 0000000000..96cd83eef6 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.html @@ -0,0 +1,43 @@ +<div class="service-path-creator"> + <form class="w-sdc-form"> + <div class="i-sdc-form-item" > + <label class="i-sdc-form-label required">Path Name</label> + <!-- <ui-element-input type="text" name="pathName" [value]="pathName" ></ui-element-input> --> + <input type="text" data-tests-id="pathName" name="pathName" [(ngModel)]="forwardingPath.name" [attr.maxLength]="100" /> <!-- TODO - make unique --> + </div> + + <div class="side-by-side"> + <div class="i-sdc-form-item" > + <label class="i-sdc-form-label">Protocol</label> + <!-- <ui-element-input type="text" name="protocol" [value]="protocol" ></ui-element-input> --> + <input type="text" data-tests-id="pathProtocol" name="protocol" [(ngModel)]="forwardingPath.protocol" [attr.maxLength]="100" /> + </div> + <div class="i-sdc-form-item" > + <label class="i-sdc-form-label">Destination Port Numbers</label> + <!-- <ui-element-input type="text" name="portNumbers" [value]="portNumbers" ></ui-element-input> --> + <input type="text" data-tests-id="pathPortNumbers" name="portNumbers" [(ngModel)]="forwardingPath.destinationPortNumber" pattern="[0-9,]*" /> <!-- TODO - validate delimiter --> + </div> + </div> + + <div class="separator-buttons"> + <span class="based-on-title">Based On</span> + <a (click)="addRow()" [ngClass]="{'disabled':!isExtendAllowed()}" data-tests-id="extendPathlnk">Extend Path</a> + </div> + + <div class="generic-table"> + <div class="header-row"> + <div class="cell header-cell" *ngFor="let header of headers"> + {{header}} + </div> + </div> + <div *ngIf="links && links.length === 0" class="no-row-text" > + There is no data to display + </div> + <div> + <link-row *ngFor="let link of links" [data]="linksMap" [link]="link" [removeRow]="removeRow" class="data-row" ></link-row> + </div> + </div> + + + </form> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.less b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.less new file mode 100644 index 0000000000..5c9e53e229 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.less @@ -0,0 +1,45 @@ +@import './../../../../assets/styles/variables.less'; +.service-path-creator { + font-family: @font-opensans-regular; + .separator-buttons { + margin: 10px 0; + display: flex; + justify-content: space-between; + } + .i-sdc-form-label { + font-size: 12px; + } + .w-sdc-form .i-sdc-form-item { + margin-bottom: 15px; + } + + .side-by-side { + display: flex; + .i-sdc-form-item { + flex-basis: 100%; + &:first-child { + margin-right: 10px; + } + } + } + + .generic-table { + max-height: 233px; + .header-row .header-cell { + &:last-child { + padding: 0; + } + } + /deep/ .cell { + &:last-child { + min-width: 30px; + } + } + } + + .based-on-title { + text-transform: uppercase; + font-size: 18px; + font-family: @font-opensans-regular; + } +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.ts b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.ts new file mode 100644 index 0000000000..dac41a37bc --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.component.ts @@ -0,0 +1,137 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import * as _ from "lodash"; +import { Component, ElementRef, forwardRef, Inject } from '@angular/core'; +import {Link} from './link-row/link.model'; +import {ForwardingPath} from 'app/models/forwarding-path'; +import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service"; +import {ForwardingPathLink} from "app/models/forwarding-path-link"; +import {ServicePathMapItem} from "app/models/graph/nodes-and-links-map"; + +@Component({ + selector: 'service-path-creator', + templateUrl: './service-path-creator.component.html', + styleUrls:['./service-path-creator.component.less'], + providers: [ServiceServiceNg2] +}) + +export class ServicePathCreatorComponent { + + linksMap:Array<ServicePathMapItem>; + links:Array<Link> = []; + input:any; + headers: Array<string> = []; + removeRow: Function; + forwardingPath:ForwardingPath; + //isExtendAllowed:boolean = false; + + constructor(private serviceService: ServiceServiceNg2) { + this.forwardingPath = new ForwardingPath(); + this.links = [new Link(new ForwardingPathLink('', '', '', '', '', ''), true, false, true)]; + this.headers = ['Source', 'Source Connection Point', 'Target', 'Target Connection Point', ' ']; + this.removeRow = () => { + if (this.links.length === 1) { + return; + } + this.links.splice(this.links.length-1, 1); + this.enableCurrentRow(); + }; + } + + ngOnInit() { + this.serviceService.getNodesAndLinksMap(this.input.service).subscribe((res:any) => { + this.linksMap = res; + }); + this.processExistingPath(); + + } + + private processExistingPath() { + if (this.input.pathId) { + let forwardingPath = <ForwardingPath>{...this.input.service.forwardingPaths[this.input.pathId]}; + this.forwardingPath.name = forwardingPath.name; + this.forwardingPath.destinationPortNumber = forwardingPath.destinationPortNumber; + this.forwardingPath.protocol = forwardingPath.protocol; + this.forwardingPath.uniqueId = forwardingPath.uniqueId; + this.links = []; + _.forEach(forwardingPath.pathElements.listToscaDataDefinition, (link:ForwardingPathLink) => { + this.links[this.links.length] = new Link( link, false, false, false); + }); + this.links[this.links.length -1].canEdit = true; + this.links[this.links.length -1].canRemove = true; + this.links[0].isFirst = true; + + } + } + + isExtendAllowed():boolean { + if (this.links[this.links.length-1].toCP) { + return true; + } + return false; + } + + enableCurrentRow() { + this.links[this.links.length-1].canEdit = true; + if (this.links.length !== 1) { + this.links[this.links.length-1].canRemove = true; + } + } + + addRow() { + this.disableRows(); + this.links[this.links.length] = new Link( new ForwardingPathLink(this.links[this.links.length-1].toNode,this.links[this.links.length-1].toCP,'','',this.links[this.links.length-1].toCPOriginId,''),true, true, false); + } + + disableRows() { + for (let i = 0 ; i < this.links.length ; i++) { + this.links[i].canEdit = false; + this.links[i].canRemove = false; + } + } + + createPathLinksObject() { + for (let i = 0 ; i < this.links.length ; i++) { + let link = this.links[i]; + this.forwardingPath.addPathLink(link.fromNode, link.fromCP, link.toNode, link.toCP, link.fromCPOriginId, link.toCPOriginId); + } + } + + createServicePathData() { + this.createPathLinksObject(); + return this.forwardingPath; + } + + checkFormValidForSubmit():boolean { + if (this.forwardingPath.name && this.isPathValid() ) { + return true; + } + return false; + } + + isPathValid():boolean { + let lastLink = this.links[this.links.length -1] ; + if (lastLink.toNode && lastLink.toCP && lastLink.fromNode && lastLink.fromCP) { + return true; + } + return false; + } +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.module.ts b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.module.ts new file mode 100644 index 0000000000..78005317a2 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-path-creator/service-path-creator.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from "@angular/core"; +import {CommonModule} from "@angular/common"; +import {ServicePathCreatorComponent} from "./service-path-creator.component"; +import {FormsModule} from "@angular/forms"; +import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module"; +import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; +import {LinkRowComponent} from './link-row/link-row.component' +@NgModule({ + declarations: [ + ServicePathCreatorComponent, + LinkRowComponent + ], + imports: [CommonModule, + FormsModule, + FormElementsModule, + UiElementsModule + ], + exports: [], + entryComponents: [ + ServicePathCreatorComponent + ], + providers: [] +}) +export class ServicePathCreatorModule { +}
\ No newline at end of file |