diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
6 files changed, 441 insertions, 126 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index a94687b37..09393c403 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -11,40 +11,62 @@ </span> </label> </div> + <div class="single-line"> + <label class="label-name">Dictionary Library Instance</label> + <div class="label-input"> + <select class="form-control" id="exampleFormControlSelect1"> + <option>Library Instance 1</option> + <option>Library Instance 2</option> + <option>Library Instance 3</option> + <option>Library Instance 4</option> + <option>Library Instance 5</option> + </select> + </div> + </div> </div> <div class="card creat-card"> - <div class="single-line"> - <label class="label-name">Name</label> + <div class="single-line-model error"> + <label class="label-name">Name <span>*</span></label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> </div> + <div class="model-note-container error-message"> + Package name already exists with this version. Please enter a different name or enter different version number. + </div> </div> - <hr/> - <div class="single-line"> - <label class="label-name">Description</label> - <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.description" - placeholder="Descripe the package"> - </div> - </div> - <hr/> - <div class="single-line"> - <label class="label-name">Version</label> + + <div class="single-line-model"> + <label class="label-name">Version <span>*</span></label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()" placeholder="Example: 1.0.0"> </div> - <div><label style="color: red">{{errorMessage}}</label></div> + <div class="model-note-container error-message">{{errorMessage}}</div> </div> - <hr/> - <div class="single-line"> + <div class="single-line-model"> + <label class="label-name">Description</label> + <div class="label-input"> + <input type="input" [(ngModel)]="metaDataTab.description" + placeholder="Descripe the package"> + </div> + </div> + + <div class="single-line-model"> <label class="label-name">tags</label> <div class="label-input"> <input type="input" [(ngModel)]="metaDataTab.tags" placeholder="Ex., vDNS-CDS"> + + </div> + <div class="model-note-container tag-notes">Seprate tags with comma or space</div> + <div class="model-note-container tages-container"> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> + <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> </div> </div> </div> @@ -53,35 +75,58 @@ <div class="card creat-card"> <div class="single-line"> <h5 class="label-name"> - Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a> + Custom key </h5> </div> - <div class="single-line"> - <label class="label-name">Name</label> + <div class="single-custom-key"> + <div class="single-line-custom-key"> + <label class="label-name"><span>1-</span> Name</label> <div class="label-input"> - <input name="key" type="input" placeholder="Enter Name"> + <input name="key" type="input" placeholder="Enter name"> </div> </div> - <hr/> - <div class="single-line"> + <div class="single-line-custom-key"> <label class="label-name">Value</label> <div class="label-input"> <input name="value" type="input" - placeholder="Enter Value"> + placeholder="Enter value"> </div> </div> + <div class="single-line-custom-key-delete"><button class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div> + </div> + <div class="single-custom-key"> + <div class="single-line-custom-key"> + <label class="label-name"><span>2-</span> Name</label> + <div class="label-input"> + <input name="key" type="input" placeholder="Enter name"> + </div> + </div> + <div class="single-line-custom-key"> + <label class="label-name">Value</label> + <div class="label-input"> + <input name="value" type="input" + placeholder="Enter value"> + </div> + </div> + <div class="single-line-custom-key-delete"><button class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div> + </div> - </div> - </div> -</div> -<div class="card creat-card"> - <div class="single-line"> - <div name="custom key"> - <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i - class="fa fa-plus" aria-hidden="true"></i> Add a custom key - </button> - + <div class="single-custom-key"> + <div class="single-line-custom-key"> + <label class="label-name"><span>3-</span> Name</label> + <div class="label-input"> + <input name="key" type="input" placeholder="Enter name"> + </div> + </div> + <div class="single-line-custom-key"> + <label class="label-name">Value</label> + <div class="label-input"> + <input name="value" type="input" + placeholder="Enter value"> + </div> + </div> + </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts index 710ca924a..97040ee90 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts @@ -14,7 +14,8 @@ export class MetadataTabComponent implements OnInit { counter = 0; modes: object[] = [ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, - {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}, + {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}]; private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private errorMessage: string; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 73f917f52..906904855 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -1,21 +1,27 @@ <app-header></app-header> <div class="new-wrapper"> + <div class="container-fluid main-container"> <header class="page-title"> <div class="row"> - <h2 class="col m-0">CBA Packages - <span>({{numberOfPackages}} packages)</span> + <h2 class="col m-0"> + <ul class="breadcrumb-header"> + <li>CBA Packages</li> + <li>Package Name</li> + </ul> </h2> - <div class="col"> + <div class="col d-flex justify-content-end header-button-save"> + <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button> + <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> </div> </div> </header> - <div class="main-container"> - <div class="container-fluid body-container creat-container-all"> - <div class="creat-container"> + <div class="container-fluid body-container"> + + <div class="container"> <div class="creat-action-container"> <a href="#" class="action-button"> <i class="icon-clone" aria-hidden="true"></i> @@ -27,20 +33,81 @@ <span>Archive</span> </a> - <a href="#" class="action-button"> + <a href="#" class="action-button delete"> <i class="icon-delete" aria-hidden="true"></i> <span>Delete</span> </a> </div> - <nav class="row"> - <div class="col pr-0"> - <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> - <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button> + + <div class="card creat-card view-package-container"> + <div class="row"> + <div class="col-8"> + <div class="row"> + <div class="col d-flex"> + <i class="package-type-icon icon-designer-mode"></i> + <div class="package-name-container"> + <div class="row"> + <div class="col-12 package-name deployed"> + Package Name + <span>.vLB.CDS</span> + <i class="icon-deploy"></i> + </div> + <div class="col-12 package-description"> + Last modified Oct 4, 2019 03:48 PM By Ahmed Abbas + </div> + </div> + <!-- <div class="row"> + <div class="col-4"> + <div class="package-view-title">Author Name</div> + <p>Abdelmuhaimen Seaudi</p> + </div> + <div class="col-4"> + <div class="package-view-title">Author Email</div> + <p>abdelmuhaimen.seaudi@orange.com</p> + </div> + <div class="col-4"> + <div class="package-view-title">Contributions</div> + <ul class="package-contributers"> + <li> + <button type="button" class="border-fade" data-toggle="tooltip" + 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"> + <img src="/assets/img/img-user2.jpg"> + </button> + </li> + <li> + <button type="button" data-toggle="tooltip" data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user3.jpg"> + </button> + </li> + <li> + <a href="">5 contributors</a> + </li> + </ul> + </div> + </div> --> + </div> + </div> + </div> + </div> + <div class="col-4 package-view-button"> + <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-play-circle"></i> Deploy</button> + <button class="btn btn-sm btn-primary">Designer Mode</button> + </div> </div> - </nav> + + </div> + <nav class="row"> <!--Nav Tabs--> - <div class="col pr-0"> + <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" @@ -85,12 +152,16 @@ </div> <div class="tab-pane fade" id="nav-authentication" role="tabpanel" aria-labelledby="nav-authentication-tab"> - <app-dsl-definitions-tab></app-dsl-definitions-tab> + <div class="card creat-card"> + <div class="editor-container"> + <app-dsl-definitions-tab></app-dsl-definitions-tab> + </div> + </div> </div> </div> </div> </div> </div> </div> - </div> +</div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index f6afb4929..10f1db65d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -1,66 +1,14 @@ <h6 class="create-title">CREATE</h6> <div class="card creat-card"> - <div class="single-line"> - <label class="label-name">Name</label> + <div class="single-line-model"> + <label class="label-name">Name + <span _ngcontent-uew-c3="">*</span> + </label> + <div class="label-input"> <input type="input" placeholder="Topology name.vLB.CDS"> </div> </div> - <hr /> - <div class="single-line"> - <label class="label-name">Management Type</label> - <div class="label-input"> - <div class="row"> - <div class="col-md-4 d-flex"> - <a class="select-type active" href="#"> - <div class="select-type-icon"><span class="icon-template-mapping"></span></div> - <div>Template And Support Mapping</div> - </a> - </div> - <div class="col-md-4 d-flex"> - <a class="select-type" href="#"> - <div class="select-type-icon"><span class="icon-template"></span></div> - <div>Template Only</div> - </a> - </div> - <div class="col-md-4 d-flex"> - <a class="select-type" href="#"> - <div class="select-type-icon"><span class="icon-mapping"></span></div> - <div>Mapping Only</div> - </a> - - </div> - </div> - - </div> - </div> - <hr /> - <div class="single-line"> - <label class="label-name">Type</label> - <div class="label-input"> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - - <span> - Velcoity - </span> - </label> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - - <span> - Jinja - </span> - </label> - <label name="trst"> - <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> - - <span> - Kotlin - </span> - </label> - </div> - </div> </div> <div class="template-mapping-accordion"> @@ -78,13 +26,36 @@ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 - wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum - eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla - assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt - sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer - farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus - labore sustainable VHS. + <div class="single-line"> + <label class="label-name">Template Type</label> + <div class="label-input"> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> + + <span> + Velcoity + </span> + </label> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> + + <span> + Jinja + </span> + </label> + <label name="trst"> + <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity> + + <span> + Kotlin + </span> + </label> + </div> + </div> + <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></div> + <div class="editor-container"> + <app-dsl-definitions-tab></app-dsl-definitions-tab> + </div> </div> </div> </div> @@ -99,14 +70,91 @@ </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 - wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum - eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla - assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt - sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer - farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus - labore sustainable VHS. + <h6 class="text-center">Select a source to load config parameters</h6> + <div class="text-center"> + <a href="#" class="mapping-source-load"> + <i class="icon-current-template"></i> + <br/> + <span>Use Current Template Instance</span> + </a> + <a href="#" data-toggle="modal" data-target="#exampleModal" class="mapping-source-load"> + <i class="icon-Upload-attribute"></i> + <br/> + <div>Upload attribute list</div> + <div class="source-load-note">(Should be comma delimited file)</div> + </a> + <!-- <a href="#" class="mapping-source-load"> + <i class="icon-import-cds"></i> + <br/> + <span>Import from SDC Model</span> + </a> --> + </div> + + <div class="table-container"> + + + </div> </div> + + + </div> + + + </div> + + <div class="template-mapping-action"> + <button class="btn btn-sm btn-outline-secondary">Cancel</button> + <button class="btn btn-sm btn-primary">Finish</button> + </div> + </div> +</div> + + +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Import File</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" + (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"> + <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector"> + <div class="folder-upload"> + <img 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()">Browse + Files + </button> + </div> + <div class="folder-upload-type">Allowed file type: json</div> + </ng-template> + </ngx-file-drop> + <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index"> + <table class="table"> + <thead> + <tr> + <th>Name : {{ item.name }}</th> + </tr> + </thead> + </table> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" + (click)="resetTheUploadedFiles()">Cancel + </button> + <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()"> + Import + </button> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index ef233ad99..a0a54031f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -1,6 +1,156 @@ -<h6>Basic List Template and mapping</h6> -<div> - <a (click)="openCreationView()" class="action-button"> - <span>Create</span> + + + <a (click)="openCreationView()" class="create-template-mapping-button"> + <i class="fa fa-plus"></i> <span>Create</span> </a> + + +<div class="template-mapping-accordion"> + <div id="accordion"> + <div class="card"> + <div class="card-header" id="headingThree"> + <h5 class="mb-0 d-flex justify-content-between"> + <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" + aria-controls="collapseThree"> + Template and Mapping List + </button> + + </h5> + </div> + + <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion"> + <div class="card-body max-height-list"> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list active">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + <span>Template</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + <span>Template</span> + </a> + </div> + </div> + </div> + </div> + </div> + + </div> </div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index f45b2fed7..7f6c0a6f4 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -7,11 +7,11 @@ </div> <div class="card-footer row"> <div class="col"> - <a routerLink="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create Package + <a routerLink="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create </a> </div> <div class="col"> - <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package + <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import </a> </div> </div> |