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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected]
