catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.ts

   1 import { Component, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
   2 import * as _ from 'lodash';
   3 import { SdcUiServices } from 'onap-ui-angular';
   4 import { Capability, CapabilityUI } from '../../../../models/capability';
   5 import { Requirement, RequirementUI } from '../../../../models/requirement';
   6 import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
   7 import { ComponentGenericResponse } from '../../../services/responses/component-generic-response';
   8 import { WorkspaceService } from '../workspace.service';
   9 import { CapabilitiesComponent } from './capabilities/capabilities.component';
  10 import { RequirmentsComponent } from './requirements/requirments.components';
  11 import {ReqAndCapabilitiesService} from "./req-and-capabilities.service";
  12 import {CapabilitiesEditorComponent} from "./capabilities/capabilityEditor/capabilities-editor.component";
  13 import {ModalComponent} from "onap-ui-angular/dist/modals/modal.component";
  14 import {EventListenerService} from "../../../../services/event-listener-service";
  15 import {RequirementsEditorComponent} from "./requirements/requirementEditor/requirements-editor.component";
  16 import {ComponentState} from "../../../../utils/constants";
  17
  18 @Component({
  19     selector: 'req-and-capabilities',
  20     templateUrl: './req-and-capabilities.component.html',
  21     styleUrls: ['./req-and-capabilities.component.less']
  22 })
  23 export class ReqAndCapabilitiesComponent implements OnInit {
  24
  25     @ViewChild('requirmentsContainer', { read: ViewContainerRef }) requirmentsContainer: ViewContainerRef;
  26     @ViewChild('capabilitiesContainer', { read: ViewContainerRef }) capabilitiesContainer: ViewContainerRef;
  27     private requirements: Requirement[] = [];
  28     private requirementsUI: RequirementUI[] = [];
  29     private capabilities: Capability[] = [];
  30     private selectTabName: string = 'REQUIREMENTS';
  31     private notEmptyTable: boolean = true;
  32     private instanceRef: ComponentRef<any>;
  33     private customModalInstance: ModalComponent;
  34     readonly INPUTS_FOR_CAPABILITIES: string = 'INPUTS_FOR_CAPABILITIES';
  35     readonly INPUTS_FOR_REQUIREMENTS: string = 'INPUTS_FOR_REQUIREMENTS';
  36
  37     constructor(private workspaceService: WorkspaceService,
  38                 private loaderService: SdcUiServices.LoaderService,
  39                 private topologyTemplateService: TopologyTemplateService,
  40                 private createDynamicComponentService:  SdcUiServices.CreateDynamicComponentService,
  41                 private reqAndCapabilitiesService : ReqAndCapabilitiesService,
  42                 private modalService: SdcUiServices.ModalService,
  43                 private eventListenerService: EventListenerService) {
  44     }
  45
  46     ngOnInit(): void {
  47         this.initCapabilitiesAndRequirements();
  48
  49         this.eventListenerService.registerObserverCallback('CAPABILITIES_UPDATED', () => {
  50             this.loadReqOrCap();
  51         });
  52
  53         this.eventListenerService.registerObserverCallback('REQUIREMENTS_UPDATED', () => {
  54             this.loadReqOrCap();
  55         });
  56     }
  57
  58
  59
  60     private initCapabilitiesAndRequirements(): void {
  61         if (!this.workspaceService.metadata.capabilities || !this.workspaceService.metadata.requirements) {
  62             this.loaderService.activate();
  63             this.topologyTemplateService.getRequirementsAndCapabilitiesWithProperties
  64             (this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId)
  65                 .subscribe((response: ComponentGenericResponse) => {
  66                     this.workspaceService.metadata.capabilities = response.capabilities;
  67                     this.workspaceService.metadata.requirements = response.requirements;
  68                     this.initReqOrCap();
  69                     this.loaderService.deactivate();
  70                 }, (error) => {
  71                     this.loaderService.deactivate();
  72                 });
  73         } else {
  74             this.initReqOrCap();
  75         }
  76     }
  77
  78     private initReqOrCap() {
  79         this.populateReqOrCap('requirements');
  80         this.extendRequirementsToRequiremnetsUI(this.requirements);
  81         this.populateReqOrCap('capabilities');
  82         this.loadReqOrCap();
  83     }
  84
  85     private populateReqOrCap(instanceName: string) {
  86         _.forEach(this.workspaceService.metadata[instanceName], (concatArray: any[], name) => {
  87             this[instanceName] = this[instanceName].concat(concatArray);
  88         });
  89     }
  90
  91     private updateFilter(event) {
  92         const val = event.target.value.toLowerCase();
  93         if (this.selectTabName === 'REQUIREMENTS') {
  94             this.instanceRef.instance.requirements = this.requirementsUI.filter((req: Requirement) => {
  95                 return !val || this.filterRequirments(req, val);
  96             });
  97         } else {
  98             this.instanceRef.instance.capabilities = this.capabilities.filter((cap: Capability) => {
  99                 return !val || this.filterCapabilities(cap, val);
 100             });
 101         }
 102
 103     }
 104
 105     private selectTab($event) {
 106         this.selectTabName = $event.title.contains('Requirement') ? 'REQUIREMENTS' : 'CATPABILITIES';
 107         this.loadReqOrCap();
 108     }
 109
 110     private showAdd() {
 111         return this.workspaceService.metadata.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT;
 112     }
 113
 114     private async loadReqOrCap() {
 115         if (this.instanceRef) {
 116             this.instanceRef.destroy();
 117         }
 118
 119         if (this.selectTabName === 'REQUIREMENTS') {
 120             this.notEmptyTable = this.requirementsUI.length !== 0;
 121             this.instanceRef = this.createDynamicComponentService.
 122             insertComponentDynamically(RequirmentsComponent, {requirements: this.requirementsUI}, this.requirmentsContainer);
 123             // TODO - Keep the initInputs, so it will be called only for the first time - no need to wait to thse API's every time that a user switches tab
 124             await this.reqAndCapabilitiesService.initInputs(this.INPUTS_FOR_REQUIREMENTS);
 125         } else {
 126             this.notEmptyTable = this.capabilities.length !== 0;
 127             this.instanceRef = this.createDynamicComponentService.
 128             insertComponentDynamically(CapabilitiesComponent, {capabilities: this.capabilities}, this.capabilitiesContainer);
 129             // TODO - Keep the initInputs, so it will be called only for the first time - no need to wait to thse API's every time that a user switches tab
 130             await this.reqAndCapabilitiesService.initInputs(this.INPUTS_FOR_CAPABILITIES);
 131         }
 132     }
 133
 134     private filterCapabilities(capability: Capability, val: string): boolean {
 135         return _.includes([capability.name, capability.description, capability.validSourceTypes.join(),
 136                 capability.minOccurrences, capability.maxOccurrences].join('').toLowerCase(), val) ||
 137             (capability.type && capability.type.replace('tosca.capabilities.', '').toLowerCase().indexOf(val) !== -1);
 138     }
 139
 140     private filterRequirments(requirement: Requirement, val: string): boolean {
 141         return _.includes([requirement.name, requirement.minOccurrences, requirement.maxOccurrences].join('').toLowerCase(), val) ||
 142             (requirement.capability && requirement.capability.substring('tosca.capabilities.'.length).toLowerCase().indexOf(val) !== -1) ||
 143             (requirement.node && requirement.node.substring('tosca.node.'.length).toLowerCase().indexOf(val) !== -1) ||
 144             (requirement.relationship && requirement.relationship.substring('tosca.relationship.'.length)
 145                 .toLowerCase().indexOf(val) !== -1);
 146     }
 147
 148     private addCapability() {
 149         let modalConfig = {
 150             size: 'md',
 151             title:  'Add Capability',
 152             type: 'custom',
 153             buttons: [
 154                 {
 155                     id: 'saveButton',
 156                     text: ('Create'),
 157                     size: "'x-small'",
 158                     callback: () => this.createCapability(),
 159                     closeModal: true
 160                 },
 161                 {text: "Cancel", size: "'x-small'", closeModal: true}]
 162         };
 163         let modalInputs = {
 164             capabilityTypesList: this.reqAndCapabilitiesService.getCapabilityTypesList(),
 165         };
 166
 167         this.customModalInstance = this.modalService.openCustomModal(modalConfig, CapabilitiesEditorComponent, {input: modalInputs});
 168         this.customModalInstance.innerModalContent.instance.
 169         onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('saveButton').disabled = !isValid);
 170     }
 171
 172     private createCapability() {
 173         const capability = this.customModalInstance.innerModalContent.instance.capabilityData;
 174         this.loaderService.activate();
 175         if (!capability.uniqueId) {
 176             this.topologyTemplateService.createCapability(this.workspaceService.metadata.getTypeUrl(), this.workspaceService.metadata.uniqueId, capability).subscribe((result) => {
 177                 this.capabilities.unshift(new CapabilityUI(result[0], this.workspaceService.metadata.uniqueId));
 178                 this.loadReqOrCap();
 179                 this.loaderService.deactivate();
 180             }, () => {
 181                 this.loaderService.deactivate();
 182             });
 183         }
 184     }
 185
 186     private addRequirement () {
 187         let modalConfig = {
 188             size: 'md',
 189             title: 'Add Requirement',
 190             type: 'custom',
 191             buttons: [
 192                 {
 193                     id: 'saveButton',
 194                     text: ('Create'),
 195                     size: "'x-small'",
 196                     callback: () => this.createRequirement(),
 197                     closeModal: true
 198                 },
 199                 {text: "Cancel", size: "'x-small'", closeModal: true}]
 200         };
 201         let modalInputs = {
 202             // requirement: req,
 203             relationshipTypesList: this.reqAndCapabilitiesService.getRelationsShipeTypeList(),
 204             nodeTypesList: this.reqAndCapabilitiesService.getNodeTypesList(),
 205             capabilityTypesList: this.reqAndCapabilitiesService.getCapabilityTypesList(),
 206             // isReadonly: this.$scope.isViewMode() || !this.$scope.isDesigner(),
 207         };
 208
 209         this.customModalInstance = this.modalService.openCustomModal(modalConfig, RequirementsEditorComponent, {input: modalInputs});
 210         this.customModalInstance.innerModalContent.instance.
 211         onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('saveButton').disabled = !isValid);
 212     }
 213
 214
 215     private createRequirement() {
 216         const requirement = this.customModalInstance.innerModalContent.instance.requirementData;
 217         this.loaderService.activate();
 218         if (!requirement.uniqueId) {
 219             this.topologyTemplateService.createRequirement(this.workspaceService.metadata.getTypeUrl(), this.workspaceService.metadata.uniqueId, requirement).subscribe(result => {
 220                 this.requirementsUI.unshift(new RequirementUI(result[0], this.workspaceService.metadata.uniqueId));
 221                 this.loadReqOrCap();
 222                 this.loaderService.deactivate();
 223             }, () => {
 224                 this.loaderService.deactivate();
 225             });
 226         }
 227     }
 228
 229     private extendRequirementsToRequiremnetsUI(requirements: Requirement[]) {
 230         this.requirements.map((requirement) => {
 231            this.requirementsUI.push(new RequirementUI(requirement, this.workspaceService.metadata.uniqueId));
 232         });
 233     }
 234 }