getDefinition: '/controllercatalog/model-type/by-definition',
getDerivedFrom: '/controllercatalog/model-type/by-derivedfrom'
};
+
+
+export const ActionElementTypeName = 'app.ActionElement';
-<app-header>
-</app-header>
-<p>package-viewing works!
+<app-header></app-header>
+
+<div class="new-wrapper">
+ <div class="container-fluid main-container">
+ <header class="page-title">
+ <div class="row">
+ <h2 class="col m-0">
+ <ul class="breadcrumb-header">
+ <li>CBA Packages</li>
+ <li>Package Name</li>
+ </ul>
+ </h2>
+ <!-- <div class="col d-flex justify-content-end header-button-save">
+ <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button>
+ <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
+ </div>-->
+ </div>
+ </header>
+
+
+
+ <div class="container-fluid body-container">
+
+ <div class="container">
+ <!-- <div class="creat-action-container">
+ <a href="#" class="action-button">
+ <i class="icon-clone" aria-hidden="true"></i>
+ <span>Clone</span>
+ </a>
+
+ <a href="#" class="action-button">
+ <i class="icon-archive" aria-hidden="true"></i>
+ <span>Archive</span>
+ </a>
+
+ <a href="#" class="action-button delete">
+ <i class="icon-delete" aria-hidden="true"></i>
+ <span>Delete</span>
+ </a>
+ </div>-->
+
+ <div class="card creat-card view-package-container">
+ <div class="row">
+ <div class="col-8">
+ <div class="row">
+ <div class="col d-flex">
+ <i class="package-type-icon icon-designer-mode"></i>
+ <div class="package-name-container">
+ <div class="row">
+ <div class="col-12 package-name deployed">
+ Package Name
+ <span>.vLB.CDS</span>
+ <i class="icon-deploy"></i>
+ </div>
+ <div class="col-12 package-description">
+ Last modified Oct 4, 2019 03:48 PM By Ahmed Abbas
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-4 package-view-button">
+ <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-play-circle"></i> Deploy</button>
+ <button class="btn btn-sm btn-primary">Designer Mode</button>
+ </div>
+ </div>
+
+ </div>
+
+ <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" id="nav-metadata-tab" data-toggle="tab"
+ href="#nav-metadata"
+ role="tab" aria-controls="nav-metadata"
+ aria-selected="true">METADATA</a>
+ <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
+ role="tab" aria-controls="nav-template"
+ aria-selected="false">TEMPLATE & MAPPING</a>
+ <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
+ role="tab" aria-controls="nav-scripts"
+ aria-selected="false">SCRIPTS</a>
+ <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
+ role="tab" aria-controls="nav-imports"
+ aria-selected="false">IMPORTS</a>
+ <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
+ href="#nav-authentication"
+ role="tab" aria-controls="nav-authentication"
+ aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+ </div>
+ </div>
+
+ </nav>
+ <div class="row mt-4">
+ <div class="col">
+ <div class="tab-content" id="nav-tabContent">
+ <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
+ aria-labelledby="nav-metadata-tab">
+ <app-metadata-tab></app-metadata-tab>
+ </div>
+ <div class="tab-pane fade" id="nav-template" role="tabpanel"
+ aria-labelledby="nav-template-tab">
+ <app-template-mapping></app-template-mapping>
+ </div>
+ <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
+ aria-labelledby="nav-scripts-tab">
+ <app-scripts-tab></app-scripts-tab>
+ </div>
+ <div class="tab-pane fade" id="nav-imports" role="tabpanel"
+ aria-labelledby="nav-imports-tab">
+ <app-imports-tab></app-imports-tab>
+
+ </div>
+ <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
+ aria-labelledby="nav-authentication-tab">
+ <div class="card creat-card">
+ <div class="editor-container">
+ <app-dsl-definitions-tab></app-dsl-definitions-tab>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
- {{viewedPackage!.artifactName}}}
-</p>
import {ActivatedRoute} from '@angular/router';
import {PackageStore} from './package.store';
import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model';
@Component({
this.configurationStore.getPagedPackages(id);
this.configurationStore.state$.subscribe(
el => {
+ const cbaPackage = new CBAPackage();
+
if (el && el.configuration) {
this.viewedPackage = el.configuration;
}
getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id);
-
}
}
[mode]="'push'"
#sidebarLeft>
<div class="row">
- <div class="col-12 p-0">
+ <!-- <div class="col-12 p-0">
<form>
<input type="text" class="form-control input-search-controller"
placeholder="Search actions and functions">
</form>
- </div>
+ </div> -->
<h1 class="col-12">Actions</h1>
<div class="col-12 text-center p-0">
<div class="btn-group actionBtns" role="group">
<button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button>
- <button type="button" class="btn">Import Action</button>
+ <!-- <button type="button" class="btn">Import Action</button> -->
</div>
</div>
- <div class="col-12 actionsList">
+ <!-- <div class="col-12 actionsList">
<b>Select from other packages:</b>
<div class="actions-scroll">
<div class="custom-control custom-checkbox">
<button type="button" class="btn btn-secondary mr-3">Insert</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
- </div>
+ </div> -->
<h1 class="col-12">Functions</h1>
<div id="palette-paper" class="col-12 componentsList">
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';
paletteGraph: joint.dia.Graph;
palettePaper: joint.dia.Paper;
- constructor() {
+ constructor(private designerStore: DesignerStore) {
this.controllerSideBar = true;
this.attributesSideBar = false;
}
this.initializeBoard();
this.initializePalette();
// this.createEditBarOverThePaper();
+
+ //functions list is contants for now
const list = [
{ modelName: 'component-netconf-executor'},
{ modelName: 'component-remote-ansible-executor' },
{ modelName: 'dg-generic' },
{ modelName: 'component-resource-resolution' }];
+ const cells = this.buildPaletteGraphFromList(list);
+ this.paletteGraph.resetCells(cells);
- const cells = this.buildPaletteGraphFromList(list);
- this.paletteGraph.resetCells(cells);
-
- let idx = 0;
- cells.forEach(cell => {
- console.log(cell);
- cell.translate(5, (cell.attributes.size.height + 5) * idx++);
+ let idx = 0;
+ cells.forEach(cell => {
+ console.log(cell);
+ cell.translate(5, (cell.attributes.size.height + 5) * idx++);
- });
- this.stencilPaperEventListeners();
+ });
+ this.stencilPaperEventListeners();
+ /**
+ * the code to retrieve from server is commented
+ */
+ // this.designerStore.state$.subscribe(state => {
+ // console.log(state);
+ // if (state.functions) {
+ // console.log('functions-->' , state.functions);
+ // // this.viewedFunctions = state.functions;
+ // const list = state.functions;
+ // }
+ // });
+ //action triggering
+ // this.designerStore.getFuntions();
+
}
initializePalette() {
var parentBbox = parent.getBBox();
var cellBbox = cell.getBBox();
-
- console.log("parent ", parentBbox);
- console.log("cell ", cellBbox);
if (parentBbox.containsPoint(cellBbox.origin()) &&
parentBbox.containsPoint(cellBbox.topRight()) &&
parentBbox.containsPoint(cellBbox.corner()) &&
insertCustomActionIntoBoard() {
this.actionIdCounter++;
- const element = this.createCustomAction("action_"+ this.actionIdCounter, 'Action' + this.actionIdCounter);
+ const actionId = "action_" + this.actionIdCounter;
+ const actionName = 'Action' + this.actionIdCounter;
+ const element = this.createCustomAction(actionId , actionName);
this.boardGraph.addCell(element);
+ console.log('saving action to store action workflow....');
+ this.designerStore.addDeclarativeWorkFlow(actionName);
}
createCustomAction(id: string, label: string) {
stencilPaperEventListeners() {
this.palettePaper.on('cell:pointerdown', (draggedCell, pointerDownEvent, x, y) => {
- console.log('pointerdown 2');
$('body').append(`
<div id="flyPaper"
if (mouseupX > target.left &&
mouseupX < target.left + this.boardPaper.$el.width() &&
mouseupY > target.top && y < target.top + this.boardPaper.$el.height()) {
- // const clonedShape = flyShape.clone();
- const type = flyShape.attributes.attrs.type;
- console.log(type);
-
- //create board function element of the same type of palette function
- //board function element is different in design from the palette function element
- this.fuctionIdCounter++;
- console.log(this.fuctionIdCounter);
- const functionElementForBoard =
- this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', type);
-
- functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y);
- this.boardGraph.addCell(functionElementForBoard);
- const cellViewsBelow =
- this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center());
- console.log(cellViewsBelow);
- if (cellViewsBelow.length) {
- let cellViewBelow;
- cellViewsBelow.forEach( cellItem => {
- if (cellItem.model.id !== functionElementForBoard.id) {
- cellViewBelow = cellItem;
- }
- });
+ const functionType = flyShape.attributes.attrs.type;
+ console.log(functionType);
+ const functionElementForBoard = this.dropFunctionOverAction(functionType, mouseupX, target, offset, mouseupY);
+
+ let parentCell = this.getParent(functionElementForBoard);
+
+ console.log("parentCell -->", parentCell);
+
+ if (parentCell &&
+ parentCell.model.attributes.type === ActionElementTypeName){
+
+ const actionName = parentCell.model.attributes.attrs['#label'].text;
+ this.designerStore.addStepToDeclarativeWorkFlow(actionName, functionType);
+ this.designerStore.addNodeTemplate(functionType);
// Prevent recursive embedding.
- if (cellViewBelow && cellViewBelow.model.get('parent') !== functionElementForBoard.id) {
- console.log(cellViewBelow);
- cellViewBelow.model.embed(functionElementForBoard);
+ if (parentCell &&
+ parentCell.model.get('parent') !== functionElementForBoard.id) {
+ parentCell.model.embed(functionElementForBoard);
}
- console.log(this.boardGraph);
+ }else{
+ console.log('function dropped outside action, rolling back...');
+ functionElementForBoard.remove();
}
-
}
$('body').off('mousemove.fly').off('mouseup.fly');
// flyShape.remove();
});
}
+ private getParent(functionElementForBoard: joint.shapes.board.FunctionElement) {
+ const cellViewsBelow = this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center());
+ let cellViewBelow;
+ if (cellViewsBelow.length) {
+ cellViewsBelow.forEach(cellItem => {
+ if (cellItem.model.id !== functionElementForBoard.id) {
+ cellViewBelow = cellItem;
+ }
+ });
+ }
+ return cellViewBelow;
+ }
+
+ /**
+ * trigger actions related to Function dropped over the board:
+ * - create board function element of the same type of palette function
+ * as board function element is different from the palette function element
+ * - save function to parent action in store
+ */
+ private dropFunctionOverAction(functionType: any, mouseupX: number, target: JQuery.Coordinates, offset: { x: number; y: number; }, mouseupY: number) {
+ this.fuctionIdCounter++;
+ const functionElementForBoard = this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', functionType);
+ functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y);
+ this.boardGraph.addCell(functionElementForBoard);
+ return functionElementForBoard;
+ }
/**
* this is a way to add the button like zoom in , zoom out , and source over jointjs paper
* may be used if no other way is found
import {Observable} from 'rxjs';
import {ApiService} from '../../../../common/core/services/api.typed.service';
import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
-import {ModelType} from '../model/ModelType.model';
+import {ModelType} from './model/ModelType.model';
@Injectable({
import {Injectable} from '@angular/core';
import {Store} from '../../../../common/core/stores/Store';
import {DesignerService} from './designer.service';
-import {ModelType} from '../model/ModelType.model';
-import {DesignerDashboardState} from '../model/designer-dashboard.state';
+import {ModelType} from './model/ModelType.model';
+import {DesignerDashboardState} from './model/designer.dashboard.state';
+import { DeclarativeWorkflow } from './model/designer.workflow';
+import { NodeTemplate } from './model/desinger.nodeTemplate.model';
@Injectable({
super(new DesignerDashboardState());
}
- public getFuntions() {
+ public retrieveFuntions() {
const modelDefinitionType = 'node_type';
this.designerService.getFunctions(modelDefinitionType).subscribe(
- (modelType: ModelType[]) => {
- console.log(modelType);
+ (modelTypeList: ModelType[]) => {
+ console.log(modelTypeList);
this.setState({
...this.state,
- functions: modelType,
+ serverFunctions: modelTypeList,
});
});
}
+
+ /**
+ * adds empty workflow with name only.
+ * called when blank action is added to the board
+ * declarative workflow just contain the steps but its order is determind by dg-graph
+ */
+ addDeclarativeWorkFlow(workflowName: string) {
+ this.setState({
+ ...this.state,
+ template: {
+ ...this.state.template,
+ workflows:
+ this.state.template.workflows.set(workflowName, new DeclarativeWorkflow())
+ }
+ });
+ }
+
+ addStepToDeclarativeWorkFlow(workflowName: string, stepType: string) {
+ const currentWorkflow: DeclarativeWorkflow = this.state.template.workflows.get(workflowName);
+ currentWorkflow.steps = {
+ target: stepType,
+ description: ''
+ };
+ const allNewWorkflowsMap =
+ this.state.template.workflows.set(workflowName, currentWorkflow);
+ this.setState({
+ ...this.state,
+ template: {
+ ...this.state.template,
+ workflows: allNewWorkflowsMap
+ }
+ });
+ }
+
+
+ addNodeTemplate(nodeTemplateName: string) {
+ this.setState({
+ ...this.state,
+ template: {
+ ...this.state.template,
+ node_templates:
+ this.state.template.node_templates.set(nodeTemplateName, new NodeTemplate())
+ }
+ });
+ }
}
import {Component, OnInit} from '@angular/core';
import {DesignerStore} from '../designer.store';
-import {ModelType} from '../../model/ModelType.model';
+import {ModelType} from '../model/ModelType.model';
@Component({
this.designerStore.state$.subscribe(state => {
console.log(state);
- if (state.functions) {
- this.viewedFunctions = state.functions;
+ if (state.serverFunctions) {
+ this.viewedFunctions = state.serverFunctions;
}
});
}
ngOnInit() {
- this.designerStore.getFuntions();
+ this.designerStore.retrieveFuntions();
}
}
import * as joint from 'jointjs';
+import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
/**
* please refer to documentation in file palette.function.element.ts to get more details
* about how to create new element type and define it in typescript
const rectHeight = 381;
// custom element implementation
// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
-const ActionElement = joint.shapes.standard.Rectangle.define('app.ActionElement', {
+const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
size: {width: rectWidth, height: rectHeight}
},
{
*/
import {ModelType} from './ModelType.model';
+import { TopologyTemplate } from './designer.topologyTemplate.model';
export class DesignerDashboardState {
- functions: ModelType[];
- actions: string[];
+ serverFunctions: ModelType[];
+ template: TopologyTemplate;
+ constructor() {
+ this.serverFunctions = [];
+ this.template = new TopologyTemplate();
+ }
}
--- /dev/null
+import { DeclarativeWorkflow } from './designer.workflow';
+import { NodeTemplate } from './desinger.nodeTemplate.model';
+
+export class TopologyTemplate {
+
+ workflows: Map<string, DeclarativeWorkflow>;
+ 'node_templates': Map<string, NodeTemplate>;
+
+ constructor() {
+ this.workflows = new Map();
+ this.node_templates = new Map();
+ }
+}
--- /dev/null
+export class Workflow {
+ inputs: {};
+ outputs?: {};
+}
+
+export class DeclarativeWorkflow implements Workflow {
+ steps: {};
+ inputs: {};
+ outputs?: {};
+
+ constructor() {
+ this.steps = {};
+ }
+}
--- /dev/null
+export class NodeTemplate {
+ type: string;
+ properties?: {
+ 'dependency-node-template'?: string[]
+ };
+ interfaces?: {};
+ artifacts?: {};
+ cabapilities?: {};
+ requirements?: {};
+}
<div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
data-parent="#accordion">
<div class="card-body">
- <ace-editor [(text)]="file.value" [mode]="'json'" [autoUpdateContent]="true"
+ <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'json'" [autoUpdateContent]="true"
[durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
style="height:300px;">
</ace-editor>
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
-import { Component, OnInit } from '@angular/core';
-import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
-import { PackageCreationStore } from '../package-creation.store';
-import { PackageCreationUtils } from '../package-creation.utils';
+import {Component, OnInit} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageCreationUtils} from '../package-creation.utils';
@Component({
resetTheUploadedFiles() {
this.uploadedFiles = [];
}
+
+ textChanges(code: any, key: string) {
+ this.packageCreationStore.addDefinition(key, code);
+ }
}
-import { Component, OnInit } from '@angular/core';
-import { PackageCreationService } from '../package-creation.service';
-import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model';
-import { PackageCreationStore } from '../package-creation.store';
+import {Component, OnInit} from '@angular/core';
+import {PackageCreationService} from '../package-creation.service';
+import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageStore} from '../../configuration-dashboard/package.store';
@Component({
tags = new Set<string>();
customKeysMap = new Map();
modes: object[] = [
- { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' },
- { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' },
- { name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode' }];
+ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+ {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'},
+ {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}];
private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
private errorMessage: string;
- constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore) {
+ constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore,
+ private packageStore: PackageStore) {
}
this.metaDataTab.templateTags = this.tags;
this.metaDataTab.mapOfCustomKey = this.customKeysMap;
this.packageCreationStore.changeMetaData(this.metaDataTab);
+
+ this.packageStore.state$.subscribe(element => {
+ if (element && element.configuration) {
+ this.metaDataTab.name = element.configuration.artifactName;
+ this.metaDataTab.version = element.configuration.artifactVersion;
+ this.metaDataTab.tags = element.configuration.tags;
+ this.metaDataTab.description = element.configuration.artifactDescription;
+ }
+ });
}
removeTag(value) {
// console.log(event);
this.tags.delete(value);
}
+
addTag(event) {
const value = event.target.value;
console.log(value);
console.log(event);
this.customKeysMap.delete(key);
}
+
addCustomKey() {
// tslint:disable-next-line: no-string-literal
const key = document.getElementsByClassName('mapKey')[0];
value['value'] = '';
}
}
+
validatePackageNameAndVersion() {
if (this.metaDataTab.name && this.metaDataTab.version) {
this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
<div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
data-parent="#accordion-script">
<div class="card-body">
- <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true"
+ <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'" [autoUpdateContent]="true"
[durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
style="height:300px;">
</ace-editor>
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
-import { Component, OnInit } from '@angular/core';
-import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
-import { PackageCreationStore } from '../package-creation.store';
-import { PackageCreationUtils } from '../package-creation.utils';
+import {Component, OnInit} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageCreationUtils} from '../package-creation.utils';
import 'ace-builds/src-noconflict/ace';
import 'ace-builds/webpack-resolver';
resetTheUploadedFiles() {
this.uploadedFiles = [];
}
+
+ textChanges(code: any, key: string) {
+ this.packageCreationStore.addScripts(key, code);
+ }
}
File</a></div>
<div class="editor-container">
<app-source-editor
- [(text)]="templateInfo.fileContent"></app-source-editor>
+ (textChange)="textChanges($event,templateInfo.fileName)" [(text)]="templateInfo.fileContent"></app-source-editor>
</div>
</div>
</div>
}
initTemplateMappingTableFromCurrentTemplate() {
+ console.log('happend');
if (this.variables && this.variables.length > 0) {
this.packageCreationStore.getTemplateAndMapping(this.variables);
}
}
+
+ textChanges(code: any, fileName: string) {
+ this.packageCreationStore.addTemplate(fileName, code);
+ }
}
Code Review / ccsdk / cds.git / commitdiff