path: root/cds-ui/designer-client/261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330

import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
import { PackageCreationStore } from '../package-creation/package-creation.store';
import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model';
import { MetadataTabComponent } from '../package-creation/metadata-tab/metadata-tab.component';
import * as JSZip from 'jszip';
import { ConfigurationDashboardService } from './configuration-dashboard.service';
import { TemplateTopology, CBADefinition } from '../package-creation/mapping-models/definitions/CBADefinition';
import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model';
import { PackageCreationUtils } from '../package-creation/package-creation.utils';
import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes';
import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder';
import { saveAs } from 'file-saver';
import { DesignerStore } from '../designer/designer.store';
import { ToastrService } from 'ngx-toastr';
import { NgxFileDropEntry } from 'ngx-file-drop';
import { PackageCreationService } from '../package-creation/package-creation.service';
import { ComponentCanDeactivate } from '../../../../common/core/canDactivate/ComponentCanDeactivate';
import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service';
import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { Subject, throwError } from 'rxjs';
import { NgxUiLoaderService } from 'ngx-ui-loader';

@Component({
    selector: 'app-configuration-dashboard',
    templateUrl: './configuration-dashboard.component.html',
    styleUrls: ['./configuration-dashboard.component.css'],
})
export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit, OnDestroy {
    viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
    @ViewChild(MetadataTabComponent, { static: false })
    metadataTabComponent: MetadataTabComponent;
    public customActionName = '';

    entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
        'author-email', 'template_version', 'template_name', 'template_author', 'template_description'];
    @ViewChild('nameit', { static: true })
    elementRef: ElementRef;
    uploadedFiles = [];
    zipFile: JSZip = new JSZip();
    filesData: any = [];
    folder: FolderNodeElement = new FolderNodeElement();
    id: any;

    currentBlob = new Blob();
    vlbDefinition: CBADefinition = new CBADefinition();
    isSaveEnabled = false;
    versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
    metadataClasses = 'nav-item nav-link active';
    private cbaPackage: CBAPackage = new CBAPackage();
    dataTarget: any = '';
    ngUnsubscribe = new Subject();
    private designerState: any;

    constructor(
        private route: ActivatedRoute,
        private configurationDashboardService: ConfigurationDashboardService,
        private packageCreationStore: PackageCreationStore,
        private packageCreationService: PackageCreationService,
        private packageCreationUtils: PackageCreationUtils,
        private router: Router,
        private designerStore: DesignerStore,
        private toastService: ToastrService,
        private ngxService: NgxUiLoaderService,
        private packageCreationExtractionService: PackageCreationExtractionService
    ) {
        super();


    }

    ngOnInit() {
        this.ngxService.start();
        this.vlbDefinition.topology_template = new TemplateTopology();
        this.packageCreationStore.state$
            .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
                takeUntil(this.ngUnsubscribe))
            .subscribe(
                cbaPackage => {
                    this.cbaPackage = cbaPackage;
                });
        this.designerStore.state$.pipe(
            distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
            takeUntil(this.ngUnsubscribe))
            .subscribe(state => {
                this.designerState = state;
                this.vlbDefinition.topology_template.content = this.packageCreationUtils.transformToJson(state.template);
            });
        this.elementRef.nativeElement.focus();
        this.refreshCurrentPackage();
        const regexp = RegExp(this.versionPattern);
        if (this.cbaPackage && this.cbaPackage.metaData && this.cbaPackage.metaData.description
            && this.cbaPackage.metaData.name && this.cbaPackage.metaData.version &&
            regexp.test(this.cbaPackage.metaData.version)) {
            if (!this.metadataClasses.includes('complete')) {
                this.metadataClasses += ' complete';
            }
        } else {
            this.metadataClasses = this.metadataClasses.replace('complete', '');
            this.isSaveEnabled = false;
        }


    }

    private refreshCurrentPackage(id?) {
        this.id = this.route.snapshot.paramMap.get('id');
        console.log(this.id);
        id = id ? id : this.id;
        this.configurationDashboardService.getPagedPackages(id).subscribe(
            (bluePrintDetailModels) => {
                if (bluePrintDetailModels) {
                    this.viewedPackage = bluePrintDetailModels[0];
                    this.downloadCBAPackage(bluePrintDetailModels);
                    this.packageCreationStore.clear();
                }
            }, err => { },
            () => {
                //  this.ngxService.stop();
            });
    }

    private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) {
        this.configurationDashboardService.downloadResource(
            this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion).subscribe(response => {
                const blob = new Blob([response], { type: 'application/octet-stream' });
                this.currentBlob = blob;
                this.packageCreationExtractionService.extractBlobToStore(blob);
            }, err => { },
                () => {
                    this.ngxService.stop();
                });
    }

    editBluePrint() {
        this.ngxService.start();
        this.configurationDashboardService.deletePackage(this.viewedPackage.id).subscribe(res => {
            this.formTreeData();
            this.saveBluePrintToDataBase();

        });
    }

    private formTreeData() {
        FilesContent.clear();
        let packageCreationModes: PackageCreationModes;
        this.cbaPackage = PackageCreationModes.mapModeType(this.cbaPackage);
        this.cbaPackage.metaData = PackageCreationModes.setEntryPoint(this.cbaPackage.metaData);
        packageCreationModes = PackageCreationBuilder.getCreationMode(this.cbaPackage);
        packageCreationModes.execute(this.cbaPackage, this.packageCreationUtils);
        this.filesData.push(this.folder.TREE_DATA);
    }

    saveMetaData() {
        this.metadataTabComponent.saveMetaDataToStore();
    }

    saveBluePrintToDataBase() {
        this.create();
        this.zipFile.generateAsync({ type: 'blob' })
            .then(blob => {
                this.packageCreationService.savePackage(blob).subscribe(
                    bluePrintDetailModels => {
                        if (bluePrintDetailModels) {
                            const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1];
                            this.toastService.info('package updated successfully ');
                            this.isSaveEnabled = false;
                            this.router.navigate(['/packages/package/' + id]);
                            this.refreshCurrentPackage(id);
                        }
                    }, error => {
                        this.toastService.error('error happened when editing ' + error.message);
                        console.log('Error -' + error.message);
                    }, () => {
                        this.ngxService.stop();
                    });
            });
    }

    deletePackage() {
        this.configurationDashboardService.deletePackage(this.id).subscribe(res => {
            console.log('Deleted');
            console.log(res);
            this.isSaveEnabled = false;
            this.router.navigate(['/packages']);
        }, err => {
            console.log(err);
        });
    }

    create() {
        this.zipFile = new JSZip();
        FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => {
            this.zipFile.folder(key.split('/')[0]);
            this.zipFile.file(key, value);
        });

    }

    discardChanges() {
        this.refreshCurrentPackage();
    }

    downloadPackage(artifactName: string, artifactVersion: string) {
        this.ngxService.start();
        this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => {
            const blob = new Blob([response], { type: 'application/octet-stream' });
            saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip');

        }, err => { }, () => {
            this.ngxService.stop();
        });
    }

    deployCurrentPackage() {
        this.ngxService.start();
        this.formTreeData();
        this.deployPackage();

    }

    goToDesignerMode(id) {
        this.router.navigate(['/packages/designer', id, { actionName: this.customActionName }]);
    }

    public dropped(files: NgxFileDropEntry[]) {

    }

    public fileOver(event) {
        console.log(event);
    }

    public fileLeave(event) {
        console.log(event);
    }

    textChanged($event: {}) {
        this.cbaPackage.templateTopology.node_templates = this.designerState.template.node_templates;
        this.cbaPackage.templateTopology.workflows = this.designerState.template.workflows;
        this.cbaPackage.templateTopology.content = this.vlbDefinition.topology_template.content;
    }

    enrichBluePrint() {
        this.ngxService.start();
        this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology);
        this.formTreeData();
        this.enrichPackage();
        this.designerStore.clear();
        this.packageCreationStore.clear();
    }


    private enrichPackage() {
        this.create();
        this.zipFile.generateAsync({ type: 'blob' })
            .then(blob => {
                this.packageCreationService.enrichPackage(blob).subscribe(response => {
                    console.log('success');
                    const blobInfo = new Blob([response], { type: 'application/octet-stream' });
                    this.currentBlob = blobInfo;
                    this.packageCreationStore.clear();
                    this.packageCreationExtractionService.extractBlobToStore(this.currentBlob);
                    this.isSaveEnabled = true;
                    this.toastService.info('enriched successfully ');
                });
            }, error => {
                this.toastService.error('error happened when enrich ' + error.message);
                console.error('Error -' + error.message);
            }, () => {
                this.ngxService.stop();
            });
    }

    private deployPackage() {
        this.create();
        this.zipFile.generateAsync({ type: 'blob' })
            .then(blob => {
                this.packageCreationService.deploy(blob).subscribe(response => {
                    this.toastService.info('deployed successfully ');
                    const id = response.toString().split('id')[1].split(':')[1].split('"')[1];
                    this.isSaveEnabled = false;
                    this.router.navigate(['/packages/package/' + id]);
                });
            }, error => {
                this.handleError(error);
            }, () => {
                this.ngxService.stop();
            });
    }

    clickEvent() {
        this.isSaveEnabled = true;
    }

    canDeactivate(): boolean {
        return this.isSaveEnabled;
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }

    checkSkipTypesOfAction() {
        console.log(this.cbaPackage);
        if (this.cbaPackage.templateTopology && this.cbaPackage.templateTopology.node_templates
            && this.cbaPackage.templateTopology.workflows) {
            this.goToDesignerMode(this.id);
        } else {
            this.dataTarget = '#exampleModalLong';
        }
    }

    handleError(error) {
        let errorMessage = '';
        if (error.error instanceof ErrorEvent) {
            // client-side error
            errorMessage = `Error: ${error.error.message}`;
        } else {
            // server-side error
            errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
        }
        this.toastService.error('error happened when deploying ' + errorMessage);
        console.log('Error -' + errorMessage);
        return throwError(errorMessage);
    }
}