diff options
7 files changed, 186 insertions, 21 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts index 8e0a66c8f5..3209b0fdb9 100644 --- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts +++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts @@ -42,6 +42,7 @@ import {SdcTileModule} from "./tile/sdc-tile.module"; import {PerfectScrollbarDirective} from "./perfect-scroll-bar/perfect-scrollbar.directive"; import {FileOpenerComponent} from "./file-opener/file-opener.component"; import {DownloadArtifactComponent} from "app/ng2/components/ui/download-artifact/download-artifact.component"; +import {UploadArtifactComponent} from "app/ng2/components/ui/upload-artifact/upload-artifact.component"; import {SdcElementIconComponent} from "./sdc-element-icon/sdc-element-icon.component"; import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component"; import { ModalImportTypeComponent } from './modal-import-type/modal-import-type.component'; @@ -57,6 +58,7 @@ import { ModalImportTypeComponent } from './modal-import-type/modal-import-type. FileOpenerComponent, SdcElementIconComponent, DownloadArtifactComponent, + UploadArtifactComponent, PanelWrapperComponent, ModalImportTypeComponent ], @@ -99,6 +101,7 @@ import { ModalImportTypeComponent } from './modal-import-type/modal-import-type. SdcElementIconComponent, FileOpenerComponent, DownloadArtifactComponent, + UploadArtifactComponent, PanelWrapperComponent, ModalImportTypeComponent ], diff --git a/catalog-ui/src/app/ng2/components/ui/upload-artifact/upload-artifact.component.ts b/catalog-ui/src/app/ng2/components/ui/upload-artifact/upload-artifact.component.ts new file mode 100644 index 0000000000..ece47e71df --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/upload-artifact/upload-artifact.component.ts @@ -0,0 +1,92 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2023 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import { Component, EventEmitter, Input, Output } from "@angular/core"; +import { ArtifactModel } from "app/models"; +import { TranslateService } from '../../../shared/translator/translate.service'; +import { SdcUiServices } from 'onap-ui-angular'; + +@Component({ + selector: 'upload-artifact', + template: ` + <svg-icon + [mode]="'primary2'" + [disabled]="disabled" + [clickable]="!disabled" + [name]="iconType" + [testId]="testId" mode="info" + (click)="fileUpload.click()" + clickable="true" + size="medium" + ></svg-icon> + <input + type="file" + style="display: none;" + [disabled]="disabled" + (change)="onFileSelect($event)" + [accept]="extensionsWithDot" + #fileUpload> +` +}) +export class UploadArtifactComponent { + + @Input() extensions: string; + @Input() artifact: ArtifactModel; + @Input() isInstance: boolean; + @Input() uploadIconClass: string; + @Input() componentType: string; + @Input() componentId: string; + @Input() testId: string; + @Input() disabled: boolean; + @Output("onFileUpload") onFileUpload: EventEmitter<any> = new EventEmitter<any>(); + + public extensionsWithDot: string; + public iconType:string = "upload-o"; + + constructor( + private modalService: SdcUiServices.ModalService, + private translateService: TranslateService) { + + } + + ngOnInit () { + this.extensionsWithDot = this.getExtensionsWithDot(this.extensions); + } + + public getExtensionsWithDot(extensions:string):string { + extensions = extensions || ''; + return extensions.split(',') + .map(ext => '.' + ext.toString()) + .join(','); + } + + public onFileSelect(event) { + const file = event.target.files[0]; + if (file && file.name) { + const fileExtension: string = file.name.split('.').pop(); + if (this.extensionsWithDot.includes(fileExtension.toLowerCase())) { + this.onFileUpload.emit(file); + } 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.extensionsWithDot}); + this.modalService.openWarningModal(title, message, 'error-invalid-tosca-ext'); + } + } + } +} diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap index 14146d51d2..695e16d553 100644 --- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap +++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap @@ -2,7 +2,9 @@ exports[`tosca artifacts page should match current snapshot of tosca artifact pages component 1`] = ` <tosca-artifact-page - serviceLoader={[Function Object]} + Notification="undefined" + componentService={[Function Object]} + isLoading="false" store={[Function Store]} table={[Function DatatableComponent]} workspaceService={[Function Object]} @@ -10,6 +12,7 @@ exports[`tosca artifacts page should match current snapshot of tosca artifact pa <div class="tosca-artifact-page" > + <loader /> <ngx-datatable class="ngx-datatable" columnmode="flex" diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html index fece92ee37..fe550642b1 100644 --- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html +++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html @@ -1,4 +1,5 @@ <div class="tosca-artifact-page"> + <loader [display]="isLoading" [relative]="true"></loader> <ngx-datatable columnMode="flex" [headerHeight]="40" @@ -27,7 +28,7 @@ </div> </ng-template> </ngx-datatable-column> - <ngx-datatable-column [resizeable]="false"name="Type" [flexGrow]="3"> + <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="3"> <ng-template ngx-datatable-cell-template let-row="row"> {{row.artifactType}} </ng-template> @@ -37,7 +38,22 @@ {{ row.artifactVersion }} </ng-template> </ngx-datatable-column> - <ngx-datatable-column [resizeable]="false"[flexGrow]="1"> + <ngx-datatable-column *ngIf="isService() && isCheckedOut()" [resizeable]="false" name="Upload" [flexGrow]="1"> + <ng-template ngx-datatable-cell-template let-row="row"> + <div class="download-artifact-button"> + <upload-artifact + [artifact]="row" + [componentId]="componentId" + [componentType]="componentType" + [disabled]="!isCheckedOut()" + [extensions]="getExtension(row.artifactType)" + (onFileUpload)="onFileUpload($event, row.artifactType)" + testId="upload_{{row.artifactDisplayName}}" + ></upload-artifact> + </div> + </ng-template> + </ngx-datatable-column> + <ngx-datatable-column [resizeable]="false" name="Download" [flexGrow]="1"> <ng-template ngx-datatable-cell-template let-row="row"> <div class="download-artifact-button"> <download-artifact [artifact]="row" [componentId]="componentId" diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts index ef4112c30c..e6d820ecd5 100644 --- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts +++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts @@ -1,14 +1,15 @@ -import {Component, OnInit, ViewChild} from "@angular/core"; -import {WorkspaceService} from "../workspace.service"; -import {SdcUiServices} from "onap-ui-angular"; -import {ArtifactModel} from "../../../../models"; -import {Select, Store} from "@ngxs/store"; -import {WorkspaceState} from "../../../store/states/workspace.state"; -import {ArtifactGroupType} from "../../../../utils"; -import {GetArtifactsByTypeAction} from "../../../store/actions/artifacts.action"; -import {Observable} from "rxjs/index"; -import {ArtifactsState} from "../../../store/states/artifacts.state"; -import {map} from "rxjs/operators"; +import { Component, Inject, OnInit, ViewChild } from "@angular/core"; +import { WorkspaceService } from "../workspace.service"; +import { ArtifactModel } from "../../../../models"; +import { Select, Store } from "@ngxs/store"; +import { WorkspaceState } from "../../../store/states/workspace.state"; +import { ArtifactGroupType } from "../../../../utils"; +import { GetArtifactsByTypeAction } from "../../../store/actions/artifacts.action"; +import { Observable } from "rxjs/index"; +import { ArtifactsState } from "../../../store/states/artifacts.state"; +import { map } from "rxjs/operators"; +import { ArtifactType, ComponentState, ComponentType } from "app/utils/constants" +import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service"; @Component({ selector: 'tosca-artifact-page', @@ -23,8 +24,13 @@ export class ToscaArtifactPageComponent implements OnInit { public toscaArtifacts$: Observable<ArtifactModel[]>; public componentId: string; public componentType:string; + public isLoading: boolean = false; - constructor(private serviceLoader: SdcUiServices.LoaderService, private workspaceService: WorkspaceService, private store: Store) { + constructor( + private workspaceService: WorkspaceService, + private store: Store, + @Inject("Notification") private Notification: any, + private componentService: TopologyTemplateService) { } @@ -41,4 +47,47 @@ export class ToscaArtifactPageComponent implements OnInit { this.table.rowDetail.toggleExpandRow(event.row); } } + + getExtension(artifactType: string) { + switch (artifactType) { + case (ArtifactType.TOSCA.TOSCA_CSAR): + return "csar"; + case (ArtifactType.TOSCA.TOSCA_TEMPLATE): + return "yaml,yml"; + } + } + + isService() { + return ComponentType.SERVICE === this.componentType; + } + + isCheckedOut() { + return this.workspaceService.metadata.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT; + } + + onFileUpload(file, artifactType) { + if (file && file.name) { + this.isLoading = true; + switch (artifactType) { + case (ArtifactType.TOSCA.TOSCA_CSAR): + this.Notification.error({ + message: "Feature not implemented yet", + title: "Error" + }); + this.isLoading = false; + break; + case (ArtifactType.TOSCA.TOSCA_TEMPLATE): + this.componentService.putServiceToscaTemplate(this.componentId, this.componentType, file).subscribe((response)=> { + this.Notification.success({ + message: "Service " + response.name + " has been updated", + title: "Success" + }); + this.isLoading = false; + }, () => { + this.isLoading = false; + }); + break; + } + } + } }
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts index af3558e15b..6b59f97954 100644 --- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts +++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts @@ -12,14 +12,15 @@ import 'rxjs/add/observable/of'; import {NgxsModule, Store} from "@ngxs/store"; import {ArtifactsState} from "../../../store/states/artifacts.state"; import {toscaArtifactMock} from "../../../../../jest/mocks/artifacts-mock"; +import { ComponentServiceNg2 } from "app/ng2/services/component-services/component.service"; describe('tosca artifacts page', () => { let fixture: ComponentFixture<ToscaArtifactPageComponent>; let topologyTemplateServiceMock: Partial<TopologyTemplateService>; let workspaceServiceMock: Partial<WorkspaceService>; - let loaderServiceMock: Partial<SdcUiServices.LoaderService>; let store: Store; + let notificationMock: Partial<any>; beforeEach( @@ -30,10 +31,6 @@ describe('tosca artifacts page', () => { }; workspaceServiceMock = {metadata: <ComponentMetadata>{uniqueId: 'service_unique_id', componentType: 'SERVICE'}} - loaderServiceMock = { - activate : jest.fn(), - deactivate: jest.fn() - } const configure: ConfigureFn = testBed => { testBed.configureTestingModule({ declarations: [ToscaArtifactPageComponent], @@ -42,7 +39,8 @@ describe('tosca artifacts page', () => { providers: [ {provide: WorkspaceService, useValue: workspaceServiceMock}, {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock}, - {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock } + {provide: ComponentServiceNg2, useValue: {}}, + {provide: "Notification", useValue: notificationMock } ], }); }; diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts index 812f157c1b..0386a1577a 100644 --- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts @@ -76,6 +76,10 @@ export class TopologyTemplateService { this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; } + putServiceToscaTemplate(componentId: string, componentType: string, file) { + return this.http.put<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/toscaTemplate', file) + } + getFullComponent(componentType: string, uniqueId: string): Observable<Component> { return this.http.get<Component>(this.baseUrl + this.getServerTypeUrl(componentType) + uniqueId); } |