2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============LICENSE_END=========================================================
21 import { Component, HostBinding, Input } from '@angular/core';
22 import { Select, Store } from '@ngxs/store';
23 import { Component as TopologyTemplate, ComponentInstance, FullComponentInstance, GroupInstance, PolicyInstance, Resource, Service } from 'app/models';
24 import { ArtifactsTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component';
25 import { GroupMembersTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component';
26 import { GroupOrPolicyPropertiesTab } from 'app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component';
27 import { InfoTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component';
28 import { PolicyTargetsTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component';
29 import { PropertiesTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component';
30 import { ReqAndCapabilitiesTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component';
31 import { ComponentType, ResourceType } from 'app/utils';
32 import * as _ from 'lodash';
33 import { Subscription } from 'rxjs';
34 import { Observable } from 'rxjs/Observable';
35 import { ArtifactGroupType, COMPONENT_FIELDS } from '../../../../utils/constants';
36 import { WorkspaceState } from '../../../store/states/workspace.state';
37 import { OnSidebarOpenOrCloseAction } from '../common/store/graph.actions';
38 import { CompositionStateModel, GraphState } from '../common/store/graph.state';
39 import { ServiceConsumptionTabComponent } from './panel-tabs/service-consumption-tab/service-consumption-tab.component';
40 import { ServiceDependenciesTabComponent } from './panel-tabs/service-dependencies-tab/service-dependencies-tab.component';
43 infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'},
44 policyProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties'},
45 policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'},
46 groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'},
47 groupProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties'},
48 deploymentArtifacts: {titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts'},
49 apiArtifacts: {titleIcon: 'api-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts'},
50 infoArtifacts: {titleIcon: 'info-square-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts'},
51 properties: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties'},
52 reqAndCapabilities : { titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {}, isActive: false, tooltipText: 'Requirements and Capabilities'},
53 inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
54 settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
55 consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'},
56 dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'SERVICE DEPENDENCIES'}, isActive: false, tooltipText: 'Service Dependencies'}
60 selector: 'ng2-composition-panel',
61 templateUrl: './composition-panel.component.html',
62 styleUrls: ['./composition-panel.component.less', './panel-tabs/panel-tabs.less'],
64 export class CompositionPanelComponent {
66 @Input() topologyTemplate: TopologyTemplate;
67 @HostBinding('class') classes = 'component-details-panel';
68 @Select(GraphState) compositionState$: Observable<CompositionStateModel>;
69 @Select(GraphState.withSidebar) withSidebar$: boolean;
70 @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
72 subscription: Subscription;
74 private selectedComponent;
76 constructor(public store: Store) {
80 this.subscription = this.store.select(GraphState.getSelectedComponent).subscribe((component) => {
81 this.selectedComponent = component;
82 this.initTabs(component);
83 this.activatePreviousActiveTab();
88 if (this.subscription) {
89 this.subscription.unsubscribe();
93 public setActive = (tabToSelect) => {
94 this.tabs.map((tab) => tab.isActive = (tab.titleIcon === tabToSelect.titleIcon) ? true : false);
97 public activatePreviousActiveTab = () => { // sets the info tab to active if no other tab selected
99 this.setActive(this.tabs.find((tab) => tab.isActive) || tabs.infoTab);
103 private initTabs = (component) => {
107 this.tabs.push(tabs.infoTab);
109 if (component instanceof PolicyInstance) {
110 this.tabs.push(tabs.policyTargets);
111 this.tabs.push(tabs.policyProperties);
115 if (component instanceof GroupInstance) {
116 this.tabs.push(tabs.groupMembers);
117 this.tabs.push(tabs.groupProperties);
121 // Deployment artifacts
122 if (!this.isPNF() && !this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance()) {
123 this.tabs.push(tabs.deploymentArtifacts);
126 // Properties or Inputs
127 if (component.isResource() || this.selectedComponentIsServiceProxyInstance()) {
128 this.tabs.push(tabs.properties);
130 this.tabs.push(tabs.inputs);
133 if (!this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance()) {
134 this.tabs.push(tabs.infoArtifacts);
137 if (!(component.isService()) || this.selectedComponentIsServiceProxyInstance()) {
138 this.tabs.push(tabs.reqAndCapabilities);
141 if (component.isService() && !this.selectedComponentIsServiceProxyInstance()) {
142 this.tabs.push(tabs.apiArtifacts);
144 if (component.isService() && this.selectedComponentIsServiceProxyInstance()) {
145 this.tabs.push(tabs.consumption);
146 this.tabs.push(tabs.dependencies);
151 private toggleSidebarDisplay = () => {
152 // this.withSidebar = !this.withSidebar;
153 this.store.dispatch(new OnSidebarOpenOrCloseAction());
156 private isPNF = (): boolean => {
157 return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.PNF;
160 private isConfiguration = (): boolean => {
161 return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.CONFIGURATION;
164 private isComponentInstanceSelected = (): boolean => {
165 return this.selectedComponent instanceof FullComponentInstance;
168 private selectedComponentIsServiceProxyInstance = (): boolean => {
169 return this.isComponentInstanceSelected() && this.selectedComponent.isServiceProxy();