You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/07/28 14:49:35 UTC
[incubator-dlab] 07/10: [DLAB-1943]: Fixed detail billing list,
project-list and environment menegment
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1943
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit ad630d65818ac4c3ba81a140448ab735f4456d03
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Jul 28 16:21:35 2020 +0300
[DLAB-1943]: Fixed detail billing list, project-list and environment menegment
---
.../audit/audit-grid/audit-grid.component.scss | 5 +-
.../reporting-grid/reporting-grid.component.scss | 3 +-
.../cost-details-dialog.component.html | 3 +-
.../cost-details-dialog.component.scss | 3 +-
.../install-libraries.component.html | 37 +++--
.../install-libraries.component.scss | 113 +++++++++-----
.../resources-grid/resources-grid.component.scss | 164 ++++++++++-----------
.../webapp/src/assets/styles/_dialogs.scss | 5 +
.../webapp/src/assets/styles/_general.scss | 3 +
9 files changed, 197 insertions(+), 139 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
index 740f2cf..0ec3d4c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
@@ -49,6 +49,7 @@
.th_date {
width: 14%;
z-index: 10 !important;
+ padding-left: 0;
.label {
padding-bottom: 10px;
@@ -199,7 +200,7 @@
vertical-align: super !important;
.text {
- padding-left: 15px;
+ padding-left: 20px;
}
}
@@ -301,7 +302,7 @@
}
.audit-user {
- padding-left: 15px;
+ padding-left: 20px;
}
.table-footer {
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
index 5534444..c2d23d1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
@@ -135,6 +135,7 @@
width: 16%;
min-width: 200px;
z-index: 15 !important;
+ padding-left: 0;
}
.th_user{
@@ -211,7 +212,7 @@
vertical-align: super !important;
.text{
- padding-left: 15px;
+ padding-left: 20px;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
index 17fe71a..d916d94 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
@@ -33,7 +33,7 @@
</table>
<div class="billing-detail content-box">
<mat-list>
- <mat-list-item class="list-header">
+ <mat-list-item class="list-header" [ngClass]="{'pr-3': notebook.billing.report_lines.length > 6}">
<div class="resource-name ellipsis" [ngClass]="{ 'wide-name-field' : provider === 'azure' }">Name</div>
<div class="service">Product</div>
<!-- <div class="resource-type" *ngIf="provider === 'aws'">Type</div>-->
@@ -55,6 +55,7 @@
<div class="cost-currency">{{ item.cost }} {{ item.currency }}</div>
</mat-list-item>
</div>
+
</mat-list>
<div class="total">
<strong>Total: </strong>{{ notebook.cost }} {{ notebook.currency_code }}</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
index 18998ea..a9d081a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
@@ -67,14 +67,13 @@
}
}
-
.scrolling-content {
max-height: 285px;
overflow-y: auto;
}
.mat-list-item-content {
- font-size: 15px !important;
+ font-size: 14px !important;
justify-content: space-between;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
index 54f1d86..12319b3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
@@ -65,6 +65,7 @@
[formControl]="libSearch"
#trigger="matAutocompleteTrigger"
(keyup.enter)="addLibrary(lib)"
+ class="library-input"
>
</div>
<mat-autocomplete #auto="matAutocomplete" class="suggestions" >
@@ -95,7 +96,14 @@
<div class="control-group control-select">
<label class="label">Library version</label>
<div class="control control-relative">
- <input type="text" [placeholder]="'Enter library version (optional)'" [(ngModel)]="lib.version" [disabled]="!lib.name" (keyup.enter)="addLibrary(lib)">
+ <input
+ type="text"
+ class="library-input"
+ [placeholder]="'Enter library version (optional)'"
+ [(ngModel)]="lib.version"
+ [disabled]="!lib.name"
+ (keyup.enter)="addLibrary(lib)"
+ >
<span class="plus-icon"
[ngClass]="{'not-allow': !this.selectedLib || this.selectedLib?.isInSelectedList}"
matTooltip="Library is in selected list" matTooltipPosition="above" [matTooltipDisabled]="!this.selectedLib?.isInSelectedList"
@@ -114,7 +122,7 @@
<span class="other-message" *ngIf="lib.name?.length && !this.selectedLib">groupId:artifactId:versionId</span>
<input
type="text" [placeholder]="'Enter library name in <groupId>:<artifactId>:<versionId> format'"
-
+ class="library-input"
[disabled]="!group"
[matAutocomplete]="auto"
[formControl]="libSearch"
@@ -231,8 +239,6 @@
</div>
</div>
-
-
<div class="libs-info">
<mat-list>
<mat-list-item class="list-header">
@@ -273,11 +279,17 @@
</mat-list-item>
<ng-container *ngIf="filtered" >
- <mat-list-item class="lib-col filter-row">
- <th class="lib-name lib-input">
- <input placeholder="Filter by library name" [value]="filterModel.name" (input)="filterModel.name = $event.target['value']" type="text" class="form-control filter-field "/>
+ <mat-list-item class="filter-row">
+ <th class="lib-name filter-col">
+ <input
+ placeholder="Filter by library name"
+ [value]="filterModel.name"
+ (input)="filterModel.name = $event.target['value']"
+ type="text"
+ class="form-control filter-field"
+ />
</th>
- <th class="lib-group lib-col">
+ <th class="lib-group filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.group"
@@ -286,7 +298,7 @@
>
</multi-select-dropdown>
</th>
- <th class="lib-destination lib-col">
+ <th class="lib-destination filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.resource"
@@ -295,7 +307,7 @@
>
</multi-select-dropdown>
</th>
- <th class="lib-resource-type lib-col">
+ <th class="lib-resource-type filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.resourceType"
@@ -304,12 +316,13 @@
>
</multi-select-dropdown>
</th>
- <th class="lib-status lib-col">
+ <th class="lib-status filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.status"
[type]="'status'"
- [model]="this.filterModel.status">
+ [model]="this.filterModel.status"
+ >
</multi-select-dropdown>
</th>
<ng-container matColumnDef="action-filter" stickyEnd>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
index 48ed412..2b95c0b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
@@ -90,12 +90,15 @@
.mat-list-item {
height: auto !important;
+ font-family: "Open Sans", sans-serif;
+ font-weight: 400;
.mat-list-item-content {
height: auto !important;
min-height: 54px !important;
border-bottom: 1px solid #edf1f5;
padding-right: 10px;
+ padding-left: 0;
}
}
@@ -111,17 +114,34 @@
.uploading {
margin: 0 auto;
}
+
+ .list-selected {
+ padding: 10px;
+ font-family: 'Open Sans', sans-serif;
+ height: 130px;
+ overflow-y: auto;
+
+ h4 {
+ margin-bottom: 20px;
+ font-size: 14px;
+ text-align: center;
+ font-weight: 400;
+ color: #718ba6;
+ }
+
+ mat-chip-list .mat-chip-list-wrapper {
+ overflow-y: auto;
+ padding: 3px;
+ }
+ }
}
+
.list-item{
display: flex;
width: 100%;
padding-left: 20px;
}
-.mat-list-base {
- //padding: 40px 30px;
-}
-
.object {
width: 70%;
display: flex;
@@ -132,6 +152,7 @@
.size {
width: 30%;
}
+
.scrolling-content.delete-list {
max-height: 200px;
overflow-y: auto;
@@ -142,7 +163,7 @@
width: 100%;
justify-content: center;
color: #35afd5;
- padding: 15px;
+ padding: 14px;
}
ul.resources{
@@ -150,8 +171,6 @@ ul.resources{
}
.dependency-list-header {
- //border-top: 1px solid #edf1f5;
- //border-bottom: 1px solid #edf1f5;
color: #577289;
width: 100%;
padding: 15px 0 5px 0;
@@ -202,7 +221,13 @@ ul.resources{
width: 70%;
input{
+ font-size: 15px;
+ padding-left: 15px;
+ }
+
+ .dropdown-list button {
font-size: 14px;
+ padding-top: 0;
}
}
@@ -298,29 +323,9 @@ ul.resources{
}
}
-.list-selected {
- padding: 10px;
- font-family: 'Open Sans', sans-serif;
- height: 130px;
- overflow-y: auto;
-
- h4 {
- margin-bottom: 20px;
- font-size: 14px;
- text-align: center;
- font-weight: 400;
- color: #718ba6;
- }
-
- mat-chip-list .mat-chip-list-wrapper {
- overflow-y: auto;
- padding: 3px;
- }
-}
-
.mat-list-item {
color: #718ba6 !important;
- font-size: 14px;
+ font-size: 13px !important;
font-weight: 300;
}
@@ -343,7 +348,20 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
padding: 0 20px;
display: flex;
flex: 1 1 auto;
- min-height: 0px;
+ min-height: 0;
+
+ .filter-row {
+ .filter-col{
+ padding-left: 0;
+ &.lib-name{
+ padding-left: 5px;
+ .filter-field{
+ padding-left: 15px;
+ }
+ }
+ }
+ }
+
.mat-list {
width: 100%;
@@ -352,7 +370,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
max-height: 300px;
height: 80%;
overflow-y: auto;
- overflow-x: hidden;
+ overflow-x: overlay;
.info {
p {
@@ -362,8 +380,11 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
}
}
+
.lib-name {
width: 27%;
+ padding-right: 10px;
+ padding-left: 20px;
&-col{
display: flex;
@@ -383,21 +404,26 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.lib-group,
.lib-destination {
width: 17%;
- padding-left: 6px;
+ padding-left: 15px;
+ padding-right: 10px;
}
.lib-status {
width: 17%;
- padding-left: 6px;
+ padding-left: 15px;
+ padding-right: 10px;
}
.lib-resource-type {
width: 17%;
- padding-left: 6px;
+ padding-left: 15px;
+ padding-right: 10px;
}
+
.lib-group-col {
width: 17%;
- padding-left: 8px;
+ padding-left: 17px;
+ padding-right: 10px;
}
.st-group {
@@ -411,20 +437,19 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.lib-destination-col {
width: 33.3%;
- padding-left: 8px;
+ padding-left: 15px;
}
.lib-resource-type-col {
width: 33.3%;
color: #36afd5;
- padding-left: 8px;
+ padding-left: 15px;
}
.lib-status-col {
position: relative;
width: 33.3%;
- padding-left: 8px;
-
+ padding-left: 15px;
.warn-action {
position: absolute;
@@ -467,15 +492,18 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
padding-bottom: 3px;
}
-.mat-dialog-container.mat-dialog-container .install-libraries#dialog-box {
+.mat-dialog-container.mat-dialog-container .install-libraries#dialog-box {
.mat-header-cell{
padding: 0;
border: none;
+ position: absolute;
+ right: 10px;
}
.filter-actions {
display: flex;
margin-left: 6px;
+
.btn {
padding: 6px;
height: auto;
@@ -486,6 +514,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
display: flex;
}
}
+
.reset{
&:hover {
border-color: #f1696e;
@@ -493,6 +522,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
color: #f1696e;
}
}
+
.apply:hover {
border-color: #49af38;
background: #f9fafb;
@@ -502,8 +532,10 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
.install-libraries .dropdown-multiselect .list-menu li {
+
a{
font-size: 13px;
+
&.list-item{
color: #4a5c89 !important;
}
@@ -542,12 +574,14 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.lib-info{
width: 100%;
+
.delete-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 5px 10px;
+
.butt.action{
line-height: 26px;
}
@@ -556,6 +590,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.btn{
line-height: 26px;
+
&.install-btn{
margin-left: 0;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
index 4d604c0..0549cb7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
@@ -305,88 +305,6 @@ table.resources {
text-transform: capitalize;
}
- &.data-grid .list-menu {
- left: auto;
- margin-left: 0;
- right: 15px;
- padding: 10px 15px;
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- border: none;
- min-width: 190px;
- }
-
- .settings {
- position: relative;
- text-align: right;
- width: 6%;
- padding-right: 15px !important;
- justify-content: flex-end;
-
- .actions {
- background-image: url(../../../assets/svg/settings_icon.svg);
- width: 16px;
- height: 16px;
- display: inline-block;
- text-align: center;
- cursor: pointer;
- }
-
- .disabled {
- opacity: 0.4;
- cursor: not-allowed;
- pointer-events: none;
- }
- }
-
-
- &.data-grid .list-menu li {
- font-size: 13px;
- border-bottom: 1px solid #edf1f5;
- padding-bottom: 5px;
- cursor: pointer;
- margin: 5px -5px;
- color: #577289;
- transition: all 0.45s ease-in-out;
- div{
- padding: 8px 15px;
- }
- }
-
- &.data-grid .list-menu a.navigate {
- text-decoration: none;
- color: #577289;
- transition: all 0.45s ease-in-out;
- }
-
- &.data-grid .list-menu li i {
- font-size: 18px;
- padding-right: 5px;
- vertical-align: bottom;
- }
-
- &.data-grid .list-menu li:not(.not-allow):hover,
- &.data-grid .list-menu li:not(.not-allow):hover a {
- background: none !important;
- color: #36afd5;
- }
-
- &.data-grid .list-menu li:last-child {
- border-bottom: 0;
- }
-
- &.data-grid .list-menu ul {
- margin-bottom: 0;
- }
-
- &.data-grid .list-menu .active-items li {
- border-bottom: 1px solid #edf1f5;
- }
-
- &.data-grid .message_block {
- background: #edf6f9;
- }
-
.message_block td {
text-align: left !important;
}
@@ -430,6 +348,88 @@ table.resources {
.not-allow{
cursor: not-allowed !important;
}
+}
+
+.data-grid .list-menu {
+ left: auto;
+ margin-left: 0;
+ right: 15px;
+ padding: 10px 15px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+ border: none;
+ min-width: 190px;
+}
+
+.settings {
+ position: relative;
+ text-align: right;
+ width: 6%;
+ padding-right: 15px !important;
+ justify-content: flex-end;
+
+ .actions {
+ background-image: url(../../../assets/svg/settings_icon.svg);
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ .disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+}
+
+.data-grid .list-menu li {
+ font-size: 13px;
+ border-bottom: 1px solid #edf1f5;
+ padding-bottom: 5px;
+ cursor: pointer;
+ margin: 5px -5px;
+ color: #577289;
+ transition: all 0.45s ease-in-out;
+ div{
+ padding: 8px 15px;
+ }
}
+.data-grid .list-menu a.navigate {
+ text-decoration: none;
+ color: #577289;
+ transition: all 0.45s ease-in-out;
+}
+
+.data-grid .list-menu li i {
+ font-size: 18px;
+ padding-right: 5px;
+ vertical-align: bottom;
+}
+
+.data-grid .list-menu li:not(.not-allow):hover,
+.data-grid .list-menu li:not(.not-allow):hover a {
+ background: none !important;
+ color: #36afd5;
+}
+
+.data-grid .list-menu li:last-child {
+ border-bottom: 0;
+}
+
+.data-grid .list-menu ul {
+ margin-bottom: 0;
+}
+
+.data-grid .list-menu .active-items li {
+ border-bottom: 1px solid #edf1f5;
+}
+
+.data-grid .message_block {
+ background: #edf6f9;
+}
+
+
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
index c00dd14..71ca6da 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
@@ -374,6 +374,11 @@ mat-dialog-container {
height: 30px;
}
+.mat-list-item{
+ font-family: "Open Sans", sans-serif;
+ font-weight: 400;
+}
+
.d-none{
display: none !important;
}
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
index c278ea0..50aeed8 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
@@ -35,6 +35,9 @@ body.modal-open {
.mt-5 {margin-top: 5px}
+
+.pr-3{padding-right: 3pxr7}
+
.pb-50 {padding-bottom: 50px;}
.txt-r {text-align: right }
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org