From 3943534cd3409c0cca6588f36527df34345d74f2 Mon Sep 17 00:00:00 2001 From: KrupaNagabhushan Date: Wed, 26 Oct 2022 17:26:54 +0100 Subject: Download data type from UI Issue-ID: SDC-4332 Signed-off-by: KrupaNagabhushan Change-Id: If31f7a95eb2d568e716760a33ef2641bad09cf68 --- .../download-artifact.component.ts | 10 +- ...pe-workspace-tosca-artifact-page.component.html | 40 +++++++ ...pe-workspace-tosca-artifact-page.component.less | 7 ++ ...type-workspace-tosca-artifact-page.component.ts | 117 +++++++++++++++++++++ .../type-workspace/type-workspace.component.html | 1 + .../type-workspace.component.spec.ts | 9 +- .../pages/type-workspace/type-workspace.module.ts | 10 +- .../tosca-artifact-page.component.ts | 4 +- catalog-ui/src/app/services/data-types-service.ts | 7 +- 9 files changed, 192 insertions(+), 13 deletions(-) create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.html create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.less create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.ts (limited to 'catalog-ui/src/app') diff --git a/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts index 8f47456a8f..fee2e0e91d 100644 --- a/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts @@ -1,5 +1,5 @@ import { Component, Input } from "@angular/core"; -import {IFileDownload, Component as TopologyTemplate, ArtifactModel, FullComponentInstance} from "app/models"; +import {IFileDownload, ArtifactModel} from "app/models"; import {EventListenerService} from "app/services"; import {CacheService} from "app/services-ng2"; import {EVENTS} from "app/utils"; @@ -59,8 +59,8 @@ export class DownloadArtifactComponent { public download = (event) => { event.stopPropagation(); - let onFaild = (response):void => { - console.info('onFaild', response); + let onFailed = (response):void => { + console.info('onFailed', response); this.removeDownloadedFileLoader(); }; @@ -72,9 +72,9 @@ export class DownloadArtifactComponent { this.setDownloadedFileLoader(); if (this.isInstance) { - this.componentInstanceService.downloadInstanceArtifact(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild); + this.componentInstanceService.downloadInstanceArtifact(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFailed); } else { - this.topologyTemplateService.downloadArtifact(this.componentType, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild); + this.topologyTemplateService.downloadArtifact(this.componentType, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFailed); } }; diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.html new file mode 100644 index 0000000000..902b772276 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.html @@ -0,0 +1,40 @@ +
+ + + +
+ {{row.artifactDisplayName }} +
+ + + + + {{row.artifactType}} + + + + + {{ row.artifactVersion }} + + + + +
+ + +
+ + + +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.less new file mode 100644 index 0000000000..9c5dd47585 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.less @@ -0,0 +1,7 @@ +.tosca-artifact-page { + .download-artifact-button { + text-align: center; + padding-top: 4px; + + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.ts new file mode 100644 index 0000000000..f68ec8b43c --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.ts @@ -0,0 +1,117 @@ +import {Component, Input, OnInit, ViewChild} from "@angular/core"; +import {ArtifactModel, DataTypeModel, IFileDownload} from "../../../../models"; +import {Store} from "@ngxs/store"; +import {DataTypesService} from "../../../../services/data-types-service"; + +@Component({ + selector: 'app-type-workspace-tosca-artifact', + templateUrl: './type-workspace-tosca-artifact-page.component.html', + styleUrls: ['./type-workspace-tosca-artifact-page.component.less', '../../../../../assets/styles/table-style.less'] +}) +export class TypeWorkspaceToscaArtifactPageComponent implements OnInit { + + @Input() dataType: DataTypeModel = new DataTypeModel(); + @ViewChild('toscaArtifactsTable') table: any; + public toscaArtifacts: Array = []; + public componentId: string; + public componentType: string; + public disabled: boolean; + public iconType: string; + public testId: string; + + private DOWNLOAD_CSS_CLASSES = { + DOWNLOAD_ICON: "download-o", + LOADER_ICON: "spinner" + } + + private DATATYPE_ARTIFACT = { + ARTIFACT_NAME : "Tosca Template", + ARTIFACT_TYPE : "TOSCA_TEMPLATE", + ARTIFACT_VERSION : "1" + } + + constructor(private store: Store, private dataTypesService: DataTypesService) { + } + + ngOnInit(): void { + this.iconType = this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON; + this.componentId = this.dataType.uniqueId; + this.componentType = 'datatype'; + + const artifactTemplateForDataType: ArtifactModel = new ArtifactModel(); + artifactTemplateForDataType.artifactDisplayName = this.DATATYPE_ARTIFACT.ARTIFACT_NAME; + artifactTemplateForDataType.artifactType = this.DATATYPE_ARTIFACT.ARTIFACT_NAME; + artifactTemplateForDataType.artifactVersion = this.DATATYPE_ARTIFACT.ARTIFACT_VERSION; + this.toscaArtifacts.push(artifactTemplateForDataType); + } + + onActivate(event) { + if (event.type === 'click') { + this.table.rowDetail.toggleExpandRow(event.row); + } + } + + public download = (event) => { + event.stopPropagation(); + this.dataTypesService.downloadDataType(this.componentId).then( + (file) => { + console.log("file", file.data); + if (file.data) { + let blob = this.base64toBlob(file.data.base64Contents, ''); + let fileName = file.data.artifactName; + this.triggerFileDownload(blob, fileName); + } + } + ); + }; + + private downloadFile = (file:IFileDownload):void => { + if (file) { + let blob = this.base64toBlob(file.base64Contents, ''); + let fileName = file.artifactName; + this.triggerFileDownload(blob, fileName); + } + }; + + public base64toBlob = (base64Data, contentType):any => { + let byteCharacters = atob(base64Data); + return this.byteCharactersToBlob(byteCharacters, contentType); + }; + + public byteCharactersToBlob = (byteCharacters, contentType):any => { + contentType = contentType || ''; + let sliceSize = 1024; + let bytesLength = byteCharacters.length; + let slicesCount = Math.ceil(bytesLength / sliceSize); + let byteArrays = new Array(slicesCount); + + for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) { + let begin = sliceIndex * sliceSize; + let end = Math.min(begin + sliceSize, bytesLength); + + let bytes = new Array(end - begin); + for (let offset = begin, i = 0; offset < end; ++i, ++offset) { + bytes[i] = byteCharacters[offset].charCodeAt(0); + } + byteArrays[sliceIndex] = new Uint8Array(bytes); + } + return new Blob(byteArrays, {type: contentType}); + }; + + public triggerFileDownload = (blob, fileName):void=> { + let url = window.URL.createObjectURL(blob); + let downloadLink = document.createElement("a"); + + downloadLink.setAttribute('href', url); + downloadLink.setAttribute('download', fileName); + document.body.appendChild(downloadLink); + + var clickEvent = new MouseEvent("click", { + "view": window, + "bubbles": true, + "cancelable": true + }); + downloadLink.dispatchEvent(clickEvent); + + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html index 4d29e8673a..61516278da 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html @@ -45,6 +45,7 @@
+
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts index fcad472890..3db2504564 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts @@ -38,6 +38,9 @@ import {States} from "../../../utils/constants"; import {IUserProperties} from "../../../models/user"; import {Observable} from "rxjs/Observable"; import {TypeWorkspacePropertiesComponent} from "./type-workspace-properties/type-workspace-properties.component"; +import {TypeWorkspaceToscaArtifactPageComponent} from "./type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component"; +import {NgxDatatableModule} from "@swimlane/ngx-datatable"; +import {SvgIconModule} from "onap-ui-angular/dist/svg-icon/svg-icon.module"; describe('TypeWorkspaceComponent', () => { let component: TypeWorkspaceComponent; @@ -89,13 +92,15 @@ describe('TypeWorkspaceComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, TypeWorkspaceGeneralComponent, TypeWorkspacePropertiesComponent ], + declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, TypeWorkspaceGeneralComponent, TypeWorkspacePropertiesComponent, TypeWorkspaceToscaArtifactPageComponent ], imports: [ ReactiveFormsModule, FormsModule, TranslateModule, UiElementsModule, - LayoutModule + LayoutModule, + NgxDatatableModule, + SvgIconModule ], providers: [ {provide: DataTypeService, useValue: dataTypeServiceMock}, diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts index 5b2d3bf030..87b29b615d 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts @@ -31,13 +31,16 @@ import {UpgradeModule} from "@angular/upgrade/static"; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {TranslateModule} from "../../shared/translator/translate.module"; import {DataTypeService} from "../../services/data-type.service"; -import {TypeWorkspacePropertiesComponent} from './type-workspace-properties/type-workspace-properties.component'; +import { TypeWorkspacePropertiesComponent } from './type-workspace-properties/type-workspace-properties.component'; +import {NgxDatatableModule} from "@swimlane/ngx-datatable"; +import {SvgIconModule} from "onap-ui-angular/dist/svg-icon/svg-icon.module"; +import {TypeWorkspaceToscaArtifactPageComponent} from "./type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component"; import {ModalService} from "../../services/modal.service"; import {AddPropertyComponent} from './type-workspace-properties/add-property/add-property.component'; import {InterfaceOperationHandlerModule} from "../composition/interface-operatons/operation-creator/interface-operation-handler.module"; @NgModule({ - imports: [ + imports: [ CommonModule, UiElementsModule, LayoutModule, @@ -46,12 +49,15 @@ import {InterfaceOperationHandlerModule} from "../composition/interface-operaton TranslateModule, FormsModule, InterfaceOperationHandlerModule, + NgxDatatableModule, + SvgIconModule, ], declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, TypeWorkspaceGeneralComponent, TypeWorkspacePropertiesComponent, + TypeWorkspaceToscaArtifactPageComponent, AddPropertyComponent, ], providers: [ 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 e74e5db668..ef4112c30c 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 @@ -4,12 +4,10 @@ import {SdcUiServices} from "onap-ui-angular"; import {ArtifactModel} from "../../../../models"; import {Select, Store} from "@ngxs/store"; import {WorkspaceState} from "../../../store/states/workspace.state"; -import * as _ from "lodash"; -import {ArtifactGroupType, COMPONENT_FIELDS} from "../../../../utils"; +import {ArtifactGroupType} from "../../../../utils"; import {GetArtifactsByTypeAction} from "../../../store/actions/artifacts.action"; import {Observable} from "rxjs/index"; import {ArtifactsState} from "../../../store/states/artifacts.state"; -import {ArtifactType} from "../../../../utils/constants"; import {map} from "rxjs/operators"; @Component({ diff --git a/catalog-ui/src/app/services/data-types-service.ts b/catalog-ui/src/app/services/data-types-service.ts index f3d02a20c0..09ece87907 100644 --- a/catalog-ui/src/app/services/data-types-service.ts +++ b/catalog-ui/src/app/services/data-types-service.ts @@ -24,7 +24,7 @@ import { ComponentInstance, DataTypeModel, DataTypesMap, - IAppConfigurtaion, InputModel, + IAppConfigurtaion, IFileDownload, InputModel, InputPropertyBase, PropertyModel, SchemaProperty @@ -206,4 +206,9 @@ export class DataTypesService implements IDataTypesService { } return true; }; + + public downloadDataType = (dataTypeId: string): angular.IHttpPromise => { + console.log("dataTypeId", dataTypeId); + return this.$http.get(this.baseUrl + "downloadDataType" + ((dataTypeId) ? '?dataTypeId=' + dataTypeId : '')) + } } -- cgit 1.2.3-korg