summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/modals
diff options
context:
space:
mode:
authorys9693 <ys9693@att.com>2020-01-19 13:50:02 +0200
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-01-22 12:33:31 +0000
commit16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch)
tree03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/ng2/components/modals
parentaa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff)
Catalog alignment
Issue-ID: SDC-2724 Signed-off-by: ys9693 <ys9693@att.com> Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/ng2/components/modals')
-rw-r--r--catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html18
-rw-r--r--catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts25
-rw-r--r--catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less3
-rw-r--r--catalog-ui/src/app/ng2/components/modals/modals.module.ts29
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts36
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html106
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less97
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts122
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts193
9 files changed, 629 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
new file mode 100644
index 0000000000..127531bfab
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
@@ -0,0 +1,18 @@
+<form>
+ <div>
+ <div class="comment-modal-text" [innerHTML]="message"></div>
+ <sdc-textarea #comment1
+ [(value)]="comment.text"
+ placeHolder="{{'CONFIRMATION_MODAL_PLACEHOLDER' | translate }}"
+ [required]="true"
+ name="comment1"
+ testId="checkindialog"
+ [maxLength]="256">
+ </sdc-textarea>
+ <sdc-validation [validateElement]="comment1" (validityChanged)="onValidityChange($event)">
+ <sdc-required-validator message="{{ 'VALIDATION_ERROR_REQUIRED' | translate:{'field': 'Comment' } }}"></sdc-required-validator>
+ <sdc-regex-validator message="{{ 'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate}}"
+ [pattern]="commentValidationPattern"></sdc-regex-validator>
+ </sdc-validation>
+ </div>
+</form>
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
new file mode 100644
index 0000000000..c66f60b5e7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
@@ -0,0 +1,25 @@
+/**
+ * Created by rc2122 on 5/31/2018.
+ */
+import { Component, Input } from "@angular/core";
+import { ValidationConfiguration } from "app/models";
+import { Subject } from "rxjs/Subject";
+
+@Component({
+ selector: 'comment-modal',
+ templateUrl: './comment-modal.component.html',
+ styleUrls: ['./comment-modal.less']
+})
+
+export class CommentModalComponent {
+
+ @Input() message:string;
+ onValidationChange: Subject<boolean> = new Subject();
+ //@Input() showComment:boolean;
+ private comment = {"text": ''};
+ private commentValidationPattern = ValidationConfiguration.validation.validationPatterns.comment;
+
+ private onValidityChange = (isValid: boolean):void => {
+ this.onValidationChange.next(isValid);
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
new file mode 100644
index 0000000000..8e20e81115
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
@@ -0,0 +1,3 @@
+.comment-modal-text {
+ padding-bottom: 5px;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/modals.module.ts b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
new file mode 100644
index 0000000000..5aa7f08b60
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by rc2122 on 5/24/2018.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { CommentModalComponent } from 'app/ng2/components/modals/comment-modal/comment-modal.component';
+import { PopoverModule } from 'app/ng2/components/ui/popover/popover.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { OnboardingService } from '../../services/onboarding.service';
+import { ImportVSPService } from './onboarding-modal/import-vsp.service';
+import { OnboardingModalComponent } from './onboarding-modal/onboarding-modal.component';
+
+@NgModule({
+ declarations: [CommentModalComponent, OnboardingModalComponent],
+ imports: [TranslateModule,
+ SdcUiComponentsModule,
+ CommonModule,
+ PopoverModule,
+ NgxDatatableModule],
+ exports: [CommentModalComponent, OnboardingModalComponent],
+ entryComponents: [CommentModalComponent, OnboardingModalComponent],
+ providers: [OnboardingService, ImportVSPService],
+ bootstrap: []
+})
+
+export class ModalsModule {
+}
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
new file mode 100644
index 0000000000..8e7364660f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, Inject } from "@angular/core";
+import { OnboardingModalComponent } from "./onboarding-modal.component";
+import { SdcUiServices, SdcUiCommon } from "onap-ui-angular";
+import { Observable, Subject } from "rxjs";
+import { CHANGE_COMPONENT_CSAR_VERSION_FLAG } from "../../../../utils/constants";
+import { CacheService } from "../../../services/cache.service";
+
+
+@Injectable()
+export class ImportVSPService {
+
+ constructor(private modalService: SdcUiServices.ModalService,
+ private cacheService:CacheService,
+ @Inject("$state") private $state:ng.ui.IStateService){
+
+ }
+
+ openOnboardingModal(csarUUID?: string, csarVersion?: string): Observable<any> {
+ var subject = new Subject<any>();
+ const onboardingModalConfig = {
+ size: SdcUiCommon.ModalSize.xlarge,
+ title: 'Import VSP',
+ type: SdcUiCommon.ModalType.custom,
+ testId: 'sampleTestIdModal1',
+ } as SdcUiCommon.IModalConfig;
+ const onboardingModalInstance = this.modalService.openCustomModal(onboardingModalConfig, OnboardingModalComponent, {currentCsarUUID: csarUUID, currentCsarVersion: csarVersion});
+ onboardingModalInstance.innerModalContent.instance.closeModalEvent.subscribe(
+ (result: any) => {
+ subject.next(result);
+ onboardingModalInstance.closeModal();
+ }, (err) =>{}
+ )
+ return subject.asObservable();
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
new file mode 100644
index 0000000000..6ba1f428a1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
@@ -0,0 +1,106 @@
+<div class="onboarding-modal">
+ <div class="search-wrapper">
+ <span class="sub-title-wrapper">
+ <svg-icon class="info-button"
+ (click) = "openPopover($event, 'ON_BOARDING_GENERAL_INFO')"
+ [name]="'info-circle-o'" [mode]="'primary'"
+ [size]="'medium'"></svg-icon>
+ <span class="sub-title">{{ 'ON_BOARDING_MODAL_SUB_TITLE' | translate }}</span>
+ </span>
+ <span class="sdc-filter-bar-wrapper">
+ <sdc-filter-bar
+ [placeHolder]="'Search'"
+ (keyup)="updateFilter($event)"
+ [testId]="'onboarding-search'">
+ </sdc-filter-bar>
+ </span>
+ </div>
+ <div class="datatable-components-wapper">
+ <ngx-datatable #componentsMetadataTable
+ columnMode="flex"
+ [headerHeight]="40"
+ [rowHeight]="35"
+ [rows]="componentsMetadataList"
+ [sorts]="[{prop: 'name', dir: 'asc'}]"
+ (select)='onSelectComponent($event)'
+ [selectionType]="'single'">
+ <ngx-datatable-row-detail [rowHeight]="undefiend">
+ <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template >
+ <div class="onboarding-components-details">
+ <span class="row-details-description">
+ <div>
+ <div class="th">VSP Description:</div>
+ <div>{{row.description}}</div>
+ </div>
+ </span>
+ <span class="row-details-metadata1">
+ <div *ngIf="isCsarComponentExists">
+ <div class="th">VF'S Meta Data:</div>
+ <div><span class="th">Name:</span>{{componentFromServer.name}}</div>
+ <div><span class="th">Lifecycle:</span>{{componentFromServer.lifecycleState}}</div>
+ <div><span class="th">Creator:</span>{{componentFromServer.creatorFullName}}</div>
+ </div>
+ </span>
+ <span class="row-details-metadata2">
+ <div *ngIf="isCsarComponentExists">
+ <div class="th">&nbsp;</div>
+ <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div>
+ <div><span class="th">Version:</span> {{componentFromServer.version}}</div>
+ <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div>
+ <div *ngIf="checkNotCertified()">
+ <span class="note">Designers cannot update a VSP if the VF is <br>checked out by another user.</span>
+ </div>
+ </div>
+ </span>
+ <span class="row-details-metadata3">
+ <svg-icon class="info-button"
+ (click) = "openPopover($event, isCsarComponentExists ? 'ON_BOARDING_UPDATE_INFO' : 'ON_BOARDING_IMPORT_INFO')"
+ [name]="'info-circle-o'" [mode]="'primary'"
+ [size]="'medium'"></svg-icon>
+ </span>
+ <span class="row-details-icon">
+ <div>
+ <sdc-button class="import-update-file-btn"
+ [text]="isCsarComponentExists ? 'Update VSP' : 'Import VSP'"
+ [testId]="isCsarComponentExists ? 'update-csar' : 'import-csar'"
+ [type]="'primary'"
+ [icon_name]="isCsarComponentExists ? 'sync-o' : 'alert-triangle-o'"
+ [icon_position]="'left'"
+ [icon_mode] = "'white'"
+ [size] = "'medium'"
+ (click)="importOrUpdateCsar()"
+ [disabled]="checkNotCertified()"
+ >
+ </sdc-button>
+ <svg-icon class="download-file-btn" sdc-tooltip [tooltip-text]="'Download-csar'"
+ [mode]="'primary'" [clickable]="true" [name]="'download-o'"
+ [testId]="'download-csar'" [size]="'medium'" (click)="downloadCsar(row.packageId)">
+ </svg-icon>
+ </div>
+ </span>
+ </div>
+ <sdc-loader [global]="false" [active]="isLoad" [size]="'small'"[relative]="true"></sdc-loader>
+ </ng-template>
+ </ngx-datatable-row-detail>
+ <ngx-datatable-column *ngFor="let column of columns" [ngSwitch]="column.prop" [resizeable]="false" [draggable]="false" name={{column.name}}
+ [flexGrow]="column.flexGrow">
+ <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'name'">
+ <span data-tests-id="csar-row" class="sprite table-arrow" [ngClass]="{'opened': selectedComponent && row.packageId === selectedComponent.packageId}"></span>
+ {{row[column.prop]}}
+ </ng-template>
+ <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'categories'">
+ <span *ngIf="row[column.prop][0]">
+ {{row[column.prop][0].name}}&nbsp;
+ <span *ngIf="row[column.prop][0].subcategories[0]">{{row[column.prop][0].subcategories[0].name}}</span>
+ </span>
+ </ng-template>
+ <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchDefault>
+ {{row[column.prop]}}
+ </ng-template>
+ </ngx-datatable-column>
+ </ngx-datatable>
+</div>
+</div>
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
new file mode 100644
index 0000000000..2e4abda35e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
@@ -0,0 +1,97 @@
+@import "../../../../../assets/styles/variables";
+@import "../../../../../assets/styles/mixins";
+
+
+.onboarding-components-details{
+ display: flex;
+}
+.row-details-description,
+.row-details-metadata1,
+.row-details-metadata2,
+.row-details-metadata3{
+ .th { .m_14_m; }
+ flex-basis: 0;
+ overflow: hidden;
+ padding: 5px 15px;
+ white-space: normal;
+}
+.row-details-description,
+.row-details-metadata3 {
+ border-right: 1px solid @main_color_o;
+}
+
+.row-details-icon {
+ flex-basis: 0;
+ overflow: hidden;
+ padding: 5px 10px;
+ align-self: center;
+}
+
+.row-details-description {
+ flex-grow: 19;
+}
+.row-details-metadata1 {
+ flex-grow: 26.5;
+}
+.row-details-metadata2 {
+ flex-grow: 35;
+ .note {
+ color: @func_color_q;
+ }
+}
+.row-details-metadata3 {
+ flex-grow: 8;
+}
+.info-button{
+ cursor: pointer;
+ float: right;
+}
+.row-details-icon {
+ flex-grow: 18;
+}
+.download-file-btn {
+ cursor: pointer;
+ margin-left: 6px;
+}
+
+.import-update-file-btn {
+ cursor: pointer;
+}
+.sprite.table-arrow{
+ margin-right: 7px;
+}
+.search-wrapper {
+ .sdc-filter-bar-wrapper {
+ flex: 0 0 30%;
+ }
+ .sub-title-wrapper {
+ flex: 0 0 70%;
+ font-size: 15px;
+ line-height: 35px;
+ font-family: OpenSans-Regular, sans-serif;
+ align-items: center;
+ display: inline-flex;
+ .sub-title{
+ padding-left: 5px;
+ }
+ }
+ display: flex;
+ margin-top: 15px;
+ margin-bottom: 10px;
+ }
+
+ :host ::ng-deep {
+ .datatable-row-detail{
+ width: 1120px;
+ }
+ .datatable-body-row {
+ cursor: pointer;
+ }
+ }
+
+
+
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
new file mode 100644
index 0000000000..565398b6ad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
@@ -0,0 +1,122 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import { NO_ERRORS_SCHEMA} from "@angular/core";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+
+import {Observable} from "rxjs/Observable";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {SdcUiServices, SdcUiCommon} from "onap-ui-angular";
+import 'rxjs/add/observable/of';
+import {OnboardingService} from "../../../services/onboarding.service";
+import {TranslateService} from "../../../shared/translator/translate.service";
+import {CacheService} from "../../../services/cache.service";
+import {FileUtilsService} from "../../../services/file-utils.service";
+import {onboardingModalVSPMock, onboardingModalUniqueVSPMock, vspFromServerMock} from "../../../../../jest/mocks/onboarding-vsp.mock";
+import {OnboardingModalComponent} from "./onboarding-modal.component";
+import {TranslatePipe} from "../../../shared/translator/translate.pipe";
+
+describe('onboarding modal component', () => {
+
+ let fixture: ComponentFixture<OnboardingModalComponent>;
+ let onboardingServiceMock: Partial<OnboardingService>;
+ let translateServiceMock: Partial<TranslateService>;
+ let cacheServiceMock: Partial<CacheService>;
+ let fileUtilsServiceMock: Partial<FileUtilsService>;
+ let popoverServiceMock: Partial<SdcUiServices.PopoverService>;
+ let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+
+ beforeEach(
+ async(() => {
+
+ onboardingServiceMock = {
+ getOnboardingComponents: jest.fn().mockImplementation(()=> Observable.of(onboardingModalUniqueVSPMock)),
+ getComponentFromCsarUuid: jest.fn().mockImplementation(()=> Observable.of(vspFromServerMock))
+ };
+
+ cacheServiceMock = {
+ set: jest.fn()
+ };
+
+ loaderServiceMock = {
+ activate: jest.fn(),
+ deactivate: jest.fn()
+ }
+
+
+ const configure: ConfigureFn = testBed => {
+ testBed.configureTestingModule({
+ declarations: [OnboardingModalComponent, TranslatePipe],
+ imports: [NgxDatatableModule],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ { provide: OnboardingService, useValue: onboardingServiceMock },
+ { provide: TranslateService, useValue: translateServiceMock },
+ { provide: CacheService, useValue: cacheServiceMock },
+ { provide: FileUtilsService, useValue: fileUtilsServiceMock },
+ { provide: SdcUiServices.PopoverService, useValue: popoverServiceMock },
+ { provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+ ],
+ });
+ };
+ configureTests(configure).then(testBed => {
+ fixture = testBed.createComponent(OnboardingModalComponent);
+ });
+ })
+ );
+
+ /*it('should match current snapshot of onboarding modal component', () => {
+ expect(fixture).toMatchSnapshot();
+ });*/
+
+ it('should see exactly 2 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+ });
+
+ it('should see exactly 1 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+ fixture.componentInstance.currentCsarUUID = "6348841e79a64871ba064ce340a968a4";
+ fixture.componentInstance.initOnboardingComponentsList();
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+ });
+
+ it('when get a list of vsp initMaxVersionOfItemsInList will return a list with unique items with the latest versions for each packageId', () => {
+ onboardingServiceMock.getOnboardingComponents = jest.fn().mockImplementation(() => Observable.of(onboardingModalVSPMock));
+ fixture.componentInstance.initOnboardingComponentsList();
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+ });
+
+ it('should filter out 1 vsp when searching and call updateFilter function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ let event = {
+ target : {
+ value : 'test new vsp'
+ }
+ }
+
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+ fixture.componentInstance.updateFilter(event);
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+ });
+
+ it('When select the selected vsp the row details closed and call onSelectComponent function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ fixture.componentInstance.onSelectComponent({selected: []});
+ expect(fixture.componentInstance.selectedComponent).toEqual(undefined);
+ expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+ });
+
+ it('When select vsp a row with its details will be opened and call onSelectComponent function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+ expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+ expect(fixture.componentInstance.componentFromServer).not.toEqual(undefined);
+ expect(fixture.componentInstance.isCsarComponentExists).toEqual(true);
+ });
+ it('When select new vsp a row with import and download buttons will be opened and call onSelectComponent function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ onboardingServiceMock.getComponentFromCsarUuid.mockImplementation(() => Observable.of(undefined));
+ fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+ expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+ expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+ expect(fixture.componentInstance.isCsarComponentExists).toEqual(false);
+ });
+});
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
new file mode 100644
index 0000000000..2e41716e0b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
@@ -0,0 +1,193 @@
+/**
+ * Created by rc2122 on 6/3/2018.
+ */
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import * as _ from 'lodash';
+import { SdcUiServices } from 'onap-ui-angular';
+import { ComponentMetadata, IComponentMetadata } from '../../../../models/component-metadata';
+import { IUserProperties } from '../../../../models/user';
+
+import { Resource } from '../../../../models/components/resource';
+import { ComponentType } from '../../../../utils/constants';
+import { CacheService } from '../../../services/cache.service';
+import { FileUtilsService } from '../../../services/file-utils.service';
+import { OnboardingService } from '../../../services/onboarding.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+
+export interface ImportVSPdata {
+ componentCsar: Resource;
+ previousComponent?: Resource;
+ type: string;
+}
+
+// tslint:disable-next-line:interface-name
+export interface IPoint {
+ x: number;
+ y: number;
+}
+
+@Component({
+ selector: 'onboarding-modal',
+ templateUrl: './onboarding-modal.component.html',
+ styleUrls: ['onboarding-modal.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class OnboardingModalComponent implements OnInit {
+ @Input() currentCsarUUID: string;
+ @Input() currentCsarVersion: string;
+ @ViewChild('componentsMetadataTable') table: any;
+ @Output() closeModalEvent: EventEmitter<ImportVSPdata> = new EventEmitter<ImportVSPdata>();
+
+ private columns = [
+ {name: 'Name', prop: 'name', flexGrow: 22},
+ {name: 'Vendor', prop: 'vendorName', flexGrow: 26},
+ {name: 'Category', prop: 'categories', flexGrow: 33},
+ {name: 'Version', prop: 'csarVersion', flexGrow: 10},
+ {name: 'Type', prop: 'resourceType', flexGrow: 10},
+ {name: '#', prop: '', flexGrow: 20}
+ ];
+ private componentsMetadataList: IComponentMetadata[] = [];
+ private temp: IComponentMetadata[] = [];
+ private componentFromServer: ComponentMetadata;
+ private isCsarComponentExists: boolean = false;
+ private selectedComponent: ComponentMetadata;
+ private isLoading: boolean;
+ private user: IUserProperties;
+
+ constructor(private onBoardingService: OnboardingService,
+ private translateService: TranslateService,
+ private cacheService: CacheService,
+ private fileUtilsService: FileUtilsService,
+ private popoverService: SdcUiServices.PopoverService,
+ private loaderService: SdcUiServices.LoaderService) {
+ }
+
+ public ngOnInit(): void {
+ this.initOnboardingComponentsList();
+ this.user = this.cacheService.get('user');
+ }
+
+ initMaxVersionOfItemsInList = (onboardingResponse: IComponentMetadata[]): void => {
+ // Get only the latest version of each item
+ this.componentsMetadataList = [];
+
+ // group all items according to packageId
+ const groupByPackageIdItems = _.groupBy(onboardingResponse, 'packageId');
+ // Loop on all the groups and push to componentsMetadataList the max version for each package
+ _.each(groupByPackageIdItems, (items: any): void => {
+ let maxItem: any = items[0];
+ items.forEach((item) => {
+ if (parseFloat(maxItem.csarVersion) < parseFloat(item.csarVersion)) {
+ maxItem = item;
+ }
+ });
+ if (maxItem) {
+ this.componentsMetadataList.push(maxItem);
+ }
+ });
+ }
+
+ onSelectComponent({selected}) {
+ this.table.rowDetail.collapseAllRows();
+ if (selected[0] === this.selectedComponent) {
+ this.selectedComponent = undefined;
+ this.componentFromServer = undefined;
+ this.table.rowDetail.toggleExpandRow(null);
+ return;
+ }
+ this.isLoading = true;
+ this.componentFromServer = undefined;
+ this.selectedComponent = selected[0];
+ this.onBoardingService.getComponentFromCsarUuid(this.selectedComponent.csarUUID).subscribe(
+ (componentFromServer: ComponentMetadata) => {
+ this.isLoading = false;
+ if (componentFromServer) {
+ this.componentFromServer = componentFromServer;
+ this.populateRowDetails(true);
+ } else {
+ this.populateRowDetails(false);
+ }
+ }, (error) => {
+ this.isLoading = false;
+ this.populateRowDetails(false);
+ });
+ }
+
+ populateRowDetails(isCsarComponentExists: boolean) {
+ this.isCsarComponentExists = isCsarComponentExists;
+ this.table.rowDetail.toggleExpandRow(this.selectedComponent);
+ }
+
+ importOrUpdateCsar = (): void => {
+ const selectedComponentConverted = this.onBoardingService.convertMetaDataToComponent(this.selectedComponent);
+ const componentFromServerConverted = this.componentFromServer ?
+ this.onBoardingService.convertMetaDataToComponent(this.componentFromServer) : undefined;
+ const importVSPdata: ImportVSPdata = {
+ componentCsar: selectedComponentConverted,
+ previousComponent: componentFromServerConverted,
+ type: ComponentType.RESOURCE.toLowerCase()
+ };
+ this.closeModalEvent.emit(importVSPdata);
+ }
+
+ downloadCsar = (packageId: string): void => {
+ this.isLoading = true;
+ this.onBoardingService.downloadOnboardingCsar(packageId).subscribe(
+ (file: any): void => {
+ this.isLoading = false;
+ if (file.body) {
+ this.fileUtilsService.downloadFile(file.body, packageId + '.csar');
+ }
+ }, (): void => {
+ this.isLoading = false;
+ }
+ );
+ }
+
+ updateFilter(event) {
+ const val = event.target.value.toLowerCase();
+
+ // filter our data
+ const temp = this.temp.filter((componentMetadata: ComponentMetadata) => {
+ return !val ||
+ (componentMetadata.name && componentMetadata.name.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.vendorName && componentMetadata.vendorName.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.categories[0] && componentMetadata.categories[0].name.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.categories[0] && componentMetadata.categories[0].subcategories[0] && componentMetadata.categories[0].subcategories[0].name.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.csarVersion && componentMetadata.csarVersion.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.description && componentMetadata.description.toLowerCase().indexOf(val) !== -1);
+ });
+
+ // update the rows
+ this.componentsMetadataList = temp;
+ }
+
+ checkNotCertified = (): boolean => {
+ return this.componentFromServer && this.componentFromServer.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' &&
+ this.componentFromServer.lastUpdaterUserId !== this.user.userId;
+ }
+
+ openPopover = ($event: any, popoverContent): void => {
+ this.popoverService.createPopOver('', this.translateService.translate(popoverContent), {
+ x: $event.pageX,
+ y: $event.pageY
+ }, 'bottom');
+ }
+
+ private initOnboardingComponentsList = (): void => {
+ this.loaderService.activate();
+ this.onBoardingService.getOnboardingComponents().subscribe(
+ (onboardingResponse: IComponentMetadata[]) => {
+ this.loaderService.deactivate();
+ if (this.currentCsarUUID) {
+ onboardingResponse = _.filter(onboardingResponse, (input): boolean => {
+ return (input as ComponentMetadata).csarUUID === this.currentCsarUUID;
+ });
+ }
+ this.initMaxVersionOfItemsInList(onboardingResponse);
+ this.temp = [...this.componentsMetadataList];
+ }, (error) => {
+ this.loaderService.deactivate();
+ }
+ );
+ }
+}