aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
authorojasdubey <ojas.dubey@amdocs.com>2019-03-18 14:15:03 +0530
committerAvi Gaffa <avi.gaffa@amdocs.com>2019-03-18 11:38:42 +0000
commit4192e3caac2662624a7368252a3bc5619539caa7 (patch)
treec070e560ac56c9c246e059d4b4a510b9eec9320f /catalog-ui/src/app/ng2/components
parent2ca2fc5c0da1eb862fcd79d1f9345aa89e62b396 (diff)
Service Consumption FE
Service consumption feature frontend implementation Change-Id: I68e1b507b1d4379b271fe97428ff8ae86dc11b4c Issue-ID: SDC-1990 Signed-off-by: ojasdubey <ojas.dubey@amdocs.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html8
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.html26
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less67
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts228
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts39
6 files changed, 366 insertions, 4 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index d4e7b02930..3f87b070e8 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -12,8 +12,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
-
-
+
+
<div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
[ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly': property.isDisabled ||property.isDeclared}"
[class.with-top-border]="property.isChildOfListOrMap"
@@ -24,7 +24,9 @@
<checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
<div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
</div>
- <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
+ <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">
+ <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
+ </div> <!-- simple children of complex type within map or list -->
<div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
<!--<input [value]="property.mapKey" [placeholder]="property.name" (input)="mapKeyChanged.emit($event.target.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':property.mapKeyError}" required/>-->
<dynamic-element #mapKeyInput
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
index 91baaf1bc1..cb8c9a694b 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
@@ -24,7 +24,7 @@ import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multil
DynamicPropertyComponent,
PropertiesTableComponent
],
- exports: [PropertiesTableComponent],
+ exports: [PropertiesTableComponent, DynamicPropertyComponent],
providers: [FilterChildPropertiesPipe, PropertiesService]
})
export class PropertyTableModule {
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.html b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.html
new file mode 100644
index 0000000000..9c52afbb6b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.html
@@ -0,0 +1,26 @@
+<div class='service-consumption'>
+ <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
+ <div class="no-operations-text" data-tests-id="no-operations" *ngIf="!isLoading && !interfacesList.length">{{'CONSUMPTION_NO_OPERATIONS_TO_SHOW' | translate}}</div>
+
+ <div class="interface-operations-group"
+ *ngFor="let interface of interfacesList; let interfaceIndex = index"
+ (click)="expandCollapseInterfaceGroup(interface)">
+ <div class="interface-title first-level hand" [attr.data-tests-id]="interface.displayName" [ngClass]="{'expanded': interface.isExpanded}">
+ <span class="sprite-new expand-collapse-plus-icon expand-collapse-icon"></span>
+ <div class="title-text" tooltips tooltip="{{interface.displayName}}">{{interface.displayName}}</div>
+ </div>
+ <div class="i-sdc-designer-sidebar-section-content-item operations-group" *ngIf="interface.isExpanded">
+ <div class="operation-data"
+ [ngClass]="{'hand': !readonly}"
+ *ngFor="let serviceOperation of interface.operationsList; let opIndex = index"
+ (click)="onSelectOperation($event, interface, opIndex)">
+ <div class="operation-name"
+ [attr.data-tests-id]="interface.displayName + '.' + serviceOperation.operation.name"
+ [ngClass]="{'readonly': readonly}"
+ tooltips tooltip="{{serviceOperation.operation.name}}">
+ {{serviceOperation.operation.name}}
+ </div>
+ </div>
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
new file mode 100644
index 0000000000..5830c06972
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
@@ -0,0 +1,67 @@
+@import './../../../../../assets/styles/variables.less';
+@import './../../../../../assets/styles/variables-old.less';
+@import './../../../../../assets/styles/mixins_old.less';
+@import './../../../../../assets/styles/sprite.less';
+
+.service-consumption {
+ min-height: 100px;
+ .no-operations-text {
+ text-align: center;
+ padding: 30px;
+ opacity: 0.7;
+ font-size: 14px;
+ }
+ .interface-operations-group {
+ &:first-of-type {
+ margin-top: 1px;
+ }
+ .interface-title {
+ display: flex;
+ .title-text {
+ font-size: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 90%;
+ padding-left: 4px;
+ }
+ &.expanded {
+ background-color: @tlv_color_v;
+ border-left: 4px solid @main_color_a;
+ box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
+ margin-bottom: 2px;
+ padding-left: 4px !important;
+ .expand-collapse-icon {
+ .expand-collapse-minus-icon;
+ }
+ }
+ .expand-collapse-icon {
+ margin: 0 6px;
+ display: inline-block;
+ margin-top: 4px;
+ }
+ }
+ .operation-data {
+ border-bottom: 1px solid #c8cdd1;
+ padding: 5px 10px 5px 18px;
+ min-height: 61px;
+ display: flex;
+ align-items: center;
+ }
+
+ .operation-name {
+ .s_1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 220px;
+ display: inline-block;
+ &:not(.readonly):hover {
+ .a_7;
+ }
+ &.readonly {
+ opacity: 0.5;
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
new file mode 100644
index 0000000000..b0f6dfb649
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
@@ -0,0 +1,228 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * 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.
+ */
+
+import {Component, Input, ComponentRef} from '@angular/core';
+import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
+import {ComponentInstanceServiceNg2} from 'app/ng2/services/component-instance-services/component-instance.service';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {ModalService} from 'app/ng2/services/modal.service';
+import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import {
+ ModalModel,
+ ButtonModel,
+ OperationModel,
+ Service,
+ ServiceInstanceObject,
+ PropertyFEModel,
+ PropertyBEModel,
+ InputBEModel,
+ InterfaceModel
+} from 'app/models';
+import {ServiceConsumptionCreatorComponent} from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
+
+
+export class ConsumptionInput extends PropertyFEModel{
+ inputId: string;
+ type: string;
+ source: string;
+ value: any;
+
+ constructor(input?: any) {
+ super(input);
+ if (input) {
+ this.inputId = input.inputId;
+ this.type = input.type;
+ this.source = input.source;
+ this.value = input.value || "";
+ }
+ }
+}
+
+export class ConsumptionInputDetails extends ConsumptionInput {
+ name: string;
+ expanded: boolean;
+ assignValueLabel: string;
+ associatedProps: Array<string>;
+ associatedInterfaces: Array<any>;
+ origVal: string;
+ isValid: boolean;
+
+ constructor(input: any) {
+ super(input);
+ if (input) {
+ this.name = input.name;
+ this.expanded = input.expanded;
+ this.assignValueLabel = input.assignValueLabel;
+ this.associatedProps = input.associatedProps;
+ this.associatedInterfaces = input.associatedInterfaces;
+ this.origVal = input.value || "";
+ this.isValid = input.isValid;
+ }
+ }
+
+ public updateValidity(isValid: boolean) {
+ this.isValid = isValid;
+ }
+}
+
+export class ServiceOperation {
+ operation: OperationModel;
+ consumptionInputs: Array<ConsumptionInputDetails>;
+
+ constructor(input?: any) {
+ if (input) {
+ this.operation = new OperationModel(input.operation || {});
+ this.consumptionInputs = input.consumptionInputs || [];
+ }
+ }
+}
+
+export class InterfaceWithServiceOperation {
+ interfaceId: string;
+ displayName: string;
+ operationsList: Array<ServiceOperation>;
+ isExpanded: boolean;
+
+ constructor(input?: InterfaceModel) {
+ if (input) {
+ this.interfaceId = input.uniqueId;
+ this.displayName = input.displayType();
+ this.operationsList = _.map(input.operations, operation => new ServiceOperation({operation: operation}));
+ this.isExpanded = true;
+ }
+ }
+}
+
+
+
+@Component({
+ selector: 'service-consumption',
+ templateUrl: './service-consumption.component.html',
+ styleUrls: ['service-consumption.component.less'],
+ providers: [ModalService]
+})
+
+export class ServiceConsumptionComponent {
+
+ modalInstance: ComponentRef<ModalComponent>;
+ isLoading: boolean = false;
+ interfacesList: Array<InterfaceWithServiceOperation>;
+ operationsGroup: Array<ServiceOperation>;
+ @Input() parentServiceInputs: Array<InputBEModel> = [];
+ @Input() parentService: Service;
+ @Input() selectedService: Service;
+ @Input() selectedServiceInstanceId: string;
+ @Input() instancesMappedList: Array<ServiceInstanceObject>;
+ @Input() readonly: boolean;
+
+ selectedInstanceSiblings: Array<ServiceInstanceObject>;
+ selectedInstancePropertiesList: Array<PropertyBEModel> = [];
+
+ constructor(private ModalServiceNg2: ModalService, private serviceServiceNg2: ServiceServiceNg2, private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2:ComponentInstanceServiceNg2) {}
+
+ ngOnInit() {
+ this.updateSelectedInstancePropertiesAndSiblings();
+ }
+
+ ngOnChanges(changes) {
+ if(changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
+ this.selectedServiceInstanceId = changes.selectedServiceInstanceId.currentValue;
+ if(changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
+ this.selectedService = changes.selectedService.currentValue;
+ }
+ this.updateSelectedInstancePropertiesAndSiblings();
+ }
+ if(changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
+ this.updateSelectedInstancePropertiesAndSiblings();
+ }
+ }
+
+ updateSelectedInstancePropertiesAndSiblings() {
+ this.interfacesList = [];
+ let selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, coInstance => coInstance.id === this.selectedServiceInstanceId);
+ if (selectedInstanceMetadata) {
+ _.forEach(selectedInstanceMetadata.interfaces, (interfaceData:InterfaceModel) => {
+ this.interfacesList.push(new InterfaceWithServiceOperation(interfaceData));
+ });
+ }
+ this.interfacesList.sort((interf1:InterfaceWithServiceOperation, interf2:InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
+
+ this.selectedInstancePropertiesList = selectedInstanceMetadata && selectedInstanceMetadata.properties;
+ this.selectedInstanceSiblings = _.filter(this.instancesMappedList, coInstance => coInstance.id !== this.selectedServiceInstanceId);
+ }
+
+ expandCollapseInterfaceGroup(currInterface) {
+ currInterface.isExpanded = !currInterface.isExpanded;
+ }
+
+ onSelectOperation(event, currInterface:InterfaceWithServiceOperation, opIndex: number) {
+ event.stopPropagation();
+ if(!this.readonly) {
+ this.operationsGroup = currInterface.operationsList;
+ let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
+ let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
+ let modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
+ this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+ this.ModalServiceNg2.addDynamicContentToModal(
+ this.modalInstance,
+ ServiceConsumptionCreatorComponent,
+ {
+ interfaceId: currInterface.interfaceId,
+ serviceOperationIndex: opIndex,
+ serviceOperations: this.operationsGroup,
+ parentService: this.parentService,
+ selectedService: this.selectedService,
+ parentServiceInputs: this.parentServiceInputs,
+ selectedServiceProperties: this.selectedInstancePropertiesList,
+ selectedServiceInstanceId: this.selectedServiceInstanceId,
+ selectedInstanceSiblings: this.selectedInstanceSiblings
+ }
+ );
+ this.modalInstance.instance.open();
+ }
+ }
+
+ createOrUpdateOperationInput = ():void => {
+ this.isLoading = true;
+ let consumptionInputsList:Array<{[id: string]: Array<ConsumptionInput>}> = _.map(this.operationsGroup, (serviceOp) => {
+ let consumptionInputsArr: Array<any> = [];
+ if(serviceOp.consumptionInputs) {
+ consumptionInputsArr = _.map(serviceOp.consumptionInputs, (input: ConsumptionInputDetails) => {
+ return {
+ inputId: input.inputId,
+ type: input.isSimpleType ? input.type : 'json',
+ source: input.source,
+ value: input.value
+ };
+ });
+ }
+ return {
+ [serviceOp.operation.uniqueId]: consumptionInputsArr
+ };
+ });
+ this.serviceServiceNg2.createOrUpdateServiceConsumptionInputs(this.parentService,this.selectedServiceInstanceId, consumptionInputsList).subscribe(() => {
+ this.isLoading = false;
+ }, err=> {
+ this.isLoading = false;
+ });
+ this.ModalServiceNg2.closeCurrentModal();
+ };
+
+ getDisabled = ():boolean => {
+ return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
+ };
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
new file mode 100644
index 0000000000..8593bef3eb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * 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.
+ */
+
+import { NgModule } from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ServiceConsumptionComponent} from "./service-consumption.component";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+
+@NgModule({
+ declarations: [
+ ServiceConsumptionComponent
+ ],
+ imports: [
+ CommonModule,
+ UiElementsModule,
+ TranslateModule
+ ],
+ exports: [],
+ entryComponents: [
+ ServiceConsumptionComponent
+ ],
+ providers: []
+})
+export class ServiceConsumptionModule {
+} \ No newline at end of file