catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts

   1 /**
   2  * Created by rc2122 on 6/3/2018.
   3  */
   4 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
   5 import * as _ from 'lodash';
   6 import { SdcUiServices } from 'onap-ui-angular';
   7 import { ComponentMetadata, IComponentMetadata } from '../../../../models/component-metadata';
   8 import { IUserProperties } from '../../../../models/user';
   9
  10 import { Resource } from '../../../../models/components/resource';
  11 import { ComponentType } from '../../../../utils/constants';
  12 import { CacheService } from '../../../services/cache.service';
  13 import { FileUtilsService } from '../../../services/file-utils.service';
  14 import { OnboardingService } from '../../../services/onboarding.service';
  15 import { TranslateService } from '../../../shared/translator/translate.service';
  16
  17 export interface ImportVSPdata {
  18     componentCsar: Resource;
  19     previousComponent?: Resource;
  20     type: string;
  21 }
  22
  23 // tslint:disable-next-line:interface-name
  24 export interface IPoint {
  25     x: number;
  26     y: number;
  27 }
  28
  29 @Component({
  30     selector: 'onboarding-modal',
  31     templateUrl: './onboarding-modal.component.html',
  32     styleUrls: ['onboarding-modal.component.less', '../../../../../assets/styles/table-style.less']
  33 })
  34 export class OnboardingModalComponent implements OnInit {
  35     @Input() currentCsarUUID: string;
  36     @Input() currentCsarVersion: string;
  37     @ViewChild('componentsMetadataTable') table: any;
  38     @Output() closeModalEvent: EventEmitter<ImportVSPdata> = new EventEmitter<ImportVSPdata>();
  39
  40     private columns = [
  41         {name: 'Name', prop: 'name', flexGrow: 22},
  42         {name: 'Vendor', prop: 'vendorName', flexGrow: 26},
  43         {name: 'Category', prop: 'categories', flexGrow: 33},
  44         {name: 'Version', prop: 'csarVersion', flexGrow: 10},
  45         {name: 'Type', prop: 'resourceType', flexGrow: 10},
  46         {name: '#', prop: '', flexGrow: 20}
  47     ];
  48     private componentsMetadataList: IComponentMetadata[] = [];
  49     private temp: IComponentMetadata[] = [];
  50     private componentFromServer: ComponentMetadata;
  51     private isCsarComponentExists: boolean = false;
  52     private selectedComponent: ComponentMetadata;
  53     private isLoading: boolean;
  54     private user: IUserProperties;
  55
  56     constructor(private onBoardingService: OnboardingService,
  57                 private translateService: TranslateService,
  58                 private cacheService: CacheService,
  59                 private fileUtilsService: FileUtilsService,
  60                 private popoverService: SdcUiServices.PopoverService,
  61                 private loaderService: SdcUiServices.LoaderService) {
  62     }
  63
  64     public ngOnInit(): void {
  65         this.initOnboardingComponentsList();
  66         this.user = this.cacheService.get('user');
  67     }
  68
  69     initMaxVersionOfItemsInList = (onboardingResponse: IComponentMetadata[]): void => {
  70         // Get only the latest version of each item
  71         this.componentsMetadataList = [];
  72
  73         // group all items according to packageId
  74         const groupByPackageIdItems = _.groupBy(onboardingResponse, 'packageId');
  75         // Loop on all the groups and push to componentsMetadataList the max version for each package
  76         _.each(groupByPackageIdItems, (items: any): void => {
  77             let maxItem: any = items[0];
  78             items.forEach((item) => {
  79                 if (parseFloat(maxItem.csarVersion) < parseFloat(item.csarVersion)) {
  80                     maxItem = item;
  81                 }
  82             });
  83             if (maxItem) {
  84                 this.componentsMetadataList.push(maxItem);
  85             }
  86         });
  87     }
  88
  89     onSelectComponent({selected}) {
  90         this.table.rowDetail.collapseAllRows();
  91         if (selected[0] === this.selectedComponent) {
  92             this.selectedComponent = undefined;
  93             this.componentFromServer = undefined;
  94             this.table.rowDetail.toggleExpandRow(null);
  95             return;
  96         }
  97         this.isLoading = true;
  98         this.componentFromServer = undefined;
  99         this.selectedComponent = selected[0];
 100         this.onBoardingService.getComponentFromCsarUuid(this.selectedComponent.csarUUID).subscribe(
 101             (componentFromServer: ComponentMetadata) => {
 102                 this.isLoading = false;
 103                 if (componentFromServer) {
 104                     this.componentFromServer = componentFromServer;
 105                     this.populateRowDetails(true);
 106                 } else {
 107                     this.populateRowDetails(false);
 108                 }
 109             }, (error) => {
 110                 this.isLoading = false;
 111                 this.populateRowDetails(false);
 112             });
 113     }
 114
 115     populateRowDetails(isCsarComponentExists: boolean) {
 116         this.isCsarComponentExists = isCsarComponentExists;
 117         this.table.rowDetail.toggleExpandRow(this.selectedComponent);
 118     }
 119
 120     importOrUpdateCsar = (): void => {
 121         const selectedComponentConverted = this.onBoardingService.convertMetaDataToComponent(this.selectedComponent);
 122         const componentFromServerConverted = this.componentFromServer ?
 123             this.onBoardingService.convertMetaDataToComponent(this.componentFromServer) : undefined;
 124         const importVSPdata: ImportVSPdata = {
 125             componentCsar: selectedComponentConverted,
 126             previousComponent: componentFromServerConverted,
 127             type: ComponentType.RESOURCE.toLowerCase()
 128         };
 129         this.closeModalEvent.emit(importVSPdata);
 130     }
 131
 132     downloadCsar = (packageId: string): void => {
 133         this.isLoading = true;
 134         this.onBoardingService.downloadOnboardingCsar(packageId).subscribe(
 135             (file: any): void => {
 136                 this.isLoading = false;
 137                 if (file.body) {
 138                     this.fileUtilsService.downloadFile(file.body, packageId + '.csar');
 139                 }
 140             }, (): void => {
 141                 this.isLoading = false;
 142             }
 143         );
 144     }
 145
 146     updateFilter(event) {
 147         const val = event.target.value.toLowerCase();
 148
 149         // filter our data
 150         const temp = this.temp.filter((componentMetadata: ComponentMetadata) => {
 151             return !val ||
 152                 (componentMetadata.name && componentMetadata.name.toLowerCase().indexOf(val) !== -1) ||
 153                 (componentMetadata.vendorName && componentMetadata.vendorName.toLowerCase().indexOf(val) !== -1) ||
 154                 (componentMetadata.categories[0] && componentMetadata.categories[0].name.toLowerCase().indexOf(val) !== -1) ||
 155                 (componentMetadata.categories[0] && componentMetadata.categories[0].subcategories[0] && componentMetadata.categories[0].subcategories[0].name.toLowerCase().indexOf(val) !== -1) ||
 156                 (componentMetadata.csarVersion && componentMetadata.csarVersion.toLowerCase().indexOf(val) !== -1) ||
 157                 (componentMetadata.description && componentMetadata.description.toLowerCase().indexOf(val) !== -1);
 158         });
 159
 160         // update the rows
 161         this.componentsMetadataList = temp;
 162     }
 163
 164     checkNotCertified = (): boolean => {
 165         return this.componentFromServer && this.componentFromServer.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' &&
 166             this.componentFromServer.lastUpdaterUserId !== this.user.userId;
 167     }
 168
 169     openPopover = ($event: any, popoverContent): void => {
 170         this.popoverService.createPopOver('', this.translateService.translate(popoverContent), {
 171             x: $event.pageX,
 172             y: $event.pageY
 173         }, 'bottom');
 174     }
 175
 176     private initOnboardingComponentsList = (): void => {
 177         this.loaderService.activate();
 178         this.onBoardingService.getOnboardingComponents().subscribe(
 179             (onboardingResponse: IComponentMetadata[]) => {
 180                 this.loaderService.deactivate();
 181                 if (this.currentCsarUUID) {
 182                     onboardingResponse = _.filter(onboardingResponse, (input): boolean => {
 183                         return (input as ComponentMetadata).csarUUID === this.currentCsarUUID;
 184                     });
 185                 }
 186                 this.initMaxVersionOfItemsInList(onboardingResponse);
 187                 this.temp = [...this.componentsMetadataList];
 188             }, (error) => {
 189                 this.loaderService.deactivate();
 190             }
 191         );
 192     }
 193 }