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

/*-
 * ============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 { Component, HostBinding, Input } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Component as TopologyTemplate, ComponentInstance, FullComponentInstance, GroupInstance, PolicyInstance, Resource, Service } from 'app/models';
import { ArtifactsTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/artifacts-tab/artifacts-tab.component';
import { GroupMembersTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/group-members-tab/group-members-tab.component';
import { GroupOrPolicyPropertiesTab } from 'app/ng2/pages/composition/panel/panel-tabs/group-or-policy-properties-tab/group-or-policy-properties-tab.component';
import { InfoTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component';
import { PolicyTargetsTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component';
import { PropertiesTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component';
import { ReqAndCapabilitiesTabComponent } from 'app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component';
import { ComponentType, ResourceType } from 'app/utils';
import * as _ from 'lodash';
import { Subscription } from 'rxjs';
import { Observable } from 'rxjs/Observable';
import { ArtifactGroupType, COMPONENT_FIELDS } from '../../../../utils/constants';
import { WorkspaceState } from '../../../store/states/workspace.state';
import { OnSidebarOpenOrCloseAction } from '../common/store/graph.actions';
import { CompositionStateModel, GraphState } from '../common/store/graph.state';
import { ServiceConsumptionTabComponent } from './panel-tabs/service-consumption-tab/service-consumption-tab.component';
import { ServiceDependenciesTabComponent } from './panel-tabs/service-dependencies-tab/service-dependencies-tab.component';
import {SubstitutionFilterTabComponent} from "./panel-tabs/substitution-filter-tab/substitution-filter-tab.component";
import {InterfaceOperationsComponent} from "../interface-operatons/interface-operations.component";

const tabs = {
    infoTab: {
        titleIcon: 'info-circle',
        component: InfoTabComponent,
        input: {},
        isActive: true,
        tooltipText: 'Information',
        testId: 'detail-tab-information'
    },
    policyProperties: {
        titleIcon: 'settings-o',
        component: GroupOrPolicyPropertiesTab,
        input: {type: 'policy'},
        isActive: false,
        tooltipText: 'Properties',
        testId: 'detail-tab-policy-properties'
    },
    policyTargets: {
        titleIcon: 'inputs-o',
        component: PolicyTargetsTabComponent,
        input: {},
        isActive: false,
        tooltipText: 'Targets',
        testId: 'detail-tab-policy-targets'
    },
    groupMembers: {
        titleIcon: 'inputs-o',
        component: GroupMembersTabComponent,
        input: {},
        isActive: false,
        tooltipText: 'Members',
        testId: 'detail-tab-group-members'
    },
    groupProperties: {
        titleIcon: 'settings-o',
        component: GroupOrPolicyPropertiesTab,
        input: {type: 'group'},
        isActive: false,
        tooltipText: 'Properties',
        testId: 'detail-tab-group-properties'
    },
    deploymentArtifacts: {
        titleIcon: 'deployment-artifacts-o',
        component: ArtifactsTabComponent,
        input: {type: ArtifactGroupType.DEPLOYMENT},
        isActive: false,
        tooltipText: 'Deployment Artifacts',
        testId: 'detail-tab-deployment-artifacts'
    },
    apiArtifacts: {
        titleIcon: 'api-o',
        component: ArtifactsTabComponent,
        input: {type: ArtifactGroupType.SERVICE_API},
        isActive: false,
        tooltipText: 'API Artifacts',
        testId: 'detail-tab-api-artifacts'
    },
    infoArtifacts: {
        titleIcon: 'info-square-o',
        component: ArtifactsTabComponent,
        input: {type: ArtifactGroupType.INFORMATION},
        isActive: false,
        tooltipText: 'Information Artifacts',
        testId: 'detail-tab-information-artifacts'
    },
    properties: {
        titleIcon: 'settings-o',
        component: PropertiesTabComponent,
        input: {title: 'Properties and Attributes'},
        isActive: false,
        tooltipText: 'Properties',
        testId: 'detail-tab-properties-attributes'
    },
    reqAndCapabilities: {
        titleIcon: 'req-capabilities-o',
        component: ReqAndCapabilitiesTabComponent,
        input: {},
        isActive: false,
        tooltipText: 'Requirements and Capabilities',
        testId: 'detail-tab-requirements-capabilities'
    },
    inputs: {
        titleIcon: 'inputs-o',
        component: PropertiesTabComponent,
        input: {title: 'Inputs'},
        isActive: false,
        tooltipText: 'Inputs',
        testId: 'detail-tab-inputs'
    },
    settings: {
        titleIcon: 'settings-o',
        component: PropertiesTabComponent,
        input: {},
        isActive: false,
        tooltipText: 'Settings',
        testId: 'detail-tab-settings'
    },
    consumption: {
        titleIcon: 'api-o',
        component: ServiceConsumptionTabComponent,
        input: {title: 'OPERATION CONSUMPTION'},
        isActive: false,
        tooltipText: 'Service Consumption',
        testId: 'detail-tab-operation-consumption'
    },
    dependencies: {
        titleIcon: 'archive',
        component: ServiceDependenciesTabComponent,
        input: {title: 'DIRECTIVES AND NODE FILTER'},
        isActive: false,
        tooltipText: 'Service Dependencies',
        testId: 'detail-tab-directives-node-filter'
    },
    substitutionFilter: {
        titleIcon: 'composition-o',
        component: SubstitutionFilterTabComponent,
        input: {title: 'SUBSTITUTION FILTER'},
        isActive: false,
        tooltipText: 'Substitution Filter',
        testId: 'detail-tab-substitution-filter'
    },
    interfaceOperations: {
        titleIcon: 'composition-o',
        component: InterfaceOperationsComponent,
        input: {title: 'Interface Operations'},
        isActive: false,
        tooltipText: 'Interface Operations',
        testId: 'detail-tab-interface-operations'
    }
};

@Component({
    selector: 'ng2-composition-panel',
    templateUrl: './composition-panel.component.html',
    styleUrls: ['./composition-panel.component.less', './panel-tabs/panel-tabs.less'],
})
export class CompositionPanelComponent {

    @Input() topologyTemplate: TopologyTemplate;
    @HostBinding('class') classes = 'component-details-panel';
    @Select(GraphState) compositionState$: Observable<CompositionStateModel>;
    @Select(GraphState.withSidebar) withSidebar$: boolean;
    @Select(WorkspaceState.isViewOnly) isViewOnly$: boolean;
    tabs: any[];
    subscription: Subscription;

    private selectedComponent;

    constructor(public store: Store) {
    }

    ngOnInit() {
        this.subscription = this.store.select(GraphState.getSelectedComponent).subscribe((component) => {
            this.selectedComponent = component;
            this.initTabs(component);
            this.activatePreviousActiveTab();
        });
    }


    onRightClick(selectedComponent: any) {
        console.info("onRightClick", selectedComponent)
        return false;
    }

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }

    public setActive = (tabToSelect) => {
        this.tabs.map((tab) => tab.isActive = (tab.titleIcon === tabToSelect.titleIcon) ? true : false);
    }

    public activatePreviousActiveTab = () => { // sets the info tab to active if no other tab selected

        this.setActive(this.tabs.find((tab) => tab.isActive) || tabs.infoTab);

    }

    private initTabs = (component) => {
        this.tabs = [];

        // Information
        this.tabs.push(tabs.infoTab);

        if (component instanceof PolicyInstance) {
            this.tabs.push(tabs.policyTargets);
            this.tabs.push(tabs.policyProperties);
            return;
        }

        if (component instanceof GroupInstance) {
            this.tabs.push(tabs.groupMembers);
            this.tabs.push(tabs.groupProperties);
            return;
        }

        // Deployment artifacts
        if (!this.isPNF() && !this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
            this.tabs.push(tabs.deploymentArtifacts);
        }

        // Properties or Inputs
        if (component.isResource() || this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance()) {
            this.tabs.push(tabs.properties);
        } else {
            this.tabs.push(tabs.inputs);
        }

        if (!this.isConfiguration() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
            this.tabs.push(tabs.infoArtifacts);
        }

        if (!(component.isService()) || this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance()) {
            this.tabs.push(tabs.reqAndCapabilities);
        }

        if (component.isService() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
            this.tabs.push(tabs.apiArtifacts);
        }

        if (this.showSubstitutionFilterTab(component)) {
            this.tabs.push(tabs.substitutionFilter);
        }

        if (component.isService() && (this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance())) {
            this.tabs.push(tabs.consumption);
            this.tabs.push(tabs.dependencies);
            this.tabs.push(tabs.interfaceOperations);
        } else if (component.isResource() && this.isComponentInstanceSelected()) {
            this.tabs.push(tabs.dependencies);
            this.tabs.push(tabs.interfaceOperations);
        }

    }

    private showSubstitutionFilterTab(component): boolean {
        if ((component.isService() || this.isVF()) && !this.isComponentInstanceSelected()) {
            if (component.isService()) {
                return (<Service>component).isSubstituteCandidate();
            }
            return true;
        }

        return false;
    }

    private toggleSidebarDisplay = () => {
        // this.withSidebar = !this.withSidebar;
        this.store.dispatch(new OnSidebarOpenOrCloseAction());
    }

    private isPNF = (): boolean => {
        return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.PNF;
    }

    private isVF = (): boolean => {
        return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.VF;
    }

    private isConfiguration = (): boolean => {
        return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.CONFIGURATION;
    }

    private isComponentInstanceSelected = (): boolean => {
        return this.selectedComponent instanceof FullComponentInstance;
    }

    private selectedComponentIsServiceProxyInstance = (): boolean => {
        return this.isComponentInstanceSelected() && this.selectedComponent.isServiceProxy();
    }
    
    private selectedComponentIsServiceSubstitutionInstance = (): boolean => {
        return this.isComponentInstanceSelected() && this.selectedComponent.isServiceSubstitution();
    }
}