catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   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
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  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=========================================================
  19  */
  20
  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';
  41 import {SubstitutionFilterTabComponent} from "./panel-tabs/substitution-filter-tab/substitution-filter-tab.component";
  42
  43 const tabs = {
  44     infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'},
  45     policyProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties'},
  46     policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'},
  47     groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'},
  48     groupProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties'},
  49     deploymentArtifacts: {titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts'},
  50     apiArtifacts: {titleIcon: 'api-o', component: ArtifactsTabComponent, input: { type:  ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts'},
  51     infoArtifacts: {titleIcon: 'info-square-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts'},
  52     properties: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties'},
  53     reqAndCapabilities : { titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {}, isActive: false, tooltipText: 'Requirements and Capabilities'},
  54     inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
  55     settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
  56     consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'},
  57     dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'DIRECTIVES AND NODE FILTER'}, isActive: false, tooltipText: 'Service Dependencies'},
  58     substitutionFilter: {titleIcon: 'composition-o', component: SubstitutionFilterTabComponent, input: {title: 'SUBSTITUTION FILTER'}, isActive: false, tooltipText: 'Substitution Filter'}
  59 };
  60
  61 @Component({
  62     selector: 'ng2-composition-panel',
  63     templateUrl: './composition-panel.component.html',
  64     styleUrls: ['./composition-panel.component.less', './panel-tabs/panel-tabs.less'],
  65 })
  66 export class CompositionPanelComponent {
  67
  68     @Input() topologyTemplate: TopologyTemplate;
  69     @HostBinding('class') classes = 'component-details-panel';
  70     @Select(GraphState) compositionState$: Observable<CompositionStateModel>;
  71     @Select(GraphState.withSidebar) withSidebar$: boolean;
  72     @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
  73     tabs: any[];
  74     subscription: Subscription;
  75
  76     private selectedComponent;
  77
  78     constructor(public store: Store) {
  79     }
  80
  81     ngOnInit() {
  82         this.subscription = this.store.select(GraphState.getSelectedComponent).subscribe((component) => {
  83             this.selectedComponent = component;
  84             this.initTabs(component);
  85             this.activatePreviousActiveTab();
  86         });
  87     }
  88
  89     ngOnDestroy() {
  90         if (this.subscription) {
  91             this.subscription.unsubscribe();
  92         }
  93     }
  94
  95     public setActive = (tabToSelect) => {
  96         this.tabs.map((tab) => tab.isActive = (tab.titleIcon === tabToSelect.titleIcon) ? true : false);
  97     }
  98
  99     public activatePreviousActiveTab = () => { // sets the info tab to active if no other tab selected
 100
 101         this.setActive(this.tabs.find((tab) => tab.isActive) || tabs.infoTab);
 102
 103     }
 104
 105     private initTabs = (component) => {
 106         this.tabs = [];
 107
 108         // Information
 109         this.tabs.push(tabs.infoTab);
 110
 111         if (component instanceof PolicyInstance) {
 112             this.tabs.push(tabs.policyTargets);
 113             this.tabs.push(tabs.policyProperties);
 114             return;
 115         }
 116
 117         if (component instanceof GroupInstance) {
 118             this.tabs.push(tabs.groupMembers);
 119             this.tabs.push(tabs.groupProperties);
 120             return;
 121         }
 122
 123         // Deployment artifacts
 124         if (!this.isPNF() && !this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
 125             this.tabs.push(tabs.deploymentArtifacts);
 126         }
 127
 128         // Properties or Inputs
 129         if (component.isResource() || this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance()) {
 130             this.tabs.push(tabs.properties);
 131         } else {
 132             this.tabs.push(tabs.inputs);
 133         }
 134
 135         if (!this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
 136             this.tabs.push(tabs.infoArtifacts);
 137         }
 138
 139         if (!(component.isService()) || this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance()) {
 140             this.tabs.push(tabs.reqAndCapabilities);
 141         }
 142
 143         if (component.isService() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
 144             this.tabs.push(tabs.apiArtifacts);
 145             this.tabs.push(tabs.substitutionFilter);
 146         }
 147         if (component.isService() && (this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance())) {
 148             this.tabs.push(tabs.consumption);
 149             this.tabs.push(tabs.dependencies);
 150         } else if (component.isResource() && this.selectedComponentIsVfcInstance()) {
 151             this.tabs.push(tabs.dependencies);
 152         }
 153
 154     }
 155
 156     private toggleSidebarDisplay = () => {
 157         // this.withSidebar = !this.withSidebar;
 158         this.store.dispatch(new OnSidebarOpenOrCloseAction());
 159     }
 160
 161     private isPNF = (): boolean => {
 162         return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.PNF;
 163     }
 164
 165     private isConfiguration = (): boolean => {
 166         return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.CONFIGURATION;
 167     }
 168
 169     private isComponentInstanceSelected = (): boolean => {
 170         return this.selectedComponent instanceof FullComponentInstance;
 171     }
 172
 173     private selectedComponentIsServiceProxyInstance = (): boolean => {
 174         return this.isComponentInstanceSelected() && this.selectedComponent.isServiceProxy();
 175     }
 176
 177     private selectedComponentIsServiceSubstitutionInstance = (): boolean => {
 178         return this.isComponentInstanceSelected() && this.selectedComponent.isServiceSubstitution();
 179     }
 180
 181     private selectedComponentIsVfcInstance = (): boolean => {
 182         return this.isComponentInstanceSelected() && this.selectedComponent.isVFC();
 183     }
 184 }