aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html87
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts70
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts15
3 files changed, 102 insertions, 70 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 88923229b..dd39cb243 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -10,9 +10,9 @@
</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>
@@ -22,13 +22,13 @@
</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">
@@ -70,15 +70,15 @@
<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>
@@ -106,7 +106,7 @@
<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">&#xf100;</i>
</button>
<div class="collapse navbar-collapse ">
@@ -117,9 +117,9 @@
<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>
@@ -142,13 +142,15 @@
</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>
@@ -157,7 +159,8 @@
<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>
@@ -168,16 +171,16 @@
<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>
@@ -185,7 +188,7 @@
<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">
@@ -197,12 +200,20 @@
<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>
@@ -277,7 +288,7 @@
</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">
@@ -299,7 +310,8 @@
<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>
@@ -309,7 +321,7 @@
</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">
@@ -329,7 +341,7 @@
<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>
@@ -343,7 +355,8 @@
<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>
@@ -352,7 +365,7 @@
</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">
@@ -372,7 +385,7 @@
<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>
@@ -386,8 +399,8 @@
<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>
@@ -396,7 +409,7 @@
</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">
@@ -416,7 +429,7 @@
<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>
@@ -435,7 +448,7 @@
<!-- 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">
@@ -493,7 +506,7 @@
<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>
@@ -503,7 +516,7 @@
</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">
@@ -525,11 +538,11 @@
</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>
@@ -554,7 +567,7 @@
<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>
@@ -564,7 +577,7 @@
</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">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 0509b1d0e..d8113633d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -25,30 +25,32 @@ limitations under the License.
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',
@@ -72,11 +74,12 @@ export class DesignerComponent implements OnInit, OnDestroy {
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,
@@ -86,9 +89,11 @@ export class DesignerComponent implements OnInit, OnDestroy {
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;
@@ -143,7 +148,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
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);
});
}
@@ -152,7 +157,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
this.cbaPackage = cba;
console.log(cba.templateTopology.content);
this.designerStore.saveSourceContent(cba.templateTopology.content);
+
});
+
/**
* the code to retrieve from server is commented
*/
@@ -186,9 +193,10 @@ export class DesignerComponent implements OnInit, OnDestroy {
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());
@@ -202,9 +210,14 @@ export class DesignerComponent implements OnInit, OnDestroy {
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);
+ }
+ }
}
});
@@ -426,13 +439,16 @@ export class DesignerComponent implements OnInit, OnDestroy {
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);
});
});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
index 8e1d88907..226f54399 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
@@ -18,10 +18,9 @@ See the License for the specific language governing permissions and
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'
@@ -31,6 +30,10 @@ export class GraphGenerator {
constructor(private graphUtil: GraphUtil) {
}
+ clear(boardGraph: joint.dia.Graph) {
+ boardGraph.clear();
+ }
+
/**
* loops over workflows
* create action element
@@ -79,7 +82,7 @@ export class GraphGenerator {
// 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;
@@ -91,7 +94,7 @@ export class GraphGenerator {
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') {