From 0c47a1b7118b45eecbbb0064b635efb026173ec4 Mon Sep 17 00:00:00 2001 From: imamSidero Date: Thu, 24 Aug 2023 11:48:06 +0100 Subject: Provide UI page for interface assignment in service for VFC instances Support for interface assignment page for VFC instances is provided in service instances Issue-ID: SDC-4602 Signed-off-by: Imam hussain Change-Id: I4cabef02db381278d37d21da981d3ec4c04e5967 --- .../interface-definition.module.ts | 2 + .../interface-definition.page.component.html | 131 ++++++++++++--------- .../interface-definition.page.component.less | 96 +++++++++++++-- .../interface-definition.page.component.ts | 81 ++++++++++++- .../component-services/component.service.ts | 4 +- 5 files changed, 245 insertions(+), 69 deletions(-) (limited to 'catalog-ui/src') diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.module.ts b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.module.ts index 27a7f111d2..ea6279ec87 100644 --- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.module.ts +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.module.ts @@ -24,6 +24,7 @@ import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; import {TranslateModule} from "app/ng2/shared/translator/translate.module"; import { SdcUiComponentsModule } from 'onap-ui-angular'; import {InterfaceDefinitionComponent} from "./interface-definition.page.component"; +import {HierarchyNavigationModule} from "../../components/logic/hierarchy-navigtion/hierarchy-navigation.module"; import {InterfaceOperationHandlerModule} from "../composition/interface-operatons/operation-creator/interface-operation-handler.module"; @NgModule({ @@ -34,6 +35,7 @@ import {InterfaceOperationHandlerModule} from "../composition/interface-operaton CommonModule, SdcUiComponentsModule, UiElementsModule, + HierarchyNavigationModule, TranslateModule, InterfaceOperationHandlerModule ], diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html index bf36df0593..15fe65a784 100644 --- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html @@ -19,73 +19,92 @@ -->
-
-
-
{{ 'INTERFACE_DATA_EMPTY' | translate }}
+
+
+
+
{{ 'INTERFACE_DATA_EMPTY' | translate }}
+
-
-
+
{{ 'INTERFACE_ADD_OPERATION' | translate }} -
-
-
-
- {{ 'INTERFACE_EXPAND_ALL' | translate }} - | - - {{ 'INTERFACE_COLLAPSE_ALL' | translate }} - -
- -
-
- - - - - {{interface1.type}} +
+
+
+
+ {{ 'INTERFACE_EXPAND_ALL' | translate }} + | + + {{ 'INTERFACE_COLLAPSE_ALL' | translate }} +
-
-
+
+
- {{ 'INTERFACE_HEADER_NAME' | translate }} + class="chevron-container" + [ngClass]="{'isCollapsed': interface1.isCollapsed}" + *ngIf="isOperationListEmpty()"> + + - - {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }} - - + {{interface1.type}}
-
- {{operation.name}} - {{operation.getDescriptionEllipsis()}} - - {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}} + +
+
+ + {{ 'INTERFACE_HEADER_NAME' | translate }} - - - - + + {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }} + + +
+
+ {{operation.name}} + {{operation.getDescriptionEllipsis()}} + + {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}} + + + + + +
+
+
+ {{ 'INTERFACE_ADD_OPERATION' | translate }} +
+ + +
+ +
+ {{component.name}} +
+
No data to display
+ +
+ + +
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less index 464732e016..67e2dae2e1 100644 --- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less @@ -23,7 +23,9 @@ @import '../../../../assets/styles/sprite-old.less'; .interface-definition { font-size: 14px; - + display:flex; + flex-direction:row; + height: 100%; .delete-col-header{ .sprite; .sprite.e-sdc-small-icon-delete; @@ -53,14 +55,6 @@ padding: 14px; } - .top-add-btn { - position: relative; - top: -31px; - text-transform: uppercase; - font-size: 14px; - font-family: @font-opensans-medium; - } - .link { color: @sdcui_color_blue; text-decoration: underline; @@ -79,7 +73,7 @@ .operation-list { border-top: 1px solid @main_color_o; padding-top: 5px; - + .empty-list-container { width: 100%; display: flex; @@ -250,4 +244,86 @@ } } + .left-column { + flex: 1 0 500px; + position: relative; + min-width:930px; + } + .right-column { + display:flex; + flex:0 0 350px; + flex-direction:column; + margin: 0px 0 0 1em; + overflow-x:auto; + .add-btn{ + align-self: flex-end; + margin-top: 10px; + margin-bottom: 19px; + } + /deep/ .tabs { + border-bottom: solid 1px #d0d0d0; + } + + /deep/ .tab { + flex: none; + padding: 8px 20px 0; + font-size: 14px; + line-height:30px; + font-family: @font-opensans-regular; + + &.active { + font-family: @font-opensans-medium; + } + } + } + + .hierarchy-tabs { + flex: 0 0 40px; + } + + .gray-border { + border: 1px solid #ddd; + } + + /deep/ .white-sub-header { + background-color: #fffefe; + box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15); + border-bottom: #d2d2d2 solid 1px; + font-size:14px; + text-align:left; + flex:0 0 auto; + padding: 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-transform: uppercase; + + &.hierarchy-header { + padding-left:20px; + &.selected { + background-color: #e6f6fb; + } + } + + } + + .hierarchy-header { + + span{ + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 290px; + } + } + + .hierarchy-nav { + flex:1; + overflow:auto; + display: grid; + margin-top: 1em; + margin-left: 1em; + font-size: 12px; + padding-top: 1em; + } } diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts index 90d6a6cfde..23c855ecb1 100644 --- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts @@ -21,7 +21,7 @@ import {Component, ComponentRef, Inject, Input} from '@angular/core'; import {Component as IComponent} from 'app/models/components/component'; import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service'; - +import {HierarchyDisplayOptions} from "../../components/logic/hierarchy-navigtion/hierarchy-display-options"; import {ISdcConfig, SdcConfigToken} from "app/ng2/config/sdc-config.config"; import {TranslateService} from "app/ng2/shared/translator/translate.service"; import {IModalButtonComponent, SdcUiServices} from 'onap-ui-angular'; @@ -34,6 +34,7 @@ import { CapabilitiesGroup, InputBEModel, InterfaceModel, + ComponentInstance, ModalModel, OperationModel, WORKFLOW_ASSOCIATION_OPTIONS @@ -49,6 +50,7 @@ import {ToscaArtifactService} from "../../services/tosca-artifact.service"; import {InterfaceOperationComponent} from "../interface-operation/interface-operation.page.component"; import {Observable} from "rxjs/Observable"; import {PluginsService} from 'app/ng2/services/plugins.service'; +import { InstanceFeDetails } from 'app/models/instance-fe-details'; export class UIOperationModel extends OperationModel { isCollapsed: boolean = true; @@ -132,6 +134,13 @@ export class InterfaceDefinitionComponent { interfaces: UIInterfaceModel[]; inputs: InputBEModel[]; + instancesNavigationData = []; + instances: any = []; + loadingInstances: boolean = false; + selectedInstanceData: any = null; + hierarchyInstancesDisplayOptions: HierarchyDisplayOptions = new HierarchyDisplayOptions('uniqueId', 'name', 'archived', null, 'iconClass'); + disableFlag : boolean = true; + deploymentArtifactsFilePath: Array = []; toscaArtifactTypes: Array = []; @@ -148,6 +157,7 @@ export class InterfaceDefinitionComponent { enableWorkflowAssociation: boolean; workflowIsOnline: boolean; validImplementationProps:boolean = true; + serviceInterfaces: InterfaceModel[]; @Input() component: IComponent; @Input() readonly: boolean; @@ -176,21 +186,39 @@ export class InterfaceDefinitionComponent { ngOnInit(): void { this.isLoading = true; this.interfaces = []; + //this.disableFlag = this.readonly; this.workflowIsOnline = !_.isUndefined(this.PluginsService.getPluginByStateUrl('workflowDesigner')); Observable.forkJoin( this.ComponentServiceNg2.getInterfaceOperations(this.component), this.ComponentServiceNg2.getComponentInputs(this.component), this.ComponentServiceNg2.getInterfaceTypes(this.component), - this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId) + this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId), + this.componentServiceNg2.getComponentResourcePropertiesData(this.component) ).subscribe((response: any[]) => { const callback = (workflows) => { this.isLoading = false; + this.serviceInterfaces = response[0].interfaces; this.initInterfaces(response[0].interfaces); this.sortInterfaces(); this.inputs = response[1].inputs; this.interfaceTypes = response[2]; this.workflows = (workflows.items) ? workflows.items : workflows; this.capabilities = response[3].capabilities; + this.instances = response[4].componentInstances; + const serviceInstance = new ComponentInstance(); + serviceInstance.name = "SELF"; + serviceInstance.uniqueId = this.component.uniqueId; + if (this.instances != null) { + this.instances.unshift(serviceInstance); + } else { + this.instances = [serviceInstance]; + } + _.forEach(this.instances, (instance) => { + this.instancesNavigationData.push(instance); + }); + this.onInstanceSelectedUpdate(this.instancesNavigationData[0]); + this.loadingInstances = false; + }; if (this.enableWorkflowAssociation && this.workflowIsOnline) { this.WorkflowServiceNg2.getWorkflows().subscribe( @@ -204,9 +232,55 @@ export class InterfaceDefinitionComponent { callback([]); } }); + this.loadToscaArtifacts(); } + onInstanceSelectedUpdate = (instance: any) => { + this.selectedInstanceData = instance; + if (instance.name != "SELF") { + this.disableFlag = true; + let newInterfaces : InterfaceModel[] = []; + if (instance.interfaces instanceof Array) { + instance.interfaces.forEach(result => { + let interfaceObj = new InterfaceModel(); + interfaceObj.type = result.type; + interfaceObj.uniqueId = result.uniqueId; + if (result.operations instanceof Array) { + interfaceObj.operations = result.operations; + } else if (!_.isEmpty(result.operations)) { + interfaceObj.operations = []; + Object.keys(result.operations).forEach(name => { + interfaceObj.operations.push(result.operations[name]); + }); + } + newInterfaces.push(interfaceObj); + }); + } else { + Object.keys(instance.interfaces).forEach(key => { + let obj = instance.interfaces[key]; + let interfaceObj = new InterfaceModel(); + interfaceObj.type = obj.type; + interfaceObj.uniqueId = obj.uniqueId; + if (obj.operations instanceof Array) { + interfaceObj.operations = obj.operations; + } else if (!_.isEmpty(obj.operations)) { + interfaceObj.operations = []; + Object.keys(obj.operations).forEach(name => { + interfaceObj.operations.push(obj.operations[name]); + }); + } + newInterfaces.push(interfaceObj); + }); + } + this.interfaces = newInterfaces.map((interf) => new UIInterfaceModel(interf)); + } else { + //this.disableFlag = this.readonly; + this.interfaces = this.serviceInterfaces.map((interf) => new UIInterfaceModel(interf)); + } + this.sortInterfaces(); + } + initInterfaces(interfaces: InterfaceModel[]): void { if (interfaces) { this.interfaces = interfaces.map((interf) => new UIInterfaceModel(interf)); @@ -222,6 +296,9 @@ export class InterfaceDefinitionComponent { if(this.readonly) { return disable; } + if (this.component.isService()) { + return disable; + } let selectedInterfaceOperation = this.modalInstance.instance.dynamicContent.instance.selectedInterfaceOperation; let isInterfaceOperation:boolean = !(typeof selectedInterfaceOperation == 'undefined' || _.isEmpty(selectedInterfaceOperation)); diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts index 450e66ead2..eca70bee5f 100644 --- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts @@ -114,7 +114,7 @@ export class ComponentServiceNg2 { } getComponentResourcePropertiesData(component: Component): Observable { - return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]); + return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_INTERFACE_OPERATIONS, COMPONENT_FIELDS.COMPONENT_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]); } getComponentResourceAttributesData(component: Component): Observable { @@ -157,6 +157,8 @@ export class ComponentServiceNg2 { return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INTERFACE_OPERATIONS]); } + + getInterfaceOperation(component: Component, operation: OperationModel): Observable { return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations/' + operation.uniqueId); } -- cgit 1.2.3-korg