From 5b593496b8f1b8e8be8d7d2dbcc223332e65a49b Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 29 Jul 2018 16:13:45 +0300 Subject: re base code Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando --- .../panel/panel-tabs/base/base-tab.component.less | 66 ++++++++++ .../groups/group-information-tab.component.html | 30 +++++ .../groups/group-information-tab.component.ts | 39 ++++++ .../groups/group-members-tab.component.html | 31 +++++ .../groups/group-members-tab.component.less | 13 ++ .../groups/group-members-tab.component.ts | 133 +++++++++++++++++++ .../groups/group-properties-tab.component.html | 23 ++++ .../groups/group-properties-tab.component.less | 0 .../groups/group-properties-tab.component.ts | 64 +++++++++ .../panel-tabs/groups/group-tabs.component.html | 11 ++ .../panel-tabs/groups/group-tabs.component.ts | 67 ++++++++++ .../panel/panel-tabs/groups/group-tabs.module.ts | 71 ++++++++++ .../policies/policy-information-tab.component.html | 34 +++++ .../policies/policy-information-tab.component.ts | 39 ++++++ .../policies/policy-properties-tab.component.html | 23 ++++ .../policies/policy-properties-tab.component.less | 0 .../policies/policy-properties-tab.component.ts | 64 +++++++++ .../panel-tabs/policies/policy-tabs.component.html | 12 ++ .../panel-tabs/policies/policy-tabs.component.ts | 72 ++++++++++ .../panel-tabs/policies/policy-tabs.module.ts | 68 ++++++++++ .../policies/policy-targets-tab.component.html | 32 +++++ .../policies/policy-targets-tab.component.less | 12 ++ .../policies/policy-targets-tab.component.ts | 145 +++++++++++++++++++++ 23 files changed, 1049 insertions(+) create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/base/base-tab.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.module.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.module.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.ts (limited to 'catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs') diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/base/base-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/base/base-tab.component.less new file mode 100644 index 0000000000..aa8e75115f --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/base/base-tab.component.less @@ -0,0 +1,66 @@ +@import './../../../../../../../assets/styles/mixins'; +@import "./../../../../../../../assets/styles/variables-old"; +@import './../../../../../../../assets/styles/mixins_old'; + +/deep/ +.expand-collapse-content { + padding: 20px; +} + +.component-details-panel-tab-no-data { + margin: 0 auto; + padding-top: 30px; + text-align: center; + + .component-details-panel-tab-no-data-title { + font-family: @font-opensans-bold; + } + +} + +.component-details-panel-large-item { + font-family: OpenSans-Semibold, sans-serif; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 32px; + line-height: 32px; + vertical-align: middle; + + &:hover { + background-color: #f8f8f8; + margin: 0 -20px; /* to fill expand-collapse-content padding */ + padding: 0 20px; + .component-details-panel-item-delete { + visibility: visible; + } + } +} + +.component-details-panel-item { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 22px; + line-height: 22px; + vertical-align: middle; + + &.description { + margin-top: 28px; + white-space: normal; + word-wrap: break-word; + .value { + max-width: none; + font-weight: normal; + font-family: @font-opensans-regular; + } + } + + .name { font-family: OpenSans-Semibold, sans-serif; } + .value { } +} + +.component-details-panel-item-delete { + cursor: pointer; + visibility: hidden; +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.html new file mode 100644 index 0000000000..3c875fd930 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.html @@ -0,0 +1,30 @@ + + +
General Info
+ + + +
+ + Group +
+ + +
+ + Group +
+ + +
+ + {{group.version}} +
+ + +
+ + {{group.description}} +
+ + diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.ts new file mode 100644 index 0000000000..26602224da --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-information-tab.component.ts @@ -0,0 +1,39 @@ +/*- + * ============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, Inject, Input, Output, EventEmitter } from "@angular/core"; +import { GroupInstance } from 'app/models/graph/zones/group-instance'; + +@Component({ + selector: 'group-information-tab', + templateUrl: './group-information-tab.component.html', + styleUrls: ['./../base/base-tab.component.less'] +}) +export class GroupInformationTabComponent { + + @Input() group: GroupInstance; + @Input() isViewOnly: boolean; + + constructor() { + + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.html new file mode 100644 index 0000000000..f298a39a87 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.html @@ -0,0 +1,31 @@ +
Members + + +
+
+
    +
  • + {{member.name}} + +
    • +
+ +
+
No data to display yet
+
Add members to group to see members
+
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.less new file mode 100644 index 0000000000..1006e864fa --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.less @@ -0,0 +1,13 @@ +/deep/ +.component-details-panel-tab-group-members { + .component-details-panel-large-item { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .w-sdc-designer-sidebar-section-title { + display: flex; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.ts new file mode 100644 index 0000000000..148f2133e8 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-members-tab.component.ts @@ -0,0 +1,133 @@ +/*- + * ============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, Input, Output, EventEmitter, OnChanges, HostBinding } from "@angular/core"; +import { TranslateService } from './../../../../../shared/translator/translate.service'; +import { Component as TopologyTemplate } from "app/models"; +import { GroupInstance } from "app/models/graph/zones/group-instance"; +import { GroupsService } from "../../../../../services/groups.service"; +import { SimpleChanges } from "@angular/core/src/metadata/lifecycle_hooks"; +import { MemberUiObject } from "../../../../../../models/ui-models/ui-member-object"; +import { IModalConfig } from "sdc-ui/lib/angular/modals/models/modal-config"; +import { AddElementsComponent } from "../../../../../components/ui/modal/add-elements/add-elements.component"; +import { GRAPH_EVENTS } from 'app/utils'; +import { EventListenerService } from 'app/services/event-listener-service'; +import { ComponentInstance } from "../../../../../../models/componentsInstances/componentInstance"; +import { SdcUiComponents } from "sdc-ui/lib/angular"; + +@Component({ + selector: 'group-members-tab', + templateUrl: './group-members-tab.component.html', + styleUrls: ['./../base/base-tab.component.less', 'group-members-tab.component.less'] +}) + +export class GroupMembersTabComponent implements OnChanges { + + + private members: Array; + + @Input() group: GroupInstance; + @Input() topologyTemplate: TopologyTemplate; + @Input() isViewOnly: boolean; + @Output() isLoading: EventEmitter = new EventEmitter(); + @HostBinding('class') classes = 'component-details-panel-tab-group-members'; + + constructor(private translateService: TranslateService, + private groupsService: GroupsService, + private modalService: SdcUiComponents.ModalService, + private eventListenerService: EventListenerService + ) { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.initMembers) + } + + ngOnChanges(changes:SimpleChanges):void { + this.initMembers(); + } + + deleteMember = (member: MemberUiObject):void => { + this.isLoading.emit(true); + this.groupsService.deleteGroupMember(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.group, member.uniqueId).subscribe( + (updatedMembers:Array) => { + this.group.members = updatedMembers; + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.group); + }, + error => console.log("Error deleting member!"), + () => this.isLoading.emit(false) + ); + } + + private initMembers = (groupInstance?: GroupInstance) => { + this.group = groupInstance ? groupInstance : this.group; + this.members = this.group.getMembersAsUiObject(this.topologyTemplate.componentInstances); + } + + addMembers = ():void => { + var membersToAdd:Array = this.modalService.getCurrentInstance().innerModalContent.instance.existingElements; //TODO refactor sdc-ui modal in order to return the data + if(membersToAdd.length > 0) { + this.modalService.closeModal(); + this.isLoading.emit(true); + var updatedMembers: Array = _.union(this.members, membersToAdd); + this.groupsService.updateMembers(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.group.uniqueId, updatedMembers).subscribe( + (updatedMembers:Array) => { + this.group.members = updatedMembers; + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.group); + }, + error => { + console.log("Error updating members!"); + }, () => + this.isLoading.emit(false) + ); + } + } + + getOptionalsMembersToAdd():Array { + + let optionalsMembersToAdd:Array = []; + + // adding all instances as optional members to add if not already exist + _.forEach(this.topologyTemplate.componentInstances, (instance:ComponentInstance) => { + if (!_.some(this.members, (member:MemberUiObject) => { + return member.uniqueId === instance.uniqueId + })) { + optionalsMembersToAdd.push(new MemberUiObject(instance.uniqueId, instance.name)); + } + }); + return optionalsMembersToAdd; + } + + openAddMembersModal():void { + let addMembersModalConfig:IModalConfig = { + title: this.group.name + " ADD MEMBERS", + size: "md", + type: "custom", + testId: "addMembersModal", + buttons: [ + {text: 'ADD MEMBERS', size: 'xsm', callback: this.addMembers, closeModal: false}, + {text: 'CANCEL', size: 'sm', type: "secondary", closeModal: true} + ] + }; + var optionalsMembersToAdd = this.getOptionalsMembersToAdd(); + this.modalService.openCustomModal(addMembersModalConfig, AddElementsComponent, { + elementsToAdd: optionalsMembersToAdd, + elementName: "member" + }); + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.html new file mode 100644 index 0000000000..9de489e316 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.html @@ -0,0 +1,23 @@ + +
Properties
+ +
    +
  • +
    {{property.name}} +
    +
    {{property.value || property.defaultValue}} +
    +
    • +
+ +
+
No properties to display
+
+ + diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.ts new file mode 100644 index 0000000000..69079347c4 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-properties-tab.component.ts @@ -0,0 +1,64 @@ +/*- + * ============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, Inject, Input, Output, EventEmitter, OnChanges, SimpleChanges } from "@angular/core"; +import { TranslateService } from './../../../../../shared/translator/translate.service'; +import { GroupInstance } from 'app/models/graph/zones/group-instance'; +import { PropertyBEModel } from 'app/models'; +import { PropertyModel } from './../../../../../../models/properties'; +import { ModalsHandler } from "app/utils"; +import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models"; + +@Component({ + selector: 'group-properties-tab', + templateUrl: './group-properties-tab.component.html', + styleUrls: ['./../base/base-tab.component.less', 'group-properties-tab.component.less'], + host: {'class': 'component-details-panel-tab-group-properties'} +}) +export class GroupPropertiesTabComponent implements OnChanges { + + @Input() group:GroupInstance; + @Input() topologyTemplate:TopologyTemplate; + @Input() isViewOnly: boolean; + + private properties:Array; + + constructor(private translateService:TranslateService, private ModalsHandler:ModalsHandler) { + } + + ngOnChanges(changes: SimpleChanges): void { + console.log("GroupPropertiesTabComponent: ngAfterViewInit: "); + console.log("group: " + JSON.stringify(this.group)); + this.properties = []; + this.initProperties(); + } + + initProperties = ():void => { + this.properties= this.group.properties; + } + + editProperty = (property?:PropertyModel):void => { + this.ModalsHandler.openEditPropertyModal((property ? property : new PropertyModel()), this.topologyTemplate, this.properties, false, 'group', this.group.uniqueId).then((updatedProperty:PropertyModel) => { + console.log("ok"); + }); + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.html new file mode 100644 index 0000000000..94b6619500 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.ts new file mode 100644 index 0000000000..975d5c6153 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.component.ts @@ -0,0 +1,67 @@ +/*- + * ============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, Inject, Input, Output, EventEmitter, SimpleChanges, OnChanges } from "@angular/core"; +import { TranslateService } from './../../../../../shared/translator/translate.service'; +import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models"; +import { GroupsService } from '../../../../../services/groups.service'; +import { GroupInstance } from "app/models/graph/zones/group-instance"; + +@Component({ + selector: 'group-tabs', + templateUrl: './group-tabs.component.html' +}) +export class GroupTabsComponent implements OnChanges { + + @Input() topologyTemplate:TopologyTemplate; + @Input() selectedZoneInstanceType:string; + @Input() selectedZoneInstanceId:string; + @Input() isViewOnly: boolean; + @Output() isLoading: EventEmitter = new EventEmitter(); + + private group:GroupInstance; + + constructor(private translateService:TranslateService, + private groupsService:GroupsService + ) { + } + + ngOnChanges(changes: SimpleChanges): void { + this.initGroup(); + } + + private initGroup = ():void => { + this.isLoading.emit(true); + this.groupsService.getSpecificGroup(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).subscribe( + group => { + this.group = group; + console.log(JSON.stringify(group)); + }, + error => console.log("Error getting group!"), + () => this.isLoading.emit(false) + ); + } + + private setIsLoading = (value) :void => { + this.isLoading.emit(value); + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.module.ts new file mode 100644 index 0000000000..50797f862c --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/groups/group-tabs.module.ts @@ -0,0 +1,71 @@ +/*- + * ============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 { NgModule } from "@angular/core"; +import { HttpModule } from "@angular/http"; +import { FormsModule } from "@angular/forms"; +import { BrowserModule } from "@angular/platform-browser"; +import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; +import { ExpandCollapseComponent } from 'app/ng2/components/ui/expand-collapse/expand-collapse.component'; +import { PoliciesService } from "../../../../../services/policies.service"; +import { GroupInformationTabComponent } from './group-information-tab.component'; +import { TooltipModule } from './../../../../../components/ui/tooltip/tooltip.module'; +import { GroupTabsComponent } from "./group-tabs.component"; +import { SdcUiComponentsModule } from "sdc-ui/lib/angular"; +import { GroupMembersTabComponent } from './group-members-tab.component'; +import { TranslateModule } from './../../../../../shared/translator/translate.module'; +import { GroupPropertiesTabComponent } from "./group-properties-tab.component"; + +@NgModule({ + declarations: [ + GroupInformationTabComponent, + GroupMembersTabComponent, + GroupTabsComponent, + GroupPropertiesTabComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpModule, + TooltipModule, + UiElementsModule, + SdcUiComponentsModule, + TranslateModule + ], + entryComponents: [ + GroupInformationTabComponent, + GroupMembersTabComponent, + GroupTabsComponent, + GroupPropertiesTabComponent, + ExpandCollapseComponent + ], + exports: [ + TooltipModule, + GroupInformationTabComponent, + GroupMembersTabComponent, + GroupTabsComponent, + GroupPropertiesTabComponent + ], + providers: [ + PoliciesService + ] +}) +export class GroupTabsModule { + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.html new file mode 100644 index 0000000000..a1b942d56b --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.html @@ -0,0 +1,34 @@ + +
General Info
+ + +
+ + {{policy.policyTypeUid}} +
+ + +
+ + Policy +
+ + +
+ + Policy +
+ + +
+ + {{policy.version}} +
+ + +
+ + {{policy.description}} +
+ + diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.ts new file mode 100644 index 0000000000..3639639c88 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-information-tab.component.ts @@ -0,0 +1,39 @@ +/*- + * ============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, Inject, Input, Output, EventEmitter } from "@angular/core"; +import { TranslateService } from './../../../../../shared/translator/translate.service'; +import { PolicyInstance } from 'app/models/graph/zones/policy-instance'; + +@Component({ + selector: 'policy-information-tab', + templateUrl: './policy-information-tab.component.html', + styleUrls: ['./../base/base-tab.component.less'] +}) +export class PolicyInformationTabComponent { + + @Input() policy:PolicyInstance; + @Input() isViewOnly: boolean; + + constructor(private translateService:TranslateService) { + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.html new file mode 100644 index 0000000000..9de489e316 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.html @@ -0,0 +1,23 @@ + +
Properties
+ +
    +
  • +
    {{property.name}} +
    +
    {{property.value || property.defaultValue}} +
    +
    • +
+ +
+
No properties to display
+
+ + diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.ts new file mode 100644 index 0000000000..5862135df2 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-properties-tab.component.ts @@ -0,0 +1,64 @@ +/*- + * ============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, Inject, Input, Output, EventEmitter, OnChanges, SimpleChanges } from "@angular/core"; +import { TranslateService } from './../../../../../shared/translator/translate.service'; +import { PolicyInstance } from 'app/models/graph/zones/policy-instance'; +import { PropertyBEModel } from 'app/models'; +import { PropertyModel } from './../../../../../../models/properties'; +import { ModalsHandler } from "app/utils"; +import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models"; + +@Component({ + selector: 'policy-properties-tab', + templateUrl: './policy-properties-tab.component.html', + styleUrls: ['./../base/base-tab.component.less', 'policy-properties-tab.component.less'], + host: {'class': 'component-details-panel-tab-policy-properties'} +}) +export class PolicyPropertiesTabComponent implements OnChanges { + + @Input() policy:PolicyInstance; + @Input() topologyTemplate:TopologyTemplate; + @Input() isViewOnly: boolean; + + private properties:Array; + + constructor(private translateService:TranslateService, private ModalsHandler:ModalsHandler) { + } + + ngOnChanges(changes: SimpleChanges): void { + console.log("PolicyPropertiesTabComponent: ngAfterViewInit: "); + console.log("policy: " + this.policy); + this.properties = []; + this.initProperties(); + } + + initProperties = ():void => { + this.properties= this.policy.properties; + } + + editProperty = (property?:PropertyModel):void => { + this.ModalsHandler.openEditPropertyModal((property ? property : new PropertyModel()), this.topologyTemplate, this.properties, false, 'policy', this.policy.uniqueId).then((updatedProperty:PropertyModel) => { + console.log("ok"); + }); + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.html new file mode 100644 index 0000000000..b11ad7ebf9 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.ts new file mode 100644 index 0000000000..1e2739901d --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.component.ts @@ -0,0 +1,72 @@ +/*- + * ============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, Inject, Input, Output, EventEmitter, AfterViewInit, OnChanges } from "@angular/core"; +import { TranslateService } from './../../../../../shared/translator/translate.service'; +import { PoliciesService } from "../../../../../services/policies.service"; +import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models"; +import { PolicyInstance } from 'app/models/graph/zones/policy-instance'; +import { GRAPH_EVENTS } from './../../../../../../utils/constants'; +import { EventListenerService } from 'app/services/event-listener-service'; +import { ZoneInstance } from 'app/models/graph/zones/zone-instance'; +import { SimpleChanges } from "@angular/core/src/metadata/lifecycle_hooks"; + +@Component({ + selector: 'policy-tabs', + templateUrl: './policy-tabs.component.html' +}) +export class PolicyTabsComponent implements OnChanges { + + @Input() topologyTemplate:TopologyTemplate; + @Input() selectedZoneInstanceType:string; + @Input() selectedZoneInstanceId:string; + @Input() isViewOnly: boolean; + @Output() isLoading: EventEmitter = new EventEmitter(); + + private policy:PolicyInstance; + + constructor(private translateService:TranslateService, + private policiesService:PoliciesService + ) { + + } + + ngOnChanges(changes: SimpleChanges): void { + this.initPolicy(); + } + + private initPolicy = ():void => { + this.isLoading.emit(true); + this.policiesService.getSpecificPolicy(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).subscribe( + policy => { + this.policy = policy; + console.log(JSON.stringify(policy)); + }, + error => console.log("Error getting policy!"), + () => this.isLoading.emit(false) + ); + } + + private setIsLoading = (value) :void => { + this.isLoading.emit(value); + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.module.ts new file mode 100644 index 0000000000..38dc19e1af --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-tabs.module.ts @@ -0,0 +1,68 @@ +/*- + * ============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 { NgModule } from "@angular/core"; +import { HttpModule } from "@angular/http"; +import { FormsModule } from "@angular/forms"; +import { BrowserModule } from "@angular/platform-browser"; +import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; +import { ExpandCollapseComponent } from 'app/ng2/components/ui/expand-collapse/expand-collapse.component'; +import { PoliciesService } from "../../../../../services/policies.service"; +import { PolicyInformationTabComponent } from "./policy-information-tab.component"; +import { PolicyTargetsTabComponent } from "./policy-targets-tab.component"; +import { PolicyTabsComponent } from "./policy-tabs.component"; +import { PolicyPropertiesTabComponent } from "./policy-properties-tab.component"; +import { SdcUiComponentsModule } from "sdc-ui/lib/angular"; +import { TranslateModule } from './../../../../../shared/translator/translate.module'; + +@NgModule({ + declarations: [ + PolicyInformationTabComponent, + PolicyTargetsTabComponent, + PolicyPropertiesTabComponent, + PolicyTabsComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpModule, + SdcUiComponentsModule, + TranslateModule, + UiElementsModule + ], + entryComponents: [ + PolicyInformationTabComponent, + PolicyTargetsTabComponent, + PolicyPropertiesTabComponent, + PolicyTabsComponent, + ExpandCollapseComponent + ], + exports: [ + PolicyInformationTabComponent, + PolicyTargetsTabComponent, + PolicyPropertiesTabComponent, + PolicyTabsComponent + ], + providers: [ + PoliciesService + ] +}) +export class PolicyTabsModule { + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.html new file mode 100644 index 0000000000..097b3a4584 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.html @@ -0,0 +1,32 @@ +
Targets + + +
+
+
    +
  • + {{target.name}} + +
    • +
+ +
+
No data to display yet
+
Add targets to policy to see targets
+
+
+ diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.less new file mode 100644 index 0000000000..cd7ace2b6f --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.less @@ -0,0 +1,12 @@ +/deep/ +.component-details-panel-tab-policy-targets { + .component-details-panel-large-item { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .w-sdc-designer-sidebar-section-title { + display: flex; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.ts new file mode 100644 index 0000000000..b79f4d9e07 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policies/policy-targets-tab.component.ts @@ -0,0 +1,145 @@ +/*- + * ============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, Input, Output, EventEmitter, OnChanges, HostBinding, OnDestroy } from "@angular/core"; +import { TranslateService } from './../../../../../shared/translator/translate.service'; +import { Component as TopologyTemplate } from "app/models"; +import { PoliciesService } from "../../../../../services/policies.service"; +import { PolicyInstance, PolicyTargetsMap } from './../../../../../../models/graph/zones/policy-instance'; +import { SimpleChanges } from "@angular/core/src/metadata/lifecycle_hooks"; +import { SdcUiComponents } from "sdc-ui/lib/angular"; +import { IModalConfig } from "sdc-ui/lib/angular/modals/models/modal-config"; +import { AddElementsComponent } from "../../../../../components/ui/modal/add-elements/add-elements.component"; +import { TargetUiObject } from "../../../../../../models/ui-models/ui-target-object"; +import { ComponentInstance } from "../../../../../../models/componentsInstances/componentInstance"; +import { TargetOrMemberType } from "../../../../../../utils/constants"; +import { GRAPH_EVENTS } from 'app/utils'; +import { EventListenerService } from 'app/services/event-listener-service'; + +@Component({ + selector: 'policy-targets-tab', + templateUrl: './policy-targets-tab.component.html', + styleUrls: ['./../base/base-tab.component.less', 'policy-targets-tab.component.less'] +}) + +export class PolicyTargetsTabComponent implements OnChanges, OnDestroy { + + private targets: Array; // UI object to hold all targets with names. + + @Input() policy: PolicyInstance; + @Input() topologyTemplate: TopologyTemplate; + @Input() isViewOnly: boolean; + @Output() isLoading: EventEmitter = new EventEmitter(); + @HostBinding('class') classes = 'component-details-panel-tab-policy-targets'; + + constructor(private translateService: TranslateService, + private policiesService: PoliciesService, + private modalService: SdcUiComponents.ModalService, + private eventListenerService: EventListenerService + ) { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.initTargets) + } + + ngOnChanges(changes:SimpleChanges):void { + this.initTargets(); + } + + ngOnDestroy() { + this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE); + } + + deleteTarget(target: TargetUiObject): void { + this.isLoading.emit(true); + this.policiesService.deletePolicyTarget(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.policy, target.uniqueId, target.type).subscribe( + (policyInstance:PolicyInstance) => { + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, policyInstance); + }, + error => console.log("Error deleting target!"), + () => this.isLoading.emit(false) + ); + } + + private initTargets = (policyInstance?: PolicyInstance) => { + this.policy = policyInstance ? policyInstance : this.policy; + this.targets = this.policy.getTargetsAsUiObject(this.topologyTemplate.componentInstances, this.topologyTemplate.groupInstances); + } + + addTargets = ():void => { + + var targetsToAdd:Array = this.modalService.getCurrentInstance().innerModalContent.instance.existingElements; //TODO refactor sdc-ui modal in order to return the data + if(targetsToAdd.length > 0) { + this.modalService.closeModal(); + this.isLoading.emit(true); + var updatedTarget: Array = _.union(this.targets, targetsToAdd); + this.policiesService.updateTargets(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.policy.uniqueId, updatedTarget).subscribe( + (updatedPolicyInstance:PolicyInstance) => { + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, updatedPolicyInstance); + }, + error => { + console.log("Error updating targets!"); + }, + () => this.isLoading.emit(false) + ); + } + } + + getOptionalsTargetsToAdd():Array { + let optionalsTargetsToAdd:Array = []; + // adding all instances as optional targets to add if not already exist + _.forEach(this.topologyTemplate.componentInstances, (instance:ComponentInstance) => { + if (!_.some(this.targets, (target:TargetUiObject) => { + return target.uniqueId === instance.uniqueId + })) { + optionalsTargetsToAdd.push(new TargetUiObject(instance.uniqueId, TargetOrMemberType.COMPONENT_INSTANCES, instance.name)); + } + }); + + // adding all groups as optional targets to add if not already exist + _.forEach(this.topologyTemplate.groupInstances, (groupInstance:ComponentInstance) => { // adding all instances as optional targets to add if not already exist + if (!_.some(this.targets, (target:TargetUiObject) => { + return target.uniqueId === groupInstance.uniqueId + })) { + optionalsTargetsToAdd.push(new TargetUiObject(groupInstance.uniqueId, TargetOrMemberType.GROUPS, groupInstance.name)); + } + }); + + return optionalsTargetsToAdd; + } + + openAddTargetModal(): void { + let addTargetModalConfig: IModalConfig = { + title: this.policy.name + " ADD TARGETS", + size: "md", + type: "custom", + testId: "addTargetsModal", + buttons: [ + {text: "ADD TARGETS", size: 'xsm', callback: this.addTargets, closeModal: false}, + {text: 'CANCEL', size: 'sm', type: "secondary", closeModal: true} + ] + }; + var optionalTargetsToAdd = this.getOptionalsTargetsToAdd(); + this.modalService.openCustomModal(addTargetModalConfig, AddElementsComponent, { + elementsToAdd: optionalTargetsToAdd, + elementName: "target" + }); + + } +} -- cgit 1.2.3-korg