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 import {InterfaceOperationsComponent} from "../interface-operatons/interface-operations.component";
  43
  44 const tabs = {
  45     infoTab: {
  46         titleIcon: 'info-circle',
  47         component: InfoTabComponent,
  48         input: {},
  49         isActive: true,
  50         tooltipText: 'Information',
  51         testId: 'detail-tab-information'
  52     },
  53     policyProperties: {
  54         titleIcon: 'settings-o',
  55         component: GroupOrPolicyPropertiesTab,
  56         input: {type: 'policy'},
  57         isActive: false,
  58         tooltipText: 'Properties',
  59         testId: 'detail-tab-policy-properties'
  60     },
  61     policyTargets: {
  62         titleIcon: 'inputs-o',
  63         component: PolicyTargetsTabComponent,
  64         input: {},
  65         isActive: false,
  66         tooltipText: 'Targets',
  67         testId: 'detail-tab-policy-targets'
  68     },
  69     groupMembers: {
  70         titleIcon: 'inputs-o',
  71         component: GroupMembersTabComponent,
  72         input: {},
  73         isActive: false,
  74         tooltipText: 'Members',
  75         testId: 'detail-tab-group-members'
  76     },
  77     groupProperties: {
  78         titleIcon: 'settings-o',
  79         component: GroupOrPolicyPropertiesTab,
  80         input: {type: 'group'},
  81         isActive: false,
  82         tooltipText: 'Properties',
  83         testId: 'detail-tab-group-properties'
  84     },
  85     deploymentArtifacts: {
  86         titleIcon: 'deployment-artifacts-o',
  87         component: ArtifactsTabComponent,
  88         input: {type: ArtifactGroupType.DEPLOYMENT},
  89         isActive: false,
  90         tooltipText: 'Deployment Artifacts',
  91         testId: 'detail-tab-deployment-artifacts'
  92     },
  93     apiArtifacts: {
  94         titleIcon: 'api-o',
  95         component: ArtifactsTabComponent,
  96         input: {type: ArtifactGroupType.SERVICE_API},
  97         isActive: false,
  98         tooltipText: 'API Artifacts',
  99         testId: 'detail-tab-api-artifacts'
 100     },
 101     infoArtifacts: {
 102         titleIcon: 'info-square-o',
 103         component: ArtifactsTabComponent,
 104         input: {type: ArtifactGroupType.INFORMATION},
 105         isActive: false,
 106         tooltipText: 'Information Artifacts',
 107         testId: 'detail-tab-information-artifacts'
 108     },
 109     properties: {
 110         titleIcon: 'settings-o',
 111         component: PropertiesTabComponent,
 112         input: {title: 'Properties and Attributes'},
 113         isActive: false,
 114         tooltipText: 'Properties',
 115         testId: 'detail-tab-properties-attributes'
 116     },
 117     reqAndCapabilities: {
 118         titleIcon: 'req-capabilities-o',
 119         component: ReqAndCapabilitiesTabComponent,
 120         input: {},
 121         isActive: false,
 122         tooltipText: 'Requirements and Capabilities',
 123         testId: 'detail-tab-requirements-capabilities'
 124     },
 125     inputs: {
 126         titleIcon: 'inputs-o',
 127         component: PropertiesTabComponent,
 128         input: {title: 'Inputs'},
 129         isActive: false,
 130         tooltipText: 'Inputs',
 131         testId: 'detail-tab-inputs'
 132     },
 133     settings: {
 134         titleIcon: 'settings-o',
 135         component: PropertiesTabComponent,
 136         input: {},
 137         isActive: false,
 138         tooltipText: 'Settings',
 139         testId: 'detail-tab-settings'
 140     },
 141     consumption: {
 142         titleIcon: 'api-o',
 143         component: ServiceConsumptionTabComponent,
 144         input: {title: 'OPERATION CONSUMPTION'},
 145         isActive: false,
 146         tooltipText: 'Service Consumption',
 147         testId: 'detail-tab-operation-consumption'
 148     },
 149     dependencies: {
 150         titleIcon: 'archive',
 151         component: ServiceDependenciesTabComponent,
 152         input: {title: 'DIRECTIVES AND NODE FILTER'},
 153         isActive: false,
 154         tooltipText: 'Service Dependencies',
 155         testId: 'detail-tab-directives-node-filter'
 156     },
 157     substitutionFilter: {
 158         titleIcon: 'composition-o',
 159         component: SubstitutionFilterTabComponent,
 160         input: {title: 'SUBSTITUTION FILTER'},
 161         isActive: false,
 162         tooltipText: 'Substitution Filter',
 163         testId: 'detail-tab-substitution-filter'
 164     },
 165     interfaceOperations: {
 166         titleIcon: 'composition-o',
 167         component: InterfaceOperationsComponent,
 168         input: {title: 'Interface Operations'},
 169         isActive: false,
 170         tooltipText: 'Interface Operations',
 171         testId: 'detail-tab-interface-operations'
 172     }
 173 };
 174
 175 @Component({
 176     selector: 'ng2-composition-panel',
 177     templateUrl: './composition-panel.component.html',
 178     styleUrls: ['./composition-panel.component.less', './panel-tabs/panel-tabs.less'],
 179 })
 180 export class CompositionPanelComponent {
 181
 182     @Input() topologyTemplate: TopologyTemplate;
 183     @HostBinding('class') classes = 'component-details-panel';
 184     @Select(GraphState) compositionState$: Observable<CompositionStateModel>;
 185     @Select(GraphState.withSidebar) withSidebar$: boolean;
 186     @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
 187     tabs: any[];
 188     subscription: Subscription;
 189
 190     private selectedComponent;
 191
 192     constructor(public store: Store) {
 193     }
 194
 195     ngOnInit() {
 196         this.subscription = this.store.select(GraphState.getSelectedComponent).subscribe((component) => {
 197             this.selectedComponent = component;
 198             this.initTabs(component);
 199             this.activatePreviousActiveTab();
 200         });
 201     }
 202
 203
 204     onRightClick(selectedComponent: any) {
 205         console.info("onRightClick", selectedComponent)
 206         return false;
 207     }
 208
 209     ngOnDestroy() {
 210         if (this.subscription) {
 211             this.subscription.unsubscribe();
 212         }
 213     }
 214
 215     public setActive = (tabToSelect) => {
 216         this.tabs.map((tab) => tab.isActive = (tab.titleIcon === tabToSelect.titleIcon) ? true : false);
 217     }
 218
 219     public activatePreviousActiveTab = () => { // sets the info tab to active if no other tab selected
 220
 221         this.setActive(this.tabs.find((tab) => tab.isActive) || tabs.infoTab);
 222
 223     }
 224
 225     private initTabs = (component) => {
 226         this.tabs = [];
 227
 228         // Information
 229         this.tabs.push(tabs.infoTab);
 230
 231         if (component instanceof PolicyInstance) {
 232             this.tabs.push(tabs.policyTargets);
 233             this.tabs.push(tabs.policyProperties);
 234             return;
 235         }
 236
 237         if (component instanceof GroupInstance) {
 238             this.tabs.push(tabs.groupMembers);
 239             this.tabs.push(tabs.groupProperties);
 240             return;
 241         }
 242
 243         // Deployment artifacts
 244         if (!this.isPNF() && !this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
 245             this.tabs.push(tabs.deploymentArtifacts);
 246         }
 247
 248         // Properties or Inputs
 249         if (component.isResource() || this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance()) {
 250             this.tabs.push(tabs.properties);
 251         } else {
 252             this.tabs.push(tabs.inputs);
 253         }
 254
 255         if (!this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
 256             this.tabs.push(tabs.infoArtifacts);
 257         }
 258
 259         if (!(component.isService()) || this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance()) {
 260             this.tabs.push(tabs.reqAndCapabilities);
 261         }
 262
 263         if (component.isService() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
 264             this.tabs.push(tabs.apiArtifacts);
 265         }
 266
 267         if (this.showSubstitutionFilterTab(component)) {
 268             this.tabs.push(tabs.substitutionFilter);
 269         }
 270
 271         if (component.isService() && (this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance())) {
 272             this.tabs.push(tabs.consumption);
 273             this.tabs.push(tabs.dependencies);
 274             this.tabs.push(tabs.interfaceOperations);
 275         } else if (component.isResource() && this.isComponentInstanceSelected()) {
 276             this.tabs.push(tabs.dependencies);
 277             this.tabs.push(tabs.interfaceOperations);
 278         }
 279
 280     }
 281
 282     private showSubstitutionFilterTab(component): boolean {
 283         if ((component.isService() || this.isVF()) && !this.isComponentInstanceSelected()) {
 284             if (component.isService()) {
 285                 return (<Service>component).isSubstituteCandidate();
 286             }
 287             return true;
 288         }
 289
 290         return false;
 291     }
 292
 293     private toggleSidebarDisplay = () => {
 294         // this.withSidebar = !this.withSidebar;
 295         this.store.dispatch(new OnSidebarOpenOrCloseAction());
 296     }
 297
 298     private isPNF = (): boolean => {
 299         return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.PNF;
 300     }
 301
 302     private isVF = (): boolean => {
 303         return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.VF;
 304     }
 305
 306     private isConfiguration = (): boolean => {
 307         return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.CONFIGURATION;
 308     }
 309
 310     private isComponentInstanceSelected = (): boolean => {
 311         return this.selectedComponent instanceof FullComponentInstance;
 312     }
 313
 314     private selectedComponentIsServiceProxyInstance = (): boolean => {
 315         return this.isComponentInstanceSelected() && this.selectedComponent.isServiceProxy();
 316     }
 317
 318     private selectedComponentIsServiceSubstitutionInstance = (): boolean => {
 319         return this.isComponentInstanceSelected() && this.selectedComponent.isServiceSubstitution();
 320     }
 321 }