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/08/03 08:59:05 UTC
[incubator-dlab] 01/02: [DLAB-1971]: UI changes for all pages
(part2)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1964
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 1b367b7c1c6247a6f2280e6b583a1dcc21df38f7
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Aug 3 11:39:49 2020 +0300
[DLAB-1971]: UI changes for all pages (part2)
---
.../src/app/core/interceptors/error.interceptor.ts | 3 +-
.../core/services/librariesInstallation.service.ts | 1 -
.../audit/audit-grid/audit-grid.component.html | 7 +-
.../audit/audit-grid/audit-grid.component.scss | 12 +---
.../audit/audit-grid/audit-grid.component.ts | 2 +-
.../reporting-grid/reporting-grid.component.html | 45 ++++++++----
.../reporting-grid/reporting-grid.component.scss | 77 ++++++++++++--------
.../reporting-grid/reporting-grid.component.ts | 40 ++++++++++-
.../install-libraries.component.html | 84 ++--------------------
.../install-libraries.component.ts | 10 ++-
.../resources-grid/resources-grid.component.html | 6 +-
.../resources-grid/resources-grid.component.scss | 24 ++++---
.../resources/webapp/src/assets/styles/_theme.scss | 14 ++++
.../src/main/resources/webapp/src/styles.scss | 7 ++
14 files changed, 178 insertions(+), 154 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/interceptors/error.interceptor.ts b/services/self-service/src/main/resources/webapp/src/app/core/interceptors/error.interceptor.ts
index 4ae3899..d1ae984 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/interceptors/error.interceptor.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/interceptors/error.interceptor.ts
@@ -18,7 +18,7 @@
*/
import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import {BehaviorSubject} from 'rxjs';
import {
HttpInterceptor,
HttpRequest,
@@ -47,6 +47,7 @@ import { HTTP_STATUS_CODES } from '../util';
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
catchError(error => {
+ if (error.error && error.error.message && error.error.message.indexOf('query param artifact') !== -1) return _throw(error);
if (error instanceof HttpErrorResponse) {
switch ((<HttpErrorResponse>error).status) {
case HTTP_STATUS_CODES.UNAUTHORIZED:
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/librariesInstallation.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/librariesInstallation.service.ts
index 2119b1a..38d18bc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/librariesInstallation.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/librariesInstallation.service.ts
@@ -49,7 +49,6 @@ export class LibrariesInstallationService {
public getAvailableDependencies(data): Observable<{}> {
const body = `/maven?artifact=${data}`;
-
return this.applicationServiceFacade
.buildGetAvailableDependenciest(body)
.pipe(
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
index dc53ead..cfdaa59 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
@@ -199,16 +199,17 @@
<ng-container matColumnDef="actions-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
+
</th>
</ng-container>
- <ng-container matColumnDef="action-filter" stickyEnd>
- <th mat-header-cell *matHeaderCellDef>
+ <ng-container matColumnDef="date-filter">
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
</th>
</ng-container>
<ng-container matColumnDef="filter-buttons" stickyEnd>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<div class="actions audit-actions">
<button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()">
<i class="material-icons">close</i>
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 b731936..493e094 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
@@ -19,14 +19,16 @@
.audit-table-wrapper {
width: 100%;
- height: calc(100vh - 130px);
+ max-height: calc(100vh - 130px);
overflow: auto;
+ box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
.audit {
width: 100%;
min-width: 1100px;
overflow: auto;
border-collapse: inherit;
+ box-shadow: none;
.mat-cell {
vertical-align: middle;
@@ -42,20 +44,12 @@
width: 11%;
z-index: 8 !important;
max-width: 250px;
-
- .label {
- padding-bottom: 10px;
- }
}
.th_date {
width: 14%;
z-index: 10 !important;
padding-left: 0;
-
- .label {
- padding-bottom: 10px;
- }
}
.th_project {
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
index 44ec26e..953aeae 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
@@ -43,7 +43,7 @@ export interface AuditItem {
export class AuditGridComponent implements OnInit {
public auditData: Array<AuditItem>;
public displayedColumns: string[] = ['date', 'user', 'action', 'project', 'resource-type', 'resource', 'buttons'];
- public displayedFilterColumns: string[] = ['action-filter', 'user-filter', 'actions-filter', 'project-filter', 'resource-type-filter', 'resource-filter', 'filter-buttons'];
+ public displayedFilterColumns: string[] = ['date-filter', 'user-filter', 'actions-filter', 'project-filter', 'resource-type-filter', 'resource-filter', 'filter-buttons'];
public collapseFilterRow: boolean = false;
public filterConfiguration: FilterAuditModel = new FilterAuditModel([], [], [], [], [], '', '');
public filterAuditData: FilterAuditModel = new FilterAuditModel([], [], [], [], [], '', '');
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
index 7685604..3e354a3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
@@ -18,7 +18,7 @@
-->
<div class="wrapper">
-<section class="table-wrapper" id="scrolling">
+<section class="table-wrapper" id="scrolling" #tableWrapper (scroll)="scrollTable($event)">
<!-- <div class="navigation-btn">-->
<!-- <div class="left">-->
@@ -32,7 +32,7 @@
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
- <table mat-table [dataSource]="reportData" class="data-grid reporting mat-elevation-z6">
+ <table mat-table [dataSource]="reportData" class="data-grid reporting mat-elevation-z6" #table>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef class="env_name label-header">
@@ -166,7 +166,12 @@
</th>
<td mat-cell *matCellDef="let element">
</td>
- <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer total-cost" [colSpan]="2">
+ <span class="strong">
+ Total <span *ngIf="reportData?.length"> {{ fullReport['total_cost'] }}
+ {{ fullReport['currency'] }}</span>
+ </span>
+ </td>
</ng-container>
@@ -180,27 +185,22 @@
</div>
<span class="text">Service Charges</span>
</div>
-<!-- <div class="right">-->
-<!-- <button mat-fab aria-label="Scroll right">-->
-<!-- <mat-icon>keyboard_arrow_right</mat-icon>-->
-<!-- </button>-->
-<!-- </div>-->
</th>
<td mat-cell *matCellDef="let element">
{{ element.cost }} {{ element['currency'] }}
</td>
- <td mat-footer-cell *matFooterCellDef class="table-footer total-cost">
- Total <span *ngIf="reportData?.length"> {{ fullReport['total_cost'] }}
- {{ fullReport['currency'] }}</span>
+ <td mat-footer-cell *matFooterCellDef class="table-footer total-cost d-none">
</td>
</ng-container>
<!-- ----------------FILTER -->
<ng-container matColumnDef="name-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <input #nameFilter type="text" placeholder="Filter by environment name" class="form-control filter-field"
- [value]="filtered?.dlab_id" (input)="filteredReportData.dlab_id = $event.target['value']" />
+ <div class="input-wrapper">
+ <input #nameFilter type="text" placeholder="Filter by environment name" class="form-control filter-field"
+ [value]="filtered?.dlab_id" (input)="filteredReportData.dlab_id = $event.target['value']" />
+ </div>
</th>
</ng-container>
<ng-container matColumnDef="user-filter">
@@ -251,7 +251,7 @@
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <div class="actions th_charges">
+ <div class="actions">
<button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered">
<i class="material-icons">close</i>
</button>
@@ -264,7 +264,7 @@
</ng-container>
<ng-container matColumnDef="placeholder">
<td mat-footer-cell *matFooterCellDef colspan="9" class="info">
- No data available
+ <span>No data available</span>
</td>
</ng-container>
@@ -279,4 +279,19 @@
<tr [hidden]="reportData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
</table>
</section>
+ <div class="buttons" *ngIf="isScrollButtonsVisible">
+ <div class="button-container">
+ <button mat-mini-fab aria-label="Scroll left" (click)="sctollTo('left')" [ngClass]="{'not-allowed': tableWrapper.scrollLeft === 0 }">
+ <mat-icon [ngClass]="{'highlight': tableWrapper.scrollLeft !== 0}">keyboard_arrow_left</mat-icon>
+ </button>
+ </div>
+ <div class="button-container">
+ <button mat-mini-fab aria-label="Scroll right"
+ (click)="sctollTo('right')"
+ [ngClass]="{'not-allowed': !isMaxRight }"
+ >
+ <mat-icon [ngClass]="{'highlight': isMaxRight }">keyboard_arrow_right</mat-icon>
+ </button>
+ </div>
+ </div>
</div>
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 51e5344..b92962d 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
@@ -17,34 +17,43 @@
* under the License.
*/
-#scrolling::-webkit-scrollbar,
-.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar {
- width: 5px;
- height: 5px;
-}
-
-#scrolling::-webkit-scrollbar-track,
-.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-track {
- box-shadow: none;
- -webkit-box-shadow: none;
- background-color: rgb(243, 243, 243);
-}
-
-#scrolling::-webkit-scrollbar-thumb,
-.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-thumb {
- background-color: #f6fafe;
- background-color: rgba(0, 0, 0, 0.4);
-}
-
.table-wrapper {
width: 100%;
display: block;
- height: calc(100vh - 130px);
+ max-height: calc(100vh - 130px);
overflow: auto;
+ position: relative;
+ scroll-behavior: smooth;
+ box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}
+.wrapper{
+ position: relative;
+
+ .buttons{
+ position: absolute;
+ display: flex;
+ justify-content: space-around;
+ z-index: 1000;
+ bottom: 9px;
+ left: 0;
+ right: 0;
+
+ button{
+ background-color: #fff;
+ box-shadow: none;
+ mat-icon{
+ color: lightgrey;
+ &.highlight{
+ color: #35afd5;
+ }
+ }
+ }
+ }
+}
+
+
.reporting {
- //position: relative;
width: 100%;
min-width: 1100px;
overflow: auto;
@@ -98,7 +107,7 @@
}
.th_shape {
- width: 10%;
+ width: 12%;
min-width: 150px;
z-index: 10 !important;
}
@@ -109,7 +118,6 @@
.tags {
width: 15%;
min-width: 150px;
- //overflow: hidden;
word-wrap: break-word;
}
@@ -129,7 +137,7 @@
}
.env_name {
- width: 16%;
+ width: 21%;
min-width: 200px;
z-index: 15 !important;
padding-left: 0;
@@ -163,8 +171,7 @@
}
.th_charges {
- width: 10%;
- min-width: 155px;
+ min-width: 135px;
text-align: right;
.label {
@@ -188,8 +195,11 @@
}
}
- .mat-column-charge {
+ .mat-column-charge,
+ .filter-row-item:last-child,
+ .table-footer.mat-column-charge{
text-align: right;
+ background-color: #f8f8f8;
}
.header-row {
@@ -199,7 +209,7 @@
padding-top: 0;
.label {
- padding-top: 12px;
+ padding-top: 10px;
}
}
@@ -246,11 +256,13 @@
}
}
-
-
.filter-row {
.actions {
text-align: right;
+
+ button{
+ background: inherit;
+ }
}
}
@@ -290,6 +302,11 @@
&.total-cost{
min-width: 140px;
padding-left: 0 !important;
+ text-align: right;
+ padding-right: 25px;
+ position: sticky;
+ right: 0;
+ z-index: 17;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
index 2fc18ed..ef70e24 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import {Component, OnInit, Output, EventEmitter, ViewChild, Input} from '@angular/core';
+import {Component, OnInit, Output, EventEmitter, ViewChild, Input, HostListener, AfterViewInit, ChangeDetectorRef} from '@angular/core';
import { ReportingConfigModel } from '../../../../dictionary/global.dictionary';
@Component({
@@ -27,7 +27,7 @@ import { ReportingConfigModel } from '../../../../dictionary/global.dictionary';
'../../../resources/resources-grid/resources-grid.component.scss'],
})
-export class ReportingGridComponent implements OnInit {
+export class ReportingGridComponent implements OnInit, AfterViewInit {
filterConfiguration: ReportingConfigModel;
// filteredReportData: ReportingConfigModel = new ReportingConfigModel([], [], [], [], [], '', '', '', []);
@@ -38,16 +38,43 @@ export class ReportingGridComponent implements OnInit {
active: object = {};
@ViewChild('nameFilter', { static: false }) filter;
+ @ViewChild('tableWrapper', { static: false }) tableWrapper;
+ @ViewChild('table', { static: false }) table;
@Output() filterReport: EventEmitter<{}> = new EventEmitter();
@Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
@Input() filteredReportData: ReportingConfigModel;
+ private isScrollButtonsVisible: boolean;
+
+ @HostListener('window:resize', ['$event'])
+ onResize(event) {
+ this.isScrollButtonsVisible = this.tableWrapper.nativeElement.offsetWidth - this.table._elementRef.nativeElement.offsetWidth < 0;
+ this.isMaxRight = this.tableWrapper.nativeElement.offsetWidth + this.tableWrapper.nativeElement.scrollLeft + 2 <= this.table._elementRef.nativeElement.offsetWidth;
+ }
+ @HostListener('scroll', ['$event'])
+ scrollTable($event: Event) {
+ this.isMaxRight = this.tableWrapper.nativeElement.offsetWidth + this.tableWrapper.nativeElement.scrollLeft + 2 <= this.table._elementRef.nativeElement.offsetWidth;
+ }
+
+
+
displayedColumns: string[] = ['name', 'user', 'project', 'type', 'status', 'shape', 'service', 'empty', 'charge'];
displayedFilterColumns: string[] = ['name-filter', 'user-filter', 'project-filter', 'type-filter', 'status-filter', 'shape-filter', 'service-filter', 'empty-filter', 'actions'];
filtered: any;
+ isMaxRight: boolean;
+
+ constructor(private changeDetector: ChangeDetectorRef) {
+ }
ngOnInit() {}
+ ngAfterViewInit() {
+ window.setTimeout(() => {
+ this.isScrollButtonsVisible = this.tableWrapper.nativeElement.offsetWidth - this.table._elementRef.nativeElement.offsetWidth < 0;
+ this.isMaxRight = this.tableWrapper.nativeElement.offsetWidth + this.tableWrapper.nativeElement.scrollLeft !== this.table._elementRef.nativeElement.offsetWidth;
+ }, 500);
+ }
+
onUpdate($event): void {
this.filteredReportData[$event.type] = $event.model;
}
@@ -116,4 +143,13 @@ export class ReportingGridComponent implements OnInit {
shapeSplit(shape) {
return shape.split(/(?=Slave)/g);
}
+
+ public sctollTo(direction: string) {
+ if (direction === 'left') {
+ this.tableWrapper.nativeElement.scrollLeft = 0;
+ } else {
+ this.tableWrapper.nativeElement.scrollLeft = this.tableWrapper.nativeElement.offsetWidth;
+ }
+ }
+
}
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 27c98f1..e37bb0c 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
@@ -119,7 +119,7 @@
<div class="control-group constol-select java-library-search">
<label class="label">Library</label>
<div class="control control-relative">
- <span class="other-message" *ngIf="lib.name?.length && !this.selectedLib">groupId:artifactId:versionId</span>
+<!-- <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"
@@ -168,61 +168,8 @@
</div>
</div>
</ng-template>
-<!-- <p class="other-message">-->
-<!-- -->
-<!-- </p>-->
- <div class="search">
-<!-- <mat-form-field class="chip-list">-->
-<!-- <input-->
-<!-- type="text"-->
-<!-- [placeholder]="group === 'java' ?-->
-<!-- 'Enter library name in <groupId>:<artifactId>:<versionId> format' :-->
-<!-- 'Enter library name in <name>:<version> format(version is not required)'"-->
-<!-- matInput-->
-<!-- #trigger="matAutocompleteTrigger"-->
-<!-- [formControl]="libSearch"-->
-<!-- [value]="query"-->
-<!-- [matAutocomplete]="auto"-->
-<!-- >-->
-<!--<!– <span class="add-icon" [matTooltip]="(isInSelectedList || isInstalled) ? 'Current library dosen\'t exist' : 'You have already added or installed current library'"–>-->
-<!--<!– matTooltipPosition="above"–>-->
-<!--<!– [matTooltipDisabled] = "isLibExist && (isInSelectedList || isInstalled)"–>-->
-<!-- <span class="add-icon">-->
-<!-- <button mat-icon-button class="btn" [disabled]="!isLibExist || query.length < 1 ||-->
-<!-- isDuplicated({name: query.slice(0, query.indexOf(':')), version: query.slice(query.indexOf(':') + 1) || 'N/A'})" (click)="addLibrary(query);$event.stopPropagation()">-->
-<!-- <mat-icon matSuffix >add</mat-icon>-->
-<!-- </button>-->
-<!-- </span>-->
-
-<!-- <mat-autocomplete #auto="matAutocomplete" class="suggestions" >-->
-<!-- <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index" *ngIf="query.indexOf(':') === -1">-->
-<!-- <mat-option [ngClass]="{ 'not-allowed': isDuplicated(item) }">-->
-<!-- <div class="option" (click)="selectLibrary(item)">-->
-<!-- <a *ngIf="!isDuplicated(item)">-->
-<!-- <span [innerHTML]="item.name | highlight:query"></span>-->
-<!--<!– <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>–>-->
-<!-- </a>-->
-<!-- <span *ngIf="isInSelectedList || isInstalled">{{ item.name }}-->
-<!-- <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>-->
-<!-- </span>-->
-<!-- <strong *ngIf="isInSelectedList">selected-->
-<!-- <i class="material-icons">done</i>-->
-<!-- </strong>-->
-<!-- <strong *ngIf="isInstalled">installed-->
-<!-- <i class="material-icons">done</i>-->
-<!-- </strong>-->
-<!-- </div>-->
-<!-- </mat-option>-->
-<!-- </ng-template>-->
-<!-- <mat-option *ngIf="model.isEmpty(filteredList) && !validity_format && query.indexOf(':') === -1">-->
-<!-- <span class="configuring">No matches found</span>-->
-<!-- </mat-option>-->
-<!-- <mat-option *ngIf="validity_format?.length > 0">-->
-<!-- <span class="configuring" *ngIf="query.indexOf(':') === -1">{{ validity_format }}</span >-->
-<!-- </mat-option>-->
-<!-- </mat-autocomplete>-->
-<!-- </mat-form-field> -->
+ <div class="search">
<div class="list-selected list-container" id='scrolling'>
<mat-chip-list *ngIf="model.selectedLibs.length && libs_uploaded">
<mat-chip *ngFor="let item of model.selectedLibs">
@@ -362,10 +309,10 @@
<div class="lib-status-col" ngClass="{{ item.status.toLowerCase() || 'installation_error' }}">{{ item.status.replace('_', ' ') }}
<div class="warn-action" *ngIf="(item.status === 'installation_error' || item.status.toLowerCase() === 'invalid_version' || item.add_pkgs?.length) && notebook?.status === 'running'">
<div *ngIf="!item.available_versions">
- <span *ngIf="!installingInProgress && !item.add_pkgs?.length" (click)="reinstallLibrary(item, lib)" matTooltip="Retry installation" matTooltipPosition="above">
+ <span *ngIf="!installingInProgress && item.status === 'installation_error'" (click)="reinstallLibrary(item, lib)" matTooltip="Retry installation" matTooltipPosition="above">
<i class="material-icons">replay</i>
</span>
- <span class="not-allowed" *ngIf="installingInProgress && !item.add_pkgs?.length" matTooltip="You can't reinstall library until previous process will be completed"
+ <span class="not-allowed" *ngIf="installingInProgress && item.status === 'installation_error'" matTooltip="Please wait until lib installation completes"
matTooltipPosition="above">
<i class="material-icons">replay</i>
</span>
@@ -393,29 +340,6 @@
</ng-template>
</div>
</mat-list-item>
-
-<!-- <mat-list-item *ngIf="isLibInfoOpened[lib.name]">-->
-<!-- <div class="lib-info">-->
-<!-- <ul class="libs-version">-->
-
-<!-- <li class="dependency-list-header">-->
-<!-- List of available version:-->
-<!-- </li>-->
-
-<!--<!– <div class="scrolling-content delete-list" id="scrolling">–>-->
-
-<!-- <li *ngFor="let object of [1,2,3]" class="delete-item list-item">-->
-<!-- <!– <div class="object">–>-->
-<!-- {{lib.name+lib.version}}-->
-<!-- <!– </div>–>-->
-<!-- <!– <div class="size">v2.3.4</div>–>-->
-<!-- <button mat-raised-button type="button" class="butt action">Install</button>-->
-<!-- </li>-->
-
-<!--<!– </div>–>-->
-<!-- </ul>-->
-<!-- </div>-->
-<!-- </mat-list-item>-->
</ng-container>
<div *ngIf="!filtredNotebookLibs.length && notebookLibs?.length" class="scrollingList info message">
<p>No matches found</p>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
index e41d4c0..94c7009 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
@@ -22,7 +22,7 @@ import {Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectorRef, Inje
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormControl } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
-import {debounceTime, takeUntil} from 'rxjs/operators';
+import {debounceTime, take, takeUntil} from 'rxjs/operators';
import { InstallLibrariesModel } from './install-libraries.model';
import { LibrariesInstallationService } from '../../../core/services';
@@ -360,6 +360,12 @@ export class InstallLibrariesComponent implements OnInit, OnDestroy {
|| error.status === HTTP_STATUS_CODES.BAD_REQUEST
|| error.status === HTTP_STATUS_CODES.INTERNAL_SERVER_ERROR) {
this.validity_format = error.message;
+ if (error.message.indexOf('query param artifact') !== -1) {
+ this.validity_format = 'Wrong library name format. Should be <groupId>:<artifactId>:<versionId>.';
+ }
+ if (error.message.indexOf('not found') !== -1) {
+ this.validity_format = 'No matches found.';
+ }
this.filteredList = null;
}
});
@@ -511,7 +517,7 @@ export class ErrorLibMessageDialogComponent {
`,
styles: [ `
.lib-list { max-height: 200px; overflow-x: auto; word-break: break-all; padding: 20px 30px !important; margin: 20px 0; color: #577289;}
- .packeges { padding-left: 7px; line-height: 23px;}
+ .packeges { word-spacing: 5px; line-height: 23px;}
.dependency-title{ line-height: 23px; }
`
]
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index b475516..777f65d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -257,8 +257,10 @@
<!-- FILTER START -->
<ng-container matColumnDef="name-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="name-col filter-row-item">
- <input placeholder="Filter by environment name" type="text" class="form-control filter-field"
- [value]="filterForm.name" (input)="filterForm.name = $event.target['value']" />
+ <div class="input-wrapper">
+ <input placeholder="Filter by environment name" type="text" class="form-control filter-field"
+ [value]="filterForm.name" (input)="filterForm.name = $event.target['value']" />
+ </div>
</th>
</ng-container>
<ng-container matColumnDef="status-filter">
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 0549cb7..fac9b18 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
@@ -48,7 +48,7 @@ table.resources {
.filter-field{
font-size: 13px;
- padding-left: 15px;
+ padding-left: 10px;
}
.exploratory {
@@ -71,7 +71,7 @@ table.resources {
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
- min-width: 187px;
+ //min-width: 187px;
}
&.resources-col {
@@ -93,7 +93,6 @@ table.resources {
}
.filter-row {
- height: 0 !important;
background-clip:padding-box;
th {
@@ -112,7 +111,7 @@ table.resources {
padding-right: 5px;
padding-left: 24px;
background-color: inherit;
- min-width: 187px;
+ //min-width: 187px;
}
.project-name{
@@ -125,7 +124,7 @@ table.resources {
.status-col,
.shape-col {
width: 11%;
- min-width: 105px;
+ //min-width: 105px;
}
.shape-col{
color: #577289;
@@ -136,7 +135,7 @@ table.resources {
.tag-col {
width: 13%;
- min-width: 95px;
+ //min-width: 95px;
mat-chip {
min-height: 20px;
@@ -153,12 +152,12 @@ table.resources {
.resources-col {
width: 32%;
- min-width: 420px;
+ //min-width: 420px;
}
.cost-col {
width: 10%;
- min-width: 95px;
+ //min-width: 95px;
justify-content: space-between;
}
@@ -432,4 +431,13 @@ table.resources {
background: #edf6f9;
}
+@media screen and (max-width: 1400px) {
+ table.resources {
+ .settings {
+ width: 7%;
+ }
+ }
+}
+
+
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index 04693c0..5b60b98 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -813,6 +813,17 @@ mat-progress-bar {
.filter-row-item, .label-header{
box-shadow: inset 0 -1px 0 lightgrey;
border-bottom: none !important;
+ multi-select-dropdown, .input-wrapper{
+ position: absolute;
+ top: 10px;
+ left: 5px;
+ right: 5px;
+ }
+
+ .input-wrapper{
+ left: 10px;
+ right: 4px;
+ }
}
/* daterangepicker themes */
@@ -839,6 +850,9 @@ mat-progress-bar {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ &.is-to:after{
+ left: 250px;
+ }
}
#range-picker .ng-daterangepicker .calendar::after {
diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss
index 006bd60..a31908e 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -176,6 +176,10 @@ mat-chip.mat-chip strong {
font-size: 15px;
font-weight: 300;
color: #35afd5;
+ position: relative;
+ .buttons{
+ position: absolute;
+ }
}
.base-retreat {
@@ -373,6 +377,9 @@ input[type='number'] {
text-align: center;
}
}
+#scrolling{
+ scrollbar-width: thin;
+}
#scrolling::-webkit-scrollbar,
.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org