diff options
author | KrupaNagabhushan <krupa.nagabhushan@est.tech> | 2022-10-26 17:26:54 +0100 |
---|---|---|
committer | KrupaNagabhushan <krupa.nagabhushan@est.tech> | 2023-01-19 15:23:12 +0000 |
commit | 3943534cd3409c0cca6588f36527df34345d74f2 (patch) | |
tree | fc10c05a93fe853f21f1f3beddf5d0557d7bad1d /catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts | |
parent | 8edfa4dee9fed9be5b38133847c60136294eba80 (diff) |
Download data type from UI
Issue-ID: SDC-4332
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: If31f7a95eb2d568e716760a33ef2641bad09cf68
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts')
3 files changed, 164 insertions, 0 deletions
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 @@ +<div class="tosca-artifact-page"> + <ngx-datatable + columnMode="flex" + [headerHeight]="40" + [rowHeight]="35" + [reorderable]="false" + [swapColumns]="false" + [rows]="toscaArtifacts" + [sorts]="[{prop: 'artifactDisplayName', dir: 'desc'}]" + #toscaArtifactsTable + (activate)="onActivate($event)"> + <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="3" + [prop]="'artifactDisplayName'"> + <ng-template ngx-datatable-cell-template let-row="row"> + <div class="expand-collapse-cell"> + <span>{{row.artifactDisplayName }}</span> + </div> + </ng-template> + </ngx-datatable-column> + <ngx-datatable-column [resizeable]="false"name="Type" [flexGrow]="3"> + <ng-template ngx-datatable-cell-template let-row="row"> + {{row.artifactType}} + </ng-template> + </ngx-datatable-column> + <ngx-datatable-column [resizeable]="false" name="Version" [flexGrow]="1"> + <ng-template ngx-datatable-cell-template let-row="row"> + {{ row.artifactVersion }} + </ng-template> + </ngx-datatable-column> + <ngx-datatable-column [resizeable]="false"[flexGrow]="1"> + <ng-template ngx-datatable-cell-template let-row="row"> + <div class="download-artifact-button"> + <svg-icon [mode]="'primary2'" [disabled]="disabled" [clickable]="!disabled" [name]="iconType" + [testId]="testId" mode="info" clickable="true" size="medium" (click)="download($event)"> + </svg-icon> + </div> + </ng-template> + </ngx-datatable-column> + </ngx-datatable> +</div>
\ 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<ArtifactModel> = []; + 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 |