diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/home')
7 files changed, 994 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap new file mode 100644 index 0000000000..ae5445e546 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`home component should match current snapshot 1`] = ` +<home-page + $state={[Function Object]} + authService={[Function Object]} + cacheService={[Function Object]} + componentShouldReload={[Function Function]} + homeService={[Function Object]} + importVSPService={[Function Object]} + initFolders={[Function Function]} + isDefaultFilter={[Function Function]} + loaderService={[Function Object]} + modalService={[Function Object]} + modalsHandler={[Function Object]} + sdcConfig={[Function Object]} + sdcMenu={[Function Object]} + translateService={[Function Object]} + updateFilter={[Function Function]} +> + <div + class="sdc-catalog-container" + > + + <top-nav /> + </div> +</home-page> +`; diff --git a/catalog-ui/src/app/ng2/pages/home/folders.ts b/catalog-ui/src/app/ng2/pages/home/folders.ts new file mode 100644 index 0000000000..036ae329b7 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/home/folders.ts @@ -0,0 +1,93 @@ + +export interface IItemMenu { + +} + +export interface IMenuItemProperties { + text:string; + group:string; + state:string; + dist:string; + groupname:string; + states:Array<any>; +} + +export class FoldersMenu { + private _folders:Array<FoldersItemsMenu> = []; + + constructor(folders:Array<IMenuItemProperties>) { + let self = this; + folders.forEach(function (folder:IMenuItemProperties) { + if (folder.groupname) { + self._folders.push(new FoldersItemsMenuGroup(folder)); + } else { + self._folders.push(new FoldersItemsMenu(folder)); + } + }); + self._folders[0].setSelected(true); + } + + public getFolders():Array<FoldersItemsMenu> { + return this._folders; + } + + public getCurrentFolder():FoldersItemsMenu { + let menuItem:FoldersItemsMenu = undefined; + this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) { + if (tmpFolder.isSelected()) { + menuItem = tmpFolder; + } + }); + return menuItem; + } + + public setSelected(folder:FoldersItemsMenu):void { + this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) { + tmpFolder.setSelected(false); + }); + folder.setSelected(true); + } +} + +export class FoldersItemsMenu implements IItemMenu { + public text:string; + public group:string; + public state:string; + public dist:string; + public states:Array<any>; + + private selected:boolean = false; + + constructor(menuProperties:IMenuItemProperties) { + this.text = menuProperties.text; + this.group = menuProperties.group; + this.state = menuProperties.state; + this.states = menuProperties.states; + this.dist = menuProperties.dist; + } + + public isSelected():boolean { + return this.selected; + } + + public setSelected(value:boolean):void { + this.selected = value; + } + + public isGroup():boolean { + return false; + } +} + +export class FoldersItemsMenuGroup extends FoldersItemsMenu { + public groupname:string; + + constructor(menuProperties:IMenuItemProperties) { + super(menuProperties); + this.groupname = menuProperties.groupname; + } + + public isGroup():boolean { + return true; + } +} diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.html b/catalog-ui/src/app/ng2/pages/home/home.component.html new file mode 100644 index 0000000000..1c8c2b4373 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/home/home.component.html @@ -0,0 +1,88 @@ +<div class="sdc-catalog-container"> + <div class="w-sdc-main-container" *ngIf="user"> + + <div id="dashboard-main-scroll" infiniteScroll class="w-sdc-main-right-container" (infiniteScroll)="raiseNumberOfElementToDisplay()" [infiniteScrollDistance]="100"> + + <div class='w-sdc-row-flex-items'> + + <!-- ADD Component --> + <div *ngIf="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" + (mouseleave)="setDisplayActions(false)" + (mouseover)="setDisplayActions(true)"> + <div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea"> + <div class="w-sdc-dashboard-card-new-content-plus" [hidden]="displayActions"></div> + <div class="sdc-dashboard-create-element-container" [hidden]="!displayActions"> + <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createResourceButton" size="medium" type="secondary" text="Add VF" (click)="openCreateModal('RESOURCE')"></sdc-button> + <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createCRButton" size="medium" type="secondary" text="Add CR" (click)="createCR()"></sdc-button> + <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createPNFButton" size="medium" type="secondary" text="Add PNF" (click)="createPNF()"></sdc-button> + <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="createServiceButton" size="medium" type="secondary" text="Add Service" (click)="openCreateModal('SERVICE')"></sdc-button> + </div> + </div> + </div> + + <!-- Import Component --> + <div *ngIf="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" + (mouseleave)="setDisplayActions(false)" + (mouseover)="setDisplayActions(true)"> + <div class="w-sdc-dashboard-card-new-content" data-tests-id="importButtonsArea" > + <div class="w-sdc-dashboard-card-import-content-plus" [hidden]="displayActions"></div> + <div class="sdc-dashboard-import-element-container" [hidden]="!displayActions"> + <sdc-button-file-opener + *ngIf="roles[user.role].dashboard.showCreateNew" + size="medium" + type="secondary" + text="Import VFC" + testId="importVFCbutton" + [extensions]="sdcConfig.toscaFileExtension" + (fileUpload)="onImportVfc($event)" + [convertToBase64]="true" + ></sdc-button-file-opener> + <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" data-tests-id="importButtonsVSP" size="medium" type="secondary" text="Import VSP" (click)="notificationIconCallback()"></sdc-button> + <sdc-button-file-opener + *ngIf="roles[user.role].dashboard.showCreateNew" + size="medium" + type="secondary" + text="Import DCAE" + testId="importDCAE" + [extensions]="sdcConfig.csarFileExtension" + (fileUpload)="onImportVf($event)" + [convertToBase64]="true" + ></sdc-button-file-opener> + </div> + </div> + </div> + + <!-- Tile new --> + <ui-tile *ngFor="let item of homeFilteredSlicedItems" + [component]="item" (onTileClick)="goToComponent(item)"></ui-tile> + <!-- Tile new --> + + </div> + + </div> + + <div class="w-sdc-left-sidebar"> + <div class="i-sdc-left-sidebar-item " + *ngFor="let folder of folders.getFolders()" + [ngClass]="{'category-title': folder.isGroup(), 'selectedLink': folder.isSelected()}"> + + <span *ngIf="folder.isGroup()" class="title-text">{{folder.text}}</span> + <sdc-checkbox *ngIf="!folder.isGroup() && !folder.dist" + [label]="folder.text" + [attr.data-tests-id]="'filter-' + folder.state" + [checked]="homeFilter.selectedStatuses.indexOf(folder.state) !== -1" + (checkedChange)="changeCheckboxesFilter(homeFilter.selectedStatuses, folder.state, $event)"></sdc-checkbox> + + <sdc-checkbox *ngIf="!folder.isGroup() && folder.dist" + [label]="folder.text" + [checked]="homeFilter.distributed.indexOf(folder.dist) !== -1" + (checkedChange)="changeCheckboxesFilter(homeFilter.distributed, folder.dist, $event)"></sdc-checkbox> + <span class="i-sdc-left-sidebar-item-state-count" [attr.data-tests-id]="'count-' + folder.state">{{entitiesCount(folder)}}</span> + </div> + </div> + + </div> + + <top-nav [topLvlSelectedIndex]="0" [version]="version" [searchTerm]="homeFilter.search.filterTerm" (searchTermChange)="changeFilterTerm($event)" [notificationIconCallback]="notificationIconCallback"></top-nav> + +</div> diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.less b/catalog-ui/src/app/ng2/pages/home/home.component.less new file mode 100644 index 0000000000..c5b73748ba --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/home/home.component.less @@ -0,0 +1,126 @@ +@import '../../../../assets/styles/mixins_old'; +@import '../../../../assets/styles/sprite'; +.w-sdc-left-sidebar-nav { + margin-top: 46px; +} + +.w-sdc-main-right-container { + height: 100%; + overflow-y: scroll; +} + +.w-sdc-main-right-container-element { + float: left; + height: 217px; + width: 217px; + margin: 10px; + position: relative; +} + +.w-sdc-main-right-container-element-details-container { + position: absolute; + top: 165px; + left: 50px; +} + +.w-sdc-main-right-container-element-name { + font-weight: bold; +} + +.i-sdc-left-sidebar-item{ + display: flex; + &.category-title .title-text, sdc-checkbox{ + flex-grow: 1; + } + &:not(.category-title).i-sdc-left-sidebar-item-state-count { + line-height: 14px; + } +} + + +//////////////////////////////Cards//////////////////// +.w-sdc-dashboard-card-new { + border: 2px dashed @color_m; + .border-radius(2px); + cursor: pointer; + display: inline-block; + height: 198px; + margin: 11px; + position: relative; + vertical-align: middle; + width: 202px; +} + +.w-sdc-dashboard-card-new-content { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100%; +} + +.w-sdc-dashboard-card-new-content-plus { + .sprite-new; + .add-icon; + position: relative; + margin-bottom: 20px; + + &:after { + .n_14_m; + content: 'ADD'; + position: absolute; + top: 25px; + left: -3px; + vertical-align: -50%; + } +} + +.w-sdc-dashboard-card-import-content-plus { + .sprite-new; + .import-icon; + position: relative; + margin-bottom: 20px; + + &:after { + .n_14_m; + content: 'IMPORT'; + position: absolute; + top: 25px; + left: -16px; + vertical-align: -50%; + } +} + +.sdc-dashboard-create-element-container, +.sdc-dashboard-import-element-container { + + width: 140px; + + sdc-button, + sdc-button-file-opener { + padding-bottom: 5px; + &:last-child{ + padding-bottom: 0; + } + } + + .import-file{ + position: relative; + file-opener{ + position: absolute; + top: 0; + /deep/ input[type="file"] { + .hand; + filter: alpha(opacity=0); + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 140px; + height: 36px; + } + } + } +} + + diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts b/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts new file mode 100644 index 0000000000..df854024fa --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts @@ -0,0 +1,270 @@ + +import { SdcConfigToken, ISdcConfig } from "../../config/sdc-config.config"; +import { SdcMenuToken, IAppMenu } from "../../config/sdc-menu.config"; + + +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; +import { HomeComponent } from "./home.component"; +import {ConfigureFn, configureTests} from "../../../../jest/test-config.helper"; +import {NO_ERRORS_SCHEMA} from "@angular/core"; +import { TranslateService } from "../../shared/translator/translate.service"; +import { HomeService, CacheService, AuthenticationService, ImportVSPService } from '../../../../app/services-ng2'; +import { ModalsHandler } from "../../../../app/utils"; +import { SdcUiServices } from "onap-ui-angular"; +import {ComponentType, ResourceType} from "../../../utils/constants"; +import { FoldersMenu, FoldersItemsMenu, FoldersItemsMenuGroup } from './folders'; +import { HomeFilter } from "../../../../app/models/home-filter"; +import {Component} from "../../../models/components/component"; + + + + +describe('home component', () => { + + // const mockedEvent = <MouseEvent>{ target: {} } + let fixture: ComponentFixture<HomeComponent>; + // let eventServiceMock: Partial<EventListenerService>; + + let importVspService: Partial<ImportVSPService>; + let mockStateService; + let modalServiceMock :Partial<SdcUiServices.ModalService>; + let translateServiceMock : Partial<TranslateService>; + let foldersItemsMenuMock; + let homeFilterMock :Partial<HomeFilter>; + let foldersMock; + let loaderServiceMock; + + + beforeEach( + async(() => { + modalServiceMock = { + openWarningModal: jest.fn() + } + + mockStateService = { + // go: jest.fn().mockReturnValue( new Promise.resolve((resolve, reject )=> resolve())) + go: jest.fn() + } + + translateServiceMock = { + translate: jest.fn() + } + + homeFilterMock = { + search: jest.fn, + toUrlParam: jest.fn() + } + + foldersMock = { + setSelected: jest.fn() + } + + loaderServiceMock = { + activate: jest.fn(), + deactivate: jest.fn() + } + + const configure: ConfigureFn = testBed => { + testBed.configureTestingModule({ + declarations: [HomeComponent], + imports: [], + schemas: [NO_ERRORS_SCHEMA], + providers: [ + {provide: SdcConfigToken, useValue: {"csarFileExtension":"csar", "toscaFileExtension":"yaml,yml"}}, + {provide: SdcMenuToken, useValue: {}}, + {provide: "$state", useValue: mockStateService}, + {provide: HomeService, useValue: {}}, + {provide: AuthenticationService, useValue: {}}, + {provide: CacheService, useValue: {}}, + {provide: TranslateService, useValue: translateServiceMock}, + {provide: ModalsHandler, useValue: {}}, + {provide: SdcUiServices.ModalService, useValue: modalServiceMock}, + {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock}, + {provide: ImportVSPService, useValue: {}} + ], + }); + }; + + configureTests(configure).then(testBed => { + fixture = testBed.createComponent(HomeComponent); + }); + }) + ); + + + it('should match current snapshot', () => { + expect(fixture).toMatchSnapshot(); + }); + + it('should call on home component openCreateModal with null imported file', () => { + const component = TestBed.createComponent(HomeComponent); + let componentType:string = 'test'; + let importedFile:any = null; + component.componentInstance.openCreateModal(componentType, importedFile); + expect(mockStateService.go).toBeCalledWith('workspace.general', {type: componentType.toLowerCase()}); + }); + + + it('should call on home component openCreateModal with imported file', () => { + const component = TestBed.createComponent(HomeComponent); + component.componentInstance.initEntities = jest.fn(); + let componentType:string = 'test'; + let importedFile:any = 'importedFile'; + component.componentInstance.openCreateModal(componentType, importedFile); + expect(component.componentInstance.initEntities).toBeCalledWith(true); + }); + + + it ('should call on home component onImportVf without file without extension', () => { + const component = TestBed.createComponent(HomeComponent); + let file:any = {filename : 'test'}; + let expectedTitle:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS_TITLE"); + let expectedMessage:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS", {"csarFileExtension":"csar"}); + component.componentInstance.onImportVf(file); + expect(modalServiceMock.openWarningModal).toBeCalledWith(expectedTitle, expectedMessage , 'error-invalid-csar-ext'); + }); + + + it ('should call on home component onImportVf with file without extension' , () => { + const component = TestBed.createComponent(HomeComponent); + let file:any = {filename : 'test.csar'}; + component.componentInstance.onImportVf(file); + expect(mockStateService.go).toBeCalledWith('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + importedFile: file, + resourceType: ResourceType.VF + }); + }); + + + it ('should call on home component onImportVfc without file without extension', () => { + const component = TestBed.createComponent(HomeComponent); + let file:any = {filename : 'test'}; + let expectedTitle:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE"); + let expectedMessage:string = translateServiceMock.translate("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS", {"toscaFileExtension":"yaml,yml"}); + component.componentInstance.onImportVfc(file); + expect(modalServiceMock.openWarningModal).toBeCalledWith(expectedTitle, expectedMessage , 'error-invalid-tosca-ext'); + }); + + it ('should call on home component onImportVfc with file without extension' , () => { + const component = TestBed.createComponent(HomeComponent); + let file:any = {filename : 'test.yml'}; + component.componentInstance.onImportVfc(file); + expect(mockStateService.go).toBeCalledWith('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + importedFile: file, + resourceType: ResourceType.VFC + }); + }); + + it ('should call on home component createPNF' , () => { + const component = TestBed.createComponent(HomeComponent); + component.componentInstance.createPNF(); + expect(mockStateService.go).toBeCalledWith('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + resourceType: ResourceType.PNF + }); + }); + + it ('should call on home component createCR' , () => { + const component = TestBed.createComponent(HomeComponent); + component.componentInstance.createCR(); + expect(mockStateService.go).toBeCalledWith('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + resourceType: ResourceType.CR + }); + }); + + + it ('should call on home component updateFilter' , () => { + const component = TestBed.createComponent(HomeComponent); + component.componentInstance.homeFilter = homeFilterMock; + component.componentInstance.filterHomeItems = jest.fn(); + component.componentInstance.updateFilter(); + + expect(mockStateService.go).toBeCalledWith('.', homeFilterMock.toUrlParam(), {location: 'replace', notify: false}); + // expect(spy).toHaveBeenCalledTimes(1); + + // let spy = spyOn(homeFilterMock, 'toUrlParam').and.returnValue({ + // 'filter.term': '', + // 'filter.distributed': '', + // 'filter.status':'' + // }); + }); + + // it ('should call on home component setSelectedFolder' , () => { + // const component = TestBed.createComponent(HomeComponent); + // let folderItem:Partial<FoldersItemsMenu> = { text:'someThing'}; + // let folderItem1:number; + // component.componentInstance.folders = foldersMock; + // expect(foldersMock.setSelected).toBeCalledWith(folderItem); + // }); + + // it ('should call on home component goToComponent' , () => { + // const component = TestBed.createComponent(HomeComponent); + // let componentParam:Partial<Component> = { uuid:'someThing', uniqueId:'uniqueID', componentType:'componentType'}; + // component.componentInstance.goToComponent(componentParam); + // expect(loaderServiceMock.activate).toHaveBeenCalled(); + // // expect(mockStateService.go).toBeCalledWith('workspace.general', {id: componentParam.uniqueId, type: componentParam.componentType.toLowerCase()}).then(function(){ + // // loaderServiceMock.deactivate(); + // // }); + // expect(mockStateService.go).toBeCalled(); + // }); + + // it ('should call on home component raiseNumberOfElementToDisplay so numberOfItemToDisplay will be 0' , () => { + // const component = TestBed.createComponent(HomeComponent); + // component.componentInstance.raiseNumberOfElementToDisplay(); + // expect(component.componentInstance.numberOfItemToDisplay).toEqual(0); + // }); + // + // it ('should call on home component raiseNumberOfElementToDisplay with min(2,70) so numberOfItemToDisplay will be 2' , () => { + // const component = TestBed.createComponent(HomeComponent); + // component.componentInstance.homeItems = ['item1', 'item2']; + // component.componentInstance.numberOfItemToDisplay = 70; + // component.componentInstance.raiseNumberOfElementToDisplay(true); + // expect(component.componentInstance.numberOfItemToDisplay).toEqual(2); + // }); + // + // it ('should call on home component raiseNumberOfElementToDisplay with min(3,35) so numberOfItemToDisplay will be 2 after fullPagesAmount is calculated' , () => { + // const component = TestBed.createComponent(HomeComponent); + // component.componentInstance.homeItems = ['item1', 'item2', 'item3']; + // component.componentInstance.numberOfItemToDisplay = 70; + // component.componentInstance.numberOfItemToDisplay = 0; + // component.componentInstance.raiseNumberOfElementToDisplay(false); + // expect(component.componentInstance.numberOfItemToDisplay).toEqual(3); + // }); + // + // + // it ('should call on home component changeFilterTerm' , () => { + // const component = TestBed.createComponent(HomeComponent); + // component.componentInstance.changeFilterTerm("testStr"); + // // expect ( "testStr" ).toEqual(homeFilterMock.search.) + // }); + + + + + + + // it ('should call on home component entitiesCount' , () => { + // const component = TestBed.createComponent(HomeComponent); + // component.componentInstance.entitiesCount("aaa"); + // expect(mockStateService.go).toBeCalledWith('workspace.general', { + // type: ComponentType.RESOURCE.toLowerCase(), + // resourceType: ResourceType.CR + // }); + // }); + + + // it('should call on home component notificationIconCallback', () => { + // const component = TestBed.createComponent(HomeComponent); + // component.componentInstance.initEntities = jest.fn(); + // component.componentInstance.notificationIconCallback(); + // expect(mockStateService.go).toBeCalledWith('workspace.general', {}); + // }); + + + + + +});
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.ts b/catalog-ui/src/app/ng2/pages/home/home.component.ts new file mode 100644 index 0000000000..1b69eba929 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/home/home.component.ts @@ -0,0 +1,358 @@ +/*- + * ============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========================================================= + */ +'use strict'; +import { Component as NgComponent, Inject, OnInit } from '@angular/core'; +import { Component, IConfigRoles, IUserProperties, Resource } from 'app/models'; +import { HomeFilter } from 'app/models/home-filter'; +import { AuthenticationService, CacheService, HomeService } from 'app/services-ng2'; +import { ModalsHandler } from 'app/utils'; +import { SdcUiServices } from 'onap-ui-angular'; +import { CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, ResourceType } from '../../../utils/constants'; +import { ImportVSPService } from '../../components/modals/onboarding-modal/import-vsp.service'; +import { ISdcConfig, SdcConfigToken } from '../../config/sdc-config.config'; +import { IAppMenu, SdcMenuToken } from '../../config/sdc-menu.config'; +import { EntityFilterPipe } from '../../pipes/entity-filter.pipe'; +import { TranslateService } from '../../shared/translator/translate.service'; +import { FoldersItemsMenu, FoldersItemsMenuGroup, FoldersMenu } from './folders'; + +@NgComponent({ + selector: 'home-page', + templateUrl: './home.component.html', + styleUrls: ['./home.component.less'] +}) +export class HomeComponent implements OnInit { + public numberOfItemToDisplay: number; + public homeItems: Component[]; + public homeFilteredItems: Component[]; + public homeFilteredSlicedItems: Component[]; + public folders: FoldersMenu; + public roles: IConfigRoles; + public user: IUserProperties; + public showTutorial: boolean; + public isFirstTime: boolean; + public version: string; + public homeFilter: HomeFilter; + public vfcmtType: string; + public displayActions: boolean; + + constructor( + @Inject(SdcConfigToken) private sdcConfig: ISdcConfig, + @Inject(SdcMenuToken) public sdcMenu: IAppMenu, + @Inject('$state') private $state: ng.ui.IStateService, + private homeService: HomeService, + private authService: AuthenticationService, + private cacheService: CacheService, + private translateService: TranslateService, + private modalsHandler: ModalsHandler, + private modalService: SdcUiServices.ModalService, + private loaderService: SdcUiServices.LoaderService, + private importVSPService: ImportVSPService + ) {} + + ngOnInit(): void { + this.initHomeComponentVars(); + this.initFolders(); + this.initEntities(); + + if (this.$state.params) { + if (this.$state.params.folder) { + const folderName = this.$state.params.folder.replaceAll('_', ' '); + + const selectedFolder = this.folders.getFolders().find((tmpFolder: FoldersItemsMenu) => tmpFolder.text === folderName); + if (selectedFolder) { + this.setSelectedFolder(selectedFolder); + } + // Show the tutorial if needed when the dashboard page is opened.<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script> + // This is called from the welcome page. + } else if (this.$state.params.show === 'tutorial') { + this.showTutorial = true; + this.isFirstTime = true; + } + } + } + + // Open onboarding modal + public notificationIconCallback(): void { + this.importVSPService.openOnboardingModal().subscribe((result) => { + if (!result.previousComponent || result.previousComponent.csarVersion !== result.componentCsar.csarVersion) { + this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, result.componentCsar.csarVersion); + } + this.$state.go('workspace.general', { + id: result.previousComponent && result.previousComponent.uniqueId, + componentCsar: result.componentCsar, + type: result.type + }); + }); + } + + public onImportVf(file: any): void { + if (file && file.filename) { + // Check that the file has valid extension. + const fileExtension: string = file.filename.split('.').pop(); + if (this.sdcConfig.csarFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) { + this.$state.go('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + importedFile: file, + resourceType: ResourceType.VF + }); + } else { + const title: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS_TITLE'); + const message: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS', {extensions: this.sdcConfig.csarFileExtension}); + this.modalService.openWarningModal(title, message, 'error-invalid-csar-ext'); + } + } + } + + public onImportVfc(file: any): void { + if (file && file.filename) { + // Check that the file has valid extension. + const fileExtension: string = file.filename.split('.').pop(); + if (this.sdcConfig.toscaFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) { + this.$state.go('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + importedFile: file, + resourceType: ResourceType.VFC + }); + } else { + const title: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE'); + const message: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS', {extensions: this.sdcConfig.toscaFileExtension}); + this.modalService.openWarningModal(title, message, 'error-invalid-tosca-ext'); + } + } + } + + public openCreateModal(componentType: string, importedFile: any): void { + if (importedFile) { + this.initEntities(true); // Return from import + } else { + this.$state.go('workspace.general', {type: componentType.toLowerCase()}); + } + } + + public createPNF(): void { + this.$state.go('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + resourceType: ResourceType.PNF + }); + } + + public createCR(): void { + this.$state.go('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + resourceType: ResourceType.CR + }); + } + + public entitiesCount(folderItem: FoldersItemsMenu): any { + let total: number = 0; + if (folderItem.isGroup()) { + this.folders.getFolders().forEach((tmpFolder: FoldersItemsMenu) => { + if (tmpFolder.group && tmpFolder.group === (folderItem as FoldersItemsMenuGroup).groupname) { + total = total + this._getTotalCounts(tmpFolder); + } + }); + } else { + total = total + this._getTotalCounts(folderItem); + } + return total; + } + + public updateFilter = () => { + this.$state.go('.', this.homeFilter.toUrlParam(), {location: 'replace', notify: false}); + this.filterHomeItems(); + } + + public getCurrentFolderDistributed(): any[] { + const states = []; + if (this.folders) { + const folderItem: FoldersItemsMenu = this.folders.getCurrentFolder(); + if (folderItem.isGroup()) { + this.folders.getFolders().forEach((tmpFolder: FoldersItemsMenu) => { + if (tmpFolder.group && tmpFolder.group === (folderItem as FoldersItemsMenuGroup).groupname) { + this._setStates(tmpFolder, states); + } + }); + } else { + this._setStates(folderItem, states); + } + } + return states; + } + + public setSelectedFolder(folderItem: FoldersItemsMenu): void { + this.folders.setSelected(folderItem); + } + + public goToComponent(component: Component): void { + const loaderService = this.loaderService; + loaderService.activate(); + this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()}).then(() => { + loaderService.deactivate(); + }); + } + + public raiseNumberOfElementToDisplay(recalculate: boolean = false) { + const scrollPageAmount = 35; + if (!this.homeItems) { + this.numberOfItemToDisplay = 0; + } else if (this.homeItems.length > this.numberOfItemToDisplay || recalculate) { + let fullPagesAmount = Math.ceil(this.numberOfItemToDisplay / scrollPageAmount) * scrollPageAmount; + if (!recalculate || fullPagesAmount === 0) { // TODO trigger infiniteScroll to check bottom and fire onBottomHit by itself (sdc-ui) + fullPagesAmount += scrollPageAmount; + } + this.numberOfItemToDisplay = Math.min(this.homeItems.length, fullPagesAmount); + this.homeFilteredSlicedItems = this.homeFilteredItems.slice(0, this.numberOfItemToDisplay); + } + } + + public changeCheckboxesFilter(checkboxesFilterArray: string[], checkboxValue: string, checked?: boolean) { + const checkboxIdx = checkboxesFilterArray.indexOf(checkboxValue); + + checked = (checked !== undefined) ? checked : checkboxIdx === -1; + if (checked && checkboxIdx === -1) { + checkboxesFilterArray.push(checkboxValue); + } else if (!checked && checkboxIdx !== -1) { + checkboxesFilterArray.splice(checkboxIdx, 1); + } + this.updateFilter(); + } + + public changeFilterTerm(filterTerm: string): void { + this.homeFilter.search = { filterTerm }; + this.updateFilter(); + } + + public setDisplayActions(display?: boolean) { + this.displayActions = display !== undefined ? display : !this.displayActions; + } + + private _getTotalCounts(tmpFolder): number { + let total: number = 0; + if (tmpFolder.dist !== undefined) { + const distributions = tmpFolder.dist.split(','); + distributions.forEach((item: any) => { + total = total + this.getEntitiesByStateDist(tmpFolder.state, item).length; + }); + } else { + total = total + this.getEntitiesByStateDist(tmpFolder.state, tmpFolder.dist).length; + } + return total; + } + + private _setStates(tmpFolder, states) { + if (tmpFolder.states !== undefined) { + tmpFolder.states.forEach((item: any) => { + states.push({state: item.state, dist: item.dist}); + }); + } else { + states.push({state: tmpFolder.state, dist: tmpFolder.dist}); + } + } + + private initEntities(reload?: boolean) { + if (reload || this.componentShouldReload()) { + this.loaderService.activate(); + this.homeService.getAllComponents(true).subscribe( + (components: Component[]) => { + this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name); // dashboard + this.cacheService.set('breadcrumbsComponents', components); + this.homeItems = components; + this.loaderService.deactivate(); + this.filterHomeItems(); + }, (error) => { this.loaderService.deactivate(); }); + } else { + this.homeItems = this.cacheService.get('breadcrumbsComponents'); + this.filterHomeItems(); + } + } + + private isDefaultFilter = (): boolean => { + const defaultFilter = new HomeFilter(); + return angular.equals(defaultFilter, this.homeFilter); + } + + private componentShouldReload = (): boolean => { + const breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents')); + return !breadcrumbsValid || this.isDefaultFilter(); + } + + private getEntitiesByStateDist(state: string, dist: string): Component[] { + let gObj: Component[]; + if (this.homeItems && (state || dist)) { + gObj = this.homeItems.filter((obj: Component) => { + if (dist !== undefined && obj.distributionStatus === dist && obj.lifecycleState === state) { + return true; + } else if (dist === undefined && (obj.lifecycleState === state || obj.distributionStatus === state)) { + return true; + } + return false; + }); + } else { + gObj = []; + } + return gObj; + } + + private filterHomeItems() { + this.homeFilteredItems = this.makeFilteredItems(this.homeItems, this.homeFilter); + this.raiseNumberOfElementToDisplay(true); + this.homeFilteredSlicedItems = this.homeFilteredItems.slice(0, this.numberOfItemToDisplay); + } + + private makeFilteredItems(homeItems: Component[], filter: HomeFilter) { + let filteredComponents: Component[] = homeItems; + + // filter: exclude all resources of type 'vfcmtType': + filteredComponents = filteredComponents.filter((c) => + !c.isResource() || (c as Resource).resourceType.indexOf(this.vfcmtType) === -1); + + // common entity filter + // -------------------------------------------------------------------------- + filteredComponents = EntityFilterPipe.transform(filteredComponents, filter); + + return filteredComponents; + } + + private initFolders = (): void => { + // Note: Do not use SdcUi.ChecklistComponent for folders checkboxes, since from the data structure + // it is not determined that all checkboxes under the same group are managed by the same selectedValues array. + if (this.user) { + this.folders = new FoldersMenu(this.roles[this.user.role].folder); + } + } + + private initHomeComponentVars(): void { + this.version = this.cacheService.get('version'); + this.numberOfItemToDisplay = 0; + this.displayActions = false; + this.user = this.authService.getLoggedinUser(); + this.roles = this.sdcMenu.roles; + this.showTutorial = false; + this.isFirstTime = false; + this.vfcmtType = ResourceType.VFCMT; + + // Checkboxes filter init + this.homeFilter = new HomeFilter(this.$state.params); + + // bind callbacks that are transferred as inputs + this.notificationIconCallback = this.notificationIconCallback.bind(this); + } + +} diff --git a/catalog-ui/src/app/ng2/pages/home/home.module.ts b/catalog-ui/src/app/ng2/pages/home/home.module.ts new file mode 100644 index 0000000000..3e7c0cd312 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/home/home.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { HomeComponent } from "./home.component"; +import { LayoutModule } from "../../components/layout/layout.module"; +import { UiElementsModule } from "../../components/ui/ui-elements.module"; +import { GlobalPipesModule } from "../../pipes/global-pipes.module"; +import { TranslateModule } from "../../shared/translator/translate.module"; +import { SdcUiComponentsModule } from "onap-ui-angular"; + +@NgModule({ + declarations: [ + HomeComponent + ], + imports: [ + CommonModule, + SdcUiComponentsModule, + LayoutModule, + UiElementsModule, + GlobalPipesModule, + TranslateModule + ], + exports: [ + HomeComponent + ], + entryComponents: [ + HomeComponent + ], + providers: [] +}) +export class HomeModule { +} |