diff options
25 files changed, 756 insertions, 307 deletions
diff --git a/cds-ui/application/pom.xml b/cds-ui/application/pom.xml index 4d8f8593d..444e8829a 100644 --- a/cds-ui/application/pom.xml +++ b/cds-ui/application/pom.xml @@ -89,7 +89,6 @@ limitations under the License. <executions> <execution> <id>build-push-images</id> - <phase>${docker.push.phase}</phase> <goals> <goal>build</goal> <goal>push</goal> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html index 051ef1634..63cf4bd6c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html @@ -3,8 +3,7 @@ <div class="col"> <div class="form-group"> <label for="exampleInputEmail1">Action Name</label> - <input type="text" class="form-control" placeholder="Action Name" - value="resource-assignment"> + <input type="text" class="form-control" placeholder="Action Name" value="resource-assignment"> </div> </div> </div> @@ -15,15 +14,13 @@ <div class="row"> <div class="col pr-0 text-center"> <button type="button" data-toggle="modal" data-target="#exampleModalScrollable" - class="btn btn-secondary"><i class="icon-custom-attribute" type="button" - aria-hidden="true"></i></button> + class="btn btn-secondary"><i class="icon-custom-attribute" type="button" + aria-hidden="true"></i></button> <span>Custom Attribute</span> - - </div> <div class="col text-center"> - <button type="button" class="btn btn-secondary"><i class="icon-function-attribute" - type="button" aria-hidden="true"></i></button> + <button type="button" class="btn btn-secondary"><i class="icon-function-attribute" type="button" + aria-hidden="true"></i></button> <span>Function Attribute</span> </div> </div> @@ -32,31 +29,30 @@ <!--INPUTS--> <div class="accordion" id="accordionExample"> <div class="card"> - <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Inputs - </button> + <div class="card-header" id="headingOne"> + <h2 class="mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" + aria-expanded="true" aria-controls="collapseOne"> + Inputs + </button> + </h2> </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body action-attributes"> <div class="row"> <div class="col"> <div class="form-group" *ngFor="let input of inputs"> <label for="exampleFormControlTextarea1">{{input.name}} - <i [hidden]="!input.required" class="icon-required-star" - type="button" aria-hidden="true"></i> + <i [hidden]="!input.required" class="icon-required-star" type="button" + aria-hidden="true"></i> <i [hidden]="input.required" type="button" aria-hidden="true"></i> </label> <div class="attributeOptions"> <a data-toggle="modal" data-target="#exampleModalScrollable2" - class="accordion-delete editAttribute" - tooltip="Edit Attribute" placement="bottom"><i - class="icon-edit"></i></a> - <a class="accordion-delete deleteAttribute" - tooltip="Delete Attribute" placement="bottom"><i - class="icon-delete-sm"></i></a> + class="accordion-delete editAttribute" tooltip="Edit Attribute" + placement="bottom"><i class="icon-edit"></i></a> + <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute" + placement="bottom"><i class="icon-delete-sm"></i></a> </div> </div> </div> @@ -68,25 +64,26 @@ <!--OUTPUTS--> <div class="accordion" id="accordionExample1"> <div class="card"> - <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> - Outputs - </button> + <div class="card-header" id="headingOne"> + <h2 class="mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" + aria-expanded="true" aria-controls="collapseTwo"> + Outputs + </button> + </h2> </div> - <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample1"> + <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1"> <div class="card-body"> <div class="row"> <div class="col"> <div class="form-group" *ngFor="let output of outputs"> <label for="exampleFormControlTextarea1">{{output.name}} - <i [hidden]="output.required" - class="icon-required-star optional-attribute" type="button" - aria-hidden="true"></i> - <i [hidden]="output.required" class="optional-attribute" - type="button" aria-hidden="true"></i> + <i [hidden]="output.required" class="icon-required-star" type="button" + aria-hidden="true"></i> + <i [hidden]="!output.required" class="optional-attribute" type="button" + aria-hidden="true"></i> + </label> </div> </div> @@ -98,14 +95,14 @@ </div> <!--Action - Add Custom Attribute - Modal--> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> - <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> + aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle"> Add Custom Attributes</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 createAttributeTabs"> @@ -113,57 +110,56 @@ <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" - aria-controls="home" aria-selected="true">Inputs</a> + aria-controls="home" aria-selected="true">Inputs</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" - aria-controls="profile" aria-selected="false">Outputs</a> + aria-controls="profile" aria-selected="false">Outputs</a> </li> </ul> <div class="tab-content" id="myTabContent"> <!--INPUTS Tab--> <div class="tab-pane fade show active create-form" id="home" role="tabpanel" - aria-labelledby="home-tab"> + aria-labelledby="home-tab"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label> <div class="col-sm-9"> <input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control" - id="inputEmail3" placeholder="Attribute name"> + id="inputEmail3" placeholder="Attribute name"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label> <div class="col-sm-9"> <input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control" - id="inputPassword3" - placeholder="Add some description"> + id="inputPassword3" placeholder="Add some description"> </div> </div> <div class="form-group row"> <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label> <div class="col-sm-9"> <div class="list-group list-group-horizontal"> - <button type="button" - class="list-group-item list-group-item-action" - (click)="setInputType('String')"> + <button type="button" class="list-group-item list-group-item-action" + (click)="setInputType('String')"> String </button> - <button type="button" - class="list-group-item list-group-item-action" - (click)="setInputType('Integer')">Integer + <button type="button" class="list-group-item list-group-item-action" + (click)="setInputType('Integer')">Integer </button> - <button type="button" - class="list-group-item list-group-item-action" - (click)="setInputType('Boolean')">Boolean + <button type="button" class="list-group-item list-group-item-action" + (click)="setInputType('Boolean')">Boolean </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('List')">List + (click)="setInputType('List')">List </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('Other')">Other + (click)="setInputType('Other')">Other </button> - </div> + <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2" + id="inputPassword4" placeholder="Add Other type name" [(ngModel)]="inputOtherType" + (change)="setInputType(inputOtherType)"> + </div> </div> <div class="form-group row"> @@ -171,12 +167,12 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInline1" - class="custom-control-input" (click)="setInputRequired(true)"> + class="custom-control-input" (click)="setInputRequired(true)"> <label class="custom-control-label" for="customRadioInline1">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInline1" - class="custom-control-input" (click)="setInputRequired(false)"> + class="custom-control-input" (click)="setInputRequired(false)"> <label class="custom-control-label" for="customRadioInline2">False</label> </div> </div> @@ -188,15 +184,14 @@ <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label> <div class="col-sm-9"> <input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control" - id="inputEmail3" placeholder="Attribute name"> + id="inputEmail3" placeholder="Attribute name"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label> <div class="col-sm-9"> - <input [(ngModel)]="outputActionAttribute.description" - type="text" class="form-control" id="inputPassword3" - placeholder="Add some description"> + <input [(ngModel)]="outputActionAttribute.description" type="text" class="form-control" + id="inputPassword3" placeholder="Add some description"> </div> </div> <div class="form-group row"> @@ -204,28 +199,26 @@ <div class="col-sm-9"> <div class="list-group list-group-horizontal"> <button type="button" class="list-group-item list-group-item-action">String</button> - <button type="button" - class="list-group-item list-group-item-action" - (click)="setOutputType('Integer')"> + <button type="button" class="list-group-item list-group-item-action" + (click)="setOutputType('Integer')"> Integer </button> - <button type="button" - class="list-group-item list-group-item-action" - (click)="setOutputType('Boolean')"> + <button type="button" class="list-group-item list-group-item-action" + (click)="setOutputType('Boolean')"> Boolean </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('List')"> + (click)="setOutputType('List')"> List </button> - <button type="button" - class="list-group-item list-group-item-action" - (click)="setOutputType('Other')"> + <button type="button" class="list-group-item list-group-item-action" + (click)="setOutputType('Other')"> Other </button> </div> - <input type="text" class="form-control mt-2 mb-2" id="inputPassword3" - placeholder="Add Other type name"> + <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2" + id="inputPassword3" placeholder="Add Other type name" [(ngModel)]="outputOtherType" + (change)="setOutputType(outputOtherType)"> </div> </div> <div class="form-group row"> @@ -233,14 +226,14 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInline1" - class="custom-control-input" (click)="setOutputRequired(true)"> + class="custom-control-input" (click)="setOutputRequired(true)"> <label class="custom-control-label" for="customRadioInline1">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInline1" - class="custom-control-input"> + class="custom-control-input"> <label class="custom-control-label" for="customRadioInline2" - (click)="setOutputRequired(false)">False</label> + (click)="setOutputRequired(false)">False</label> </div> </div> </div> @@ -256,14 +249,14 @@ </div> <!--Delete Action - Modal--> <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true"> - <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> + aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle1"> Delete Action</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"> @@ -278,14 +271,14 @@ </div> <!--Action - Edit Custom Attribute - Modal--> <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true"> - <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> + aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle2"> Edit Custom Attributes</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 createAttributeTabs"> @@ -294,23 +287,22 @@ <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name" - value="resource-assignment-properties"> + value="resource-assignment-properties"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label> <div class="col-sm-9"> <input type="text" class="form-control" id="inputPassword3" - placeholder="Add some description" - value="Dynamic PropertyDefinition for workflow(resource-assignment)."> + placeholder="Add some description" + value="Dynamic PropertyDefinition for workflow(resource-assignment)."> </div> </div> <div class="form-group row"> <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label> <div class="col-sm-9"> <div class="list-group list-group-horizontal"> - <button type="button" - class="list-group-item list-group-item-action">String + <button type="button" class="list-group-item list-group-item-action">String </button> <button type="button" class="list-group-item list-group-item-action">Integer</button> <button type="button" class="list-group-item list-group-item-action">Boolean</button> @@ -319,7 +311,7 @@ </button> </div> <input type="text" class="form-control mt-2 mb-2" id="inputPassword3" - placeholder="Add Other type name" value="dt-resource-assignment-properties"> + placeholder="Add Other type name" value="dt-resource-assignment-properties"> </div> </div> <div class="form-group row"> @@ -327,12 +319,12 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInline1" - class="custom-control-input" checked> + class="custom-control-input" checked> <label class="custom-control-label" for="customRadioInline1">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInline1" - class="custom-control-input"> + class="custom-control-input"> <label class="custom-control-label" for="customRadioInline2">False</label> </div> </div> @@ -345,4 +337,4 @@ </div> </div> </div> -</div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts index f4f74a9fd..ee4b19930 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts @@ -1,5 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {InputActionAttribute, OutputActionAttribute} from './models/InputActionAttribute'; +import {DesignerStore} from '../designer.store'; @Component({ selector: 'app-action-attributes', @@ -13,28 +14,35 @@ export class ActionAttributesComponent implements OnInit { actionAttributesSideBar: boolean; inputActionAttribute = new InputActionAttribute(); outputActionAttribute = new OutputActionAttribute(); + isInputOtherType: boolean; + isOutputOtherType: boolean; + outputOtherType = ''; + inputOtherType = ''; - constructor() { + constructor(private designerStore: DesignerStore) { } ngOnInit() { } - _toggleSidebar2() { - this.actionAttributesSideBar = !this.actionAttributesSideBar; - } - addInput(input: InputActionAttribute) { - this.inputs.push(input); + if (input && input.type && input.name) { + const insertedInputActionAttribute = Object.assign({}, input); + this.inputs.push(insertedInputActionAttribute); + } } addOutput(output: OutputActionAttribute) { - this.outputs.push(output); + if (output && output.type && output.name) { + const insertedOutputActionAttribute = Object.assign({}, output); + this.outputs.push(insertedOutputActionAttribute); + } } - setInputType(type) { + setInputType(type: string) { this.inputActionAttribute.type = type; + this.isInputOtherType = this.checkIfTypeIsOther(type); } setInputRequired(isRequired) { @@ -45,14 +53,60 @@ export class ActionAttributesComponent implements OnInit { this.outputActionAttribute.required = isRequired; } - setOutputType(type) { + setOutputType(type: string) { this.outputActionAttribute.type = type; + this.isOutputOtherType = this.checkIfTypeIsOther(type); + } + + checkIfTypeIsOther(type) { + return type.includes('Other'); } submitAttributes() { console.log(this.inputActionAttribute); console.log(this.outputActionAttribute); - this.inputs.push(this.inputActionAttribute); - this.outputs.push(this.outputActionAttribute); + this.addInput(this.inputActionAttribute); + this.addOutput(this.outputActionAttribute); + this.clearFormInputs(); + console.log(this.storeInputs(this.inputs)); + this.designerStore.setInputsToSpecificWorkflow(this.storeInputs(this.inputs)); + console.log(this.storeOutputs(this.outputs)); + } + + private clearFormInputs() { + this.inputActionAttribute = new InputActionAttribute(); + this.outputActionAttribute = new OutputActionAttribute(); + this.outputOtherType = ''; + this.inputOtherType = ''; + } + + private storeInputs(InputActionAttributes: InputActionAttribute[]) { + + let inputs = ''; + InputActionAttributes.forEach(input => { + inputs += this.appendAttributes(input); + + }); + const returnedInputMap = new Map<string, string>(); + returnedInputMap.set('inputs', inputs); + return returnedInputMap; + } + + private storeOutputs(OutputActionAttributes: OutputActionAttribute[]) { + let outputs = ''; + OutputActionAttributes.forEach(output => { + outputs += this.appendAttributes(output); + }); + const returnedOutputMap = new Map<string, string>(); + returnedOutputMap.set('outputs', outputs); + return returnedOutputMap; + } + + private appendAttributes(output: OutputActionAttribute) { + return '"' + output.name + '":{\n' + + ' \'required\': ' + output.required + ',\n' + + ' \'type\': "' + output.type + '",\n' + + ' \'description\': "' + output.description + '"\n' + + ' }' + '\n'; } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts index 3aa370360..b4cce3484 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts @@ -8,7 +8,7 @@ export class InputActionAttribute { this.name = ''; this.description = ''; this.type = ''; - this.required = false; + this.required = true; } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index 43f3818a0..1d2a939bd 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -87,6 +87,14 @@ header{ color: #1B3E6F; font-size: 10px; } +.template-list.active { + display: inline; + padding: 4px 10px; + background: #F4F9FE; + border-radius: 10px; + color: #1B3E6F; + font-size: 10px; +} .designer-breadcrumb .fa-angle-right::before { color: #fff; line-height: 38px; @@ -259,8 +267,9 @@ button.rotate{ text-decoration: none; } #board-paper svg{ - top: 70px; + top: 30px; left: 0; + height: 95%; } .componentsList tspan{ /* width:30px !important; */ @@ -279,8 +288,9 @@ tspan#type{ /*ACTIONS & COMPONENTS MENU*/ .input-search-controller{ height: 40px; - padding-left: 42px; - background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat; + padding-left: 36px; + background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat; + background-size: 4.5%; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; @@ -289,7 +299,7 @@ tspan#type{ } .input-search-controller::placeholder{ color: #D0D7E4; - font-size: 11px; + font-size: 12px; } .input-search-controller:focus{ background-color: #fff !important; @@ -375,7 +385,11 @@ p.compType-4{ font-size: 12px; color: #C3CDDB; } - +.controllerSidebar .joint-paper{ + width: 98% !important; + height: 72vh !important; + margin: 0 !important; +} .actionBtns .btn{ margin: 0px 15px 16px -90px; /* padding: 9px 20px; */ @@ -390,7 +404,7 @@ p.compType-4{ .new-action:hover{ margin: 9px 0 4px 3px; padding: 6px; - font-size: 12px; + font-size: 13px; font-weight: bold; color: #1B3E6F; } @@ -424,6 +438,12 @@ p.compType-4{ height: 65vh !important; overflow-y: auto; } +.actionsList ul{ + padding-left: 0; +} +.actionsList li{ + list-style: none; +} .componentsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; @@ -449,10 +469,10 @@ p.compType-4{ color: #C7D0DD; font-size: 12px; } -.custom-control-input:checked ~ .custom-control-label{ +/* .custom-control-input:checked ~ .custom-control-label{ background-color: #1B3E6F !important; color: #fff; -} +} */ .inserActionBtns .btn{ border-radius: 15px !important; padding: 6px 20px; @@ -699,6 +719,9 @@ p.compType-4{ .add-attribute .btn:hover i::before{ color: #fff; } +.add-attribute .btn:focus{ + box-shadow: none; +} .icon-function-attribute{ font-size: 18px; } @@ -741,10 +764,12 @@ p.compType-4{ font-size: 14px; } .attributesContainer label{ + margin-bottom: 0; color: #1B3E6F; /* text-transform: uppercase; */ font-size: 12px; font-weight: bold; + line-height: 32px; } .attributesContainer label.custom-control-label{ text-transform: unset; @@ -789,7 +814,7 @@ p.compType-4{ border: 0; } .attributeOptions a:not(:first-child){ - margin-left: 18px; + margin-left: 14px; } .attributeOptions i{ color: #103D73 !important; @@ -820,6 +845,7 @@ p.compType-4{ } .btn-select-template{ + display: inherit; background-color: #C3CDDB; border-radius: 2px; color: #1B3E6F; @@ -834,6 +860,11 @@ p.compType-4{ margin-bottom: 9px; border-bottom: solid 1px #F4F9FE; } +.function-accordion .attribute-wrap:nth-last-child(1){ + margin-bottom: 0; + padding-bottom: 0; + border-bottom: 0; +} .attribute-wrap .form-group{ margin-bottom: 0; } @@ -855,19 +886,30 @@ p.compType-4{ color: #103D73; font-size: 10px !important; } +/*Accordion*/ .accordion{ margin-top: 12px; } +.accordion .card-header .btn-link{ + padding-left: 20px !important; + padding-right: 20px !important; +} .accordion > .card{ + box-shadow: none; margin-bottom: 0 !important; - border: 0; +} +.accordion > .card .card-body{ + padding-bottom: 0 !important; +} +.function-accordion .card{ + overflow: inherit !important; box-shadow: none; } -.card-header .btn-link, +/* .accordion .card-header .btn-link[aria-expanded="true"], .accordion .card-header .btn-link[aria-expanded="false"]{ - padding-left: 15px !important; - padding-right: 15px !important; + padding-left: 20px !important; + padding-right: 20px !important; } .accordion > .card .card-header{ margin: 0; @@ -903,7 +945,11 @@ p.compType-4{ float: left; font-weight: normal; font-size: 12px; -} +} */ + + + + /* .accordion .card-header .btn-link[aria-expanded="true"]:after{ content: "\f078"; } @@ -1000,9 +1046,9 @@ p.compType-4{ .joint-paper{ - width: 94% !important; - height: 100vh !important; - margin: 0 auto !important; + width: 96.4% !important; + height: 80vh !important; + margin: 60px auto 0 !important; } ul.templateLegend{ margin: 0; @@ -1049,9 +1095,163 @@ ul.editor{ font-size: 12px; } /*Modal*/ -.modal-backdrop{z-index: -1} -.modal-holder.modal-backdrop{z-index: 100} -.modal-holder + .modal-dialog {z-index: 1000} +.modal{ + top: 60px; +} +.modal-backdrop{ + z-index: 0 !important; + opacity: 0 !important; +} +/* .modal-holder.modal-backdrop{z-index: 100} +.modal-holder + .modal-dialog {z-index: 1000} */ .modal-dialog{ - max-width: 680px; + max-width: 50%; +} +.modal-body{ + font-size: 14px; +} +.createAttributeTabs .nav-link{ + padding-top: 0 !important; +} +.createAttributeTabs .nav-item a, +.createAttributeTabs .nav-item a.active{ + border-radius: 0 !important; +} +.createAttributeTabs .nav-link{ + text-transform: uppercase !important; + border-radius: 0 !important; + border: 0 !important; +} +.createAttributeTabs .nav-link.active{ + border-radius: 0 !important; + border-bottom: solid 1px #1B3E6F !important; +} +.createAttributeTabs .nav-item{ + margin-left: 50px; +} +.createAttributeTabs .tab-content{ + margin-top: 20px; + padding: 20px 50px; + border: solid 1px #F4F9FE; +} +/*FORM*/ +.create-form .col-form-label{ + color: #1B3E6F; + font-size: 12px; + font-weight: bold; +} +.create-form .col-form-label span{ + color: #FF6469; +} +.create-form .form-control{ + margin-bottom: 9px; + padding-left: 0; + padding-right: 0; + border-radius: 0; + border: 0; + border-bottom: solid 1px #EFEFF4; + font-size: 13px; + box-shadow: none !important; + color: #1B3E6F; +} +.create-form .form-control::placeholder{ + color: #C3CDDB; +} +.create-form .form-control:focus{ + border-bottom-color: #1B3E6F; + -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; + -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; + box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; + background-color: transparent !important; + text-shadow: none; +} +.list-group-item{ + margin-bottom: 9px; + padding: 9px 1.25rem; + border-color: #E6EDF5; + font-size: 11px; + color: #1B3E6F; + font-weight: bold; + text-align: center; +} +.list-group-item.active{ + color: #1B3E6F; + background-color: #C3CDDB; + border-color: #C3CDDB; +} +.list-group-horizontal .list-group-item + .list-group-item{ + border-left-width: 1px; +} +.create-form .custom-control-input:checked ~ .custom-control-label{ + background-color: transparent !important; + color: #1B3E6F; +} +/*Optional Attributes Menu*/ +.optional-attributes-menu{ + margin-top: 20px; + padding: 10px 20px; + border-top: solid 1px #ECEDF2; + border-bottom: solid 1px #ECEDF2; + background-color: #F4F9FE; +} +.optional-attributes-menu .dropdown{ + width: 100%; +} +.optional-attributes-menu .dropdown-text, +.optional-attributes-menu .dropdown-text:hover, +.optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text, +.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{ + top: 0; + text-align: center; + font-weight: normal; + text-indent: 0; + background-color: #fff; + box-shadow: none; + border: solid 1px #C1CDDD; + border-radius: 2px; +} +.optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text, +.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{ + background-color: #D0DFF1 !important; + border-color: #C1CDDD; + border-radius: 2px !important; + color: #1B3E6F !important; +} +.optional-attributes-menu .dropdown-text i{ + font-size: 17px; + vertical-align: middle; +} +.optional-attributes-menu .dropdown-content:hover, +.optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-content{ + top: 36px; + width: 100%; + padding: 5px 0; + border-radius: 2px; + background-color: #F4F9FE; + border-color: #D0DFF1; + font-size: 13px; +} +.optional-attributes-menu .dropdown-content li{ + padding: 0 5px; + line-height: 36px; + border-bottom: solid 1px #EAF4FF; +} +.optional-attributes-menu .dropdown-content li a{ + display: inline; +} +.optional-attributes-menu .dropdown-content li:hover, +.optional-attributes-menu .dropdown-content li:hover a{ + background-color: #D0DFF1; +} +.optional-attributes-menu li i{ + font-size: 20px; + margin-top: 10px; + margin-right: 10px; +} + +.temp-buttons .btn{ + font-size: 13px; + margin: 12px; + padding: 8px 12px !important; + line-height: 14px; }
\ No newline at end of file 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 537a0a8ca..d4fea67bb 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 @@ -11,8 +11,8 @@ <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item"> <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> - <button type="button" class="btn package-info-btn" data-toggle="modal" - data-target="#exampleModalLong"> + <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal" + data-target="#exampleModalLong" data-tooltip="Package Details"> <i class="icon-info" aria-hidden="true"></i> </button> </li> @@ -192,14 +192,19 @@ aria-labelledby="nav-action-tab"> <!--Action Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> - <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary"> - Action Attributes - </button> - <br/><br/> - <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary"> - Function Attributes - </button> - <br/> + + <div class="row temp-buttons"> + <div class="col text-center"> + <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary"> + Action Attributes + </button> + </div> + <div class="col text-center"> + <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary"> + Function Attributes + </button> + </div> + </div> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action"> + New Action </button> @@ -277,8 +282,7 @@ <div class="row m-0 attributesContainertTitle"> <div class="col-2 pl-0"> <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom"> - <i - class="icon-close" type="button" aria-hidden="true"></i></button> + <i class="icon-close" type="button" aria-hidden="true"></i></button> </div> <h6 class="col pl-0">Action Attributes</h6> <div class="col-3 pl-0"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts index e07fbb94d..923d59e91 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts @@ -145,6 +145,17 @@ export class DesignerStore extends Store<DesignerDashboardState> { }); } + setInputsToSpecificWorkflow(inputs: Map<string, string>) { + const mapOfWorkflows = this.state.template.workflows; + /*mapOfWorkflows.forEach(((value, key) => { + if (value.includes('resource-assignment')) { + value += inputs; + } + }));*/ + console.log('the new workflows'); + console.log(mapOfWorkflows); + } + clear() { this.setState(new DesignerDashboardState()); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html index c89a96de0..91386fd66 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html @@ -5,7 +5,7 @@ <label for="exampleInputEmail1">Function Instance Name</label> <input type="text" class="form-control" placeholder="Function Instance Name"> </div> - <div class="form-group"> + <div class="form-group mb-0"> <label>Function Type</label> <label class="attribute-value">component-resource-resolution</label> </div> @@ -15,164 +15,231 @@ </div> </div> </div> - <!--INTERFACES--> - <div class="accordion" id="accordionExample"> + + <div class="accordion function-accordion" id="accordionExample"> + <!--INTERFACES--> <div class="card"> - <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Interfaces - </button> + <div class="card-header" id="headingOne"> + <h2 class="mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" + aria-expanded="true" aria-controls="collapseOne"> + Interfaces + </button> + </h2> </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <!--Inputs & Outputs Tabs--> <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" - href="#pills-home" role="tab" aria-controls="pills-home" - aria-selected="true">Inputs</a> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" + role="tab" aria-controls="pills-home" aria-selected="true">Inputs</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" - href="#pills-profile" role="tab" aria-controls="pills-profile" - aria-selected="false">Outputs</a> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" + role="tab" aria-controls="pills-profile" aria-selected="false">Outputs</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> + <!--Inputs--> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" - aria-labelledby="pills-home-tab"> + aria-labelledby="pills-home-tab"> <div class="row"> <div class="col"> <!--list--> <div class="attribute-wrap"> <div class="form-group"> - <label - for="exampleFormControlTextarea1">artifact-prefix-names + <label for="exampleFormControlTextarea1">artifact-prefix-names <i class="icon-required-star" type="button" - aria-hidden="true"></i></label> + aria-hidden="true"></i></label> </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline1" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline1">Pre-defined + <div class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline1" name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" for="customRadioInline1">Pre-defined Template</label> </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline2" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline2">Input Drivin + <div class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline2" name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" for="customRadioInline2">Input Drivin Template</label> </div> <br /> - <button type="button" class="btn btn-select-template"><i - class="icon-add-circle" type="button" - aria-hidden="true"></i> Select Template</button> + <button type="button" data-toggle="modal" data-target="#templateModal" + class="btn btn-select-template m-auto"><i class="icon-add-circle" + type="button" aria-hidden="true"></i> Select Template</button> </div> <!--string--> - <div class="attribute-wrap"> + <div class="attribute-wrap" *ngFor="let requiredInput of requiredInputs"> <div class="form-group"> - <label for="exampleInputEmail1">resoluton-key <i + <label for="exampleInputEmail1">{{ getObjectKey(requiredInput)[0] }}<i class="icon-required-star" type="button" aria-hidden="true"></i></label> <input type="text" class="form-control"> </div> </div> <!--integer--> - <div class="attribute-wrap"> + <!-- <div class="attribute-wrap"> <div class="form-group"> - <label for="exampleInputEmail1">request-id <i - class="icon-required-star" type="button" - aria-hidden="true"></i></label> - <input type="number" class="form-control" placeholder="" - value="356"> + <label for="exampleInputEmail1">request-id <i class="icon-required-star" + type="button" aria-hidden="true"></i></label> + <input type="number" class="form-control" placeholder="" value="356"> </div> - </div> + </div> --> <!--boolean--> - <div class="attribute-wrap"> + <!-- <div class="attribute-wrap"> <div class="form-group"> - <label - for="exampleFormControlTextarea1">resolution-summary - <i class="icon-required-star optional-attribute" - type="button" aria-hidden="true"></i></label> + <label for="exampleFormControlTextarea1">resolution-summary + <i class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline1" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline1">True</label> + <div class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline1" name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" for="customRadioInline1">True</label> </div> - <div - class="custom-control custom-radio custom-control-inline"> - <input type="radio" id="customRadioInline2" - name="customRadioInline1" - class="custom-control-input"> - <label class="custom-control-label" - for="customRadioInline2">False</label> + <div class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline2" name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" for="customRadioInline2">False</label> + </div> + </div> --> + </div> + </div> + <!-- Add Optional Attributes button --> + <div class="row"> + <div class="col p-0"> + <div class="optional-attributes-menu"> + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"> + <i class="icon-add-circle" type="button" aria-hidden="true"></i> Add + Optional Attributes + </div> + <ul class="dropdown-content save-blueprint"> + <li> + <a>resolution-key</a> + <i class="icon-add-circle float-right" type="button" + aria-hidden="true"></i> + </li> + <li> + <a>occurrence</a> + <i class="icon-add-circle float-right" type="button" + aria-hidden="true"></i> + </li> + <li> + <a>store-result</a> + <i class="icon-add-circle float-right" type="button" + aria-hidden="true"></i> + </li> + </ul> </div> </div> - <!-- Add Optional Attributes button --> </div> </div> </div> + <!--Outputs--> + <!-- Optional params --> <div class="tab-pane fade" id="pills-profile" role="tabpanel" - aria-labelledby="pills-profile-tab">2</div> + aria-labelledby="pills-profile-tab"> + <div class="attribute-wrap" *ngFor="let requiredOutput of requiredOutputs"> + <div class="form-group"> + <label for="exampleInputEmail1">{{ getObjectKey(requiredOutput)[0] }} <i + class="icon-required-star" type="button" aria-hidden="true"></i></label> + <input type="text" class="form-control"> + </div> + </div> + </div> </div> </div> </div> </div> - </div> <!--ARTIFACTS--> - <div class="accordion" id="accordionExample1"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> - Artifacts - </button> + <div class="card" [hidden]="selectedTemplates.size == 0" class="accordion" id="accordionExample1"> + <div class="card-header" id="headingTwo"> + <h2 class="mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" + aria-expanded="true" aria-controls="collapseTwo"> + Artifacts + </button> + </h2> </div> - - <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample1"> + <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <div class="row"> - <div class="col-12"> + <div class="col-12" *ngFor="let file of getKeys(selectedTemplates)"> <a class="template-mapping-list"> - <p>baseconfig</p> - <span>Mapping</span> - <span>Template</span> + <p>{{file}}</p> + <span *ngIf="getValue(file).isMapping">Mapping</span> + <span *ngIf="getValue(file).isTemplate">Template</span> - <a data-toggle="modal" - data-target="#templateDeletionModal" - class="accordion-delete deleteTemplate" - title="Delete Template"><i class="icon-delete-sm"></i></a> + <a data-toggle="modal" (click)="fileToDelete = file" + data-target="#templateDeletionModal" class="accordion-delete deleteTemplate" + title="Delete Template"><i class="icon-delete-sm"></i></a> </a> </div> - <div class="col-12"> - <a class="template-mapping-list"> - <p>vpkg</p> - <span>Mapping</span> - <span>Template</span> - <a data-toggle="modal" - data-target="#templateDeletionModal" - class="accordion-delete deleteTemplate" - title="Delete Template"><i class="icon-delete-sm"></i></a> - </a> - </div> </div> </div> </div> </div> </div> </div> + +<!--function - Select Template - Modal--> +<div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalTitle" + aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="templateModalTitle"> + Select Pre-defined Tempalte Name</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <img src="assets/img/icon-close.svg" /> + </button> + </div> + <div class="modal-body createAttributeTabs"> + <div class="col-4" *ngFor="let file of getKeys(templateAndMappingMap)"> + <a class="template-mapping-list float" [ngClass]="{'active':selectedTemplates.has(file)}"> + <p (click)="setTemplate(file)">{{file}}</p> + <span *ngIf="getValue(file).isMapping">Mapping</span> + <span *ngIf="getValue(file).isTemplate">Template</span> + </a> + + </div> + + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="addTemplates()">Add + Templates</button> + </div> + </div> + </div> +</div> + +<!-- Delete Modal --> +<div class="modal fade" id="templateDeletionModal" tabindex="-1" role="dialog" + aria-labelledby="templateDeletionModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="templateDeletionModalLabel">Delete Script</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <img src="assets/img/icon-close.svg" /> + </button> + </div> + <div class="modal-body"> + <p>Are you sure you want to delete Template file + <span>{{fileToDelete}}</span>?</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" (click)="setTemplate(fileToDelete)" data-dismiss="modal" + class="btn btn-primary">Delete</button> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts index 88bd76eb6..2572651b5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts @@ -1,9 +1,11 @@ -import {Component, OnDestroy, OnInit} from '@angular/core'; -import {DesignerStore} from '../designer.store'; -import {PackageCreationStore} from '../../package-creation/package-creation.store'; -import {Subject} from 'rxjs'; -import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; -import {CBAPackage} from '../../package-creation/mapping-models/CBAPacakge.model'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { DesignerStore } from '../designer.store'; +import { PackageCreationStore } from '../../package-creation/package-creation.store'; +import { Subject } from 'rxjs'; +import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; +import { CBAPackage } from '../../package-creation/mapping-models/CBAPacakge.model'; +import { TemplateAndMapping } from '../../package-creation/template-mapping/TemplateAndMapping'; +import { FunctionsStore } from '../functions.store'; @Component({ selector: 'app-functions-attribute', @@ -13,11 +15,22 @@ import {CBAPackage} from '../../package-creation/mapping-models/CBAPacakge.model export class FunctionsAttributeComponent implements OnInit, OnDestroy { ngUnsubscribe = new Subject(); - private designerDashboardState: DecodeSuccessCallback; - private cbaPackage: CBAPackage; + designerDashboardState: DecodeSuccessCallback; + cbaPackage: CBAPackage; + templateAndMappingMap = new Map<string, TemplateAndMapping>(); + selectedTemplates = new Map<string, TemplateAndMapping>(); + fileToDelete: string; + requiredInputs = []; + requiredOutputs = []; + OptionalInputs = []; + optionalOutputs = []; + artifactPrefix = false; - constructor(private designerStore: DesignerStore, - private packageCreationStore: PackageCreationStore) { + constructor( + private designerStore: DesignerStore, + private packageCreationStore: PackageCreationStore, + private functionStore: FunctionsStore + ) { } ngOnInit() { @@ -30,12 +43,26 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { }); this.packageCreationStore.state$ - .pipe( - distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), - takeUntil(this.ngUnsubscribe)) .subscribe(cbaPackage => { this.cbaPackage = cbaPackage; + console.log('File name =>================== '); + console.log(this.cbaPackage.templates.files); + this.cbaPackage.templates.files.forEach((value, key) => { + console.log('File name => ' + key); + const templateAndMapping = new TemplateAndMapping(); + templateAndMapping.isTemplate = true; + const isFromTemplate = true; + this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); + }); + + this.cbaPackage.mapping.files.forEach((value, key) => { + const templateAndMapping = new TemplateAndMapping(); + templateAndMapping.isMapping = true; + const isFromTemplate = false; + this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); + }); }); + this.getNodeType('component-resource-resolution'); } @@ -43,4 +70,95 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); } + // Template logic + + private setIsMappingOrTemplate(key: string, templateAndMapping: TemplateAndMapping, isFromTemplate: boolean) { + const nameOfFile = isFromTemplate ? + key.split('/')[1].split('.')[0].split('-template')[0] + : key.split('/')[1].split('.')[0].split('-mapping')[0]; + // const fullName = nameOfFile + ',' + key.split('.'); + if (this.templateAndMappingMap.has(nameOfFile)) { + const templateAndMappingExisted = this.templateAndMappingMap.get(nameOfFile); + !isFromTemplate ? templateAndMappingExisted.isMapping = true : templateAndMappingExisted.isTemplate = true; + this.templateAndMappingMap.set(nameOfFile, templateAndMappingExisted); + } else { + this.templateAndMappingMap.set(nameOfFile, templateAndMapping); + } + + } + + addTemplates() { } + + setTemplate(file: string) { + if (this.selectedTemplates.has(file)) { + this.selectedTemplates.delete(file); + } else { + this.selectedTemplates.set(file, this.templateAndMappingMap.get(file)); + } + console.log(this.selectedTemplates); + } + + getKeys(templateAndMappingMap: Map<string, TemplateAndMapping>) { + return Array.from(templateAndMappingMap.keys()); + } + getValue(file: string) { + return this.templateAndMappingMap.get(file); + } + + getObjectKey(object) { + // console.log(object); + return Object.keys(object); + } + getObjectValue(object) { + return Object.values(object); + } + getNodeType(nodeName: string) { + this.functionStore.state$ + .subscribe(state => { + console.log(state); + const functions = state.serverFunctions; + // tslint:disable-next-line: prefer-for-of + for (let i = 0; i < functions.length; i++) { + if (functions[i].modelName === nodeName) { + // tslint:disable: no-string-literal + console.log(functions[i].definition['interfaces']); + this.getInputFields(functions[i].definition['interfaces'], 'ResourceResolutionComponent', 'inputs'); + this.getInputFields(functions[i].definition['interfaces'], 'ResourceResolutionComponent', 'outputs'); + break; + } + } + }); + } + + getInputFields(interfaces, nodeName, type) { + console.log(interfaces[nodeName]['operations']['process'][type]); + const fields = interfaces[nodeName]['operations']['process'][type]; + + for (const [key, value] of Object.entries(fields)) { + const object = {}; + object[key] = value; + + if (key === 'artifact-prefix-names') { + this.artifactPrefix = true; + } else if (value['required']) { + console.log('This field is required = ' + key); + if (type === 'inputs') { + this.requiredInputs.push(Object.assign({}, object)); + } else { + this.requiredOutputs.push(Object.assign({}, object)); + } + } else { + console.log('This field is Optional ' + key); + if (type === 'inputs') { + this.OptionalInputs.push(Object.assign({}, object)); + } else { + this.optionalOutputs.push(Object.assign({}, object)); + } + } + } + + // console.log(this.requiredOutputs); + } + + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts index 7960e83d1..b7a0ff9d5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -15,8 +15,8 @@ declare module 'jointjs' { } } -const rectWidth = 616; -const rectHeight = 381; +const rectWidth = '100%'; +const rectHeight = '100%'; // custom element implementation // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, { @@ -40,18 +40,8 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)"> <g id="workflow-container" transform="translate(401.000000, 137.000000)"> <g id="Card"> - <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use> - <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use> - </g> - <g id="name"> - <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87, - 0.8954305 87,2 L87,30 L87,30 L0,30 L0, - 2 C-1.3527075e-16,0.8954305 0.8954305, - 2.02906125e-16 2,0 Z" id="Rectangle" - fill="#C3CDDB"></path> - <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12" font-weight="bold" fill="#1B3E6F"> - <tspan id="label" x="20" y="20">Action 1</tspan> - </text> + <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use> + <use fill-rule="evenodd" xlink:href="#custom-action"></use> </g> </g> </g> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts index 72019bfa0..7411eed49 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts @@ -28,9 +28,9 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl <g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)"> <g id="execute" transform="translate(304.000000, 0.000000)"> <g id="Group" transform="translate(7.000000, 0.000000)"> - <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="330" height="84" rx="2"></rect> - <g id="Group-4" transform="translate(20.000000, 20.000000)" fill="#FFFFFF"> - <g id="database0-copy" transform="translate(15.000000, 0.000000)" fill-rule="nonzero"> + <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="280" height="150" rx="3"></rect> + <g id="Group-4" transform="translate(20.000000, 25.000000)" fill="#FFFFFF"> + <g id="database0-copy" transform="translate(115.000000, 5.000000)" fill-rule="nonzero"> <path d="M35.544,6.00705882 C34.7265882, 2.97882353 28.6425882,0 18,0 C7.35741176, 0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882, @@ -304,8 +304,8 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="13" font-weight="bold" line-spacing="18"> - <tspan id="label" x="64" y="18">execute</tspan> - <tspan id="type" x="64" y="40" + <tspan id="label" x="20" y="70">execute</tspan> + <tspan id="type" x="30" y="92" font-family="HelveticaNeue, Helvetica Neue" font-size="12" font-weight="normal"></tspan> </text> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts index 48a680982..25908b047 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts @@ -20,7 +20,7 @@ declare module 'jointjs' { } const rectWidth = 260; -const rectHeight = 60; +const rectHeight = 50; // custom element implementation // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', { @@ -45,7 +45,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="7.1-Designer" transform="translate(-14.000000, -618.000000)"> - <g id="controller" transform="translate(0.000000, 60.000000)"> + <g id="controller" transform="translate(0.000000, 70.000000)"> <g id="functions" transform="translate(0.000000, 479.000000)"> <g id="list" transform="translate(8.000000, 51.000000)"> <g id="1" transform="translate(12.000000, 32.000000)"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts index adae66244..61de5078b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts @@ -43,7 +43,7 @@ export class DesignerCreationMode extends PackageCreationModes { }); } - const filenameEntry = 'Definitions/' + cbaPackage.metaData.name + '.json'; + const filenameEntry = 'Definitions/' + cbaPackage.metaData.name.trim() + '.json'; const vlbDefinition: VlbDefinition = new VlbDefinition(); const metadata: Metadata = new Metadata(); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts index 232590c62..f44f68887 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts @@ -42,7 +42,7 @@ export class PackageCreationExtractionService { if (filename.includes('TOSCA-Metadata/')) { const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); - packageName = metaDataTabInfo.name; + packageName = metaDataTabInfo.name.trim(); this.setMetaData(metaDataTabInfo); console.log('found file ' + packageName); } @@ -145,7 +145,7 @@ export class PackageCreationExtractionService { map.set(currentKey, currentValue); } metaDataTabModel.entryFileName = map.get(this.toscaMetaDataKeys[3]); - metaDataTabModel.name = map.get(this.toscaMetaDataKeys[4]); + metaDataTabModel.name = map.get(this.toscaMetaDataKeys[4]).trim(); metaDataTabModel.version = map.get(this.toscaMetaDataKeys[5]).trim(); metaDataTabModel.mode = map.get(this.toscaMetaDataKeys[6]); if (map.get(this.toscaMetaDataKeys[7])) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html index d578582fd..0632fb47d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html @@ -49,6 +49,10 @@ Import&Save </button> <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" + data-dismiss="modal" (click)="importAndDeploy()"> + Import&Deploy + </button> + <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" data-dismiss="modal" (click)="importPackageAndViewIt()"> Import </button> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts index 7496338d6..5797d18d5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts @@ -123,4 +123,23 @@ export class ImportPackageComponent implements OnInit { }); }); } + + importAndDeploy() { + const file = this.getFile(this.uploadedFiles[this.uploadedFiles.length - 1]); + this.zipFile = new JSZip(); + this.zipFile.loadAsync(file).then(zip => { + this.zipFile = zip; + console.log(this.zipFile); + this.resetTheUploadedFiles(); + this.zipFile.generateAsync({type: 'blob'}).then(blob => { + this.packageCreationService.deploy(blob).subscribe( + bluePrintDetailModels => { + this.toastService.info('package is imported and deployed successfully '); + this.router.navigate(['/packages']); + this.packagesStore.getAll(); + }, error => + this.toastService.error('there is an error happened ' + error)); + }); + }); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html index f81b02643..4efb9a20e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html @@ -6,8 +6,9 @@ <app-packages-header></app-packages-header> <div class="container-fluid body-container"> <!--Tour Starter--> - <input id="clicker" [checked]="startTour" type="checkbox" /> - <label class="ml-1" for="clicker">Start the tour</label> + + <input id="clicker" [checked]="startTour" type="checkbox" style="display: none;" /> + <label class="ml-1" for="clicker" style="display: none;">Start the tour</label> <div class="panel-wrap packageWizard"> <div class="panel"> @@ -59,4 +60,4 @@ <app-sort-packages></app-sort-packages> </div> </div> -</div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index b215dd46a..ce9fdd781 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -78,6 +78,9 @@ body{ width: 14px !important; height: 14px; } +.btn[aria-expanded="true"] > .card{ + overflow: visible; +} .card-header .btn[aria-expanded="true"], .card-header .btn[aria-expanded="false"]{ padding-left: 25px !important; @@ -582,7 +585,7 @@ height: 40px; .packages-card [data-tooltip]:after { padding: 9px; font-size: 11px; - background: #fff; + background: #C3CDDB; border: solid 1px #E6EDF5; box-shadow: 0 0 12 rgba(0,0,0,0.8); border-radius: 3px; @@ -1946,8 +1949,8 @@ ul.package-contributers{ [data-tooltip]:after { z-index: 1000; padding: 8px 20px !important; - width: auto; - background-color: #fff !important; + width: max-content; + background-color: #C3CDDB !important; color: #1B3E6F; content: attr(data-tooltip); font-size: 12px; @@ -2015,7 +2018,7 @@ ul.package-contributers{ margin-right: -12px; margin-bottom: 0; border-top-color: transparent; - border-left-color: #fff; + border-left-color: #C3CDDB; /* border-left-color: hsla(0, 0%, 20%, 0.9); */ } @@ -2040,8 +2043,8 @@ ul.package-contributers{ margin-top: -12px; margin-bottom: 0; border-top-color: transparent; - border-bottom-color: #DEE8F3; - border-bottom-color: rgba(222, 232, 243, 1.0); + border-bottom-color: #C3CDDB; + border-bottom-color: rgba(195, 205, 219, 1.0); } .tooltip-bottom:hover:before, @@ -2064,7 +2067,7 @@ ul.package-contributers{ margin-bottom: 0; margin-left: -12px; border-top-color: transparent; - border-right-color: #fff; + border-right-color: #C3CDDB; /* border-right-color: hsla(0, 0%, 20%, 0.9); */ } @@ -2100,8 +2103,7 @@ ul.package-contributers{ width: 100% !important; } .tooltip .tooltip-inner{ - width: auto !important; - max-width: 280px !important; + width: max-content !important; text-align: left!important; /* color:#1B3E6F; background-color: #fff !important; */ @@ -2140,8 +2142,8 @@ padding-left: 20px !important; border-radius: 20px !important; } .btn-primary{ - background-color: #1273EB !important; - border-color: #1273EB !important; + background-color: #1273EB !important; + border-color: #1273EB !important; } .btn-primary:hover { background-color: #0069d9 !important; @@ -2927,9 +2929,6 @@ animation: glowing 1500ms infinite; position: absolute; top: 13px; } -.ace_scroller{ - /* overflow: auto !important; */ -} .ace_print-margin{ left: 100% !important; background: #eee !important; diff --git a/cds-ui/server/pom.xml b/cds-ui/server/pom.xml index c485cb27a..11f3d27f9 100644 --- a/cds-ui/server/pom.xml +++ b/cds-ui/server/pom.xml @@ -166,7 +166,6 @@ limitations under the License. <executions> <execution> <id>build-push-images</id> - <phase>${docker.push.phase}</phase> <goals> <goal>build</goal> <goal>push</goal> diff --git a/ms/blueprintsprocessor/application/pom.xml b/ms/blueprintsprocessor/application/pom.xml index 7e60b3de6..d4084ac54 100755 --- a/ms/blueprintsprocessor/application/pom.xml +++ b/ms/blueprintsprocessor/application/pom.xml @@ -359,7 +359,6 @@ <executions> <execution> <id>build-push-images</id> - <phase>${docker.push.phase}</phase> <goals> <goal>build</goal> <goal>push</goal> diff --git a/ms/blueprintsprocessor/functions/k8s-profile-upload/src/main/kotlin/org/onap/ccsdk/cds/blueprintsprocessor/functions/k8s/profile/upload/K8sProfileUploadComponent.kt b/ms/blueprintsprocessor/functions/k8s-profile-upload/src/main/kotlin/org/onap/ccsdk/cds/blueprintsprocessor/functions/k8s/profile/upload/K8sProfileUploadComponent.kt index 6b575a60a..76b7fae71 100644 --- a/ms/blueprintsprocessor/functions/k8s-profile-upload/src/main/kotlin/org/onap/ccsdk/cds/blueprintsprocessor/functions/k8s/profile/upload/K8sProfileUploadComponent.kt +++ b/ms/blueprintsprocessor/functions/k8s-profile-upload/src/main/kotlin/org/onap/ccsdk/cds/blueprintsprocessor/functions/k8s/profile/upload/K8sProfileUploadComponent.kt @@ -198,16 +198,13 @@ open class K8sProfileUploadComponent( private suspend fun prepareProfileFile(k8sRbProfileName: String, ks8ProfileSource: String, ks8ProfileLocation: String): Path { val bluePrintContext = bluePrintRuntimeService.bluePrintContext() val bluePrintBasePath: String = bluePrintContext.rootPath - val profileSourceFileFolderPath: String = bluePrintBasePath.plus(File.separator) - .plus(ks8ProfileLocation) - val profileFilePathTarGz: String = profileSourceFileFolderPath.plus(".tar.gz") - val profileFilePathTgz: String = profileSourceFileFolderPath.plus(".tgz") + val profileSourceFileFolderPath: Path = Paths.get( + bluePrintBasePath.plus(File.separator).plus(ks8ProfileLocation) + ) - if (Paths.get(profileFilePathTarGz).toFile().exists()) - return Paths.get(profileFilePathTarGz) - else if (Paths.get(profileFilePathTgz).toFile().exists()) - return Paths.get(profileFilePathTgz) - else if (Paths.get(profileSourceFileFolderPath).toFile().exists()) { + if (profileSourceFileFolderPath.toFile().exists() && !profileSourceFileFolderPath.toFile().isDirectory) + return profileSourceFileFolderPath + else if (profileSourceFileFolderPath.toFile().exists()) { log.info("Profile building started from source $ks8ProfileSource") val properties: MutableMap<String, Any> = mutableMapOf() properties[ResourceResolutionConstants.RESOURCE_RESOLUTION_INPUT_STORE_RESULT] = false @@ -227,12 +224,12 @@ open class K8sProfileUploadComponent( try { val manifestFiles: ArrayList<File>? = readManifestFiles( - Paths.get(profileSourceFileFolderPath).toFile(), + profileSourceFileFolderPath.toFile(), tempProfilePath ) if (manifestFiles != null) { templateLocation( - Paths.get(profileSourceFileFolderPath).toFile(), resolutionResult.second, + profileSourceFileFolderPath.toFile(), resolutionResult.second, tempProfilePath, manifestFiles ) } else @@ -258,7 +255,7 @@ open class K8sProfileUploadComponent( throw t } } else - throw BluePrintProcessorException("Profile source $ks8ProfileSource is missing in CBA folder") + throw BluePrintProcessorException("Profile source $ks8ProfileLocation is missing in CBA folder") } private fun readManifestFiles(profileSource: File, destinationFolder: File): ArrayList<File>? { diff --git a/ms/command-executor/pom.xml b/ms/command-executor/pom.xml index 7cd1a2b12..04e0614df 100755 --- a/ms/command-executor/pom.xml +++ b/ms/command-executor/pom.xml @@ -134,7 +134,6 @@ <executions> <execution> <id>build-push-images</id> - <phase>${docker.push.phase}</phase> <goals> <goal>build</goal> <goal>push</goal> diff --git a/ms/py-executor/pom.xml b/ms/py-executor/pom.xml index abba69b8c..be56787a8 100644 --- a/ms/py-executor/pom.xml +++ b/ms/py-executor/pom.xml @@ -133,7 +133,6 @@ <executions> <execution> <id>build-push-images</id> - <phase>${docker.push.phase}</phase> <goals> <goal>build</goal> <goal>push</goal> diff --git a/ms/sdclistener/distribution/pom.xml b/ms/sdclistener/distribution/pom.xml index e9f5b949e..7a85394f4 100755 --- a/ms/sdclistener/distribution/pom.xml +++ b/ms/sdclistener/distribution/pom.xml @@ -163,7 +163,6 @@ <executions> <execution> <id>build-push-images</id> - <phase>${docker.push.phase}</phase> <goals> <goal>build</goal> <goal>push</goal> @@ -69,7 +69,6 @@ limitations under the License. <!-- docker related properties --> <docker.verbose>true</docker.verbose> <docker.skip.push>false</docker.skip.push> - <docker.push.phase>deploy</docker.push.phase> <ccsdk.build.timestamp>${maven.build.timestamp}</ccsdk.build.timestamp> <maven.build.timestamp.format>yyyyMMdd'T'HHmmss'Z'</maven.build.timestamp.format> |