aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html111
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts3
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html101
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html190
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html158
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html4
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">&times;</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>