aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages
diff options
context:
space:
mode:
authorKrupaNagabhushan <krupa.nagabhushan@est.tech>2022-10-26 17:26:54 +0100
committerKrupaNagabhushan <krupa.nagabhushan@est.tech>2023-01-19 15:23:12 +0000
commit3943534cd3409c0cca6588f36527df34345d74f2 (patch)
treefc10c05a93fe853f21f1f3beddf5d0557d7bad1d /catalog-ui/src/app/ng2/pages
parent8edfa4dee9fed9be5b38133847c60136294eba80 (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')
-rw-r--r--catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.html40
-rw-r--r--catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.less7
-rw-r--r--catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-tosca-artifacts/type-workspace-tosca-artifact-page.component.ts117
-rw-r--r--catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html1
-rw-r--r--catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts9
-rw-r--r--catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts10
-rw-r--r--catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts4
7 files changed, 181 insertions, 7 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
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 @@
<div class="w-sdc-main-container-body-content" *ngIf="dataType">
<app-type-workspace-general *ngIf="currentMenu.state === 'general'" [dataType]="dataType"></app-type-workspace-general>
<app-type-workspace-properties *ngIf="currentMenu.state === 'properties'" [dataType]="dataType" [isViewOnly]="false"></app-type-workspace-properties>
+ <app-type-workspace-tosca-artifact *ngIf="currentMenu.state === 'tosca_artifacts'" [dataType]="dataType"></app-type-workspace-tosca-artifact>
</div>
</div>
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({