summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/designer-client/src/app')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html86
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html12
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html69
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts10
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html28
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts32
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html117
8 files changed, 183 insertions, 175 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 9e8ef5d7b..0ffd9cb5e 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
@@ -2,7 +2,7 @@
<div class="new-wrapper">
<div class="container-fluid main-container">
- <header class="page-title" style="padding: 18px 30px 10px;">
+ <header class="page-title" style="padding: 16px 30px 12px;">
<div class="row">
<h2 class="col m-0">
<ul class="breadcrumb-header">
@@ -13,53 +13,46 @@
</h2>
<div class="col profile-help">
<nav class="navbar navbar-expand-lg navbar-light">
- <ul class="navbar-nav ml-auto">
- <li class="nav-item help-btn">
- <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300"
- tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
- </li>
- <div class="nav-item dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
- <ul class="dropdown-content">
- <li>
- <a href="#">Username</a>
- </li>
- <li>
- <a href="#">Settings</a>
- </li>
- <li>
- <a href="#">Projects</a>
- </li>
- <li>
- <a href="#">Log out</a>
- </li>
- </ul>
- </div>
- <!-- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Dropdown
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
+ <ul class="navbar-nav ml-auto">
+ <!-- <li class="nav-item help-btn">
+ <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"
+ [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
+ </li> -->
+ <!--Help Menu-->
+ <div class="nav-item dropdown helpMenu">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+ <ul class="dropdown-content">
+ <!-- <li>
+ <i class="icon-get_started" aria-hidden="true"></i>
+ <p>
+ <input id="clicker3" [checked]="startTour" type="checkbox" />
+ <label for="clicker">
+ Getting Started
+ <span>Quick steps to help you get started</span>
+ </label>
+ </p>
</li> -->
+ <li>
+ <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+ <i class="icon-user_guide" aria-hidden="true"></i>
+ <p>
+ Tutorials
+ <span>CDS Designer's User Guide</span>
+ </p>
+ </a>
+ </li>
</ul>
- </nav>
- <!-- <ul class="menu-dropdown userProfile">
- <li><button type="button" class="btn package-info-btn" data-toggle="modal"
- data-target="#exampleModalLong">
- <i class="icon-info" aria-hidden="true"></i>
- </button></li>
- <li>
- <div class="dropdown">
+ </div>
+ <!--User Menu-->
+ <div class="nav-item dropdown userMenu">
<input class="dropdown-toggle" type="text">
- <div class="dropdown-text">User name</div>
+ <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
<ul class="dropdown-content">
<li>
+ <a href="#">Username</a>
+ </li>
+ <li>
<a href="#">Settings</a>
</li>
<li>
@@ -70,9 +63,10 @@
</li>
</ul>
</div>
- </li>
- </ul> -->
- </div>
+
+ </ul>
+ </nav>
+ </div>
</div>
</header>
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 52445ede2..f2e5eedf1 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
@@ -62,8 +62,8 @@
<div class="single-line-model">
<label class="label-name">Tags</label>
<div class="label-input">
- <input tourAnchor="mt-packageTags" type="input" (keyup.enter)="addTag($event)" (keyup.Space)="addTag($event)"
- placeholder="Ex., vDNS-CDS">
+ <input tourAnchor="mt-packageTags" type="input" (keyup.enter)="addTag($event)"
+ (keyup.Space)="addTag($event)" placeholder="Ex., vDNS-CDS">
</div>
<div class="model-note-container tag-notes">Use ENTER/SPACE to add tag</div>
<div class="model-note-container tages-container">
@@ -76,14 +76,14 @@
<div id="container">
<div id="target">
<div class="card creat-card">
- <div class="single-line customKeyTitle">
+ <div class="single-line customKeyTitle">
<h5 class="label-name w-100 ">
Custom key
</h5>
<span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span>
</div>
- <div tourAnchor="mt-packageKeys" *ngFor="let map of this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key">
+ <div *ngFor="let map of this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key">
<div class="single-line-custom-key">
<label class="label-name"><span>{{i + 1}}.</span> Name</label>
<div class="label-input">
@@ -106,8 +106,8 @@
<div class="single-line-custom-key">
<label class="label-name"><span>{{customKeysMap.size + 1}}.</span> Name</label>
<div class="label-input">
- <input tourAnchor="mt-packageKeys" (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey"
- placeholder="Enter name">
+ <input tourAnchor="mt-packageKeys" (keyup.enter)="addCustomKey()" name="key" type="input"
+ class="mapKey" placeholder="Enter name">
</div>
</div>
<div class="single-line-custom-key">
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 d42be1ff3..a09951cd2 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
@@ -2,7 +2,7 @@
<tour-step-template></tour-step-template>
<div class="new-wrapper">
<div class="container-fluid main-container">
- <header class="page-title">
+ <header class="page-title" style="padding: 16px 30px 12px;">
<div class="row">
<h2 class="col m-0 pb-0">
<ul class="breadcrumb-header">
@@ -14,11 +14,34 @@
<div class="col profile-help">
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="navbar-nav ml-auto">
- <li class="nav-item help-btn">
- <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"
- [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
- </li>
- <div class="nav-item dropdown">
+ <!--Help Menu-->
+ <div class="nav-item dropdown helpMenu">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+ <ul class="dropdown-content">
+ <!-- <li>
+ <i class="icon-get_started" aria-hidden="true"></i>
+ <p>
+ <input id="clicker3" [checked]="startTour" type="checkbox" />
+ <label for="clicker">
+ Getting Started
+ <span>Quick steps to help you get started</span>
+ </label>
+ </p>
+ </li> -->
+ <li>
+ <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+ <i class="icon-user_guide" aria-hidden="true"></i>
+ <p>
+ Tutorials
+ <span>CDS Designer's User Guide</span>
+ </p>
+ </a>
+ </li>
+ </ul>
+ </div>
+ <!--User Menu-->
+ <div class="nav-item dropdown userMenu">
<input class="dropdown-toggle" type="text">
<div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
<ul class="dropdown-content">
@@ -36,42 +59,8 @@
</li>
</ul>
</div>
- <!-- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Dropdown
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
- </li> -->
</ul>
</nav>
- <!-- <ul class="menu-dropdown userProfile">
- <li><button type="button" class="btn package-info-btn" data-toggle="modal"
- data-target="#exampleModalLong">
- <i class="icon-info" aria-hidden="true"></i>
- </button></li>
- <li>
- <div class="dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">User name</div>
- <ul class="dropdown-content">
- <li>
- <a href="#">Settings</a>
- </li>
- <li>
- <a href="#">Projects</a>
- </li>
- <li>
- <a href="#">Log out</a>
- </li>
- </ul>
- </div>
- </li>
- </ul> -->
</div>
</div>
</header>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts
index 87e6c1990..d101d6111 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts
@@ -54,11 +54,11 @@ export const steps = [
title: 'Package tag',
},
// -------
- {
- anchorId: 'mt-packageKeys',
- content: 'Set your package custom keys (Optional)',
- title: 'Package keys',
- },
+ // {
+ // anchorId: 'mt-packageKeys',
+ // content: 'Set your package custom keys (Optional)',
+ // title: 'Package keys',
+ // },
// Temaplate & Mapping
{
anchorId: 'tm-templateTab',
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 5712f80a0..1390a7b78 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
@@ -13,7 +13,7 @@
</a>
<br />
<a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
- tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package
+ class="icon-import-blue" aria-hidden="true"></i>Import Package
</a>
<ngx-ui-loader></ngx-ui-loader>
</div>
@@ -120,4 +120,4 @@
</div>
</div>
-</div> \ No newline at end of file
+</div>
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 8391530d6..f81b02643 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
@@ -9,25 +9,31 @@
<input id="clicker" [checked]="startTour" type="checkbox" />
<label class="ml-1" for="clicker">Start the tour</label>
- <div class="panel-wrap">
+ <div class="panel-wrap packageWizard">
<div class="panel">
<button id="clicker1" class="close" type="button" (click)="stopTour()">
- <label for="clicker">&times;</label>
+ <label for="clicker"><img src="assets/img/icon-close.svg" /></label>
+ </button>
+ <br />
+ <h3>Welcome to CDS Designer UI</h3>
+ <p>CDS has new look and new way of delivering a reusable and simplified self-service experience.</p>
+ <!-- <span>Tab through these quick steps to help you get started.</span>
+ <br /> -->
+ <button id="clicker2" class="closeWizard mr-2" type="button" (click)="stopTour()">
+ <label for="clicker">No Thanks</label>
+ </button>
+ <button type="button" class="startTour float">
+ <label (click)="start()" for="clicker" class="m-0">Start Tour</label>
</button>
-
- <h3>Welcome to CDS</h3>
- <p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p>
- <button type="button" class="btn" style="background-color: #fff;margin:0">
- <label style="margin: 0;" (click)="start()" for="clicker">Let's get started</label></button>
</div>
</div>
<!---->
- <nav class="row">
+ <nav class="row" tourAnchor="allTab">
<!--Nav Tabs-->
<div class="col pr-0">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
- <a tourAnchor="allTab" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
- href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a>
+ <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+ role="tab" aria-controls="nav-home" aria-selected="true">All</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
<a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
@@ -53,4 +59,4 @@
<app-sort-packages></app-sort-packages>
</div>
</div>
-</div> \ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
index c0a48d346..f863341e0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -40,7 +40,34 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy {
console.log('PackagesDashboardComponent');
- this.tourService.initialize([...steps]);
+ this.tourService.initialize([
+ {
+ anchorId: 'allTab',
+ content: 'Package list is where you get access to your all and most recent CBA packages.',
+ title: 'Managing your CBA packages',
+ },
+ {
+ anchorId: 'search',
+ content: 'Search for Package by name, version, tags and type',
+ title: 'Search',
+ },
+ {
+ anchorId: 'tagFilter',
+ content: 'Filter Packages by tags',
+ title: 'Tag Filter',
+ },
+ {
+ anchorId: 'create',
+ content: 'Start creating a full CBA packages from built-in forms without programming.',
+ title: 'Create new package',
+ },
+ {
+ anchorId: 'metadataTab',
+ content: 'Set your package basic information',
+ title: 'Metadata Tab',
+ route: 'packages/createPackage'
+ },
+ ]);
this.checkTour();
}
@@ -57,6 +84,9 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy {
this.tourService.start();
this.tourService.events$.subscribe(res => {
console.log(res);
+ if (res.value && res.value.anchorId && res.value.anchorId.includes('mt-')) {
+ $('#nav-metadata-tab').trigger('click');
+ }
if (res.value && res.value.anchorId && res.value.anchorId.includes('tm-')) {
$('#nav-template-tab').trigger('click');
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
index 5e04b71ac..936c2da8d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
@@ -1,70 +1,59 @@
<!--Page Title-->
<header class="page-title" style="padding-top: 14px;padding-bottom: 13px;">
- <div class="row">
- <h2 class="col m-0" style="line-height: 33px;">CBA Packages
- <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
- </h2>
- <div class="col profile-help">
- <nav class="navbar navbar-expand-lg navbar-light">
- <ul class="navbar-nav ml-auto">
- <li class="nav-item help-btn">
- <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300"
- tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
- </li>
- <div class="nav-item dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
- <ul class="dropdown-content">
- <li>
- <a href="#">Username</a>
- </li>
- <li>
- <a href="#">Settings</a>
- </li>
- <li>
- <a href="#">Projects</a>
- </li>
- <li>
- <a href="#">Log out</a>
- </li>
- </ul>
- </div>
- <!-- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Dropdown
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
- </li> -->
- </ul>
- </nav>
- <!-- <ul class="menu-dropdown userProfile">
- <li><button type="button" class="btn package-info-btn" data-toggle="modal"
- data-target="#exampleModalLong">
- <i class="icon-info" aria-hidden="true"></i>
- </button></li>
+ <div class="row">
+ <h2 class="col m-0" style="line-height: 33px;">CBA Packages
+ <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
+ </h2>
+ <div class="col profile-help">
+ <nav class="navbar navbar-expand-lg navbar-light">
+ <ul class="navbar-nav ml-auto">
+ <!--Help Menu-->
+ <div class="nav-item dropdown helpMenu">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+ <ul class="dropdown-content">
+ <!-- <li>
+ <i class="icon-get_started" aria-hidden="true"></i>
+ <p>
+ <input id="clicker3" [checked]="startTour" type="checkbox" />
+ <label for="clicker">
+ Getting Started
+ <span>Quick steps to help you get started</span>
+ </label>
+ </p>
+ </li> -->
<li>
- <div class="dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">User name</div>
- <ul class="dropdown-content">
- <li>
- <a href="#">Settings</a>
- </li>
- <li>
- <a href="#">Projects</a>
- </li>
- <li>
- <a href="#">Log out</a>
- </li>
- </ul>
- </div>
+ <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+ <i class="icon-user_guide" aria-hidden="true"></i>
+ <p>
+ Tutorials
+ <span>CDS Designer's User Guide</span>
+ </p>
+ </a>
</li>
- </ul> -->
- </div>
+ </ul>
+ </div>
+ <!--User Menu-->
+ <div class="nav-item dropdown userMenu">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
+ <ul class="dropdown-content">
+ <li>
+ <a href="#">Username</a>
+ </li>
+ <li>
+ <a href="#">Settings</a>
+ </li>
+ <li>
+ <a href="#">Projects</a>
+ </li>
+ <li>
+ <a href="#">Log out</a>
+ </li>
+ </ul>
+ </div>
+ </ul>
+ </nav>
</div>
+ </div>
</header>