You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/12/19 13:41:46 UTC
[incubator-dlab] 02/02: [DLAB-1239]: Swagger UI integration in DLab
navigation
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch DLAB-1239
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit b2ca6110cf23108b4e819e7724206ec22f0d959c
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Dec 19 15:42:30 2019 +0200
[DLAB-1239]: Swagger UI integration in DLab navigation
---
.../src/app/shared/navbar/navbar.component.html | 57 +++++++++++++---------
.../src/app/shared/navbar/navbar.component.scss | 24 +++++++++
.../webapp/src/assets/svg/swagger-logo.svg | 8 +++
3 files changed, 65 insertions(+), 24 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index f8e8ef6..ca89f33 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -68,36 +68,45 @@
<mat-sidenav #drawer mode="side" opened role="navigation" [style.width]="isExpanded ? '220px' : '60px'" disableClose>
<mat-nav-list>
<nav>
- <a class="nav-item" [routerLink]="['/resources_list']" [routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}">
- <span *ngIf="isExpanded; else resources">List of Resources</span>
- <ng-template #resources><i class="material-icons">dashboard</i></ng-template>
- </a>
- <a class="nav-item has-children" *ngIf="healthStatus?.admin">
- <span *ngIf="isExpanded">Administration</span>
+ <div>
+ <a class="nav-item" [routerLink]="['/resources_list']" [routerLinkActive]="['active']"
+ [routerLinkActiveOptions]="{exact:true}">
+ <span *ngIf="isExpanded; else resources">List of Resources</span>
+ <ng-template #resources><i class="material-icons">dashboard</i></ng-template>
+ </a>
+ <a class="nav-item has-children" *ngIf="healthStatus?.admin">
+ <span *ngIf="isExpanded">Administration</span>
- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/roles']"
- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
- <span *ngIf="isExpanded; else roles">Roles</span>
- <ng-template #roles><i class="material-icons">account_box</i></ng-template>
+ <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/roles']"
+ [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+ <span *ngIf="isExpanded; else roles">Roles</span>
+ <ng-template #roles><i class="material-icons">account_box</i></ng-template>
+ </a>
+ <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/projects']"
+ [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+ <span *ngIf="isExpanded; else projects">Projects</span>
+ <ng-template #projects><i class="material-icons">dns</i></ng-template>
+ </a>
+ <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
+ [routerLink]="['/environment_management']" [routerLinkActive]="['active']"
+ [routerLinkActiveOptions]="{exact:true}">
+ <span *ngIf="isExpanded; else env">Environment Management</span>
+ <ng-template #env><i class="material-icons">settings</i></ng-template>
+ </a>
</a>
- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/projects']"
+ <a *ngIf="healthStatus?.billingEnabled" class="nav-item" [routerLink]="['/billing_report']"
[routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
- <span *ngIf="isExpanded; else projects">Projects</span>
- <ng-template #projects><i class="material-icons">dns</i></ng-template>
+ <span *ngIf="isExpanded; else billing">Billing Report</span>
+ <ng-template #billing><i class="material-icons">account_balance_wallet</i></ng-template>
</a>
- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
- [routerLink]="['/environment_management']" [routerLinkActive]="['active']"
+ </div>
+ <div>
+ <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact:true}">
- <span *ngIf="isExpanded; else env">Environment Management</span>
- <ng-template #env><i class="material-icons">settings</i></ng-template>
+ <img class="swagger-logo" src="../../../assets/svg/swagger-logo.svg" alt="Swagger Logo">
+ <span *ngIf="isExpanded; else resources">Cloud endpoint API</span>
</a>
- </a>
- <a *ngIf="healthStatus?.billingEnabled" class="nav-item" [routerLink]="['/billing_report']"
- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
- <span *ngIf="isExpanded; else billing">Billing Report</span>
- <ng-template #billing><i class="material-icons">account_balance_wallet</i></ng-template>
- </a>
+ </div>
</nav>
</mat-nav-list>
</mat-sidenav>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
index 49b8ffc..fd4d6b7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
@@ -168,6 +168,10 @@ a.nav-item {
color: #577289 !important;
outline: none;
+ span {
+ vertical-align: middle;
+ }
+
i {
vertical-align: middle;
padding-left: 8px;
@@ -286,6 +290,26 @@ a.nav-item {
transform: translateY(-4px) translateX(6px) rotate(-45deg);
}
+mat-sidenav {
+
+ mat-nav-list {
+ height: 100%;
+
+ nav {
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+
+ .swagger-logo {
+ vertical-align: middle;
+ width: 30px;
+ padding: 0 2px 0 5px;
+ }
+ }
+ }
+}
+
mat-sidenav-content {
&.mat-drawer-content {
transition: all 0.35s ease-out;
diff --git a/services/self-service/src/main/resources/webapp/src/assets/svg/swagger-logo.svg b/services/self-service/src/main/resources/webapp/src/assets/svg/swagger-logo.svg
new file mode 100644
index 0000000..cb85281
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/assets/svg/swagger-logo.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+ <g>
+ <path d="M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267 [...]
+ <path d="M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67 [...]
+ <path d="M169.327319,127.956161 C169.042723,133.246373 164.421106,137.639224 159.866213,136.872586 C159.844426,136.872586 159.821277,136.872586 159.798128,136.872586 C154.753021,136.879395 150.658383,132.794288 150.652936,127.749182 C150.824511,122.690458 155.019915,118.703395 160.08,118.789182 C165.125106,118.813692 169.59966,123.077182 169.327319,127.956161 Z M88.2011915,179.220161 C90.1034894,179.27599 92.0071489,179.235139 94.2008511,179.235139 L94.2008511,193.021012 C80.5661277, [...]
+ </g>
+</svg>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org