</button> -->
<!-- Button trigger modal - 1st Action -->
- <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
- data-target="#exampleModalLong">
+ <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
+ [attr.data-target]="dataTarget">
<i class="icon-topologyView-active"></i> Designer Mode
</button>
<!-- Designer Modal -->
versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
metadataClasses = 'nav-item nav-link active';
private cbaPackage: CBAPackage = new CBAPackage();
+ dataTarget: any = '';
constructor(
private route: ActivatedRoute,
}
this.packageCreationStore.changeDslDefinition(dslDefinition);
this.packageCreationStore.setCustomKeys(mapOfCustomKeys);
- if (definition.topology_template && definition.topology_template.content) {
- this.designerStore.saveSourceContent(definition.topology_template.content);
+ if (definition.topology_template) {
+ const content = {};
+ const workflow = 'workflows';
+ content[workflow] = definition.topology_template.workflows;
+ const nodeTemplates = 'node_templates';
+ content[nodeTemplates] = definition.topology_template.node_templates;
+ this.designerStore.saveSourceContent(JSON.stringify(content));
+ this.packageCreationStore.addTopologyTemplate(definition.topology_template);
}
}
}
goToDesignerMode(id) {
-
this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]);
}
return this.isSaveEnabled;
}
+ checkSkipTypesOfAction() {
+ if (this.cbaPackage.templateTopology.node_templates && this.cbaPackage.templateTopology.workflows) {
+ this.goToDesignerMode(this.id);
+ } else {
+ this.dataTarget = '#exampleModalLong';
+ }
+ }
}
</li>
<i class="fa fa-angle-right ml-2 mr-2"></i>
<li class="breadcrumb-item">
- <a href="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
+ <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
<button type="button" class="btn package-info-btn" data-toggle="modal"
- data-target="#exampleModalLong">
+ data-target="#exampleModalLong">
<i class="icon-info" aria-hidden="true"></i>
</button>
</li>
</li>
</ol>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+ aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <img src="assets/img/icon-close.svg" />
+ <img src="assets/img/icon-close.svg"/>
</button>
</div>
<div class="modal-body package-info">
<li>
<div class="btn-group" role="group" aria-label="Basic example">
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Preview">
+ data-tooltip="Preview">
<i class="fa fa-eye"></i>
</a>
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Download">
+ data-tooltip="Download">
<i class="fa fa-download"></i>
</a>
<a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
- data-tooltip="Share">
+ data-tooltip="Share">
<i class="fa fa-share-square"></i>
</a>
</div>
<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
<button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
- data-tooltip="Collapse Side bar">
+ data-tooltip="Collapse Side bar">
<i class="fa arr-size"></i>
</button>
<div class="collapse navbar-collapse ">
<div class="col-12">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
- aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
+ aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
<a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
- aria-controls=" " aria-selected="false">Template</a>
+ aria-controls=" " aria-selected="false">Template</a>
</div>
</div>
</nav>
</button>
</li>
<li class="vertical_line"></li>
- <li><button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
+ <li>
+ <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
<img src="/assets/img/icon-zoomOut.svg">
- </button></li>
+ </button>
+ </li>
<li class="zoom-percent">100%</li>
<li>
<button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
- <img src="/assets/img/icon-zoomIn.svg"> </button>
+ <img src="/assets/img/icon-zoomIn.svg"></button>
</li>
</ul>
<div class="btn-group viewBtns" role="group">
<button type="button" class="btn btn-secondary topologySource active">Designer</button>
<button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
- class="btn btn-secondary topologyView">Scripting</button>
+ class="btn btn-secondary topologyView">Scripting
+ </button>
</div>
</li>
</ul>
<ng-sidebar-container class="sidebar-container">
<!-- Controller SideBar -->
<ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
- [mode]="'push'" #sidebarLeft>
+ [mode]="'push'" #sidebarLeft>
<nav class="row">
<!--Nav Tabs-->
<div class="col">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
- role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+ role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
<a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
- role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+ role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
</div>
</div>
</nav>
<div class="col">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-action" role="tabpanel"
- aria-labelledby="nav-action-tab">
+ aria-labelledby="nav-action-tab">
<!--Action Search Box-->
<input type="text" class="form-control input-search-controller" placeholder="Search Actions">
<label><i class="icon-file" aria-hidden="true"></i>
{{customActionName}} </label>
</div>
+ <div *ngIf="!showAction" class="custom-control">
+ <ul>
+ <li *ngFor="let customActionName of actions">
+ <label><i class="icon-file" aria-hidden="true"></i>
+ {{customActionName}} </label>
+ </li>
+ </ul>
+ </div>
</div>
</div>
<div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
<!--Function Search Box-->
<input type="text" class="form-control input-search-controller" placeholder="Search Functions">
- <div id="palette-paper" class="componentsList"> </div>
+ <div id="palette-paper" class="componentsList"></div>
</div>
</div>
</div>
<!-- Action Attribute SideBar -->
<ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
- [position]="'right'" #sidebarRight>
+ [position]="'right'" #sidebarRight>
<div class="container-fluid0">
<div class="row m-0">
<div class="col-2 pr-0">
<div class="card-header row" id="headingOne">
<h2 class="col-10 mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ data-target="#collapseOne" aria-expanded="true"
+ aria-controls="collapseOne">
Steps
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordionExample">
+ data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="form-group">
<label for="exampleFormControlTextarea1">Description</label>
<textarea class="form-control" id="exampleFormControlTextarea1"
- rows="3"></textarea>
+ rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Target</label>
<div class="card-header row" id="headingTwo">
<h2 class="col-10 mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+ data-target="#collapseTwo" aria-expanded="true"
+ aria-controls="collapseTwo">
Inputs
</button>
</h2>
</div>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
- data-parent="#accordionExample">
+ data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="form-group">
<label for="exampleFormControlTextarea1">Description</label>
<textarea class="form-control" id="exampleFormControlTextarea1"
- rows="3"></textarea>
+ rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Target</label>
<div class="card-header row" id="headingThree">
<h2 class="col-10 mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseThree" aria-expanded="true"
- aria-controls="collapseThree">
+ data-target="#collapseThree" aria-expanded="true"
+ aria-controls="collapseThree">
Outputs
</button>
</h2>
</div>
</div>
<div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
- data-parent="#accordionExample">
+ data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="form-group">
<label for="exampleFormControlTextarea1">Description</label>
<textarea class="form-control" id="exampleFormControlTextarea1"
- rows="3"></textarea>
+ rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Target</label>
<!-- Function Attribute SideBar -->
<ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
- [mode]="'push'" [position]="'right'" #sidebarRight>
+ [mode]="'push'" [position]="'right'" #sidebarRight>
<div class="container-fluid0">
<div class="row m-0">
<div class="col-2 pr-0">
<div class="card-header row" id="headingOne">
<h2 class="col-10 mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Interface
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordionExample">
+ data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-9">
</div>
<div class="form-group">
<label>
- <input class="with-gap radio-btn" name="group1" type="radio" />
+ <input class="with-gap radio-btn" name="group1" type="radio"/>
<span class="radio-btn">True</span>
</label>
<label class="radio-btn">
- <input class="with-gap radio-btn" name="group1" type="radio" />
+ <input class="with-gap radio-btn" name="group1" type="radio"/>
<span class="radio-btn">False</span>
</label>
</div>
<div class="card-header row" id="headingOne">
<h2 class="col-10 mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Artifact
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordionExample">
+ data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-9">
import dagre from 'dagre';
import graphlib from 'graphlib';
-import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import * as joint from 'jointjs';
import './jointjs/elements/palette.function.element';
import './jointjs/elements/action.element';
import './jointjs/elements/board.function.element';
-import {DesignerStore} from './designer.store';
-import {ActionElementTypeName} from 'src/app/common/constants/app-constants';
-import {GraphUtil} from './graph.util';
-import {GraphGenerator} from './graph.generator.util';
-import {FunctionsStore} from './functions.store';
-import {Subject} from 'rxjs';
-import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
-import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
-import {ActivatedRoute} from '@angular/router';
-import {DesignerService} from './designer.service';
-import {FilesContent, FolderNodeElement} from '../package-creation/mapping-models/metadata/MetaDataTab.model';
-import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes';
-import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder';
-import {PackageCreationStore} from '../package-creation/package-creation.store';
-import {PackageCreationService} from '../package-creation/package-creation.service';
-import {PackageCreationUtils} from '../package-creation/package-creation.utils';
+import { DesignerStore } from './designer.store';
+import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
+import { GraphUtil } from './graph.util';
+import { GraphGenerator } from './graph.generator.util';
+import { FunctionsStore } from './functions.store';
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DesignerService } from './designer.service';
+import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model';
+import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes';
+import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder';
+import { PackageCreationStore } from '../package-creation/package-creation.store';
+import { PackageCreationService } from '../package-creation/package-creation.service';
+import { PackageCreationUtils } from '../package-creation/package-creation.utils';
import * as JSZip from 'jszip';
-import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service';
-import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model';
+import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service';
+import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model';
+import { TopologyTemplate } from './model/designer.topologyTemplate.model';
+import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-designer',
paletteGraph: joint.dia.Graph;
palettePaper: joint.dia.Paper;
ngUnsubscribe = new Subject();
- opt = {tx: 100, ty: 100};
+ opt = { tx: 100, ty: 100 };
filesData: any = [];
folder: FolderNodeElement = new FolderNodeElement();
zipFile: JSZip = new JSZip();
- private cbaPackage: CBAPackage;
+ cbaPackage: CBAPackage;
+ actions: string[] = [];
constructor(
private designerStore: DesignerStore,
private graphUtil: GraphUtil,
private graphGenerator: GraphGenerator,
private route: ActivatedRoute,
+ private router: Router,
private designerService: DesignerService,
private packageCreationService: PackageCreationService,
- private packageCreationExtractionService: PackageCreationExtractionService) {
+ private packageCreationExtractionService: PackageCreationExtractionService,
+ private toastService: ToastrService) {
this.controllerSideBar = true;
this.attributesSideBar = false;
this.showAction = false;
this.packageCreationService.downloadPackage(this.viewedPackage.artifactName + '/'
+ this.viewedPackage.artifactVersion)
.subscribe(response => {
- const blob = new Blob([response], {type: 'application/octet-stream'});
+ const blob = new Blob([response], { type: 'application/octet-stream' });
this.packageCreationExtractionService.extractBlobToStore(blob);
});
}
this.cbaPackage = cba;
console.log(cba.templateTopology.content);
this.designerStore.saveSourceContent(cba.templateTopology.content);
+
});
+
/**
* the code to retrieve from server is commented
*/
if (state.sourceContent) {
console.log('inside desinger.component---> ', state);
// generate graph from store objects if exist
- const topologtTemplate = JSON.parse(state.sourceContent);
+ const topologtTemplate: TopologyTemplate = JSON.parse(state.sourceContent);
console.log(topologtTemplate);
delete state.sourceContent;
+ this.graphGenerator.clear(this.boardGraph);
this.graphGenerator.populate(topologtTemplate, this.boardGraph);
console.log('all cells', this.boardGraph.getCells());
setLinkVertices: false,
marginX: 10,
marginY: 10,
- clusterPadding: {top: 100, left: 30, right: 10, bottom: 100},
+ clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 },
rankDir: 'TB'
});
+ for (const workflowsKey in topologtTemplate.workflows) {
+ if (workflowsKey && !this.actions.includes(workflowsKey)) {
+ this.actions.push(workflowsKey);
+ }
+ }
}
});
saveBluePrintToDataBase() {
this.create();
- this.zipFile.generateAsync({type: 'blob'})
+ this.zipFile.generateAsync({ type: 'blob' })
.then(blob => {
this.packageCreationService.savePackage(blob).subscribe(
bluePrintDetailModels => {
+ this.toastService.info('success updating the package');
+ const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1];
+ this.router.navigate(['/packages/designer/' + id]);
console.log('success');
}, error => {
- // this.toastService.error('error happened when editing ' + error.message);
+ this.toastService.error('error happened when editing ' + error.message);
console.log('Error -' + error.message);
});
});
limitations under the License.
============LICENSE_END============================================
*/
-import { TopologyTemplate } from './model/designer.topologyTemplate.model';
-import { Injectable } from '@angular/core';
-import { GraphUtil } from './graph.util';
-import { NodeTemplate } from './model/desinger.nodeTemplate.model';
+import {TopologyTemplate} from './model/designer.topologyTemplate.model';
+import {Injectable} from '@angular/core';
+import {GraphUtil} from './graph.util';
@Injectable({
providedIn: 'root'
constructor(private graphUtil: GraphUtil) {
}
+ clear(boardGraph: joint.dia.Graph) {
+ boardGraph.clear();
+ }
+
/**
* loops over workflows
* create action element
// create action element
const actionElement =
- this.graphUtil.createCustomActionWithName(workFlowName, boardGraph);
+ this.graphUtil.createCustomActionWithName(workFlowName, boardGraph);
// create board function elements
const workflow = topologyTempalte.workflows[workFlowName].steps;
this.graphUtil.dropFunctionOverActionRelativeToParent(
actionElement,
- stepName , functionType, boardGraph);
+ stepName, functionType, boardGraph);
// TODO handle dg-generic case (multi-step in the same action)
if (functionType === 'dg-generic') {
metadata.template_tags = fullTags;
vlbDefinition.metadata = metadata;
const files: Import[] = [];
+ let insideVlbDefinition: VlbDefinition = null;
if (cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) {
cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
if (!key.includes(cbaPackage.metaData.name)) {
files.push({file: key});
+ } else {
+ // it means this is entry definition
+ insideVlbDefinition = JSON.parse(valueOfFile);
}
});
}
console.log(vlbDefinition);
vlbDefinition.imports = files;
+ if (insideVlbDefinition && insideVlbDefinition.topology_template) {
+ vlbDefinition.topology_template = insideVlbDefinition.topology_template;
+ }
console.log(cbaPackage.definitions.dslDefinition.content);
if (cbaPackage.definitions.dslDefinition.content) {
vlbDefinition.dsl_definitions = JSON.parse(cbaPackage.definitions.dslDefinition.content);
})
export class PackagesStore extends Store<PackagesDashboardState> {
// TDOD fixed for now as there is no requirement to change it from UI
- public pageSize = 5;
+ public pageSize = 15;
private bluePrintContent: BluePrintPage = new BluePrintPage();
constructor(
Code Review / ccsdk / cds.git / commitdiff