diff options
| author |   Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com> | 2020-09-27 11:29:59 +0200 |
|---|---|---|
| committer | Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com> | 2020-09-27 13:52:12 +0200 |
| commit | 8049a6f71ddfae40b62b23f4307acce65fee8001 (patch) | |
| tree | 0868a6e60aae0ea18d4f196c9b8a282620ca3de5 /cds-ui/designer-client/src/app/modules | |
| parent | f1aafc40ad8f15b61faa3631e5a56fcf7c34bf49 (diff) | |
add save & deploy button in designer
Issue-ID: CCSDK-2299
Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I35bf9a40633e9bd3f114671912c5e0521e44f754
Diffstat (limited to 'cds-ui/designer-client/src/app/modules')
6 files changed, 238 insertions, 239 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index e006f23e6..edb247a1f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -81,7 +81,7 @@ <span>Save</span> </button> <button data-target="#discardChangesModal" data-toggle="modal" class="action-button" - [disabled]="!isSaveEnabled"> + [disabled]="!isSaveEnabled"> <i class="icon-discard-sm" aria-hidden="true"></i> <span>Discard Changes</span> </button> @@ -98,7 +98,7 @@ </a> <a class="action-button" - (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"> + (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"> <i class="icon-download" aria-hidden="true"></i> <span>Download</span> </a> @@ -127,7 +127,8 @@ <div class="row package-auth-info"> <div class="col-3"> <p><b>Author Name</b></p> - <span> {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span> + <span> + {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span> </div> <!--<div class="col-4"> <p><b>Author Email</b></p> @@ -138,19 +139,19 @@ <ul class="package-contributers"> <li> <button type="button" class="border-fade" data-toggle="tooltip" - data-placement="bottom" title="User name"> + data-placement="bottom" title="User name"> <img src="/assets/img/img-user1.jpeg"> </button> </li> <li> <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> + title="User name"> <img src="/assets/img/img-user2.jpg"> </button> </li> <li> <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> + title="User name"> <img src="/assets/img/img-user3.jpg"> </button> </li> @@ -167,25 +168,25 @@ </button> --> <!-- Button trigger modal - 1st Action --> - <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal" - [attr.data-target]="dataTarget"> + <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" + data-toggle="modal" [attr.data-target]="dataTarget"> <i class="icon-topologyView-active"></i> Designer Mode </button> <!-- Designer Modal --> <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" - title="Close"> + title="Close"> <i class="icon-action-close"></i> </button> </div> <div class="modal-body"> <div id="carouselExampleIndicators" class="carousel slide" - data-ride="carousel" data-interval="false"> + data-ride="carousel" data-interval="false"> <div class="carousel-inner"> <!--OPTIONS SLIDE--> <div class="carousel-item active"> @@ -195,15 +196,15 @@ <!--Custom Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="1"> + data-target="#carouselExampleIndicators" + data-slide-to="1"> <div class="card actionType custom"> <div class="card-body"> <h3>Custom</h3> <p>Start with your own settings</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="1" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="1" class="btn"> Create </button> </div> @@ -213,16 +214,16 @@ <!--Default Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="2"> + data-target="#carouselExampleIndicators" + data-slide-to="2"> <div class="card actionType default"> <div class="card-body"> <h3>Default</h3> <p>Explore preset actions from CDS Action Catalog</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="2" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="2" class="btn"> Select </button> </div> @@ -232,8 +233,8 @@ <!--Recent Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="3"> + data-target="#carouselExampleIndicators" + data-slide-to="3"> <div class="card actionType recent"> <div class="card-body"> <h3>Recent</h3> @@ -241,8 +242,8 @@ recent packages</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="3" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="3" class="btn"> Select </button> </div> @@ -252,15 +253,15 @@ <!--Import Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="4"> + data-target="#carouselExampleIndicators" + data-slide-to="4"> <div class="card actionType import"> <div class="card-body"> <h3>Import</h3> <p>Import your own action files</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="4" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="4" class="btn"> Browse </button> </div> @@ -270,8 +271,8 @@ </div> <div class="row"> <div class="col text-center"> - <button class="btn skip-btn" - (click)="goToDesignerMode(viewedPackage.id)"> + <button class="btn skip-btn" data-dismiss="modal" + (click)="goToDesignerMode(viewedPackage.id)"> Skip to Designer Canvas </button> @@ -281,16 +282,16 @@ <!--Custom Action Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Create Custom Action</h1> <div class="form-group text-center"> <input type="text" [(ngModel)]="customActionName" - class="form-control customAction" - placeholder="Type Action Name" autofocus> - <button type="button" - (click)="goToDesignerMode(viewedPackage.id)" - class="btn submit">Start + class="form-control customAction" + placeholder="Type Action Name" autofocus> + <button type="button" data-dismiss="modal" + (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start </button> </div> @@ -298,7 +299,7 @@ <!--Default Actions Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Choose Action(s) from CDS Default Package </h1> <div class="actionFormWrapper"> @@ -320,7 +321,7 @@ </div> <div class="col"> <input type="text" class="form-control searchInput" - placeholder="Search"> + placeholder="Search"> </div> </div> <div class="row actionsListScroll"> @@ -328,11 +329,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation1" - required> + class="custom-control-input" + id="customControlValidation1" required> <label class="custom-control-label" - for="customControlValidation1">config-assign</label> + for="customControlValidation1">config-assign</label> </div> </div> </div> @@ -340,11 +340,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation2" - required> + class="custom-control-input" + id="customControlValidation2" required> <label class="custom-control-label" - for="customControlValidation2">config-assign-test</label> + for="customControlValidation2">config-assign-test</label> </div> </div> </div> @@ -352,11 +351,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation3" - required> + class="custom-control-input" + id="customControlValidation3" required> <label class="custom-control-label" - for="customControlValidation3">config-deploy</label> + for="customControlValidation3">config-deploy</label> </div> </div> </div> @@ -364,11 +362,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation4" - required> + class="custom-control-input" + id="customControlValidation4" required> <label class="custom-control-label" - for="customControlValidation4">config-modify</label> + for="customControlValidation4">config-modify</label> </div> </div> </div> @@ -376,11 +373,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -388,11 +384,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -400,11 +395,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -412,11 +406,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -424,11 +417,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -436,11 +428,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -448,11 +439,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -460,9 +450,9 @@ <div class="row"> <div class="col text-center"> <p class="selectedActions">0 selected</p> - <button type="button" - (click)="goToDesignerMode(viewedPackage.id)" - class="btn submit">Start + <button type="button" data-dismiss="modal" + (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start </button> </div> </div> @@ -471,7 +461,7 @@ <!--Recent Actions Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Choose Action(s) from Recent Packages</h1> <div class="actionFormWrapper"> @@ -501,7 +491,7 @@ </div> <div class="col"> <input type="text" class="form-control searchInput" - placeholder="Search"> + placeholder="Search"> </div> </div> <div class="row actionsListScroll"> @@ -509,11 +499,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation1" - required> + class="custom-control-input" + id="customControlValidation1" required> <label class="custom-control-label" - for="customControlValidation1">config-assign</label> + for="customControlValidation1">config-assign</label> </div> </div> </div> @@ -521,11 +510,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation2" - required> + class="custom-control-input" + id="customControlValidation2" required> <label class="custom-control-label" - for="customControlValidation2">config-assign-test</label> + for="customControlValidation2">config-assign-test</label> </div> </div> </div> @@ -533,11 +521,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation3" - required> + class="custom-control-input" + id="customControlValidation3" required> <label class="custom-control-label" - for="customControlValidation3">config-deploy</label> + for="customControlValidation3">config-deploy</label> </div> </div> </div> @@ -545,11 +532,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation4" - required> + class="custom-control-input" + id="customControlValidation4" required> <label class="custom-control-label" - for="customControlValidation4">config-modify</label> + for="customControlValidation4">config-modify</label> </div> </div> </div> @@ -557,11 +543,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -569,11 +554,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -581,11 +565,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -593,11 +576,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -605,11 +587,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -617,11 +598,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -629,11 +609,10 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> + class="custom-control-input" + id="customControlValidation5" required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -641,8 +620,7 @@ <div class="row"> <div class="col text-center"> <p class="selectedActions">0 selected</p> - <button type="button" - class="btn submit">Start + <button type="button" class="btn submit">Start </button> </div> </div> @@ -651,30 +629,30 @@ <!--Import Actions Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Import Action(s)</h1> <div class="actionFormWrapper"> <div class="row"> <div class="col"> <ngx-file-drop accept=".json" - dropZoneLabel="Drop files here" - (onFileDrop)="dropped($event)" - (onFileOver)="fileOver($event)" - (onFileLeave)="fileLeave($event)"> + dropZoneLabel="Drop files here" + (onFileDrop)="dropped($event)" + (onFileOver)="fileOver($event)" + (onFileLeave)="fileLeave($event)"> <ng-template ngx-file-drop-content-tmp - let-openFileSelector="openFileSelector"> + let-openFileSelector="openFileSelector"> <div class="folder-upload"> <img - src="assets/img/folder-upload.svg"/> + src="assets/img/folder-upload.svg" /> </div> <div class="folder-upload-text"> Drag & Drop file </div> <div class="folder-upload-text">or <button type="button" - class="btn btn-sm btn-primary" - (click)="openFileSelector()"> + class="btn btn-sm btn-primary" + (click)="openFileSelector()"> Browse Files </button> @@ -688,17 +666,17 @@ <div class="upload-table"> <table class="table"> <thead> - <tr + <tr *ngFor="let item of uploadedFiles; let i=index"> - <th width="40"><img - src="assets/img/icon-file-code.svg"/> - </th> - <th>{{ item.name }}</th> - <th width="40" class="text-right"> - <img - src="assets/img/icon-remove-file.svg"/> - </th> - </tr> + <th width="40"><img + src="assets/img/icon-file-code.svg" /> + </th> + <th>{{ item.name }}</th> + <th width="40" class="text-right"> + <img + src="assets/img/icon-remove-file.svg" /> + </th> + </tr> </thead> </table> </div> @@ -706,8 +684,7 @@ </div> <div class="row"> <div class="col text-center"> - <button type="button" - class="btn submit mt-4">Import + <button type="button" class="btn submit mt-4">Import </button> </div> </div> @@ -720,7 +697,7 @@ </div> </div> <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal" - data-target="#enrichModal"> + data-target="#enrichModal"> <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich </button> @@ -738,17 +715,17 @@ <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab" - href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true" - autofocus #nameit (focusout)="saveMetaData()">METADATA</a> + href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true" + autofocus #nameit (focusout)="saveMetaData()">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> + 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> + 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">DEFINITIONS</a> + role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</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> + href="#nav-authentication" role="tab" aria-controls="nav-authentication" + aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> </div> </div> @@ -757,24 +734,24 @@ <div class="col"> <div class="tab-content" id="nav-tabContent" (change)="clickEvent()"> <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" - aria-labelledby="nav-metadata-tab"> + 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"> + 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"> + 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"> + 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"> + aria-labelledby="nav-authentication-tab"> <div class="card creat-card"> <div class="editor-container"> <app-dsl-definitions-tab></app-dsl-definitions-tab> @@ -791,13 +768,13 @@ <!-- Enrich Modal --> <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel" - aria-hidden="true"> + aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</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"> @@ -807,16 +784,14 @@ <li>2. Press <b>Enrich</b> button</li> </ul> <ace-editor [(text)]="vlbDefinition.topology_template.content" [mode]="'javascript'" - [autoUpdateContent]="true" - [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'" - #editor - style="height:300px;"> + [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" + [theme]="'eclipse'" #editor style="height:300px;"> </ace-editor> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich" - (click)="enrichBluePrint()">Enrich + (click)="enrichBluePrint()">Enrich </button> </div> </div> @@ -824,7 +799,7 @@ </div> <!-- Delete Modal --> <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel" - aria-hidden="true"> + aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -838,8 +813,7 @@ </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> - <button type="button" (click)="deletePackage()" data-dismiss="modal" - class="btn btn-primary">Delete + <button type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-primary">Delete </button> </div> </div> @@ -847,7 +821,7 @@ </div> <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel" - aria-hidden="true"> + aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -861,10 +835,10 @@ </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> - <button type="button" (click)="discardChanges()" data-dismiss="modal" - class="btn btn-primary">Discard Changes + <button type="button" (click)="discardChanges()" data-dismiss="modal" class="btn btn-primary">Discard + Changes </button> </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/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index f7cff5072..e1de6f60f 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 @@ -203,7 +203,9 @@ header{ font-size: 11px; line-height: 20px; } - +.save-blueprint li:hover{ + cursor: pointer; +} 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 dd39cb243..f8f1d8099 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 @@ -12,7 +12,7 @@ <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"> + data-target="#exampleModalLong"> <i class="icon-info" aria-hidden="true"></i> </button> </li> @@ -22,13 +22,13 @@ </li> </ol> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg"/> + <img src="assets/img/icon-close.svg" /> </button> </div> <div class="modal-body package-info"> @@ -70,15 +70,15 @@ <li> <div class="btn-group" role="group" aria-label="Basic example"> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Preview"> + data-tooltip="Preview"> <i class="fa fa-eye"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Download"> + data-tooltip="Download"> <i class="fa fa-download"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Share"> + data-tooltip="Share"> <i class="fa fa-share-square"></i> </a> </div> @@ -87,12 +87,12 @@ <div class="dropdown"> <input class="dropdown-toggle" type="text"> <div class="dropdown-text">Save</div> - <ul class="dropdown-content"> + <ul class="dropdown-content save-blueprint"> <li> <a (click)="saveBluePrint()">Save</a> </li> <li> - <a href="">Save & Deploy</a> + <a (click)="publishBluePrint()">Save & Deploy</a> </li> </ul> </div> @@ -106,7 +106,7 @@ <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" - data-tooltip="Collapse Side bar"> + data-tooltip="Collapse Side bar"> <i class="fa arr-size"></i> </button> <div class="collapse navbar-collapse "> @@ -117,9 +117,9 @@ <div class="col-12"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> + aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false">Template</a> + aria-controls=" " aria-selected="false">Template</a> </div> </div> </nav> @@ -159,7 +159,7 @@ <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" - class="btn btn-secondary topologyView">Scripting + class="btn btn-secondary topologyView">Scripting </button> </div> </li> @@ -171,16 +171,16 @@ <ng-sidebar-container class="sidebar-container"> <!-- Controller SideBar --> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" - [mode]="'push'" #sidebarLeft> + [mode]="'push'" #sidebarLeft> <nav class="row"> <!--Nav Tabs--> <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action" - role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> + role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function" - role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> + role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> </div> </div> </nav> @@ -188,7 +188,7 @@ <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" - aria-labelledby="nav-action-tab"> + aria-labelledby="nav-action-tab"> <!--Action Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> @@ -288,7 +288,7 @@ </div> <!-- Action Attribute SideBar --> <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" - [position]="'right'" #sidebarRight> + [position]="'right'" #sidebarRight> <div class="container-fluid0"> <div class="row m-0"> <div class="col-2 pr-0"> @@ -310,8 +310,7 @@ <div class="card-header row" id="headingOne"> <h2 class="col-10 mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" - aria-controls="collapseOne"> + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Steps </button> </h2> @@ -321,7 +320,7 @@ </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -341,7 +340,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -355,8 +354,7 @@ <div class="card-header row" id="headingTwo"> <h2 class="col-10 mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" - aria-controls="collapseTwo"> + data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> Inputs </button> </h2> @@ -365,7 +363,7 @@ </div> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -385,7 +383,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -399,8 +397,8 @@ <div class="card-header row" id="headingThree"> <h2 class="col-10 mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseThree" aria-expanded="true" - aria-controls="collapseThree"> + data-target="#collapseThree" aria-expanded="true" + aria-controls="collapseThree"> Outputs </button> </h2> @@ -409,7 +407,7 @@ </div> </div> <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -429,7 +427,7 @@ <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> + rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Target</label> @@ -448,7 +446,7 @@ <!-- Function Attribute SideBar --> <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" - [mode]="'push'" [position]="'right'" #sidebarRight> + [mode]="'push'" [position]="'right'" #sidebarRight> <div class="container-fluid0"> <div class="row m-0"> <div class="col-2 pr-0"> @@ -506,7 +504,7 @@ <div class="card-header row" id="headingOne"> <h2 class="col-10 mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Interface </button> </h2> @@ -516,7 +514,7 @@ </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -538,11 +536,11 @@ </div> <div class="form-group"> <label> - <input class="with-gap radio-btn" name="group1" type="radio"/> + <input class="with-gap radio-btn" name="group1" type="radio" /> <span class="radio-btn">True</span> </label> <label class="radio-btn"> - <input class="with-gap radio-btn" name="group1" type="radio"/> + <input class="with-gap radio-btn" name="group1" type="radio" /> <span class="radio-btn">False</span> </label> </div> @@ -567,7 +565,7 @@ <div class="card-header row" id="headingOne"> <h2 class="col-10 mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Artifact </button> </h2> @@ -577,7 +575,7 @@ </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> + data-parent="#accordionExample"> <div class="card-body"> <div class="row"> <div class="col-9"> @@ -651,4 +649,4 @@ </div> </ng-sidebar> -</ng-sidebar-container> +</ng-sidebar-container>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index d8113633d..099d96615 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -115,6 +115,22 @@ export class DesignerComponent implements OnInit, OnDestroy { this.attributesSideBar = !this.attributesSideBar; } + publishBluePrint() { + this.create(); + this.zipFile.generateAsync({ type: 'blob' }) + .then(blob => { + const formData = new FormData(); + formData.append('file', blob); + this.designerService.publishBlueprint(formData).subscribe(res => { + console.log('Package Deployed...'); + }, error => { + console.log(error); + }, () => { + // this.deployBluePrint = false; + }); + }); + } + // private _toggleSidebar3() { // this.functionAttributeSidebar = !this.functionAttributeSidebar; // } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts index 771c44ba8..c0d79cae1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts @@ -21,11 +21,11 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Injectable} from '@angular/core'; -import {Observable} from 'rxjs'; -import {ApiService} from '../../../../common/core/services/api.typed.service'; -import {ResourceDictionaryURLs, BlueprintURLs} from '../../../../common/constants/app-constants'; -import {ModelType} from './model/ModelType.model'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { ApiService } from '../../../../common/core/services/api.typed.service'; +import { ResourceDictionaryURLs, BlueprintURLs } from '../../../../common/constants/app-constants'; +import { ModelType } from './model/ModelType.model'; import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; @@ -34,8 +34,10 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; }) export class DesignerService { - constructor(private api: ApiService<ModelType>, - private api2: ApiService<BluePrintDetailModel>) { + constructor( + private api: ApiService<ModelType>, + private api2: ApiService<BluePrintDetailModel> + ) { } getFunctions(modelDefinitionType: string): Observable<ModelType[]> { @@ -50,4 +52,9 @@ export class DesignerService { return this.getBluePrintModel(id); } + publishBlueprint(body: any | null, options?: any): Observable<any> { + + return this.api.post(BlueprintURLs.publish, body, { responseType: 'text' }); + } + } 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 b1dcded1c..fe98fa22b 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 @@ -1,12 +1,12 @@ -import {Injectable, ViewChild} from '@angular/core'; -import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; -import {VlbDefinition} from './mapping-models/definitions/VlbDefinition'; -import {DslDefinition} from './mapping-models/CBAPacakge.model'; -import {PackageCreationStore} from './package-creation.store'; +import { Injectable, ViewChild } from '@angular/core'; +import { MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model'; +import { VlbDefinition } from './mapping-models/definitions/VlbDefinition'; +import { DslDefinition } from './mapping-models/CBAPacakge.model'; +import { PackageCreationStore } from './package-creation.store'; import * as JSZip from 'jszip'; -import {PackageCreationUtils} from './package-creation.utils'; -import {MetadataTabComponent} from './metadata-tab/metadata-tab.component'; -import {DesignerStore} from '../designer/designer.store'; +import { PackageCreationUtils } from './package-creation.utils'; +import { MetadataTabComponent } from './metadata-tab/metadata-tab.component'; +import { DesignerStore } from '../designer/designer.store'; @Injectable({ providedIn: 'root' @@ -19,12 +19,14 @@ export class PackageCreationExtractionService { private toscaMetaDataKeys: string[] = ['TOSCA-Meta-File-Version', 'CSAR-Version', 'Created-By', 'Entry-Definitions', 'Template-Name', 'Template-Version', 'Template-Type', 'Template-Tags']; - @ViewChild(MetadataTabComponent, {static: false}) + @ViewChild(MetadataTabComponent, { static: false }) private metadataTabComponent: MetadataTabComponent; - constructor(private packageCreationStore: PackageCreationStore, - private packageCreationUtils: PackageCreationUtils, - private designerStore: DesignerStore) { + constructor( + private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private designerStore: DesignerStore + ) { } @@ -96,9 +98,9 @@ export class PackageCreationExtractionService { console.log(definition.topology_template); const content = {}; const workflow = 'workflows'; - content[workflow] = definition.topology_template.workflows; + content[workflow] = definition.topology_template ? definition.topology_template.workflows : {}; const nodeTemplates = 'node_templates'; - content[nodeTemplates] = definition.topology_template.node_templates; + content[nodeTemplates] = definition.topology_template ? definition.topology_template.node_templates : {}; this.designerStore.saveSourceContent(JSON.stringify(content)); } |