Merge branch 'develop' into DATALAB-2347
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html
index faab5da..62b11be 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.html
@@ -15,7 +15,7 @@
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
- -->
+-->
<div class="base-retreat configuration">
<div class="sub-nav">
@@ -49,15 +49,17 @@
</div>
<div>
<ng-template [ngIf]="activeTab.index !== 0">
- <button mat-raised-button class="butt"
- (click)="action('save')"
- [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged"
+ <button
+ mat-raised-button class="butt"
+ (click)="action('save')"
+ [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged"
>
Save
</button>
- <button mat-raised-button class="butt"
- (click)="action('discard')"
- [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged"
+ <button
+ mat-raised-button class="butt"
+ (click)="action('discard')"
+ [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged"
>
Discard changes
</button>
@@ -70,16 +72,28 @@
>
Restart
</button>
- <button mat-raised-button class="butt" (click)="refreshConfig()">
+ <button
+ mat-raised-button
+ class="butt"
+ (click)="refreshConfig()"
+ >
<i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="configuration-wrapper">
- <mat-tab-group animationDuration="0.5ms" (selectedTabChange)="tabChanged($event)" [selectedIndex]=activeTab.index>
- <mat-tab label="Main"
- [disabled]="!(!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged) && activeTab.index !== 0"
+ <mat-tab-group
+ animationDuration="0.5ms"
+ (selectedTabChange)="tabChanged($event)"
+ [selectedIndex]="activeTab.index"
+ >
+ <mat-tab
+ label="Main"
+ [disabled]="!(!services['provisioning'].isConfigChanged &&
+ !services['self-service'].isConfigChanged &&
+ !services['billing'].isConfigChanged) &&
+ activeTab.index !== 0"
>
<h4>Main settings</h4>
<div class="main-wrapper">
@@ -89,16 +103,18 @@
<ul class="list-menu selection-list">
<li *ngFor="let service of services | keys">
<p
+ *ngIf="(activeEndpoint !== 'local'
+ && (service.key === 'provisioning' || service.key === 'billing')
+ || activeEndpoint === 'local')"
class="list-item"
role="menuitem"
- *ngIf="(activeEndpoint !== 'local' && (service.key === 'provisioning' || service.key === 'billing') || activeEndpoint === 'local')">
+ >
<span (click)="toggleSettings(service.key);$event.stopPropagation()" class="d-flex">
<div class="checkbox-wrap">
<datalab-checkbox
[checked]="services[service.key].selected"
(toggleSelection)="toggleSettings(service.key)"
- >
- </datalab-checkbox>
+ ></datalab-checkbox>
</div>
{{service.value.label}}
</span>
@@ -110,36 +126,64 @@
</div>
</mat-tab>
- <mat-tab label="Self-service"
- *ngIf="activeEndpoint === 'local'"
- [disabled]="!(!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged) && activeTab.index !== 1"
-
+ <mat-tab
+ label="Self-service"
+ *ngIf="activeEndpoint === 'local'"
+ [disabled]="!(!services['provisioning'].isConfigChanged
+ && !services['self-service'].isConfigChanged
+ && !services['billing'].isConfigChanged)
+ && activeTab.index !== 1"
>
<h4>Edit self-service.yml</h4>
<div class="editor-wrap">
- <div #selfEditor ace-editor mode="yaml" [(text)]="services['self-service'].config" [autoUpdateContent]="true" (textChange)="configUpdate('self-service')"></div>
+ <div
+ #selfEditor
+ ace-editor
+ mode="yaml"
+ [(text)]="services['self-service'].config"
+ [autoUpdateContent]="true"
+ (textChange)="configUpdate('self-service')"
+ ></div>
</div>
</mat-tab>
- <mat-tab label="Provisioning"
- [disabled]="!(!services['provisioning'].isConfigChanged
- && !services['self-service'].isConfigChanged
- && !services['billing'].isConfigChanged)
- && activeTab.index !== 2">
-
+ <mat-tab
+ label="Provisioning"
+ [disabled]="!(!services['provisioning'].isConfigChanged
+ && !services['self-service'].isConfigChanged
+ && !services['billing'].isConfigChanged)
+ && activeTab.index !== 2"
+ >
<h4>Edit provisioning.yml</h4>
<div class="editor-wrap">
- <div #provEditor ace-editor [(text)]="services['provisioning'].config" [autoUpdateContent]="true" mode="yaml" (textChange)="configUpdate('provisioning')"></div>
+ <div
+ #provEditor
+ ace-editor
+ mode="yaml"
+ [(text)]="services['provisioning'].config"
+ [autoUpdateContent]="true"
+ (textChange)="configUpdate('provisioning')"
+ ></div>
</div>
</mat-tab>
- <mat-tab label="Billing"
- [disabled]="!(!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged) && activeTab.index !== 3"
+ <mat-tab
+ label="Billing"
+ [disabled]="!(!services['provisioning'].isConfigChanged
+ && !services['self-service'].isConfigChanged
+ && !services['billing'].isConfigChanged)
+ && activeTab.index !== 3"
>
<h4>Edit billing.yml</h4>
<div class="editor-wrap">
- <div #billingEditor ace-editor mode="yaml" [(text)]="services['billing'].config" [autoUpdateContent]="true" (textChange)="configUpdate('billing')"></div>
-
+ <div
+ #billingEditor
+ ace-editor
+ mode="yaml"
+ [(text)]="services['billing'].config"
+ [autoUpdateContent]="true"
+ (textChange)="configUpdate('billing')"
+ ></div>
</div>
</mat-tab>
</mat-tab-group>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss
index 2df3042..e230032 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.scss
@@ -17,44 +17,44 @@
* under the License.
*/
-.configuration-wrapper{
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
- padding-top: 0;
+.configuration-wrapper {
height: calc(100vh - 130px);
+ padding-top: 0;
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+ 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+ 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
- .sub-nav{
+ .sub-nav {
justify-content: flex-end;
padding: 0 30px;
}
- h4{
+ h4 {
padding: 10px 30px;
- color: rgba(0,0,0,.87);
- font-family: 'Open Sans', sans-serif;
+ color: rgba(0, 0, 0, 0.87);
+ font-family: "Open Sans", sans-serif;
}
- .editor-wrap{
+ .editor-wrap {
height: calc(100% - 60px);
- box-shadow: 0 2px 24px 0 rgba(73,93,112,0.3);
margin: 0 30px;
+ box-shadow: 0 2px 24px 0 rgba(73, 93, 112, 0.3);
}
- .main-wrapper{
+ .main-wrapper {
padding: 10px 30px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
- .section{
-
- &-title{
+ .section {
+ &-title {
font-size: 15px;
}
&-content {
-
.list-menu {
+ left: 0;
width: 100%;
max-height: 450px;
- left: 0;
padding: 10px 0;
margin: 0;
overflow-y: auto;
@@ -66,15 +66,15 @@
margin: 0;
}
- .list-item{
- padding: 5px 10px;
+ .list-item {
display: flex;
+ padding: 5px 10px;
- span{
+ span {
cursor: pointer;
}
- .checkbox-wrap{
+ .checkbox-wrap {
display: flex;
align-items: center;
margin-right: 5px;
@@ -86,10 +86,11 @@
}
}
}
-.sub-nav{
+
+.sub-nav {
justify-content: space-between;
- .label{
+ .label {
display: flex;
align-items: center;
margin-right: 10px;
@@ -100,10 +101,9 @@
font-family: "Open Sans", sans-serif;
}
- .butt{
+ .butt {
margin-left: 10px;
}
-
}
.mat-option-disabled {
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts
index 919799f..72157b7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/configuration/configuration.component.ts
@@ -17,17 +17,18 @@
* under the License.
*/
-import {Component, OnInit, Inject, HostListener, OnDestroy, ViewChild, ElementRef} from '@angular/core';
+import { Component, OnInit, Inject, HostListener, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { Router } from '@angular/router';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import {HealthStatusService, AppRoutingService, EndpointService} from '../../core/services';
-import {MatTabChangeEvent} from '@angular/material/tabs';
-import {Router} from '@angular/router';
-import {ConfigurationService} from '../../core/services/configutration.service';
+import { MatTabChangeEvent } from '@angular/material/tabs';
import 'brace';
import 'brace/mode/yaml';
-import {ToastrService} from 'ngx-toastr';
-import {Observable, Subject} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ToastrService } from 'ngx-toastr';
+
+import { HealthStatusService, AppRoutingService, EndpointService } from '../../core/services';
+import { ConfigurationService } from '../../core/services/configutration.service';
import { EnvironmentsDataService } from '../management/management-data.service';
import { EnvironmentModel } from '../management/management.model';
@@ -42,12 +43,12 @@
@ViewChild('billingEditor') billingEditor: ElementRef<HTMLElement>;
private unsubscribe$ = new Subject();
private healthStatus: any;
- public activeTab = {index: 0};
+ public activeTab = { index: 0 };
public activeService: string;
public services = {
- 'self-service': {label: 'Self-service', selected: false, config: '', serverConfig: '', isConfigChanged: false},
- 'provisioning': {label: 'Provisioning', selected: false, config: '', serverConfig: '', isConfigChanged: false},
- 'billing': {label: 'Billing', selected: false, config: '', serverConfig: '', isConfigChanged: false},
+ 'self-service': { label: 'Self-service', selected: false, config: '', serverConfig: '', isConfigChanged: false },
+ 'provisioning': { label: 'Provisioning', selected: false, config: '', serverConfig: '', isConfigChanged: false },
+ 'billing': { label: 'Billing', selected: false, config: '', serverConfig: '', isConfigChanged: false },
};
public messagesStatus = {
@@ -55,7 +56,7 @@
error: [],
counter: 0
};
-
+
public environmentStatuses = {};
public environments = [];
public ingStatuses = ['creating', 'configuring', 'reconfiguring', 'creating image', 'stopping', 'starting', 'terminating'];
@@ -96,25 +97,26 @@
this.getEnvironmentHealthStatus();
this.getEndpoints()
.subscribe(endpoints => {
- this.endpoints = endpoints;
-
- this.endpoints = this.endpoints.map(endpoint => ({name: endpoint.name, status: endpoint.status }));
+ this.endpoints = endpoints;
- this.activeEndpoint = this.endpoints[0].name;
- this.getServicesConfig(this.activeEndpoint);
- });
+ this.endpoints = this.endpoints.map(endpoint => ({ name: endpoint.name, status: endpoint.status }));
- this.environmentsDataService.getEnvironmentDataDirect().subscribe((data: any) => {
- this.environments = EnvironmentModel.loadEnvironments(data);
- this.environments.map(env => {
- this.checkResource(env.status, env.endpoint);
- if(env.resources?.length > 0) {
- env.resources.map(resource => {
- this.checkResource(resource.status, env.endpoint);
- })
- }
+ this.activeEndpoint = this.endpoints[0].name;
+ this.getServicesConfig(this.activeEndpoint);
});
- });
+
+ this.environmentsDataService.getEnvironmentDataDirect()
+ .subscribe((data: any) => {
+ this.environments = EnvironmentModel.loadEnvironments(data);
+ this.environments.map(env => {
+ this.checkResource(env.status, env.endpoint);
+ if (env.resources?.length > 0) {
+ env.resources.map(resource => {
+ this.checkResource(resource.status, env.endpoint);
+ });
+ }
+ });
+ });
}
ngOnDestroy() {
@@ -123,8 +125,8 @@
}
public checkResource(resourceStatus: string, endpoint: string) {
- if( this.ingStatuses.includes(resourceStatus) ) {
- if(!this.environmentStatuses[endpoint]) {
+ if (this.ingStatuses.includes(resourceStatus)) {
+ if (!this.environmentStatuses[endpoint]) {
this.environmentStatuses[endpoint] = [];
this.environmentStatuses[endpoint].push(resourceStatus);
} else {
@@ -139,10 +141,9 @@
takeUntil(this.unsubscribe$)
)
.subscribe((result: any) => {
- this.healthStatus = result;
- !this.healthStatus.admin && !this.healthStatus.projectAdmin && this.appRoutingService.redirectToHomePage();
- }
- );
+ this.healthStatus = result;
+ !this.healthStatus.admin && !this.healthStatus.projectAdmin && this.appRoutingService.redirectToHomePage();
+ });
}
private getEndpoints(): Observable<{}> {
@@ -154,34 +155,34 @@
}
public action(action: string): void {
- this.dialog.open(SettingsConfirmationDialogComponent, { data: {
- action: action,
+ this.dialog.open(SettingsConfirmationDialogComponent, {
+ data: {
+ action: action,
message: action === 'discard' ? this.confirmMessages.discardChanges : this.confirmMessages.saveChanges,
environmentStatuses: this.environmentStatuses,
activeEndpoint: this.activeEndpoint
- }, panelClass: 'modal-sm' })
+ }, panelClass: 'modal-sm'
+ })
.afterClosed().subscribe(result => {
- if (result && action === 'save') this.setServiceConfig(this.activeService, this.services[this.activeService].config);
- if (result && action === 'discard') this.services[this.activeService].config = this.services[this.activeService].serverConfig;
- this.configUpdate(this.activeService);
- });
+ if (result && action === 'save') this.setServiceConfig(this.activeService, this.services[this.activeService].config);
+ if (result && action === 'discard') this.services[this.activeService].config = this.services[this.activeService].serverConfig;
+ this.configUpdate(this.activeService);
+ });
}
private getServicesConfig(endpoint): void {
- this.configurationService.getServiceSettings(endpoint)
- .pipe(
- takeUntil(this.unsubscribe$)
- )
- .subscribe(config => {
- for (const service in this.services) {
- const file = `${service}.yml`;
- this.services[service].config = config[file];
- this.services[service].serverConfig = config[file];
- this.configUpdate(service);
- }
+ this.configurationService.getServiceSettings(endpoint)
+ .pipe(
+ takeUntil(this.unsubscribe$)
+ )
+ .subscribe(config => {
+ for (const service in this.services) {
+ const file = `${service}.yml`;
+ this.services[service].config = config[file];
+ this.services[service].serverConfig = config[file];
+ this.configUpdate(service);
}
- );
-
+ });
this.clearSelectedServices();
}
@@ -190,16 +191,17 @@
.pipe(
takeUntil(this.unsubscribe$)
)
- .subscribe(res => {
- this.getServicesConfig(this.activeEndpoint);
- this.toastr.success('Service configuration saved!', 'Success!');
- },
- error => this.toastr.error( error.message || 'Service configuration is not saved', 'Oops!')
- );
+ .subscribe(
+ res => {
+ this.getServicesConfig(this.activeEndpoint);
+ this.toastr.success('Service configuration saved!', 'Success!');
+ },
+ error => this.toastr.error(error.message || 'Service configuration is not saved', 'Oops!')
+ );
}
refreshServiceEditor(editor: ElementRef<HTMLElement>) {
- if(editor) {
+ if (editor) {
editor.nativeElement.children[3].scrollTop = 100;
editor.nativeElement.children[3].scrollTop = 0;
}
@@ -207,16 +209,16 @@
public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
this.activeTab = tabChangeEvent;
-
+
if (this.activeTab.index === 1 && this.activeEndpoint === 'local') {
this.activeService = 'self-service';
this.refreshServiceEditor(this.selfEditor);
- } else if ((this.activeEndpoint !== 'local' && this.activeTab.index === 1) ||
- (this.activeTab.index === 2 && this.activeEndpoint === 'local')) {
+ } else if ((this.activeEndpoint !== 'local' && this.activeTab.index === 1) ||
+ (this.activeTab.index === 2 && this.activeEndpoint === 'local')) {
this.activeService = 'provisioning';
this.refreshServiceEditor(this.provEditor);
- } else if ((this.activeEndpoint !== 'local' && this.activeTab.index === 2) ||
- (this.activeTab.index === 3 && this.activeEndpoint === 'local')) {
+ } else if ((this.activeEndpoint !== 'local' && this.activeTab.index === 2) ||
+ (this.activeTab.index === 3 && this.activeEndpoint === 'local')) {
this.activeService = 'billing';
this.refreshServiceEditor(this.billingEditor);
} else {
@@ -225,18 +227,20 @@
if (!!this.activeService) {
if (this.services[this.activeService].config !== this.services[this.activeService].serverConfig) {
- this.dialog.open(SettingsConfirmationDialogComponent, { data: {
+ this.dialog.open(SettingsConfirmationDialogComponent, {
+ data: {
action: 'Was changed',
environmentStatuses: this.environmentStatuses,
activeEndpoint: this.activeEndpoint
- }, panelClass: 'modal-sm' })
+ }, panelClass: 'modal-sm'
+ })
.afterClosed().subscribe(result => {
- if (result) {
- this.services[this.activeService].serverConfig = this.services[this.activeService].config;
- } else {
- this.services[this.activeService].config = this.services[this.activeService].serverConfig;
- }
- });
+ if (result) {
+ this.services[this.activeService].serverConfig = this.services[this.activeService].config;
+ } else {
+ this.services[this.activeService].config = this.services[this.activeService].serverConfig;
+ }
+ });
}
}
this.clearSelectedServices();
@@ -271,7 +275,7 @@
);
}
- public restartServices(): void {
+ public restartServices(): void {
const selectedServices = [];
for (const service in this.services) {
if (this.services[service].selected) {
@@ -280,56 +284,56 @@
}
this.dialog.open(
- SettingsConfirmationDialogComponent,
- {
+ SettingsConfirmationDialogComponent,
+ {
data: {
- action: 'restart',
+ action: 'restart',
services: selectedServices,
environmentStatuses: this.environmentStatuses,
- activeEndpoint: this.activeEndpoint
- },
- panelClass: 'modal-sm'
+ activeEndpoint: this.activeEndpoint
+ },
+ panelClass: 'modal-sm'
})
.afterClosed().subscribe(result => {
if (result) {
this.messagesStatus.error = [];
this.messagesStatus.success = [];
-
- if(this.environmentStatuses[this.activeEndpoint] && this.services['provisioning'].selected) {
+
+ if (this.environmentStatuses[this.activeEndpoint] && this.services['provisioning'].selected) {
this.services['provisioning'].selected = false;
}
- if(this.services['self-service'].selected) {
+ if (this.services['self-service'].selected) {
this.messagesStatus.counter += 1;
this.restartSingleService(true, false, false, 'Self-service')
- }
- if(this.services['provisioning'].selected) {
+ }
+ if (this.services['provisioning'].selected) {
this.messagesStatus.counter += 1;
this.restartSingleService(false, true, false, 'Provisioning service')
- }
- if(this.services['billing'].selected) {
+ }
+ if (this.services['billing'].selected) {
this.messagesStatus.counter += 1;
this.restartSingleService(false, false, true, 'Billing service')
}
let timer = setInterval(() => {
-
- if(this.messagesStatus.counter === 0) {
- for(let key in this.messagesStatus) {
- if(key === 'error' && this.messagesStatus[key].length > 0) {
+
+ if (this.messagesStatus.counter === 0) {
+ for (let key in this.messagesStatus) {
+ if (key === 'error' && this.messagesStatus[key].length > 0) {
this.toastr.error(`${this.messagesStatus[key].join(', ')} restarting failed`, 'Oops!');
- } else if(key === 'success' && this.messagesStatus[key].length > 0) {
+ } else if (key === 'success' && this.messagesStatus[key].length > 0) {
this.toastr.success(`${this.messagesStatus[key].join(', ')} restarting started!`, 'Success!');
}
}
clearInterval(timer);
- }
+ }
}, 200);
this.clearSelectedServices();
} else {
this.clearSelectedServices();
}
- });
+ });
}
public configUpdate(service: string): void {
@@ -412,8 +416,7 @@
constructor(
public dialogRef: MatDialogRef<SettingsConfirmationDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
- ) {
- }
+ ) {}
ngOnInit() {
this.filterProvisioning = this.data?.services?.filter(service => service !== 'provisioning');
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.html
index 545c236..3b3c9f7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.html
@@ -20,7 +20,11 @@
<div class="backup-dialog" id="dialog-box">
<header class="dialog-header">
<h4 class="modal-title">Backup options</h4>
- <button type="button" class="close" (click)="dialogRef.close()">×</button>
+ <button
+ type="button"
+ class="close"
+ (click)="dialogRef.close()"
+ >×</button>
</header>
<div class="dialog-content">
<div id="backup-options" class="content-box" *ngIf="backupOptions">
@@ -28,7 +32,8 @@
<mat-slide-toggle
labelPosition="before"
[checked]="backupOptions.configFiles[0] === 'all'"
- (change)="onHoldChanged($event, 'configFiles')">
+ (change)="onHoldChanged($event, 'configFiles')"
+ >
<span class="hold-label">Configuration files</span>
</mat-slide-toggle>
</div>
@@ -36,7 +41,8 @@
<mat-slide-toggle
labelPosition="before"
[checked]="backupOptions.keys[0] === 'all'"
- (change)="onHoldChanged($event, 'keys')">
+ (change)="onHoldChanged($event, 'keys')"
+ >
<span class="hold-label">User keys</span>
</mat-slide-toggle>
</div>
@@ -44,7 +50,8 @@
<mat-slide-toggle
labelPosition="before"
[checked]="backupOptions.databaseBackup"
- (change)="onHoldChanged($event, 'databaseBackup')">
+ (change)="onHoldChanged($event, 'databaseBackup')"
+ >
<span class="hold-label">Database</span>
</mat-slide-toggle>
</div>
@@ -52,7 +59,8 @@
<mat-slide-toggle
labelPosition="before"
[checked]="backupOptions.certificates[0] === 'all'"
- (change)="onHoldChanged($event, 'certificates')">
+ (change)="onHoldChanged($event, 'certificates')"
+ >
<span class="hold-label">SSL Certificates</span>
</mat-slide-toggle>
</div>
@@ -60,7 +68,8 @@
<mat-slide-toggle
labelPosition="before"
[checked]="backupOptions.jars[0] === 'all'"
- (change)="onHoldChanged($event, 'jars')">
+ (change)="onHoldChanged($event, 'jars')"
+ >
<span class="hold-label">JAR files</span>
</mat-slide-toggle>
</div>
@@ -68,15 +77,29 @@
<mat-slide-toggle
labelPosition="before"
[checked]="backupOptions.logsBackup"
- (change)="onHoldChanged($event, 'logsBackup')">
+ (change)="onHoldChanged($event, 'logsBackup')"
+ >
<span class="hold-label">Log files</span>
</mat-slide-toggle>
</div>
<div class="text-center m-top-30 m-bott-10">
- <button mat-raised-button type="button" class="butt" (click)="dialogRef.close(); backupOptions.setDegault()">
+ <button
+ mat-raised-button
+ type="button"
+ class="butt"
+ (click)="dialogRef.close(); backupOptions.setDegault()"
+ >
Cancel
</button>
- <button mat-raised-button type="button" (click)="applyOptions()" class="butt butt-success" [disabled]="!valid">Apply</button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-success"
+ (click)="applyOptions()"
+ [disabled]="!valid"
+ >
+ Apply
+ </button>
</div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.ts
index fd7b4bd..3ee9f7d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/backup-dilog/backup-dilog.component.ts
@@ -18,10 +18,10 @@
*/
import { Component, OnInit, Output, EventEmitter, Inject } from '@angular/core';
-import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
+import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { BackupOptionsModel } from '../management.model';
import { BackupService } from '../../../core/services';
@@ -54,18 +54,20 @@
this.backupOptions[key] instanceof Array
? (this.backupOptions[key][0] = $event.checked ? 'all' : 'skip')
: (this.backupOptions[key] = !this.backupOptions[key]);
-
this.checkValidity();
}
public applyOptions(): void {
- this.backupService.createBackup(this.backupOptions).subscribe(result => {
- this.getBackupStatus(result);
- this.toastr.success('Backup configuration is processing!', 'Processing!');
- this.clear = window.setInterval(() => this.getBackupStatus(result), 3000);
- this.dialogRef.close(this.backupOptions);
- },
- error => this.toastr.error(error.message, 'Oops!'));
+ this.backupService.createBackup(this.backupOptions)
+ .subscribe(
+ result => {
+ this.getBackupStatus(result);
+ this.toastr.success('Backup configuration is processing!', 'Processing!');
+ this.clear = window.setInterval(() => this.getBackupStatus(result), 3000);
+ this.dialogRef.close(this.backupOptions);
+ },
+ error => this.toastr.error(error.message, 'Oops!')
+ );
}
private checkValidity(): void {
@@ -85,17 +87,20 @@
private getBackupStatus(result) {
const uuid = result.body;
this.backupService.getBackupStatus(uuid)
- .subscribe((backupStatus: any) => {
- if (!this.creatingBackup) {
- backupStatus.status === 'FAILED'
- ? this.toastr.error('Backup configuration failed!', 'Oops!')
- : this.toastr.success('Backup configuration completed!', 'Success!');
+ .subscribe(
+ (backupStatus: any) => {
+ if (!this.creatingBackup) {
+ backupStatus.status === 'FAILED'
+ ? this.toastr.error('Backup configuration failed!', 'Oops!')
+ : this.toastr.success('Backup configuration completed!', 'Success!');
+ clearInterval(this.clear);
+ }
+ },
+ () => {
clearInterval(this.clear);
+ this.toastr.error('Backup configuration failed!', 'Oops!');
}
- }, () => {
- clearInterval(this.clear);
- this.toastr.error('Backup configuration failed!', 'Oops!');
- });
+ );
}
get creatingBackup(): boolean {
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html
index 2181f9b..f198e53 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html
@@ -21,7 +21,11 @@
<div class="endpoints-dialog" id="dialog-box">
<header class="dialog-header">
<h4 class="modal-title">Connect endpoint</h4>
- <button type="button" class="close" (click)="dialogRef.close()">×</button>
+ <button
+ type="button"
+ class="close"
+ (click)="dialogRef.close()"
+ >×</button>
</header>
<div class="dialog-content tabs">
<div class="content-box">
@@ -32,24 +36,33 @@
<div class="control-group">
<label class="label">Name</label>
<div class="control">
- <input type="text" formControlName="name" placeholder="Enter endpoint name"
- (blur)="generateEndpointTag($event)">
- <span class="error"
+ <input
+ type="text"
+ formControlName="name"
+ placeholder="Enter endpoint name"
+ (blur)="generateEndpointTag($event)"
+ />
+ <span
+ class="error"
*ngIf="!createEndpointForm?.controls.name.valid
- && createEndpointForm?.controls.name.touched
- && !createEndpointForm?.controls['name'].hasError('isDuplicate')
- && !createEndpointForm?.controls['name'].hasError('limit')"
+ && createEndpointForm?.controls.name.touched
+ && !createEndpointForm?.controls['name'].hasError('isDuplicate')
+ && !createEndpointForm?.controls['name'].hasError('limit')"
>
Endpoint name can only contain letters, numbers, hyphens and '_' but can not end with special
characters.
</span>
- <span class="error"
- *ngIf="createEndpointForm?.controls['name'].hasError('isDuplicate')">
+ <span
+ class="error"
+ *ngIf="createEndpointForm?.controls['name'].hasError('isDuplicate')"
+ >
This endpoint name already exists.
</span>
- <span class="error"
- *ngIf="createEndpointForm?.controls['name'].hasError('limit')">
- Endpoint name cannot be longer than {{ maxEndpointNameLength }} characters.
+ <span
+ class="error"
+ *ngIf="createEndpointForm?.controls['name'].hasError('limit')"
+ >
+ Endpoint name cannot be longer than {{ maxEndpointNameLength }} characters.
</span>
</div>
</div>
@@ -58,8 +71,12 @@
<div class="control">
<input type="text" formControlName="url" placeholder="Enter endpoint url">
<span class="error" *ngIf="createEndpointForm?.controls['url'].hasError('isDuplicate')">This endpoint url already exists.</span>
- <span class="error"
- *ngIf="!createEndpointForm?.controls.url.valid && createEndpointForm.controls.url.touched && !createEndpointForm?.controls['url'].hasError('isDuplicate')">
+ <span
+ class="error"
+ *ngIf="!createEndpointForm?.controls.url.valid
+ && createEndpointForm.controls.url.touched
+ && !createEndpointForm?.controls['url'].hasError('isDuplicate')"
+ >
Please provide a valid endpoint url with slash in the end.
</span>
</div>
@@ -68,8 +85,10 @@
<label class="label">Account</label>
<div class="control">
<input type="text" formControlName="account" placeholder="Enter account">
- <span class="error"
- *ngIf="!createEndpointForm?.controls.account.valid && createEndpointForm.controls.account.touched">
+ <span
+ class="error"
+ *ngIf="!createEndpointForm?.controls.account.valid && createEndpointForm.controls.account.touched"
+ >
Endpoint account can only contain letters, numbers, hyphens and '_' but can not end with special
characters.
</span>
@@ -78,10 +97,18 @@
<div class="control-group">
<label class="label">Endpoint tag</label>
<div class="control">
- <input readonly type="text" formControlName="endpoint_tag" placeholder="< equal to endpoint name >"
- class="not-allowed">
- <span class="error"
- *ngIf="!createEndpointForm?.controls.endpoint_tag.valid && createEndpointForm.controls.endpoint_tag.touched">
+ <input
+ readonly
+ type="text"
+ formControlName="endpoint_tag"
+ placeholder="< equal to endpoint name >"
+ class="not-allowed"
+ />
+ <span
+ class="error"
+ *ngIf="!createEndpointForm?.controls.endpoint_tag.valid
+ && createEndpointForm.controls.endpoint_tag.touched"
+ >
Endpoint tag can only contain letters, numbers, hyphens and '_' but can not end with special
characters.
</span>
@@ -89,25 +116,45 @@
</div>
</form>
<div class="action-group m-bott-10">
- <button mat-raised-button
- type="button"
- [disabled]="!this.createEndpointForm.value.url || !createEndpointForm.valid"
- class="butt action"
- (click)="getEndpoinConnectionStatus(createEndpointForm.value.url)"
+ <button
+ mat-raised-button
+ type="button"
+ [disabled]="!this.createEndpointForm.value.url || !createEndpointForm.valid"
+ class="butt action"
+ (click)="getEndpoinConnectionStatus(createEndpointForm.value.url)"
>
Test
</button>
<div class="action-butt">
- <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
- <button mat-raised-button type="button" [disabled]="!createEndpointForm.valid"
- (click)="assignChanges(createEndpointForm.value)" class="butt butt-success action">Connect</button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="dialogRef.close()"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ [disabled]="!createEndpointForm.valid"
+ (click)="assignChanges(createEndpointForm.value)"
+ class="butt butt-success action"
+ >
+ Connect
+ </button>
</div>
</div>
</div>
</mat-tab>
<mat-tab label="ENDPOINTS LIST">
<div class="endpoints scrolling">
- <table mat-table [dataSource]="endpoints" class="endpoints-table" *ngIf="endpoints?.length; else empty">
+ <table
+ mat-table
+ [dataSource]="endpoints"
+ class="endpoints-table"
+ *ngIf="endpoints?.length; else empty"
+ >
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef class="name"> Endpoint name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
@@ -115,9 +162,7 @@
<ng-container matColumnDef="url">
<th mat-header-cell *matHeaderCellDef class="url"> Url </th>
- <td mat-cell
- *matCellDef="let element"
- >
+ <td mat-cell *matCellDef="let element">
<span matTooltip="{{element.url}}" matTooltipPosition="above">{{element.url}}</span>
</td>
</ng-container>
@@ -135,10 +180,18 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="actions"></th>
<td mat-cell *matCellDef="let element" class="actions">
- <span (click)="getEndpoinConnectionStatus(element.url)" matTooltip="Test" matTooltipPosition="above">
+ <span
+ matTooltip="Test"
+ matTooltipPosition="above"
+ (click)="getEndpoinConnectionStatus(element.url)"
+ >
<mat-icon>compare_arrows</mat-icon>
</span>
- <span (click)="deleteEndpoint(element)" matTooltip="Disconnect" matTooltipPosition="above">
+ <span
+ matTooltip="Disconnect"
+ matTooltipPosition="above"
+ (click)="deleteEndpoint(element)"
+ >
<mat-icon>delete_forever</mat-icon>
</span>
</td>
@@ -152,7 +205,6 @@
<div class="info empty-box">
<div class="content">
<p>Looks like you don't have any endpoints</p>
-
<button mat-raised-button class="butt" (click)="tabGroup.selectedIndex = 0">
<i class="material-icons">settings_system_daydream</i>New endpoint
</button>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.scss
index 53eaaf6..520faf7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.scss
@@ -18,8 +18,8 @@
*/
.endpoints-dialog {
.content-box {
- padding: 10px 30px 30px;
height: 400px;
+ padding: 10px 30px 30px;
.split {
display: flex;
@@ -35,9 +35,9 @@
position: absolute;
right: 0;
bottom: 5px;
- font-family: 'Open Sans', sans-serif;
- font-weight: 300;
top: 34px;
+ font-family: "Open Sans", sans-serif;
+ font-weight: 300;
}
}
}
@@ -56,37 +56,37 @@
table.mat-table {
width: 100%;
- thead{
+ thead {
background: transparent;
- .mat-header-row{
- background-clip:padding-box;
+ .mat-header-row {
+ background-clip: padding-box;
}
}
tr {
td {
- vertical-align: middle;
max-width: 150px;
+ vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
}
.actions {
+ width: 14%;
color: #607d8b;
text-align: center;
- width: 14%;
span {
- transition: all .5s ease-in-out;
+ transition: all 0.5s ease-in-out;
cursor: pointer;
.mat-icon {
- font-size: 18px;
padding-top: 5px;
+ font-size: 18px;
}
&:hover {
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
index 5f13786..0dfffeb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.ts
@@ -21,11 +21,11 @@
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
+import { map } from 'rxjs/operators';
import { EndpointService } from '../../../core/services';
import { NotificationDialogComponent } from '../../../shared/modal-dialog/notification-dialog';
import { PATTERNS } from '../../../core/util';
-import { map } from 'rxjs/operators';
export interface Endpoint {
name: string;
@@ -71,51 +71,75 @@
public deleteEndpoint(data): void {
this.endpointService.getEndpointsResource(data.name)
- .pipe(map(resource =>
- resource.projects.map(project =>
- EndpointsComponent.createResourceList(
- project.name,
- resource.exploratories.filter(notebook => notebook.project === project.name),
- project.endpoints.filter(endpoint => endpoint.name === data.name)[0].status))
- .filter(project => project.nodeStatus !== 'TERMINATED'
- && project.nodeStatus !== 'TERMINATING'
- && project.nodeStatus !== 'FAILED'
- )))
+ .pipe(
+ map(resource =>
+ resource.projects
+ .map(project =>
+ EndpointsComponent.createResourceList(
+ project.name,
+ resource.exploratories.filter(notebook => notebook.project === project.name),
+ project.endpoints.filter(endpoint => endpoint.name === data.name)[0].status)
+ )
+ .filter(project => project.nodeStatus !== 'TERMINATED'
+ && project.nodeStatus !== 'TERMINATING'
+ && project.nodeStatus !== 'FAILED'
+ )
+ )
+ )
.subscribe((resource: any) => {
- this.dialog.open(NotificationDialogComponent, { data: {
- type: 'confirmation', item: data, list: resource
- }, panelClass: 'modal-sm' })
- .afterClosed().subscribe(result => {
- result && this.deleteEndpointOption(data);
- });
- });
+ this.dialog.open(NotificationDialogComponent, {
+ data: {
+ type: 'confirmation', item: data, list: resource
+ }, panelClass: 'modal-sm'
+ })
+ .afterClosed().subscribe(result => {
+ result && this.deleteEndpointOption(data);
+ });
+ });
}
public getEndpoinConnectionStatus(url) {
const getStatus = this.endpointService.getEndpoinConnectionStatus(encodeURIComponent(url));
- this.dialog.open(EndpointTestResultDialogComponent, { data: {url: url, getStatus}, panelClass: 'modal-sm' });
+ this.dialog.open(EndpointTestResultDialogComponent, { data: { url: url, getStatus }, panelClass: 'modal-sm' });
}
private static createResourceList(name: string, resource: Array<any>, nodeStatus: string): Object {
- return {name, resource, nodeStatus};
+ return { name, resource, nodeStatus };
}
private initFormModel(): void {
this.createEndpointForm = this._fb.group({
name: ['', Validators.compose([
- Validators.required, Validators.pattern(PATTERNS.namePattern), this.validateName.bind(this), this.providerMaxLength.bind(this)
+ Validators.required,
+ Validators.pattern(PATTERNS.namePattern),
+ this.validateName.bind(this),
+ this.providerMaxLength.bind(this)
])],
- url: ['', Validators.compose([Validators.required, Validators.pattern(PATTERNS.fullUrl), this.validateUrl.bind(this)])],
- account: ['', Validators.compose([Validators.required, Validators.pattern(PATTERNS.namePattern)])],
- endpoint_tag: ['', Validators.compose([Validators.required, Validators.pattern(PATTERNS.namePattern)])]
+ url: ['', Validators.compose([
+ Validators.required,
+ Validators.pattern(PATTERNS.fullUrl),
+ this.validateUrl.bind(this)
+ ])],
+ account: ['', Validators.compose([
+ Validators.required,
+ Validators.pattern(PATTERNS.namePattern)
+ ])],
+ endpoint_tag: ['', Validators.compose([
+ Validators.required,
+ Validators.pattern(PATTERNS.namePattern)
+ ])]
});
}
private deleteEndpointOption(data): void {
- this.endpointService.deleteEndpoint(`${data.name}`).subscribe(() => {
- this.toastr.success( 'Endpoint successfully disconnected. All related resources are terminating!', 'Success!');
- this.getEndpointList();
- }, error => this.toastr.error(error.message || 'Endpoint creation failed!', 'Oops!'));
+ this.endpointService.deleteEndpoint(`${data.name}`)
+ .subscribe(
+ () => {
+ this.toastr.success('Endpoint successfully disconnected. All related resources are terminating!', 'Success!');
+ this.getEndpointList();
+ },
+ error => this.toastr.error(error.message || 'Endpoint creation failed!', 'Oops!')
+ );
}
private getEndpointList(): void {
@@ -218,19 +242,20 @@
public dialogRef: MatDialogRef<EndpointTestResultDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
- this.data.getStatus.subscribe(() => {
- this.isConnected = true;
- this.response = true;
- return;
- },
- () => {
- this.isConnected = false;
- this.response = true;
- return;
- });
+ this.data.getStatus
+ .subscribe(
+ () => {
+ this.isConnected = true;
+ this.response = true;
+ return;
+ },
+ () => {
+ this.isConnected = false;
+ this.response = true;
+ return;
+ });
}
public cutToLongUrl(url) {
return url.length > 25 ? url.slice(0, 25) + '...' : url;
}
-
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html
index 8c879af..6e2b288 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html
@@ -25,7 +25,11 @@
<div class="dialog-content">
<div class="content-box">
<div *ngIf="data.projectsList?.length">
- <form [formGroup]="manageUsersForm" (submit)="setBudgetLimits(manageUsersForm.value)" novalidate>
+ <form
+ [formGroup]="manageUsersForm"
+ (submit)="setBudgetLimits(manageUsersForm.value)"
+ novalidate
+ >
<mat-list>
<mat-list-item class="list-header">
<div class="username">Project</div>
@@ -33,54 +37,93 @@
<div class="quotes">Limit</div>
</mat-list-item>
<div class="scrolling-content" id="scrolling" formArrayName="projects">
- <mat-list-item *ngFor="let item of usersEnvironments.controls; let i=index" [formGroupName]="i"
- class="list-item">
+ <mat-list-item
+ *ngFor="let item of usersEnvironments.controls; let i=index"
+ [formGroupName]="i"
+ class="list-item"
+ >
<div class="username ellipsis">
- <span class="ellipsis"
- matTooltip="{{ manageUsersForm.controls['projects']['controls'][i].value['project'] }}"
- matTooltipPosition="above">{{ manageUsersForm.controls['projects']['controls'][i].value['project'] }}
- </span>
+ <span
+ class="ellipsis"
+ matTooltip="{{ manageUsersForm.controls['projects']['controls'][i].value['project'] }}"
+ matTooltipPosition="above"
+ >
+ {{ manageUsersForm.controls['projects']['controls'][i].value['project'] }}
+ </span>
</div>
<div class="period">
- <mat-slide-toggle formControlName="monthlyBudget">
- </mat-slide-toggle>
+ <mat-slide-toggle formControlName="monthlyBudget"></mat-slide-toggle>
</div>
<div class="quotes">
- <input type="number" (keypress)="CheckUtils.numberOnly($event)" min="0"
- placeholder="Enter limit, in USD" formControlName="budget">
- <span class="error"
- *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('overrun') &&
- !manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')"
+ <input
+ type="number"
+ (keypress)="CheckUtils.numberOnly($event)"
+ min="0"
+ placeholder="Enter limit, in USD" formControlName="budget"
+ />
+ <span
+ class="error"
+ *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('overrun')
+ && !manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')"
>
Projects budget cannot be higher than total budget.
</span>
- <span class="error"
- *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')">Project budget cannot be higher than 1000000000.</span>
+ <span
+ class="error"
+ *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')"
+ >
+ Project budget cannot be higher than 1000000000.
+ </span>
</div>
</mat-list-item>
</div>
<div class="control-group total-budget">
-
<mat-list-item class="list-item">
<div class="username ellipsis">
<span class="ellipsis">Total budget</span>
</div>
- <div class="period">
- </div>
+ <div class="period"></div>
<div class="quotes">
- <input type="number" (keypress)="CheckUtils.numberOnly($event)" formControlName="total"
- placeholder="Enter total budget, in USD">
- <span class="error" *ngIf="manageUsersForm?.controls['total'].hasError('overrun')
- && !manageUsersForm?.controls['total'].hasError('max')">Total budget cannot be lower than a sum of project quotes.</span>
- <span class="error"
- *ngIf="manageUsersForm?.controls['total'].hasError('max')">Total budget cannot be higher than 1000000000.</span>
+ <input
+ type="number"
+ (keypress)="CheckUtils.numberOnly($event)"
+ formControlName="total"
+ placeholder="Enter total budget, in USD"
+ />
+ <span
+ class="error"
+ *ngIf="manageUsersForm?.controls['total'].hasError('overrun')
+ && !manageUsersForm?.controls['total'].hasError('max')"
+ >
+ Total budget cannot be lower than a sum of project quotes.
+ </span>
+ <span
+ class="error"
+ *ngIf="manageUsersForm?.controls['total'].hasError('max')"
+ >
+ Total budget cannot be higher than 1000000000.
+ </span>
</div>
</mat-list-item>
</div>
<div class="text-center m-top-30">
- <button mat-raised-button type="button" (click)="dialogRef.close()" class="butt action">Cancel</button>
- <button mat-raised-button type="submit" [disabled]="!manageUsersForm.valid || isFormChanged" class="butt butt-success"
- [ngClass]="{'not-allowed': !manageUsersForm.valid}">Apply</button>
+ <button
+ mat-raised-button
+ type="button"
+ (click)="dialogRef.close()"
+ class="butt action"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ type="submit"
+ [disabled]="!manageUsersForm.valid || isFormChanged"
+ class="butt butt-success"
+ [ngClass]="{'not-allowed': !manageUsersForm.valid}"
+ >
+ Apply
+ </button>
</div>
</mat-list>
</form>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.scss
index 1cea435..d04b101 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.scss
@@ -20,9 +20,9 @@
.manage-env-dialog {
.mat-list {
.mat-list-item {
+ position: relative;
height: 63px;
margin: 5px 0;
- position: relative;
.mat-list-item-content {
padding: 0 !important;
@@ -43,20 +43,20 @@
}
.quotes {
+ position: relative;
width: 45%;
margin-right: 10px;
- position: relative;
.error {
position: absolute;
left: 0;
top: 37px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 11px;
}
}
- .period{
+ .period {
width: 25%;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts
index 6fd04c9..2c154ef 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.ts
@@ -20,6 +20,7 @@
import { Component, Output, EventEmitter, ViewEncapsulation, Inject, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { CheckUtils } from '../../../core/util';
@@ -63,12 +64,12 @@
if (this.getCurrentTotalValue()) {
if (this.getCurrentTotalValue() >= this.getCurrentUsersTotal()) {
this.manageUsersForm.controls['total'].setErrors(null);
- if (this.manageUsersForm.controls['total'].value > 1000000000) this.manageUsersForm.controls['total'].setErrors({max: true});
+ if (this.manageUsersForm.controls['total'].value > 1000000000) this.manageUsersForm.controls['total'].setErrors({ max: true });
this.manageUsersForm.controls['projects']['controls'].forEach(v => {
- v.controls['budget'].errors &&
- 'max' in v.controls['budget'].errors ? null : v.controls['budget'].setErrors(null);
- }
- );
+ v.controls['budget'].errors && 'max' in v.controls['budget'].errors
+ ? null
+ : v.controls['budget'].setErrors(null);
+ });
} else {
this.manageUsersForm.controls['total'].setErrors({ overrun: true });
}
@@ -85,8 +86,8 @@
value.projects = value.projects.filter((v, i) =>
this.initialFormState.projects[i].budget !== v.budget ||
this.initialFormState.projects[i].monthlyBudget !== v.monthlyBudget);
- value.isTotalChanged = this.initialFormState.total !== value.total;
- this.dialogRef.close(value);
+ value.isTotalChanged = this.initialFormState.total !== value.total;
+ this.dialogRef.close(value);
} else {
this.manageUsersForm.controls['total'].setErrors({ overrun: true });
}
@@ -94,16 +95,19 @@
public setProjectsControl() {
this.manageUsersForm.setControl('projects',
- this._fb.array((this.data.projectsList || []).map((x: any, index: number) => this._fb.group({
- project: x.name,
- budget: [x.budget.value, [ Validators.max(1000000000), this.userValidityCheck.bind(this)]],
- monthlyBudget: x.budget.monthlyBudget,
- }))));
+ this._fb.array((this.data.projectsList || [])
+ .map((x: any, index: number) => this._fb.group({
+ project: x.name,
+ budget: [x.budget.value, [Validators.max(1000000000), this.userValidityCheck.bind(this)]],
+ monthlyBudget: x.budget.monthlyBudget,
+ }))
+ )
+ );
}
private initForm(): void {
this.manageUsersForm = this._fb.group({
- total: [null, [Validators.min(0), this.totalValidityCheck.bind(this), Validators.max(1000000000) ]],
+ total: [null, [Validators.min(0), this.totalValidityCheck.bind(this), Validators.max(1000000000)]],
projects: this._fb.array([this._fb.group({ project: '', budget: null, status: '' })])
});
}
@@ -124,7 +128,9 @@
private userValidityCheck(control) {
if (control && control.value) {
- if (control.parent)this.manageUsersForm.value.projects.find(v => v.project === control.parent.value.project).budget = control.value;
+ if (control.parent) {
+ this.manageUsersForm.value.projects.find(v => v.project === control.parent.value.project).budget = control.value;
+ }
return (this.getCurrentTotalValue() && this.getCurrentTotalValue() < this.getCurrentUsersTotal()) ? { overrun: true } : null;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-data.service.ts
index a3aa218..5779249 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-data.service.ts
@@ -40,7 +40,9 @@
}
private getAllEnvironmentData() {
- this.manageEnvironmentsService.getAllEnvironmentData().subscribe(
- (response) => this._data.next(response));
+ this.manageEnvironmentsService.getAllEnvironmentData()
+ .subscribe(
+ (response) => this._data.next(response)
+ );
}
}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
index 8686e4b..54d9b2c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
@@ -27,22 +27,25 @@
*ngIf="allActiveNotebooks?.length"
[checked]="selected?.length === allActiveNotebooks?.length"
(toggleSelection)="toggleSelectionAll()"
- >
- </datalab-checkbox>
+ ></datalab-checkbox>
<button mat-icon-button aria-label="More" class="ar checkbox-border" (click)="toggleFilterRow()">
<i class="material-icons">
- <!-- <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>-->
+ <!-- <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span> -->
<span>more_vert</span>
</i>
</button>
</th>
<td mat-cell *matCellDef="let element">
- <ng-template [ngIf]="element.type !== 'odahu' && element.type !== 'edge node' && (element.status==='running' || element.status==='stopped') && !clustersInProgress(element.resources)">
+ <ng-template
+ [ngIf]="element.type !== 'odahu'
+ && element.type !== 'edge node'
+ && (element.status==='running' || element.status==='stopped')
+ && !clustersInProgress(element.resources)"
+ >
<datalab-checkbox
[checked]="element.isSelected"
(toggleSelection)="toggleActionForAll(element)"
- >
- </datalab-checkbox>
+ ></datalab-checkbox>
</ng-template>
</td>
</ng-container>
@@ -50,12 +53,18 @@
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef class="user label-header">
<span class="label">User</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>
<span [hidden]="filtering && filterForm.users.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
- </button> </th>
+ </button>
+ </th>
<td
mat-cell *matCellDef="let element"
class="user-name ellipsis"
@@ -70,36 +79,54 @@
<ng-container matColumnDef="project">
<th mat-header-cell *matHeaderCellDef class="project label-header">
<span class="label">Project</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">filter_list</span>
<span [hidden]="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
- </button> </th>
+ </button>
+ </th>
<td mat-cell *matCellDef="let element">{{ element.project }}</td>
</ng-container>
<ng-container matColumnDef="endpoint">
<th mat-header-cell *matHeaderCellDef class="endpoint label-header">
<span class="label">Endpoint</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">filter_list</span>
<span [hidden]="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
- </button> </th>
+ </button>
+ </th>
<td mat-cell *matCellDef="let element">{{ element.endpoint }}</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef class="type label-header">
<span class="label">Name</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filtering && filterForm.type.length > 0 && !collapsedFilterRow">filter_list</span>
<span [hidden]="filtering && filterForm.type.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
- </button> </th>
+ </button>
+ </th>
<td type mat-cell *matCellDef="let element">
<span
*ngIf="element.name"
@@ -115,12 +142,18 @@
<ng-container matColumnDef="shape">
<th mat-header-cell *matHeaderCellDef class="shape label-header">
<span class="label">Shape / Resource id</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">filter_list</span>
<span [hidden]="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
- </button> </th>
+ </button>
+ </th>
<td mat-cell *matCellDef="let element" class="shape">
<div>{{ element.shape || element.ip }}</div>
<div *ngIf="element.gpu_type">{{ element.gpu_type }}</div>
@@ -131,13 +164,18 @@
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef class="status label-header">
<span class="label">Status</span>
-
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">filter_list</span>
<span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
- </button> </th>
+ </button>
+ </th>
<td mat-cell *matCellDef="let element" class="ani status" >
<span ngClass="{{element.status || ''}}">{{ element.status }}</span>
</td>
@@ -146,12 +184,18 @@
<ng-container matColumnDef="resources">
<th mat-header-cell *matHeaderCellDef class="resources label-header">
<span class="label">Compute</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">filter_list</span>
<span [hidden]="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
- </button> </th>
+ </button>
+ </th>
<td mat-cell *matCellDef="let element" class="ani resources">
<div class="source" *ngIf="element.resources">
<div *ngIf="!element.resources?.length">
@@ -160,21 +204,27 @@
<div *ngIf="element.resources?.length">
<div *ngFor="let resource of element.resources" class="resource-wrap">
<div class="resource-name">
- <a>
- {{ resource.computational_name }}
- </a>
+ <a>{{ resource.computational_name }}</a>
</div>
<span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span>
<div class="resource-actions">
<span class="not-allow">
<a class="start-stop-action" *ngIf="resource.image === 'docker.datalab-dataengine'">
- <i class="material-icons" (click)="toggleResourceAction(element, 'stop', resource)"
- [ngClass]="{'not-allowed' : resource.status !== 'running' || selected?.length }">pause_circle_outline</i>
+ <i
+ class="material-icons"
+ (click)="toggleResourceAction(element, 'stop', resource)"
+ [ngClass]="{'not-allowed' : resource.status !== 'running' || selected?.length }"
+ >
+ pause_circle_outline
+ </i>
</a>
</span>
<span class="not-allow">
- <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)"
- [ngClass]="{ 'disabled' : element.status !== 'running' || (resource.status !== 'running' && resource.status !== 'stopped') || selected?.length }">
+ <a
+ class="remove_butt"
+ (click)="toggleResourceAction(element, 'terminate', resource)"
+ [ngClass]="{ 'disabled' : element.status !== 'running' || (resource.status !== 'running' && resource.status !== 'stopped') || selected?.length }"
+ >
<i class="material-icons">highlight_off</i>
</a>
</span>
@@ -191,30 +241,49 @@
</th>
<td mat-cell *matCellDef="let element" class="settings actions-col">
<span [ngClass]="{'not-allow' : selected?.length}">
- <span #settings class="actions" (click)="actions.toggle($event, settings)" *ngIf="element.type !== 'edge node' && element.type !== 'odahu'"
+ <span
+ #settings
+ class="actions"
+ (click)="actions.toggle($event, settings)"
+ *ngIf="element.type !== 'edge node' && element.type !== 'odahu'"
[ngClass]="{
'disabled' : (element.status !== 'running' && element.status !== 'stopped')
- || selected?.length || inProgress(element.resources)}">
-
+ || selected?.length || inProgress(element.resources)}"
+ >
</span>
</span>
<bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
<ul class="list-unstyled">
<li
- matTooltip="{{ element.type !== 'edge node' ? 'Unable to stop notebook because at least one computational resource is in progress' : 'Unable to stop edge node because at least one resource of this user is in progress' }}"
- matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)"
- [hidden]="element.name === 'edge node' && element.status === 'stopped'">
- <div (click)="toggleResourceAction(element, 'stop')"
- [ngClass]="{'not-allowed' : element.status === 'stopped' || element.status === 'stopping' || element.status === 'starting' || element.status === 'creating image' || element.status === 'failed' || isResourcesInProgress(element)}">
+ matTooltip="{{ element.type !== 'edge node'
+ ? 'Unable to stop notebook because at least one computational resource is in progress'
+ : 'Unable to stop edge node because at least one resource of this user is in progress' }}"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!isResourcesInProgress(element)"
+ [hidden]="element.name === 'edge node' && element.status === 'stopped'"
+ >
+ <div
+ (click)="toggleResourceAction(element, 'stop')"
+ [ngClass]="{'not-allowed' : element.status === 'stopped' || element.status === 'stopping' ||
+ element.status === 'starting' || element.status === 'creating image' ||
+ element.status === 'failed' || isResourcesInProgress(element)}"
+ >
<i class="material-icons">pause_circle_outline</i>
<span>Stop</span>
</div>
</li>
- <li *ngIf="element.name !== 'edge node'"
+ <li
+ *ngIf="element.name !== 'edge node'"
matTooltip="Unable to terminate notebook because at least one compute is in progress"
- matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
- <div (click)="toggleResourceAction(element, 'terminate')"
- [ngClass]="{'not-allowed' : element.status !== 'running' && element.status !== 'stopped' || isResourcesInProgress(element)}">
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!isResourcesInProgress(element)"
+ >
+ <div
+ (click)="toggleResourceAction(element, 'terminate')"
+ [ngClass]="{'not-allowed' : element.status !== 'running' &&
+ element.status !== 'stopped' ||
+ isResourcesInProgress(element)}"
+ >
<i class="material-icons">phonelink_off</i>
<span>Terminate</span>
</div>
@@ -234,113 +303,186 @@
<!-- FILTERING -->
<ng-container matColumnDef="checkbox-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
-
- </th>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item"></th>
</ng-container>
<ng-container matColumnDef="user-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'users'" [items]="filterConfiguration.users"
- [model]="filterForm.users"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'users'"
+ [items]="filterConfiguration.users"
+ [model]="filterForm.users"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="type-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <input placeholder="Filter by name" type="text" class="form-control filter-field"
- [value]="filterForm.type" (input)="onFilterNameUpdate($event.target['value'])"/>
+ <input
+ placeholder="Filter by name"
+ type="text"
+ class="form-control filter-field"
+ [value]="filterForm.type"
+ (input)="onFilterNameUpdate($event.target['value'])"
+ />
</th>
</ng-container>
+
<ng-container matColumnDef="project-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
- [items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'projects'"
+ [items]="filterConfiguration.projects"
+ [model]="filterForm.projects"
+ ></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="endpoint-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'endpoints'"
- [items]="filterConfiguration.endpoints" [model]="filterForm.endpoints"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'endpoints'"
+ [items]="filterConfiguration.endpoints"
+ [model]="filterForm.endpoints"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="shape-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'shapes'"
- [items]="filterConfiguration.shapes" [model]="filterForm.shapes"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'shapes'"
+ [items]="filterConfiguration.shapes"
+ [model]="filterForm.shapes"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="status-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
- [items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'statuses'"
+ [items]="filterConfiguration.statuses"
+ [model]="filterForm.statuses"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="resource-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
- [items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'resources'"
+ [items]="filterConfiguration.resources"
+ [model]="filterForm.resources"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="actions-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="actions-col filter-row-item">
<div class="actions">
- <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
+ <button
+ mat-icon-button
+ class="btn reset"
+ (click)="resetFilterConfigurations()"
+ [disabled]="!isFilterSelected"
+ >
<i class="material-icons">close</i>
</button>
- <button mat-icon-button class="btn apply" (click)="applyFilter(filterForm)"
- [disabled]="isFilterChanged">
- <i class="material-icons"
- [ngClass]="{'not-allowed': allFilteredEnvironmentData?.length == 0 && !filtering}">done</i>
+ <button
+ mat-icon-button
+ class="btn apply"
+ (click)="applyFilter(filterForm)"
+ [disabled]="isFilterChanged"
+ >
+ <i
+ class="material-icons"
+ [ngClass]="{'not-allowed': allFilteredEnvironmentData?.length == 0 && !filtering}"
+ >
+ done
+ </i>
</button>
</div>
</th>
</ng-container>
-
<ng-container matColumnDef="placeholder">
<td mat-footer-cell *matFooterCellDef colspan="8">
- <div class="info"
- *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering">
- To start working, please, create new environment</div>
+ <div
+ class="info"
+ *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering"
+ >
+ To start working, please, create new environment
+ </div>
<div *ngIf="(allFilteredEnvironmentData?.length == 0) && filtering" class="info">No matches found</div>
</td>
</ng-container>
<ng-container matColumnDef="scrollButtons">
- <td mat-footer-cell *matFooterCellDef colspan="9" class="buttons-wrap">
- <div class="buttons" [ngStyle]="{'width.px': tableWrapperWidth }" [hidden]="!tableWrapperWidth">
- <div class="button-container">
- <button mat-mini-fab aria-label="Scroll left"
- (click)="sctollTo('left')"
- [ngClass]="{'not-allowed': wrapper.scrollLeft === 0 }"
- >
- <mat-icon [ngClass]="{'highlight': wrapper.scrollLeft !== 0 }">keyboard_arrow_left</mat-icon>
- </button>
- </div>
- <div class="button-container" [ngClass]="{'not-allowed': checkMaxRight()}">
- <button mat-mini-fab aria-label="Scroll right"
- (click)="sctollTo('right')"
-
- [ngClass]="{'not-allowed': !(isMaxRight | async)}"
- >
- <mat-icon [ngClass]="{'highlight': (isMaxRight | async) || false}">keyboard_arrow_right</mat-icon>
- </button>
- </div>
+ <td
+ mat-footer-cell
+ *matFooterCellDef
+ colspan="9"
+ class="buttons-wrap"
+ >
+ <div
+ class="buttons"
+ [ngStyle]="{'width.px': tableWrapperWidth }"
+ [hidden]="!tableWrapperWidth"
+ >
+ <div class="button-container">
+ <button
+ mat-mini-fab aria-label="Scroll left"
+ (click)="sctollTo('left')"
+ [ngClass]="{'not-allowed': wrapper.scrollLeft === 0 }"
+ >
+ <mat-icon [ngClass]="{'highlight': wrapper.scrollLeft !== 0 }">keyboard_arrow_left</mat-icon>
+ </button>
</div>
- </td>
- </ng-container>
+ <div class="button-container" [ngClass]="{'not-allowed': checkMaxRight()}">
+ <button
+ mat-mini-fab aria-label="Scroll right"
+ (click)="sctollTo('right')"
+ [ngClass]="{'not-allowed': !(isMaxRight | async)}"
+ >
+ <mat-icon [ngClass]="{'highlight': (isMaxRight | async) || false}">keyboard_arrow_right</mat-icon>
+ </button>
+ </div>
+ </div>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
- <tr [hidden]="!collapsedFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
- class="filter-row"></tr>
+ <tr
+ mat-header-row
+ *matHeaderRowDef="displayedColumns; sticky: true"
+ class="header-row"
+ ></tr>
+ <tr
+ [hidden]="!collapsedFilterRow"
+ mat-header-row
+ *matHeaderRowDef="displayedFilterColumns; sticky: true"
+ class="filter-row"
+ ></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
- <tr [hidden]="allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['placeholder']" class="info"></tr>
- <tr [hidden]="!tableEl || !tableEl['offsetWidth'] || tableWrapper.offsetWidth - tableEl['offsetWidth'] > -16 || !allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['scrollButtons']; sticky: true" class="info"></tr>
+ <tr
+ [hidden]="allFilteredEnvironmentData?.length"
+ mat-footer-row *matFooterRowDef="['placeholder']"
+ class="info"
+ ></tr>
+ <tr
+ [hidden]="!tableEl || !tableEl['offsetWidth'] || tableWrapper.offsetWidth - tableEl['offsetWidth'] > -16 || !allFilteredEnvironmentData?.length"
+ mat-footer-row
+ *matFooterRowDef="['scrollButtons']; sticky: true"
+ class="info"
+ ></tr>
</table>
-
</div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
index 59d5254..888cfbb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
@@ -17,60 +17,61 @@
* under the License.
*/
-.managment-wrapper{
+.managment-wrapper {
position: relative;
height: calc(100vh - 130px);
- scroll-behavior: smooth;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
+ scroll-behavior: smooth;
overflow: auto;
.scroll-wrapper {
overflow: auto;
scroll-behavior: smooth;
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+ 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+ 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
- .ani{
+ .ani {
max-height: calc(100vh - 130px);
position: relative;
- .wrapper{
- width: 100%;
+ .wrapper {
+ position: relative;
display: block;
+ width: 100%;
max-height: calc(100vh - 130px);
overflow: unset;
- position: relative;
scroll-behavior: smooth;
}
}
}
.data-grid {
-
&.management {
- .filter-row-item{
+ .filter-row-item {
padding: 5px;
}
- .settings{
+ .settings {
min-width: 7%;
}
- .mat-column-checkbox{
+ .mat-column-checkbox {
+ min-width: 38px;
padding-left: 10px;
padding-right: 0px;
- min-width: 38px;
- &.label-header{
- .empty-checkbox{
- z-index: 1011
- }
+ &.label-header {
+ .empty-checkbox {
+ z-index: 1011;
+ }
}
}
- .user{
+ .user {
width: 15%;
min-width: 180px;
}
@@ -87,13 +88,13 @@
.shape {
width: 15% !important;
- .label{
+ .label {
position: absolute;
}
min-width: 150px;
}
- .endpoint{
+ .endpoint {
width: 10% !important;
min-width: 140px;
}
@@ -115,15 +116,13 @@
.settings {
padding-right: 14px;
-
-
}
.actions {
+ position: sticky;
margin-top: 0px;
padding-right: 10px;
- position: sticky;
- .label{
+ .label {
padding-right: 5px;
}
}
@@ -132,39 +131,37 @@
width: 6%;
}
- .label-header{
+ .label-header {
padding-left: 15px;
height: 56px;
- .ar{
- left: 21px;
+ .ar {
+ left: 20px;
top: 2px;
- &.checkbox-border
- {
- left: 19px;
+ &.checkbox-border {
+ left: 18px;
}
}
- .settings{
+ .settings {
min-width: 7%;
}
- &.mat-column-checkbox{
+ &.mat-column-checkbox {
z-index: 12 !important;
padding-left: 10px;
- .ar{
+ .ar {
position: absolute;
top: 10px;
}
}
- &.user{
+ &.user {
z-index: 11 !important;
-
}
- &.type{
+ &.type {
z-index: 10 !important;
}
@@ -203,37 +200,36 @@
}
.dashboard_table_body {
-
td:first-child {
cursor: default;
}
}
- .user-name{
+ .user-name {
+ max-width: 250px;
padding-right: 22px;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
- max-width: 250px;
}
- .buttons-wrap{
+ .buttons-wrap {
padding: 0;
- border-top: 1px solid rgba(0,0,0,.12);
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
- .buttons{
+ .buttons {
position: sticky;
left: 0;
}
- button{
+ button {
background-color: #fff;
box-shadow: none;
- mat-icon{
+ mat-icon {
color: lightgrey;
- &.highlight{
+ &.highlight {
color: #35afd5;
}
}
@@ -258,8 +254,8 @@
.label {
display: inline-block;
padding-top: 14px;
- vertical-align: super !important;
padding-left: 5px;
+ vertical-align: super !important;
}
.actions {
text-align: right;
@@ -273,26 +269,26 @@
.filter-row {
background: inherit;
- .filter-row-item{
+ .filter-row-item {
left: auto !important;
- &.actions-col{
- right: -15px;
- }
+ &.actions-col {
+ right: -15px;
+ }
}
- .filter-field{
+ .filter-field {
font-size: 13px;
padding-left: 15px;
}
}
- .info{
+ .info {
padding: 40px;
text-align: center;
}
.source .resource-wrap {
- .resource-actions{
+ .resource-actions {
padding-right: 0;
}
.resource-name .detailed-link {
@@ -301,24 +297,22 @@
}
}
-.computation{
+.computation {
cursor: pointer;
color: #35afd5;
}
-.table-footer{
+.table-footer {
height: 48px;
}
-.header-checkbox{
+.header-checkbox {
margin-top: 7px;
float: left;
}
-
-
@media screen and (max-width: 1550px) {
- .managment-wrapper{
+ .managment-wrapper {
.source {
.resource-wrap {
.resource-name {
@@ -331,11 +325,8 @@
.resource-actions {
width: 20%;
-
}
}
}
}
}
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
index 7871156..78ecf28 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
@@ -30,18 +30,17 @@
AfterViewChecked,
ApplicationRef
} from '@angular/core';
+import { ChangeDetectorRef } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
+import { BehaviorSubject, Subject, timer } from 'rxjs';
-import { HealthStatusService } from '../../../core/services';
import { SortUtils } from '../../../core/util';
import { EnvironmentsDataService } from '../management-data.service';
import { EnvironmentModel, ManagementConfigModel } from '../management.model';
-import {ProgressBarService} from '../../../core/services/progress-bar.service';
-import {DetailDialogComponent} from '../../../resources/exploratory/detail-dialog';
-import {BehaviorSubject, Subject, timer} from 'rxjs';
-import { ChangeDetectorRef } from '@angular/core';
-import {CompareUtils} from '../../../core/util/compareUtils';
+import { ProgressBarService } from '../../../core/services/progress-bar.service';
+import { DetailDialogComponent } from '../../../resources/exploratory/detail-dialog';
+import { CompareUtils } from '../../../core/util/compareUtils';
export interface ManageAction {
action: string;
@@ -93,7 +92,7 @@
this.checkMaxRight();
}
- displayedColumns: string[] = [ 'checkbox', 'user', 'type', 'project', 'endpoint', 'shape', 'status', 'resources', 'actions'];
+ displayedColumns: string[] = ['checkbox', 'user', 'type', 'project', 'endpoint', 'shape', 'status', 'resources', 'actions'];
displayedFilterColumns: string[] = ['checkbox-filter', 'user-filter', 'type-filter', 'project-filter', 'endpoint-filter', 'shape-filter', 'status-filter', 'resource-filter', 'actions-filter'];
public selected;
public allActiveNotebooks: any;
@@ -102,7 +101,6 @@
public isFilterChanged: boolean;
constructor(
- private healthStatusService: HealthStatusService,
private environmentsDataService: EnvironmentsDataService,
public toastr: ToastrService,
public dialog: MatDialog,
@@ -115,7 +113,6 @@
this.getEnvironmentData();
}
-
ngAfterViewInit() {
this.progressBarService.startProgressBar();
this.tableEl = this.table._elementRef.nativeElement;
@@ -134,16 +131,20 @@
getEnvironmentData() {
this.progressBarService.startProgressBar();
- this.environmentsDataService._data.subscribe(data => {
- if (data) {
- this.allEnvironmentData = EnvironmentModel.loadEnvironments(data);
- this.getDefaultFilterConfiguration(data);
- this.applyFilter(this.cashedFilterForm || this.filterForm);
- }
- this.progressBarService.stopProgressBar();
- }, () => {
- this.progressBarService.stopProgressBar();
- });
+ this.environmentsDataService._data
+ .subscribe(
+ data => {
+ if (data) {
+ this.allEnvironmentData = EnvironmentModel.loadEnvironments(data);
+ this.getDefaultFilterConfiguration(data);
+ this.applyFilter(this.cashedFilterForm || this.filterForm);
+ }
+ this.progressBarService.stopProgressBar();
+ },
+ () => {
+ this.progressBarService.stopProgressBar();
+ }
+ );
}
buildGrid(): void {
@@ -183,7 +184,9 @@
const containsStatus = (list, selectedItems) => {
if (list) {
- return list.filter((item: any) => { if (selectedItems.indexOf(item.status) !== -1) return item; });
+ return list.filter((item: any) => {
+ if (selectedItems.indexOf(item.status) !== -1) return item;
+ });
}
};
@@ -191,19 +194,31 @@
if (config) {
filteredData = filteredData.filter(item => {
const isUser = config.users.length > 0 ? (config.users.indexOf(item.user) !== -1) : true;
- const isTypeName = item.name ? item.name.toLowerCase()
- .indexOf(config.type.toLowerCase()) !== -1 : item.type.toLowerCase().indexOf(config.type.toLowerCase()) !== -1;
- const isStatus = config.statuses.length > 0 ? (config.statuses.indexOf(item.status) !== -1) : (config.type !== 'active');
- const isShape = config.shapes.length > 0 ?
- (config.shapes.indexOf(item.shape) !== -1 ||
- config.shapes.indexOf(item.gpu_type) !== -1 ||
- config.shapes.indexOf(`GPU count: ${item.gpu_count}`) !== -1 ) : true;
- const isProject = config.projects.length > 0 ? (config.projects.indexOf(item.project) !== -1) : true;
- const isEndpoint = config.endpoints.length > 0 ? (config.endpoints.indexOf(item.endpoint) !== -1) : true;
+ const isTypeName = item.name
+ ? item.name.toLowerCase().indexOf(config.type.toLowerCase()) !== -1
+ : item.type.toLowerCase().indexOf(config.type.toLowerCase()) !== -1;
+ const isStatus = config.statuses.length > 0
+ ? (config.statuses.indexOf(item.status) !== -1)
+ : (config.type !== 'active');
+ const isShape = config.shapes.length > 0
+ ? (config.shapes.indexOf(item.shape) !== -1 ||
+ config.shapes.indexOf(item.gpu_type) !== -1 ||
+ config.shapes.indexOf(`GPU count: ${item.gpu_count}`) !== -1)
+ : true;
+ const isProject = config.projects.length > 0
+ ? (config.projects.indexOf(item.project) !== -1)
+ : true;
+ const isEndpoint = config.endpoints.length > 0
+ ? (config.endpoints.indexOf(item.endpoint) !== -1)
+ : true;
const modifiedResources = containsStatus(item.resources, config.resources);
- let isResources = config.resources.length > 0 ? (modifiedResources && modifiedResources.length > 0) : true;
- if (config.resources.length > 0 && modifiedResources && modifiedResources.length > 0) { item.resources = modifiedResources; }
+ let isResources = config.resources.length > 0
+ ? (modifiedResources && modifiedResources.length > 0)
+ : true;
+ if (config.resources.length > 0 && modifiedResources && modifiedResources.length > 0) {
+ item.resources = modifiedResources;
+ }
if (config.resources && config.resources.length === 0 && config.type === 'active' ||
modifiedResources && modifiedResources.length >= 0 && config.resources.length > 0 && config.type === 'active') {
@@ -217,8 +232,8 @@
this.allFilteredEnvironmentData = filteredData;
this.allActiveNotebooks = this.allFilteredEnvironmentData
.filter(v => v.name &&
- (v.status === 'running' || v.status === 'stopped') &&
- !this.clustersInProgress(v.resources || []));
+ (v.status === 'running' || v.status === 'stopped') &&
+ !this.clustersInProgress(v.resources || []));
this.checkFilters();
}
@@ -252,8 +267,8 @@
}
private getDefaultFilterConfiguration(data): void {
- const users = [], projects = [], shapes = [], statuses = [],
- resources = [], endpoints = [], gpuTypes = [], gpuCounts = [];
+ const users = [], projects = [], shapes = [], statuses = [],
+ resources = [], endpoints = [], gpuTypes = [], gpuCounts = [];
data && data.forEach((item: any) => {
if (item.user && users.indexOf(item.user) === -1) users.push(item.user);
@@ -264,10 +279,10 @@
if (item.gpu_type && gpuTypes.indexOf(item.gpu_type) === -1) gpuTypes.push(item.gpu_type);
if (item.gpu_count && gpuCounts.indexOf(`GPU count: ${item.gpu_count}`) === -1) gpuCounts.push(`GPU count: ${item.gpu_count}`);
if (item.computational_resources) {
- item.computational_resources.map((resource: any) => {
- if (resources.indexOf(resource.status) === -1) resources.push(resource.status);
- resources.sort(SortUtils.statusSort);
- });
+ item.computational_resources.map((resource: any) => {
+ if (resources.indexOf(resource.status) === -1) resources.push(resource.status);
+ resources.sort(SortUtils.statusSort);
+ });
}
});
@@ -278,8 +293,9 @@
if (!data.exploratory_urls || !data.exploratory_urls.length) {
return;
}
- this.dialog.open(DetailDialogComponent, { data:
- {notebook: data, buckets: [], type: 'environment'},
+ this.dialog.open(DetailDialogComponent, {
+ data:
+ { notebook: data, buckets: [], type: 'environment' },
panelClass: 'modal-lg'
})
.afterClosed().subscribe(() => {});
@@ -321,12 +337,12 @@
public checkMaxRight() {
let arg;
- if (this.wrapper && this.table) {
- arg = this.wrapper.nativeElement.offsetWidth +
- this.wrapper.nativeElement.scrollLeft + 2 <= this.table._elementRef.nativeElement.offsetWidth;
- }
-
- return this.isMaxRight.next(arg);
+ if (this.wrapper && this.table) {
+ arg = this.wrapper.nativeElement.offsetWidth +
+ this.wrapper.nativeElement.scrollLeft + 2 <= this.table._elementRef.nativeElement.offsetWidth;
+ }
+
+ return this.isMaxRight.next(arg);
}
}
@@ -436,7 +452,7 @@
if (notebook.resources.length) {
this.isClusterLength = true;
}
- return notebook;
+ return notebook;
});
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
index 240a9e0..4a4cf55 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
@@ -23,7 +23,8 @@
<div class="action-select-wrapper admin-group" >
<span class="action-button-wrapper">
<button
- type="button" class="butt actions-btn"
+ type="button"
+ class="butt actions-btn"
mat-raised-button
[disabled]="!selected.length"
(click)="toogleActions();$event.stopPropagation()"
@@ -34,18 +35,20 @@
</span>
<div class="action-menu" *ngIf="isActionsOpen">
<span>
+ <button
+ type="button"
+ class="butt action-menu-item"
+ [ngClass]="{'disabled': selectedRunning.length === 0 || selectedStopped.length !== 0 }"
+ mat-raised-button
+ [disabled]="selectedRunning.length === 0"
+ (click)="resourseAction('stop');$event.stopPropagation()"
+ >
+ Stop
+ </button>
+ </span>
<button
- type="button" class="butt action-menu-item"
- [ngClass]="{'disabled': selectedRunning.length === 0 || selectedStopped.length !== 0 }"
- mat-raised-button
- [disabled]="selectedRunning.length === 0"
- (click)="resourseAction('stop');$event.stopPropagation()"
- >
- Stop
- </button>
- </span>
- <button
- type="button" class="butt action-menu-item"
+ type="button"
+ class="butt action-menu-item"
mat-raised-button
(click)="resourseAction('terminate');$event.stopPropagation()"
>
@@ -53,26 +56,42 @@
</button>
</div>
</div>
- <button mat-raised-button class="butt ssn" (click)="showEndpointsDialog()">
+ <button
+ mat-raised-button
+ class="butt ssn"
+ (click)="showEndpointsDialog()"
+ >
<i class="material-icons"></i>Endpoints
</button>
<!-- <button mat-raised-button class="butt ssn" (click)="openSsnMonitorDialog()">
<i class="material-icons"></i>SSN Monitor
</button> -->
- <button mat-raised-button class="butt env" (click)="openManageEnvironmentDialog()">
- Manage DataLab quotas
+ <button
+ mat-raised-button
+ class="butt env"
+ (click)="openManageEnvironmentDialog()"
+ >
+ Manage DataLab quotas
</button>
<!-- <button mat-raised-button class="butt" (click)="showBackupDialog()" [disabled]="creatingBackup">
<i class="material-icons">backup</i>Backup
</button> -->
</div>
- <button mat-raised-button class="butt" (click)="refreshGrid()">
+ <button
+ mat-raised-button
+ class="butt"
+ (click)="refreshGrid()"
+ >
<i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
<mat-divider></mat-divider>
- <management-grid [currentUser]="user.toLowerCase()" [isAdmin]="healthStatus?.admin"
- [environmentsHealthStatuses]="healthStatus?.list_resources" (refreshGrid)="buildGrid()"
- (actionToggle)="toggleResourceAction($event)" (emitSelectedList)="selectedList($event)">
- </management-grid>
+ <management-grid
+ [currentUser]="user.toLowerCase()"
+ [isAdmin]="healthStatus?.admin"
+ [environmentsHealthStatuses]="healthStatus?.list_resources"
+ (refreshGrid)="buildGrid()"
+ (actionToggle)="toggleResourceAction($event)"
+ (emitSelectedList)="selectedList($event)"
+ ></management-grid>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts
index 38779fc..9ce01ad 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import {Component, OnInit, ViewChild} from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
@@ -39,9 +39,9 @@
import { EnvironmentsDataService } from './management-data.service';
import { ProjectService } from '../../core/services';
-import {ConfirmationDialogComponent, ConfirmationDialogType} from '../../shared/modal-dialog/confirmation-dialog';
-import {ManagementGridComponent, ReconfirmationDialogComponent} from './management-grid/management-grid.component';
-import {FolderTreeComponent} from '../../resources/bucket-browser/folder-tree/folder-tree.component';
+import { ConfirmationDialogComponent, ConfirmationDialogType } from '../../shared/modal-dialog/confirmation-dialog';
+import { ManagementGridComponent, ReconfirmationDialogComponent } from './management-grid/management-grid.component';
+import { FolderTreeComponent } from '../../resources/bucket-browser/folder-tree/folder-tree.component';
@Component({
selector: 'environments-management',
@@ -58,8 +58,7 @@
public selectedRunning: any[];
public selectedStopped: any[];
- @ViewChild(ManagementGridComponent, {static: true}) managementGrid;
-
+ @ViewChild(ManagementGridComponent, { static: true }) managementGrid;
constructor(
public toastr: ToastrService,
@@ -84,7 +83,7 @@
}
public refreshGrid() {
- this.buildGrid();
+ this.buildGrid();
}
public manageEnvironmentAction($event) {
@@ -95,9 +94,11 @@
$event.environment.project,
$event.environment.type === 'edge node' ? 'edge' : $event.environment.name,
$event.resource ? $event.resource.computational_name : null
- ).subscribe(
+ )
+ .subscribe(
() => this.buildGrid(),
- error => this.toastr.error('Environment management failed!', 'Oops!'));
+ error => this.toastr.error('Environment management failed!', 'Oops!')
+ );
}
// showBackupDialog() {
@@ -111,10 +112,14 @@
openManageEnvironmentDialog() {
this.projectService.getProjectsList().subscribe(projectsList => {
- this.getTotalBudgetData().subscribe(total => {
- this.dialogRef = this.dialog.open(ManageEnvironmentComponent, { data: { projectsList, total }, panelClass: 'modal-xl-s' });
- this.dialogRef.afterClosed().subscribe(result => result && this.setBudgetLimits(result));
- }, () => this.toastr.error('Failed users list loading!', 'Oops!'));
+ this.getTotalBudgetData()
+ .subscribe(
+ total => {
+ this.dialogRef = this.dialog.open(ManageEnvironmentComponent, { data: { projectsList, total }, panelClass: 'modal-xl-s' });
+ this.dialogRef.afterClosed().subscribe(result => result && this.setBudgetLimits(result));
+ },
+ () => this.toastr.error('Failed users list loading!', 'Oops!')
+ );
});
}
@@ -131,28 +136,31 @@
setBudgetLimits($event) {
if ($event.projects.length) {
- this.projectService.updateProjectsBudget($event.projects).subscribe((result: any) => {
- if ($event.isTotalChanged) {
- this.healthStatusService.updateTotalBudgetData($event.total).subscribe((res: any) => {
- result.status === HTTP_STATUS_CODES.OK
- && res.status === HTTP_STATUS_CODES.NO_CONTENT
- && this.toastr.success('Budget limits updated!', 'Success!');
- this.buildGrid();
- });
- } else {
- result.status === HTTP_STATUS_CODES.OK && this.toastr.success('Budget limits updated!', 'Success!');
- this.buildGrid();
- }
-
- }, error => this.toastr.error(error.message, 'Oops!'));
+ this.projectService.updateProjectsBudget($event.projects)
+ .subscribe(
+ (result: any) => {
+ if ($event.isTotalChanged) {
+ this.healthStatusService.updateTotalBudgetData($event.total).subscribe((res: any) => {
+ result.status === HTTP_STATUS_CODES.OK
+ && res.status === HTTP_STATUS_CODES.NO_CONTENT
+ && this.toastr.success('Budget limits updated!', 'Success!');
+ this.buildGrid();
+ });
+ } else {
+ result.status === HTTP_STATUS_CODES.OK && this.toastr.success('Budget limits updated!', 'Success!');
+ this.buildGrid();
+ }
+ },
+ error => this.toastr.error(error.message, 'Oops!'));
} else {
- this.healthStatusService.updateTotalBudgetData($event.total).subscribe((res: any) => {
- res.status === HTTP_STATUS_CODES.NO_CONTENT
- && this.toastr.success('Budget limits updated!', 'Success!');
- this.buildGrid();
- });
+ this.healthStatusService.updateTotalBudgetData($event.total)
+ .subscribe((res: any) => {
+ res.status === HTTP_STATUS_CODES.NO_CONTENT
+ && this.toastr.success('Budget limits updated!', 'Success!');
+ this.buildGrid();
+ });
}
- }
+ }
// manageEnvironment(event: { action: string, project: any }) {
@@ -216,12 +224,18 @@
}
toggleResourceAction($event): void {
- const {environment, action, resource} = $event;
+ const { environment, action, resource } = $event;
if (resource) {
const resource_name = resource ? resource.computational_name : environment.name;
this.dialog.open(ReconfirmationDialogComponent, {
- data: { action, resource_name, user: environment.user, type: 'cluster'},
- width: '550px', panelClass: 'error-modalbox'
+ data: {
+ action,
+ resource_name,
+ user: environment.user,
+ type: 'cluster'
+ },
+ width: '550px',
+ panelClass: 'error-modalbox'
}).afterClosed().subscribe(result => {
result && this.manageEnvironmentAction({ action, environment, resource });
});
@@ -230,15 +244,20 @@
if (action === 'stop') {
notebooks = notebooks.filter(note => note.status !== 'stopped');
this.dialog.open(ReconfirmationDialogComponent, {
- data: { notebooks: notebooks, type: 'notebook', action },
- width: '550px', panelClass: 'error-modalbox'
+ data: {
+ notebooks: notebooks,
+ type: 'notebook',
+ action
+ },
+ width: '550px',
+ panelClass: 'error-modalbox'
}).afterClosed().subscribe((res) => {
if (res) {
notebooks.forEach((env) => {
this.manageEnvironmentsService.environmentManagement(env.user, 'stop', env.project, env.name)
.subscribe(response => {
- this.buildGrid();
- },
+ this.buildGrid();
+ },
error => console.log(error)
);
});
@@ -250,7 +269,13 @@
});
} else if (action === 'terminate') {
this.dialog.open(ReconfirmationDialogComponent, {
- data: { notebooks: notebooks, type: 'notebook', action }, width: '550px', panelClass: 'error-modalbox'
+ data: {
+ notebooks: notebooks,
+ type: 'notebook',
+ action
+ },
+ width: '550px',
+ panelClass: 'error-modalbox'
}).afterClosed().subscribe((res) => {
if (res) {
notebooks.forEach((env) => {
@@ -268,16 +293,16 @@
}
this.isActionsOpen = false;
});
- // } else if (action === 'run') {
- // this.healthStatusService.runEdgeNode().subscribe(() => {
- // this.buildGrid();
- // this.toastr.success('Edge node is starting!', 'Processing!');
- // }, () => this.toastr.error('Edge Node running failed!', 'Oops!'));
- // } else if (action === 'recreate') {
- // this.healthStatusService.recreateEdgeNode().subscribe(() => {
- // this.buildGrid();
- // this.toastr.success('Edge Node recreation is processing!', 'Processing!');
- // }, () => this.toastr.error('Edge Node recreation failed!', 'Oops!'));
+ // } else if (action === 'run') {
+ // this.healthStatusService.runEdgeNode().subscribe(() => {
+ // this.buildGrid();
+ // this.toastr.success('Edge node is starting!', 'Processing!');
+ // }, () => this.toastr.error('Edge Node running failed!', 'Oops!'));
+ // } else if (action === 'recreate') {
+ // this.healthStatusService.recreateEdgeNode().subscribe(() => {
+ // this.buildGrid();
+ // this.toastr.success('Edge Node recreation is processing!', 'Processing!');
+ // }, () => this.toastr.error('Edge Node recreation failed!', 'Oops!'));
}
}
}
@@ -291,8 +316,7 @@
}
}
-
public resourseAction(action) {
- this.toggleResourceAction({environment: this.selected, action: action});
+ this.toggleResourceAction({ environment: this.selected, action: action });
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts
index 7e9dda2..2e67871 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts
@@ -102,7 +102,6 @@
public statuses: Array<string>,
public resources: Array<string>,
public endpoints: Array<string>,
-
) { }
defaultConfigurations(): void {
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.html
index 30c818d..a1b2e9f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.html
@@ -107,7 +107,14 @@
</mat-tab>
</mat-tab-group>
<div class="text-center">
- <button type="button" class="butt" mat-raised-button (click)="dialogRef.close()">Close</button>
+ <button
+ type="button"
+ class="butt"
+ mat-raised-button
+ (click)="dialogRef.close()"
+ >
+ Close
+ </button>
</div>
</div>
<div class="info message" *ngIf="isEmpty(data)">
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss
index 9881165..107908c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.scss
@@ -19,8 +19,8 @@
.ssn-monitor-dialog {
.content-box {
- padding-top: 10px !important;
position: relative;
+ padding-top: 10px !important;
}
.ssn-info {
min-height: 400px;
@@ -39,13 +39,13 @@
.mat-list-item-content {
display: flex;
justify-content: initial;
- color: #577289;
padding: 15px 5px;
- border-bottom: 1px solid #f3f2f2;
+ color: #577289;
font-size: 15px;
+ border-bottom: 1px solid #f3f2f2;
.col {
width: 50%;
font-weight: 300;
- }
+ }
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.ts
index 1ef7634..5aedc1f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/ssn-monitor/ssn-monitor.component.ts
@@ -20,6 +20,7 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
+
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { HealthStatusService } from '../../../core/services';
@@ -42,9 +43,11 @@
) { }
ngOnInit() {
- this.healthStatusService.getSsnMonitorData().subscribe(
+ this.healthStatusService.getSsnMonitorData()
+ .subscribe(
monitorData => this.data = monitorData,
- () => this.toastr.error('Failed ssn data loading!', 'Oops!'));
+ () => this.toastr.error('Failed ssn data loading!', 'Oops!')
+ );
}
public isEmpty(obj) {
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-data.service.ts
index a461686..0cb20d2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-data.service.ts
@@ -46,17 +46,10 @@
mergeMap ((response: Project[]) => {
if (response && this.endpointsList.length) {
response.forEach(project => project.endpoints.forEach(endpoint => {
- const filtredEndpoints = this.endpointsList.filter(v => v.name === endpoint.name);
const idx = this.endpointsList.findIndex(v => v.name === endpoint.name);
- // console.log('IDX ', idx);
- // if (filtredEndpoints.length) {
if (idx >= 0) {
endpoint.endpointStatus = this.endpointsList[idx].status;
}
-
- // } else {
- // endpoint.endpointStatus = 'N/A';
- // }
}));
}
return of(response);
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html
index 463c344..cd76e97 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.html
@@ -31,7 +31,8 @@
<div>
<a href="#/help/publickeyguide" target="_blank">
<small class="helper_instruction">
- <i class="material-icons">help_outline</i>Where can I get public key?</small>
+ <i class="material-icons">help_outline</i>Where can I get public key?
+ </small>
</a>
</div>
</div>
@@ -40,40 +41,69 @@
<span class="upload-icon"></span> Upload
<input (change)="onFileChange($event)" type="file" name="file" accept=".pub" />
</span>
- <button mat-raised-button type="button" class="butt butt-generate" [ngClass]="{ 'not-allowed' : item }"
- (click)="generateUserAccessKey()">
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-generate"
+ [ngClass]="{ 'not-allowed' : item }"
+ (click)="generateUserAccessKey()"
+ >
<i class="material-icons">move_to_inbox</i> Generate
</button>
<div *ngIf="keyLabel" class="m-bott-10 m-top-10 ellipsis" [class.danger_color]="!accessKeyValid">
- {{ keyLabel }}</div>
+ {{ keyLabel }}
+ </div>
</div>
</div>
<div class="text-center m-bott-10">
- <button mat-raised-button type="button" class="butt" [disabled]="item" (click)="reset()">Clear</button>
- <button mat-raised-button type="button" class="butt next" matStepperNext>Next
- <i class="material-icons arrow-icon">keyboard_arrow_right</i></button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt"
+ [disabled]="item"
+ (click)="reset()"
+ >
+ Clear
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt next"
+ matStepperNext
+ >
+ Next
+ <i class="material-icons arrow-icon">keyboard_arrow_right</i>
+ </button>
</div>
</div>
</section>
</mat-step>
+
<mat-step [completed]='false'>
<ng-template matStepLabel>Project</ng-template>
<section class="inner-step mat-reset">
-
<div class="form-block">
<div>
<div class="control-group m-bott-10">
<label class="label">Project name</label>
<div class="control">
- <input type="text" formControlName="name" placeholder="Enter project name"
- (blur)="generateProjectTag($event)" [ngClass]="{ 'not-allowed' : item }">
- <span class="error" *ngIf="projectForm?.controls.name.hasError('duplication')">This project name already
- exists.</span>
- <span class="error" *ngIf="!projectForm?.controls.name.valid
- && !projectForm?.controls.name.hasError('duplication')
- && !projectForm?.controls.name.hasError('limit')
- && projectForm?.controls.name.dirty">
+ <input
+ type="text"
+ formControlName="name"
+ placeholder="Enter project name"
+ (blur)="generateProjectTag($event)"
+ [ngClass]="{ 'not-allowed' : item }"
+ />
+ <span class="error" *ngIf="projectForm?.controls.name.hasError('duplication')">
+ This project name already exists.
+ </span>
+ <span
+ class="error"
+ *ngIf="!projectForm?.controls.name.valid
+ && !projectForm?.controls.name.hasError('duplication')
+ && !projectForm?.controls.name.hasError('limit')
+ && projectForm?.controls.name.dirty">
Project name can only contain letters and numbers.
</span>
<span class="error" *ngIf="projectForm?.controls.name.hasError('limit')">
@@ -84,8 +114,13 @@
<div class="control-group m-bott-10">
<label class="label">Project tag</label>
<div class="control">
- <input readonly type="text" formControlName="tag" placeholder="< equal to project name >"
- class="not-allowed">
+ <input
+ readonly
+ type="text"
+ formControlName="tag"
+ placeholder="< equal to project name >"
+ class="not-allowed"
+ />
</div>
</div>
<div class="control-group m-bott-10">
@@ -97,7 +132,8 @@
disableOptionCentering
formControlName="endpoints"
placeholder="Select endpoints"
- panelClass="crete-project-dialog scrolling">
+ panelClass="crete-project-dialog scrolling"
+ >
<mat-option class="multiple-select" disabled>
<a class="select ani" (click)="selectOptions(endpointsList, 'endpoints', 'all')">
<i class="material-icons">playlist_add_check</i> All
@@ -107,12 +143,20 @@
<i class="material-icons">clear</i> None
</a>
</mat-option>
- <mat-option *ngFor="let endpoint of endpointsList" [value]="endpoint.name"
- [disabled]="isDisabled(endpoint.name) || endpoint.status !== 'ACTIVE'">
+ <mat-option
+ *ngFor="let endpoint of endpointsList"
+ [value]="endpoint.name"
+ [disabled]="isDisabled(endpoint.name) || endpoint.status !== 'ACTIVE'"
+ >
{{ endpoint.name === 'local' ? endpoint.name : endpoint.name + (endpoint.status !== 'ACTIVE' ? ' (inactive)' : '')}}
</mat-option>
- <mat-option *ngIf="!endpointsList.length" class="multiple-select empty ml-10" disabled>
- Endpoints list is empty</mat-option>
+ <mat-option
+ *ngIf="!endpointsList.length"
+ class="multiple-select empty ml-10"
+ disabled
+ >
+ Endpoints list is empty
+ </mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -123,16 +167,35 @@
</div>
<div class="text-center m-bott-10">
- <button mat-raised-button type="button" class="butt" [disabled]="item" (click)="reset()">Clear</button>
- <button mat-raised-button matStepperPrevious class="butt"><i
- class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button>
- <button mat-raised-button type="button" class="butt next" matStepperNext>Next<i
- class="material-icons arrow-icon">keyboard_arrow_right</i></button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt"
+ [disabled]="item"
+ (click)="reset()"
+ >
+ Clear
+ </button>
+ <button
+ mat-raised-button
+ matStepperPrevious
+ class="butt"
+ >
+ <i class="material-icons arrow-icon">keyboard_arrow_left</i>Back
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt next"
+ matStepperNext
+ >
+ Next<i class="material-icons arrow-icon">keyboard_arrow_right</i>
+ </button>
</div>
</div>
-
</section>
</mat-step>
+
<mat-step [completed]='false'>
<ng-template matStepLabel>Groups</ng-template>
<div class="inner-step mat-reset">
@@ -146,7 +209,8 @@
disableOptionCentering
formControlName="groups"
placeholder="Select user groups"
- panelClass="crete-project-dialog scrolling">
+ panelClass="crete-project-dialog scrolling"
+ >
<mat-option class="multiple-select" disabled>
<a class="select ani" (click)="selectOptions(groupsList, 'groups', 'all')">
<i class="material-icons">playlist_add_check</i> All
@@ -158,7 +222,8 @@
<mat-option *ngFor="let group of groupsList" [value]="group">
{{ group }}
</mat-option>
- <mat-option *ngIf="!groupsList.length" class="multiple-select ml-10" disabled>Groups list is empty
+ <mat-option *ngIf="!groupsList.length" class="multiple-select ml-10" disabled>
+ Groups list is empty
</mat-option>
</mat-select>
<button class="caret">
@@ -173,11 +238,29 @@
<!-- <span class="hold-label">Use shared image</span>-->
<!-- </mat-slide-toggle>-->
<!-- </div>-->
- <button mat-raised-button type="button" class="butt" [disabled]="item" (click)="reset()">Clear</button>
- <button mat-raised-button matStepperPrevious class="butt"><i
- class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button>
- <button mat-raised-button type="button" class="butt butt-success" [disabled]="!projectForm.valid"
- (click)="confirm(projectForm.value)">
+ <button
+ mat-raised-button
+ type="button"
+ class="butt"
+ [disabled]="item"
+ (click)="reset()"
+ >
+ Clear
+ </button>
+ <button
+ mat-raised-button
+ matStepperPrevious
+ class="butt"
+ >
+ <i class="material-icons arrow-icon">keyboard_arrow_left</i>Back
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-success"
+ [disabled]="!projectForm.valid"
+ (click)="confirm(projectForm.value)"
+ >
<span *ngIf="item; else update">Update</span>
<ng-template #update>Create</ng-template>
</button>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss
index 54a9244..3e11ea2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.scss
@@ -32,16 +32,16 @@
.ellipsis {
position: absolute;
- width: 100%;
right: 0;
+ width: 100%;
}
}
}
}
&.split {
- flex-direction: column;
display: flex;
+ flex-direction: column;
justify-content: space-between;
height: 240px;
}
@@ -58,7 +58,7 @@
position: absolute;
right: 0;
bottom: -2px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-weight: 300;
}
}
@@ -76,6 +76,6 @@
.mat-form-field {
.mat-select {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
index 69c709d..b5cd1b8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
@@ -20,6 +20,7 @@
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';
+import {MatDialog} from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { Subscription } from 'rxjs';
@@ -29,7 +30,6 @@
import { Project } from '../project.component';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import {ConfirmationDialogComponent} from '../../../shared/modal-dialog/confirmation-dialog';
-import {MatDialog} from '@angular/material/dialog';
export interface GenerateKey { privateKey: string; publicKey: string; }
@@ -83,15 +83,20 @@
}
private updateProject(data: any) {
- this.projectService.updateProject(data).subscribe(() => {
- this.toastr.success('Project updated successfully!', 'Success!');
- this.update.emit();
- }, error => this.toastr.error(error.message || 'Project update failed!', 'Oops!'));
+ this.projectService.updateProject(data)
+ .subscribe(
+ () => {
+ this.toastr.success('Project updated successfully!', 'Success!');
+ this.update.emit();
+ },
+ error => this.toastr.error(error.message || 'Project update failed!', 'Oops!')
+ );
}
public confirm(data) {
if (this.item) {
const deletedGroups = this.item.groups.filter((v) => !(this.projectForm.value.groups.includes(v)));
+
if (deletedGroups.length) {
this.dialog.open(ConfirmationDialogComponent, {
data: {notebook: deletedGroups, type: 5, manageAction: true}, panelClass: 'modal-md'
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
index 1831faa..c1f54d1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
@@ -18,107 +18,106 @@
-->
<div class="table-wrapper scrolling">
<table mat-table [dataSource]="dataSource" class="projects-table mat-elevation-z6 selection">
- <ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef class="name"> Project name </th>
- <td mat-cell *matCellDef="let element" class="name project-name"> {{element.name}} </td>
- </ng-container>
+ <ng-container matColumnDef="name">
+ <th mat-header-cell *matHeaderCellDef class="name"> Project name </th>
+ <td mat-cell *matCellDef="let element" class="name project-name"> {{element.name}} </td>
+ </ng-container>
- <ng-container matColumnDef="groups">
- <th mat-header-cell *matHeaderCellDef class="groups"> Group </th>
- <td mat-cell *matCellDef="let element" class="groups">
- <div class="mat-chip-list-wrap scrolling">
- <mat-chip-list>
- <mat-chip *ngFor="let group of element.groups"
- [matTooltip]="group"
- matTooltipPosition="above"
- class="ellipsis"
- >
- {{ group }}
- </mat-chip>
- </mat-chip-list>
- </div>
- </td>
- </ng-container>
+ <ng-container matColumnDef="groups">
+ <th mat-header-cell *matHeaderCellDef class="groups"> Group </th>
+ <td mat-cell *matCellDef="let element" class="groups">
+ <div class="mat-chip-list-wrap scrolling">
+ <mat-chip-list>
+ <mat-chip
+ *ngFor="let group of element.groups"
+ [matTooltip]="group"
+ matTooltipPosition="above"
+ class="ellipsis"
+ >
+ {{ group }}
+ </mat-chip>
+ </mat-chip-list>
+ </div>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="endpoints">
- <th mat-header-cell *matHeaderCellDef class="endpoints">
- <span class="label-endpoint"> Endpoint </span>
- <span class="label-endpoint-status"> Endpoint status </span>
- <span class="label-status">Edge node status </span>
- </th>
- <td mat-cell *matCellDef="let element" class="source endpoints">
- <div *ngIf="!element.endpoints?.length; else list">
- <span *ngIf="!element.endpoints.length" class="no-details">no details</span>
- </div>
- <ng-template #list>
- <div *ngFor="let endpoint of element.endpoints" class="resource-wrap">
- <div class="resource-name">
- <a class="project-endpoint-name">
- {{ endpoint.name }}
- </a>
- </div>
- <div class="resource-status">
- <span [ngClass]="{'active' : endpoint.endpointStatus === 'ACTIVE', 'failed': endpoint.endpointStatus === 'INACTIVE'}">
- {{ (endpoint.endpointStatus | titlecase) || 'N/A'}}
+ <ng-container matColumnDef="endpoints">
+ <th mat-header-cell *matHeaderCellDef class="endpoints">
+ <span class="label-endpoint"> Endpoint </span>
+ <span class="label-endpoint-status"> Endpoint status </span>
+ <span class="label-status">Edge node status </span>
+ </th>
+ <td mat-cell *matCellDef="let element" class="source endpoints">
+ <div *ngIf="!element.endpoints?.length; else list">
+ <span *ngIf="!element.endpoints.length" class="no-details">no details</span>
+ </div>
+ <ng-template #list>
+ <div *ngFor="let endpoint of element.endpoints" class="resource-wrap">
+ <div class="resource-name">
+ <a class="project-endpoint-name">
+ {{ endpoint.name }}
+ </a>
+ </div>
+ <div class="resource-status">
+ <span [ngClass]="{'active' : endpoint.endpointStatus === 'ACTIVE', 'failed': endpoint.endpointStatus === 'INACTIVE'}">
+ {{ (endpoint.endpointStatus | titlecase) || 'N/A'}}
+ </span>
+ </div>
+
+ <span class="status resource-status" [ngClass]="endpoint?.status.toLowerCase() || ''">
+ {{ endpoint?.status.toLowerCase() }}
</span>
</div>
+ </ng-template>
+ </td>
+ </ng-container>
- <span class="status resource-status"
- [ngClass]="endpoint?.status.toLowerCase() || ''">{{ endpoint?.status.toLowerCase() }}</span>
- </div>
- </ng-template>
- </td>
- </ng-container>
+ <ng-container matColumnDef="actions">
+ <th mat-header-cell *matHeaderCellDef class="project-actions">
+ <span class="label"> Actions </span>
+ </th>
+ <td mat-cell *matCellDef="let element" class="settings">
+ <span #settings (click)="actions.toggle($event, settings)" class="actions"></span>
+ <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
+ <ul class="list-unstyled actions-list">
+ <div class="active-items"></div>
+ <li class="project-seting-item" *ngIf="element.areStoppedNode" (click)="openEdgeDialog('start', element)">
+ <i class="material-icons">play_circle_outline</i>
+ <a class="action">
+ Start edge node
+ </a>
+ </li>
+ <li class="project-seting-item" *ngIf="element.areRunningNode" (click)="openEdgeDialog('stop', element )">
+ <i class="material-icons">pause_circle_outline</i>
+ <a class="action" >
+ Stop edge node
+ </a>
+ </li>
+ <li class="project-seting-item " *ngIf="element.areTerminatedNode" (click)="openEdgeDialog('recreate', element)">
+ <i class="material-icons">refresh</i>
+ <a class="action">
+ Recreate edge node
+ </a>
+ </li>
+ <li class="project-seting-item " *ngIf="element.areStoppedNode || element.areRunningNode" (click)="openEdgeDialog('terminate', element)">
+ <i class="material-icons">phonelink_off</i>
+ <a class="action">
+ Terminate edge node
+ </a>
+ </li>
+ <li class="project-seting-item" (click)="editProject(element)" *ngIf="!isProjectAdmin">
+ <i class="material-icons">mode_edit</i>
+ <a >
+ Edit project
+ </a>
+ </li>
+ </ul>
+ </bubble-up>
+ </td>
+ <td class="settings"></td>
+ </ng-container>
- <ng-container matColumnDef="actions">
- <th mat-header-cell *matHeaderCellDef class="project-actions">
- <span class="label"> Actions </span>
- </th>
- <td mat-cell *matCellDef="let element" class="settings">
- <span #settings (click)="actions.toggle($event, settings)" class="actions"></span>
- <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
- <ul class="list-unstyled actions-list">
- <div class="active-items"></div>
- <li class="project-seting-item" *ngIf="element.areStoppedNode" (click)="openEdgeDialog('start', element)">
- <i class="material-icons">play_circle_outline</i>
- <a class="action">
- Start edge node
- </a>
- </li>
- <li class="project-seting-item" *ngIf="element.areRunningNode" (click)="openEdgeDialog('stop', element )">
- <i class="material-icons">pause_circle_outline</i>
- <a class="action" >
- Stop edge node
- </a>
- </li>
- <li class="project-seting-item " *ngIf="element.areTerminatedNode" (click)="openEdgeDialog('recreate', element)">
- <i class="material-icons">refresh</i>
- <a class="action">
- Recreate edge node
- </a>
- </li>
- <li class="project-seting-item " *ngIf="element.areStoppedNode || element.areRunningNode" (click)="openEdgeDialog('terminate', element)">
- <i class="material-icons">phonelink_off</i>
- <a class="action">
- Terminate edge node
- </a>
- </li>
- <li class="project-seting-item" (click)="editProject(element)" *ngIf="!isProjectAdmin">
- <i class="material-icons">mode_edit</i>
- <a >
- Edit project
- </a>
- </li>
- </ul>
- </bubble-up>
- </td>
- <td class="settings">
-
- </td>
-
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ </table>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
index 140feb4..836b822 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
@@ -17,13 +17,12 @@
* under the License.
*/
-
-.table-wrapper{
+.table-wrapper {
+ position: relative;
+ margin: 0 -15px -15px -15px;
+ padding: 0 15px 15px 15px;
height: calc(100vh - 120px);
overflow: auto;
- position: relative;
- margin: 0 -15px -15px -15px;
- padding: 0 15px 15px 15px;
.mat-header-cell {
position: sticky;
top: 0;
@@ -31,6 +30,7 @@
background: white;
}
}
+
table {
width: 100%;
@@ -41,16 +41,16 @@
.name {
width: 25%;
padding: 20px 0 10px 24px;
- &.project-name{
+ &.project-name {
padding-top: 10px;
}
}
- th.name{
+ th.name {
padding-top: 10px;
}
- .mat-header-row{
+ .mat-header-row {
padding-top: 12px;
}
@@ -59,13 +59,15 @@
padding: 15px 0;
.resource-wrap {
- .resource-name, .resource-status {
+ .resource-name,
+ .resource-status {
width: 30%;
padding-left: 0;
}
}
- .label-endpoint, .label-endpoint-status {
+ .label-endpoint,
+ .label-endpoint-status {
display: inline-block;
width: 30%;
}
@@ -75,7 +77,7 @@
}
&.source {
- &.endpoints .resource-wrap{
+ &.endpoints .resource-wrap {
justify-content: flex-start;
}
.no-details {
@@ -94,19 +96,19 @@
}
.project-actions {
- color: #607d8b;
width: 10%;
+ padding: 10px 24px;
+ color: #607d8b;
text-align: right;
vertical-align: top;
- padding: 10px 24px;
- &.mat-header-cell{
+ &.mat-header-cell {
padding-top: 19px;
- color: rgba(0,0,0,.54);
+ color: rgba(0, 0, 0, 0.54);
}
span:not(.mat-header-cell span) {
- transition: all .5s ease-in-out;
+ transition: all 0.5s ease-in-out;
cursor: pointer;
.mat-icon {
@@ -126,47 +128,49 @@
vertical-align: middle !important;
text-align: right;
.actions {
- margin-top: 3px;
- background-image: url(../../../../assets/svg/settings_icon.svg);
+ display: inline-block;
width: 16px;
height: 16px;
- display: inline-block;
+ margin-top: 3px;
+ background-image: url(../../../../assets/svg/settings_icon.svg);
text-align: center;
cursor: pointer;
}
}
-.project-seting-item{
+
+.project-seting-item {
display: flex;
- padding: 10px;
align-items: center;
+ padding: 10px;
border-bottom: 1px solid #edf1f5;
cursor: pointer;
color: #577289;
- &:last-child{
+ &:last-child {
border-bottom: none;
}
- &:hover{
+ &:hover {
color: #36afd5;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
}
- a{
+ a {
padding-left: 5px;
}
}
+
.material-icons {
font-size: 18px;
padding-top: 1px;
}
-.list-menu{
+.list-menu {
min-width: 205px;
}
-.project-endpoint-name{
- color: #577289;
+.project-endpoint-name {
+ color: #577289;
}
-.actions-list{
+.actions-list {
padding: 10px 15px;
}
@@ -174,8 +178,4 @@
max-width: 200px !important;
white-space: nowrap;
display: inline-block;
-}
-
-
-
-
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
index 6ee2f2a..41a2127 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import {Component, OnInit, Output, EventEmitter, OnDestroy, Inject, Input} from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, OnDestroy, Inject, Input } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MatTableDataSource } from '@angular/material/table';
import { Subscription } from 'rxjs';
@@ -25,11 +25,8 @@
import { ProjectDataService } from '../project-data.service';
import { Project, Endpoint } from '../project.component';
-import { CheckUtils } from '../../../core/util';
import {ProgressBarService} from '../../../core/services/progress-bar.service';
import {EdgeActionDialogComponent} from '../../../shared/modal-dialog/edge-action-dialog';
-import {EndpointService} from '../../../core/services';
-
@Component({
selector: 'project-list',
@@ -47,16 +44,14 @@
@Output() toggleStatus: EventEmitter<{}> = new EventEmitter();
private subscriptions: Subscription = new Subscription();
- constructor(
+ constructor (
public toastr: ToastrService,
private projectDataService: ProjectDataService,
private progressBarService: ProgressBarService,
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<ProjectListComponent>,
public dialog: MatDialog,
- ) {
- }
-
+ ) { }
ngOnInit() {
this.getProjectList();
@@ -68,23 +63,30 @@
private getProjectList() {
this.progressBarService.startProgressBar();
- this.subscriptions.add(this.projectDataService._projects.subscribe((value: Project[]) => {
- this.projectList = value;
- if (this.projectList) {
- this.projectList.forEach(project => {
- project.areRunningNode = this.areResoursesInStatuses(project.endpoints, ['RUNNING']);
- project.areStoppedNode = this.areResoursesInStatuses(project.endpoints, ['STOPPED']);
- project.areTerminatedNode = this.areResoursesInStatuses(project.endpoints, ['TERMINATED', 'FAILED']);
- });
- }
- if (value) this.dataSource = new MatTableDataSource(value);
- this.progressBarService.stopProgressBar();
- }, () => this.progressBarService.stopProgressBar()));
+ this.subscriptions.add(this.projectDataService._projects
+ .subscribe(
+ (value: Project[]) => {
+ this.projectList = value;
+ if (this.projectList) {
+ this.projectList.forEach(project => {
+ project.areRunningNode = this.areResoursesInStatuses(project.endpoints, ['RUNNING']);
+ project.areStoppedNode = this.areResoursesInStatuses(project.endpoints, ['STOPPED']);
+ project.areTerminatedNode = this.areResoursesInStatuses(project.endpoints, ['TERMINATED', 'FAILED']);
+ });
+ }
+ if (value) this.dataSource = new MatTableDataSource(value);
+ this.progressBarService.stopProgressBar();
+ },
+ () => this.progressBarService.stopProgressBar()
+ )
+ );
}
public showActiveInstances(): void {
const filteredList = this.projectList.map(project => {
- project.endpoints = project.endpoints.filter((endpoint: Endpoint) => endpoint.status !== 'TERMINATED' && endpoint.status !== 'TERMINATING' && endpoint.status !== 'FAILED');
+ project.endpoints = project.endpoints.filter((endpoint: Endpoint) => {
+ return endpoint.status !== 'TERMINATED' && endpoint.status !== 'TERMINATING' && endpoint.status !== 'FAILED'
+ });
return project;
});
@@ -96,32 +98,34 @@
}
public openEdgeDialog(action, project) {
- const endpoints = project.endpoints.filter(endpoint => {
- if (action === 'stop') {
- return endpoint.status === 'RUNNING';
- }
- if (action === 'start') {
- return endpoint.status === 'STOPPED';
- }
- if (action === 'terminate') {
- return endpoint.status === 'RUNNING' || endpoint.status === 'STOPPED';
- }
- if (action === 'recreate') {
- return endpoint.status === 'TERMINATED' || endpoint.status === 'FAILED';
- }
- });
- if (action === 'terminate' && endpoints.length === 1) {
- this.toggleStatus.emit({project, endpoint: endpoints, action, oneEdge: true});
- } else {
- this.dialog.open(EdgeActionDialogComponent, {data: {type: action, item: endpoints}, panelClass: 'modal-sm'})
- .afterClosed().subscribe(endpoint => {
+ const endpoints = project.endpoints.filter(endpoint => {
+ if (action === 'stop') {
+ return endpoint.status === 'RUNNING';
+ }
+ if (action === 'start') {
+ return endpoint.status === 'STOPPED';
+ }
+ if (action === 'terminate') {
+ return endpoint.status === 'RUNNING' || endpoint.status === 'STOPPED';
+ }
+ if (action === 'recreate') {
+ return endpoint.status === 'TERMINATED' || endpoint.status === 'FAILED';
+ }
+ });
+ if (action === 'terminate' && endpoints.length === 1) {
+ this.toggleStatus.emit({ project, endpoint: endpoints, action, oneEdge: true });
+ } else {
+ this.dialog.open(EdgeActionDialogComponent, { data: { type: action, item: endpoints }, panelClass: 'modal-sm' })
+ .afterClosed().subscribe(
+ endpoint => {
if (endpoint && endpoint.length) {
this.toggleStatus.emit({project, endpoint, action});
}
- }, error => this.toastr.error(error.message || `Endpoint ${action} failed!`, 'Oops!')
+ },
+ error => this.toastr.error(error.message || `Endpoint ${action} failed!`, 'Oops!')
);
- }
}
+ }
public areResoursesInStatuses(resources, statuses: Array<string>) {
return resources.some(resource => statuses.some(status => resource.status === status));
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.html
index 76f0be1..22c759d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.html
@@ -25,12 +25,21 @@
matTooltipPosition="above"
[matTooltipDisabled]="healthStatus?.admin"
>
- <button mat-raised-button class="butt butt-create" (click)="createProject()" [disabled]="!projectList.length || !healthStatus?.admin && healthStatus?.projectAdmin">
+ <button
+ mat-raised-button
+ class="butt butt-create"
+ (click)="createProject()"
+ [disabled]="!projectList.length || !healthStatus?.admin && healthStatus?.projectAdmin"
+ >
<i class="material-icons">add</i>Create new
</button>
</div>
<div>
- <button mat-raised-button class="butt butt-tool mr-10" (click)="toggleFiltering()">
+ <button
+ mat-raised-button
+ class="butt butt-tool mr-10"
+ (click)="toggleFiltering()"
+ >
<span *ngIf="!activeFiltering">
<i class="material-icons">visibility_off</i> Show active
</span>
@@ -38,7 +47,12 @@
<i class="material-icons">visibility</i> Show all
</span>
</button>
- <button mat-raised-button class="butt" (click)="refreshGrid()" [hidden]="!projectList.length">
+ <button
+ mat-raised-button
+ class="butt"
+ (click)="refreshGrid()"
+ [hidden]="!projectList.length"
+ >
<i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
@@ -51,8 +65,11 @@
</mat-card>
<div [hidden]="!projectList.length">
- <project-list (editItem)="editProject($event)" (toggleStatus)="toggleStatus($event)" [isProjectAdmin]="!healthStatus?.admin && healthStatus?.projectAdmin">
- </project-list>
+ <project-list
+ (editItem)="editProject($event)"
+ (toggleStatus)="toggleStatus($event)"
+ [isProjectAdmin]="!healthStatus?.admin && healthStatus?.projectAdmin"
+ ></project-list>
</div>
<inform-message [message]="noPermissionMessage" *ngIf="!healthStatus?.admin && healthStatus?.projectAdmin && !projectList.length"></inform-message>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
index a646ebb..1409c7b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.ts
@@ -23,7 +23,7 @@
import { ToastrService } from 'ngx-toastr';
import { ProjectDataService } from './project-data.service';
-import {HealthStatusService, ProjectService, UserResourceService} from '../../core/services';
+import {HealthStatusService, ProjectService } from '../../core/services';
import { NotificationDialogComponent } from '../../shared/modal-dialog/notification-dialog';
import { ProjectListComponent } from './project-list/project-list.component';
import { EnvironmentsDataService } from '../management/management-data.service';
@@ -72,10 +72,11 @@
ngOnInit() {
this.getEnvironmentHealthStatus();
- this.subscriptions.add(this.projectDataService._projects.subscribe(
- (value: Project[]) => {
+ this.subscriptions.add(this.projectDataService._projects
+ .subscribe((value: Project[]) => {
if (value) this.projectList = value;
- }));
+ })
+ );
this.refreshGrid();
this.getResources();
}
@@ -85,9 +86,10 @@
}
private getResources() {
- this.environmentsDataService.getEnvironmentDataDirect().subscribe((data: any) => {
- this.resources = data;
- });
+ this.environmentsDataService.getEnvironmentDataDirect()
+ .subscribe((data: any) => {
+ this.resources = data;
+ });
}
refreshGrid() {
@@ -105,9 +107,7 @@
public toggleFiltering(): void {
this.activeFiltering = !this.activeFiltering;
-
this.activeFiltering ? this.list.showActiveInstances() : this.projectDataService.updateProjects();
-
}
public editProject($event) {
@@ -143,7 +143,8 @@
this.edgeNodeAction(data, action);
} else {
this.dialog.open(NotificationDialogComponent, { data: {
- type: 'terminateNode', item: {action: data, resources: termResources}
+ type: 'terminateNode',
+ item: {action: data, resources: termResources}
}, panelClass: 'modal-sm' })
.afterClosed().subscribe(result => {
result && this.edgeNodeAction(data, action);
@@ -155,12 +156,16 @@
}
private edgeNodeAction(data, action) {
- this.projectService.toggleProjectStatus(data, action).subscribe(() => {
- this.refreshGrid();
- this.toastr.success(`Edge node ${this.toEndpointAction(action)} is in progress!`, 'Processing!');
- }, error => {
- this.toastr.error(error.message, 'Oops!');
- });
+ this.projectService.toggleProjectStatus(data, action)
+ .subscribe(
+ () => {
+ this.refreshGrid();
+ this.toastr.success(`Edge node ${this.toEndpointAction(action)} is in progress!`, 'Processing!');
+ },
+ error => {
+ this.toastr.error(error.message, 'Oops!');
+ }
+ );
}
private getEnvironmentHealthStatus() {
@@ -169,15 +174,10 @@
}
private toEndpointAction(action) {
- if (action === 'start') {
- return 'starting';
- } else if (action === 'stop') {
- return 'stopping';
- } else if (action === 'terminate') {
- return 'terminating';
- } else {
- return action;
- }
+ if (action === 'start') return 'starting';
+ else if (action === 'stop') return 'stopping';
+ else if (action === 'terminate') return 'terminating';
+ else return action;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
index 400048c..c5d04a7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
@@ -23,8 +23,12 @@
matTooltipPosition="above"
[matTooltipDisabled]="healthStatus?.admin"
>
- <button mat-raised-button class="butt add-group" (click)="stepperView = !stepperView" [disabled]="!healthStatus?.admin"
- >
+ <button
+ mat-raised-button
+ class="butt add-group"
+ (click)="stepperView = !stepperView"
+ [disabled]="!healthStatus?.admin"
+ >
<i class="material-icons">people_outline</i>Add group
</button>
</div>
@@ -36,19 +40,35 @@
<mat-step [completed]='false'>
<ng-template matStepLabel>Groups</ng-template>
<div class="inner-step mat-reset">
- <input [validator]="groupValidation()" type="text" placeholder="Enter group name" [(ngModel)]="setupGroup"
- #setupGroupName="ngModel">
- <div class="error" *ngIf="setupGroupName.errors?.patterns && setupGroupName.dirty">Group name can only
- contain letters, numbers, hyphens and '_'.</div>
- <div class="error" *ngIf="setupGroupName.errors?.duplicate && setupGroupName.dirty">Group name already
- exists.</div>
- <div class="error" *ngIf="setupGroupName.errors?.long">Group name cannot be longer than {{maxGroupLength}} characters.</div>
+ <input
+ [validator]="groupValidation()"
+ type="text"
+ placeholder="Enter group name"
+ [(ngModel)]="setupGroup"
+ #setupGroupName="ngModel"
+ />
+ <div class="error" *ngIf="setupGroupName.errors?.patterns && setupGroupName.dirty">
+ Group name can only contain letters, numbers, hyphens and '_'.
+ </div>
+ <div class="error" *ngIf="setupGroupName.errors?.duplicate && setupGroupName.dirty">
+ Group name already exists.
+ </div>
+ <div class="error" *ngIf="setupGroupName.errors?.long">
+ Group name cannot be longer than {{maxGroupLength}} characters.
+ </div>
</div>
<div class="text-center m-bott-10">
- <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button>
- <button mat-raised-button
- matStepperNext class="butt"
- [disabled]="!setupGroup || setupGroupName.errors?.long || setupGroupName.errors?.duplicate || setupGroupName.errors?.patterns"
+ <button
+ mat-raised-button
+ (click)="resetDialog()"
+ class="butt"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ matStepperNext class="butt"
+ [disabled]="!setupGroup || setupGroupName.errors?.long || setupGroupName.errors?.duplicate || setupGroupName.errors?.patterns"
>
Next
<i class="material-icons arrow-icon">keyboard_arrow_right</i>
@@ -59,14 +79,20 @@
<mat-step [completed]='false'>
<ng-template matStepLabel>Users</ng-template>
<div class="inner-step mat-reset">
- <input type="text" placeholder="Enter user login" [(ngModel)]="setupUser">
+ <input type="text" placeholder="Enter user login" [(ngModel)]="setupUser" />
</div>
<div class="text-center m-bott-10">
- <button mat-raised-button matStepperPrevious class="butt"><i
- class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button>
- <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button>
- <button mat-raised-button matStepperNext class="butt">Next<i
- class="material-icons arrow-icon">keyboard_arrow_right</i></button>
+ <button mat-raised-button matStepperPrevious class="butt">
+ <i class="material-icons arrow-icon">keyboard_arrow_left</i>
+ Back
+ </button>
+ <button mat-raised-button (click)="resetDialog()" class="butt">
+ Cancel
+ </button>
+ <button mat-raised-button matStepperNext class="butt">
+ Next
+ <i class="material-icons arrow-icon">keyboard_arrow_right</i>
+ </button>
</div>
</mat-step>
@@ -80,16 +106,29 @@
[items]="rolesList"
[model]="setupRoles"
[isAdmin]="healthStatus?.admin"
- >
- </multi-level-select-dropdown>
+ ></multi-level-select-dropdown>
</div>
</div>
<div class="text-center m-bott-10">
- <button mat-raised-button matStepperPrevious class="butt"><i
- class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button>
- <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button>
- <button mat-raised-button (click)="manageAction('create', 'group')" class="butt butt-success"
- [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length">Create</button>
+ <button mat-raised-button matStepperPrevious class="butt">
+ <i class="material-icons arrow-icon">keyboard_arrow_left</i>
+ Back
+ </button>
+ <button
+ mat-raised-button
+ (click)="resetDialog()"
+ class="butt"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ (click)="manageAction('create', 'group')"
+ class="butt butt-success"
+ [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length"
+ >
+ Create
+ </button>
</div>
</mat-step>
@@ -124,8 +163,7 @@
[items]="rolesList"
[model]="element.selected_roles"
[isAdmin]="healthStatus?.admin"
- >
- </multi-level-select-dropdown>
+ ></multi-level-select-dropdown>
</div>
</td>
</ng-container>
@@ -134,10 +172,27 @@
<th mat-header-cell *matHeaderCellDef class="users"> Users </th>
<td mat-cell *matCellDef="let element" class="users-list ani">
<mat-form-field class="chip-list">
- <input #user matInput placeholder="Enter user login" pattern="[@.-_0-9a-zA-Z]"
- (keydown.enter)="addUser(user, element);" (keyup)="checkIfUserAdded(element, user.value)">
- <button mat-icon-button matSuffix (click)="addUser(user, element); user.value = ''" [disabled]="element.isUserAdded">
- <mat-icon matTooltip="User is already added to this group" matTooltipPosition="above" [matTooltipDisabled]="!element.isUserAdded">person_add</mat-icon>
+ <input
+ #user
+ matInput
+ placeholder="Enter user login"
+ pattern="[@.-_0-9a-zA-Z]"
+ (keydown.enter)="addUser(user, element);"
+ (keyup)="checkIfUserAdded(element, user.value)"
+ />
+ <button
+ mat-icon-button
+ matSuffix
+ (click)="addUser(user, element); user.value = ''"
+ [disabled]="element.isUserAdded"
+ >
+ <mat-icon
+ matTooltip="User is already added to this group"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!element.isUserAdded"
+ >
+ person_add
+ </mat-icon>
</button>
</mat-form-field>
<div class="list-selected list-container ani">
@@ -163,7 +218,8 @@
<th mat-header-cell *matHeaderCellDef class="actions"></th>
<td mat-cell *matCellDef="let element" class="actions">
<div class="actions-wrapper">
- <span class="action-disabled"
+ <span
+ class="action-disabled"
matTooltip="Only admin can delete group."
matTooltipPosition="above"
[matTooltipDisabled]="healthStatus?.admin"
@@ -172,16 +228,19 @@
(click)="manageAction('delete', 'group', element)"
class="reset ani"
[ngClass]="{ 'not-allowed' : !healthStatus?.admin}"
-
>
- <mat-icon >delete_forever</mat-icon>
- </span>
+ <mat-icon >delete_forever</mat-icon>
+ </span>
</span>
- <span class="apply ani big-icon" matTooltip="Group cannot be updated without any selected role"
- matTooltipPosition="above" [matTooltipDisabled]="element.selected_roles.length > 0"
+ <span
+ class="apply ani big-icon"
+ matTooltip="Group cannot be updated without any selected role"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="element.selected_roles.length > 0"
[ngClass]="{ 'not-allowed' : !element.selected_roles.length || isGroupChanded(element)}"
- (click)="manageAction('update', 'group', element)">
+ (click)="manageAction('update', 'group', element)"
+ >
<mat-icon [ngClass]="{'big-icon': !isGroupChanded(element) && element.selected_roles.length}">done</mat-icon>
</span>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
index 993d387..a429649 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
@@ -22,15 +22,15 @@
}
.caret {
+ position: absolute;
+ top: 0px;
+ right: 0;
width: 40px;
+ height: 36px;
color: #4ab8dc;
+ background-color: #fff;
border: none;
border-left: 1px solid #ececec;
- background-color: #fff;
- position: absolute;
- right: 0;
- top: 0px;
- height: 36px;
line-height: 1;
cursor: pointer;
@@ -40,8 +40,8 @@
}
.content-box {
- padding: 20px 30px 35px;
height: 85vh;
+ padding: 20px 30px 35px;
overflow-y: auto;
}
@@ -54,13 +54,13 @@
margin-top: 10px;
.inner-step {
- height: 70px;
- padding: 5px;
+ position: relative;
display: flex;
justify-content: center;
flex-direction: column;
+ height: 70px;
+ padding: 5px;
text-align: center;
- position: relative;
input {
width: 490px;
@@ -88,7 +88,7 @@
}
}
-.mat-horizontal-content-container{
+.mat-horizontal-content-container {
overflow: visible !important;
}
@@ -98,11 +98,11 @@
width: 490px;
height: 32px;
padding-left: 0;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 300;
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);
- multi-level-select-dropdown{
+ multi-level-select-dropdown {
width: 100%;
}
mat-form-field {
@@ -120,7 +120,7 @@
.dropdown-multiselect {
width: 100% !important;
- >button {
+ > button {
padding: 6px 22px;
}
}
@@ -131,11 +131,11 @@
}
.scrolling-content {
+ display: block;
max-height: 450px;
+ padding: 15px 5px;
overflow-x: hidden;
overflow-y: auto;
- display: block;
- padding: 15px 5px;
&.stepper-opened {
height: 250px;
@@ -143,7 +143,6 @@
}
.roles {
-
.selector-wrapper-edit {
position: relative;
display: flex;
@@ -157,7 +156,7 @@
width: 100%;
.dropdown-multiselect {
- >button {
+ > button {
padding: 8px 22px 5px;
}
}
@@ -165,7 +164,7 @@
.caret {
&:hover {
- box-shadow: 0 3px 1px -10px rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.17), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
+ box-shadow: 0 3px 1px -10px rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.17), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
}
}
@@ -181,29 +180,28 @@
}
.users-list {
+ position: relative;
padding: 5px 10px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 300;
color: #577289;
- position: relative;
i {
- color: #FF5722;
+ color: #ff5722;
font-size: 18px;
cursor: pointer;
}
.list-selected {
width: 100%;
- margin-top: 50px;
height: inherit;
min-height: 0;
+ margin-top: 50px;
overflow: hidden;
}
}
-
.expanded-panel {
display: flex;
align-items: flex-end;
@@ -217,9 +215,9 @@
input {
height: 36px;
+ width: 170px;
padding: 0;
padding-left: 10px;
- width: 170px;
}
.caret {
@@ -228,10 +226,9 @@
}
}
-
mat-expansion-panel-header {
&.mat-expansion-panel-header {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 300;
color: #577289;
@@ -244,7 +241,7 @@
}
.mat-step-label {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 300;
}
@@ -274,19 +271,19 @@
}
}
-.mat-chip-list{
+.mat-chip-list {
pointer-events: auto;
}
.mat-chip:not(.mat-basic-chip) {
- transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
+ position: relative;
+ display: inline-block;
+ max-width: 100%;
padding: 7px 25px 7px 10px;
+ transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 24px;
cursor: default;
- display: inline-block;
- position: relative; ;
white-space: nowrap;
- max-width: 100%;
overflow: hidden;
}
@@ -351,7 +348,7 @@
max-width: 200px;
padding-right: 10px;
overflow: hidden;
- span{
+ span {
cursor: default;
}
}
@@ -361,32 +358,32 @@
}
.actions {
- color: #607d8b;
width: 10%;
+ color: #607d8b;
text-align: center;
- .actions-wrapper{
- height: 41px;
+ .actions-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
+ height: 41px;
}
span {
- transition: all .35s ease-in-out;
+ transition: all 0.35s ease-in-out;
cursor: pointer;
- &.action-disabled{
+ &.action-disabled {
cursor: not-allowed;
}
.mat-icon {
font-size: 18px;
padding-top: 12px;
- &.big-icon{
+ &.big-icon {
font-size: 25px;
padding-top: 10px;
- transition: .25s;
+ transition: 0.25s;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
index 6729729..dc119c7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
@@ -17,15 +17,16 @@
* under the License.
*/
-import {Component, OnInit, Output, EventEmitter, Inject, ViewChild} from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Inject } from '@angular/core';
import { ValidatorFn, FormControl } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
-import {RolesGroupsService, HealthStatusService, ApplicationSecurityService, AppRoutingService} from '../../core/services';
-import {CheckUtils, SortUtils} from '../../core/util';
+
+import { RolesGroupsService, HealthStatusService, ApplicationSecurityService, AppRoutingService } from '../../core/services';
+import { CheckUtils, SortUtils } from '../../core/util';
import { DICTIONARY } from '../../../dictionary/global.dictionary';
-import {ProgressBarService} from '../../core/services/progress-bar.service';
-import {ConfirmationDialogComponent, ConfirmationDialogType} from '../../shared/modal-dialog/confirmation-dialog';
+import { ProgressBarService } from '../../core/services/progress-bar.service';
+import { ConfirmationDialogComponent, ConfirmationDialogType } from '../../shared/modal-dialog/confirmation-dialog';
@Component({
selector: 'datalab-roles',
@@ -35,6 +36,10 @@
export class RolesComponent implements OnInit {
readonly DICTIONARY = DICTIONARY;
+ @Output() manageRolesGroupAction: EventEmitter<{}> = new EventEmitter();
+
+ private startedGroups: Array<any>;
+
public groupsData: Array<any> = [];
public roles: Array<any> = [];
public rolesList: Array<any> = [];
@@ -46,13 +51,11 @@
public healthStatus: any;
public delimitersRegex = /[-_]?/g;
public groupnamePattern = new RegExp(/^[a-zA-Z0-9_\-]+$/);
+ public noPermissionMessage: string = 'You have not permissions for groups which are not assigned to your projects.';
+ public maxGroupLength: number = 25;
stepperView: boolean = false;
displayedColumns: string[] = ['name', 'roles', 'users', 'actions'];
- @Output() manageRolesGroupAction: EventEmitter<{}> = new EventEmitter();
- private startedGroups: Array<any>;
- public noPermissionMessage: string = 'You have not permissions for groups which are not assigned to your projects.';
- public maxGroupLength: number = 25;
constructor(
public toastr: ToastrService,
@@ -74,45 +77,57 @@
this.rolesService.getRolesData().subscribe(
(roles: any) => {
this.roles = roles;
- this.rolesList = roles.map((role) => {
- return {role: role.description, type: role.type, cloud: role.cloud};
- });
+ this.rolesList = roles.map((role) => ({
+ role: role.description,
+ type: role.type,
+ cloud: role.cloud
+ }));
this.rolesList = SortUtils.sortByKeys(this.rolesList, ['role', 'cloud', 'type']);
this.updateGroupData(groups);
this.stepperView = false;
},
error => this.toastr.error(error.message, 'Oops!'));
- this.progressBarService.stopProgressBar();
- },
- error => {
- this.toastr.error(error.message, 'Oops!');
this.progressBarService.stopProgressBar();
- });
+ },
+ error => {
+ this.toastr.error(error.message, 'Oops!');
+ this.progressBarService.stopProgressBar();
+ }
+ );
}
getGroupsData() {
- this.rolesService.getGroupsData().subscribe(
- list => this.updateGroupData(list),
- error => this.toastr.error(error.message, 'Oops!'));
+ this.rolesService.getGroupsData()
+ .subscribe(
+ list => this.updateGroupData(list),
+ error => this.toastr.error(error.message, 'Oops!')
+ );
}
public selectAllOptions(item, values, byKey?) {
- byKey ? (item[byKey] = values ? values : []) : this.setupRoles = values ? values : [];
+ if (byKey) {
+ item[byKey] = values ? values : [];
+ } else {
+ this.setupRoles = values ? values : [];
+ }
}
public manageAction(action: string, type: string, item?: any, value?) {
if (action === 'create') {
- this.manageRolesGroups(
- {
- action, type, value: {
- name: this.setupGroup,
- users: this.setupUser ? this.setupUser.split(',').map(elem => elem.trim()).filter(el => !!el) : [],
- roleIds: this.extractIds(this.roles, this.setupRoles.map(v => v.role))
- }
- });
+ this.manageRolesGroups({
+ action,
+ type,
+ value: {
+ name: this.setupGroup,
+ users: this.setupUser ? this.setupUser.split(',').map(elem => elem.trim()).filter(el => !!el) : [],
+ roleIds: this.extractIds(this.roles, this.setupRoles.map(v => v.role))
+ }
+ });
this.stepperView = false;
} else if (action === 'delete') {
- const data = (type === 'users') ? { group: item.group, user: value } : { group: item.group, id: item };
+ const data = (type === 'users')
+ ? { group: item.group, user: value }
+ : { group: item.group, id: item };
const dialogRef: MatDialogRef<ConfirmDeleteUserAccountDialogComponent> = this.dialog.open(
ConfirmDeleteUserAccountDialogComponent,
{ data: data, width: '550px', panelClass: 'error-modalbox' }
@@ -128,28 +143,34 @@
});
} else if (action === 'update') {
const currGroupSource = this.startedGroups.filter(cur => cur.group === item.group)[0];
- let deletedUsers = currGroupSource.users.filter(user => {
- return !item.users.includes(user);
- });
- this.dialog.open(ConfirmationDialogComponent, { data:
- { notebook: deletedUsers, type: ConfirmationDialogType.deleteUser }, panelClass: 'modal-sm' })
+ let deletedUsers = currGroupSource.users.filter(user => !item.users.includes(user));
+
+ this.dialog.open(ConfirmationDialogComponent, {
+ data: {
+ notebook: deletedUsers,
+ type: ConfirmationDialogType.deleteUser
+ },
+ panelClass: 'modal-sm'
+ })
.afterClosed().subscribe((res) => {
- if (!res) {
- item.users = [...currGroupSource.users];
- item.selected_roles = [...currGroupSource.selected_roles];
- item.roles = [...currGroupSource.roles];
- } else {
- const selectedRoles = item.selected_roles.map(v => v.role);
- this.manageRolesGroups({
- action, type, value: {
- name: item.group,
- roles: this.extractIds(this.roles, selectedRoles),
- users: item.users || []
- }
- });
- }
- deletedUsers = [];
- });
+ if (!res) {
+ item.users = [...currGroupSource.users];
+ item.selected_roles = [...currGroupSource.selected_roles];
+ item.roles = [...currGroupSource.roles];
+ } else {
+ const selectedRoles = item.selected_roles.map(v => v.role);
+ this.manageRolesGroups({
+ action,
+ type,
+ value: {
+ name: item.group,
+ roles: this.extractIds(this.roles, selectedRoles),
+ users: item.users || []
+ }
+ });
+ }
+ deletedUsers = [];
+ });
}
this.resetDialog();
}
@@ -157,31 +178,42 @@
public manageRolesGroups($event) {
switch ($event.action) {
case 'create':
- this.rolesService.setupNewGroup($event.value).subscribe(() => {
- this.toastr.success('Group creation success!', 'Created!');
- this.getGroupsData();
- }, () => this.toastr.error('Group creation failed!', 'Oops!'));
+ this.rolesService.setupNewGroup($event.value)
+ .subscribe(
+ () => {
+ this.toastr.success('Group creation success!', 'Created!');
+ this.getGroupsData();
+ },
+ () => this.toastr.error('Group creation failed!', 'Oops!'));
break;
case 'update':
- this.rolesService.updateGroup($event.value).subscribe(() => {
- this.toastr.success(`Group data is updated successfully!`, 'Success!');
- this.openManageRolesDialog();
- }, (re) => this.toastr.error('Failed group data updating!', 'Oops!'));
-
+ this.rolesService.updateGroup($event.value)
+ .subscribe(
+ () => {
+ this.toastr.success(`Group data is updated successfully!`, 'Success!');
+ this.openManageRolesDialog();
+ },
+ () => this.toastr.error('Failed group data updating!', 'Oops!'));
break;
case 'delete':
if ($event.type === 'users') {
- this.rolesService.removeUsersForGroup($event.value).subscribe(() => {
- this.toastr.success('Users was successfully deleted!', 'Success!');
- this.getGroupsData();
- }, () => this.toastr.error('Failed users deleting!', 'Oops!'));
+ this.rolesService.removeUsersForGroup($event.value)
+ .subscribe(
+ () => {
+ this.toastr.success('Users was successfully deleted!', 'Success!');
+ this.getGroupsData();
+ },
+ () => this.toastr.error('Failed users deleting!', 'Oops!'));
} else if ($event.type === 'group') {
- this.rolesService.removeGroupById($event.value).subscribe(() => {
- this.toastr.success('Group was successfully deleted!', 'Success!');
- this.getGroupsData();
- }, (error) => this.toastr.error(error.message, 'Oops!'));
+ this.rolesService.removeGroupById($event.value)
+ .subscribe(
+ () => {
+ this.toastr.success('Group was successfully deleted!', 'Success!');
+ this.getGroupsData();
+ },
+ (error) => this.toastr.error(error.message, 'Oops!'));
}
break;
@@ -197,7 +229,11 @@
return v;
}).sort((a, b) => (a.group > b.group) ? 1 : ((b.group > a.group) ? -1 : 0));
this.groupsData.forEach(item => {
- const selectedRoles = item.roles.map(role => ({role: role.description, type: role.type, cloud: role.cloud}));
+ const selectedRoles = item.roles.map(role => ({
+ role: role.description,
+ type: role.type,
+ cloud: role.cloud
+ }));
item.selected_roles = SortUtils.sortByKeys(selectedRoles, ['role', 'type']);
});
this.getGroupsListCopy();
@@ -206,7 +242,7 @@
public extractIds(sourceList, target) {
const map = new Map();
const mapped = sourceList.reduce((acc, item) => {
- target.includes(item.description) && acc.set( item._id, item.description);
+ target.includes(item.description) && acc.set(item._id, item.description);
return acc;
}, map);
@@ -216,7 +252,7 @@
mapToObj(inputMap) {
const obj = {};
- inputMap.forEach(function(value, key) {
+ inputMap.forEach((value, key) => {
obj[key] = value;
});
@@ -247,17 +283,17 @@
public isGroupChanded(currGroup) {
const currGroupSource = this.startedGroups.filter(cur => cur.group === currGroup.group)[0];
- if (currGroup.users.length !== currGroupSource.users.length &&
- currGroup.selected_roles.length !== currGroupSource.selected_roles.length) {
- return false;
- }
- return JSON.stringify(currGroup.users) === JSON.stringify(currGroupSource.users) &&
- JSON.stringify(
- currGroup.selected_roles.map(role => role.role).sort()
- ) === JSON
- .stringify(
- currGroupSource.selected_roles.map(role => role.role).sort()
- );
+ if (currGroup.users.length !== currGroupSource.users.length &&
+ currGroup.selected_roles.length !== currGroupSource.selected_roles.length) {
+ return false;
+ }
+ return JSON.stringify(currGroup.users) === JSON.stringify(currGroupSource.users) &&
+ JSON.stringify(
+ currGroup.selected_roles.map(role => role.role).sort()
+ ) === JSON
+ .stringify(
+ currGroupSource.selected_roles.map(role => role.role).sort()
+ );
}
public resetDialog() {
@@ -288,29 +324,29 @@
this.healthStatusService.getEnvironmentHealthStatus()
.subscribe((result: any) => {
this.healthStatus = result;
- if (!this.healthStatus.admin && !this.healthStatus.projectAdmin) {
- this.appRoutingService.redirectToHomePage();
- } else {
- this.openManageRolesDialog();
- }
- }
- );
+ if (!this.healthStatus.admin && !this.healthStatus.projectAdmin) {
+ this.appRoutingService.redirectToHomePage();
+ } else {
+ this.openManageRolesDialog();
+ }
+ });
}
public onUpdate($event): void {
- if ($event.type) {
- this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model;
- } else {
- this.setupRoles = $event.model;
- }
+ if ($event.type) {
+ this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model;
+ } else {
+ this.setupRoles = $event.model;
+ }
}
public checkIfUserAdded(element: any, value: string) {
- element.isUserAdded = element.users.map(v => v.toLowerCase()).includes(value.toLowerCase());
+ element.isUserAdded = element.users
+ .map(v => v.toLowerCase())
+ .includes(value.toLowerCase());
}
}
-
@Component({
selector: 'dialog-result-example-dialog',
template: `
@@ -320,14 +356,33 @@
</div>
<div mat-dialog-content class="content">
- <p *ngIf="data.user">User <span class="strong">{{ data.user }}</span> will be deleted from <span class="strong">{{ data.group }}</span> group.
+ <p *ngIf="data.user">User <span class="strong">
+ {{ data.user }}</span> will be deleted from <span class="strong">{{ data.group }}</span> group.
</p>
- <p *ngIf="data.id">Group <span class="ellipsis group-name strong">{{ data.group }}</span> will be decommissioned.</p>
- <p class="m-top-20"><span class="strong">Do you want to proceed?</span></p>
+ <p *ngIf="data.id">Group <span class="ellipsis group-name strong">
+ {{ data.group }}</span> will be decommissioned.
+ </p>
+ <p class="m-top-20">
+ <span class="strong">Do you want to proceed?</span>
+ </p>
</div>
<div class="text-center">
- <button type="button" class="butt" mat-raised-button (click)="dialogRef.close()">No</button>
- <button type="button" class="butt butt-success" mat-raised-button (click)="dialogRef.close(true)">Yes</button>
+ <button
+ type="button"
+ class="butt"
+ mat-raised-button
+ (click)="dialogRef.close()"
+ >
+ No
+ </button>
+ <button
+ type="button"
+ class="butt butt-success"
+ mat-raised-button
+ (click)="dialogRef.close(true)"
+ >
+ Yes
+ </button>
</div>
`,
styles: [`.group-name { max-width: 96%; display: inline-block; vertical-align: bottom; }`]
@@ -338,4 +393,4 @@
public dialogRef: MatDialogRef<ConfirmDeleteUserAccountDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
-}
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
index d7990bd..d166b7d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts
@@ -38,77 +38,90 @@
import {OdahuComponent} from './administration/odahu/odahu.component';
import {AuditComponent} from './reports/audit/audit.component';
-const routes: Routes = [{
- path: 'login',
- component: LoginComponent
-}, {
- path: '',
- canActivate: [CheckParamsGuard],
- component: LayoutComponent,
- children: [
- {
- path: '',
- redirectTo: 'resources_list',
- pathMatch: 'full'
- }, {
- path: 'resources_list',
- component: ResourcesComponent,
- canActivate: [AuthorizationGuard]
- }, {
- path: 'billing_report',
- component: ReportingComponent,
- canActivate: [AuthorizationGuard, CloudProviderGuard]
- }, {
- path: 'projects',
- component: ProjectComponent,
- canActivate: [AuthorizationGuard, AdminGuard],
- },
- {
- // path: 'odahu',
- // component: OdahuComponent,
- // canActivate: [AuthorizationGuard, AdminGuard],
- // }, {
- path: 'roles',
- component: RolesComponent,
- canActivate: [AuthorizationGuard, AdminGuard],
- }, {
- path: 'environment_management',
- component: ManagementComponent,
- canActivate: [AuthorizationGuard, AdminGuard]
- }, {
- path: 'configuration',
- component: ConfigurationComponent,
- canActivate: [AuthorizationGuard, AdminGuard, ProjectAdminGuard]
- },
- {
- path: 'swagger',
- component: SwaggerComponent,
- canActivate: [AuthorizationGuard]
- }, {
- path: 'help/publickeyguide',
- component: PublicKeyGuideComponent,
- canActivate: [AuthorizationGuard]
- }, {
- path: 'help/accessnotebookguide',
- component: AccessNotebookGuideComponent,
- canActivate: [AuthorizationGuard]
- },
- {
- path: 'audit',
- component: AuditComponent,
- canActivate: [AuthorizationGuard, AuditGuard],
- },
- ]
-}, {
- path: 'terminal/:id/:endpoint',
- component: WebterminalComponent
-}, {
- path: '403',
- component: AccessDeniedComponent,
- canActivate: [AuthorizationGuard]
-}, {
+const routes: Routes = [
+ {
+ path: 'login',
+ component: LoginComponent
+ },
+ {
+ path: '',
+ canActivate: [CheckParamsGuard],
+ component: LayoutComponent,
+ children: [
+ {
+ path: '',
+ redirectTo: 'resources_list',
+ pathMatch: 'full'
+ },
+ {
+ path: 'resources_list',
+ component: ResourcesComponent,
+ canActivate: [AuthorizationGuard]
+ },
+ {
+ path: 'billing_report',
+ component: ReportingComponent,
+ canActivate: [AuthorizationGuard, CloudProviderGuard]
+ },
+ {
+ path: 'projects',
+ component: ProjectComponent,
+ canActivate: [AuthorizationGuard, AdminGuard],
+ },
+ {
+ // path: 'odahu',
+ // component: OdahuComponent,
+ // canActivate: [AuthorizationGuard, AdminGuard],
+ // }, {
+ path: 'roles',
+ component: RolesComponent,
+ canActivate: [AuthorizationGuard, AdminGuard],
+ },
+ {
+ path: 'environment_management',
+ component: ManagementComponent,
+ canActivate: [AuthorizationGuard, AdminGuard]
+ },
+ {
+ path: 'configuration',
+ component: ConfigurationComponent,
+ canActivate: [AuthorizationGuard, AdminGuard, ProjectAdminGuard]
+ },
+ {
+ path: 'swagger',
+ component: SwaggerComponent,
+ canActivate: [AuthorizationGuard]
+ },
+ {
+ path: 'help/publickeyguide',
+ component: PublicKeyGuideComponent,
+ canActivate: [AuthorizationGuard]
+ },
+ {
+ path: 'help/accessnotebookguide',
+ component: AccessNotebookGuideComponent,
+ canActivate: [AuthorizationGuard]
+ },
+ {
+ path: 'audit',
+ component: AuditComponent,
+ canActivate: [AuthorizationGuard, AuditGuard],
+ },
+ ]
+ },
+ {
+ path: 'terminal/:id/:endpoint',
+ component: WebterminalComponent
+ },
+ {
+ path: '403',
+ component: AccessDeniedComponent,
+ canActivate: [AuthorizationGuard]
+ },
+ {
path: '**',
component: NotFoundComponent
-}];
+ }
+];
export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(routes, { useHash: true });
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/directives/click-outside.directive.ts b/services/self-service/src/main/resources/webapp/src/app/core/directives/click-outside.directive.ts
index 5ad3baa..ad34ab2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/directives/click-outside.directive.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/directives/click-outside.directive.ts
@@ -18,14 +18,11 @@
*/
-import {fromEvent as observableFromEvent, Observable } from 'rxjs';
+import { fromEvent as observableFromEvent } from 'rxjs';
-import {tap, delay} from 'rxjs/operators';
+import { tap, delay } from 'rxjs/operators';
import { Directive, OnInit, OnDestroy, Output, EventEmitter, ElementRef } from '@angular/core';
-
-
-
@Directive({
selector: '[clickOutside]'
})
@@ -79,4 +76,4 @@
}
return false;
}
-}
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/directives/scrollTo.directive.ts b/services/self-service/src/main/resources/webapp/src/app/core/directives/scrollTo.directive.ts
index fb6e0c3..7160489 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/directives/scrollTo.directive.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/directives/scrollTo.directive.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import { ElementRef, HostBinding, Input } from '@angular/core';
+import { ElementRef, Input } from '@angular/core';
import { Directive } from '@angular/core';
@Directive({
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 ac57d6c..e60be4e 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
@@ -60,7 +60,8 @@
this.jwtService.destroyTokens();
return throwError(error);
}
- }));
+ })
+ );
}
private addToken(request: HttpRequest<any>, token: string) {
@@ -92,4 +93,4 @@
if (error.url.indexOf('refresh') > -1) this.routingService.redirectToLoginPage();
return next.handle(request);
}
-}
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/interceptors/http.token.interceptor.ts b/services/self-service/src/main/resources/webapp/src/app/core/interceptors/http.token.interceptor.ts
index 5b6309a..acd92fa 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/interceptors/http.token.interceptor.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/interceptors/http.token.interceptor.ts
@@ -18,10 +18,10 @@
*/
import { Injectable } from '@angular/core';
-import { StorageService } from '../services';
+import { Observable } from 'rxjs';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { StorageService } from '../services';
@Injectable() export class HttpTokenInterceptor implements HttpInterceptor {
constructor(private jwtService: StorageService) { }
@@ -30,16 +30,18 @@
const token = this.jwtService.getToken();
const headersConfig = {};
- if (token)
+ if (token) {
headersConfig['Authorization'] = `Bearer ${token}`;
+ }
if (!request.headers.has('Content-Type')
&& !request.headers.has('Upload')
&& request.url.indexOf('upload') === -1
&& request.url.indexOf('download') === -1
&& request.url.indexOf('admin') === -1
- )
- headersConfig['Content-Type'] = 'application/json; charset=UTF-8';
+ ) {
+ headersConfig['Content-Type'] = 'application/json; charset=UTF-8';
+ }
const header = request.clone({ setHeaders: headersConfig });
return next.handle(header);
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceApplicationTemplate.model.ts b/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceApplicationTemplate.model.ts
index 4833bba..8818179 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceApplicationTemplate.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceApplicationTemplate.model.ts
@@ -36,9 +36,10 @@
this.template_name = template_name;
this.description = description;
- if (jsonModel.applications && jsonModel.applications.length > 0)
- for (let index = 0; index < jsonModel.applications.length; index++)
+ if (jsonModel.applications && jsonModel.applications.length > 0) {
+ for (let index = 0; index < jsonModel.applications.length; index++) {
this.applications.push(new ComputationalResourceApplication(jsonModel.applications[index]));
-
+ }
+ }
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceImage.model.ts b/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceImage.model.ts
index 102f1dc..b721b26 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceImage.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/models/computationalResourceImage.model.ts
@@ -40,11 +40,16 @@
this.limits = jsonModel.limits;
this.shapes = new ResourceShapeTypesModel(SortUtils.shapesSort(jsonModel.computation_resources_shapes));
- if (jsonModel.templates && jsonModel.templates.length > 0)
- for (let index = 0; index < jsonModel.templates.length; index++)
- this.application_templates.push(
- new ComputationalResourceApplicationTemplate(jsonModel.templates[index],
- this.shapes, this.image, this.template_name, this.description));
-
+ if (jsonModel.templates && jsonModel.templates.length > 0) {
+ for (let index = 0; index < jsonModel.templates.length; index++) {
+ this.application_templates.push(new ComputationalResourceApplicationTemplate(
+ jsonModel.templates[index],
+ this.shapes,
+ this.image,
+ this.template_name,
+ this.description)
+ );
+ }
+ }
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/models/resourceShapeTypes.model.ts b/services/self-service/src/main/resources/webapp/src/app/core/models/resourceShapeTypes.model.ts
index 1f9cda5..b4b93ba 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/models/resourceShapeTypes.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/models/resourceShapeTypes.model.ts
@@ -27,8 +27,9 @@
for (const parentIndex in jsonModel) {
if (jsonModel[parentIndex] && jsonModel[parentIndex].length > 0) {
const tmpl = [];
- for (let index = 0; index < jsonModel[parentIndex].length; index++)
+ for (let index = 0; index < jsonModel[parentIndex].length; index++) {
tmpl.push(new ResourceShapeModel(jsonModel[parentIndex][index]));
+ }
this.resourcesShapeTypes[parentIndex] = tmpl;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/highlight.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/highlight.pipe.ts
index 4770cb3..2e8a10a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/highlight.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/highlight.pipe.ts
@@ -19,13 +19,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import {PipeTransform, Pipe} from '@angular/core';
+import { PipeTransform, Pipe } from '@angular/core';
@Pipe({ name: 'highlight' })
export class HighLightPipe implements PipeTransform {
transform(text: string, search: string): string {
- return search ? text.replace(new RegExp(search, 'i'), function(str) {
- return `<span class="highlight">${str}</span>`; }) : text;
+ return search
+ ? text.replace(new RegExp(search, 'i'), (str) => `<span class="highlight">${str}</span>`)
+ : text;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/lib-sort-pipe/lib-sort.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/lib-sort-pipe/lib-sort.pipe.ts
index e8ba377..e40f85c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/lib-sort-pipe/lib-sort.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/lib-sort-pipe/lib-sort.pipe.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe } from '@angular/core';
@Pipe({name: 'libStatusSort', pure: false})
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-currency-pipe/local-currency.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-currency-pipe/local-currency.pipe.ts
index 41c2988..ab8b094 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-currency-pipe/local-currency.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-currency-pipe/local-currency.pipe.ts
@@ -18,8 +18,8 @@
*/
import { Pipe, PipeTransform } from '@angular/core';
-import {formatCurrency, getCurrencySymbol} from '@angular/common';
-import {LocalizationService} from '../../services/localization.service';
+import { formatCurrency, getCurrencySymbol } from '@angular/common';
+import { LocalizationService } from '../../services/localization.service';
@Pipe({ name: 'localcurrency' })
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/index.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/index.ts
index 2f29b6a..1dbbded 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/index.ts
@@ -19,7 +19,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import {LocalDatePipe} from './local-date.pipe';
+import { LocalDatePipe } from './local-date.pipe';
@NgModule({
imports: [CommonModule],
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/local-date.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/local-date.pipe.ts
index c55953b..d0e51e7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/local-date.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/local-date-pipe/local-date.pipe.ts
@@ -18,8 +18,8 @@
*/
import { Pipe, PipeTransform } from '@angular/core';
-import {LocalizationService} from '../../services/localization.service';
-import {formatDate} from '@angular/common';
+import { LocalizationService } from '../../services/localization.service';
+import { formatDate } from '@angular/common';
@Pipe({ name: 'localDate' })
@@ -27,7 +27,7 @@
constructor(private localizationService: LocalizationService) { }
transform(value: any, format: string = 'shortDate') {
- if (!value) { return ; }
+ if (!value) { return; }
return formatDate(value, format, this.localizationService.locale);
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/long-date.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/long-date.pipe.ts
index ba64e45..0b77648 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/long-date.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/long-date.pipe.ts
@@ -18,8 +18,8 @@
*/
import { Pipe, PipeTransform } from '@angular/core';
-import {LocalizationService} from '../../services/localization.service';
-import {formatDate} from '@angular/common';
+import { LocalizationService } from '../../services/localization.service';
+import { formatDate } from '@angular/common';
@Pipe({ name: 'longDate' })
@@ -27,8 +27,8 @@
constructor(private localizationService: LocalizationService) { }
transform(value: any, format: string = 'full') {
- if (!value) { return ; }
+ if (!value) { return; }
- return formatDate(value, format, (this.localizationService.locale === 'en') ? 'en' : 'en-GB');
+ return formatDate(value, format, (this.localizationService.locale === 'en') ? 'en' : 'en-GB');
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationSecurity.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationSecurity.service.ts
index 1bcd4f8..6108067 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationSecurity.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationSecurity.service.ts
@@ -74,7 +74,8 @@
const refreshToken = `/${this.storage.getRefreshToken()}`;
return this.serviceFacade.buildRefreshToken(refreshToken)
.pipe(
- tap((tokens) => this.storage.storeTokens(tokens)));
+ tap((tokens) => this.storage.storeTokens(tokens))
+ );
}
public logout(): Observable<boolean> {
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
index ed78447..3bb326d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
@@ -725,7 +725,6 @@
this.requestRegistry.Add(ApplicationServiceFacade.SCHEDULER,
'/api/infrastructure_provision/exploratory_environment/scheduler');
-
// Computational Resources
this.requestRegistry.Add(ApplicationServiceFacade.COMPUTATIONAL_RESOURCES,
'/infrastructure_provision/computational_resources');
@@ -786,7 +785,6 @@
this.requestRegistry.Add(ApplicationServiceFacade.AUDIT, '/api/audit');
// configuration
-
this.requestRegistry.Add(ApplicationServiceFacade.CONFIG, '/api/config/multiple');
}
@@ -807,5 +805,4 @@
return this.http.get(body ? (url + body) : url, opt);
}
}
-
-}
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts
index 520f623..23cdc3b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts
@@ -30,21 +30,27 @@
public getAuditData(filterData, page, itemsPrPage) {
let queryString = `?page-number=${page}&page-size=${itemsPrPage}`;
+
if (filterData.projects.length) {
queryString += `&projects=${filterData.projects.join(',')}`;
}
+
if (filterData.resources.length) {
queryString += `&resource-names=${filterData.resources.join(',')}`;
}
+
if (filterData.resource_types.length) {
queryString += `&resource-types=${filterData.resource_types.join(',')}`;
}
+
if (filterData.users.length) {
queryString += `&users=${filterData.users.join(',')}`;
}
+
if (filterData.date_start) {
queryString += `&date-start=${filterData.date_start}`;
}
+
if (filterData.date_end) {
queryString += `&date-end=${filterData.date_end}`;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/authorization.guard.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/authorization.guard.ts
index 93c0fbb..f086f6a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/authorization.guard.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/authorization.guard.ts
@@ -21,14 +21,10 @@
import { map } from 'rxjs/operators';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { ApplicationSecurityService } from './applicationSecurity.service';
-import { AppRoutingService } from './appRouting.service';
@Injectable()
export class AuthorizationGuard implements CanActivate {
- constructor(
- private appRoutingService: AppRoutingService,
- private applicationSecurityService: ApplicationSecurityService
- ) { }
+ constructor(private applicationSecurityService: ApplicationSecurityService) { }
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.applicationSecurityService.isLoggedIn().pipe(
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts
index f412a00..447c0f0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts
@@ -18,10 +18,10 @@
*/
import { Injectable } from '@angular/core';
-import {Observable} from 'rxjs';
-import {catchError, map} from 'rxjs/operators';
-import {ErrorUtils} from '../util';
-import {ApplicationServiceFacade} from './applicationServiceFacade.service';
+import { Observable } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { ErrorUtils } from '../util';
+import { ApplicationServiceFacade } from './applicationServiceFacade.service';
export class TodoItemNode {
children: TodoItemNode[];
@@ -41,8 +41,7 @@
providedIn: 'root'
})
export class BucketBrowserService {
- constructor(private applicationServiceFacade: ApplicationServiceFacade) {
- }
+ constructor(private applicationServiceFacade: ApplicationServiceFacade) { }
public getBucketData(bucket, endpoint): Observable<{}> {
const url = `/${bucket}/endpoint/${endpoint}`;
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/checkParams.guard.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/checkParams.guard.ts
index cc3032d..da042ff 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/checkParams.guard.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/checkParams.guard.ts
@@ -23,16 +23,12 @@
import { map } from 'rxjs/operators';
import { ApplicationSecurityService } from './applicationSecurity.service';
-import { AppRoutingService } from './appRouting.service';
@Injectable()
export class CheckParamsGuard implements CanActivate {
result: any;
- constructor(
- private applicationSecurityService: ApplicationSecurityService,
- private appRoutingService: AppRoutingService
- ) { }
+ constructor(private applicationSecurityService: ApplicationSecurityService) { }
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<boolean> | boolean {
return this.applicationSecurityService.isLoggedIn().pipe(
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts
index 8ab0b7f..5ba030e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/configutration.service.ts
@@ -18,7 +18,7 @@
*/
import { Injectable } from '@angular/core';
-import {Observable, of} from 'rxjs';
+import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { ApplicationServiceFacade } from './applicationServiceFacade.service';
import { ErrorUtils } from '../util';
@@ -38,7 +38,6 @@
public setServiceConfig(service: string, config: string, endpoint: string): Observable<{}> {
const settings = {
-
ymlString: config,
endpointName: endpoint
};
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/healthStatus.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/healthStatus.service.ts
index 204e712..5474cf0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/healthStatus.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/healthStatus.service.ts
@@ -40,12 +40,14 @@
}
public reloadInitialStatusData() {
- this.getEnvironmentHealthStatus().subscribe(
- (res: GeneralEnvironmentStatus) => {
- this._statusData.next(res);
- console.log('reload Initial Status Data');
- },
- err => console.error('Error retrieving status'));
+ this.getEnvironmentHealthStatus()
+ .subscribe(
+ (res: GeneralEnvironmentStatus) => {
+ this._statusData.next(res);
+ console.log('reload Initial Status Data');
+ },
+ err => console.error('Error retrieving status')
+ );
}
public isHealthStatusOk(): Observable<boolean> {
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/odahu-deployment.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/odahu-deployment.service.ts
index cb35758..68c0a83 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/odahu-deployment.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/odahu-deployment.service.ts
@@ -47,9 +47,9 @@
public odahuAction(data, action) {
return this.applicationServiceFacade
- .odahuStartStop(data, action)
- .pipe(
- map(response => response),
- catchError(ErrorUtils.handleServiceError));
+ .odahuStartStop(data, action)
+ .pipe(
+ map(response => response),
+ catchError(ErrorUtils.handleServiceError));
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts
index 095d937..e52eaca 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts
@@ -17,9 +17,8 @@
* under the License.
*/
-import {ApplicationRef, ChangeDetectorRef, Injectable} from '@angular/core';
-import {BehaviorSubject, Subject, timer} from 'rxjs';
-import {take} from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, timer} from 'rxjs';
@Injectable({
providedIn: 'root'
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/project.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/project.service.ts
index e912503..ccf93f8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/project.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/project.service.ts
@@ -19,11 +19,10 @@
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
-import {map, catchError, tap} from 'rxjs/operators';
+import { map, catchError } from 'rxjs/operators';
import { ApplicationServiceFacade } from './applicationServiceFacade.service';
import { ErrorUtils } from '../util';
-import {logger} from 'codelyzer/util/logger';
@Injectable()
export class ProjectService {
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/userAccessKey.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/userAccessKey.service.ts
index 81e8008..a48219f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/userAccessKey.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/userAccessKey.service.ts
@@ -40,12 +40,15 @@
}
public initialUserAccessKeyCheck() {
- this.checkUserAccessKey().subscribe(
- response => {
- this._accessKeyEmitter.next(response);
- }, error => {
- this._accessKeyEmitter.next(error);
- });
+ this.checkUserAccessKey()
+ .subscribe(
+ response => {
+ this._accessKeyEmitter.next(response);
+ },
+ error => {
+ this._accessKeyEmitter.next(error);
+ }
+ );
}
public checkUserAccessKey(): Observable<{}> {
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/userResource.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/userResource.service.ts
index 6f7c254..3f2d5f8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/userResource.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/userResource.service.ts
@@ -108,7 +108,12 @@
catchError(ErrorUtils.handleServiceError));
}
- public suspendComputationalResource(projectName: string, notebookName: string, computationalResourceName: string, provider: string): Observable<{}> {
+ public suspendComputationalResource(
+ projectName: string,
+ notebookName: string,
+ computationalResourceName: string,
+ provider: string
+ ): Observable<{}> {
const body = JSON.stringify('/' + projectName + '/' + notebookName + '/' + computationalResourceName + '/terminate');
return this.applicationServiceFacade
.buildDeleteComputationalResourcesRequest(body, provider)
@@ -117,7 +122,13 @@
catchError(ErrorUtils.handleServiceError));
}
- public toggleStopStartAction(project: string, notebook: string, resource: string, action, provider: string): Observable<{}> {
+ public toggleStopStartAction(
+ project: string,
+ notebook: string,
+ resource: string,
+ action,
+ provider: string
+ ): Observable<{}> {
const url = `/${project}/${notebook}/${resource}/${action}`;
if (action === 'stop') {
return this.applicationServiceFacade
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/checkUtils.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/checkUtils.ts
index ab70476..d1e6f53 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/checkUtils.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/checkUtils.ts
@@ -28,6 +28,7 @@
STOPPING: 'DISCONNECTING',
STOPPED: 'DISCONNECTED'
};
+
public static isJSON(str) {
try {
JSON.parse(str);
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/compareUtils.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/compareUtils.ts
index 919aa26..ad490e1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/compareUtils.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/compareUtils.ts
@@ -21,7 +21,6 @@
public static compareFilters(currentData, previousData) {
return Object.keys(currentData).every(el => {
if (Array.isArray(previousData[el])) {
- // console.log('arr', el, previousData[el], currentData[el]);
if (previousData[el].length === 0 && currentData[el].length === 0) return true;
if (previousData[el].length === currentData[el].length) {
return currentData[el].every(element => previousData[el].includes(element));
@@ -29,10 +28,8 @@
return false;
}
} else {
- // console.log(el, previousData[el] === currentData[el]);
return previousData[el] === currentData[el];
}
});
}
-
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/dateUtils.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/dateUtils.ts
index 718ddf4..9e66835 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/dateUtils.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/dateUtils.ts
@@ -29,8 +29,8 @@
}
public getQuarterRange() {
- const currentMonth = (new Date()).getMonth();
- const yyyy = (new Date()).getFullYear();
+ const currentMonth = new Date().getMonth();
+ const yyyy = new Date().getFullYear();
const start = (Math.floor(currentMonth / 3) * 3 ) + 1,
end = start + 3,
startDate = new Date(start + '-01-' + yyyy);
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/http-status-codes.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/http-status-codes.ts
index d2323e7..c365052 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/http-status-codes.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/http-status-codes.ts
@@ -18,57 +18,57 @@
*/
export class HTTP_STATUS_CODES {
- public static readonly ACCEPTED = 202;
- public static readonly BAD_GATEWAY = 502;
- public static readonly BAD_REQUEST = 400;
- public static readonly CONFLICT = 409;
- public static readonly CONTINUE = 100;
- public static readonly CREATED = 201;
- public static readonly EXPECTATION_FAILED = 417;
- public static readonly FAILED_DEPENDENCY = 424;
- public static readonly FORBIDDEN = 403;
- public static readonly GATEWAY_TIMEOUT = 504;
- public static readonly GONE = 410;
- public static readonly HTTP_VERSION_NOT_SUPPORTED = 505;
- public static readonly INSUFFICIENT_SPACE_ON_RESOURCE = 419;
- public static readonly INSUFFICIENT_STORAGE = 507;
- public static readonly INTERNAL_SERVER_ERROR = 500;
- public static readonly LENGTH_REQUIRED = 411;
- public static readonly LOCKED = 423;
- public static readonly METHOD_FAILURE = 420;
- public static readonly METHOD_NOT_ALLOWED = 405;
- public static readonly MOVED_PERMANENTLY = 301;
- public static readonly MOVED_TEMPORARILY = 302;
- public static readonly MULTI_STATUS = 207;
- public static readonly MULTIPLE_CHOICES = 300;
- public static readonly NETWORK_AUTHENTICATION_REQUIRED = 511;
- public static readonly NO_CONTENT = 204;
- public static readonly NON_AUTHORITATIVE_INFORMATION = 203;
- public static readonly NOT_ACCEPTABLE = 406;
- public static readonly NOT_FOUND = 404;
- public static readonly NOT_IMPLEMENTED = 501;
- public static readonly NOT_MODIFIED = 304;
- public static readonly OK = 200;
- public static readonly PARTIAL_CONTENT = 206;
- public static readonly PAYMENT_REQUIRED = 402;
- public static readonly PERMANENT_REDIRECT = 308;
- public static readonly PRECONDITION_FAILED = 412;
- public static readonly PRECONDITION_REQUIRED = 428;
- public static readonly PROCESSING = 102;
- public static readonly PROXY_AUTHENTICATION_REQUIRED = 407;
- public static readonly REQUEST_HEADER_FIELDS_TOO_LARGE = 431;
- public static readonly REQUEST_TIMEOUT = 408;
- public static readonly REQUEST_TOO_LONG = 413;
- public static readonly REQUEST_URI_TOO_LONG = 414;
- public static readonly REQUESTED_RANGE_NOT_SATISFIABLE = 416;
- public static readonly RESET_CONTENT = 205;
- public static readonly SEE_OTHER = 303;
- public static readonly SERVICE_UNAVAILABLE = 503;
- public static readonly SWITCHING_PROTOCOLS = 101;
- public static readonly TEMPORARY_REDIRECT = 307;
- public static readonly TOO_MANY_REQUESTS = 429;
- public static readonly UNAUTHORIZED = 401;
- public static readonly UNPROCESSABLE_ENTITY = 422;
- public static readonly UNSUPPORTED_MEDIA_TYPE = 415;
- public static readonly USE_PROXY = 305;
+ public static readonly ACCEPTED = 202;
+ public static readonly BAD_GATEWAY = 502;
+ public static readonly BAD_REQUEST = 400;
+ public static readonly CONFLICT = 409;
+ public static readonly CONTINUE = 100;
+ public static readonly CREATED = 201;
+ public static readonly EXPECTATION_FAILED = 417;
+ public static readonly FAILED_DEPENDENCY = 424;
+ public static readonly FORBIDDEN = 403;
+ public static readonly GATEWAY_TIMEOUT = 504;
+ public static readonly GONE = 410;
+ public static readonly HTTP_VERSION_NOT_SUPPORTED = 505;
+ public static readonly INSUFFICIENT_SPACE_ON_RESOURCE = 419;
+ public static readonly INSUFFICIENT_STORAGE = 507;
+ public static readonly INTERNAL_SERVER_ERROR = 500;
+ public static readonly LENGTH_REQUIRED = 411;
+ public static readonly LOCKED = 423;
+ public static readonly METHOD_FAILURE = 420;
+ public static readonly METHOD_NOT_ALLOWED = 405;
+ public static readonly MOVED_PERMANENTLY = 301;
+ public static readonly MOVED_TEMPORARILY = 302;
+ public static readonly MULTI_STATUS = 207;
+ public static readonly MULTIPLE_CHOICES = 300;
+ public static readonly NETWORK_AUTHENTICATION_REQUIRED = 511;
+ public static readonly NO_CONTENT = 204;
+ public static readonly NON_AUTHORITATIVE_INFORMATION = 203;
+ public static readonly NOT_ACCEPTABLE = 406;
+ public static readonly NOT_FOUND = 404;
+ public static readonly NOT_IMPLEMENTED = 501;
+ public static readonly NOT_MODIFIED = 304;
+ public static readonly OK = 200;
+ public static readonly PARTIAL_CONTENT = 206;
+ public static readonly PAYMENT_REQUIRED = 402;
+ public static readonly PERMANENT_REDIRECT = 308;
+ public static readonly PRECONDITION_FAILED = 412;
+ public static readonly PRECONDITION_REQUIRED = 428;
+ public static readonly PROCESSING = 102;
+ public static readonly PROXY_AUTHENTICATION_REQUIRED = 407;
+ public static readonly REQUEST_HEADER_FIELDS_TOO_LARGE = 431;
+ public static readonly REQUEST_TIMEOUT = 408;
+ public static readonly REQUEST_TOO_LONG = 413;
+ public static readonly REQUEST_URI_TOO_LONG = 414;
+ public static readonly REQUESTED_RANGE_NOT_SATISFIABLE = 416;
+ public static readonly RESET_CONTENT = 205;
+ public static readonly SEE_OTHER = 303;
+ public static readonly SERVICE_UNAVAILABLE = 503;
+ public static readonly SWITCHING_PROTOCOLS = 101;
+ public static readonly TEMPORARY_REDIRECT = 307;
+ public static readonly TOO_MANY_REQUESTS = 429;
+ public static readonly UNAUTHORIZED = 401;
+ public static readonly UNPROCESSABLE_ENTITY = 422;
+ public static readonly UNSUPPORTED_MEDIA_TYPE = 415;
+ public static readonly USE_PROXY = 305;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts
index 24dbf49..fa220da 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts
@@ -56,7 +56,8 @@
}
public static flatDeep(arr, d = 1) {
- return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? this.flatDeep(val, d - 1) : val), [])
+ return d > 0
+ ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? this.flatDeep(val, d - 1) : val), [])
: arr.slice();
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/login/login.component.css b/services/self-service/src/main/resources/webapp/src/app/login/login.component.css
index 890b9f4..c12189f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/login/login.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/login/login.component.css
@@ -22,49 +22,49 @@
}
.butt-azure {
+ padding: 0 15px;
+ margin-left: 10px;
color: #fff;
background-color: #5bc0de;
- margin-left: 10px;
- padding: 0 15px;
}
.butt-login.mat-raised-button {
display: block;
- margin: 0 auto;
height: 38px;
+ width: 200px;
+ margin: 0 auto;
background-color: #5bc0de;
color: #fff;
border-color: #46b8da;
- width: 200px;
}
.butt-login.mat-raised-button:disabled {
color: #35afd6;
background-color: rgba(0, 0, 0, 0.28);
border: 1px solid;
- box-shadow: 0 3px 1px -2px rgba(53, 175, 213, 0.74),
- 0 2px 2px 0 rgba(53, 175, 213, 0.65), 0 1px 5px 0 rgba(53, 175, 213, 0.47);
+ box-shadow: 0 3px 1px -2px rgba(53, 175, 213, 0.74), 0 2px 2px 0 rgba(53, 175, 213, 0.65),
+ 0 1px 5px 0 rgba(53, 175, 213, 0.47);
}
.login_page .logo {
display: flex;
justify-content: center;
- margin-bottom: 45px;
- cursor: default;
height: 250px;
width: 360px;
+ margin-bottom: 45px;
+ cursor: default;
}
.login_page {
- background: url(../../assets/img/login-background.png) top center;
- background-size: cover;
position: absolute;
left: 0;
top: 0;
+ display: table;
width: 100%;
height: 100%;
text-align: center;
- display: table;
+ background: url(../../assets/img/login-background.png) top center;
+ background-size: cover;
}
.login_page .content {
@@ -95,27 +95,27 @@
.input-icon-group {
display: flex;
flex-direction: row;
- background: #fff;
margin-bottom: 20px;
+ background: #fff;
}
.input-with-icon {
width: 100%;
- outline: none;
- background-color: #fff;
height: 40px !important;
- color: #555;
padding: 6px 12px;
+ color: #555;
+ background-color: #fff;
box-sizing: border-box;
border: 1px solid #35afd5 !important;
border-left: 1px solid #35afd5;
- transition: all 0.35s ease-in-out;
/* font: 300 14px/24px 'Open Sans', sans-serif !important; */
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 24px;
- font-family: 'Open Sans', sans-serif !important;
+ font-family: "Open Sans", sans-serif !important;
+ transition: all 0.35s ease-in-out;
+ outline: none;
}
.input-icon {
@@ -143,8 +143,8 @@
}
.validation-block {
- text-align: left;
display: table-caption;
+ text-align: left;
color: red;
}
@@ -156,9 +156,9 @@
.fountainG {
position: absolute;
top: 0;
- background-color: rgb(79, 163, 189);
width: 6px;
height: 6px;
+ background-color: rgb(79, 163, 189);
animation-name: bounce_fountainG;
-o-animation-name: bounce_fountainG;
-ms-animation-name: bounce_fountainG;
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 cce35e1..1e3b8df 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
@@ -23,7 +23,12 @@
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef class="th_date label-header">
<div class="label"><span class="text">Date</span></div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span>more_vert</span>
</i>
@@ -37,7 +42,12 @@
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef class="th_user label-header" [ngStyle]="{'z-index': 99}">
<div class="label"><span class="audit-user"> User</span></div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filterAuditData.users.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
@@ -57,7 +67,12 @@
<div class="label">
<span class="text"> Action </span>
</div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span>more_vert</span>
</i>
@@ -71,7 +86,9 @@
[matTooltipClass]="'full-size-tooltip'"
matTooltipPosition="above"
[matTooltipDisabled]="element.action?.length < 12"
- >{{element.action | convertaction }}</span>
+ >
+ {{element.action | convertaction }}
+ </span>
<div class="audit-info" (click)="openActionInfo(element)" *ngIf="element.info">
<i class="material-icons">info</i>
</div>
@@ -83,7 +100,12 @@
<ng-container matColumnDef="project">
<th mat-header-cell *matHeaderCellDef class="th_project label-header">
<div class="label"><span class="text">Project</span></div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filterAuditData.projects.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
@@ -101,7 +123,12 @@
<ng-container matColumnDef="resource-type">
<th mat-header-cell *matHeaderCellDef class="th_resource-type label-header">
<div class="label"><span class="text">Resource type</span></div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filterAuditData.resource_types.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
@@ -125,8 +152,13 @@
<mat-form-field>
<mat-label></mat-label>
<mat-select [(value)]="showItemsPrPage">
- <mat-option *ngFor="let item of itemsPrPage" [value]="item" (click)="setItemsPrPage(item)">
- {{ item }}</mat-option>
+ <mat-option
+ *ngFor="let item of itemsPrPage"
+ [value]="item"
+ (click)="setItemsPrPage(item)"
+ >
+ {{ item }}
+ </mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -141,22 +173,38 @@
</span>
<span>
<span [ngClass]="{'not-active': !isNavigationDisabled || firstItem === 1}">
- <span class="navigation-butts" (click)="loadItemsForPage('first')" [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}">
+ <span
+ class="navigation-butts"
+ (click)="loadItemsForPage('first')"
+ [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}"
+ >
<i class="material-icons">first_page</i>
</span>
</span>
<span [ngClass]="{'not-active': firstItem === 1 || !isNavigationDisabled}">
- <span class="navigation-butts" (click)="loadItemsForPage('previous')" [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}">
+ <span
+ class="navigation-butts"
+ (click)="loadItemsForPage('previous')"
+ [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}"
+ >
<i class="material-icons">keyboard_arrow_left</i>
</span>
</span>
<span [ngClass]="{'not-active': lastItem >= allItems || !isNavigationDisabled}">
- <span class="navigation-butts" (click)="loadItemsForPage('next')" [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}">
+ <span
+ class="navigation-butts"
+ (click)="loadItemsForPage('next')"
+ [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}"
+ >
<i class="material-icons">keyboard_arrow_right</i>
</span>
</span>
<span [ngClass]="{'not-active': lastItem >= allItems || !isNavigationDisabled}">
- <span class="navigation-butts" (click)="loadItemsForPage('last')" [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}">
+ <span
+ class="navigation-butts"
+ (click)="loadItemsForPage('last')"
+ [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}"
+ >
<i class="material-icons">last_page</i>
</span>
</span>
@@ -168,7 +216,12 @@
<ng-container matColumnDef="resource">
<th mat-header-cell *matHeaderCellDef class="th_resource label-header">
<div class="label"><span class="text">Resource</span></div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filterAuditData.resources.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
@@ -185,9 +238,7 @@
</span>
</div>
</td>
- <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true">
-
- </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true"></td>
</ng-container>
<ng-container matColumnDef="buttons">
@@ -197,18 +248,28 @@
</td>
</ng-container>
-<!-- AUDIT FILTER-->
+ <!-- AUDIT FILTER-->
<ng-container matColumnDef="user-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'users'"
- [items]="filterConfiguration.users" [model]="filterAuditData.users"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'users'"
+ [items]="filterConfiguration.users"
+ [model]="filterAuditData.users"
+ ></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="project-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'projects'"
- [items]="filterConfiguration.projects" [model]="filterAuditData.projects"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'projects'"
+ [items]="filterConfiguration.projects"
+ [model]="filterAuditData.projects"
+ ></multi-select-dropdown>
</th>
</ng-container>
@@ -216,37 +277,53 @@
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown
class="audit-resources"
- *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resources'"
- [items]="filterConfiguration.resources" [model]="filterAuditData.resources"></multi-select-dropdown>
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'resources'"
+ [items]="filterConfiguration.resources"
+ [model]="filterAuditData.resources"
+ ></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="resource-type-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resource_types'"
- [items]="filterConfiguration.resource_types" [model]="filterAuditData.resource_types"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'resource_types'"
+ [items]="filterConfiguration.resource_types"
+ [model]="filterAuditData.resource_types"
+ ></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="actions-filter">
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
-
- </th>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item"></th>
</ng-container>
<ng-container matColumnDef="date-filter">
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- </th>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item"></th>
</ng-container>
<ng-container matColumnDef="filter-buttons" stickyEnd>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<div class="actions audit-actions">
- <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
+ <button
+ mat-icon-button
+ class="btn reset"
+ (click)="resetFilterConfigurations()"
+ [disabled]="!isFilterSelected"
+ >
<i class="material-icons">close</i>
</button>
- <button mat-icon-button class="btn apply" (click)="buildAuditGrid(true)" [disabled]="isNavigationDisabled">
+ <button
+ mat-icon-button
+ class="btn apply"
+ (click)="buildAuditGrid(true)"
+ [disabled]="isNavigationDisabled"
+ >
<i class="material-icons">done</i>
</button>
</div>
@@ -264,11 +341,14 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
- <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
- class="filter-row"></tr>
+ <tr
+ [hidden]="!collapseFilterRow"
+ mat-header-row
+ *matHeaderRowDef="displayedFilterColumns; sticky: true"
+ class="filter-row"
+ ></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="content-row"></tr>
<tr [hidden]="!auditData?.length" mat-footer-row *matFooterRowDef="displayedColumns"></tr>
-
<tr [hidden]="auditData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
</table>
</section>
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 4b289b6..555d7ad 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
@@ -24,9 +24,9 @@
max-height: -moz-calc(100vh - 130px);
max-height: -webkit-calc(100vh - 130px);
overflow: visible;
- 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);
+ box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
- &.scroll{
+ &.scroll {
overflow: auto;
}
@@ -43,49 +43,49 @@
tr {
.th_user {
- width: 19%;
z-index: 9 !important;
+ width: 19%;
}
.th_action {
- width: 11%;
z-index: 8 !important;
+ width: 11%;
max-width: 250px;
}
.th_date {
- width: 14%;
z-index: 10 !important;
- padding-left: 0;
+ width: 14%;
max-width: 240px;
+ padding-left: 0;
}
.th_project {
- width: 11%;
z-index: 7 !important;
+ width: 11%;
max-width: 206px;
}
.th_resource {
- width: 14%;
z-index: 5 !important;
+ width: 14%;
max-width: 240px;
}
.th_resource-type {
- width: 14%;
z-index: 6 !important;
+ width: 14%;
max-width: 240px;
}
.th_buttons {
- width: 6%;
z-index: 4 !important;
+ width: 6%;
}
th {
- padding-right: 5px;
z-index: 2 !important;
+ padding-right: 5px;
&.th_charges {
z-index: 3 !important;
@@ -93,27 +93,26 @@
}
td {
- font-size: 13px;
padding-left: 20px;
+ font-size: 13px;
&.info {
z-index: 1 !important;
- text-align: center;
padding: 40px;
+ text-align: center;
}
}
&.filter-row {
th {
padding: 5px;
- font-size: 13px;
z-index: 103 !important;
+ font-size: 13px;
}
.filter-field {
font-size: 13px;
}
-
}
&.header-row {
@@ -127,7 +126,6 @@
}
}
-
.tags {
.label {
padding-top: 0;
@@ -175,14 +173,14 @@
padding: 5px;
mat-chip {
- min-height: 20px;
- padding: 5px 10px;
- font-size: 13px;
- max-width: 110px !important;
- white-space: nowrap;
display: inline-block;
- line-height: 10px;
+ min-height: 20px;
+ max-width: 110px !important;
+ padding: 5px 10px;
margin: 2px;
+ font-size: 13px;
+ white-space: nowrap;
+ line-height: 10px;
}
}
@@ -219,8 +217,8 @@
width: 6px;
height: 6px;
border: 3px solid transparent;
- border-bottom: 3px solid rgba(0, 0, 0, .54);
- border-left: 3px solid rgba(0, 0, 0, .54);
+ border-bottom: 3px solid rgba(0, 0, 0, 0.54);
+ border-left: 3px solid rgba(0, 0, 0, 0.54);
cursor: pointer;
&.active {
@@ -240,16 +238,16 @@
}
}
- .table-item-wrapper{
+ .table-item-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10px;
- span{
+ span {
cursor: default;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
@@ -260,7 +258,7 @@
align-items: center;
justify-content: space-between;
padding-right: 10px;
- span{
+ span {
max-width: 85%;
}
@@ -278,9 +276,9 @@
.dropdown-multiselect {
button {
- font-size: 13px;
height: 34px;
padding: 7px 20px;
+ font-size: 13px;
}
}
}
@@ -308,16 +306,15 @@
}
}
- .navigation-butts {
- cursor: pointer;
- color: #35afd5;
+ .navigation-butts {
+ cursor: pointer;
+ color: #35afd5;
- .not-active {
- color: lightgray;
- }
+ .not-active {
+ color: lightgray;
}
}
-
+}
.audit-actions {
text-align: right;
@@ -332,8 +329,7 @@
position: -webkit-sticky;
bottom: -1px;
background: inherit;
- border-top: 1px solid #E0E0E0;
+ border-top: 1px solid #e0e0e0;
transform: translateY(-1px);
border-bottom: none;
-}
-
+}
\ No newline at end of file
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 2dc50a2..090dcb3 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
@@ -22,10 +22,8 @@
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
import {AuditService} from '../../../core/services/audit.service';
import {SortUtils} from '../../../core/util';
-import {LocalizationService} from '../../../core/services/localization.service';
import {CompareUtils} from '../../../core/util/compareUtils';
-
export interface AuditItem {
action: string;
info: string;
@@ -61,13 +59,11 @@
@Output() resetDateFilter: EventEmitter<any> = new EventEmitter();
-
constructor(
public dialogRef: MatDialogRef<AuditInfoDialogComponent>,
public dialog: MatDialog,
private auditService: AuditService,
- ) {
- }
+ ) { }
ngOnInit() {}
@@ -130,9 +126,11 @@
public openActionInfo(element: AuditItem): void {
if (element.type === 'GROUP' && element.info.indexOf('role') !== -1) {
- this.dialog.open(AuditInfoDialogComponent, { data: {element, dialogSize: 'big'}, panelClass: 'modal-xl-m' });
+ this.dialog.open(AuditInfoDialogComponent,
+ { data: { element, dialogSize: 'big' }, panelClass: 'modal-xl-m' });
} else {
- this.dialog.open(AuditInfoDialogComponent, { data: {element, dialogSize: 'small'}, panelClass: 'modal-md' });
+ this.dialog.open(AuditInfoDialogComponent,
+ { data: {element, dialogSize: 'small' }, panelClass: 'modal-md' });
}
}
@@ -151,15 +149,18 @@
this.lastItem = this.showItemsPrPage;
} else if (action === 'previous') {
this.firstItem = this.firstItem - this.showItemsPrPage;
- this.lastItem = this.lastItem % this.showItemsPrPage === 0 ?
- this.lastItem - this.showItemsPrPage : this.lastItem - (this.lastItem % this.showItemsPrPage);
+ this.lastItem = this.lastItem % this.showItemsPrPage === 0
+ ? this.lastItem - this.showItemsPrPage
+ : this.lastItem - (this.lastItem % this.showItemsPrPage);
} else if (action === 'next') {
this.firstItem = this.firstItem + this.showItemsPrPage;
- this.lastItem = (this.lastItem + this.showItemsPrPage) > this.allItems ?
- this.allItems : this.lastItem + this.showItemsPrPage;
+ this.lastItem = (this.lastItem + this.showItemsPrPage) > this.allItems
+ ? this.allItems
+ : this.lastItem + this.showItemsPrPage;
} else if (action === 'last') {
- this.firstItem = this.allItems % this.showItemsPrPage === 0 ?
- this.allItems - this.showItemsPrPage : this.allItems - (this.allItems % this.showItemsPrPage) + 1;
+ this.firstItem = this.allItems % this.showItemsPrPage === 0
+ ? this.allItems - this.showItemsPrPage
+ : this.allItems - (this.allItems % this.showItemsPrPage) + 1;
this.lastItem = this.allItems;
}
}
@@ -176,7 +177,6 @@
}
}
-
@Component({
selector: 'audit-info-dialog',
template: `
@@ -185,8 +185,15 @@
<h4 class="modal-title">{{data.element.action | convertaction}}</h4>
<button type="button" class="close" (click)="dialogRef.close()">×</button>
</header>
- <div mat-dialog-content class="content audit-info-content" [ngClass]="{'pb-40': actionList[0].length > 1}">
- <mat-list *ngIf="actionList[0].length > 1 && data.element.action !== 'FOLLOW_LINK'|| data.element.info.indexOf('Update quota') !== -1;else message">
+ <div
+ mat-dialog-content
+ class="content audit-info-content"
+ [ngClass]="{'pb-40': actionList[0].length > 1}"
+ >
+ <mat-list
+ *ngIf="actionList[0].length > 1 && data.element.action !== 'FOLLOW_LINK'
+ || data.element.info.indexOf('Update quota') !== -1;else message"
+ >
<ng-container *ngIf="data.element.info.indexOf('Update quota') === -1;else quotas">
<mat-list-item class="list-header">
@@ -196,15 +203,27 @@
<div class="scrolling-content mat-list-wrapper" id="scrolling">
<mat-list-item class="list-item" *ngFor="let action of actionList">
- <div *ngIf="(data.element.action === 'upload' && action[0] === 'File(s)') || (data.element.action === 'download' && action[0] === 'File(s)');else multiAction" class="info-item-title">File</div>
+ <div
+ *ngIf="(data.element.action === 'upload' && action[0] === 'File(s)')
+ || (data.element.action === 'download' && action[0] === 'File(s)');else multiAction"
+ class="info-item-title"
+ >
+ File
+ </div>
<ng-template #multiAction>
<div class="info-item-title" [ngClass]="{'same-column-width': data.dialogSize === 'small'}">{{action[0]}}</div>
</ng-template>
- <div class="info-item-data" [ngClass]="{'same-column-width': data.dialogSize === 'small'}" *ngIf="action[0] === 'File(s)'">
- <div class="file-description ellipsis"
- *ngFor="let description of action[1]?.split(',')"
- [matTooltip]="description"
- matTooltipPosition="above">
+ <div
+ class="info-item-data"
+ [ngClass]="{'same-column-width': data.dialogSize === 'small'}"
+ *ngIf="action[0] === 'File(s)'"
+ >
+ <div
+ class="file-description ellipsis"
+ *ngFor="let description of action[1]?.split(',')"
+ [matTooltip]="description"
+ matTooltipPosition="above"
+ >
{{description}}
</div>
</div>
@@ -215,7 +234,8 @@
class="ellipsis"
[ngStyle]="description.length < 20 ? {'width' :'fit-content'} : {'width':'100%'}"
matTooltipPosition="above"
- matTooltipClass="mat-tooltip-description">
+ matTooltipClass="mat-tooltip-description"
+ >
{{description}}
</div>
</div>
@@ -333,6 +353,4 @@
}
this.actionList = data.element.info.split('\n').map(v => v.split(':')).filter(v => v[0] !== '');
}
-}
-
-
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss
index 0bf0071..4d87aeb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss
@@ -20,18 +20,18 @@
section.audit-toolbar {
display: flex;
justify-content: space-between;
- font-weight: 300;
width: 100%;
+ font-weight: 300;
- >div {
+ > div {
width: 33%;
}
- >div:nth-child(2) {
+ > div:nth-child(2) {
text-align: center;
}
- >div:nth-child(3) {
+ > div:nth-child(3) {
text-align: right;
}
@@ -61,6 +61,3 @@
}
}
}
-
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts
index 680dc0b..9110818 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts
@@ -17,13 +17,12 @@
* under the License.
*/
-import { Component, OnInit, AfterViewInit, Output, EventEmitter, ViewEncapsulation, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { NgDateRangePickerOptions } from 'ng-daterangepicker';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
-import {skip} from 'rxjs/operators';
-import {Subscription} from 'rxjs';
-import {HealthStatusService} from '../../../core/services';
-import {GeneralEnvironmentStatus} from '../../../administration/management/management.model';
+import { Subscription } from 'rxjs';
+import { HealthStatusService } from '../../../core/services';
+import { GeneralEnvironmentStatus } from '../../../administration/management/management.model';
@Component({
selector: 'audit-toolbar',
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts
index 168f6df..dd75463 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts
@@ -42,16 +42,16 @@
left: 0;
bottom: 0;
width: 100%;
+ padding: 5px 15px;
background: #a1b7d1;
color: #ffffff;
text-align: right;
- padding: 5px 15px;
font-size: 18px;
box-shadow: 0 9px 18px 15px #f5f5f5;
}
`]
})
-export class AuditComponent implements OnInit, OnDestroy {
+export class AuditComponent implements OnInit {
readonly DICTIONARY = DICTIONARY;
@ViewChild(AuditGridComponent, { static: true }) auditGrid: AuditGridComponent;
@@ -67,9 +67,6 @@
this.buildAuditReport();
}
- ngOnDestroy() {
- }
-
public buildAuditReport(): void {
this.auditGrid.buildAuditGrid();
}
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 11a3411..976b189 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
@@ -17,30 +17,35 @@
~ under the License.
-->
<div
- class="billing-page-wrapper scrolling"
- #pageWrapper
- [ngClass]="{'scroll': reportData?.length < 5}"
- (scroll)="scrollTable($event)">
+ class="billing-page-wrapper scrolling"
+ #pageWrapper
+ [ngClass]="{'scroll': reportData?.length < 5}"
+ (scroll)="scrollTable($event)"
+>
<div class="wrapper" #wrapper>
<div
- class="nav-buttons"
- [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} :
- {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}"
- *ngIf="tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0 && reportData?.length">
+ class="nav-buttons"
+ [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} :
+ {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}"
+ *ngIf="tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0 && reportData?.length"
+ >
<div class="button-container" >
<button
- mat-mini-fab aria-label="Scroll left"
- (click)="scrollTo('left')"
- [ngClass]="{'not-allowed': tableWrapper.scrollLeft === 0 && reportData?.length}">
+ mat-mini-fab aria-label="Scroll left"
+ (click)="scrollTo('left')"
+ [ngClass]="{'not-allowed': tableWrapper.scrollLeft === 0 && reportData?.length}"
+ >
<mat-icon [ngClass]="{'highlight': tableWrapper.scrollLeft !== 0 || pageWrapper.scrollLeft !== 0 && reportData?.length < 5}">
keyboard_arrow_left
</mat-icon>
</button>
</div>
<div class="button-container" [ngClass]="{'not-allowed': this.checkMaxRight()}">
- <button mat-mini-fab aria-label="Scroll right"
- (click)="scrollTo('right')"
- [ngClass]="{'not-allowed': !(isMaxRight | async)}">
+ <button
+ mat-mini-fab aria-label="Scroll right"
+ (click)="scrollTo('right')"
+ [ngClass]="{'not-allowed': !(isMaxRight | async)}"
+ >
<mat-icon [ngClass]="{'highlight': isMaxRight | async }">keyboard_arrow_right</mat-icon>
</button>
</div>
@@ -49,17 +54,26 @@
</div>
</div>
- <div class="nav-buttons"
- [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} :
- {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}"
- *ngIf="!(tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0) && reportData?.length">
+ <div
+ class="nav-buttons"
+ [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight
+ ? {'width': '100%'}
+ : {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}"
+ *ngIf="!(tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0) && reportData?.length"
+ >
<div class="totaL-item strong" >
Total <span>{{fullReport.total_cost | localcurrency}}</span>
</div>
</div>
- <section class="table-wrapper" id="scrolling" #tableWrapper (scroll)="scrollTable($event)" [ngStyle]="!reportData?.length && {'overflow': 'auto'}" [ngClass]="{'scroll': reportData?.length}">
-
+ <section
+ class="table-wrapper"
+ id="scrolling"
+ #tableWrapper
+ (scroll)="scrollTable($event)"
+ [ngStyle]="!reportData?.length && {'overflow': 'auto'}"
+ [ngClass]="{'scroll': reportData?.length}"
+ >
<table mat-table [dataSource]="reportData" class="data-grid reporting" #table>
<ng-container matColumnDef="name">
@@ -72,7 +86,7 @@
</i>
</button>
</th>
- <td mat-cell *matCellDef="let element"><span class="table-item">{{element.datalabId}}</span></td>
+ <td mat-cell *matCellDef="let element"><span class="table-item">{{element.datalabId}}</span></td>
<td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
@@ -87,7 +101,12 @@
<span class="text"> User </span>
</div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filteredReportData.users.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
@@ -100,7 +119,8 @@
[ngStyle]="element.user?.length < 20 ? {'max-width' :'fit-content'} : {'max-width':'200px'}"
[matTooltip]="element.user"
matTooltipPosition="above"
- matTooltipClass="billing-user-name">
+ matTooltipClass="billing-user-name"
+ >
{{element.user}}
</div>
</td>
@@ -132,7 +152,12 @@
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef class="th_type label-header">
<div class="label"><span class="text"> Resource Type</span> </div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filteredReportData.resource_type.length > 0; else type_filtered">filter_list</span>
<ng-template #type_filtered>more_vert</ng-template>
@@ -146,7 +171,12 @@
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef class="th_status label-header">
<div class="label"><span class="text"> Status</span> </div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
<span *ngIf="filteredReportData.statuses.length > 0; else status_filtered">filter_list</span>
<ng-template #status_filtered>more_vert</ng-template>
@@ -154,8 +184,13 @@
</button>
</th>
<td mat-cell *matCellDef="let element">
- <span class="status" ngClass="{{ element.status.toLowerCase() || '' }}"
- *ngIf="element.status">{{ element.status.toLowerCase() }}</span>
+ <span
+ class="status"
+ ngClass="{{ element.status.toLowerCase() || '' }}"
+ *ngIf="element.status"
+ >
+ {{ element.status.toLowerCase() }}
+ </span>
<span *ngIf="!element.status">N/A</span>
</td>
<td mat-footer-cell *matFooterCellDef class="table-footer"></td>
@@ -164,10 +199,14 @@
<ng-container matColumnDef="shape">
<th mat-header-cell *matHeaderCellDef class="th_shape label-header">
<div class="label"><span class="text"> Instance size</span></div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
- <span
- *ngIf="filteredReportData['shapes'].length > 0; else shape_filtered">filter_list</span>
+ <span *ngIf="filteredReportData['shapes'].length > 0; else shape_filtered">filter_list</span>
<ng-template #shape_filtered>more_vert</ng-template>
</i>
</button>
@@ -183,10 +222,14 @@
<ng-container matColumnDef="service">
<th mat-header-cell *matHeaderCellDef class="service label-header">
<div class="label"><span class="text"> Product</span> </div>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <button
+ mat-icon-button
+ aria-label="More"
+ class="ar"
+ (click)="toggleFilterRow()"
+ >
<i class="material-icons">
- <span
- *ngIf="filteredReportData['products'].length > 0; else service_filtered">filter_list</span>
+ <span *ngIf="filteredReportData['products'].length > 0; else service_filtered">filter_list</span>
<ng-template #service_filtered>more_vert</ng-template>
</i>
</button>
@@ -199,21 +242,29 @@
</ng-container>
<ng-container matColumnDef="empty">
- <th mat-header-cell *matHeaderCellDef class="th_empty label-header">
- </th>
- <td mat-cell *matCellDef="let element">
- </td>
- <td mat-footer-cell *matFooterCellDef class="table-footer total-cost" [colSpan]="2" [ngClass]="{'right-sticky': reportData?.length < 5}" [style]="{zIndex: 99999}">
+ <th mat-header-cell *matHeaderCellDef class="th_empty label-header"></th>
+ <td mat-cell *matCellDef="let element"></td>
+ <td
+ mat-footer-cell
+ *matFooterCellDef
+ class="table-footer total-cost"
+ [colSpan]="2"
+ [ngClass]="{'right-sticky': reportData?.length < 5}"
+ [style]="{zIndex: 99999}"
+ >
<!-- <span class="strong">-->
<!-- Total <span *ngIf="reportData?.length">{{fullReport['total_cost'] | localcurrency}}</span>-->
<!-- </span>-->
</td>
</ng-container>
-
-
<ng-container matColumnDef="charge" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="th_charges label-header index-105 charges-th" [ngClass]="{'right-sticky': reportData?.length < 5}">
+ <th
+ mat-header-cell
+ *matHeaderCellDef
+ class="th_charges label-header index-105 charges-th"
+ [ngClass]="{'right-sticky': reportData?.length < 5}"
+ >
<div class="label">
<div class="sort">
<div class="sort-arrow up" (click)="sortBy('cost', 'down')" [ngClass]="{'active': !!this.active['costdown']}"></div>
@@ -223,7 +274,11 @@
</div>
</th>
- <td mat-cell *matCellDef="let element" [ngClass]="{'right-sticky': reportData?.length < 5, 'charges-th': reportData?.length}" >
+ <td
+ mat-cell
+ *matCellDef="let element"
+ [ngClass]="{'right-sticky': reportData?.length < 5, 'charges-th': reportData?.length}"
+ >
{{element.cost | localcurrency }}
</td >
<td mat-footer-cell *matFooterCellDef class="table-footer total-cost d-none">
@@ -234,43 +289,74 @@
<ng-container matColumnDef="name-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<div class="input-wrapper">
- <input #nameFilter type="text" placeholder="Filter by environment name"
- class="form-control filter-field"
- [value]="filtered?.datalabId" (input)="onFilterNameUpdate($event.target['value'])"
+ <input
+ #nameFilter type="text"
+ placeholder="Filter by environment name"
+ class="form-control filter-field"
+ [value]="filtered?.datalabId"
+ (input)="onFilterNameUpdate($event.target['value'])"
/>
</div>
</th>
</ng-container>
+
<ng-container matColumnDef="user-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'users'"
- [items]="filterConfiguration.users" [model]="filteredReportData.users"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'users'"
+ [items]="filterConfiguration.users"
+ [model]="filteredReportData.users"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="project-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'projects'"
- [items]="filterConfiguration.projects" [model]="filteredReportData.projects"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'projects'"
+ [items]="filterConfiguration.projects"
+ [model]="filteredReportData.projects"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="type-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resource_type'"
- [items]="filterConfiguration.resource_type" [model]="filteredReportData.resource_type">
- </multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'resource_type'"
+ [items]="filterConfiguration.resource_type"
+ [model]="filteredReportData.resource_type"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="status-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'statuses'"
- [items]="filterConfiguration.statuses" [model]="filteredReportData.statuses"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'statuses'"
+ [items]="filterConfiguration.statuses"
+ [model]="filteredReportData.statuses"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="shape-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
- [type]="'shapes'" [items]="filterConfiguration['shapes']"
- [model]="filteredReportData['shapes']"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="'shapes'"
+ [items]="filterConfiguration['shapes']"
+ [model]="filteredReportData['shapes']"
+ ></multi-select-dropdown>
</th>
</ng-container>
@@ -281,25 +367,46 @@
<ng-container matColumnDef="service-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
- [type]="['products']"
- [items]="filterConfiguration['products']"
- [model]="filteredReportData['products']"></multi-select-dropdown>
+ <multi-select-dropdown
+ *ngIf="filterConfiguration"
+ (selectionChange)="onUpdate($event)"
+ [type]="['products']"
+ [items]="filterConfiguration['products']"
+ [model]="filteredReportData['products']"
+ ></multi-select-dropdown>
</th>
</ng-container>
+
<ng-container matColumnDef="actions" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item index-105" [ngClass]="{'right-sticky': reportData?.length < 5}" [ngStyle]="{'zIndex': '101 !important'}">
+ <th
+ mat-header-cell
+ *matHeaderCellDef
+ class="filter-row-item index-105"
+ [ngClass]="{'right-sticky': reportData?.length < 5}"
+ [ngStyle]="{'zIndex': '101 !important'}"
+ >
<div class="actions">
- <button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered" [disabled]="!isFilterSelected">
+ <button
+ mat-icon-button
+ class="btn reset"
+ (click)="resetFiltering(); isFiltered = !isFiltered"
+ [disabled]="!isFilterSelected"
+ >
<i class="material-icons">close</i>
</button>
- <button mat-icon-button class="btn apply" (click)="filter_btnClick()" [disabled]="isFilterChanged">
+ <button
+ mat-icon-button
+ class="btn apply"
+ (click)="filter_btnClick()"
+ [disabled]="isFilterChanged"
+ >
<i class="material-icons">done</i>
</button>
</div>
</th>
</ng-container>
+
<ng-container matColumnDef="placeholder">
<td mat-footer-cell *matFooterCellDef colspan="9" class="info">
<span *ngIf="!isFilterSelected; else notFound">No data available</span>
@@ -311,14 +418,22 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
- <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
- class="filter-row"></tr>
+ <tr
+ [hidden]="!collapseFilterRow"
+ mat-header-row
+ *matHeaderRowDef="displayedFilterColumns; sticky: true"
+ class="filter-row"
+ ></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="content-row"></tr>
- <tr [hidden]="!reportData?.length" mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"
- class="header-row"></tr>
+ <tr
+ [hidden]="!reportData?.length"
+ mat-footer-row
+ *matFooterRowDef="displayedColumns; sticky: true"
+ class="header-row"
+ ></tr>
<tr [hidden]="reportData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
</table>
</section>
</div>
-</div>
+</div>
\ No newline at end of file
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 2d5304f..e209705 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
@@ -16,28 +16,29 @@
* specific language governing permissions and limitations
* under the License.
*/
-.billing-page-wrapper{
+.billing-page-wrapper {
height: calc(100vh - 130px);
- scroll-behavior: smooth;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
- &.scroll{
+ scroll-behavior: smooth;
+
+ &.scroll {
overflow: auto;
}
}
-
.table-wrapper {
- width: 100%;
+ position: relative;
display: block;
+ width: 100%;
max-height: calc(100vh - 130px);
overflow: unset;
- 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);
- &.scroll{
+ box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+
+ &.scroll {
overflow: auto;
}
}
@@ -46,42 +47,43 @@
right: 0px !important;
}
-.wrapper{
+.wrapper {
position: relative;
.nav-buttons {
position: absolute;
- z-index: 105;
bottom: 0;
+ z-index: 105;
display: flex;
justify-content: space-around;
align-items: center;
height: 48px;
background-color: #ffffff;
-
+
.mat-mini-fab {
height: 25px;
width: 25px;
-
+
.mat-button-wrapper {
- padding: 0;
- line-height: unset;
display: flex;
align-items: center;
justify-content: center;
- padding-top: 2px;
+ padding: 2px 0 0;
+ line-height: unset;
}
}
}
-
- button{
+
+ button {
display: flex;
align-items: center;
background-color: #fff;
box-shadow: none;
- mat-icon{
+
+ mat-icon {
color: lightgrey;
- &.highlight{
+
+ &.highlight {
color: #35afd5;
}
}
@@ -99,18 +101,20 @@
}
tr {
+
th {
padding-right: 5px;
- &.th_charges{
+
+ &.th_charges {
z-index: 16 !important;
}
}
td {
- font-size: 13px;
padding-left: 20px;
+ font-size: 13px;
- &.mat-cell{
+ &.mat-cell {
border-bottom-color: #e3e5e8;
}
@@ -123,24 +127,21 @@
&.filter-row {
th {
+ z-index: 103 !important;
padding: 5px;
font-size: 13px;
- z-index: 103 !important;
-
}
.filter-field {
font-size: 13px;
}
-
}
&.header-row {
th {
-
- .label{
- padding-left: 0;
+ .label {
position: relative;
+ padding-left: 0;
font-size: 13px;
}
}
@@ -148,9 +149,9 @@
}
.th_shape {
+ z-index: 10 !important;
width: 12%;
min-width: 150px;
- z-index: 10 !important;
}
.th_user,
@@ -162,7 +163,7 @@
word-wrap: break-word;
}
- .service{
+ .service {
width: 10%;
}
@@ -173,42 +174,42 @@
}
.service {
- min-width: 175px;
z-index: 9 !important;
+ min-width: 175px;
}
.env_name {
+ z-index: 15 !important;
width: 21%;
min-width: 200px;
- z-index: 15 !important;
padding-left: 0;
}
- .th_user{
+ .th_user {
z-index: 14 !important;
}
.th_empty {
- width: 3%;
z-index: 4 !important;
+ width: 3%;
}
- .th_project{
- width: 12%;
+ .th_project {
z-index: 13 !important;
+ width: 12%;
min-width: 150px;
}
.th_type {
+ z-index: 12 !important;
width: 12%;
min-width: 170px;
- z-index: 12 !important;
}
.th_status {
+ z-index: 11 !important;
width: 8%;
min-width: 150px;
- z-index: 11 !important;
}
.th_charges {
@@ -224,20 +225,20 @@
padding: 5px;
mat-chip {
+ display: inline-block;
min-height: 20px;
+ max-width: 110px !important;
+ margin: 2px;
padding: 5px 10px;
font-size: 13px;
- max-width: 110px !important;
white-space: nowrap;
- display: inline-block;
line-height: 10px;
- margin: 2px;
}
}
.mat-column-charge,
.filter-row-item:last-child,
- .table-footer.mat-column-charge{
+ .table-footer.mat-column-charge {
text-align: right;
background-color: #f8f8f8;
}
@@ -252,7 +253,7 @@
padding-top: 10px;
}
- &.label-header{
+ &.label-header {
box-shadow: none;
border-bottom: 1px solid lightgrey !important;
}
@@ -263,39 +264,39 @@
padding-top: 13px;
vertical-align: super !important;
- .text{
- padding-left: 20px;
+ .text {
+ padding-left: 20px;
}
}
- .sort{
+ .sort {
position: absolute;
bottom: 2px;
&-user,
- &-project{
+ &-project {
right: -15px;
}
- &-arrow{
+ &-arrow {
width: 6px;
height: 6px;
border: 3px solid transparent;
- border-bottom: 3px solid rgba(0,0,0,.54);
- border-left: 3px solid rgba(0,0,0,.54);
+ border-bottom: 3px solid rgba(0, 0, 0, 0.54);
+ border-left: 3px solid rgba(0, 0, 0, 0.54);
cursor: pointer;
- &.active{
+ &.active {
border-bottom: 3px solid #35afd5;
border-left: 3px solid #35afd5;
}
}
- .down{
+ .down {
transform: rotate(-45deg);
}
- .up{
+ .up {
transform: rotate(135deg);
}
}
@@ -305,20 +306,20 @@
.actions {
text-align: right;
- button{
+ button {
background: inherit;
}
}
}
- .table-footer{
+ .table-footer {
position: sticky;
bottom: -1px;
+ padding-left: 0 !important;
background: inherit;
- border-top: 1px solid #E0E0E0;
+ border-top: 1px solid #e0e0e0;
transform: translateY(-1px);
border-bottom: none;
- padding-left: 0 !important;
}
}
@@ -329,29 +330,29 @@
.dropdown-multiselect {
button {
- font-size: 14px;
height: 34px;
padding: 7px 20px;
+ font-size: 14px;
}
}
}
-.table-footer{
+.table-footer {
position: sticky;
bottom: -1px;
background: inherit;
- border-top: 1px solid #E0E0E0;
- transform: translateY(-1px);
+ border-top: 1px solid #e0e0e0;
border-bottom: none;
+ transform: translateY(-1px);
- &.total-cost{
- min-width: 140px;
- padding-left: 0 !important;
- text-align: right;
- padding-right: 25px;
+ &.total-cost {
position: sticky;
right: 0;
z-index: 101;
+ min-width: 140px;
+ padding-right: 25px;
+ padding-left: 0 !important;
+ text-align: right;
}
}
@@ -364,13 +365,12 @@
right: 0;
}
-.wrapper{
- .table-wrapper{
- .reporting{
- tr{
+.wrapper {
+ .table-wrapper {
+ .reporting {
+ tr {
th.th_charges.index-105,
- .filter-row-item.index-105
- {
+ .filter-row-item.index-105 {
z-index: 105 !important;
}
}
@@ -378,8 +378,6 @@
}
}
-
-
@media screen and (max-width: 1280px) {
.dashboard_table.reporting {
.env_name,
@@ -399,18 +397,18 @@
}
}
-.totaL-item{
+.totaL-item {
position: absolute;
right: 0;
- padding-right: 24px;
z-index: 115;
+ padding-right: 24px;
font-size: 13px;
- &.scrollbar-right{
+ &.scrollbar-right {
right: 3px;
}
- &.scrollbar-bottom{
+ &.scrollbar-bottom {
bottom: 3px;
}
@@ -419,16 +417,14 @@
}
}
-
-
@-moz-document url-prefix() {
.totaL-item {
- &.scrollbar-right{
+ &.scrollbar-right {
right: 8px !important;
}
- &.scrollbar-bottom{
+ &.scrollbar-bottom {
bottom: 8px !important;
}
}
-}
+}
\ No newline at end of file
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 ff67351..513ac45 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
@@ -25,14 +25,11 @@
ViewChild,
Input,
HostListener,
- AfterViewInit,
ChangeDetectorRef,
ChangeDetectionStrategy
} from '@angular/core';
import { ReportingConfigModel } from '../../../../dictionary/global.dictionary';
-import {BehaviorSubject, fromEvent, Observable, of, Subject, timer} from 'rxjs';
-import {logger} from 'codelyzer/util/logger';
-import {take} from 'rxjs/operators';
+import {BehaviorSubject, Subject } from 'rxjs';
import {CompareUtils} from '../../../core/util/compareUtils';
export interface IFullReport {
@@ -64,8 +61,16 @@
fullReport: IFullReport;
isFiltered: boolean = false;
active: object = {};
- 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'];
+ 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: Subject<boolean> = new BehaviorSubject(false);
isFilterSelected: boolean;
@@ -97,8 +102,7 @@
this.checkMaxRight();
}
- constructor(private changeDetector: ChangeDetectorRef) {
- }
+ constructor(private changeDetector: ChangeDetectorRef) { }
ngOnInit() {
this.userAgentIndex = window.navigator.userAgent.indexOf('Firefox');
@@ -137,35 +141,37 @@
}
sortBy(sortItem, direction) {
- if (this.previousItem === sortItem && this.previousDirection === direction) {
- return;
- }
- let report: Array<object>;
- this.previousItem = sortItem;
- this.previousDirection = direction;
- if (direction === 'down') {
- report = this.reportData.sort((a, b) => {
- if (a[sortItem] === null) a[sortItem] = '';
- if (b[sortItem] === null) b[sortItem] = '';
+ if (this.previousItem === sortItem && this.previousDirection === direction) return;
- if ((a[sortItem] > b[sortItem])) return 1;
- if ((a[sortItem] < b[sortItem])) return -1;
- return 0;
- });
- }
- if (direction === 'up') {
- report = this.reportData.sort((a, b) => {
- if (a[sortItem] === null) a[sortItem] = '';
- if (b[sortItem] === null) b[sortItem] = '';
+ let report: Array<object>;
+ this.previousItem = sortItem;
+ this.previousDirection = direction;
- if ((a[sortItem] < b[sortItem])) return 1;
- if ((a[sortItem] > b[sortItem])) return -1;
- return 0;
- });
- }
- this.refreshData(this.fullReport, report);
- this.removeSorting();
- this.active[sortItem + direction] = true;
+ if (direction === 'down') {
+ report = this.reportData.sort((a, b) => {
+ if (a[sortItem] === null) a[sortItem] = '';
+ if (b[sortItem] === null) b[sortItem] = '';
+
+ if ((a[sortItem] > b[sortItem])) return 1;
+ if ((a[sortItem] < b[sortItem])) return -1;
+ return 0;
+ });
+ }
+
+ if (direction === 'up') {
+ report = this.reportData.sort((a, b) => {
+ if (a[sortItem] === null) a[sortItem] = '';
+ if (b[sortItem] === null) b[sortItem] = '';
+
+ if ((a[sortItem] < b[sortItem])) return 1;
+ if ((a[sortItem] > b[sortItem])) return -1;
+ return 0;
+ });
+ }
+
+ this.refreshData(this.fullReport, report);
+ this.removeSorting();
+ this.active[sortItem + direction] = true;
}
removeSorting() {
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts
index 20f835e..514ce53 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.component.ts
@@ -20,23 +20,24 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
-import {ApplicationSecurityService, BillingReportService, HealthStatusService} from '../../core/services';
+import { BillingReportService, HealthStatusService } from '../../core/services';
import { ReportingGridComponent } from './reporting-grid/reporting-grid.component';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { FileUtils } from '../../core/util';
import { DICTIONARY, ReportingConfigModel } from '../../../dictionary/global.dictionary';
-import {ProgressBarService} from '../../core/services/progress-bar.service';
-import {LocalizationService} from '../../core/services/localization.service';
+import { ProgressBarService } from '../../core/services/progress-bar.service';
+import { LocalizationService } from '../../core/services/localization.service';
@Component({
selector: 'datalab-reporting',
template: `
<div class="base-retreat">
- <datalab-toolbar (rebuildReport)="rebuildBillingReport()"
- (exportReport)="exportBillingReport()"
- (setRangeOption)="setRangeOption($event)">
- </datalab-toolbar>
+ <datalab-toolbar
+ (rebuildReport)="rebuildBillingReport()"
+ (exportReport)="exportBillingReport()"
+ (setRangeOption)="setRangeOption($event)"
+ ></datalab-toolbar>
<mat-divider></mat-divider>
<datalab-reporting-grid
(filterReport)="filterReport($event)"
@@ -53,10 +54,10 @@
left: 0;
bottom: 0;
width: 100%;
+ padding: 5px 15px;
background: #a1b7d1;
color: #ffffff;
text-align: right;
- padding: 5px 15px;
font-size: 18px;
box-shadow: 0 9px 18px 15px #f5f5f5;
}
@@ -136,27 +137,32 @@
this.billingReportService.downloadReport(this.reportData)
.subscribe(
data => FileUtils.downloadFile(data),
- () => this.toastr.error('Billing report export failed!', 'Oops!'));
+ () => this.toastr.error('Billing report export failed!', 'Oops!')
+ );
}
getDefaultFilterConfiguration(data): void {
const users = [], types = [], shapes = [], services = [], statuses = [], projects = [];
data.report_lines.forEach((item: any) => {
- if (item.user && users.indexOf(item.user) === -1)
+ if (item.user && users.indexOf(item.user) === -1) {
users.push(item.user);
+ }
- if (item.status && statuses.indexOf(item.status.toLowerCase()) === -1)
+ if (item.status && statuses.indexOf(item.status.toLowerCase()) === -1) {
statuses.push(item.status.toLowerCase());
+ }
- if (item.project && projects.indexOf(item.project) === -1)
+ if (item.project && projects.indexOf(item.project) === -1) {
projects.push(item.project);
+ }
- if (item['resource_type'] && types.indexOf(item['resource_type']) === -1)
+ if (item['resource_type'] && types.indexOf(item['resource_type']) === -1) {
types.push(item['resource_type']);
+ }
if (item.shape && types.indexOf(item.shape)) {
- if (item.shape.indexOf('Master') > -1) {
+ if (item.shape.indexOf('Master') > -1) {
for (let shape of item.shape.split(/(?=Slave)/g)) {
shape = shape.replace('Master: ', '');
shape = shape.replace(/Slave: /, '');
@@ -175,8 +181,9 @@
}
}
- if (item.product && services.indexOf(item.product) === -1)
+ if (item.product && services.indexOf(item.product) === -1) {
services.push(item.product);
+ }
});
if (!this.reportingGrid.filterConfiguration || !localStorage.getItem('report_config')) {
@@ -213,4 +220,4 @@
this.admin = result.admin;
});
}
-}
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts
index efcbfd9..c61c1d8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts
@@ -27,8 +27,8 @@
import { KeysPipeModule, LineBreaksPipeModule } from '../../core/pipes';
import { ReportingGridComponent } from './reporting-grid/reporting-grid.component';
import { ToolbarComponent } from './toolbar/toolbar.component';
-import {LocalCurrencyModule} from '../../core/pipes/local-currency-pipe';
-import {LocalDatePipeModule} from '../../core/pipes/local-date-pipe';
+import { LocalCurrencyModule } from '../../core/pipes/local-currency-pipe';
+import { LocalDatePipeModule } from '../../core/pipes/local-date-pipe';
@NgModule({
imports: [
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
index ca883aa..e8aba28 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
@@ -20,8 +20,9 @@
<div class="info_color" >
<div class="general" *ngIf="reportData">
<div><span>Service base name: </span><strong>{{ reportData.sbn }}</strong></div>
- <div *ngIf="reportData.tag_resource_id"><span>Resource tag ID:
- </span><strong>{{ reportData.tag_resource_id }}</strong></div>
+ <div *ngIf="reportData.tag_resource_id">
+ <span>Resource tag ID:</span><strong>{{ reportData.tag_resource_id }}</strong>
+ </div>
<div class="report-period info_color" *ngIf="availablePeriodFrom && availablePeriodTo">
<span>Available reporting period from:</span>
<strong>{{ availablePeriodFrom.join('/') | localDate }} </strong>
@@ -31,10 +32,19 @@
</div>
<div id="range-picker">
- <ng-daterangepicker [(ngModel)]="value" [options]="options" (ngModelChange)="onChange($event)"></ng-daterangepicker>
+ <ng-daterangepicker
+ [(ngModel)]="value"
+ [options]="options"
+ (ngModelChange)="onChange($event)"
+ ></ng-daterangepicker>
</div>
<div class="action-butt">
- <button mat-raised-button class="butt" (click)="export($event)" [disabled]="!reportData?.report_lines.length">
+ <button
+ mat-raised-button
+ class="butt"
+ (click)="export($event)"
+ [disabled]="!reportData?.report_lines.length"
+ >
<i class="material-icons">file_download</i>Export
</button>
<button mat-raised-button class="butt" (click)="rebuild($event)">
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss
index f23b8a9..7b454fa 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss
@@ -20,18 +20,18 @@
section.toolbar {
display: flex;
justify-content: space-between;
- font-weight: 300;
width: 100%;
+ font-weight: 300;
- >div {
+ > div {
width: 33%;
}
- >div:nth-child(2) {
+ > div:nth-child(2) {
text-align: center;
}
- >div:nth-child(3) {
+ > div:nth-child(3) {
text-align: right;
}
@@ -60,5 +60,4 @@
}
}
}
-}
-
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts
index 2b13c8e..af4aee8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts
@@ -17,13 +17,13 @@
* under the License.
*/
-import { Component, OnInit, AfterViewInit, Output, EventEmitter, ViewEncapsulation, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { NgDateRangePickerOptions } from 'ng-daterangepicker';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
-import {skip} from 'rxjs/operators';
-import {Subscription} from 'rxjs';
-import {HealthStatusService} from '../../../core/services';
-import {GeneralEnvironmentStatus} from '../../../administration/management/management.model';
+import { skip } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { HealthStatusService } from '../../../core/services';
+import { GeneralEnvironmentStatus } from '../../../administration/management/management.model';
@Component({
selector: 'datalab-toolbar',
@@ -102,11 +102,13 @@
onChange(dateRange: string): void {
const rangeLabels = <NodeListOf<Element>>document.querySelectorAll('.value-txt');
- for (let label = 0; label < rangeLabels.length; ++label)
+ for (let label = 0; label < rangeLabels.length; ++label) {
if (rangeLabels[label].classList.contains('untouched')) {
rangeLabels[label].classList.remove('untouched');
rangeLabels[label].classList.remove('d-none');
}
+ }
+
const labels = <NodeListOf<Element>>document.querySelectorAll('.label-txt');
labels[0].innerHTML = 'From:';
labels[1].innerHTML = 'To:';
@@ -125,4 +127,4 @@
export($event): void {
this.exportReport.emit($event);
}
-}
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index 93ff8f4..1c38bc3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -26,79 +26,99 @@
<div class="dialog-content tabs">
<div class="submit m-bott-10 m-top-10">
<div class="left-side-butts">
- <span [matTooltip]="isQueueFull ? 'Previous upload is still in progress, please wait.' : 'You have not permission to upload data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload && !isQueueFull}}">
- <button
- mat-raised-button
- type="button"
- class="butt first-btn"
- [disabled]="!this.bucketStatus.upload || allDisable || isSelectionOpened || !path || isQueueFull"
- (click)="handleFileInput($event)"
+ <span
+ [matTooltip]="isQueueFull ? 'Previous upload is still in progress, please wait.' : 'You have not permission to upload data'"
+ matTooltipPosition="above"
+ matTooltipDisabled="{{this.bucketStatus.upload && !isQueueFull}}"
>
- <input
- [ngClass]="{'not-allowed': !this.bucketStatus.upload || allDisable || isSelectionOpened || !path || isQueueFull}"
- type="file"
- (change)="handleFileInput($event)"
- title=""
- multiple
+ <button
+ mat-raised-button
+ type="button"
+ class="butt first-btn"
+ [disabled]="!this.bucketStatus.upload || allDisable || isSelectionOpened || !path || isQueueFull"
+ (click)="handleFileInput($event)"
>
- Upload files
- </button>
- </span>
- <span [matTooltip]="'You have not permission to create folder'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload}}">
- <button
- mat-raised-button
- type="button"
- class="butt"
- (click)="createFolder(selectedFolder)"
- [disabled]="!this.bucketStatus.upload || allDisable || !path || isSelectionOpened"
- >
- Create folder
- </button>
- </span>
- <span [matTooltip]="'You have not permission to delete data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.delete}}">
- <button
- type="button"
- class="butt"
- mat-raised-button
- (click)="fileAction('delete')"
- [disabled]="(!selected?.length && !selectedFolderForAction?.length) || !this.bucketStatus.delete || allDisable || !path || isSelectionOpened"
- >
- Delete
- </button>
- </span>
- <div class="action-select-wrapper" >
- <span class="action-button-wrapper">
- <button
- type="button" class="butt actions-btn"
- mat-raised-button
- [disabled]=" selectedItems?.length !== 1 || allDisable || !path || isSelectionOpened"
- (click)="toogleActions();$event.stopPropagation()"
- >
- Actions <i class="material-icons" >{{ !isActionsOpen ? 'expand_more' : 'expand_less' }}</i>
+ <input
+ [ngClass]="{'not-allowed': !this.bucketStatus.upload || allDisable || isSelectionOpened || !path || isQueueFull}"
+ type="file"
+ (change)="handleFileInput($event)"
+ title=""
+ multiple
+ />
+ Upload files
</button>
+ </span>
+ <span
+ [matTooltip]="'You have not permission to create folder'"
+ matTooltipPosition="above"
+ matTooltipDisabled="{{this.bucketStatus.upload}}"
+ >
+ <button
+ mat-raised-button
+ type="button"
+ class="butt"
+ (click)="createFolder(selectedFolder)"
+ [disabled]="!this.bucketStatus.upload || allDisable || !path || isSelectionOpened"
+ >
+ Create folder
+ </button>
+ </span>
+ <span
+ [matTooltip]="'You have not permission to delete data'"
+ matTooltipPosition="above"
+ matTooltipDisabled="{{this.bucketStatus.delete}}"
+ >
+ <button
+ type="button"
+ class="butt"
+ mat-raised-button
+ (click)="fileAction('delete')"
+ [disabled]="(!selected?.length && !selectedFolderForAction?.length) ||
+ !this.bucketStatus.delete || allDisable || !path || isSelectionOpened"
+ >
+ Delete
+ </button>
+ </span>
+ <div class="action-select-wrapper" >
+ <span class="action-button-wrapper">
+ <button
+ type="button"
+ class="butt actions-btn"
+ mat-raised-button
+ [disabled]=" selectedItems?.length !== 1 || allDisable || !path || isSelectionOpened"
+ (click)="toogleActions();$event.stopPropagation()"
+ >
+ Actions <i class="material-icons" >{{ !isActionsOpen ? 'expand_more' : 'expand_less' }}</i>
+ </button>
</span>
- <div class="action-menu" *ngIf="isActionsOpen">
- <span [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">
- <button
- type="button" class="butt action-menu-item"
- [ngClass]="{'disabled': !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable || isSelectionOpened}"
- mat-raised-button
- [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable || isSelectionOpened"
- (click)="fileAction('download');$event.stopPropagation()"
- >
- Download
- </button>
+ <div class="action-menu" *ngIf="isActionsOpen">
+ <span
+ [matTooltip]="'You have not permission to download data'"
+ matTooltipPosition="above"
+ matTooltipDisabled="{{this.bucketStatus.download}}"
+ >
+ <button
+ type="button"
+ class="butt action-menu-item"
+ [ngClass]="{'disabled': !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable || isSelectionOpened}"
+ mat-raised-button
+ [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable || isSelectionOpened"
+ (click)="fileAction('download');$event.stopPropagation()"
+ >
+ Download
+ </button>
</span>
- <button
- type="button" class="butt action-menu-item"
- mat-raised-button
- (click)="copyPath();$event.stopPropagation()"
- >
- Copy path
- </button>
+ <button
+ type="button"
+ class="butt action-menu-item"
+ mat-raised-button
+ (click)="copyPath();$event.stopPropagation()"
+ >
+ Copy path
+ </button>
+ </div>
</div>
</div>
- </div>
<button
mat-raised-button
type="button"
@@ -111,51 +131,70 @@
</div>
<p class="path"><span>Bucket path:</span>
<span class="url ellipsis" [ngClass]="{'cursor-not-allow': bucketDataService.emptyFolder}">
- <span class="path-folder" *ngFor="let folder of this.objectPath">
- <span class="url-icon" *ngIf="this.objectPath.indexOf(folder) !== 0">
- >
- </span>
- <span class="url-folder" (click)="folderTreeComponent.showItem(folder);" [ngClass]="{'not-allowed': bucketDataService.emptyFolder}">{{folder.item}}</span>
- </span>
+ <span class="path-folder" *ngFor="let folder of this.objectPath">
+ <span class="url-icon" *ngIf="this.objectPath.indexOf(folder) !== 0">
+ >
+ </span>
+ <span
+ class="url-folder"
+ (click)="folderTreeComponent.showItem(folder);"
+ [ngClass]="{'not-allowed': bucketDataService.emptyFolder}"
+ >
+ {{folder.item}}
+ </span>
+ </span>
</span>
</p>
<div class="bucket-wrapper" [ngClass]="{'added-upload': addedFiles.length}" id="scrolling">
<div class="bucket-selection" [ngClass]="{'opened': isSelectionOpened}">
<div class="button-wrapper" [ngClass]="{'cursor-not-allow': bucketDataService.emptyFolder}">
- <i (click)="toggleBucketSelection()" class="material-icons close" *ngIf="!isSelectionOpened" [ngClass]="{'not-allowed': bucketDataService.emptyFolder}">chevron_right</i>
+ <i
+ (click)="toggleBucketSelection()"
+ class="material-icons close"
+ *ngIf="!isSelectionOpened"
+ [ngClass]="{'not-allowed': bucketDataService.emptyFolder}"
+ >
+ chevron_right
+ </i>
</div>
<datalab-bucket-tree
- [hidden]="!isSelectionOpened"
- (emitActiveBucket)=openBucket($event)
- [buckets]='buckets'
- [openedBucket]=this.bucketName
- >
- </datalab-bucket-tree>
+ [hidden]="!isSelectionOpened"
+ (emitActiveBucket)=openBucket($event)
+ [buckets]='buckets'
+ [openedBucket]=this.bucketName
+ ></datalab-bucket-tree>
</div>
<div class="navigation scrolling" [ngClass]="{'selection-opened': isSelectionOpened}" [hidden]="!path">
- <datalab-folder-tree
- (showFolderContent)=onFolderClick($event)
- (disableAll)=dissableAll($event)
- [folders]=folders
- [endpoint]=endpoint
- [cloud]="cloud"
- ></datalab-folder-tree>
+ <datalab-folder-tree
+ (showFolderContent)=onFolderClick($event)
+ (disableAll)=dissableAll($event)
+ [folders]=folders
+ [endpoint]=endpoint
+ [cloud]="cloud"
+ ></datalab-folder-tree>
</div>
<div class="directory" [ngClass]="{'selection-opened': isSelectionOpened}" [hidden]="!path">
<div class="folder-item t_header">
<div class="folder-item-wrapper header-wrapper folder-tree header-item">
<div class="name" [ngClass]="{'cursor-not-allow': bucketDataService.emptyFolder}">
- <span class="th_name" (click)="isFilterVisible = true" *ngIf="!isFilterVisible" [ngClass]="{'not-allowed': bucketDataService.emptyFolder}">Name</span>
- <div class="filter-files" *ngIf="isFilterVisible">
- <input _ngcontent-yns-c13=""
- [(ngModel)]="searchValue"
- (keyup)=filterObjects()
- class="form-control filter-field filter-name"
- placeholder="Filter by name" type="text"
- >
+ <span
+ class="th_name"
+ (click)="isFilterVisible = true"
+ *ngIf="!isFilterVisible"
+ [ngClass]="{'not-allowed': bucketDataService.emptyFolder}"
+ >
+ Name
+ </span>
+ <div class="filter-files" *ngIf="isFilterVisible">
+ <input
+ _ngcontent-yns-c13=""
+ [(ngModel)]="searchValue"
+ (keyup)=filterObjects()
+ class="form-control filter-field filter-name"
+ placeholder="Filter by name" type="text"
+ />
<span><i (click)="closeFilterInput()" class="material-icons close">close</i></span>
</div>
-
</div>
<div class="size"><span class="th_size">Size</span></div>
<div class="date"><span class="th_date">Last modified</span></div>
@@ -168,30 +207,32 @@
<datalab-checkbox
[checked]="file.isFolderSelected"
(toggleSelection)="toggleSelectedFile(file, 'folder')"
+ ></datalab-checkbox>
+ <i class="material-icons folder-icon folder-name">folder</i>
+ <span
+ class="item-name name-wrap ellipsis"
+ matTooltip="{{file.item}}"
+ matTooltipPosition="above"
+ matTooltipShowDelay="1000"
+ [matTooltipClass]="'full-size-tooltip'"
>
- </datalab-checkbox>
-
- <i class="material-icons folder-icon folder-name">folder</i>
- <span class="item-name name-wrap ellipsis"
- matTooltip="{{file.item}}"
- matTooltipPosition="above"
- matTooltipShowDelay="1000"
- [matTooltipClass]="'full-size-tooltip'"
- >
- {{file.item}}
+ {{file.item}}
</span>
</div>
<div class="size size-folder">-</div>
<div class="date" *ngIf="!file.isDownloading">-</div>
</div>
- <div class="folder-item-wrapper" (click)="toggleSelectedFile(file, 'file')" *ngIf="!file.children && file.item !== 'ا'">
+ <div
+ class="folder-item-wrapper"
+ (click)="toggleSelectedFile(file, 'file')"
+ *ngIf="!file.children && file.item !== 'ا'"
+ >
<div class="name name-file">
<datalab-checkbox
[checked]="file.isSelected"
[disabled]="file.isDownloading"
(toggleSelection)="toggleSelectedFile(file, 'file')"
- >
- </datalab-checkbox>
+ ></datalab-checkbox>
<i class="material-icons folder-icon" >description</i>
<span
class="item-name name-wrap ellipsis"
@@ -208,8 +249,7 @@
<div class="progress-wrapper" *ngIf="file.isDownloading">
<div class="progres">
<span class="progress-bar-text">{{file.progress || 0}}% Downloading...</span>
- <div class="bar" [ngStyle]="{width: file.progress + '%'}">
- </div>
+ <div class="bar" [ngStyle]="{width: file.progress + '%'}"></div>
</div>
</div>
</div>
@@ -218,7 +258,7 @@
</div>
<div class="loading-block" *ngIf="!path">
<div class="uploading">
- <p>Please wait until DataLab loads bucket: <span class="strong">{{bucketName}}</span>...</p>
+ <p>Please wait until DataLab loads bucket: <span class="strong">{{bucketName}}</span>...</p>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
</div>
@@ -226,8 +266,19 @@
<div class="upload-window" *ngIf="addedFiles.length">
<header class="upload-header">
<h4 class="modal-title">Upload files</h4>
- <span class="close" matTooltip="Upload is still in progress, please wait." matTooltipPosition="above" [ngClass]="{'not-allow': isFileUploading}" [matTooltipDisabled]="!isFileUploading">
- <button type="button" class="close" (click)="closeUploadWindow()" [disabled]="isFileUploading" [ngClass]="{'not-allow': isFileUploading}" >×</button>
+ <span
+ class="close"
+ matTooltip="Upload is still in progress, please wait."
+ matTooltipPosition="above"
+ [ngClass]="{'not-allow': isFileUploading}" [matTooltipDisabled]="!isFileUploading"
+ >
+ <button
+ type="button"
+ class="close"
+ (click)="closeUploadWindow()"
+ [disabled]="isFileUploading"
+ [ngClass]="{'not-allow': isFileUploading}"
+ >×</button>
</span>
</header>
<ul class="upload-files scrolling">
@@ -239,7 +290,6 @@
<div class="state"></div>
<div class="remove"></div>
</div>
-
</li>
<li *ngFor="let file of addedFiles" class="file">
<div class="name">
@@ -254,15 +304,21 @@
</div>
<div class="second-block">
<div class="upload-path">
- <span class="ellipsis" matTooltip="{{file.path}}" matTooltipPosition="above" [matTooltipClass]="'full-size-tooltip'">{{file.path}}</span>
+ <span
+ class="ellipsis"
+ matTooltip="{{file.path}}"
+ matTooltipPosition="above"
+ [matTooltipClass]="'full-size-tooltip'"
+ >
+ {{file.path}}
+ </span>
</div>
<div class="size">{{file.size | convertFileSize}} </div>
<div class="state">
<span *ngIf="file.status === 'uploaded'" class="running">Uploaded</span>
<div class="progres" *ngIf="file.status === 'uploading'">
<span class="progress-bar-text">{{file.progress || 0}}% Uploading...</span>
- <div class="bar" [ngStyle]="{width: file.progress + '%'}">
- </div>
+ <div class="bar" [ngStyle]="{width: file.progress + '%'}"></div>
</div>
<span *ngIf="file.status === 'failed'" class="error">Failed</span>
<span *ngIf="file.status === 'waiting'" class="stopped">Waiting for uploading...</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
index f8e6e11..d5a4eee 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
@@ -25,53 +25,55 @@
font-size: 14px;
font-weight: 400;
- .loading-block{
- width: 80%;
- margin: 0 auto;
+ .loading-block {
display: flex;
align-items: center;
justify-content: center;
+ width: 80%;
height: 100%;
- .uploading{
+ margin: 0 auto;
+
+ .uploading {
width: 100%;
- text-align: center;
padding-bottom: 50px;
- p{
+ text-align: center;
+
+ p {
margin-bottom: 20px;
}
}
}
- .path{
+ .path {
+ display: flex;
margin: 0 4px 30px 0;
padding: 4px 4px 4px 0;
- color: rgba(0,0,0,.87);
+ color: rgba(0, 0, 0, 0.87);
overflow: hidden;
white-space: nowrap;
- display: flex;
- &-folder{
+ &-folder {
position: relative;
}
- .url{
+ .url {
+ display: block;
font-weight: 600;
overflow: hidden;
- display: block;
direction: rtl;
- &-folder{
- padding-left: 5px;
- padding-right: 5px;
- color: #00bcd4;
- cursor: pointer;
+ &-folder {
+ padding-left: 5px;
+ padding-right: 5px;
+ color: #00bcd4;
+ cursor: pointer;
- &:first-of-type{
- padding-left: 5px;
- }
- }
+ &:first-of-type {
+ padding-left: 5px;
+ }
+ }
- &-icon{
+ &-icon {
color: lightgrey;
}
}
@@ -79,7 +81,7 @@
bottom: 0;
- .dialog-content{
+ .dialog-content {
padding: 0 35px;
}
@@ -87,48 +89,48 @@
height: 500px;
}
- .submit{
+ .submit {
display: flex;
justify-content: space-between;
- .left-side-butts{
+ .left-side-butts {
display: flex;
}
- .butt:not(.action-menu-item){
+ .butt:not(.action-menu-item) {
position: relative;
- overflow: hidden;
margin: 10px;
+ overflow: hidden;
- &.actions-btn{
+ &.actions-btn {
margin: 10px 10px 0 10px;
padding-right: 38px;
- .material-icons{
- transition: ease-in-out 1s;
- font-size: 25px;
- position: absolute;
- top: 7px;
- right: 30px;
- }
+ .material-icons {
+ position: absolute;
+ top: 7px;
+ right: 30px;
+ font-size: 25px;
+ transition: ease-in-out 1s;
+ }
}
- &.first-btn{
+ &.first-btn {
margin-left: 0;
}
- &.refresh{
+ &.refresh {
margin-right: 0;
}
- &.action-menu-item{
- &:hover{
- color: #00bcd4;
+ &.action-menu-item {
+ &:hover {
+ color: #00bcd4;
background-color: #fafafa;
}
- &.disabled{
- &:hover{
+ &.disabled {
+ &:hover {
color: #577289;
}
}
@@ -137,266 +139,264 @@
}
}
-.bucket-wrapper{
- height: 57vh;
- border: 2px solid rgba(0,0,0,.12);
- border-radius: 5px;
+.bucket-wrapper {
display: flex;
width: 100%;
+ height: 57vh;
+ border: 2px solid rgba(0, 0, 0, 0.12);
+ border-radius: 5px;
- &.added-upload{
+ &.added-upload {
height: 40vh;
}
- .bucket-selection{
- position: relative;
- width: 2%;
- border-right: 2px solid rgba(0,0,0,.12);
- padding-top: 6px;
- transition: .2s;
- &.opened{
- width: 33.3%;
-
- .button-wrapper {
- text-align: right;
- left: auto;
-
- i{
- padding-right: 3px;
- }
- }
- }
-
- .button-wrapper {
- position: absolute;
- left: 0;
- right: 0;
- top: 9px;
- text-align: center;
-
- i{
- cursor: pointer;
- font-size: 18px;
-
- &:hover{
- color: #00bcd4;
- }
- }
- }
- }
-
- }
-
- .navigation{
- transition: .2s;
- width: 31.3%;
- height: 100%;
- overflow: auto;
- padding-top: 6px;
-
- &.selection-opened{
- width: 66.7%;
- }
-
- .folder-tree{
- .folder{
- line-height: 30px;
- }
- }
-
- .mat-tree-node{
- min-height: auto;
- }
- }
-
- .directory{
- width: 66.7%;
- max-height: 100%;
- font-size: 14px;
- font-weight: 400;
+ .bucket-selection {
position: relative;
- border-left: 2px solid rgba(0,0,0,.12);
+ width: 2%;
+ padding-top: 6px;
+ border-right: 2px solid rgba(0, 0, 0, 0.12);
+ transition: 0.2s;
- &.selection-opened{
- display: none;
+ &.opened {
+ width: 33.3%;
+
+ .button-wrapper {
+ text-align: right;
+ left: auto;
+
+ i {
+ padding-right: 3px;
+ }
+ }
}
- .folder-tree{
- overflow-x: auto;
- overflow-y: overlay;
- max-height: 100%;
- padding: 6px 15px 15px 15px;
-
- .name{
- width: 60%;
- display: flex;
- align-items: center;
- overflow: hidden;
-
- .name-wrap {
- overflow: hidden;
- white-space: nowrap;
- padding-right: 10px;
- }
-
- &-folder{
- .folder-name{
- padding-left: 8px;
- }
- }
-
- &-file{
- i{
- transform: translateX(6px);
- }
- span.item-name{
- padding-left: 4px;
-
- &.removed-checkbox{
- padding-left: 4px;
- }
- }
- }
- }
-
- .size{
- width: 15%;
-
- &-folder{
- padding-left: 4px;
- }
- }
-
- .date{
- width: 25%;
-
- .th_date{
- font-size: 13px;
- }
- }
-
- .progress-wrapper{
- flex:1;
- }
-
- .material-icons.close{
- font-size: 15px;
- margin: 0 10px;
- cursor: pointer;
- }
- }
- }
-
- .folder-item{
- display: flex;
- align-items: center;
-
- &.t_header{
- top: -41px;
+ .button-wrapper {
position: absolute;
left: 0;
right: 0;
+ top: 9px;
+ text-align: center;
- .folder-item-wrapper{
- height: 52px;
- }
-
- .th_name{
- padding-left: 29px;
- font-size: 14px;
+ i {
cursor: pointer;
+ font-size: 18px;
- &:hover{
+ &:hover {
color: #00bcd4;
}
}
+ }
+ }
+}
- .filter-files{
- width: 100%;
- padding: 3px 0;
- padding-left: 3px;
- display: flex;
- align-items: center;
+.navigation {
+ width: 31.3%;
+ height: 100%;
+ padding-top: 6px;
+ overflow: auto;
+ transition: 0.2s;
- .filter-name{
- font-size: 14px;
- height: 20px;
- width: 90%;
+ &.selection-opened {
+ width: 66.7%;
+ }
+
+ .folder-tree {
+ .folder {
+ line-height: 30px;
+ }
+ }
+
+ .mat-tree-node {
+ min-height: auto;
+ }
+}
+
+.directory {
+ position: relative;
+ width: 66.7%;
+ max-height: 100%;
+ font-size: 14px;
+ font-weight: 400;
+ border-left: 2px solid rgba(0, 0, 0, 0.12);
+
+ &.selection-opened {
+ display: none;
+ }
+
+ .folder-tree {
+ max-height: 100%;
+ padding: 6px 15px 15px 15px;
+ overflow-x: auto;
+ overflow-y: overlay;
+
+ .name {
+ display: flex;
+ align-items: center;
+ width: 60%;
+ overflow: hidden;
+
+ .name-wrap {
+ padding-right: 10px;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ &-folder {
+ .folder-name {
+ padding-left: 8px;
}
+ }
- span{
- transform: translateY(2px);
+ &-file {
+ i {
+ transform: translateX(6px);
+ }
+ span.item-name {
+ padding-left: 4px;
- &:hover{
- i{
- color: #00bcd4;
- }
+ &.removed-checkbox {
+ padding-left: 4px;
}
}
}
+ }
- .th_size{
- font-size: 14px;
- padding-left: 3px;
- cursor: auto;
- }
+ .size {
+ width: 15%;
- .th_date{
- font-size: 14px !important;
- cursor: auto;
+ &-folder {
+ padding-left: 4px;
}
}
- .folder-item-wrapper{
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- cursor: pointer;
- color: rgba(0,0,0,.87);
- &.header-item{
- cursor: auto;
+ .date {
+ width: 25%;
- .name{
- margin-left: -3px;
- }
+ .th_date {
+ font-size: 13px;
+ }
+ }
- }
+ .progress-wrapper {
+ flex: 1;
+ }
- i{
- color: rgb(232, 232, 232);
- }
+ .material-icons.close {
+ font-size: 15px;
+ margin: 0 10px;
+ cursor: pointer;
+ }
+ }
+}
- &:hover:not(.header-wrapper){
- color: #00bcd4;
- transition: .3s ease-in-out;
- i{
- color: #00bcd4;
- transition: .3s ease-in-out;
- }
+.folder-item {
+ display: flex;
+ align-items: center;
- .empty-checkbox{
- border-color: #00bcd4
- }
+ &.t_header {
+ position: absolute;
+ top: -41px;
+ left: 0;
+ right: 0;
- .progress-wrapper{
+ .folder-item-wrapper {
+ height: 52px;
+ }
- .progres{
- border-color: #00bcd4 !important;
- }
- }
- }
- }
- }
+ .th_name {
+ padding-left: 29px;
+ font-size: 14px;
+ cursor: pointer;
+
+ &:hover {
+ color: #00bcd4;
+ }
+ }
+
+ .filter-files {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 3px 0 3px 3px;
+
+ .filter-name {
+ height: 20px;
+ width: 90%;
+ font-size: 14px;
+ }
+
+ span {
+ transform: translateY(2px);
+
+ &:hover {
+ i {
+ color: #00bcd4;
+ }
+ }
+ }
+ }
+
+ .th_size {
+ padding-left: 3px;
+ font-size: 14px;
+ cursor: auto;
+ }
+
+ .th_date {
+ font-size: 14px !important;
+ cursor: auto;
+ }
+ }
+ .folder-item-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ cursor: pointer;
+ color: rgba(0, 0, 0, 0.87);
+
+ &.header-item {
+ cursor: auto;
+
+ .name {
+ margin-left: -3px;
+ }
+ }
+
+ i {
+ color: rgb(232, 232, 232);
+ }
+
+ &:hover:not(.header-wrapper) {
+ color: #00bcd4;
+ transition: 0.3s ease-in-out;
+
+ i {
+ color: #00bcd4;
+ transition: 0.3s ease-in-out;
+ }
+
+ .empty-checkbox {
+ border-color: #00bcd4;
+ }
+
+ .progress-wrapper {
+ .progres {
+ border-color: #00bcd4 !important;
+ }
+ }
+ }
+ }
+}
.empty-checkbox {
+ position: relative;
min-width: 16px;
width: 16px;
height: 16px;
+ margin-top: 2px;
border-radius: 2px;
border: 2px solid lightgrey;
- margin-top: 2px;
- position: relative;
&.checked {
border-color: #35afd5;
@@ -404,19 +404,19 @@
}
.checked-checkbox {
+ position: absolute;
top: 0;
left: 4px;
width: 5px;
height: 10px;
border-bottom: 2px solid white;
border-right: 2px solid white;
- position: absolute;
transform: rotate(45deg);
}
}
-.folder-item-name{
- span{
+.folder-item-name {
+ span {
color: #000;
}
@@ -426,19 +426,19 @@
}
.upload-window {
+ height: 15vh;
margin-top: 2vh;
- border: 2px solid rgba(0, 0, 0, .12);
+ border: 2px solid rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: white;
- height: 15vh;
color: black;
.upload-header {
+ position: relative;
+ height: 30px;
padding-left: 8px;
background: #f6fafe;
- height: 30px;
line-height: 30px;
- position: relative;
.modal-title {
width: 90%;
@@ -452,7 +452,7 @@
background: #f6fafe;
&::after {
- content: '';
+ content: "";
display: block;
}
}
@@ -479,14 +479,6 @@
}
}
-.events-none{
+.events-none {
pointer-events: none;
}
-
-
-
-
-
-
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
index 6a6aacd..507ac2a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
@@ -17,21 +17,21 @@
* under the License.
*/
-import {Component, OnInit, ViewChild, Inject, OnDestroy} from '@angular/core';
+import { Component, OnInit, ViewChild, Inject, OnDestroy } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
-import {ApplicationSecurityService, ManageUngitService, StorageService} from '../../core/services';
+import { ApplicationSecurityService, ManageUngitService, StorageService } from '../../core/services';
-import {FolderTreeComponent} from './folder-tree/folder-tree.component';
-import {BucketBrowserService, TodoItemNode} from '../../core/services/bucket-browser.service';
-import {FileUtils, HelpUtils} from '../../core/util';
-import {BucketDataService} from './bucket-data.service';
-import {BucketConfirmationDialogComponent} from './bucket-confirmation-dialog/bucket-confirmation-dialog.component';
-import {HttpEventType} from '@angular/common/http';
-import {CopyPathUtils} from '../../core/util/copyPathUtils';
-import {Subject} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import { FolderTreeComponent } from './folder-tree/folder-tree.component';
+import { BucketBrowserService } from '../../core/services/bucket-browser.service';
+import { FileUtils, HelpUtils } from '../../core/util';
+import { BucketDataService } from './bucket-data.service';
+import { BucketConfirmationDialogComponent } from './bucket-confirmation-dialog/bucket-confirmation-dialog.component';
+import { HttpEventType } from '@angular/common/http';
+import { CopyPathUtils } from '../../core/util/copyPathUtils';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'datalab-bucket-browser',
@@ -69,7 +69,7 @@
public isFileUploading: boolean;
public cloud: string;
- @ViewChild(FolderTreeComponent, {static: true}) folderTreeComponent;
+ @ViewChild(FolderTreeComponent, { static: true }) folderTreeComponent;
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
@@ -82,9 +82,7 @@
public bucketDataService: BucketDataService,
private auth: ApplicationSecurityService,
private storage: StorageService,
- ) {
-
- }
+ ) { }
ngOnInit() {
this.bucketName = this.data.bucket;
@@ -113,10 +111,10 @@
takeUntil(this.unsubscribe$)
)
.subscribe(tokens => {
- this.storage.storeTokens(tokens);
- this.isTokenRefreshing = false;
- this.sendFile();
- });
+ this.storage.storeTokens(tokens);
+ this.isTokenRefreshing = false;
+ this.sendFile();
+ });
}
public showItem(item): void {
@@ -130,7 +128,9 @@
public toggleSelectedFile(file, type): void {
console.log(file, type);
- type === 'file' ? file.isSelected = !file.isSelected : file.isFolderSelected = !file.isFolderSelected;
+ type === 'file'
+ ? file.isSelected = !file.isSelected
+ : file.isFolderSelected = !file.isFolderSelected;
this.selected = this.folderItems.filter(item => item.isSelected);
this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected);
this.selectedItems = [...this.selected, ...this.selectedFolderForAction];
@@ -156,15 +156,18 @@
if (toMany) {
files.length = 50;
}
+
if (toBigFile || toMany) {
- this.dialog.open(BucketConfirmationDialogComponent, {data: {
- items: {toBig: toBigFile, toMany: toMany}, type: 'upload_limitation'
- } , width: '550px'})
+ this.dialog.open(BucketConfirmationDialogComponent, {
+ data: {
+ items: { toBig: toBigFile, toMany: toMany }, type: 'upload_limitation'
+ }, width: '550px'
+ })
.afterClosed().subscribe((res) => {
- if (res) {
- this.checkQueue(files);
- }
- });
+ if (res) {
+ this.checkQueue(files);
+ }
+ });
} else {
this.checkQueue(files);
}
@@ -235,7 +238,7 @@
async openResolveDialog(existFile) {
const dialog = this.dialog.open(BucketConfirmationDialogComponent, {
- data: {items: existFile, type: 'resolve_conflicts'} , width: '550px'
+ data: { items: existFile, type: 'resolve_conflicts' }, width: '550px'
});
return dialog.afterClosed().toPromise().then(result => {
return Promise.resolve(result);
@@ -257,7 +260,9 @@
this.objectPath = event.pathObject;
this.path = event.path;
this.originFolderItems = this.folderItems.map(v => v);
- this.pathInsideBucket = this.path.indexOf('/') !== -1 ? this.path.slice(this.path.indexOf('/') + 1) + '/' : '';
+ this.pathInsideBucket = this.path.indexOf('/') !== -1
+ ? this.path.slice(this.path.indexOf('/') + 1) + '/'
+ : '';
this.folderItems.forEach(item => item.isSelected = false);
}
}
@@ -275,17 +280,17 @@
}
public deleteAddedFile(file): void {
- if ( file.subscr && file.request) {
- this.dialog.open(BucketConfirmationDialogComponent, {data: {items: file, type: 'cancel'} , width: '550px'})
+ if (file.subscr && file.request) {
+ this.dialog.open(BucketConfirmationDialogComponent, { data: { items: file, type: 'cancel' }, width: '550px' })
.afterClosed().subscribe((res) => {
res && file.subscr.unsubscribe();
res && this.addedFiles.splice(this.addedFiles.indexOf(file), 1);
this.isFileUploading = this.addedFiles.some(v => v.status === 'uploading');
this.sendFile();
- }, () => {
- this.isFileUploading = this.addedFiles.some(v => v.status === 'uploading');
- this.sendFile();
- });
+ }, () => {
+ this.isFileUploading = this.addedFiles.some(v => v.status === 'uploading');
+ this.sendFile();
+ });
} else {
this.addedFiles.splice(this.addedFiles.indexOf(file), 1);
this.isFileUploading = this.addedFiles.some(v => v.status === 'uploading');
@@ -294,7 +299,7 @@
}
private uploadNewFile(file): void {
- const path = file.path.indexOf('/') !== -1 ? this.path.slice(this.path.indexOf('/') + 1) : '';
+ const path = file.path.indexOf('/') !== -1 ? this.path.slice(this.path.indexOf('/') + 1) : '';
const fullPath = path ? `${path}/${file.name}` : file.name;
const formData = new FormData();
formData.append('size', file.file.size);
@@ -317,39 +322,43 @@
if ((this.refreshTokenLimit > this.getTokenValidTime()) && !this.isTokenRefreshing) {
this.refreshToken();
}
+
if (waitUploading.length && uploading.length < this.uploadingQueueLength) {
if (!file) {
file = waitUploading[0];
}
+
file.status = 'uploading';
this.isFileUploading = this.addedFiles.some(v => v.status === 'uploading');
this.isQueueFull = this.addedFiles.some(v => v.status === 'waiting');
- file.subscr = file.request.subscribe((event: any) => {
- if (event.type === HttpEventType.UploadProgress) {
- file.progress = Math.round(95 * event.loaded / event.total);
- if (file.progress === 95 && !file.interval) {
- file.interval = setInterval(() => {
- if (file.progress < 99) {
- return file.progress++;
- }
- }, file.size < 1094967296 ? 12000 : 20000);
+ file.subscr = file.request
+ .subscribe(
+ (event: any) => {
+ if (event.type === HttpEventType.UploadProgress) {
+ file.progress = Math.round(95 * event.loaded / event.total);
+ if (file.progress === 95 && !file.interval) {
+ file.interval = setInterval(() => {
+ if (file.progress < 99) {
+ return file.progress++;
+ }
+ }, file.size < 1094967296 ? 12000 : 20000);
+ }
+ } else if (event['type'] === HttpEventType.Response) {
+ window.clearInterval(file.interval);
+ file.status = 'uploaded';
+ delete file.request;
+ this.sendFile(this.addedFiles.find(v => v.status === 'waiting'));
+ this.bucketDataService.refreshBucketdata(this.bucketName, this.endpoint);
}
- } else if (event['type'] === HttpEventType.Response) {
+ },
+ error => {
window.clearInterval(file.interval);
- file.status = 'uploaded';
+ file.status = 'failed';
delete file.request;
this.sendFile(this.addedFiles.find(v => v.status === 'waiting'));
- this.bucketDataService.refreshBucketdata(this.bucketName, this.endpoint);
}
- }, error => {
- window.clearInterval(file.interval);
- file.status = 'failed';
- delete file.request;
- this.sendFile(this.addedFiles.find(v => v.status === 'waiting'));
- }
- );
+ );
}
-
}
public refreshBucket(): void {
@@ -391,7 +400,8 @@
.pipe(
takeUntil(this.unsubscribe$)
)
- .subscribe(event => {
+ .subscribe(
+ event => {
if (event['type'] === HttpEventType.DownloadProgress) {
selected[0].progress = Math.round(100 * event['loaded'] / selected[0].object.size);
}
@@ -402,7 +412,8 @@
selected[0].progress = 0;
}, 1000);
}
- }, error => {
+ },
+ error => {
this.toastr.error(error.message || 'File downloading error!', 'Oops!');
selected[0]['isDownloading'] = false;
}
@@ -417,24 +428,24 @@
dataForServer.push(...this.bucketDataService.serverData.map(v => v.object).filter(v => v.indexOf(object) === 0));
});
dataForServer = [...dataForServer, ...objects].filter((v, i, arr) => i === arr.indexOf(v));
- this.dialog.open(BucketConfirmationDialogComponent, {data: {items: itemsForDeleting, type: 'delete'} , width: '550px'})
+ this.dialog.open(BucketConfirmationDialogComponent, { data: { items: itemsForDeleting, type: 'delete' }, width: '550px' })
.afterClosed().subscribe((res) => {
- !res && this.clearSelection();
- res && this.bucketBrowserService.deleteFile({
- bucket: this.bucketName, endpoint: this.endpoint, 'objects': dataForServer
- })
- .pipe(
- takeUntil(this.unsubscribe$)
- )
- .subscribe(() => {
- this.bucketDataService.refreshBucketdata(this.bucketName, this.endpoint);
- this.toastr.success('Objects successfully deleted!', 'Success!');
- this.clearSelection();
- }, error => {
- this.toastr.error(error.message || 'Objects deleting error!', 'Oops!');
- this.clearSelection();
+ !res && this.clearSelection();
+ res && this.bucketBrowserService.deleteFile({
+ bucket: this.bucketName, endpoint: this.endpoint, 'objects': dataForServer
+ })
+ .pipe(
+ takeUntil(this.unsubscribe$)
+ )
+ .subscribe(() => {
+ this.bucketDataService.refreshBucketdata(this.bucketName, this.endpoint);
+ this.toastr.success('Objects successfully deleted!', 'Success!');
+ this.clearSelection();
+ }, error => {
+ this.toastr.error(error.message || 'Objects deleting error!', 'Oops!');
+ this.clearSelection();
+ });
});
- });
}
}
@@ -473,8 +484,4 @@
this.searchValue = '';
this.filterObjects();
}
-
}
-
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.module.ts
index 21deedf..7f9260f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.module.ts
@@ -25,31 +25,31 @@
import { ResourcesGridModule } from '../resources-grid';
import { ExploratoryEnvironmentCreateModule } from '../exploratory/create-environment';
-import {BucketBrowserComponent} from './bucket-browser.component';
-import {FolderTreeComponent} from './folder-tree/folder-tree.component';
-import {MatTreeModule} from '@angular/material/tree';
-import {BucketDataService} from './bucket-data.service';
-import {BucketConfirmationDialogComponent} from './bucket-confirmation-dialog/bucket-confirmation-dialog.component';
-import {BucketTreeComponent} from './buckets-tree/bucket-tree.component';
-import {ConvertFileSizePipeModule} from '../../core/pipes/convert-file-size';
-import {LocalDatePipeModule} from '../../core/pipes/local-date-pipe';
-import {ConvertActionPipeModule} from '../../core/pipes/convert-action-pipe';
-import {CheckboxModule} from '../../shared/checkbox';
+import { BucketBrowserComponent } from './bucket-browser.component';
+import { FolderTreeComponent } from './folder-tree/folder-tree.component';
+import { MatTreeModule } from '@angular/material/tree';
+import { BucketDataService } from './bucket-data.service';
+import { BucketConfirmationDialogComponent } from './bucket-confirmation-dialog/bucket-confirmation-dialog.component';
+import { BucketTreeComponent } from './buckets-tree/bucket-tree.component';
+import { ConvertFileSizePipeModule } from '../../core/pipes/convert-file-size';
+import { LocalDatePipeModule } from '../../core/pipes/local-date-pipe';
+import { ConvertActionPipeModule } from '../../core/pipes/convert-action-pipe';
+import { CheckboxModule } from '../../shared/checkbox';
@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- ResourcesGridModule,
- ExploratoryEnvironmentCreateModule,
- MaterialModule,
- MatTreeModule,
- ConvertFileSizePipeModule,
- LocalDatePipeModule,
- ConvertActionPipeModule,
- CheckboxModule
- ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ ResourcesGridModule,
+ ExploratoryEnvironmentCreateModule,
+ MaterialModule,
+ MatTreeModule,
+ ConvertFileSizePipeModule,
+ LocalDatePipeModule,
+ ConvertActionPipeModule,
+ CheckboxModule
+ ],
declarations: [
BucketBrowserComponent,
FolderTreeComponent,
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
index 3d31f7d..b9e5253 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
@@ -21,7 +21,7 @@
<header class="dialog-header">
<h4 class="modal-title">
- <span>{{ data.type.toUpperCase() | convertaction}} </span>
+ <span>{{ data.type.toUpperCase() | convertaction}} </span>
</h4>
<button type="button" class="close" (click)="dialogRef.close()">×</button>
</header>
@@ -42,11 +42,15 @@
<div class="object">
<span *ngIf="object['children']"><i class="material-icons folder-icon" >folder</i></span>
<span *ngIf="!object['children']"><i class="material-icons folder-icon file-icon" >description</i></span>
- <div class="ellipsis"
- matTooltip="{{object['item']}}"
- matTooltipPosition="above"
- matTooltipShowDelay="1000"
- [matTooltipClass]="'full-size-tooltip'">{{object['item']}}</div>
+ <div
+ class="ellipsis"
+ matTooltip="{{object['item']}}"
+ matTooltipPosition="above"
+ matTooltipShowDelay="1000"
+ [matTooltipClass]="'full-size-tooltip'"
+ >
+ {{object['item']}}
+ </div>
</div>
<div class="size">{{object['children'] ? '-' : object['object'].size | convertFileSize}}</div>
</mat-list-item>
@@ -67,30 +71,51 @@
<div *ngIf="data.type === 'resolve_conflicts'">
<p>
<span
- class="strong upload-item-name ellipsis"
- matTooltip="{{data.items}}"
- matTooltipPosition="above"
- matTooltipShowDelay="1000"
- [matTooltipClass]="'full-size-tooltip'"
- >{{data.items}}</span> already exists in selected folder. How would you like to resolve this conflict?</p>
+ class="strong upload-item-name ellipsis"
+ matTooltip="{{data.items}}"
+ matTooltipPosition="above"
+ matTooltipShowDelay="1000"
+ [matTooltipClass]="'full-size-tooltip'"
+ >
+ {{data.items}}
+ </span> already exists in selected folder. How would you like to resolve this conflict?
+ </p>
+
<mat-radio-group
aria-labelledby="upload-radio-group-label"
class="upload-radio-group"
- [(ngModel)]="fileAction">
- <mat-radio-button class="upload-radio-button" *ngFor="let action of uploadActions" [value]="action">
+ [(ngModel)]="fileAction"
+ >
+ <mat-radio-button
+ class="upload-radio-button"
+ *ngFor="let action of uploadActions"
+ [value]="action"
+ >
{{action}}
</mat-radio-button>
</mat-radio-group>
+
<div class="repeat-for-all" >
- <div class="empty-checkbox" [ngClass]="{'checked': actionForAll}" (click)="toggleActionForAll();$event.stopPropagation()" >
+ <div
+ class="empty-checkbox"
+ [ngClass]="{'checked': actionForAll}"
+ (click)="toggleActionForAll();$event.stopPropagation()"
+ >
<span class="checked-checkbox" *ngIf="actionForAll"></span>
</div>
- <span class="repeat-message" (click)="toggleActionForAll();$event.stopPropagation()">Repeat for all remaining conflicts</span>
+ <span
+ class="repeat-message"
+ (click)="toggleActionForAll();$event.stopPropagation()"
+ >
+ Repeat for all remaining conflicts
+ </span>
</div>
</div>
<div *ngIf="data.type === 'cancel'">
- <p class="upload-message"><span>Cancel uploading file </span> <span class="strong ellipsis upload-item-name">{{data.items.name}}.</span></p>
+ <p class="upload-message">
+ <span>Cancel uploading file </span> <span class="strong ellipsis upload-item-name">{{data.items.name}}.</span>
+ </p>
<div class="text-center m-top-20">
<span class="strong">Do you want to proceed?</span>
</div>
@@ -105,15 +130,42 @@
</div>
<div class="text-center m-top-20" *ngIf="data.type === 'delete' || data.type === 'cancel' || data.type === 'upload_limitation'">
- <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">No</button>
- <button mat-raised-button type="button" class="butt butt-success action" (click)="dialogRef.close(true)">Yes</button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="dialogRef.close()"
+ >
+ No
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-success action"
+ (click)="dialogRef.close(true)"
+ >
+ Yes
+ </button>
</div>
<div class="text-center m-top-20" *ngIf="data.type === 'resolve_conflicts'">
- <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
- <button mat-raised-button type="button" class="butt butt-success action" (click)="submitResolving()">Continue</button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="dialogRef.close()"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-success action"
+ (click)="submitResolving()"
+ >
+ Continue
+ </button>
</div>
-
</div>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
index ab9ade2..554bdc3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
@@ -18,94 +18,107 @@
*/
.confirmation-dialog {
+ color: #718ba6;
- .folder-icon{
- color: rgb(232, 232, 232);
+ .folder-icon {
margin-right: 3px;
+ color: rgb(232, 232, 232);
transform: translateX(-2px);
- &.file-icon{
+
+ &.file-icon {
transform: translateX(-4px);
margin-right: -2px;
}
}
- h3{
+
+ h3 {
margin-bottom: 20px;
}
- color: #718ba6;
+
p {
+ margin: 0 0 10px;
font-size: 14px;
font-weight: 400;
- margin: 0;
- margin-bottom: 10px;
- &.upload-limit-message{
+
+ &.upload-limit-message {
text-align: center;
color: red;
font-size: 14px;
}
+
&.info {
font-weight: 500;
}
}
+
.resources {
- .mat-list-base .mat-list-item.delete-item{
+ .mat-list-base .mat-list-item.delete-item {
height: 30px;
}
.object {
- width: 70%;
display: flex;
align-items: center;
+ width: 70%;
padding-right: 10px;
}
.size {
width: 30%;
}
+
.scrolling-content.delete-list {
max-height: 200px;
- overflow-y: auto;
padding-top: 11px;
+ overflow-y: auto;
}
}
.list-header {
+ width: 100%;
border-top: 1px solid #edf1f5;
border-bottom: 1px solid #edf1f5;
color: #577289;
- width: 100%;
}
- .bottom-message{
+ .bottom-message {
padding-top: 20px;
text-align: center;
- .confirm-message{
+
+ .confirm-message {
+ min-height: 18px;
+ padding-top: 20px;
color: #ef5c4b;
font-size: 13px;
- min-height: 18px;
text-align: center;
- padding-top: 20px}
+ }
}
-.upload-item-name{
- max-width: 300px;
- display: inline-flex;
-}
-.mat-radio-button{
- font-family: inherit;
- .mat-radio-ripple{
- display: none;
+ .upload-item-name {
+ display: inline-flex;
+ max-width: 300px;
}
-}
- .upload-radio-group{
+
+ .mat-radio-button {
+ font-family: inherit;
+ .mat-radio-ripple {
+ display: none;
+ }
+ }
+
+ .upload-radio-group {
display: flex;
flex-direction: column;
+
.upload-radio-button {
padding: 10px 0;
.mat-radio-container {
width: 15px;
height: 15px;
- .mat-radio-outer-circle, .mat-radio-inner-circle {
+
+ .mat-radio-outer-circle,
+ .mat-radio-inner-circle {
width: 15px;
height: 15px;
border-color: lightgrey;
@@ -123,47 +136,53 @@
}
}
}
- .repeat-for-all{
+
+ .repeat-for-all {
display: flex;
margin-top: 15px;
margin-bottom: 40px;
- .repeat-message{
+
+ .repeat-message {
padding-left: 5px;
cursor: pointer;
}
}
+
.empty-checkbox {
+ position: relative;
min-width: 16px;
width: 16px;
height: 16px;
+ margin-top: 2px;
border-radius: 2px;
border: 2px solid lightgrey;
- margin-top: 2px;
- position: relative;
cursor: pointer;
+
&.checked {
border-color: #35afd5;
background-color: #35afd5;
}
+
.checked-checkbox {
+ position: absolute;
top: 0;
left: 4px;
width: 5px;
height: 10px;
border-bottom: 2px solid white;
border-right: 2px solid white;
- position: absolute;
transform: rotate(45deg);
}
}
}
-.upload-message{
+
+.upload-message {
display: flex;
justify-content: center;
- .upload-item-name{
- max-width: 340px;
+
+ .upload-item-name {
display: block;
+ max-width: 340px;
padding-left: 4px;
}
-}
-
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.ts
index 7c8e49a..33620d0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.ts
@@ -33,13 +33,12 @@
uploadActions = ['Replace existing object', 'Skip uploading object'];
fileAction: string = this.uploadActions[1];
actionForAll: boolean = false;
+
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<BucketConfirmationDialogComponent>,
public toastr: ToastrService
- ) {
-
- }
+ ) { }
ngOnInit() {
if (this.data.type === 'delete') {
@@ -52,7 +51,11 @@
}
submitResolving() {
- const submitObj = {replaceObject: !this.uploadActions.indexOf(this.fileAction), forAll: this.actionForAll};
+ const submitObj = {
+ replaceObject: !this.uploadActions.indexOf(this.fileAction),
+ forAll: this.actionForAll
+ };
+
this.dialogRef.close(submitObj);
}
-}
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
index 8a5bf48..3f47421 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
@@ -88,8 +88,7 @@
constructor(
private bucketBrowserService: BucketBrowserService,
- ) {
- }
+ ) { }
public refreshBucketdata(bucket, endpoint) {
let backetData = [];
@@ -114,59 +113,59 @@
}
public buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
- return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
- if (key === '') {
- return accumulator;
- }
- const value = obj[key];
- const node = new TodoItemNode();
- node.item = key;
- if (value === '') {
- node.children = this.buildFileTree({}, level + 1);
- return accumulator.concat(node);
- }
- if (Object.keys(value).filter(v => v !== 'obj').length > 0) {
- if (typeof value === 'object') {
- node.object = value.obj || {'bucket': node.item, 'object': '', 'size': '', 'lastModifiedDate': ''};
- delete value.obj;
- node.children = this.buildFileTree(value, level + 1);
- } else {
- node.item = value;
- }
- } else {
- node.object = value.obj;
- }
+ return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
+ if (key === '') {
+ return accumulator;
+ }
+ const value = obj[key];
+ const node = new TodoItemNode();
+ node.item = key;
+ if (value === '') {
+ node.children = this.buildFileTree({}, level + 1);
return accumulator.concat(node);
- }, []);
- }
+ }
+ if (Object.keys(value).filter(v => v !== 'obj').length > 0) {
+ if (typeof value === 'object') {
+ node.object = value.obj || {'bucket': node.item, 'object': '', 'size': '', 'lastModifiedDate': ''};
+ delete value.obj;
+ node.children = this.buildFileTree(value, level + 1);
+ } else {
+ node.item = value;
+ }
+ } else {
+ node.object = value.obj;
+ }
+ return accumulator.concat(node);
+ }, []);
+ }
public insertItem(parent: TodoItemNode, name, isFile, emptyFolderObj?) {
if (parent.children) {
- if (isFile) {
- parent.children.unshift(name as TodoItemNode);
+ if (isFile) {
+ parent.children.unshift(name as TodoItemNode);
+ } else {
+ if (name) {
+ console.log('parentObject', parent.object);
+ const child = {item: name, children: [], object: JSON.parse(JSON.stringify(parent.object))};
+ child.object.object = child.object.object.replace(/ا/g, '') + child.item + '/';
+ parent.children.unshift(child as TodoItemNode);
} else {
- if (name) {
- console.log('parentObject', parent.object);
- const child = {item: name, children: [], object: JSON.parse(JSON.stringify(parent.object))};
- child.object.object = child.object.object.replace(/ا/g, '') + child.item + '/';
- parent.children.unshift(child as TodoItemNode);
- } else {
- parent.children.unshift({item: '', children: [], object: {}} as TodoItemNode);
- this.emptyFolder = emptyFolderObj;
- this._bucketData.next(this.data);
- }
+ parent.children.unshift({item: '', children: [], object: {}} as TodoItemNode);
+ this.emptyFolder = emptyFolderObj;
+ this._bucketData.next(this.data);
}
}
}
+ }
public updateItem(node: TodoItemNode, file) {
- node.item = file;
- this._bucketData.next(this.data);
+ node.item = file;
+ this._bucketData.next(this.data);
}
public removeItem(parent, child) {
- parent.children.splice( parent.children.indexOf(child), 1);
- this._bucketData.next(this.data);
+ parent.children.splice( parent.children.indexOf(child), 1);
+ this._bucketData.next(this.data);
}
public processFiles = (files, target, object) => {
@@ -179,7 +178,6 @@
if (!pointer.obj) {
pointer.obj = object;
}
-
});
}
@@ -197,5 +195,4 @@
}
return finalData;
}
-
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html
index 621370c..e8f7d56 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html
@@ -20,9 +20,11 @@
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node
*matTreeNodeDef="let node"
- matTreeNodePadding matTreeNodePaddingIndent="17"
+ matTreeNodePadding
+ matTreeNodePaddingIndent="17"
(click)="openBucketData(node)"
- [ngClass]="{'active-item': activeBacket === node}">
+ [ngClass]="{'active-item': activeBacket === node}"
+ >
<button mat-icon-button disabled></button>
<div
class="ellipsis"
@@ -30,15 +32,25 @@
matTooltipPosition="above"
matTooltipShowDelay="1000"
[matTooltipClass]="'full-size-tooltip'"
- >{{node.name}}</div>
+ >
+ {{node.name}}
+ </div>
</mat-tree-node>
- <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="17">
- <button mat-icon-button matTreeNodeToggle
- [attr.aria-label]="'toggle ' + node.name">
+
+ <mat-tree-node
+ *matTreeNodeDef="let node;when: hasChild"
+ matTreeNodePadding
+ matTreeNodePaddingIndent="17"
+ >
+ <button
+ mat-icon-button
+ matTreeNodeToggle
+ [attr.aria-label]="'toggle ' + node.name"
+ >
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span (click)="toggleProject(node, treeControl.isExpanded(node))">{{node.name}}</span>
</mat-tree-node>
-</mat-tree>
+</mat-tree>
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss
index 06ea47e..6341141 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss
@@ -17,65 +17,65 @@
* under the License.
*/
-.folder{
- padding-left: 5px;
+.folder {
max-width: 350px;
+ padding-left: 5px;
white-space: nowrap;
overflow: hidden;
}
-.mat-tree{
- font-family: 'Open Sans', sans-serif;
+.mat-tree {
+ font-family: "Open Sans", sans-serif;
}
-.folder-icon{
+.folder-icon {
color: rgb(232, 232, 232);
}
-.folder-item-line{
+.folder-item-line {
display: flex;
align-items: center;
cursor: pointer;
-
}
.active-item {
color: #00bcd4;
- i{
+
+ i {
color: #00bcd4;
}
}
-.add-folder-form{
+.add-folder-form {
display: flex;
align-items: center;
}
-.mat-tree-node:not(.input-node){
- cursor: pointer;
- transition: .3s;
- overflow: unset;
+.mat-tree-node:not(.input-node) {
min-height: auto;
- button.mat-icon-button{
+ overflow: unset;
+ cursor: pointer;
+ transition: 0.3s;
+
+ button.mat-icon-button {
width: 25px;
height: 25px;
line-height: 28px;
}
- &:hover{
+ &:hover {
color: #00bcd4;
- i{
+ i {
color: #00bcd4;
}
}
}
.input-node {
- overflow: unset;
padding-top: 5px;
padding-bottom: 7px;
-
+ overflow: unset;
button.mat-icon-button {
&.action-btn {
@@ -108,10 +108,4 @@
.mat-error {
background-color: #ffffff;
}
-}
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts
index e00375a..09218bb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts
@@ -21,7 +21,6 @@
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
-
interface BucketNode {
name: string;
endpoint?: string;
@@ -64,8 +63,7 @@
private activeBucketName: string;
public activeBacket: any;
- constructor() {
- }
+ constructor() {}
ngOnInit() {
this.activeBucketName = this.openedBucket || '';
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
index ffa5900..f84495d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
@@ -21,7 +21,8 @@
<mat-tree-node
*matTreeNodeDef="let node"
- matTreeNodeToggle matTreeNodePadding
+ matTreeNodeToggle
+ matTreeNodePadding
matTreeNodePaddingIndent="17"
[ngStyle]="{'display': 'none'}"
>
@@ -29,11 +30,21 @@
{{node.item}}
</mat-tree-node>
- <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding matTreeNodePaddingIndent="17" class="input-node">
+ <mat-tree-node
+ *matTreeNodeDef="let node; when: hasNoContent"
+ matTreeNodePadding
+ matTreeNodePaddingIndent="17"
+ class="input-node"
+ >
<form class="add-folder-form" id="folder-form">
<mat-form-field>
<mat-label>New folder</mat-label>
- <input matInput #itemValue [formControl]="folderFormControl" [errorStateMatcher]="matcher">
+ <input
+ matInput
+ #itemValue
+ [formControl]="folderFormControl"
+ [errorStateMatcher]="matcher"
+ />
<mat-error *ngIf="!folderFormControl.hasError('required') && !folderFormControl.hasError('isDuplicate')">
The folder name can only contain Latin letters, numbers and special characters except for #, ?, /, \, %."
</mat-error>
@@ -45,22 +56,39 @@
</mat-error>
<mat-hint *ngIf="cloud === 'azure'">If you do not upload any object to the folder, this folder will be removed on MS Azure</mat-hint>
</mat-form-field>
- <button (click)="createFolder(node, itemValue.value)"
- [ngClass]="{'check': folderFormControl.valid && folderFormControl.dirty && !folderCreating}"
- mat-icon-button class="btn action-btn"
- [disabled]="!folderFormControl.valid || !folderFormControl.dirty"
- matTooltip="Please wait! Folder is creating."
- [matTooltipDisabled]="!folderCreating"
- matTooltipPosition="above"
+ <button
+ (click)="createFolder(node, itemValue.value)"
+ [ngClass]="{'check': folderFormControl.valid && folderFormControl.dirty && !folderCreating}"
+ mat-icon-button
+ class="btn action-btn"
+ [disabled]="!folderFormControl.valid || !folderFormControl.dirty"
+ matTooltip="Please wait! Folder is creating."
+ [matTooltipDisabled]="!folderCreating"
+ matTooltipPosition="above"
>
<span><i class="material-icons ">check</i></span></button>
- <button (click)="removeItem(node)" mat-icon-button class="btn close action-btn"><span ><i class="material-icons ">close</i></span></button>
+ <button
+ (click)="removeItem(node)"
+ mat-icon-button
+ class="btn close action-btn"
+ >
+ <span ><i class="material-icons ">close</i></span>
+ </button>
</form>
</mat-tree-node>
- <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="17" [ngClass]="{'cursor-not-allow': bucketDataService.emptyFolder}">
- <button mat-icon-button matTreeNodeToggle
- [attr.aria-label]="'toggle ' + node.filename" [ngClass]="{'not-allowed': bucketDataService.emptyFolder}">
+ <mat-tree-node
+ *matTreeNodeDef="let node; when: hasChild"
+ matTreeNodePadding
+ matTreeNodePaddingIndent="17"
+ [ngClass]="{'cursor-not-allow': bucketDataService.emptyFolder}"
+ >
+ <button
+ mat-icon-button
+ matTreeNodeToggle
+ [attr.aria-label]="'toggle ' + node.filename"
+ [ngClass]="{'not-allowed': bucketDataService.emptyFolder}"
+ >
<mat-icon class="mat-icon-rtl-mirror" [ngClass]="{'active-item': (selectedFolder === node && !bucketDataService.emptyFolder)}">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
index 2cd5cae..f048c57 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
@@ -17,68 +17,67 @@
* under the License.
*/
-.folder{
- padding-left: 5px;
+.folder {
max-width: 350px;
+ padding-left: 5px;
white-space: nowrap;
overflow: hidden;
}
-.mat-tree{
- font-family: 'Open Sans', sans-serif;
+.mat-tree {
+ font-family: "Open Sans", sans-serif;
}
-.folder-icon{
+.folder-icon {
color: rgb(232, 232, 232);
}
-.folder-item-line{
+.folder-item-line {
display: flex;
align-items: center;
cursor: pointer;
-
}
.active-item {
color: #00bcd4;
- i{
+
+ i {
color: #00bcd4;
}
-
-
}
-.add-folder-form{
+.add-folder-form {
display: flex;
align-items: center;
}
-.mat-tree-node:not(.input-node){
- cursor: pointer;
- transition: .3s;
- overflow: unset;
+.mat-tree-node:not(.input-node) {
min-height: auto;
- button.mat-icon-button{
+ cursor: pointer;
+ transition: 0.3s;
+ overflow: unset;
+
+ button.mat-icon-button {
width: 25px;
height: 25px;
line-height: 28px;
}
}
-.mat-tree-node:not(.input-node):not(.cursor-not-allow){
- &:hover{
+.mat-tree-node:not(.input-node):not(.cursor-not-allow) {
+ &:hover {
color: #00bcd4;
- i{
+
+ i {
color: #00bcd4;
}
}
}
.input-node {
- overflow: unset;
padding-top: 5px;
padding-bottom: 7px;
-
+ overflow: unset;
button.mat-icon-button {
&.action-btn {
@@ -112,9 +111,3 @@
background-color: #ffffff;
}
}
-
-
-
-
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
index 900723d..5a23058 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
@@ -17,16 +17,16 @@
* under the License.
*/
-import {Component, Output, EventEmitter, OnDestroy, Input, OnInit} from '@angular/core';
-import {FlatTreeControl} from '@angular/cdk/tree';
-import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
-import {BucketBrowserService, TodoItemFlatNode, TodoItemNode} from '../../../core/services/bucket-browser.service';
-import {BucketDataService} from '../bucket-data.service';
-import {Subscription} from 'rxjs';
-import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
-import {ErrorStateMatcher} from '@angular/material/core';
-import {PATTERNS} from '../../../core/util';
-import {ToastrService} from 'ngx-toastr';
+import { Component, Output, EventEmitter, OnDestroy, Input } from '@angular/core';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { BucketBrowserService, TodoItemFlatNode, TodoItemNode } from '../../../core/services/bucket-browser.service';
+import { BucketDataService } from '../bucket-data.service';
+import { Subscription } from 'rxjs';
+import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { PATTERNS } from '../../../core/util';
+import { ToastrService } from 'ngx-toastr';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -35,8 +35,6 @@
}
}
-
-
@Component({
selector: 'datalab-folder-tree',
templateUrl: './folder-tree.component.html',
@@ -76,32 +74,35 @@
this.dataSource.data = data;
const subject = this.dataSource._flattenedData;
const subjectData = subject.getValue();
- if (this.selectedFolder) {
- if (this.cloud !== 'azure') {
- this.selectedFolder = subjectData.find(v => v.item === this.selectedFolder.item &&
- v.level === this.selectedFolder.level && v.obj === this.selectedFolder.obj);
- } else {
- const selectedFolderPath = this.selectedFolder.obj.slice(0, this.selectedFolder.obj.lastIndexOf('/') + 1);
- this.selectedFolder = subjectData.find(v => {
- const objectPath = v.obj.slice(0, v.obj.lastIndexOf('/') + 1);
- return v.item === this.selectedFolder.item &&
- v.level === this.selectedFolder.level && objectPath === selectedFolderPath;
- });
- }
+
+ if (this.selectedFolder) {
+ if (this.cloud !== 'azure') {
+ this.selectedFolder = subjectData.find(v => v.item === this.selectedFolder.item &&
+ v.level === this.selectedFolder.level && v.obj === this.selectedFolder.obj);
+ } else {
+ const selectedFolderPath = this.selectedFolder.obj.slice(0, this.selectedFolder.obj.lastIndexOf('/') + 1);
+ this.selectedFolder = subjectData.find(v => {
+ const objectPath = v.obj.slice(0, v.obj.lastIndexOf('/') + 1);
+ return v.item === this.selectedFolder.item &&
+ v.level === this.selectedFolder.level && objectPath === selectedFolderPath;
+ });
}
- this.expandAllParents(this.selectedFolder || subjectData[0]);
- this.showItem(this.selectedFolder || subjectData[0]);
- if (this.selectedFolder && !this.bucketDataService.emptyFolder) {
- setTimeout(() => {
- const element = document.querySelector('.folder-item-line.active-item');
- element && element.scrollIntoView({ block: 'start', behavior: 'smooth' });
- }, 0);
- } else if (this.selectedFolder && this.bucketDataService.emptyFolder) {
- setTimeout(() => {
- const element = document.querySelector('#folder-form');
- element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
- }, 0);
- }
+ }
+
+ this.expandAllParents(this.selectedFolder || subjectData[0]);
+ this.showItem(this.selectedFolder || subjectData[0]);
+
+ if (this.selectedFolder && !this.bucketDataService.emptyFolder) {
+ setTimeout(() => {
+ const element = document.querySelector('.folder-item-line.active-item');
+ element && element.scrollIntoView({ block: 'start', behavior: 'smooth' });
+ }, 0);
+ } else if (this.selectedFolder && this.bucketDataService.emptyFolder) {
+ setTimeout(() => {
+ const element = document.querySelector('#folder-form');
+ element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
+ }, 0);
+ }
}
}));
this.dataSource._flattenedData.subscribe();
@@ -213,21 +214,24 @@
}
-private addNewItem(node: TodoItemFlatNode, file, isFile) {
- const currNode = this.flatNodeMap.get(node);
- if (!currNode.object) {
- currNode.object = {bucket: currNode.item, object: ''};
- }
- const emptyFolderObject = currNode.object;
- if (emptyFolderObject.object.lastIndexOf('ا') !== emptyFolderObject.object.length - 1 || emptyFolderObject.object === '') {
- emptyFolderObject.object += 'ا';
- }
- this.bucketDataService.insertItem(currNode!, file, isFile, emptyFolderObject);
- this.treeControl.expand(node);
- setTimeout(() => {
- const element = document.querySelector('#folder-form');
- element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
- }, 0);
+ private addNewItem(node: TodoItemFlatNode, file, isFile) {
+ const currNode = this.flatNodeMap.get(node);
+ if (!currNode.object) {
+ currNode.object = {
+ bucket: currNode.item,
+ object: ''
+ };
+ }
+ const emptyFolderObject = currNode.object;
+ if (emptyFolderObject.object.lastIndexOf('ا') !== emptyFolderObject.object.length - 1 || emptyFolderObject.object === '') {
+ emptyFolderObject.object += 'ا';
+ }
+ this.bucketDataService.insertItem(currNode!, file, isFile, emptyFolderObject);
+ this.treeControl.expand(node);
+ setTimeout(() => {
+ const element = document.querySelector('#folder-form');
+ element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
+ }, 0);
}
public removeItem(node: TodoItemFlatNode) {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/upload-window.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/upload-window.component.scss
index e8e9a1e..03ace72 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/upload-window.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/upload-window.component.scss
@@ -17,20 +17,20 @@
* under the License.
*/
-.upload-window{
+.upload-window {
+ height: 15vh;
margin-top: 2vh;
- border: 2px solid rgba(0,0,0,.12);
+ border: 2px solid rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: white;
- height: 15vh;
color: black;
- .upload-header{
+ .upload-header {
+ position: relative;
+ height: 30px;
padding-left: 8px;
background: #f6fafe;
- height: 30px;
line-height: 30px;
- position: relative;
.modal-title {
font-weight: 500;
@@ -39,7 +39,7 @@
background: #f6fafe;
}
- .close{
+ .close {
position: absolute;
top: 0;
right: 0;
@@ -54,60 +54,63 @@
cursor: pointer;
transition: all 0.45s ease-in-out;
- &:hover{
+ &:hover {
color: #36afd5;
}
}
-
}
- .upload-files{
+ .upload-files {
+ width: 100%;
padding: 5px 0;
height: calc(100% - 30px);
overflow: auto;
overflow-y: overlay;
- width: 100%;
- .file{
- padding: 2px;
- display: flex;
- font-size: 12px;
- position: relative;
- &.upload-table-header{
+ .file {
+ position: relative;
+ display: flex;
+ padding: 2px;
+ font-size: 12px;
+
+ &.upload-table-header {
font-size: 11px;
}
- .name{
- width: 33.3%;
- padding-left: 5px;
+ .name {
position: relative;
display: flex;
+ width: 33.3%;
+ padding-left: 5px;
- span{
+ span {
position: absolute;
max-width: calc(100% + 30px);
}
}
- .second-block{
- width: 66.7%;
+ .second-block {
display: flex;
+ width: 66.7%;
padding: 0 14px 0 17px;
- .upload-path{
+
+ .upload-path {
+ display: flex;
width: 60%;
padding-left: 24px;
padding-right: 1%;
- display: flex;
}
- .size{
+ .size {
width: 15%;
}
- .state{
- width: 22%;
+
+ .state {
display: flex;
align-items: center;
- .mat-raised-button{
+ width: 22%;
+
+ .mat-raised-button {
width: 60px;
padding: 5px;
border-radius: 0;
@@ -119,24 +122,26 @@
line-height: 8px;
}
}
- .remove{
+
+ .remove {
+ position: absolute;
+ right: 20px;
display: flex;
align-items: center;
width: 5%;
- position: absolute;
- right: 20px;
- .close{
- color: #577289;
- font-size: 12px;
- cursor: pointer;
+
+ .close {
position: absolute;
top: 3px;
right: 0;
height: 18px;
width: 14px;
+ color: #577289;
+ font-size: 12px;
+ cursor: pointer;
transition: all 0.45s ease-in-out;
- &:hover{
+ &:hover {
color: #f1696e;
}
}
@@ -146,14 +151,11 @@
}
}
-
-
-
-
@media only screen and (max-height: 920px) {
.bucket-wrapper {
height: 55vh;
- &.added-upload{
+
+ &.added-upload {
height: 38vh;
}
}
@@ -162,7 +164,8 @@
@media only screen and (max-height: 840px) {
.bucket-wrapper {
height: 53vh;
- &.added-upload{
+
+ &.added-upload {
height: 36vh;
}
}
@@ -171,7 +174,8 @@
@media only screen and (max-height: 760px) {
.bucket-wrapper {
height: 51vh;
- &.added-upload{
+
+ &.added-upload {
height: 34vh;
}
}
@@ -180,7 +184,8 @@
@media only screen and (max-height: 700px) {
.bucket-wrapper {
height: 49vh;
- &.added-upload{
+
+ &.added-upload {
height: 32vh;
}
}
@@ -189,7 +194,8 @@
@media only screen and (max-height: 650px) {
.bucket-wrapper {
height: 47vh;
- &.added-upload{
+
+ &.added-upload {
height: 30vh;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html
index e353385..be41219 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html
@@ -61,8 +61,7 @@
</div>
</div>
<div class="row-wrap">
- <div class="col"
- *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'; else inst">
+ <div class="col" *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'; else inst">
<p>Master instance number:</p>
</div>
<ng-template #inst>
@@ -71,13 +70,14 @@
</div>
</ng-template>
<div class="col">
- <span *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'aws'">{{ resource.totalInstanceCount > 0 ? resource.totalInstanceCount : resource.dataengine_instance_count}}</span>
+ <span *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'aws'">
+ {{ resource.totalInstanceCount > 0 ? resource.totalInstanceCount : resource.dataengine_instance_count}}
+ </span>
<span *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure'">{{resource.dataengine_instance_count}}</span>
<span *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'">1</span>
</div>
</div>
- <div class="row-wrap"
- *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'">
+ <div class="row-wrap" *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'">
<div class="col">
<p>Slave instance number:</p>
</div>
@@ -123,14 +123,15 @@
</ng-template>
<div *ngIf="resource.status === 'running'">
<div class="row-wrap">
- <p class="time_info">Up time {{upTimeInHours}} hour(s) since {{resource.up_time ? (resource.up_time | longDate) : "not specified."
- }}
+ <p class="time_info">
+ Up time {{upTimeInHours}} hour(s) since {{resource.up_time ? (resource.up_time | longDate) : "not specified."}}
</p>
</div>
<div class="m-top-10">
<p *ngFor="let item of resource.computational_url" class="ellipsis flex" (mouseleave)="hideCopyIcon()">
<span class="strong spark-url-desc">{{ item.description }}:</span>
- <a (click)="logAction(resource, environment, 'follow')"
+ <a
+ (click)="logAction(resource, environment, 'follow')"
href="{{item.url}}"
target="_blank"
matTooltip="{{item.url}}"
@@ -138,11 +139,15 @@
(mouseover)="showCopyIcon(item.description)"
class="spark-url ellipsis"
(contextmenu)="false"
- >{{ item.url }}</a>
+ >
+ {{ item.url }}
+ </a>
<span
(click)="logAction(resource, environment, 'copy');$event.stopPropagation()"
*ngIf="isCopyIconVissible[item.description]"
- [matTooltip]="isCopied ? 'Copy ' + item.description + (item.description.indexOf('url') === -1 ? ' url' : ''): 'Copied'" matTooltipPosition="above" class="copy-icon-wrapper"
+ [matTooltip]="isCopied ? 'Copy ' + item.description + (item.description.indexOf('url') === -1 ? ' url' : ''): 'Copied'"
+ matTooltipPosition="above"
+ class="copy-icon-wrapper"
>
<span class="link-icon" (click)="copyLink(item.url)" >
<span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
@@ -151,53 +156,59 @@
</p>
</div>
</div>
- <div class="checkbox-group"
- *ngIf="resource.image === 'docker.datalab-dataengine'
- && resource.status === 'running'
- && environment.image !== 'docker.datalab-zeppelin'
- && environment.image !== 'docker.datalab-superset'
- && environment.image !== 'docker.datalab-jupyterlab'"
+ <div
+ class="checkbox-group"
+ *ngIf="resource.image === 'docker.datalab-dataengine'
+ && resource.status === 'running'
+ && environment.image !== 'docker.datalab-zeppelin'
+ && environment.image !== 'docker.datalab-superset'
+ && environment.image !== 'docker.datalab-jupyterlab'"
+ >
+ <label>
+ <input #configurationNode type="checkbox" (change)="selectConfiguration()"/> Cluster configurations
+ </label>
+ <div class="checkbox-group">
+ <form [formGroup]="configurationForm" novalidate>
+ <div class="config-details" [ngClass]="{ show: configuration?.nativeElement['checked'] || false }">
+ <textarea
+ formControlName="configuration_parameters"
+ placeholder="Cluster configuration template, JSON"
+ data-gramm_editor="false"
+ ></textarea>
+ <span class="danger_color"
+ *ngIf="!configurationForm.controls.configuration_parameters.valid
+ && configurationForm.controls['configuration_parameters'].dirty">
+ Configuration parameters is not in a valid format
+ </span>
+ </div>
+ </form>
+ </div>
+ </div>
+ <div *ngIf="environment.image === 'docker.datalab-zeppelin' && resource.status === 'running'">
+ <small>Spark default configuration for Apache Zeppelin can not be changed from DataLab UI.
+ Currently it can be done directly through Apache Zeppelin interpreter menu.
+ For more details please refer for Apache Zeppelin
+ <a href="https://zeppelin.apache.org/docs/0.9.0/usage/interpreter/overview.html" target="_blank">official
+ documentation</a>.
+ </small>
+ </div>
+ <div class="text-center m-top-30" *ngIf="configuration?.nativeElement['checked'] || false">
+ <button
+ mat-raised-button type="button"
+ (click)="dialogRef.close()"
+ class="butt action"
>
- <label>
- <input #configurationNode type="checkbox" (change)="selectConfiguration()"/> Cluster configurations
- </label>
- <div class="checkbox-group">
- <form [formGroup]="configurationForm" novalidate>
- <div class="config-details"
- [ngClass]="{ show: configuration?.nativeElement['checked'] || false }">
- <textarea
- formControlName="configuration_parameters"
- placeholder="Cluster configuration template, JSON"
- data-gramm_editor="false">
- </textarea>
- <span class="danger_color"
- *ngIf="!configurationForm.controls.configuration_parameters.valid
- && configurationForm.controls['configuration_parameters'].dirty">
- Configuration parameters is not in a valid format
- </span>
- </div>
- </form>
- </div>
- </div>
- <div *ngIf="environment.image === 'docker.datalab-zeppelin' && resource.status === 'running'">
- <small>Spark default configuration for Apache Zeppelin can not be changed from DataLab UI.
- Currently it can be done directly through Apache Zeppelin interpreter menu.
- For more details please refer for Apache Zeppelin
- <a href="https://zeppelin.apache.org/docs/0.9.0/usage/interpreter/overview.html" target="_blank">official
- documentation</a>.
- </small>
- </div>
- <div class="text-center m-top-30" *ngIf="configuration?.nativeElement['checked'] || false">
- <button mat-raised-button type="button"
- (click)="dialogRef.close()"
- class="butt action">Cancel
- </button>
- <button mat-raised-button type="submit"
- [disabled]="!configurationForm.valid"
- class="butt butt-success action"
- [ngClass]="{'not-allowed': !configurationForm.valid}"
- (click)="editClusterConfiguration(configurationForm.value)">Update
- </button>
+ Cancel
+ </button>
+ <button
+ mat-raised-button type="submit"
+ [disabled]="!configurationForm.valid"
+ class="butt butt-success action"
+ [ngClass]="{'not-allowed': !configurationForm.valid}"
+ (click)="editClusterConfiguration(configurationForm.value)"
+ >
+ Update
+ </button>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.scss
index be579fd..1c9d19b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.scss
@@ -40,11 +40,11 @@
}
.config-details {
+ position: relative;
height: 0;
opacity: 0;
visibility: hidden;
text-align: left;
- position: relative;
&.show {
height: 200px;
@@ -69,12 +69,12 @@
}
}
-.spark-url{
+.spark-url {
max-width: 250px;
overflow: hidden;
}
-.copy-icon-wrapper{
+.copy-icon-wrapper {
margin-top: -2px;
margin-left: 5px;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts
index f5e8f45..1e6526b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts
@@ -26,8 +26,8 @@
import { DataengineConfigurationService } from '../../../core/services';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { CLUSTER_CONFIGURATION } from '../computational-resource-create-dialog/cluster-configuration-templates';
-import {AuditService} from '../../../core/services/audit.service';
-import {CopyPathUtils} from '../../../core/util/copyPathUtils';
+import { AuditService } from '../../../core/services/audit.service';
+import { CopyPathUtils } from '../../../core/util/copyPathUtils';
@Component({
selector: 'datalab-cluster-details',
@@ -68,21 +68,22 @@
this.resource = resource;
this.environment = environment;
-
this.upTimeInHours = (this.resource.up_time) ? DateUtils.diffBetweenDatesInHours(this.resource.up_time) : 0;
this.initFormModel();
- if (this.resource.image === 'docker.datalab-dataengine') this.getClusterConfiguration();
+ if (this.resource.image === 'docker.datalab-dataengine') {
+ this.getClusterConfiguration();
+ }
}
public isEllipsisActive($event): void {
- if ($event.target.offsetWidth < $event.target.scrollWidth)
+ if ($event.target.offsetWidth < $event.target.scrollWidth) {
this.tooltip = true;
+ }
}
public selectConfiguration() {
if (this.configuration.nativeElement.checked) {
-
this.configurationForm.controls['configuration_parameters']
.setValue(JSON.stringify(this.config.length ? this.config : CLUSTER_CONFIGURATION.SPARK, undefined, 2));
} else {
@@ -93,8 +94,10 @@
public getClusterConfiguration(): void {
this.dataengineConfigurationService
.getClusterConfiguration(this.environment.project, this.environment.name, this.resource.computational_name, this.PROVIDER)
- .subscribe((result: any) => this.config = result,
- error => this.toastr.error(error.message || 'Configuration loading failed!', 'Oops!'));
+ .subscribe(
+ (result: any) => this.config = result,
+ error => this.toastr.error(error.message || 'Configuration loading failed!', 'Oops!')
+ );
}
public editClusterConfiguration(data): void {
@@ -106,10 +109,12 @@
this.resource.computational_name,
this.PROVIDER
)
- .subscribe(result => {
- this.dialogRef.close();
- },
- error => this.toastr.error(error.message || 'Edit onfiguration failed!', 'Oops!'));
+ .subscribe(
+ result => {
+ this.dialogRef.close();
+ },
+ error => this.toastr.error(error.message || 'Edit onfiguration failed!', 'Oops!')
+ );
}
private initFormModel(): void {
@@ -134,8 +139,12 @@
};
this.auditService.sendDataToAudit(
- {resource_name: resource.computational_name, info: JSON.stringify(clusterInfo), type: 'COMPUTE'}
- ).subscribe();
+ {
+ resource_name: resource.computational_name,
+ info: JSON.stringify(clusterInfo),
+ type: 'COMPUTE'
+ }
+ ).subscribe();
}
public copyLink(url: string) {
@@ -145,6 +154,7 @@
public showCopyIcon(element) {
this.isCopyIconVissible[element] = true;
}
+
public hideCopyIcon() {
for (const key in this.isCopyIconVissible) {
this.isCopyIconVissible[key] = false;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
index 1cc87c8..234c5d2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
@@ -23,12 +23,18 @@
import { MaterialModule } from '../../../shared/material.module';
import { DetailComputationalResourcesComponent } from './cluster-details.component';
-import {LongDatePipeModule} from '../../../core/pipes/long-date-pipe';
+import { LongDatePipeModule } from '../../../core/pipes/long-date-pipe';
export * from './cluster-details.component';
@NgModule({
- imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, LongDatePipeModule],
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ MaterialModule,
+ LongDatePipeModule
+ ],
declarations: [DetailComputationalResourcesComponent],
entryComponents: [DetailComputationalResourcesComponent],
exports: [DetailComputationalResourcesComponent],
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
index 7b339f7..5e9095c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
@@ -25,80 +25,102 @@
<div class="dialog-content selection">
<div class="content-box mat-reset">
<form [formGroup]="resourceForm" *ngIf="clusterTypes.length && resourceForm; else placeholder">
-
<div class="form-wrapper">
<div class="col">
- <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="clusterTypes.length === 1">
- <label class="label">Select cluster type</label>
- <div class="control selector-wrapper">
- <mat-form-field>
- <mat-select formControlName="template_name"
- disableOptionCentering
- panelClass="scrolling"
- placeholder="Select cluster type">
- <mat-option *ngFor="let type of clusterTypes" [value]="type.template_name"
- (click)="selectImage(type)">{{ type.template_name }}
- </mat-option>
- <mat-option *ngIf="!clusterTypes.length" class="multiple-select ml-10" disabled>Clusters types list
- is empty</mat-option>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
- </div>
- </div>
-
- <div class="control-group alias-name" *ngIf="selectedImage?.image">
- <label class="label">Cluster alias</label>
- <div class="control">
- <input
- [class.danger_field]="!resourceForm?.controls['cluster_alias_name'].valid
- && resourceForm?.controls['cluster_alias_name'].dirty
- && resourceForm?.controls['cluster_alias_name'].hasError('duplication')"
- type="text" class="form-control" placeholder="Enter cluster alias"
- formControlName="cluster_alias_name" />
- <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('user-duplication')">You have cluster with this name in current project.</span>
- <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('other-user-duplication')">Other user has cluster with this name in current project.</span>
- <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('maxlength') &&
- !resourceForm?.controls['cluster_alias_name'].hasError('pattern')"
+ <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="clusterTypes.length === 1">
+ <label class="label">Select cluster type</label>
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-select
+ formControlName="template_name"
+ disableOptionCentering
+ panelClass="scrolling"
+ placeholder="Select cluster type"
>
- Cluster name cannot be longer than {{maxClusterNameLength}} characters.
- </span>
- <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('pattern')">
- Cluster name can only contain letters, numbers, hyphens and '_' but can not end with special
- characters.
- </span>
- </div>
+ <mat-option
+ *ngFor="let type of clusterTypes"
+ [value]="type.template_name"
+ (click)="selectImage(type)"
+ >
+ {{ type.template_name }}
+ </mat-option>
+ <mat-option *ngIf="!clusterTypes.length" class="multiple-select ml-10" disabled>
+ Clusters types list is empty
+ </mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
</div>
+ </div>
- <div class="control-group" *ngIf="selectedImage?.image">
- <label class="label">Master instance size</label>
- <div class="control selector-wrapper">
- <mat-form-field>
- <mat-label>Select instance size</mat-label>
- <mat-select panelClass="scrolling" formControlName="shape_master" disableOptionCentering>
- <mat-optgroup *ngFor="let item of (selectedImage.computation_resources_shapes | keys)"
- [label]="item.key | underscoreless">
- <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type" (click)="clearGpuType('master')">
- <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }}
- </mat-option>
- </mat-optgroup>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
- </div>
+ <div class="control-group alias-name" *ngIf="selectedImage?.image">
+ <label class="label">Cluster alias</label>
+ <div class="control">
+ <input
+ [class.danger_field]="!resourceForm?.controls['cluster_alias_name'].valid
+ && resourceForm?.controls['cluster_alias_name'].dirty
+ && resourceForm?.controls['cluster_alias_name'].hasError('duplication')"
+ type="text"
+ class="form-control"
+ placeholder="Enter cluster alias"
+ formControlName="cluster_alias_name"
+ />
+ <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('user-duplication')">
+ You have cluster with this name in current project.
+ </span>
+ <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('other-user-duplication')">
+ Other user has cluster with this name in current project.
+ </span>
+ <span
+ class="error"
+ *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('maxlength')
+ && !resourceForm?.controls['cluster_alias_name'].hasError('pattern')"
+ >
+ Cluster name cannot be longer than {{maxClusterNameLength}} characters.
+ </span>
+ <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('pattern')">
+ Cluster name can only contain letters, numbers, hyphens and '_' but can not end with special
+ characters.
+ </span>
</div>
+ </div>
+
+ <div class="control-group" *ngIf="selectedImage?.image">
+ <label class="label">Master instance size</label>
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label>Select instance size</mat-label>
+ <mat-select panelClass="scrolling" formControlName="shape_master" disableOptionCentering>
+ <mat-optgroup
+ *ngFor="let item of (selectedImage.computation_resources_shapes | keys)"
+ [label]="item.key | underscoreless"
+ >
+ <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type" (click)="clearGpuType('master')">
+ <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }}
+ </mat-option>
+ </mat-optgroup>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
+ </div>
</div>
<div class="col">
<div class="control-group" *ngIf="selectedImage?.image">
<label class="label">Total instance number</label>
<div class="control">
- <input type="number" class="form-control" min="{{minInstanceNumber}}" max="{{maxInstanceNumber}}"
- formControlName="instance_number" (keypress)="CheckUtils.isNumberKey($event)" />
+ <input
+ type="number"
+ class="form-control"
+ min="{{minInstanceNumber}}"
+ max="{{maxInstanceNumber}}"
+ formControlName="instance_number" (keypress)="CheckUtils.isNumberKey($event)"
+ />
<span class="error" *ngIf="!resourceForm?.controls.instance_number.valid">
<span>Only integer values greater than or equal to {{ minInstanceNumber }} and less than
{{ maxInstanceNumber }} are allowed.</span>
@@ -114,8 +136,9 @@
<mat-select panelClass="scrolling" formControlName="version" disableOptionCentering>
<mat-option *ngFor="let template of selectedImage.templates" [value]="template.version">
{{ template.version }}</mat-option>
- <mat-option *ngIf="!selectedImage.templates" class="multiple-select ml-10" disabled>Templates list
- is empty</mat-option>
+ <mat-option *ngIf="!selectedImage.templates" class="multiple-select ml-10" disabled>
+ Templates list is empty
+ </mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -124,31 +147,35 @@
</div>
</div>
- <div class="control-group" *ngIf="selectedImage?.image">
- <label class="label">Slave instance size</label>
- <div class="control selector-wrapper">
- <mat-form-field>
- <mat-label>Select instance size</mat-label>
- <mat-select panelClass="scrolling" formControlName="shape_slave" disableOptionCentering>
- <mat-optgroup *ngFor="let item of (selectedImage.computation_resources_shapes | keys)"
- [label]="item.key | underscoreless">
- <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type" (click)="clearGpuType('slave')">
- <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{
- list_item.Type }}
- </mat-option>
- </mat-optgroup>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
- </div>
+ <div class="control-group" *ngIf="selectedImage?.image">
+ <label class="label">Slave instance size</label>
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label>Select instance size</mat-label>
+ <mat-select panelClass="scrolling" formControlName="shape_slave" disableOptionCentering>
+ <mat-optgroup
+ *ngFor="let item of (selectedImage.computation_resources_shapes | keys)"
+ [label]="item.key | underscoreless"
+ >
+ <mat-option
+ *ngFor="let list_item of item.value"
+ [value]="list_item.Type"
+ (click)="clearGpuType('slave')"
+ >
+ <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{
+ list_item.Type }}
+ </mat-option>
+ </mat-optgroup>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
</div>
-
+ </div>
</div>
</div>
- <div class="checkbox-group control-group"
- *ngIf="PROVIDER === 'gcp'">
+ <div class="checkbox-group control-group" *ngIf="PROVIDER === 'gcp'">
<div class="d-flex cursor-pointer label m-bott-20" (click)="addAdditionalParams('gpu')">
<div class="empty-checkbox ml-10" [ngClass]="{'checked': isSelected.gpu}">
<span class="checked-checkbox" *ngIf="isSelected.gpu"></span>
@@ -159,19 +186,21 @@
<div class="col">
<div class="control-group">
<label class="label">Master GPU type</label>
- <div class="control selector-wrapper"
- [ngClass]="{ 'not-active' : !resourceForm.controls['shape_master'].value}"
- [matTooltip]="'Please, select master instance size.'"
- [matTooltipPosition]="'above'"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!!resourceForm.controls['shape_master'].value.length"
+ <div
+ class="control selector-wrapper"
+ [ngClass]="{ 'not-active' : !resourceForm.controls['shape_master'].value}"
+ [matTooltip]="'Please, select master instance size.'"
+ [matTooltipPosition]="'above'"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!!resourceForm.controls['shape_master'].value.length"
>
<mat-form-field>
- <mat-select formControlName="master_GPU_type" disableOptionCentering
- placeholder="Select master GPU type"
- [disabled]="!resourceForm.controls['shape_master'].value">
- <mat-option *ngFor="let type of sortGpuTypes(selectedImage.computationGPU); index as i"
- [value]="type" >
+ <mat-select
+ formControlName="master_GPU_type" disableOptionCentering
+ placeholder="Select master GPU type"
+ [disabled]="!resourceForm.controls['shape_master'].value"
+ >
+ <mat-option *ngFor="let type of sortGpuTypes(selectedImage.computationGPU); index as i" [value]="type">
<strong class="highlight icon-label">{{ addSizeToGpuType(i) }}</strong> {{ type }}
</mat-option>
<mat-option *ngIf="!selectedImage.computationGPU?.length" class="multiple-select ml-10" disabled>
@@ -186,12 +215,13 @@
</div>
<div class="control-group">
<label class="label">Master GPU сount</label>
- <div class="control selector-wrapper"
- [ngClass]="{'not-active': !resourceForm.controls['master_GPU_type'].value}"
- [matTooltip]="'Please, select master GPU type.'"
- [matTooltipPosition]="'above'"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!!resourceForm.controls['master_GPU_type'].value"
+ <div
+ class="control selector-wrapper"
+ [ngClass]="{'not-active': !resourceForm.controls['master_GPU_type'].value}"
+ [matTooltip]="'Please, select master GPU type.'"
+ [matTooltipPosition]="'above'"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!!resourceForm.controls['master_GPU_type'].value"
>
<mat-form-field>
<mat-label>Select master GPU count</mat-label>
@@ -212,12 +242,13 @@
<div class="col">
<div class="control-group">
<label class="label">Slave GPU type</label>
- <div class="control selector-wrapper"
- [ngClass]="{ 'not-active': !resourceForm.controls['shape_slave'].value}"
- [matTooltip]="'Please, select slave instance size.'"
- [matTooltipPosition]="'above'"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!!resourceForm.controls['shape_slave'].value.length"
+ <div
+ class="control selector-wrapper"
+ [ngClass]="{ 'not-active': !resourceForm.controls['shape_slave'].value}"
+ [matTooltip]="'Please, select slave instance size.'"
+ [matTooltipPosition]="'above'"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!!resourceForm.controls['shape_slave'].value.length"
>
<!-- <span class="form-field-wrapper" >-->
<mat-form-field>
@@ -240,12 +271,13 @@
<div class="control-group">
<label class="label">Slave GPU сount</label>
- <div class="control selector-wrapper"
- [ngClass]="{'not-active': !resourceForm.controls['slave_GPU_type'].value}"
- [matTooltip]="'Please, select slave GPU type.'"
- [matTooltipPosition]="'above'"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!!resourceForm.controls['slave_GPU_type'].value"
+ <div
+ class="control selector-wrapper"
+ [ngClass]="{'not-active': !resourceForm.controls['slave_GPU_type'].value}"
+ [matTooltip]="'Please, select slave GPU type.'"
+ [matTooltipPosition]="'above'"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!!resourceForm.controls['slave_GPU_type'].value"
>
<mat-form-field>
<mat-label>Select slave GPU сount</mat-label>
@@ -266,20 +298,29 @@
</div>
</div>
</div>
- <div class="preemptible checkbox-group control-group"
- *ngIf="PROVIDER === 'gcp' && selectedImage?.image === 'docker.datalab-dataengine-service'">
+ <div
+ class="preemptible checkbox-group control-group"
+ *ngIf="PROVIDER === 'gcp' && selectedImage?.image === 'docker.datalab-dataengine-service'"
+ >
<div class="d-flex cursor-pointer label" (click)="addAdditionalParams('preemptible')">
<div class="empty-checkbox ml-10" [ngClass]="{'checked': isSelected.preemptible}" (click)="selectPreemptibleNodes(isSelected.preemptible)">
<span class="checked-checkbox" *ngIf="isSelected.preemptible"></span>
</div>
<span class="pl-5">Preemptible node</span>
</div>
- <div *ngIf="isSelected.preemptible" class="preemptible-details control"
- [ngClass]="{ show: isSelected.preemptible}">
- <input type="text" class="form-control" formControlName="preemptible_instance_number"
- (keypress)="CheckUtils.isNumberKey($event)"
- (keydown.arrowup)="preemptibleCounter($event, 'increment')"
- (keydown.arrowdown)="preemptibleCounter($event, 'decrement')"/>
+ <div
+ *ngIf="isSelected.preemptible"
+ class="preemptible-details control"
+ [ngClass]="{ show: isSelected.preemptible}"
+ >
+ <input
+ type="text"
+ class="form-control"
+ formControlName="preemptible_instance_number"
+ (keypress)="CheckUtils.isNumberKey($event)"
+ (keydown.arrowup)="preemptibleCounter($event, 'increment')"
+ (keydown.arrowdown)="preemptibleCounter($event, 'decrement')"
+ />
<span class="error error-bottom" *ngIf="!resourceForm?.controls.preemptible_instance_number.valid">
<span *ngIf="minPreemptibleInstanceNumber !== maxPreemptibleInstanceNumber; else equal">
Only integer values greater than or equal to {{ minPreemptibleInstanceNumber }} and less than
@@ -297,31 +338,45 @@
</div>
<span class="pl-5">Spot instance</span><span [hidden]="!isSelected.spotInstances"> bid, %</span>
</div>
- <div class="control spot-details" [ngClass]="{ show: isSelected.spotInstances }"
- *ngIf="isSelected.spotInstances">
- <input type="number" class="form-control" step="5" min="{{minSpotPrice}}" max="{{maxSpotPrice}}"
- formControlName="instance_price" (keypress)="CheckUtils.isNumberKey($event)">
+ <div
+ class="control spot-details"
+ [ngClass]="{ show: isSelected.spotInstances }"
+ *ngIf="isSelected.spotInstances"
+ >
+ <input
+ type="number"
+ class="form-control"
+ step="5"
+ min="{{minSpotPrice}}"
+ max="{{maxSpotPrice}}"
+ formControlName="instance_price"
+ (keypress)="CheckUtils.isNumberKey($event)"
+ />
<span class="error error-bottom" *ngIf="!resourceForm?.controls.instance_price.valid">
Only integer values greater than or equal to {{minSpotPrice}} and less than {{maxSpotPrice}} are allowed.
</span>
</div>
<span class="info ml-10" *ngIf="isSelected.spotInstances">When the current Spot price
rises above your bid price, the Spot instance is reclaimed by AWS so that it can be given to another
- customer. Make sure to backup your data on periodic basis.</span>
+ customer. Make sure to backup your data on periodic basis.
+ </span>
</div>
- <div class="checkbox-group control-group m-top-10"
- [hidden]="PROVIDER === 'gcp' && selectedImage?.image === 'docker.datalab-dataengine-service'"
- *ngIf="notebook_instance?.image !== 'docker.datalab-zeppelin'">
+ <div
+ class="checkbox-group control-group m-top-10"
+ [hidden]="PROVIDER === 'gcp' && selectedImage?.image === 'docker.datalab-dataengine-service'"
+ *ngIf="notebook_instance?.image !== 'docker.datalab-zeppelin'"
+ >
<div class="d-flex cursor-pointer label" (click)="addAdditionalParams('configuration')">
<div class="empty-checkbox ml-10" [ngClass]="{'checked': isSelected.configuration}">
<span class="checked-checkbox" *ngIf="isSelected.configuration"></span>
</div>
<span class="pl-5">Cluster configurations</span>
</div>
- <div class="config-link"
- *ngIf="(isSelected.configuration)
- && selectedImage?.image === 'docker.datalab-dataengine-service'
- && PROVIDER === 'aws'"
+ <div
+ class="config-link"
+ *ngIf="(isSelected.configuration)
+ && selectedImage?.image === 'docker.datalab-dataengine-service'
+ && PROVIDER === 'aws'"
>
To view example JSON of configurations refer for <a
href="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/emr-configure-apps.html"
@@ -331,14 +386,17 @@
</div>
<div class="checkbox-group ml-10">
<div class="config-details" [ngClass]="{ show: isSelected.configuration }">
- <textarea formControlName="configuration_parameters"
- placeholder="Cluster configuration template, JSON"
- data-gramm_editor="false">
+ <textarea
+ formControlName="configuration_parameters"
+ placeholder="Cluster configuration template, JSON"
+ data-gramm_editor="false">
</textarea>
- <span class="error"
- *ngIf="!resourceForm?.controls.configuration_parameters.valid
- && resourceForm?.controls['configuration_parameters'].dirty">
- Configuration parameters is not in a valid format.
+ <span
+ class="error"
+ *ngIf="!resourceForm?.controls.configuration_parameters.valid
+ && resourceForm?.controls['configuration_parameters'].dirty"
+ >
+ Configuration parameters is not in a valid format.
</span>
</div>
</div>
@@ -352,29 +410,35 @@
</small>
</div>
<div class="text-center m-top-30">
- <button mat-raised-button
- type="button"
- (click)="dialogRef.close()"
- class="butt action">Cancel
+ <button
+ mat-raised-button
+ type="button"
+ (click)="dialogRef.close()"
+ class="butt action"
+ >
+ Cancel
</button>
- <button mat-raised-button
- type="button"
- [disabled]="!resourceForm?.valid
- || (!resourceForm.value.shape_slave)
- || (selectedImage?.image === 'docker.datalab-dataengine-service' && !resourceForm.value.version)"
- (click)="createComputationalResource(resourceForm.value)"
- class="butt butt-success action"
- [ngClass]="{'not-allowed': !resourceForm?.valid
- || (selectedImage?.image === 'docker.datalab-dataengine-service' && !resourceForm.value.shape_slave)
- || (selectedImage?.image === 'docker.datalab-dataengine-service' && !resourceForm.value.version) }">
- Create
+ <button
+ mat-raised-button
+ type="button"
+ [disabled]="!resourceForm?.valid
+ || (!resourceForm.value.shape_slave)
+ || (selectedImage?.image === 'docker.datalab-dataengine-service' && !resourceForm.value.version)"
+ (click)="createComputationalResource(resourceForm.value)"
+ class="butt butt-success action"
+ [ngClass]="{'not-allowed': !resourceForm?.valid
+ || (selectedImage?.image === 'docker.datalab-dataengine-service' && !resourceForm.value.shape_slave)
+ || (selectedImage?.image === 'docker.datalab-dataengine-service' && !resourceForm.value.version) }"
+ >
+ Create
</button>
</div>
</form>
</div>
<ng-template #placeholder>
<div *ngIf="!loading && !clusterTypes?.length" class="info message">
- Compute creations are not available. Please, check your permissions.</div>
+ Compute creations are not available. Please, check your permissions.
+ </div>
<div *ngIf="loading" class="info message">
Compute data is processing
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss
index c849fc8..e2b8405 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss
@@ -21,12 +21,15 @@
display: flex;
.col {
width: 50%;
+
.control-group {
position: relative;
+
.label {
width: 40%;
padding-left: 10px;
}
+
.control {
width: 60%;
}
@@ -34,19 +37,22 @@
span {
&.error {
position: absolute;
- padding-left: 10px;
right: 0;
top: 36px;
+ padding-left: 10px;
}
}
+
.alias-name {
.danger-color {
right: auto;
}
}
}
+
&.compress {
flex-direction: column;
+
.col {
width: 100%;
}
@@ -54,12 +60,14 @@
}
.checkbox-group {
text-align: left;
+
input[type="checkbox"] {
- vertical-align: middle;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 4px;
+ vertical-align: middle;
}
+
.spot-details,
.preemptible-details,
.config-details {
@@ -74,21 +82,28 @@
opacity: 1;
}
}
+
&.preemptible {
height: 50px;
+
.label {
height: 36px;
padding-bottom: 14px;
}
+
.control {
position: relative;
}
}
+
.align {
margin-left: 25px;
}
- .spot-details, .preemptible-details {
+
+ .spot-details,
+ .preemptible-details {
position: relative;
+
.error {
bottom: 0;
}
@@ -98,15 +113,17 @@
text-align: right;
}
}
+
.config-details {
&.show {
+ position: relative;
height: 240px;
padding-top: 10px;
text-align: right;
- position: relative;
+
textarea {
- background: #f8f8f8 !important;
height: 100%;
+ background: #f8f8f8 !important;
resize: none;
font-size: 14px;
line-height: 1.5;
@@ -114,12 +131,14 @@
}
}
}
+
& > label {
+ padding-bottom: 10px;
font-size: 15px;
font-weight: 600;
- padding-bottom: 10px;
cursor: pointer;
}
+
span {
&.error {
position: absolute;
@@ -127,16 +146,19 @@
right: 0;
}
}
+
&.control-group {
padding: 0;
+
span.info {
- color: #35afd5;
- font-size: 13px;
- text-align: justify;
display: inline-block;
padding-top: 5px;
padding-bottom: 10px;
+ color: #35afd5;
+ font-size: 13px;
+ text-align: justify;
}
+
span {
&.error {
position: absolute;
@@ -144,13 +166,16 @@
right: 0;
}
}
+
.label {
width: 20%;
}
+
.control {
width: 80%;
}
}
+
.config-link {
font-size: 13px;
padding-top: 5px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
index 714eb92..6fd9991 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
@@ -24,7 +24,7 @@
import { ComputationalResourceModel } from './computational-resource-create.model';
import { UserResourceService } from '../../../core/services';
-import {HTTP_STATUS_CODES, PATTERNS, CheckUtils, SortUtils, HelpUtils} from '../../../core/util';
+import { HTTP_STATUS_CODES, PATTERNS, CheckUtils, SortUtils, HelpUtils } from '../../../core/util';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { CLUSTER_CONFIGURATION } from './cluster-configuration-templates';
@@ -91,8 +91,9 @@
this.filterShapes();
this.getComputationalResourceLimits();
- if ($event.templates && $event.templates.length)
+ if ($event.templates && $event.templates.length) {
this.resourceForm.controls['version'].setValue($event.templates[0].version);
+ }
}
public selectSpotInstances(): void {
@@ -131,8 +132,9 @@
}
public isAvailableSpots(): boolean {
- if (this.PROVIDER === 'aws' && this.selectedImage.image === 'docker.datalab-dataengine-service')
+ if (this.PROVIDER === 'aws' && this.selectedImage.image === 'docker.datalab-dataengine-service') {
return !!Object.keys(this.filterAvailableSpots()).length;
+ }
return false;
}
@@ -140,9 +142,12 @@
public createComputationalResource(data) {
this.model.createComputationalResource(data, this.selectedImage, this.notebook_instance,
this.spotInstance, this.PROVIDER.toLowerCase(), this.isSelected.gpu)
- .subscribe((response: any) => {
- if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(true);
- }, error => this.toastr.error(error.message, 'Oops!'));
+ .subscribe(
+ (response: any) => {
+ if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(true);
+ },
+ error => this.toastr.error(error.message, 'Oops!')
+ );
}
private initFormModel(): void {
@@ -202,22 +207,24 @@
// Validation
private validInstanceNumberRange(control) {
- if (control && control.value)
+ if (control && control.value) {
if (this.PROVIDER === 'gcp' && this.selectedImage.image === 'docker.datalab-dataengine-service') {
this.validPreemptibleNumberRange();
return control.value >= this.minInstanceNumber && control.value <= this.maxInstanceNumber ? null : { valid: false };
} else {
return control.value >= this.minInstanceNumber && control.value <= this.maxInstanceNumber ? null : { valid: false };
}
+ }
}
private validPreemptibleRange(control) {
- if (this.isSelected.preemptible)
+ if (this.isSelected.preemptible) {
return this.isSelected.preemptible
? (control.value !== null
&& control.value >= this.minPreemptibleInstanceNumber
&& control.value <= this.maxPreemptibleInstanceNumber ? null : { valid: false })
: control.value;
+ }
}
private validPreemptibleNumberRange() {
@@ -233,17 +240,19 @@
}
private validInstanceSpotRange(control) {
- if (this.isSelected.spotInstances)
+ if (this.isSelected.spotInstances) {
return this.isSelected.spotInstances
? (control.value >= this.minSpotPrice && control.value <= this.maxSpotPrice ? null : { valid: false })
: control.value;
+ }
}
private validConfiguration(control) {
- if (this.isSelected.configuration)
- return this.isSelected.configuration ?
- (control.value && control.value !== null && CheckUtils.isJSON(control.value) ? null : { valid: false })
+ if (this.isSelected.configuration) {
+ return this.isSelected.configuration
+ ? (control.value && control.value !== null && CheckUtils.isJSON(control.value) ? null : { valid: false })
: null;
+ }
}
private checkDuplication(control) {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.html
index dec0ebd..b1965fd 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.html
@@ -18,7 +18,6 @@
-->
<div class="source">
-
<div *ngIf="!resources?.length">
<span *ngIf="!resources.length" class="no-details">no details</span>
</div>
@@ -32,25 +31,44 @@
<span ngClass="{{resource.status.toLowerCase() || ''}}" class="resource-status">{{resource.status}}</span>
<div class="resource-actions">
- <a class="schedule" [ngClass]="{'active': resource.scheduler_data,
- 'not-allowed': environment.status !== 'running' && environment.status !== 'stopped'
- || resource.status !== 'running' && resource.status !== 'stopped' }">
+ <a
+ class="schedule"
+ [ngClass]="{
+ 'active': resource.scheduler_data,
+ 'not-allowed': environment.status !== 'running' && environment.status !== 'stopped'
+ || resource.status !== 'running' && resource.status !== 'stopped' }"
+ >
<i class="material-icons" (click)="openScheduleDialog(resource)">schedule</i>
</a>
- <a class="start-stop-action"
- *ngIf="resource.image === 'docker.datalab-dataengine' && environment.status === 'running'">
- <i class="material-icons" *ngIf="resource.status === 'running' || resource.status === 'stopping'"
- (click)="toggleResourceAction(resource, 'stop')"
- [ngClass]="{'not-allowed' : resource.status === 'stopping' }">pause_circle_outline</i>
- <i class="material-icons" *ngIf="resource.status === 'stopped' || resource.status === 'starting'"
- (click)="toggleResourceAction(resource, 'start')"
- [ngClass]="{'not-allowed' : resource.status === 'starting' }">play_circle_outline</i>
+ <a
+ class="start-stop-action"
+ *ngIf="resource.image === 'docker.datalab-dataengine' && environment.status === 'running'"
+ >
+ <i
+ class="material-icons"
+ *ngIf="resource.status === 'running' || resource.status === 'stopping'"
+ (click)="toggleResourceAction(resource, 'stop')"
+ [ngClass]="{'not-allowed' : resource.status === 'stopping' }"
+ >
+ pause_circle_outline
+ </i>
+ <i
+ class="material-icons"
+ *ngIf="resource.status === 'stopped' || resource.status === 'starting'"
+ (click)="toggleResourceAction(resource, 'start')"
+ [ngClass]="{'not-allowed' : resource.status === 'starting' }"
+ >
+ play_circle_outline
+ </i>
</a>
- <a class="remove_butt" [ngClass]="{'disabled' : environment.status !== 'running' || environment.status !== 'stopped'
+ <a
+ class="remove_butt"
+ [ngClass]="{'disabled' : environment.status !== 'running' || environment.status !== 'stopped'
&& resource.status != 'running' && resource.status != 'failed' && resource.status != 'stopped' }"
- (click)="toggleResourceAction(resource, 'terminate')">
+ (click)="toggleResourceAction(resource, 'terminate')"
+ >
<i class="material-icons">highlight_off</i>
</a>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss
index 2d9d8a5..88afbcc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss
@@ -1,4 +1,4 @@
- /*!
+/*!
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
@@ -17,116 +17,96 @@
* under the License.
*/
- :host{
- width:100%;
- }
+:host {
+ width: 100%;
+}
- .source {
- .no-details {
- color: #bdc9d5;
- }
+.source {
+ .no-details {
+ color: #bdc9d5;
+ }
- .resource-wrap {
- display: flex;
- justify-content: space-between;
- height: 26px;
- align-items: center;
+ .resource-wrap {
+ display: flex;
+ justify-content: space-between;
+ height: 26px;
+ align-items: center;
- .resource-name {
- width: 50%;
- white-space: nowrap;
- overflow: hidden;
+ .resource-name {
+ width: 50%;
+ white-space: nowrap;
+ overflow: hidden;
- .detailed-link {
- color: #35afd5;
- cursor: pointer;
- }
- }
+ .detailed-link {
+ color: #35afd5;
+ cursor: pointer;
+ }
+ }
- .resource-status {
- width: 35%;
- text-transform: capitalize;
- }
+ .resource-status {
+ width: 35%;
+ text-transform: capitalize;
+ }
- .resource-actions {
- width: 15%;
- display: flex;
- justify-content: flex-end;
- padding-right: 10px;
+ .resource-actions {
+ display: flex;
+ justify-content: flex-end;
+ width: 15%;
+ padding-right: 10px;
- a {
- text-decoration: none;
- color: #748ba3;
- font-size: 18px;
- text-align: center;
+ a {
+ text-decoration: none;
+ color: #748ba3;
+ font-size: 18px;
+ text-align: center;
- i {
- font-size: 18px;
- padding: 0 2px;
- }
- }
+ i {
+ font-size: 18px;
+ padding: 0 2px;
+ }
+ }
- .schedule {
- cursor: pointer;
- display: flex;
- align-items: center;
- font-size: 18px;
+ .schedule {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ cursor: pointer;
- &.not-allowed {
- pointer-events: none;
- }
+ &.not-allowed {
+ pointer-events: none;
+ }
- &.active {
- color: #49af38;
- }
- }
+ &.active {
+ color: #49af38;
+ }
+ }
- .start-stop-action {
- display: flex;
- align-items: center;
- font-size: 18px;
- color: #36afd5;
+ .start-stop-action {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ color: #36afd5;
- i {
- cursor: pointer;
+ i {
+ cursor: pointer;
- &.not-allowed {
- pointer-events: none;
- }
- }
- }
+ &.not-allowed {
+ pointer-events: none;
+ }
+ }
+ }
- .remove_butt {
- cursor: pointer;
- color: #ef5c4b;
- display: flex;
- align-items: center;
+ .remove_butt {
+ display: flex;
+ align-items: center;
+ color: #ef5c4b;
+ cursor: pointer;
- &.disabled {
- color: #f5d3d3;
- pointer-events: none;
- }
- }
- }
- }
- }
- //@media screen and (max-width: 1520px) {
- // .resources,
- // managment {
- // .source {
- // .resource-wrap {
- // .resource-name {
- // width: 42%;
- // }
- //
- // .resource-status {
- // width: 43%;
- // }
- //
- // .resource-actions {
- // width: 15%;
- // }
- // }
- // }
- // }
- //}
+ &.disabled {
+ color: #f5d3d3;
+ pointer-events: none;
+ }
+ }
+ }
+ }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.ts
index 7bc5126..b59b9e5 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.ts
@@ -88,7 +88,6 @@
}
}
-
@Component({
selector: 'confirmation-dialog',
template: `
@@ -116,6 +115,7 @@
</div>
`
})
+
export class ConfirmationDialogComponent {
constructor(
public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.html
index b628122..ae576f2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.html
@@ -45,9 +45,23 @@
</div>
</form>
<div class="text-center m-top-30 m-bott-10">
- <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
- <button mat-raised-button type="button" [disabled]="!createAMIForm.valid"
- (click)="assignChanges(createAMIForm.value)" class="butt butt-success action">Create</button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="dialogRef.close()"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ [disabled]="!createAMIForm.valid"
+ (click)="assignChanges(createAMIForm.value)"
+ class="butt butt-success action"
+ >
+ Create
+ </button>
</div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.scss
index 367b1a4..9fca02a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.scss
@@ -20,7 +20,6 @@
form {
textarea {
height: 70px;
- resize: none;
padding-top: 8px;
// font: 300 16px/26px 'Open Sans', sans-serif;
font-style: normal;
@@ -28,6 +27,7 @@
font-size: 16px;
line-height: 26px;
font-family:'Open Sans', sans-serif;
+ resize: none;
}
}
.ami-dialog{
@@ -35,8 +35,8 @@
&.name {
padding-bottom: 30px;
.error{
- top: 37px;
position: absolute;
+ top: 37px;
right: 0;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.ts
index 56cb2a4..315f8f3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/ami-create-dialog/ami-create-dialog.component.ts
@@ -23,7 +23,7 @@
import { ToastrService } from 'ngx-toastr';
import { UserResourceService } from '../../../core/services';
-import {HTTP_STATUS_CODES, PATTERNS} from '../../../core/util';
+import { HTTP_STATUS_CODES, PATTERNS } from '../../../core/util';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
@Component({
@@ -63,7 +63,12 @@
private initFormModel(): void {
this.createAMIForm = this._fb.group({
- name: ['', [Validators.required, Validators.pattern(PATTERNS.namePattern), Validators.maxLength(10), this.checkDuplication.bind(this)]],
+ name: ['', [
+ Validators.required,
+ Validators.pattern(PATTERNS.namePattern),
+ Validators.maxLength(10),
+ this.checkDuplication.bind(this)
+ ]],
description: [''],
exploratory_name: [this.notebook.name],
project_name: [this.notebook.project]
@@ -71,14 +76,16 @@
}
private checkDuplication(control) {
- if (control.value)
+ if (control.value) {
return this.isDuplicate(control.value) ? { duplication: true } : null;
+ }
}
private isDuplicate(value: string) {
for (let index = 0; index < this.imagesList.length; index++) {
- if (this.delimitersFiltering(value) === this.delimitersFiltering(this.imagesList[index].name))
+ if (this.delimitersFiltering(value) === this.delimitersFiltering(this.imagesList[index].name)) {
return true;
+ }
}
return false;
}
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 a194a3d..3bf0518 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,29 +33,28 @@
</table>
<div class="billing-detail content-box">
<mat-list>
- <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>
+ <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>-->
- <div class="usage-date-start">Start</div>
- <div class="usage-date-end">End</div>
- <div class="cost-currency">Cost</div>
- </mat-list-item>
- <div class="scrolling-content" id="scrolling">
- <mat-list-item *ngFor="let item of notebook.billing.report_lines">
- <div class="resource-name ellipsis" [ngClass]="{ 'wide-name-field' : provider === 'azure' }"
- matTooltip="{{ item.resource_name }}"
- matTooltipPosition="above">
- {{ item.resource_name }}
- </div>
- <div class="service">{{ item.product }}</div>
+ <div class="usage-date-start">Start</div>
+ <div class="usage-date-end">End</div>
+ <div class="cost-currency">Cost</div>
+ </mat-list-item>
+ <div class="scrolling-content" id="scrolling">
+ <mat-list-item *ngFor="let item of notebook.billing.report_lines">
+ <div class="resource-name ellipsis" [ngClass]="{ 'wide-name-field' : provider === 'azure' }"
+ matTooltip="{{ item.resource_name }}"
+ matTooltipPosition="above">
+ {{ item.resource_name }}
+ </div>
+ <div class="service">{{ item.product }}</div>
<!-- <div class="resource-type" >{{ item.resourse_type }}</div>-->
- <div class="usage-date-start ellipsis">{{ item.from.join('/') | localDate : 'shortDate'}}</div>
- <div class="usage-date-end ellipsis">{{ item.to.join('/') | localDate : 'shortDate'}}</div>
- <div class="cost-currency">{{ item.cost | localcurrency }}</div>
- </mat-list-item>
- </div>
-
+ <div class="usage-date-start ellipsis">{{ item.from.join('/') | localDate : 'shortDate'}}</div>
+ <div class="usage-date-end ellipsis">{{ item.to.join('/') | localDate : 'shortDate'}}</div>
+ <div class="cost-currency">{{ item.cost | localcurrency }}</div>
+ </mat-list-item>
+ </div>
</mat-list>
<div class="total">
<strong>Total: </strong>{{ notebook.cost | localcurrency }}</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 897482c..615145c 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
@@ -21,17 +21,15 @@
table {
width: 100%;
- th,
- td {
- border: 1px solid #edf1f5;
+ th, td {
padding: 18px 15px;
+ border: 1px solid #edf1f5;
text-align: left;
}
}
}
.billing-detail {
-
div {
font-size: 13px;
}
@@ -48,17 +46,17 @@
.resource-name,
.usage-date-start,
.usage-date-end {
- overflow: hidden;
padding-right: 10px;
+ overflow: hidden;
white-space: nowrap;
}
- .resource-name{
+ .resource-name {
width: 20%;
}
.usage-date-start,
- .usage-date-end{
+ .usage-date-end {
width: 17%;
}
@@ -67,8 +65,8 @@
}
.resource-name {
- cursor: pointer;
width: 20%;
+ cursor: pointer;
}
.total {
@@ -86,10 +84,10 @@
}
.mat-list-item-content {
- font-size: 14px !important;
justify-content: space-between;
+ font-size: 14px !important;
}
-mat-tooltip-component>.mat-tooltip {
+mat-tooltip-component > .mat-tooltip {
white-space: pre;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
index 90e2ba4..db3615d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
@@ -29,10 +29,17 @@
<label class="label">Select project</label>
<div class="control selector-wrapper">
<mat-form-field>
- <mat-select formControlName="project" disableOptionCentering panelClass="create-resources-dialog scrolling" placeholder="Select project">
+ <mat-select
+ formControlName="project"
+ disableOptionCentering
+ panelClass="create-resources-dialog scrolling"
+ placeholder="Select project"
+ >
<mat-option *ngFor="let project of projects" [value]="project.name" (click)="setEndpoints(project)">
- {{ project.name }}</mat-option>
- <mat-option *ngIf="!projects.length" class="multiple-select ml-10" disabled>Projects list is empty
+ {{ project.name }}
+ </mat-option>
+ <mat-option *ngIf="!projects.length" class="multiple-select ml-10" disabled>
+ Projects list is empty
</mat-option>
</mat-select>
<button class="caret">
@@ -46,12 +53,22 @@
<label class="label">Select endpoint</label>
<div class="control selector-wrapper" [ngClass]="{ 'not-active' : !endpoints.length }">
<mat-form-field>
- <mat-select formControlName="endpoint" disableOptionCentering [disabled]="!endpoints.length"
- panelClass="create-resources-dialog scrolling" placeholder="Select endpoint">
- <mat-option *ngFor="let endpoint of endpoints" [value]="endpoint"
- (click)="getTemplates(createExploratoryForm?.controls['project'].value, endpoint)">{{ endpoint }}
+ <mat-select
+ formControlName="endpoint"
+ disableOptionCentering
+ [disabled]="!endpoints.length"
+ panelClass="create-resources-dialog scrolling"
+ placeholder="Select endpoint"
+ >
+ <mat-option
+ *ngFor="let endpoint of endpoints"
+ [value]="endpoint"
+ (click)="getTemplates(createExploratoryForm?.controls['project'].value, endpoint)"
+ >
+ {{ endpoint }}
</mat-option>
- <mat-option *ngIf="!endpoints.length" class="multiple-select ml-10" disabled>Endpoints list is empty
+ <mat-option *ngIf="!endpoints.length" class="multiple-select ml-10" disabled>
+ Endpoints list is empty
</mat-option>
</mat-select>
<button class="caret">
@@ -60,23 +77,34 @@
</mat-form-field>
</div>
</div>
+
<div class="control-group">
<label class="label">Select template</label>
- <div class="control selector-wrapper"
- [matTooltip]="'Notebook creations are not available. Please, check your permissions.'"
- matTooltipPosition="above"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!(templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)"
+ <div
+ class="control selector-wrapper"
+ [matTooltip]="'Notebook creations are not available. Please, check your permissions.'"
+ matTooltipPosition="above"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!(templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)"
>
<span class="form-field-wrapper" [ngClass]="{ 'not-active' : !templates.length || (templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)}">
<mat-form-field>
- <mat-select formControlName="version" disableOptionCentering [disabled]="!templates.length || (templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)"
- panelClass="create-resources-dialog scrolling" placeholder="Select template">
- <mat-option *ngFor="let template of templates"
- [value]="template.exploratory_environment_versions[0].version" (click)="getShapes(template)">
+ <mat-select
+ formControlName="version"
+ disableOptionCentering
+ [disabled]="!templates.length || (templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)"
+ panelClass="create-resources-dialog scrolling"
+ placeholder="Select template"
+ >
+ <mat-option
+ *ngFor="let template of templates"
+ [value]="template.exploratory_environment_versions[0].version"
+ (click)="getShapes(template)"
+ >
{{ template.exploratory_environment_versions[0].template_name }}
</mat-option>
- <mat-option *ngIf="!templates.length" class="multiple-select ml-10" disabled>Templates list is empty
+ <mat-option *ngIf="!templates.length" class="multiple-select ml-10" disabled>
+ Templates list is empty
</mat-option>
</mat-select>
<button class="caret">
@@ -118,7 +146,8 @@
>
{{ image?.status ? image?.name + ' (custom image)' : image?.name }}
</mat-option>
- <mat-option *ngIf="!images?.length" class="multiple-select ml-10" disabled>Images list is empty
+ <mat-option *ngIf="!images?.length" class="multiple-select ml-10" disabled>
+ Images list is empty
</mat-option>
</mat-select>
<button class="caret">
@@ -142,13 +171,20 @@
<div class="control-group name-control">
<label class="label">Name</label>
<div class="control">
- <input [class.danger_field]=" !createExploratoryForm?.controls['name'].valid
- && createExploratoryForm?.controls['name'].dirty
- && createExploratoryForm?.controls['name'].hasError('duplication')" type="text"
- class="form-control" placeholder="Enter Name" formControlName="name">
+ <input
+ [class.danger_field]=" !createExploratoryForm?.controls['name'].valid
+ && createExploratoryForm?.controls['name'].dirty
+ && createExploratoryForm?.controls['name'].hasError('duplication')"
+ type="text"
+ class="form-control"
+ placeholder="Enter Name"
+ formControlName="name"
+ />
<span class="error" *ngIf="createExploratoryForm?.controls['name'].hasError('duplication')">This name already exists in current project.</span>
- <span class="error" *ngIf="createExploratoryForm?.controls['name'].hasError('maxlength') &&
- !createExploratoryForm?.controls['name'].hasError('pattern')"
+ <span
+ class="error"
+ *ngIf="createExploratoryForm?.controls['name'].hasError('maxlength')
+ && !createExploratoryForm?.controls['name'].hasError('pattern')"
>
Name cannot be longer than {{maxNotebookLength}} characters.
</span>
@@ -160,27 +196,33 @@
<div class="control-group">
<label class="label">Instance size</label>
- <div class="control selector-wrapper"
- [matTooltip]="'Instance size are not available. Please, check your permissions.'"
- matTooltipPosition="above"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!(!areShapes && currentTemplate)"
+ <div
+ class="control selector-wrapper"
+ [matTooltip]="'Instance size are not available. Please, check your permissions.'"
+ matTooltipPosition="above"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!(!areShapes && currentTemplate)"
>
<span class="form-field-wrapper" [ngClass]="{ 'not-active': !currentTemplate || !areShapes && currentTemplate}">
- <mat-form-field>
- <mat-label>Select instance size</mat-label>
- <mat-select formControlName="shape" disableOptionCentering [disabled]="!currentTemplate || !areShapes && currentTemplate"
- panelClass="create-resources-shapes scrolling" placeholder="Instance size">
- <mat-optgroup *ngFor="let item of (shapes | keys)" [label]="item.key | underscoreless">
- <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type" (click)="setInstanceSize()">
- <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }}
- </mat-option>
- </mat-optgroup>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>Select instance size</mat-label>
+ <mat-select
+ formControlName="shape"
+ disableOptionCentering
+ [disabled]="!currentTemplate || !areShapes && currentTemplate"
+ panelClass="create-resources-shapes scrolling"
+ placeholder="Instance size"
+ >
+ <mat-optgroup *ngFor="let item of (shapes | keys)" [label]="item.key | underscoreless">
+ <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type" (click)="setInstanceSize()">
+ <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }}
+ </mat-option>
+ </mat-optgroup>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
</span>
</div>
</div>
@@ -196,20 +238,23 @@
<span
class="error"
*ngIf="createExploratoryForm?.controls['custom_tag'].hasError('maxlength') &&
- !createExploratoryForm?.controls['custom_tag'].hasError('pattern')">
- Custom tag name cannot be longer than {{maxCustomTagLength}} characters.
- </span>
- <span class="error"
- *ngIf="createExploratoryForm?.controls['custom_tag'].hasError('pattern')">
+ !createExploratoryForm?.controls['custom_tag'].hasError('pattern')"
+ >
+ Custom tag name cannot be longer than {{maxCustomTagLength}} characters.
+ </span>
+ <span
+ class="error"
+ *ngIf="createExploratoryForm?.controls['custom_tag'].hasError('pattern')"
+ >
Custom tag can only contain letters, numbers, hyphens and '_' but can not end with special characters.</span>
</div>
<div *ngIf="currentTemplate">
<ng-template
- [ngIf]="selectedCloud === 'gcp' &&
- (currentTemplate?.image === 'docker.datalab-jupyter' ||
- currentTemplate?.image === 'docker.datalab-deeplearning' ||
- currentTemplate?.image === 'docker.datalab-tensor')"
+ [ngIf]="selectedCloud === 'gcp'
+ && (currentTemplate?.image === 'docker.datalab-jupyter'
+ || currentTemplate?.image === 'docker.datalab-deeplearning'
+ || currentTemplate?.image === 'docker.datalab-tensor')"
>
<div class="checkbox-group">
<div
@@ -229,60 +274,76 @@
>
<div class="control-group">
<label class="label">GPU type</label>
- <div class="control selector-wrapper"
- [matTooltip]="'Please, select instance size.'"
- matTooltipPosition="above"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!!createExploratoryForm.controls['shape'].value"
+ <div
+ class="control selector-wrapper"
+ [matTooltip]="'Please, select instance size.'"
+ matTooltipPosition="above"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!!createExploratoryForm.controls['shape'].value"
>
- <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['shape'].value}">
- <mat-form-field>
- <mat-label>Select GPU type</mat-label>
- <mat-select formControlName="gpu_type" disableOptionCentering [disabled]="!createExploratoryForm.controls['shape'].value"
- panelClass="create-resources-dialog" placeholder="GPU type">
- <mat-option *ngFor="let list_item of gpuTypes; index as i" [value]="list_item" (click)="setCount('', list_item)">
- <strong class="highlight icon-label">{{ addSizeToGpuType(i) }}</strong> {{ list_item }}
- </mat-option>
- <mat-option *ngIf="!gpuTypes.length" class="multiple-select ml-10" disabled>
- GPU list is empty
- </mat-option>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
- </span>
+ <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['shape'].value}">
+ <mat-form-field>
+ <mat-label>Select GPU type</mat-label>
+ <mat-select
+ formControlName="gpu_type"
+ disableOptionCentering
+ [disabled]="!createExploratoryForm.controls['shape'].value"
+ panelClass="create-resources-dialog"
+ placeholder="GPU type"
+ >
+ <mat-option *ngFor="let list_item of gpuTypes; index as i" [value]="list_item" (click)="setCount('', list_item)">
+ <strong class="highlight icon-label">{{ addSizeToGpuType(i) }}</strong> {{ list_item }}
+ </mat-option>
+ <mat-option *ngIf="!gpuTypes.length" class="multiple-select ml-10" disabled>
+ GPU list is empty
+ </mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </span>
</div>
</div>
<div class="control-group">
<label class="label">GPU count</label>
- <div class="control selector-wrapper"
- [matTooltip]="'Please, select GPU type.'"
- matTooltipPosition="above"
- [matTooltipClass]="'full-size-tooltip'"
- [matTooltipDisabled]="!!createExploratoryForm.controls['gpu_type'].value"
+ <div
+ class="control selector-wrapper"
+ [matTooltip]="'Please, select GPU type.'"
+ matTooltipPosition="above"
+ [matTooltipClass]="'full-size-tooltip'"
+ [matTooltipDisabled]="!!createExploratoryForm.controls['gpu_type'].value"
>
- <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['gpu_type'].value}">
- <mat-form-field>
- <mat-label>Select GPU count</mat-label>
- <mat-select formControlName="gpu_count" disableOptionCentering [disabled]="!createExploratoryForm.controls['gpu_type'].value"
- panelClass="create-resources-dialog" placeholder="GPU count">
- <mat-option *ngFor="let list_item of gpuCount" [value]="list_item">
- {{ list_item }}
- </mat-option>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
- </span>
+ <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['gpu_type'].value}">
+ <mat-form-field>
+ <mat-label>Select GPU count</mat-label>
+ <mat-select
+ formControlName="gpu_count"
+ disableOptionCentering
+ [disabled]="!createExploratoryForm.controls['gpu_type'].value"
+ panelClass="create-resources-dialog"
+ placeholder="GPU count"
+ >
+ <mat-option *ngFor="let list_item of gpuCount" [value]="list_item">
+ {{ list_item }}
+ </mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </span>
</div>
</div>
</ng-template>
- </div>
+ </div>
</ng-template>
- <div class="checkbox-group"
- *ngIf="currentTemplate?.image !== 'docker.datalab-zeppelin' && currentTemplate?.image !== 'docker.datalab-superset' && currentTemplate?.image !== 'docker.datalab-jupyterlab'">
+ <div
+ class="checkbox-group"
+ *ngIf="currentTemplate?.image !== 'docker.datalab-zeppelin'
+ && currentTemplate?.image !== 'docker.datalab-superset'
+ && currentTemplate?.image !== 'docker.datalab-jupyterlab'"
+ >
<div class="d-flex cursor-pointer label m-bott-20" (click)="selectConfiguration()">
<div class="empty-checkbox" [ngClass]="{'checked': this.additionalParams.configurationNode}">
<span class="checked-checkbox" *ngIf="this.additionalParams.configurationNode"></span>
@@ -290,27 +351,48 @@
<span class=" pl-5">Spark configurations</span>
</div>
<div class="config-details" [ngClass]="{ show: this.additionalParams.configurationNode}">
- <textarea formControlName="cluster_config" placeholder="Cluster configuration template, JSON"
- data-gramm_editor="false" id="config"></textarea>
- <span class="error spark-config"
- *ngIf="!createExploratoryForm?.controls.cluster_config.valid && createExploratoryForm?.controls['cluster_config'].dirty">Configuration
- parameters is not in a valid format.</span>
+ <textarea
+ formControlName="cluster_config"
+ placeholder="Cluster configuration template, JSON"
+ data-gramm_editor="false"
+ id="config"
+ ></textarea>
+ <span
+ class="error spark-config"
+ *ngIf="!createExploratoryForm?.controls.cluster_config.valid
+ && createExploratoryForm?.controls['cluster_config'].dirty"
+ >
+ Configuration parameters is not in a valid format.
+ </span>
</div>
</div>
- <small *ngIf="currentTemplate?.image === 'docker.datalab-zeppelin'">
- Spark default configuration for Apache Zeppelin can not be changed from DataLab UI. Currently it can be
- done directly through Apache Zeppelin interpreter menu.
- For more details please refer for Apache Zeppelin <a
- href="https://zeppelin.apache.org/docs/0.9.0/usage/interpreter/overview.html" target="_blank">official
- documentation</a>.
- </small>
+ <small *ngIf="currentTemplate?.image === 'docker.datalab-zeppelin'">
+ Spark default configuration for Apache Zeppelin can not be changed from DataLab UI. Currently it can be
+ done directly through Apache Zeppelin interpreter menu.
+ For more details please refer for Apache Zeppelin <a
+ href="https://zeppelin.apache.org/docs/0.9.0/usage/interpreter/overview.html" target="_blank">official
+ documentation</a>.
+ </small>
</div>
<div class="text-center m-top-30" id="buttons">
- <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
- <button mat-raised-button type="button" class="butt butt-success action"
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="dialogRef.close()"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-success action"
[disabled]="!createExploratoryForm?.valid"
- (click)="createExploratoryEnvironment(createExploratoryForm.value)">Create</button>
+ (click)="createExploratoryEnvironment(createExploratoryForm.value)"
+ >
+ Create
+ </button>
</div>
</form>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss
index 44aa50d..4bd5d07 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss
@@ -18,8 +18,7 @@
*/
.checkbox-group {
-
- .empty-checkbox{
+ .empty-checkbox {
margin: 0;
}
@@ -30,11 +29,11 @@
text-align: left;
&.show {
+ position: relative;
+ margin-top: 10px;
height: 200px;
visibility: visible;
opacity: 1;
- position: relative;
- margin-top: 10px;
}
textarea {
@@ -46,7 +45,7 @@
font-family: Consolas, monospace;
}
- .spark-config{
+ .spark-config {
position: absolute;
bottom: -15px;
right: 0;
@@ -88,7 +87,7 @@
overflow-y: auto;
}
-.form-field-wrapper{
+.form-field-wrapper {
width: 100%;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
index 0e6c5af..fa32e8e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
@@ -24,11 +24,11 @@
import { Project } from '../../../administration/project/project.component';
import { UserResourceService, ProjectService } from '../../../core/services';
-import {CheckUtils, SortUtils, HTTP_STATUS_CODES, PATTERNS, HelpUtils} from '../../../core/util';
+import { CheckUtils, SortUtils, HTTP_STATUS_CODES, PATTERNS, HelpUtils } from '../../../core/util';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { CLUSTER_CONFIGURATION } from '../../computational/computational-resource-create-dialog/cluster-configuration-templates';
-import {tap} from 'rxjs/operators';
-import {timer} from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { timer } from 'rxjs';
@Component({
selector: 'create-environment',
@@ -140,7 +140,6 @@
this.userResourceService.getExploratoryTemplates(project, endpoint)
.pipe(tap(results => {
-
results.sort((a, b) =>
(a.exploratory_environment_versions[0].template_name > b.exploratory_environment_versions[0].template_name) ?
1 : -1);
@@ -149,7 +148,6 @@
this.templates = templates;
}
);
-
}
public getShapes(template) {
@@ -217,7 +215,6 @@
template_name: this.currentTemplate.exploratory_environment_versions[0].template_name
};
-
if (!data.notebook_image_name
&& this.currentTemplate.image === 'docker.datalab-deeplearning'
&& this.selectedCloud === 'aws' || this.selectedCloud === 'azure') {
@@ -321,17 +318,19 @@
private getImagesList() {
this.userResourceService.getUserImages(this.currentTemplate.image, this.createExploratoryForm.controls['project'].value,
this.createExploratoryForm.controls['endpoint'].value)
- .subscribe((res: any) => {
- this.images = res.filter(el => el.status === 'CREATED');
-
- if(this.selectedCloud === 'gcp' && this.currentTemplate.image === 'docker.datalab-deeplearning') {
+ .subscribe(
+ (res: any) => {
+ this.images = res.filter(el => el.status === 'CREATED');
+
+ if(this.selectedCloud === 'gcp' && this.currentTemplate.image === 'docker.datalab-deeplearning') {
this.currentTemplate.exploratory_environment_images = this.currentTemplate.exploratory_environment_images.map(image => {
return {name: image['Image family'] ?? image.name, description: image['Description'] ?? image.description}
});
this.images.push(...this.currentTemplate.exploratory_environment_images);
}
- },
- error => this.toastr.error(error.message || 'Images list loading failed!', 'Oops!'));
+ },
+ error => this.toastr.error(error.message || 'Images list loading failed!', 'Oops!')
+ );
}
private checkDuplication(control) {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
index fbd5ff1..bcced52 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
@@ -60,34 +60,44 @@
<div *ngIf="data.type === 'environment'" class="detail-info">
<p>Open following URL(s) in your browser to access this box:</p>
<div class="links_block">
-<!-- <p *ngFor="let item of notebook.exploratory_urls">-->
-<!-- <span class="description">{{item.description}}: </span>-->
-<!-- <a class="ellipsis" matTooltip="{{item.url}}" matTooltipPosition="above" href="{{item.url}}"-->
-<!-- target="_blank" (click)="logAction(notebook.name, item.description)">-->
-<!-- {{item.url}}{{notebook.name}}-->
-<!-- </a>-->
-<!-- </p>-->
+ <!-- <p *ngFor="let item of notebook.exploratory_urls">-->
+ <!-- <span class="description">{{item.description}}: </span>-->
+ <!-- <a class="ellipsis" matTooltip="{{item.url}}" matTooltipPosition="above" href="{{item.url}}"-->
+ <!-- target="_blank" (click)="logAction(notebook.name, item.description)">-->
+ <!-- {{item.url}}{{notebook.name}}-->
+ <!-- </a>-->
+ <!-- </p> -->
<ng-container *ngFor="let item of notebook.exploratory_urls">
- <span class="d-none" *ngIf="item.description.toLowerCase() === 'ungit' && notebook.exploratory_urls[0].description.toLowerCase().indexOf('zeppelin') !== -1; else ungit">
- </span>
+ <span
+ class="d-none"
+ *ngIf="item.description.toLowerCase() === 'ungit'
+ && notebook.exploratory_urls[0].description.toLowerCase().indexOf('zeppelin') !== -1; else ungit"
+ ></span>
<ng-template #ungit>
<p (mouseleave)="hideCopyIcon()">
<span class="description">{{item.description}}: </span>
- <a (mouseover)="showCopyIcon(item.description)"
- (click)="logAction(notebook.name, item.description)"
- class="ellipsis none-select resources-url" matTooltip="{{item.url}}"
- matTooltipPosition="above"
- href="{{item.url}}"
- target="_blank"
- (contextmenu)="false"
+ <a
+ (mouseover)="showCopyIcon(item.description)"
+ (click)="logAction(notebook.name, item.description)"
+ class="ellipsis none-select resources-url" matTooltip="{{item.url}}"
+ matTooltipPosition="above"
+ href="{{item.url}}"
+ target="_blank"
+ (contextmenu)="false"
>
{{item.url}}
</a>
- <span (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()" *ngIf="isCopyIconVissible[item.description]" [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'" matTooltipPosition="above" class="copy-icon-wrapper">
- <span class="link-icon" (click)="copyLink(item.url)" >
- <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
- </span>
+ <span
+ (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()"
+ *ngIf="isCopyIconVissible[item.description]"
+ [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'"
+ matTooltipPosition="above"
+ class="copy-icon-wrapper"
+ >
+ <span class="link-icon" (click)="copyLink(item.url)" >
+ <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
</span>
+ </span>
</p>
</ng-template>
</ng-container>
@@ -97,178 +107,208 @@
<div class="detail-info" *ngIf="!notebook.error_message">
<p>Edge Node IP Address {{notebook.node_ip}}</p>
<p *ngIf="notebook.status === 'running'">Up time {{upTimeInHours}} hour(s) since
- {{notebook.time ? (notebook.time | longDate ) : "not specified."}}</p>
+ {{notebook.time ? (notebook.time | longDate ) : "not specified."}}
+ </p>
<p *ngIf="notebook.url?.length">Open following URL(s) in your browser to access this box:</p>
<div class="links_block">
<ng-container *ngFor="let item of notebook.url">
- <span class="d-none" *ngIf="item.description.toLowerCase() === 'ungit' && notebook.template_name.toLowerCase().indexOf('zeppelin ') !== -1; else ungit">
- </span>
+ <span
+ class="d-none"
+ *ngIf="item.description.toLowerCase() === 'ungit'
+ && notebook.template_name.toLowerCase().indexOf('zeppelin ') !== -1; else ungit"
+ ></span>
<ng-template #ungit>
<p (mouseleave)="hideCopyIcon()">
<span class="description">{{item.description}}: </span>
- <a (mouseover)="showCopyIcon(item.description)"
- (click)="logAction(notebook.name, item.description)"
- class="ellipsis none-select resources-url" matTooltip="{{item.url}}"
- matTooltipPosition="above"
- href="{{item.url}}"
+ <a
+ (mouseover)="showCopyIcon(item.description)"
+ (click)="logAction(notebook.name, item.description)"
+ class="ellipsis none-select resources-url" matTooltip="{{item.url}}"
+ matTooltipPosition="above"
+ href="{{item.url}}"
target="_blank"
- (contextmenu)="false"
+ (contextmenu)="false"
>
{{item.url}}
</a>
- <span (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()" *ngIf="isCopyIconVissible[item.description]" [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'" matTooltipPosition="above" class="copy-icon-wrapper">
+ <span
+ (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()"
+ *ngIf="isCopyIconVissible[item.description]"
+ [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'"
+ matTooltipPosition="above"
+ class="copy-icon-wrapper"
+ >
<span class="link-icon" (click)="copyLink(item.url)" >
<span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
- </span>
+ </span>
</span>
</p>
</ng-template>
</ng-container>
</div>
- <p class="flex" *ngIf="notebook.username">Node User: <span
- class="strong">{{ notebook.username }}</span></p>
- <p class="flex" *ngIf="notebook.password">Password: <span
- class="strong">{{ notebook.password }}</span></p>
+ <p class="flex" *ngIf="notebook.username">
+ Node User: <span class="strong">{{ notebook.username }}</span>
+ </p>
+ <p class="flex" *ngIf="notebook.password">
+ Password: <span class="strong">{{ notebook.password }}</span>
+ </p>
<p class="m-top-30">{{ 'Project bucket' }}: </p>
<div class="links_block" (mouseleave)="hideCopyIcon()">
- <p *ngIf="PROVIDER === 'azure' && notebook.account_name" class="bucket-info-wrapper">
- <span
- class="bucket-info"
- (mouseover)="showCopyIcon('bucket')"
- [matTooltip]="notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'"
- matTooltipPosition="above"
- [matTooltipClass]="'full-size-tooltip'"
- >
- {{notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'}}
- </span>
-
- <span *ngIf="isCopyIconVissible.bucket" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above">
- <span class="link-icon" (click)="copyLink(notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net', true);$event.stopPropagation()" >
- <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
- </span>
- </span>
- </p>
- <p *ngIf="notebook.bucket_name && PROVIDER !== 'azure'">{{ DICTIONARY[PROVIDER].container }}
- <span
- class="bucket-info"
- (mouseover)="showCopyIcon('bucket')"
- >
- {{ notebook.bucket_name }}
+ <p *ngIf="PROVIDER === 'azure' && notebook.account_name" class="bucket-info-wrapper">
+ <span
+ class="bucket-info"
+ (mouseover)="showCopyIcon('bucket')"
+ [matTooltip]="notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'"
+ matTooltipPosition="above"
+ [matTooltipClass]="'full-size-tooltip'"
+ >
+ {{notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'}}
</span>
- <span *ngIf="isCopyIconVissible.bucket" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above">
- <span class="link-icon" (click)="copyLink(notebook.bucket_name, true);$event.stopPropagation()" >
+
+ <span *ngIf="isCopyIconVissible.bucket" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above">
+ <span class="link-icon" (click)="copyLink(notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net', true);$event.stopPropagation()" >
<span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
</span>
+ </span>
+ </p>
+ <p *ngIf="notebook.bucket_name && PROVIDER !== 'azure'">{{ DICTIONARY[PROVIDER].container }}
+ <span
+ class="bucket-info"
+ (mouseover)="showCopyIcon('bucket')"
+ >
+ {{ notebook.bucket_name }}
+ </span>
+ <span *ngIf="isCopyIconVissible.bucket" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above">
+ <span class="link-icon" (click)="copyLink(notebook.bucket_name, true);$event.stopPropagation()" >
+ <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
</span>
- </p>
+ </span>
+ </p>
</div>
<div class="bucket-info bucket-link">
<span></span>
-<!-- <button-->
-<!-- type="button"-->
-<!-- class="butt"-->
-<!-- mat-raised-button-->
-<!-- >-->
-<!-- Open bucket browser-->
-<!-- </button>-->
-<!-- <span class="description open-bucket"-->
-<!-- [ngClass]="{'not-allow': !this.bucketStatus['view'] || !thisdata.buckets.length}"-->
-<!-- (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus['view'] && thisdata.buckets.length)"-->
-<!-- >-->
- <span class="description open-bucket"
- [matTooltip]="!this.bucketStatus['view']
- ? 'You have not permission to open bucket'
- : 'You have not any bucket'"
- matTooltipDisabled="{{this.bucketStatus['view'] && this.data.buckets.length}}"
- matTooltipPosition="above"
- [matTooltipClass]="'full-size-tooltip'"
- [ngClass]="{'not-allow': !this.bucketStatus['view'] || !this.data.buckets.length}"
- (click)="bucketBrowser(notebook.cloud_provider !== 'azure' ? notebook.bucket_name : notebook.account_name + '.' + notebook.bucket_name, notebook.endpoint, this.bucketStatus['view'] && this.data.buckets.length)"
- >
+ <!-- <button-->
+ <!-- type="button"-->
+ <!-- class="butt"-->
+ <!-- mat-raised-button-->
+ <!-- >-->
+ <!-- Open bucket browser-->
+ <!-- </button>-->
+ <!-- <span class="description open-bucket"-->
+ <!-- [ngClass]="{'not-allow': !this.bucketStatus['view'] || !thisdata.buckets.length}"-->
+ <!-- (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus['view'] && thisdata.buckets.length)"-->
+ <!-- >-->
+ <span
+ class="description open-bucket"
+ [matTooltip]="!this.bucketStatus['view']
+ ? 'You have not permission to open bucket'
+ : 'You have not any bucket'"
+ matTooltipDisabled="{{this.bucketStatus['view'] && this.data.buckets.length}}"
+ matTooltipPosition="above"
+ [matTooltipClass]="'full-size-tooltip'"
+ [ngClass]="{'not-allow': !this.bucketStatus['view'] || !this.data.buckets.length}"
+ (click)="bucketBrowser(
+ notebook.cloud_provider !== 'azure' ? notebook.bucket_name : notebook.account_name + '.' + notebook.bucket_name,
+ notebook.endpoint,
+ this.bucketStatus['view'] && this.data.buckets.length
+ )"
+ >
Open bucket browser
</span>
</div>
-<!-- <p>Shared endpoint bucket: </p>-->
-<!-- <div class="links_block" (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus['view'])"-->
-<!-- [matTooltip]="'You have not permission to open bucket'"-->
-<!-- matTooltipDisabled="{{this.bucketStatus['view']}}"-->
-<!-- matTooltipPosition="above"-->
-<!-- [matTooltipClass]="'full-size-tooltip'"-->
-<!-- >-->
-<!-- <p *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}-->
-<!-- <span class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus['view']}" (mouseover)="showCopyIcon('shared')">{{ notebook.shared_account_name}}</span>-->
-<!-- <span *ngIf="isCopyIconVissible.shared" class="link-icon" (click)="copyBucketName(notebook.shared_account_name)">-->
-<!-- <span _ngcontent-xpv-c19="" class="material-icons" matTooltip="Copy bucket name" matTooltipPosition="above">content_copy</span>-->
-<!-- </span>-->
-<!-- </p>-->
-<!-- <p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY[PROVIDER].container }}-->
-<!-- <span-->
-<!-- class="bucket-info bucket-link"-->
-<!-- [ngClass]="{'not-allow': !this.bucketStatus['view']}"-->
-<!-- (mouseover)="showCopyIcon('shared')"-->
-<!-- (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus['view'])"-->
-<!-- >-->
-<!-- {{ notebook.shared_bucket_name }}-->
-<!-- </span>-->
-<!-- <span *ngIf="isCopyIconVissible.shared" class="link-icon" (click)="copyBucketName(notebook.shared_bucket_name)">-->
-<!-- <span _ngcontent-xpv-c19="" class="material-icons" matTooltip="Copy bucket name" matTooltipPosition="above">content_copy</span>-->
-<!-- </span>-->
-<!-- </p>-->
-<!-- </div>-->
-<!-- <br />-->
+ <!-- <p>Shared endpoint bucket: </p>-->
+ <!-- <div class="links_block" (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus['view'])"-->
+ <!-- [matTooltip]="'You have not permission to open bucket'"-->
+ <!-- matTooltipDisabled="{{this.bucketStatus['view']}}"-->
+ <!-- matTooltipPosition="above"-->
+ <!-- [matTooltipClass]="'full-size-tooltip'"-->
+ <!-- >-->
+ <!-- <p *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}-->
+ <!-- <span class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus['view']}" (mouseover)="showCopyIcon('shared')">{{ notebook.shared_account_name}}</span>-->
+ <!-- <span *ngIf="isCopyIconVissible.shared" class="link-icon" (click)="copyBucketName(notebook.shared_account_name)">-->
+ <!-- <span _ngcontent-xpv-c19="" class="material-icons" matTooltip="Copy bucket name" matTooltipPosition="above">content_copy</span>-->
+ <!-- </span>-->
+ <!-- </p>-->
+ <!-- <p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY[PROVIDER].container }}-->
+ <!-- <span-->
+ <!-- class="bucket-info bucket-link"-->
+ <!-- [ngClass]="{'not-allow': !this.bucketStatus['view']}"-->
+ <!-- (mouseover)="showCopyIcon('shared')"-->
+ <!-- (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus['view'])"-->
+ <!-- >-->
+ <!-- {{ notebook.shared_bucket_name }}-->
+ <!-- </span>-->
+ <!-- <span *ngIf="isCopyIconVissible.shared" class="link-icon" (click)="copyBucketName(notebook.shared_bucket_name)">-->
+ <!-- <span _ngcontent-xpv-c19="" class="material-icons" matTooltip="Copy bucket name" matTooltipPosition="above">content_copy</span>-->
+ <!-- </span>-->
+ <!-- </p>-->
+ <!-- </div>-->
+ <!-- <br />-->
-<!-- <div *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.datalake_name">-->
-<!-- <p>Data Lake Store: </p>-->
-<!-- <div class="links_block">-->
-<!-- <p>Data Lake Store Account: <span class="bucket-info">{{ notebook.datalake_name }}</span></p>-->
-<!-- <p>Personal folder: <span class="bucket-info">{{ notebook.datalake_directory }}</span></p>-->
-<!-- <p>Collaboration folder: <span class="bucket-info">{{ notebook.datalake_shared_directory }}</span>-->
-<!-- </p>-->
-<!-- </div>-->
-<!-- </div>-->
+ <!-- <div *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.datalake_name">-->
+ <!-- <p>Data Lake Store: </p>-->
+ <!-- <div class="links_block">-->
+ <!-- <p>Data Lake Store Account: <span class="bucket-info">{{ notebook.datalake_name }}</span></p>-->
+ <!-- <p>Personal folder: <span class="bucket-info">{{ notebook.datalake_directory }}</span></p>-->
+ <!-- <p>Collaboration folder: <span class="bucket-info">{{ notebook.datalake_shared_directory }}</span>-->
+ <!-- </p>-->
+ <!-- </div>-->
+ <!-- </div>-->
- <!-- <p>
- <a href="#/help/accessnotebookguide" target="_blank">
- <small class="helper_instruction">
- <i class="material-icons">help_outline</i>
- Read instruction how to create the tunnel</small>
- </a>
- </p> -->
+ <!-- <p>
+ <a href="#/help/accessnotebookguide" target="_blank">
+ <small class="helper_instruction">
+ <i class="material-icons">help_outline</i>
+ Read instruction how to create the tunnel</small>
+ </a>
+ </p> -->
</div>
- <div class="checkbox-group" *ngIf="notebook.image !== 'docker.datalab-zeppelin'; else not_support"
- [hidden]="notebook.status !== 'running' || notebook.image === 'docker.datalab-superset' || notebook.image === 'docker.datalab-jupyterlab'">
- <label>
- <input #configurationNode type="checkbox" (change)="selectConfiguration()"/> Cluster configurations
- </label>
- <div class="checkbox-group">
- <form [formGroup]="configurationForm" novalidate>
- <div class="config-details" *ngIf="configuration?.nativeElement['checked'] || false">
- <textarea formControlName="configuration_parameters" id="config"
- placeholder="Cluster configuration template, JSON" data-gramm_editor="false"></textarea>
- <span class="danger_color"
- *ngIf="!configurationForm.controls.configuration_parameters.valid && configurationForm.controls['configuration_parameters'].dirty">Configuration
- parameters is not in a valid format</span>
+ <div
+ class="checkbox-group"
+ *ngIf="notebook.image !== 'docker.datalab-zeppelin'; else not_support"
+ [hidden]="notebook.status !== 'running' || notebook.image === 'docker.datalab-superset'
+ || notebook.image === 'docker.datalab-jupyterlab'"
+ >
+ <label>
+ <input #configurationNode type="checkbox" (change)="selectConfiguration()"/> Cluster configurations
+ </label>
+ <div class="checkbox-group">
+ <form [formGroup]="configurationForm" novalidate>
+ <div class="config-details" *ngIf="configuration?.nativeElement['checked'] || false">
+ <textarea
+ formControlName="configuration_parameters"
+ id="config"
+ placeholder="Cluster configuration template, JSON"
+ data-gramm_editor="false"
+ ></textarea>
+ <span
+ class="danger_color"
+ *ngIf="!configurationForm.controls.configuration_parameters.valid
+ && configurationForm.controls['configuration_parameters'].dirty"
+ >
+ Configuration parameters is not in a valid format
+ </span>
</div>
- </form>
- </div>
+ </form>
</div>
- <ng-template #not_support>
- <small [hidden]="notebook.status !== 'running'">Spark default configuration for Apache Zeppelin can not be
- changed from DataLab UI. Currently it can be done directly through Apache Zeppelin interpreter menu.
- For more details please refer for Apache Zeppelin <a
- href="https://zeppelin.apache.org/docs/0.9.0/usage/interpreter/overview.html" target="_blank">official
- documentation</a>.
- </small>
- </ng-template>
- <div [scrollTo]="configuration?.nativeElement['checked'] || false" class="text-center m-top-20 m-bott-10"
- *ngIf="(configuration?.nativeElement['checked'] || false) && notebook.status === 'running'">
- <button mat-raised-button type="button" (click)="dialogRef.close()" class="butt action">Cancel</button>
- <button mat-raised-button type="submit" [disabled]="!configurationForm.valid"
- class="butt butt-success action" [ngClass]="{'not-allowed': !configurationForm.valid}"
- (click)="editClusterConfiguration(configurationForm.value)">Update</button>
- </div>
+ </div>
+ <ng-template #not_support>
+ <small [hidden]="notebook.status !== 'running'">Spark default configuration for Apache Zeppelin can not be
+ changed from DataLab UI. Currently it can be done directly through Apache Zeppelin interpreter menu.
+ For more details please refer for Apache Zeppelin <a
+ href="https://zeppelin.apache.org/docs/0.9.0/usage/interpreter/overview.html" target="_blank">official
+ documentation</a>.
+ </small>
+ </ng-template>
+ <div [scrollTo]="configuration?.nativeElement['checked'] || false" class="text-center m-top-20 m-bott-10"
+ *ngIf="(configuration?.nativeElement['checked'] || false) && notebook.status === 'running'">
+ <button mat-raised-button type="button" (click)="dialogRef.close()" class="butt action">Cancel</button>
+ <button mat-raised-button type="submit" [disabled]="!configurationForm.valid"
+ class="butt butt-success action" [ngClass]="{'not-allowed': !configurationForm.valid}"
+ (click)="editClusterConfiguration(configurationForm.value)">Update</button>
+ </div>
</div>
</div>
</div>
@@ -276,21 +316,27 @@
<div class="legion-info" *ngIf="data.odahu">
<div class="content-box">
<div class="detail-info" *ngIf="!odahu.error_message">
- <div class="links_block">
- <div *ngFor="let url of odahu.url" class="odahu-links">
- <div class="odahu-link">
- <span class="description">{{url.description }}: </span>
- <a class="ellipsis" matTooltip="{{ url.url}}" matTooltipPosition="above" href="{{ url.url}}"
- target="_blank">{{ url.url}}
- </a>
- </div>
- <div class="grafana" *ngIf="url.description === 'Grafana'">
- <div><span>Gafana user: </span><span class="creds">{{odahu.bucket_name}}</span></div>
- <div><span>Gafana password: </span><span class="creds">{{odahu.shared_bucket_name}}</span></div>
+ <div class="links_block">
+ <div *ngFor="let url of odahu.url" class="odahu-links">
+ <div class="odahu-link">
+ <span class="description">{{url.description }}: </span>
+ <a
+ class="ellipsis"
+ matTooltip="{{ url.url}}"
+ matTooltipPosition="above"
+ href="{{ url.url}}"
+ target="_blank"
+ >
+ {{ url.url}}
+ </a>
+ </div>
+ <div class="grafana" *ngIf="url.description === 'Grafana'">
+ <div><span>Gafana user: </span><span class="creds">{{odahu.bucket_name}}</span></div>
+ <div><span>Gafana password: </span><span class="creds">{{odahu.shared_bucket_name}}</span></div>
+ </div>
</div>
</div>
</div>
- </div>
</div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
index edb7aac..9549179 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
@@ -17,7 +17,7 @@
* under the License.
*/
-@import '_variables.scss';
+@import "_variables.scss";
.scroll-box {
max-height: 65vh;
@@ -26,36 +26,36 @@
}
.links_block {
-
- .odahu-links:not(:last-child){
+ .odahu-links:not(:last-child) {
margin-bottom: 20px;
}
- .grafana{
- white-space: nowrap;
+ .grafana {
padding-left: 30px;
+ white-space: nowrap;
color: $blue-grey-color;
- div{
+ div {
display: flex;
- span{
+ span {
font-size: 13px;
font-weight: 500;
- &.creds{
+ &.creds {
font-weight: 600;
}
}
}
}
- >p, .odahu-link {
- display: flex;
+ > p,
+ .odahu-link {
+ display: flex;
.description {
- white-space: nowrap;
padding-left: 7px;
+ white-space: nowrap;
font-weight: 600;
color: $blue-grey-color;
}
@@ -73,7 +73,6 @@
}
span {
-
&.danger_color {
position: absolute;
bottom: -20px;
@@ -83,9 +82,9 @@
}
.config-details {
- text-align: left;
position: relative;
height: 280px;
+ text-align: left;
textarea {
height: 100%;
@@ -111,35 +110,33 @@
color: $blue-grey-color;
}
-.bucket-link{
+.bucket-link {
padding: 15px;
padding-left: 0;
color: #35afd5;
- .open-bucket{
+ .open-bucket {
cursor: pointer;
font-size: 14px;
}
- &.not-allow{
+ &.not-allow {
cursor: not-allowed;
color: $blue-grey-color !important;
}
}
-.copy-icon-wrapper{
+.copy-icon-wrapper {
width: 20px;
margin-left: 5px;
margin-right: 5px;
}
-.bucket-info-wrapper{
+.bucket-info-wrapper {
width: 100%;
- .bucket-info{
+ .bucket-info {
max-width: 90%;
}
}
-.resources-url{
+.resources-url {
max-width: 70%;
}
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
index ad41322..2ca7cba 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
@@ -20,15 +20,15 @@
import { Component, ViewChild, OnInit, Inject } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
-import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import {DateUtils, CheckUtils, HelpUtils} from '../../../core/util';
+import { DateUtils, CheckUtils, HelpUtils } from '../../../core/util';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { DataengineConfigurationService } from '../../../core/services';
import { CLUSTER_CONFIGURATION } from '../../computational/computational-resource-create-dialog/cluster-configuration-templates';
-import {CopyPathUtils} from '../../../core/util/copyPathUtils';
-import {AuditService} from '../../../core/services/audit.service';
-import {BucketBrowserComponent} from '../../bucket-browser/bucket-browser.component';
+import { CopyPathUtils } from '../../../core/util/copyPathUtils';
+import { AuditService } from '../../../core/services/audit.service';
+import { BucketBrowserComponent } from '../../bucket-browser/bucket-browser.component';
@Component({
selector: 'detail-dialog',
@@ -51,7 +51,6 @@
public configurationForm: FormGroup;
@ViewChild('configurationNode') configuration;
-
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
private dataengineConfigurationService: DataengineConfigurationService,
@@ -80,11 +79,12 @@
this.upTimeInHours = (this.notebook.time) ? DateUtils.diffBetweenDatesInHours(this.notebook.time) : 0;
this.initFormModel();
this.getClusterConfiguration();
- if (this.notebook.edgeNodeStatus === 'terminated' ||
- this.notebook.edgeNodeStatus === 'terminating' ||
- this.notebook.edgeNodeStatus === 'failed') {
- this.isBucketAllowed = false;
- }
+
+ if (this.notebook.edgeNodeStatus === 'terminated' ||
+ this.notebook.edgeNodeStatus === 'terminating' ||
+ this.notebook.edgeNodeStatus === 'failed') {
+ this.isBucketAllowed = false;
+ }
}
}
@@ -98,12 +98,12 @@
.getExploratorySparkConfiguration(this.notebook.project, this.notebook.name)
.subscribe(
(result: any) => this.config = result,
- error => this.toastr.error(error.message || 'Configuration loading failed!', 'Oops!'));
+ error => this.toastr.error(error.message || 'Configuration loading failed!', 'Oops!')
+ );
}
public selectConfiguration() {
if (this.configuration.nativeElement.checked) {
-
this.configurationForm.controls['configuration_parameters']
.setValue(JSON.stringify(this.config.length ? this.config : CLUSTER_CONFIGURATION.SPARK, undefined, 2));
document.querySelector('#config').scrollIntoView({ block: 'start', behavior: 'smooth' });
@@ -115,16 +115,19 @@
public editClusterConfiguration(data): void {
this.dataengineConfigurationService
.editExploratorySparkConfiguration(data.configuration_parameters, this.notebook.project, this.notebook.name)
- .subscribe(() => {
- this.dialogRef.close();
- },
- error => this.toastr.error(error.message || 'Edit onfiguration failed!', 'Oops!'));
+ .subscribe(
+ () => {
+ this.dialogRef.close();
+ },
+ error => this.toastr.error(error.message || 'Edit onfiguration failed!', 'Oops!')
+ );
}
public resetDialog() {
this.initFormModel();
-
- if (this.configuration) this.configuration.nativeElement['checked'] = false;
+ if (this.configuration) {
+ this.configuration.nativeElement['checked'] = false;
+ }
}
private initFormModel(): void {
@@ -147,14 +150,20 @@
bucketName = this.isBucketAllowed ? bucketName : this.data.buckets[0].children[0].name;
// bucketName = 'ofuks-1304-pr2-local-bucket';
this.dialog.open(BucketBrowserComponent, { data:
- {bucket: bucketName, endpoint: endpoint, bucketStatus: this.bucketStatus, buckets: this.data.buckets},
- panelClass: 'modal-fullscreen' })
- .afterClosed().subscribe();
+ {
+ bucket: bucketName,
+ endpoint: endpoint,
+ bucketStatus: this.bucketStatus,
+ buckets: this.data.buckets
+ },
+ panelClass: 'modal-fullscreen' }
+ ).afterClosed().subscribe();
}
public showCopyIcon(element) {
this.isCopyIconVissible[element] = true;
}
+
public hideCopyIcon() {
for (const key in this.isCopyIconVissible) {
this.isCopyIconVissible[key] = false;
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 9954a91..8ef3f8a 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
@@ -24,368 +24,418 @@
</header>
<mat-progress-bar *ngIf="autoComplete === 'UPDATING'" mode="indeterminate"></mat-progress-bar>
<div class="dialog-content">
- <div class="aligner">
- <div class="info" *ngIf="notebook?.status !== 'running'">
- <p class=" message">Cannot install libraries: Exploratory
- <strong>{{ notebook?.name }}</strong> is not running</p>
- </div>
- <div *ngIf="notebook?.status === 'running'" class="top-wrapper">
- <div class="loading-block" *ngIf="!libs_uploaded && uploading && data.status === 'running'">
- <div class="uploading">
- <p>Please wait until DataLab loads list of available groups for your resource...</p>
- <img src="assets/img/gif-spinner.gif" alt="loading">
- </div>
+ <div class="aligner">
+ <div class="info" *ngIf="notebook?.status !== 'running'">
+ <p class=" message">Cannot install libraries: Exploratory
+ <strong>{{ notebook?.name }}</strong> is not running</p>
</div>
- <div *ngIf="notebook?.status === 'running' && !uploading" class="lib-view-wrap">
- <div class="search-box">
- <div class="search-form">
- <div>
- <div class="control-group constol-select">
- <label class="label">Select resource</label>
- <div class="control">
- <dropdown-list #resourceSelect (selectedItem)="onUpdate($event)" (emitClick)="emitClick()"></dropdown-list>
- </div>
- </div>
- <div class="control-group control-select">
- <label class="label">Select group</label>
- <div class="control">
- <dropdown-list #groupSelect (selectedItem)="onUpdate($event)" (emitClick)="emitClick()"></dropdown-list>
- <span class="error-message" *ngIf="!group && libSearch?.value">Group field is required. Please choose appropriate group.</span>
- </div>
- </div>
- </div>
- <div class="m-top-20" *ngIf="group !== 'java'; else javaGroup">
- <div class="control-group constol-select">
- <label class="label">Library name</label>
- <div class="control control-relative">
- <span class="other-message" *ngIf="group === 'others'">
- Other group can include libs from Python 2 and Python 3 groups.
- Some libs cannot be installed due to Python 2 is no longer supported
- </span>
- <input
- type="text" [placeholder]="'Enter library name'"
- [disabled]="!group"
- [matAutocomplete]="auto"
- [formControl]="libSearch"
- #trigger="matAutocompleteTrigger"
- (keydown.enter)="addLibrary(lib)"
- (keyup)="clearLibSelection($event)"
- class="library-input"
- >
- </div>
- <mat-autocomplete #auto="matAutocomplete" class="suggestions scrolling">
- <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index">
- <mat-option>
- <div class="option" (click)="selectLibrary(item);$event.stopPropagation()" [ngClass]="{'not-allow': item.isInSelectedList}">
- <a *ngIf="!item.isInSelectedList">
- <span [innerHTML]="item.name | highlight:lib.name"></span>
- </a>
- <span *ngIf="item.isInSelectedList">{{ item.name }}</span>
- <strong *ngIf="item.isInSelectedList">selected
- <i class="material-icons">done</i>
- </strong>
- <strong *ngIf="item.isInstalled && !item.isInSelectedList">installed
- <i class="material-icons">done</i>
- </strong>
- </div>
- </mat-option>
- </ng-template>
- <mat-option *ngIf="!filteredList?.length && !validity_format && autoComplete === 'ENABLED' && lib.name?.length > 0" disabled>
- <span class="configuring">No matches found</span>
- </mat-option>
- <mat-option *ngIf="validity_format?.length > 0 && autoComplete === 'ENABLED'">
- <span class="configuring" >{{ validity_format }}</span >
- </mat-option>
- <mat-option *ngIf="autoComplete === 'NONE' && lib.name?.length > 1" disabled>
- <span class="configuring" >Autocomplete is currently unavailable for {{groupsListMap[group]}} group</span >
- </mat-option>
- <mat-option *ngIf="autoComplete === 'UPDATING' && lib.name?.length > 1" disabled>
- <span class="configuring" >Library list is being loaded at the moment. Please wait...</span>
- </mat-option>
- </mat-autocomplete>
- </div>
- <div class="control-group control-select">
- <label class="label">Library version</label>
- <div class="control control-relative">
- <input
- type="text"
- class="library-input"
- [placeholder]="'Enter library version (optional)'"
- [(ngModel)]="lib.version"
- [disabled]="!lib.name?.trim() || lib.name?.trim().length < 2"
- (keyup)="validateVersion(lib.version)"
- (keydown.enter)="addLibrary(lib)"
- >
- <span
- class="error-message version-error"
- *ngIf="isVersionInvalid">
- Library version can only contain Latin letters, numbers and special characters -, _, :, /, ~, ., +.
- </span>
- <span class="plus-icon"
- [ngClass]="{'not-allow': lib.name?.trim().length < 2
- || (autoComplete === 'ENABLED' && !isLibSelected && filteredList?.length)
- || this.selectedLib?.isInSelectedList || isVersionInvalid || autoComplete === 'UPDATING'}"
- [matTooltip]="this.selectedLib?.isInSelectedList ? 'Library is in selected list' : 'Please select library from autocomplete'"
- matTooltipPosition="above" [matTooltipDisabled]="(!this.selectedLib?.isInSelectedList && isLibSelected) || lib.name?.length < 2 || !this.selectedLib?.isInSelectedList && autoComplete === 'NONE'"
- >
- <mat-icon
- (click)="addLibrary(lib)"
- [ngClass]="{'not-allowed': lib.name?.trim().length < 2 || (autoComplete === 'ENABLED' && !isLibSelected && filteredList?.length)
- || this.selectedLib?.isInSelectedList || isVersionInvalid || autoComplete === 'UPDATING'}">add</mat-icon>
- </span>
- </div>
- </div>
- </div>
-
- <ng-template #javaGroup>
- <div class="m-top-20">
- <div class="control-group constol-select java-library-search">
- <label class="label">Library</label>
- <div class="control control-relative">
- <input
- type="text" [placeholder]="'Enter library name in <groupId>:<artifactId>:<versionId> format'"
- class="library-input"
- [disabled]="!group"
- [matAutocomplete]="auto"
- [formControl]="libSearch"
- #trigger="matAutocompleteTrigger"
- (keydown.enter)="addLibrary(lib)"
- (keyup)="clearLibSelection($event)"
- >
- <span
- class="plus-icon"
- [ngClass]="{'not-allow': !this.selectedLib || this.selectedLib?.isInSelectedList || !isLibSelected}"
- matTooltip="Library is in selected list" matTooltipPosition="above" [matTooltipDisabled]="!this.selectedLib?.isInSelectedList || !isLibSelected"
- >
- <mat-icon (click)="addLibrary(lib)" (keyup.enter)="addLibrary(lib)" [ngClass]="{'not-allowed': !this.selectedLib || this.selectedLib?.isInSelectedList || !isLibSelected}">add</mat-icon>
- </span>
- </div>
- <mat-autocomplete #auto="matAutocomplete" class="suggestions">
- <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index">
- <mat-option >
- <div class="option" (click)="selectLibrary(item);$event.stopPropagation()" [ngClass]="{'not-allow': item.isInSelectedList}">
- <a *ngIf="!item.isInSelectedList">
- <span [innerHTML]="item.name + ':' + item.version | highlight:item.name">
- <span>{{ item.version }}</span>
- </span>
- </a>
- <span *ngIf="item.isInSelectedList">{{ item.name }}
- <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>
- </span>
- <strong *ngIf="item.isInSelectedList">selected
- <i class="material-icons">done</i>
- </strong>
- <strong *ngIf="item.isInstalled && !item.isInSelectedList">installed
- <i class="material-icons">done</i>
- </strong>
- </div>
- </mat-option>
- </ng-template>
- <mat-option *ngIf="model.isEmpty(filteredList) && !validity_format">
- <span class="configuring">No matches found</span>
- </mat-option>
- <mat-option *ngIf="validity_format?.length > 0">
- <span class="configuring" >{{ validity_format }}</span >
- </mat-option>
- </mat-autocomplete>
- </div>
- </div>
- </ng-template>
-
- <div class="search">
- <div class="list-selected list-container scrolling">
- <mat-chip-list *ngIf="model.selectedLibs.length && libs_uploaded" [disabled]="true">
- <mat-chip *ngFor="let item of model.selectedLibs">
- {{ item.name }}
- <span *ngIf="item.version && item.version !== 'N/A'"> {{ item.version }}</span>
- <strong> ({{ groupsListMap[item.group] }}) </strong>
- <a class="material-icons" (click)="removeSelectedLibrary(item)">clear</a>
- </mat-chip>
- </mat-chip-list>
- </div>
+ <div *ngIf="notebook?.status === 'running'" class="top-wrapper">
+ <div class="loading-block" *ngIf="!libs_uploaded && uploading && data.status === 'running'">
+ <div class="uploading">
+ <p>Please wait until DataLab loads list of available groups for your resource...</p>
+ <img src="assets/img/gif-spinner.gif" alt="loading">
</div>
</div>
- </div>
- </div>
- </div>
-
- <div class="libs-info">
- <mat-list class="scrolling" [ngStyle]="notebook?.status !== 'running' && {'max-height': '60vh', 'height': 'unset'}">
- <mat-list-item class="list-header">
- <div class="lib-name">Name
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span>more_vert</span>
- </i>
- </button></div>
- <div class="lib-group">Group
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span>more_vert</span>
- </i>
- </button>
- </div>
- <div class="lib-destination"><span class="">Destination</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span>more_vert</span>
- </i>
- </button>
- </div>
- <div class="lib-resource-type">Resource type
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span>more_vert</span>
- </i>
- </button>
- </div>
- <div class="lib-status"><span>Status</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span>more_vert</span>
- </i>
- </button>
- </div>
- </mat-list-item>
-
- <ng-container *ngIf="filtered" >
- <mat-list-item class="filter-row">
- <th class="lib-name filter-col">
- <input
- placeholder="Filter by library name"
- [value]="filterModel.name"
- (input)="onFilterNameUpdate($event.target['value'])"
- type="text"
- class="form-control filter-field"
- />
- </th>
- <th class="lib-group filter-col">
- <multi-select-dropdown
- (selectionChange)="onFilterUpdate($event)"
- [items]="this.filterConfiguration.group"
- [type]="'group'"
- [model]="this.filterModel.group"
- >
- </multi-select-dropdown>
- </th>
- <th class="lib-destination filter-col">
- <multi-select-dropdown
- (selectionChange)="onFilterUpdate($event)"
- [items]="this.filterConfiguration.resource"
- [type]="'resource'"
- [model]="this.filterModel.resource"
- >
- </multi-select-dropdown>
- </th>
- <th class="lib-resource-type filter-col">
- <multi-select-dropdown
- (selectionChange)="onFilterUpdate($event)"
- [items]="this.filterConfiguration.resource_type"
- [type]="'resource_type'"
- [model]="this.filterModel.resource_type"
- >
- </multi-select-dropdown>
- </th>
- <th class="lib-status filter-col">
- <multi-select-dropdown
- (selectionChange)="onFilterUpdate($event)"
- [items]="this.filterConfiguration.status"
- [type]="'status'"
- [model]="this.filterModel.status"
- >
- </multi-select-dropdown>
- </th>
- <ng-container matColumnDef="action-filter" stickyEnd>
- <th>
- <div class="filter-actions actions">
- <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
- <i class="material-icons">close</i>
- </button>
-
- <button mat-icon-button class="btn apply" (click)="filterLibs(true)" [disabled]="isFilterChanged">
- <i class="material-icons" [ngClass]="{'not-allowed': filterModel['length'] === 0}">done</i>
- </button>
- </div>
- </th>
- </ng-container>
- </mat-list-item>
- </ng-container>
-
- <div class="scrollingList" id="scrolling" *ngIf="notebookLibs?.length">
-<!-- <div *ngIf="notebook?.status !== 'running' && notebookFailedLibs.length > 0" class="info message">-->
-<!-- <p>Cannot retry to reinstall failed libraries: Exploratory {{ notebook?.name }} is not running</p>-->
-<!-- </div>-->
- <ng-container *ngFor="let lib of filtredNotebookLibs">
- <mat-list-item class="table-item">
- <div class="lib-name lib-name-col ellipsis" >
- <span [matTooltip]="lib.name + ' ' + lib.version" matTooltipPosition="above" class="lib-name-wrapper ellipsis">
- <span class="stong" >{{ lib.name }}</span>
- <span *ngIf="lib.version && lib.version !== 'N/A'">{{ lib.version }}</span>
- </span>
- </div>
- <div class="lib-group-col">{{ groupsListMap[lib.group] }}</div>
- <div class="st-group">
- <ng-template let-item ngFor [ngForOf]="lib.filteredStatus">
- <div class="wrap-col">
- <div class="lib-destination-col">{{ item.resource }}</div>
- <div class="lib-resource-type-col uppercase">{{ item.resourceType }}</div>
- <div class="lib-status-col uppercase" 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.status === 'installation_error'" (click)="reinstallLibrary(item, lib)" matTooltip="Retry installation" matTooltipPosition="above">
- <i class="material-icons">replay</i>
- </span>
- <span class="not-allow" *ngIf="installingInProgress && item.status === 'installation_error'" matTooltip="Please wait until lib installation completes"
- matTooltipPosition="above">
- <i class="material-icons not-allowed">replay</i>
- </span>
- </div>
- <div *ngIf="item.status === 'installation_error' && item.error" class="lib-error" (click)="showErrorMessage(item)" matTooltip="Show error message" matTooltipPosition="above">
- <i class="material-icons terminated">error_outline</i>
- </div>
- <div class="lib-error"
- *ngIf="item.status.toLowerCase() === 'invalid_version' && item.available_versions?.length"
- (click)="openLibInfo(item, 'available');$event.stopPropagation()"
- matTooltip="Show available version" matTooltipPosition="above"
- >
- <i class="material-icons">error_outline</i>
- </div>
- <div matTooltip="Show installed dependency" matTooltipPosition="above" *ngIf="item.add_pkgs?.length">
- <span class="info-icon" (click)="openLibInfo(item, 'added');$event.stopPropagation() ">
- <i class="material-icons">info</i>
- </span>
- </div>
- </div>
-
+ <div *ngIf="notebook?.status === 'running' && !uploading" class="lib-view-wrap">
+ <div class="search-box">
+ <div class="search-form">
+ <div>
+ <div class="control-group constol-select">
+ <label class="label">Select resource</label>
+ <div class="control">
+ <dropdown-list #resourceSelect (selectedItem)="onUpdate($event)" (emitClick)="emitClick()"></dropdown-list>
</div>
</div>
+ <div class="control-group control-select">
+ <label class="label">Select group</label>
+ <div class="control">
+ <dropdown-list #groupSelect (selectedItem)="onUpdate($event)" (emitClick)="emitClick()"></dropdown-list>
+ <span class="error-message" *ngIf="!group && libSearch?.value">Group field is required. Please choose appropriate group.</span>
+ </div>
+ </div>
+ </div>
+ <div class="m-top-20" *ngIf="group !== 'java'; else javaGroup">
+ <div class="control-group constol-select">
+ <label class="label">Library name</label>
+ <div class="control control-relative">
+ <span class="other-message" *ngIf="group === 'others'">
+ Other group can include libs from Python 2 and Python 3 groups.
+ Some libs cannot be installed due to Python 2 is no longer supported
+ </span>
+ <input
+ type="text" [placeholder]="'Enter library name'"
+ [disabled]="!group"
+ [matAutocomplete]="auto"
+ [formControl]="libSearch"
+ #trigger="matAutocompleteTrigger"
+ (keydown.enter)="addLibrary(lib)"
+ (keyup)="clearLibSelection($event)"
+ class="library-input"
+ />
+ </div>
+ <mat-autocomplete #auto="matAutocomplete" class="suggestions scrolling">
+ <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index">
+ <mat-option>
+ <div class="option" (click)="selectLibrary(item);$event.stopPropagation()" [ngClass]="{'not-allow': item.isInSelectedList}">
+ <a *ngIf="!item.isInSelectedList">
+ <span [innerHTML]="item.name | highlight:lib.name"></span>
+ </a>
+ <span *ngIf="item.isInSelectedList">{{ item.name }}</span>
+ <strong *ngIf="item.isInSelectedList">selected
+ <i class="material-icons">done</i>
+ </strong>
+ <strong *ngIf="item.isInstalled && !item.isInSelectedList">installed
+ <i class="material-icons">done</i>
+ </strong>
+ </div>
+ </mat-option>
+ </ng-template>
+ <mat-option *ngIf="!filteredList?.length && !validity_format && autoComplete === 'ENABLED' && lib.name?.length > 0" disabled>
+ <span class="configuring">No matches found</span>
+ </mat-option>
+ <mat-option *ngIf="validity_format?.length > 0 && autoComplete === 'ENABLED'">
+ <span class="configuring" >{{ validity_format }}</span >
+ </mat-option>
+ <mat-option *ngIf="autoComplete === 'NONE' && lib.name?.length > 1" disabled>
+ <span class="configuring" >Autocomplete is currently unavailable for {{groupsListMap[group]}} group</span >
+ </mat-option>
+ <mat-option *ngIf="autoComplete === 'UPDATING' && lib.name?.length > 1" disabled>
+ <span class="configuring" >Library list is being loaded at the moment. Please wait...</span>
+ </mat-option>
+ </mat-autocomplete>
+ </div>
+ <div class="control-group control-select">
+ <label class="label">Library version</label>
+ <div class="control control-relative">
+ <input
+ type="text"
+ class="library-input"
+ [placeholder]="'Enter library version (optional)'"
+ [(ngModel)]="lib.version"
+ [disabled]="!lib.name?.trim() || lib.name?.trim().length < 2"
+ (keyup)="validateVersion(lib.version)"
+ (keydown.enter)="addLibrary(lib)"
+ />
+ <span
+ class="error-message version-error"
+ *ngIf="isVersionInvalid"
+ >
+ Library version can only contain Latin letters, numbers and special characters -, _, :, /, ~, ., +.
+ </span>
+ <span
+ class="plus-icon"
+ [ngClass]="{'not-allow': lib.name?.trim().length < 2
+ || (autoComplete === 'ENABLED' && !isLibSelected && filteredList?.length)
+ || this.selectedLib?.isInSelectedList || isVersionInvalid || autoComplete === 'UPDATING'}"
+ [matTooltip]="this.selectedLib?.isInSelectedList ? 'Library is in selected list' : 'Please select library from autocomplete'"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="(!this.selectedLib?.isInSelectedList && isLibSelected)
+ || lib.name?.length < 2 || !this.selectedLib?.isInSelectedList && autoComplete === 'NONE'"
+ >
+ <mat-icon
+ (click)="addLibrary(lib)"
+ [ngClass]="{'not-allowed': lib.name?.trim().length < 2
+ || (autoComplete === 'ENABLED' && !isLibSelected && filteredList?.length)
+ || this.selectedLib?.isInSelectedList || isVersionInvalid || autoComplete === 'UPDATING'}"
+ >
+ add
+ </mat-icon>
+ </span>
+ </div>
+ </div>
+ </div>
+ <ng-template #javaGroup>
+ <div class="m-top-20">
+ <div class="control-group constol-select java-library-search">
+ <label class="label">Library</label>
+ <div class="control control-relative">
+ <input
+ type="text"
+ [placeholder]="'Enter library name in <groupId>:<artifactId>:<versionId> format'"
+ class="library-input"
+ [disabled]="!group"
+ [matAutocomplete]="auto"
+ [formControl]="libSearch"
+ #trigger="matAutocompleteTrigger"
+ (keydown.enter)="addLibrary(lib)"
+ (keyup)="clearLibSelection($event)"
+ />
+ <span
+ class="plus-icon"
+ [ngClass]="{'not-allow': !this.selectedLib || this.selectedLib?.isInSelectedList || !isLibSelected}"
+ matTooltip="Library is in selected list"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!this.selectedLib?.isInSelectedList || !isLibSelected"
+ >
+ <mat-icon
+ (click)="addLibrary(lib)"
+ (keyup.enter)="addLibrary(lib)"
+ [ngClass]="{'not-allowed': !this.selectedLib || this.selectedLib?.isInSelectedList || !isLibSelected}"
+ >
+ add
+ </mat-icon>
+ </span>
+ </div>
+ <mat-autocomplete #auto="matAutocomplete" class="suggestions">
+ <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index">
+ <mat-option>
+ <div class="option" (click)="selectLibrary(item);$event.stopPropagation()" [ngClass]="{'not-allow': item.isInSelectedList}">
+ <a *ngIf="!item.isInSelectedList">
+ <span [innerHTML]="item.name + ':' + item.version | highlight:item.name">
+ <span>{{ item.version }}</span>
+ </span>
+ </a>
+ <span *ngIf="item.isInSelectedList">{{ item.name }}
+ <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>
+ </span>
+ <strong *ngIf="item.isInSelectedList">selected
+ <i class="material-icons">done</i>
+ </strong>
+ <strong *ngIf="item.isInstalled && !item.isInSelectedList">installed
+ <i class="material-icons">done</i>
+ </strong>
+ </div>
+ </mat-option>
+ </ng-template>
+ <mat-option *ngIf="model.isEmpty(filteredList) && !validity_format">
+ <span class="configuring">No matches found</span>
+ </mat-option>
+ <mat-option *ngIf="validity_format?.length > 0">
+ <span class="configuring" >{{ validity_format }}</span >
+ </mat-option>
+ </mat-autocomplete>
+ </div>
+ </div>
</ng-template>
+
+ <div class="search">
+ <div class="list-selected list-container scrolling">
+ <mat-chip-list *ngIf="model.selectedLibs.length && libs_uploaded" [disabled]="true">
+ <mat-chip *ngFor="let item of model.selectedLibs">
+ {{ item.name }}
+ <span *ngIf="item.version && item.version !== 'N/A'"> {{ item.version }}</span>
+ <strong> ({{ groupsListMap[item.group] }}) </strong>
+ <a class="material-icons" (click)="removeSelectedLibrary(item)">clear</a>
+ </mat-chip>
+ </mat-chip-list>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="libs-info">
+ <mat-list class="scrolling" [ngStyle]="notebook?.status !== 'running' && {'max-height': '60vh', 'height': 'unset'}">
+ <mat-list-item class="list-header">
+ <div class="lib-name">Name
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </div>
+ <div class="lib-group">Group
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </div>
+ <div class="lib-destination"><span class="">Destination</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </div>
+ <div class="lib-resource-type">Resource type
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </div>
+ <div class="lib-status"><span>Status</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
</div>
</mat-list-item>
+
+ <ng-container *ngIf="filtered" >
+ <mat-list-item class="filter-row">
+ <th class="lib-name filter-col">
+ <input
+ placeholder="Filter by library name"
+ [value]="filterModel.name"
+ (input)="onFilterNameUpdate($event.target['value'])"
+ type="text"
+ class="form-control filter-field"
+ />
+ </th>
+ <th class="lib-group filter-col">
+ <multi-select-dropdown
+ (selectionChange)="onFilterUpdate($event)"
+ [items]="this.filterConfiguration.group"
+ [type]="'group'"
+ [model]="this.filterModel.group"
+ ></multi-select-dropdown>
+ </th>
+ <th class="lib-destination filter-col">
+ <multi-select-dropdown
+ (selectionChange)="onFilterUpdate($event)"
+ [items]="this.filterConfiguration.resource"
+ [type]="'resource'"
+ [model]="this.filterModel.resource"
+ ></multi-select-dropdown>
+ </th>
+ <th class="lib-resource-type filter-col">
+ <multi-select-dropdown
+ (selectionChange)="onFilterUpdate($event)"
+ [items]="this.filterConfiguration.resource_type"
+ [type]="'resource_type'"
+ [model]="this.filterModel.resource_type"
+ ></multi-select-dropdown>
+ </th>
+ <th class="lib-status filter-col">
+ <multi-select-dropdown
+ (selectionChange)="onFilterUpdate($event)"
+ [items]="this.filterConfiguration.status"
+ [type]="'status'"
+ [model]="this.filterModel.status"
+ ></multi-select-dropdown>
+ </th>
+ <ng-container matColumnDef="action-filter" stickyEnd>
+ <th>
+ <div class="filter-actions actions">
+ <button
+ mat-icon-button
+ class="btn reset"
+ (click)="resetFilterConfigurations()"
+ [disabled]="!isFilterSelected"
+ >
+ <i class="material-icons">close</i>
+ </button>
+
+ <button
+ mat-icon-button
+ class="btn apply"
+ (click)="filterLibs(true)"
+ [disabled]="isFilterChanged"
+ >
+ <i class="material-icons" [ngClass]="{'not-allowed': filterModel['length'] === 0}">done</i>
+ </button>
+ </div>
+ </th>
+ </ng-container>
+ </mat-list-item>
</ng-container>
- </div>
- <div *ngIf="!notebookLibs?.length" class="scrollingList info message">
- <p>You have no libraries installed</p>
- </div>
- <div *ngIf="!filtredNotebookLibs.length && notebookLibs?.length" class="scrollingList info message">
- <p>No matches found</p>
- </div>
- </mat-list>
- </div>
- <div class="m-top-15 actions" *ngIf="!uploading && notebook?.status === 'running'">
- <button mat-raised-button type="button" class="butt action close-btn" (click)="dialogRef.close()">Close</button>
- <span matTooltip="Please wait until lib installation completes" [matTooltipDisabled]="!installingInProgress" matTooltipPosition="above">
- <button mat-raised-button type="submit"
- class="butt butt-success action install-btn"
- (click)="model.confirmAction()"
- [disabled]="!model.selectedLibs.length || installingInProgress || !destination"
+ <div class="scrollingList" id="scrolling" *ngIf="notebookLibs?.length">
+ <!-- <div *ngIf="notebook?.status !== 'running' && notebookFailedLibs.length > 0" class="info message">-->
+ <!-- <p>Cannot retry to reinstall failed libraries: Exploratory {{ notebook?.name }} is not running</p>-->
+ <!-- </div>-->
+ <ng-container *ngFor="let lib of filtredNotebookLibs">
+ <mat-list-item class="table-item">
+ <div class="lib-name lib-name-col ellipsis" >
+ <span [matTooltip]="lib.name + ' ' + lib.version" matTooltipPosition="above" class="lib-name-wrapper ellipsis">
+ <span class="stong" >{{ lib.name }}</span>
+ <span *ngIf="lib.version && lib.version !== 'N/A'">{{ lib.version }}</span>
+ </span>
+ </div>
+ <div class="lib-group-col">{{ groupsListMap[lib.group] }}</div>
+ <div class="st-group">
+ <ng-template let-item ngFor [ngForOf]="lib.filteredStatus">
+ <div class="wrap-col">
+ <div class="lib-destination-col">{{ item.resource }}</div>
+ <div class="lib-resource-type-col uppercase">{{ item.resourceType }}</div>
+ <div class="lib-status-col uppercase" 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.status === 'installation_error'"
+ (click)="reinstallLibrary(item, lib)"
+ matTooltip="Retry installation"
+ matTooltipPosition="above"
+ >
+ <i class="material-icons">replay</i>
+ </span>
+ <span
+ class="not-allow"
+ *ngIf="installingInProgress && item.status === 'installation_error'"
+ matTooltip="Please wait until lib installation completes"
+ matTooltipPosition="above"
+ >
+ <i class="material-icons not-allowed">replay</i>
+ </span>
+ </div>
+ <div
+ *ngIf="item.status === 'installation_error' && item.error"
+ class="lib-error"
+ (click)="showErrorMessage(item)"
+ matTooltip="Show error message"
+ matTooltipPosition="above"
+ >
+ <i class="material-icons terminated">error_outline</i>
+ </div>
+ <div
+ class="lib-error"
+ *ngIf="item.status.toLowerCase() === 'invalid_version' && item.available_versions?.length"
+ (click)="openLibInfo(item, 'available');$event.stopPropagation()"
+ matTooltip="Show available version"
+ matTooltipPosition="above"
+ >
+ <i class="material-icons">error_outline</i>
+ </div>
+ <div matTooltip="Show installed dependency" matTooltipPosition="above" *ngIf="item.add_pkgs?.length">
+ <span class="info-icon" (click)="openLibInfo(item, 'added');$event.stopPropagation() ">
+ <i class="material-icons">info</i>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-template>
+ </div>
+ </mat-list-item>
+ </ng-container>
+ </div>
+ <div *ngIf="!notebookLibs?.length" class="scrollingList info message">
+ <p>You have no libraries installed</p>
+ </div>
+ <div *ngIf="!filtredNotebookLibs.length && notebookLibs?.length" class="scrollingList info message">
+ <p>No matches found</p>
+ </div>
+ </mat-list>
+ </div>
+ <div class="m-top-15 actions" *ngIf="!uploading && notebook?.status === 'running'">
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action close-btn"
+ (click)="dialogRef.close()"
>
- Install
+ Close
</button>
- </span>
+ <span
+ matTooltip="Please wait until lib installation completes"
+ [matTooltipDisabled]="!installingInProgress"
+ matTooltipPosition="above"
+ >
+ <button
+ mat-raised-button type="submit"
+ class="butt butt-success action install-btn"
+ (click)="model.confirmAction()"
+ [disabled]="!model.selectedLibs.length || installingInProgress || !destination"
+ >
+ Install
+ </button>
+ </span>
+ </div>
</div>
- </div>
</div>
</div>
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 1333fd5..94d9c3f 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
@@ -17,26 +17,27 @@
* under the License.
*/
-@import '_variables.scss';
+@import "_variables.scss";
.aligner {
- height: 100%;
display: flex;
flex-direction: column;
+ height: 100%;
- >div {
+ > div {
&.actions {
+ position: absolute;
+ bottom: 30px;
+ left: 0;
+ right: 0;
display: flex;
flex: initial;
justify-content: center;
flex-direction: initial;
margin-bottom: 10px;
- bottom: 30px;
- left: 0;
- right: 0;
- position: absolute;
}
- strong{
+
+ strong {
font-weight: 600;
}
}
@@ -46,20 +47,20 @@
height: 30%;
}
-.top-wrapper{
+.top-wrapper {
height: 285px;
}
-.list-item{
+.list-item {
display: flex;
width: 100%;
padding-left: 20px;
}
.object {
- width: 70%;
display: flex;
align-items: center;
+ width: 70%;
padding-right: 10px;
}
@@ -67,7 +68,7 @@
width: 30%;
}
-ul.resources{
+ul.resources {
padding-left: 10px;
}
@@ -80,7 +81,7 @@
flex-direction: column;
width: 100%;
- &>div {
+ & > div {
display: flex;
flex-direction: row;
}
@@ -89,22 +90,22 @@
width: 50%;
padding-bottom: 0;
- &.java-library-search{
+ &.java-library-search {
width: 100%;
- .label{
+ .label {
width: 10%;
}
- .control{
+ .control {
width: 85%;
}
}
- .control{
+ .control {
width: 70%;
- input{
+ input {
font-size: 15px;
padding-left: 15px;
}
@@ -124,8 +125,8 @@
flex-grow: 1;
padding-bottom: 0;
flex-direction: column;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
margin-top: 40px;
+ 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);
.mat-form-field-flex {
padding-left: 15px;
@@ -135,11 +136,10 @@
width: 100%;
overflow-y: auto;
-
&.mat-form-field {
width: 100%;
- .mat-form-field-infix{
+ .mat-form-field-infix {
display: flex;
}
}
@@ -152,17 +152,16 @@
}
}
-
.suggestions {
text-decoration: none;
list-style: none;
mat-option {
- font-size: 13px;
- font-weight: 300;
- font-family: 'Open Sans', sans-serif;
position: relative;
padding-top: 4px;
+ font-size: 13px;
+ font-weight: 300;
+ font-family: "Open Sans", sans-serif;
a {
display: block;
@@ -189,7 +188,7 @@
position: absolute;
top: 9px;
right: -21px;
- color: #35afd5
+ color: #35afd5;
}
}
}
@@ -209,7 +208,7 @@
mat-chip.mat-chip:not(.mat-basic-chip) {
margin: 2px !important;
- background-color: rgba(47, 174, 215, .2) !important;
+ background-color: rgba(47, 174, 215, 0.2) !important;
color: #687e96;
}
@@ -221,29 +220,28 @@
.libs-info {
.mat-list {
- width: 100%;
- overflow-y: auto;
position: relative;
+ width: 100%;
height: 350px;
padding-top: 0;
margin-top: 8px;
-
- .list-header{
- line-height: 40px;
+ overflow-y: auto;
+
+ .list-header {
position: sticky;
top: 0;
z-index: 99;
+ line-height: 40px;
background-color: #fff;
}
-
- .filter-row{
+
+ .filter-row {
position: sticky;
top: 56px;
z-index: 99;
background-color: #fff;
}
-
-
+
.scrollingList {
.info {
p {
@@ -260,11 +258,11 @@
padding-right: 10px;
padding-left: 20px;
- &-col{
+ &-col {
display: flex;
}
- .lib-name-wrapper{
+ .lib-name-wrapper {
overflow: hidden;
display: block;
}
@@ -315,8 +313,8 @@
.lib-resource-type-col {
width: 33.3%;
- color: #36afd5;
padding-left: 15px;
+ color: #36afd5;
}
.lib-status-col {
@@ -331,8 +329,8 @@
div {
display: inline-block;
- cursor: pointer;
width: 25px;
+ cursor: pointer;
pointer-events: auto;
span {
@@ -349,11 +347,11 @@
}
.mat-dialog-container.mat-dialog-container .install-libraries#dialog-box {
- .mat-header-cell{
- padding: 0;
- border: none;
+ .mat-header-cell {
position: absolute;
right: 10px;
+ padding: 0;
+ border: none;
}
.filter-actions {
@@ -361,10 +359,10 @@
margin-left: 6px;
.btn {
- padding: 6px;
height: auto;
width: auto;
min-width: 0;
+ padding: 6px;
.mat-button-wrapper {
display: flex;
@@ -390,24 +388,25 @@
}
}
-.error-message{
+.error-message {
position: absolute;
left: 20%;
top: 40px;
font-size: 11px;
color: red;
- &.version-error{
+
+ &.version-error {
right: 0;
left: unset;
}
}
-.info-icon{
+.info-icon {
color: lightgray;
cursor: pointer;
}
-.lib-info{
+.lib-info {
width: 100%;
.delete-item {
@@ -417,21 +416,21 @@
width: 100%;
padding: 5px 10px;
- .butt.action{
+ .butt.action {
line-height: 26px;
}
}
}
-.btn{
+.btn {
line-height: 26px;
- &.install-btn{
+ &.install-btn {
margin-left: 0;
}
}
-.control-relative{
+.control-relative {
position: relative;
.plus-icon {
@@ -447,12 +446,12 @@
}
}
- .other-message{
+ .other-message {
position: absolute;
- font-size: 12px;
- color: $link-color;
top: 40px;
left: 12px;
+ font-size: 12px;
+ color: $link-color;
}
}
@@ -460,7 +459,7 @@
.libs-info {
.mat-list {
height: 250px;
- .dropdown-multiselect .list-menu{
+ .dropdown-multiselect .list-menu {
max-height: 143px;
}
}
@@ -471,7 +470,7 @@
.libs-info {
.mat-list {
height: 200px;
- .dropdown-multiselect .list-menu{
+ .dropdown-multiselect .list-menu {
max-height: 94px;
}
}
@@ -479,8 +478,7 @@
}
@media screen and (max-height: 640px) {
-
- .aligner>div.actions {
+ .aligner > div.actions {
margin-bottom: 0;
}
@@ -491,7 +489,7 @@
.libs-info {
.mat-list {
height: 160px;
- .dropdown-multiselect .list-menu{
+ .dropdown-multiselect .list-menu {
max-height: 54px;
}
}
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 f434e29..8a867e9 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
@@ -26,10 +26,10 @@
import { InstallLibrariesModel } from './install-libraries.model';
import { LibrariesInstallationService } from '../../../core/services';
-import {SortUtils, HTTP_STATUS_CODES, PATTERNS} from '../../../core/util';
-import {FilterLibsModel} from './filter-libs.model';
-import {Subject, timer} from 'rxjs';
-import {CompareUtils} from '../../../core/util/compareUtils';
+import { SortUtils, HTTP_STATUS_CODES, PATTERNS } from '../../../core/util';
+import { FilterLibsModel } from './filter-libs.model';
+import { Subject, timer } from 'rxjs';
+import { CompareUtils } from '../../../core/util/compareUtils';
interface Library {
name: string;
@@ -170,12 +170,15 @@
public filterList(): void {
this.validity_format = '';
- (this.lib.name && this.lib.name.length >= 2 && this.group ) ? this.getFilteredList() : this.filteredList = null;
+ (this.lib.name && this.lib.name.length >= 2 && this.group )
+ ? this.getFilteredList()
+ : this.filteredList = null;
}
public filterGroups(groupsList): Array<string> {
const CURRENT_TEMPLATE = this.notebook.template_name.toLowerCase();
- if (CURRENT_TEMPLATE.indexOf('jupyter with tensorflow') !== -1 || CURRENT_TEMPLATE.indexOf('deep learning') !== -1) {
+ if (CURRENT_TEMPLATE.indexOf('jupyter with tensorflow') !== -1
+ || CURRENT_TEMPLATE.indexOf('deep learning') !== -1) {
const filtered = groupsList.filter(group => group !== 'r_pkg');
return SortUtils.libGroupsSort(filtered);
}
@@ -311,14 +314,14 @@
public isInstallingInProgress(): void {
this.installingInProgress = this.notebookLibs.some(lib => lib.filteredStatus.some(status => status.status === 'installing'));
- if (this.installingInProgress) {
- timer(this.INSTALLATION_IN_PROGRESS_CHECK)
- .pipe(
- take(1),
- takeUntil(this.unsubscribe$)
- )
- .subscribe(v => this.getInstalledLibrariesList());
- }
+ if (this.installingInProgress) {
+ timer(this.INSTALLATION_IN_PROGRESS_CHECK)
+ .pipe(
+ take(1),
+ takeUntil(this.unsubscribe$)
+ )
+ .subscribe(v => this.getInstalledLibrariesList());
+ }
}
public reinstallLibrary(item, lib): void {
@@ -376,7 +379,6 @@
private libsUploadingStatus(groupsList): void {
if (groupsList.length) {
-
this.groupsList = this.filterGroups(groupsList);
this.libs_uploaded = true;
this.uploading = false;
@@ -497,15 +499,23 @@
Object.setPrototypeOf(this.cashedFilterForm, Object.getPrototypeOf(this.filterModel));
}
this.filtredNotebookLibs = this.notebookLibs.filter((lib) => {
- const isName = this.cashedFilterForm.name ?
- lib.name.toLowerCase().indexOf(this.cashedFilterForm.name.toLowerCase().trim()) !== -1
- || lib.version.indexOf(this.cashedFilterForm.name.toLowerCase().trim()) !== -1 : true;
- const isGroup = this.cashedFilterForm.group.length ? this.cashedFilterForm.group.includes(this.groupsListMap[lib.group]) : true;
+ const isName = this.cashedFilterForm.name
+ ? lib.name.toLowerCase().indexOf(this.cashedFilterForm.name.toLowerCase().trim()) !== -1
+ || lib.version.indexOf(this.cashedFilterForm.name.toLowerCase().trim()) !== -1
+ : true;
+ const isGroup = this.cashedFilterForm.group.length
+ ? this.cashedFilterForm.group.includes(this.groupsListMap[lib.group])
+ : true;
lib.filteredStatus = lib.status.filter(status => {
- const isResource = this.cashedFilterForm.resource.length ? this.cashedFilterForm.resource.includes(status.resource) : true;
- const isResourceType = this.cashedFilterForm.resource_type.length ?
- this.cashedFilterForm.resource_type.includes(status.resourceType) : true;
- const isStatus = this.cashedFilterForm.status.length ? this.cashedFilterForm.status.includes(status.status) : true;
+ const isResource = this.cashedFilterForm.resource.length
+ ? this.cashedFilterForm.resource.includes(status.resource)
+ : true;
+ const isResourceType = this.cashedFilterForm.resource_type.length
+ ? this.cashedFilterForm.resource_type.includes(status.resourceType)
+ : true;
+ const isStatus = this.cashedFilterForm.status.length
+ ? this.cashedFilterForm.status.includes(status.status)
+ : true;
return isResource && isResourceType && isStatus;
});
this.checkFilters();
@@ -521,7 +531,7 @@
public openLibInfo(lib, type) {
this.dialog.open(
- LibInfoDialogComponent, { data: {lib, type}, width: '550px', panelClass: 'error-modalbox' });
+ LibInfoDialogComponent, { data: { lib, type }, width: '550px', panelClass: 'error-modalbox' });
}
public emitClick() {
@@ -566,9 +576,7 @@
constructor(
public dialogRef: MatDialogRef<ErrorLibMessageDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
- ) {
-
- }
+ ) { }
}
@Component({
@@ -598,7 +606,5 @@
constructor(
public dialogRef: MatDialogRef<ErrorLibMessageDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
- ) {
-
- }
+ ) { }
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.model.ts
index b201904..d902c74 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.model.ts
@@ -62,12 +62,11 @@
group: group,
start_with: query
};
- if (this.computational_name)
+ if (this.computational_name) {
lib_query.computational_name = this.computational_name;
+ }
- return this.librariesInstallationService.getAvailableLibrariesList(
- lib_query
- );
+ return this.librariesInstallationService.getAvailableLibrariesList(lib_query);
}
public getDependencies(query: string): Observable<{}> {
@@ -86,9 +85,13 @@
exploratory_name: this.notebook.name,
libs: retry ? retry : this.selectedLibs
};
- if (this.computational_name)
+ if (this.computational_name) {
lib_list.computational_name = this.computational_name;
- if (item) lib_list.computational_name = item;
+ }
+
+ if (item) {
+ lib_list.computational_name = item;
+ }
return this.librariesInstallationService.installLibraries(lib_list);
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.scss
index 2789a66..17f5f86 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.scss
@@ -46,9 +46,9 @@
.mat-list-item-content {
height: auto !important;
min-height: 54px !important;
- border-bottom: 1px solid #edf1f5;
padding-right: 10px;
padding-left: 0;
+ border-bottom: 1px solid #edf1f5;
}
}
@@ -66,9 +66,9 @@
}
.list-selected {
- padding: 10px;
- font-family: 'Open Sans', sans-serif;
height: 130px;
+ padding: 10px;
+ font-family: "Open Sans", sans-serif;
overflow-y: auto;
h4 {
@@ -86,17 +86,17 @@
}
.loading-block {
- height: 40%;
display: flex;
justify-content: center;
+ height: 40%;
.uploading {
- padding-top: 200px;
+ display: flex;
flex-direction: column;
align-items: center;
align-self: center;
+ padding-top: 200px;
list-style: none;
- display: flex;
p {
font-size: 16px;
@@ -104,50 +104,51 @@
}
}
- .list-header{
+ .list-header {
line-height: 40px;
}
}
.libs-info {
- padding: 0 25px;
display: flex;
flex: 1 1 auto;
min-height: 0;
+ padding: 0 25px;
.filter-row {
- .filter-col{
+
+ .filter-col {
padding-left: 0;
- &.lib-name{
+
+ &.lib-name {
padding-left: 5px;
- .filter-field{
+
+ .filter-field {
padding-left: 15px;
}
}
- .status{
+ .status {
text-transform: none;
}
}
}
.mat-list {
-
- .list-header{
- line-height: 40px;
+ .list-header {
position: sticky;
top: 0;
z-index: 99;
+ line-height: 40px;
background-color: #fff;
}
- .filter-row{
+ .filter-row {
position: sticky;
top: 56px;
z-index: 99;
background-color: #fff;
}
-
.scrollingList {
.info {
p {
@@ -163,13 +164,13 @@
padding-right: 10px;
padding-left: 20px;
- &-col{
+ &-col {
display: flex;
}
- .lib-name-wrapper{
- overflow: hidden;
+ .lib-name-wrapper {
display: block;
+ overflow: hidden;
text-overflow: ellipsis;
}
@@ -235,8 +236,8 @@
div {
display: inline-block;
- cursor: pointer;
width: 25px;
+ cursor: pointer;
pointer-events: auto;
span {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.html
index bb59fbc..02f517d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.html
@@ -62,9 +62,22 @@
</div>
<div class="text-center m-top-30 m-bott-10" *ngIf="editableForm && gitCredentials?.length">
- <button mat-raised-button type="button" class="butt action" (click)="cancelAllModifyings()">Cancel</button>
- <button mat-raised-button type="button" class="butt butt-success action"
- (click)="editAccounts_btnClick()">Apply changes</button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="cancelAllModifyings()"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-success action"
+ (click)="editAccounts_btnClick()"
+ >
+ Apply changes
+ </button>
</div>
</mat-tab>
<mat-tab label="MANAGE ACCOUNT">
@@ -77,13 +90,19 @@
<input type="text" formControlName="hostname"
placeholder="Enter host name ( without http:// or https:// )">
</div>
- <span class="danger_color"
+ <span
+ class="danger_color"
*ngIf="!updateAccountCredentialsForm.controls['hostname'].valid
- && updateAccountCredentialsForm.controls['hostname'].touched && !updateAccountCredentialsForm.controls['hostname'].hasError('duplicate')">
+ && updateAccountCredentialsForm.controls['hostname'].touched
+ && !updateAccountCredentialsForm.controls['hostname'].hasError('duplicate')"
+ >
Hostname field is required. Please provide a qualified domain name (e.g. gitlab.com or github.com).
</span>
- <span class="danger_color"
- *ngIf="updateAccountCredentialsForm.controls['hostname'].hasError('duplicate') && updateAccountCredentialsForm.controls['hostname'].dirty">
+ <span
+ class="danger_color"
+ *ngIf="updateAccountCredentialsForm.controls['hostname'].hasError('duplicate')
+ && updateAccountCredentialsForm.controls['hostname'].dirty"
+ >
The Host name is already in use.
</span>
</div>
@@ -102,8 +121,11 @@
<div class="control">
<input type="email" formControlName="email" placeholder="Enter email">
</div>
- <span class="danger_color"
- *ngIf="!updateAccountCredentialsForm.controls['email'].valid && updateAccountCredentialsForm.controls['email'].touched">
+ <span
+ class="danger_color"
+ *ngIf="!updateAccountCredentialsForm.controls['email'].valid
+ && updateAccountCredentialsForm.controls['email'].touched"
+ >
Email field is required. Please provide a valid email.
</span>
</div>
@@ -114,8 +136,11 @@
<div class="control">
<input type="text" formControlName="login" placeholder="Enter login">
</div>
- <span class="danger_color"
- *ngIf="!updateAccountCredentialsForm.controls['login'].valid && updateAccountCredentialsForm.controls['login'].touched">
+ <span
+ class="danger_color"
+ *ngIf="!updateAccountCredentialsForm.controls['login'].valid
+ && updateAccountCredentialsForm.controls['login'].touched"
+ >
Login field is required. Please provide a valid login.
</span>
</div>
@@ -125,7 +150,9 @@
<input type="password" formControlName="password" placeholder="Enter Password">
</div>
<span class="danger_color"
- *ngIf="!updateAccountCredentialsForm.controls['password'].valid && updateAccountCredentialsForm.controls['password'].touched">
+ *ngIf="!updateAccountCredentialsForm.controls['password'].valid
+ && updateAccountCredentialsForm.controls['password'].touched"
+ >
Field is required. Password must be at least 6 characters.
</span>
</div>
@@ -134,17 +161,36 @@
<div class="control">
<input type="password" formControlName="confirmPassword" placeholder="Enter Password">
</div>
- <span class="danger_color" *ngIf="updateAccountCredentialsForm.value.password !== updateAccountCredentialsForm.value.confirmPassword && updateAccountCredentialsForm.controls['confirmPassword'].touched && !!updateAccountCredentialsForm.value.password">
+ <span
+ class="danger_color"
+ *ngIf="updateAccountCredentialsForm.value.password !== updateAccountCredentialsForm.value.confirmPassword
+ && updateAccountCredentialsForm.controls['confirmPassword'].touched
+ && !!updateAccountCredentialsForm.value.password"
+ >
Passwords don't match.
</span>
</div>
</div>
</div>
<div class="text-center submit m-bott-10">
- <button mat-raised-button type="button" class="butt action" (click)="resetForm()">Clear</button>
- <button mat-raised-button type="button" [disabled]="!updateAccountCredentialsForm.valid || updateAccountCredentialsForm.value.password !== updateAccountCredentialsForm.value.confirmPassword"
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="resetForm()"
+ >
+ Clear
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ [disabled]="!updateAccountCredentialsForm.valid
+ || updateAccountCredentialsForm.value.password !== updateAccountCredentialsForm.value.confirmPassword"
(click)="assignChanges(updateAccountCredentialsForm.value)"
- class="butt butt-success action">Assign</button>
+ class="butt butt-success action"
+ >
+ Assign
+ </button>
</div>
</form>
</mat-tab>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.scss
index 2362d15..50a9da3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.scss
@@ -32,9 +32,9 @@
}
.scrollingList {
- overflow-x: hidden;
- padding: 5px 0;
height: 250px;
+ padding: 5px 0;
+ overflow-x: hidden;
&.info {
display: flex;
@@ -51,8 +51,8 @@
.user-field,
.login-field {
width: 25%;
- overflow: hidden;
padding: 5px;
+ overflow: hidden;
}
.hostname-field {
@@ -63,8 +63,8 @@
.actions {
position: relative;
- overflow: visible;
width: 50px;
+ overflow: visible;
span {
position: absolute;
@@ -86,14 +86,14 @@
display: flex;
.control-group {
- width: 100%;
- font-family: 'Open Sans', sans-serif;
- padding: 10px 0 25px;
position: relative;
+ width: 100%;
+ padding: 10px 0 25px;
+ font-family: "Open Sans", sans-serif;
- input[type='text'],
- input[type='password'],
- input[type='email'] {
+ input[type="text"],
+ input[type="password"],
+ input[type="email"] {
font-size: 14px;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts
index 6bbc5a0..be43d80 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts
@@ -32,27 +32,27 @@
import { AmiCreateDialogModule } from '../exploratory/ami-create-dialog';
import { SchedulerModule } from '../scheduler';
import { UnderscorelessPipeModule } from '../../core/pipes/underscoreless-pipe';
-import {LocalCurrencyModule} from '../../core/pipes/local-currency-pipe';
+import { LocalCurrencyModule } from '../../core/pipes/local-currency-pipe';
@NgModule({
- imports: [
- CommonModule,
- RouterModule,
- ComputationalResourcesModule,
- ConfirmationDialogModule,
- BubbleModule,
- DetailDialogModule,
- ComputationalResourceCreateDialogModule,
- FormControlsModule,
- CostDetailsDialogModule,
- InstallLibrariesModule,
- SchedulerModule,
- AmiCreateDialogModule,
- UnderscorelessPipeModule,
- MaterialModule,
- LocalCurrencyModule
- ],
+ imports: [
+ CommonModule,
+ RouterModule,
+ ComputationalResourcesModule,
+ ConfirmationDialogModule,
+ BubbleModule,
+ DetailDialogModule,
+ ComputationalResourceCreateDialogModule,
+ FormControlsModule,
+ CostDetailsDialogModule,
+ InstallLibrariesModule,
+ SchedulerModule,
+ AmiCreateDialogModule,
+ UnderscorelessPipeModule,
+ MaterialModule,
+ LocalCurrencyModule
+ ],
declarations: [ResourcesGridComponent],
exports: [ResourcesGridComponent]
})
-export class ResourcesGridModule {}
+export class ResourcesGridModule { }
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 bb20c4e..738827b 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
@@ -19,8 +19,13 @@
<section class="table-wrapper resources-wrapper">
<div class="table-wrapper scrolling">
- <table mat-table [dataSource]="filteredEnvironments" multiTemplateDataRows
- class="data-grid resources mat-elevation-z6" [trackBy]="trackBy">
+ <table
+ mat-table
+ [dataSource]="filteredEnvironments"
+ multiTemplateDataRows
+ class="data-grid resources mat-elevation-z6"
+ [trackBy]="trackBy"
+ >
<ng-container matColumnDef="project">
<td mat-cell *matCellDef="let element" [attr.colspan]="8" class="project-name"> {{ element.project }} </td>
@@ -50,6 +55,7 @@
</button>
</th>
</ng-container>
+
<ng-container matColumnDef="statuses">
<th mat-header-cell *matHeaderCellDef class="status-col label-header">
<span class="label"> Status </span>
@@ -61,6 +67,7 @@
</button>
</th>
</ng-container>
+
<ng-container matColumnDef="shapes">
<th mat-header-cell *matHeaderCellDef class="shape-col label-header">
<span class="label"> Shape </span>
@@ -72,6 +79,7 @@
</button>
</th>
</ng-container>
+
<ng-container matColumnDef="tag">
<th mat-header-cell *matHeaderCellDef class="tag-col label-header">
<span class="label"> Tags </span>
@@ -82,6 +90,7 @@
</button>
</th>
</ng-container>
+
<ng-container matColumnDef="resources">
<th mat-header-cell *matHeaderCellDef class="resources-col label-header">
<span class="label"> Compute </span>
@@ -93,6 +102,7 @@
</button>
</th>
</ng-container>
+
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef class="cost-col label-header">
<span class="label"> Cost </span>
@@ -103,6 +113,7 @@
</button>
</th>
</ng-container>
+
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef class="settings label-header">
<span class="label"> Actions </span>
@@ -126,9 +137,10 @@
{{ element.name }}
</span>
<ng-template #odahu>
- <span [matTooltip]=" element.name "
- matTooltipPosition="above"
- (click)="printDetailOdahuModal(element)"
+ <span
+ [matTooltip]=" element.name "
+ matTooltipPosition="above"
+ (click)="printDetailOdahuModal(element)"
>
{{ element.name }}
</span>
@@ -165,57 +177,86 @@
</td>
<td class="resources-col">
- <computational-resources-list [resources]="element.resources" [environment]="element"
- (buildGrid)="buildGrid()">
- </computational-resources-list>
+ <computational-resources-list
+ [resources]="element.resources"
+ [environment]="element"
+ (buildGrid)="buildGrid()"
+ ></computational-resources-list>
</td>
<td *ngIf="healthStatus?.billingEnabled" class="cost-col">
<span class="total_cost">{{ element.billing?.report_lines?.length ? (element.cost | localcurrency) : 'N/A' }}</span>
- <span (click)="element.billing && printCostDetails(element)" class="currency_details"
- [ngClass]="{ 'not-allowed' : !element.billing?.report_lines?.length }">
- <i class="material-icons">help_outline</i>
- </span>
+ <span
+ (click)="element.billing && printCostDetails(element)"
+ class="currency_details"
+ [ngClass]="{ 'not-allowed' : !element.billing?.report_lines?.length }"
+ >
+ <i class="material-icons">help_outline</i>
+ </span>
</td>
<td class="settings">
- <span #settings (click)="actions.toggle($event, settings)" class="actions"
- [ngClass]="{ 'disabled': element.status.toLowerCase() === 'creating'
- || (element.image === 'docker.datalab-superset' && element.status !== 'running' && element.status !== 'stopped')
- || (element.image === 'docker.datalab-jupyterlab' && element.status !== 'running' && element.status !== 'stopped') }">
- </span>
+ <span
+ #settings
+ (click)="actions.toggle($event, settings)"
+ class="actions"
+ [ngClass]="{ 'disabled': element.status.toLowerCase() === 'creating'
+ || (element.image === 'docker.datalab-superset' && element.status !== 'running' && element.status !== 'stopped')
+ || (element.image === 'docker.datalab-jupyterlab' && element.status !== 'running' && element.status !== 'stopped') }"
+ ></span>
<bubble-up #actions class="list-menu scrolling" position="bottom-left" alternative="top-left">
<ul class="list-unstyled" *ngIf="element.shape !== 'odahu cluster'">
- <div class="active-items" *ngIf="element.status.toLowerCase() !== 'failed'
- && element.status !== 'terminating'
- && element.status !== 'terminated'
- && element.status !== 'creating image'">
+ <div
+ class="active-items"
+ *ngIf="element.status.toLowerCase() !== 'failed'
+ && element.status !== 'terminating'
+ && element.status !== 'terminated'
+ && element.status !== 'creating image'"
+ >
<li
- *ngIf="element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'starting' && element.status !== 'creating image' && element.status.toLowerCase() !== 'reconfiguring'"
+ *ngIf="element.status !== 'stopped' && element.status !== 'stopping'
+ && element.status !== 'starting' && element.status !== 'creating image'
+ && element.status.toLowerCase() !== 'reconfiguring'"
matTooltip="Unable to stop notebook because at least one compute is in progress"
- matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
- <div (click)="exploratoryAction(element, 'stop')"
- [ngClass]="{'not-allowed': isResourcesInProgress(element) }">
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!isResourcesInProgress(element)"
+ >
+ <div
+ (click)="exploratoryAction(element, 'stop')"
+ [ngClass]="{'not-allowed': isResourcesInProgress(element) }"
+ >
<i class="material-icons">pause_circle_outline</i>
<span>Stop</span>
</div>
</li>
- <li *ngIf="element.status.toLowerCase() === 'stopped' || element.status.toLowerCase() === 'stopping'"
- matTooltip="{{element.edgeNodeStatus !== 'running' ? 'Unable to run notebook if edge node is not running.' : 'Unable to run notebook until it will be stopped.'}}" matTooltipPosition="above"
- [matTooltipDisabled]="!isResourcesInProgress(element) && element.status.toLowerCase() !== 'stopping' && element.edgeNodeStatus === 'running'"
- [ngClass]="{'not-allow': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping' || element.edgeNodeStatus !== 'running' }"
+ <li
+ *ngIf="element.status.toLowerCase() === 'stopped' || element.status.toLowerCase() === 'stopping'"
+ matTooltip="{{element.edgeNodeStatus !== 'running'
+ ? 'Unable to run notebook if edge node is not running.'
+ : 'Unable to run notebook until it will be stopped.'}}"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!isResourcesInProgress(element) && element.status.toLowerCase() !== 'stopping'
+ && element.edgeNodeStatus === 'running'"
+ [ngClass]="{'not-allow': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping'
+ || element.edgeNodeStatus !== 'running' }"
>
- <div (click)="exploratoryAction(element, 'run')"
- [ngClass]="{'not-allowed': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping' || element.edgeNodeStatus !== 'running' }">
+ <div
+ (click)="exploratoryAction(element, 'run')"
+ [ngClass]="{'not-allowed': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping'
+ || element.edgeNodeStatus !== 'running' }">
<i class="material-icons">play_circle_outline</i>
<span>Run</span>
</div>
</li>
- <li *ngIf="element.status.toLowerCase() === 'running' || element.status.toLowerCase() === 'stopped'"
- matTooltip="Unable to terminate notebook because at least one compute is in progress"
- matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
- <div (click)="exploratoryAction(element, 'terminate')"
- [ngClass]="{'not-allowed': isResourcesInProgress(element) }">
+ <li
+ *ngIf="element.status.toLowerCase() === 'running' || element.status.toLowerCase() === 'stopped'"
+ matTooltip="Unable to terminate notebook because at least one compute is in progress"
+ matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)"
+ >
+ <div
+ (click)="exploratoryAction(element, 'terminate')"
+ [ngClass]="{'not-allowed': isResourcesInProgress(element) }"
+ >
<i class="material-icons">phonelink_off</i>
<span>Terminate</span>
</div>
@@ -223,7 +264,8 @@
<li
*ngIf="element.status === 'running' && element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'"
matTooltip="Only one compute can be associated with analytical tool at a time"
- matTooltipPosition="above" [matTooltipDisabled]="!element.activeCompute"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!element.activeCompute"
[matTooltipClass]="'full-size-tooltip'"
[ngClass]="{'not-allow': element.activeCompute }"
>
@@ -235,8 +277,11 @@
<span>Add compute</span>
</div>
</li>
- <li (click)="exploratoryAction(element, 'schedule')" *ngIf="element.status.toLowerCase() === 'running'
- || element.status.toLowerCase() === 'stopped'">
+ <li
+ (click)="exploratoryAction(element, 'schedule')"
+ *ngIf="element.status.toLowerCase() === 'running'
+ || element.status.toLowerCase() === 'stopped'"
+ >
<div>
<i class="material-icons">schedule</i>
<span>Scheduler</span>
@@ -244,20 +289,26 @@
</li>
</div>
<li
- matTooltip="You can create an image after the library installation is complete"
- matTooltipPosition="above" [matTooltipDisabled]="!checkLibStatus(element)"
- [matTooltipClass]="'full-size-tooltip'"
- [ngClass]="{'not-allow': checkLibStatus(element) }"
- *ngIf="element.status === 'running' && element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'">
+ matTooltip="You can create an image after the library installation is complete"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="!checkLibStatus(element)"
+ [matTooltipClass]="'full-size-tooltip'"
+ [ngClass]="{'not-allow': checkLibStatus(element) }"
+ *ngIf="element.status === 'running' && element.image !== 'docker.datalab-superset'
+ && element.image !== 'docker.datalab-jupyterlab'"
+ >
<div
(click)="exploratoryAction(element, 'ami')"
- [ngClass]="{'not-allowed': checkLibStatus(element) }">
+ [ngClass]="{'not-allowed': checkLibStatus(element) }"
+ >
<i class="material-icons">view_module</i>
<span>Create AMI</span>
</div>
</li>
- <li (click)="exploratoryAction(element, 'install')"
- *ngIf="element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'">
+ <li
+ (click)="exploratoryAction(element, 'install')"
+ *ngIf="element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'"
+ >
<div>
<i class="material-icons">developer_board</i>
<span>Manage libraries</span>
@@ -294,9 +345,12 @@
</a>
</div>
</li>
- <li class="project-seting-item"
- [ngClass]="{'disabled': element.status === 'stopped' || element.status.toLowerCase() === 'stopping' || element.status.toLowerCase() === 'starting'}"
- *ngIf="element.status === element.status !== 'terminated' && element.status !== 'terminating'" (click)="odahuAction(element, 'terminate')"
+ <li
+ class="project-seting-item"
+ [ngClass]="{'disabled': element.status === 'stopped' || element.status.toLowerCase() === 'stopping'
+ || element.status.toLowerCase() === 'starting'}"
+ *ngIf="element.status === element.status !== 'terminated' && element.status !== 'terminating'"
+ (click)="odahuAction(element, 'terminate')"
>
<div>
<i class="material-icons">phonelink_off</i>
@@ -316,40 +370,51 @@
<ng-container matColumnDef="name-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="name-col filter-row-item ">
<div class="input-wrapper">
- <input placeholder="Filter by environment name" type="text" class="form-control filter-field"
- [value]="filterForm.name" (input)="onFilterNameUpdate($event.target['value'])"/>
+ <input
+ placeholder="Filter by environment name"
+ type="text"
+ class="form-control filter-field"
+ [value]="filterForm.name"
+ (input)="onFilterNameUpdate($event.target['value'])"
+ />
</div>
</th>
</ng-container>
<ng-container matColumnDef="status-filter">
<th mat-header-cell *matHeaderCellDef class="status-col filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
- [items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'statuses'"
+ [items]="filterConfiguration.statuses"
+ [model]="filterForm.statuses"
+ ></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="shape-filter">
<th mat-header-cell *matHeaderCellDef class="shape-col filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)"
- [type]="'shapes'" [items]="filterConfiguration.shapes"
- [model]="filterForm.shapes"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'shapes'"
+ [items]="filterConfiguration.shapes"
+ [model]="filterForm.shapes"
+ ></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="tag-filter">
- <th mat-header-cell *matHeaderCellDef class="tag-col filter-row-item">
-
-
- </th>
+ <th mat-header-cell *matHeaderCellDef class="tag-col filter-row-item"></th>
</ng-container>
<ng-container matColumnDef="resource-filter">
<th mat-header-cell *matHeaderCellDef class="resources-col filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
- [items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
+ <multi-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="'resources'"
+ [items]="filterConfiguration.resources"
+ [model]="filterForm.resources"
+ ></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="cost-filter">
- <th mat-header-cell *matHeaderCellDef class="cost-col filter-row-item">
-
- </th>
+ <th mat-header-cell *matHeaderCellDef class="cost-col filter-row-item"></th>
</ng-container>
<ng-container matColumnDef="action-filter" stickyEnd>
@@ -359,19 +424,27 @@
<i class="material-icons">close</i>
</button>
- <button mat-icon-button class="btn apply" (click)="applyFilter_btnClick(filterForm)"
- [disabled]="!isFilterChanged">
+ <button
+ mat-icon-button
+ class="btn apply"
+ (click)="applyFilter_btnClick(filterForm)"
+ [disabled]="!isFilterChanged"
+ >
<i class="material-icons">done</i>
</button>
</div>
</th>
</ng-container>
<ng-container matColumnDef="placeholder">
- <td mat-footer-cell *matFooterCellDef
- [colSpan]="!healthStatus?.billingEnabled ? displayedFilterColumns.length -1 : displayedFilterColumns.length"
- class="info">
- <span *ngIf="(!filteredEnvironments) && !filtering || (filteredEnvironments.length == 0) && !filtering">
- To start working, please, create new environment</span>
+ <td
+ mat-footer-cell
+ *matFooterCellDef
+ [colSpan]="!healthStatus?.billingEnabled ? displayedFilterColumns.length -1 : displayedFilterColumns.length"
+ class="info"
+ >
+ <span *ngIf="(!filteredEnvironments) && !filtering || (filteredEnvironments.length == 0) && !filtering">
+ To start working, please, create new environment
+ </span>
<span *ngIf="(filteredEnvironments.length == 0) && filtering">No matches found</span>
</td>
</ng-container>
@@ -380,8 +453,12 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
- <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
- class="filter-row"></tr>
+ <tr
+ [hidden]="!collapseFilterRow"
+ mat-header-row
+ *matHeaderRowDef="displayedFilterColumns; sticky: true"
+ class="filter-row"
+ ></tr>
<tr mat-row *matRowDef="let element; columns: ['project']" class="element-row">
<!-- [class.expanded-row]="expandedElement === element"-->
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 5c7e81b..6728ed7 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
@@ -23,16 +23,16 @@
width: 100%;
}
-.resources-wrapper{
+.resources-wrapper {
height: calc(100vh - 105px);
- overflow: hidden;
- margin: -15px;
+ margin: -15px;
padding: 15px;
- .table-wrapper{
- overflow: auto;
+ overflow: hidden;
+ .table-wrapper {
height: calc(100vh - 115px);
- margin: 0 -15px -15px -15px;
+ margin: 0 -15px -15px -15px;
padding: 0 15px 15px 15px;
+ overflow: auto;
}
}
@@ -42,13 +42,13 @@
.header-row {
position: sticky;
- background-clip:padding-box;
z-index: 1;
+ background-clip: padding-box;
th {
padding: 5px;
padding-left: 20px;
- .mat-icon-button{
+ .mat-icon-button {
line-height: 45px;
}
}
@@ -61,7 +61,7 @@
}
}
- .filter-field{
+ .filter-field {
font-size: 13px;
padding-left: 10px;
}
@@ -75,20 +75,19 @@
height: initial;
td {
- padding: 5px;
- padding-left: 20px;
display: flex;
align-items: center;
+ padding: 5px 5px 5px 20px;
&.name-col {
padding-left: 21px;
overflow: hidden;
- span{
+ span {
cursor: pointer;
}
}
- &.shape-col{
+ &.shape-col {
align-items: start;
flex-direction: column;
justify-content: center;
@@ -112,13 +111,12 @@
}
.filter-row {
- background-clip:padding-box;
+ background-clip: padding-box;
th {
padding: 5px;
background-clip: padding-box;
-
&:last-child {
padding-right: 6px;
}
@@ -132,21 +130,20 @@
background-color: inherit;
}
- .project-name{
+ .project-name {
font-weight: 600;
color: #577289;
padding-left: 21px;
}
-
.status-col {
width: 11%;
}
- .shape-col{
+ .shape-col {
width: 13%;
color: #577289;
- .label{
+ .label {
color: $table-header-color;
}
}
@@ -155,14 +152,14 @@
width: 13%;
mat-chip {
+ display: inline-block;
min-height: 20px;
+ max-width: 110px !important;
+ margin: 2px;
padding: 5px 10px;
font-size: 13px;
- max-width: 110px !important;
white-space: nowrap;
- display: inline-block;
line-height: 10px;
- margin: 2px;
}
}
@@ -175,12 +172,12 @@
justify-content: space-between;
}
- .label-header{
- &.cost-col{
+ .label-header {
+ &.cost-col {
z-index: 6 !important;
}
- &.status-col{
+ &.status-col {
z-index: 10 !important;
}
@@ -203,24 +200,26 @@
.actions-col {
padding-right: 24px;
+ z-index: 5 !important;
text-align: right;
background-color: inherit;
- z-index: 5 !important;
- .label{
+
+ .label {
padding-right: 5px;
}
}
+
tr.detail-row {
height: 0;
}
-
+
.element-diagram {
- min-width: 80px;
- border: 2px solid black;
- padding: 8px;
- font-weight: lighter;
- margin: 8px 0;
height: 104px;
+ min-width: 80px;
+ padding: 8px;
+ margin: 8px 0;
+ border: 2px solid black;
+ font-weight: lighter;
}
.element-symbol {
@@ -237,23 +236,19 @@
opacity: 0.5;
}
-
-
.dashboard_table {
width: 100%;
table-layout: fixed;
}
-
-
.dashboard_table tr {
vertical-align: top;
}
.dashboard_table tr th span {
width: 50px;
- text-align: center;
height: 100%;
+ text-align: center;
line-height: 40px;
}
@@ -280,8 +275,8 @@
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
@@ -307,15 +302,15 @@
}
.dashboard_table th {
+ padding-left: 12px;
background: #a1b7d1;
color: #fff;
font-weight: 600;
line-height: 40px;
text-transform: uppercase;
- padding-left: 12px;
font-size: 13px;
}
-
+
&.data-grid .status-col .status {
text-transform: capitalize;
}
@@ -332,10 +327,10 @@
.currency_details {
display: flex;
+ padding-left: 10px;
color: #35afd5;
cursor: pointer;
transition: all 0.45s ease-in-out;
- padding-left: 10px;
}
.currency_details:hover {
@@ -357,39 +352,38 @@
text-align: center;
}
- .content-row{
+ .content-row {
background-clip: padding-box;
}
- .not-allow{
+ .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;
max-height: calc(100vh / 2 - 70px);
+ margin-left: 0;
+ 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;
}
.settings:not(.label-header) {
position: relative;
- text-align: right;
width: 6%;
padding-right: 15px !important;
justify-content: flex-end;
+ text-align: right;
.actions {
- background-image: url(../../../assets/svg/settings_icon.svg);
+ display: inline-block;
width: 16px;
height: 16px;
- display: inline-block;
+ background-image: url(../../../assets/svg/settings_icon.svg);
text-align: center;
cursor: pointer;
}
@@ -401,16 +395,16 @@
}
}
-
.data-grid .list-menu li {
+ margin: 5px -5px;
+ padding-bottom: 5px;
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{
+
+ div {
padding: 8px 15px;
}
}
@@ -422,8 +416,8 @@
}
.data-grid .list-menu li i {
- font-size: 18px;
padding-right: 5px;
+ font-size: 18px;
vertical-align: bottom;
}
@@ -457,18 +451,16 @@
}
}
-
-
.info {
padding: 40px;
text-align: center;
}
-.odahu-icon{
+.odahu-icon {
vertical-align: middle;
margin-left: 10px;
}
-.content-row{
+.content-row {
background-clip: padding-box;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
index f9347a8..997b07b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import {Project} from '../../administration/project/project.component';
+import { Project } from '../../administration/project/project.component';
import {
Component,
EventEmitter,
@@ -28,7 +28,7 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ToastrService } from 'ngx-toastr';
import { MatDialog } from '@angular/material/dialog';
-import {ProjectService, UserResourceService, OdahuDeploymentService} from '../../core/services';
+import { ProjectService, UserResourceService, OdahuDeploymentService } from '../../core/services';
import { ExploratoryModel } from './resources-grid.model';
import { FilterConfigurationModel } from './filter-configuration.model';
import { GeneralEnvironmentStatus } from '../../administration/management/management.model';
@@ -42,13 +42,12 @@
import { ConfirmationDialogComponent } from '../../shared/modal-dialog/confirmation-dialog';
import { SchedulerComponent } from '../scheduler';
import { DICTIONARY } from '../../../dictionary/global.dictionary';
-import {ProgressBarService} from '../../core/services/progress-bar.service';
-import {ComputationModel} from '../computational/computational-resource.model';
-import {NotebookModel} from '../exploratory/notebook.model';
-import {AuditService} from '../../core/services/audit.service';
-import {CompareUtils} from '../../core/util/compareUtils';
-import {timer} from 'rxjs';
-import {OdahuActionDialogComponent} from '../../shared/modal-dialog/odahu-action-dialog';
+import { ProgressBarService } from '../../core/services/progress-bar.service';
+import { ComputationModel } from '../computational/computational-resource.model';
+import { NotebookModel } from '../exploratory/notebook.model';
+import { AuditService } from '../../core/services/audit.service';
+import { CompareUtils } from '../../core/util/compareUtils';
+import { OdahuActionDialogComponent } from '../../shared/modal-dialog/odahu-action-dialog';
export interface SharedEndpoint {
edge_node_ip: string;
@@ -112,7 +111,6 @@
public filterConfiguration: FilterConfigurationModel = new FilterConfigurationModel('', [], [], [], '', '');
public filterForm: FilterConfigurationModel = new FilterConfigurationModel('', [], [], [], '', '');
-
public filteringColumns: Array<any> = [
{ title: 'Environment name', name: 'name', class: 'name-col', filter_class: 'name-filter', filtering: true },
{ title: 'Status', name: 'statuses', class: 'status-col', filter_class: 'status-filter', filtering: true },
@@ -155,15 +153,18 @@
public buildGrid(): void {
this.progressBarService.startProgressBar();
this.userResourceService.getUserProvisionedResources()
- .subscribe((result: any) => {
- this.environments = ExploratoryModel.loadEnvironments(result);
- this.getEnvironments.emit(this.environments);
- this.getBuckets();
- this.getDefaultFilterConfiguration();
- (this.environments.length) ? this.getUserPreferences() : this.filteredEnvironments = [];
- this.healthStatus && !this.healthStatus.billingEnabled && this.modifyGrid();
- this.progressBarService.stopProgressBar();
- }, () => this.progressBarService.stopProgressBar());
+ .subscribe(
+ (result: any) => {
+ this.environments = ExploratoryModel.loadEnvironments(result);
+ this.getEnvironments.emit(this.environments);
+ this.getBuckets();
+ this.getDefaultFilterConfiguration();
+ (this.environments.length) ? this.getUserPreferences() : this.filteredEnvironments = [];
+ this.healthStatus && !this.healthStatus.billingEnabled && this.modifyGrid();
+ this.progressBarService.stopProgressBar();
+ },
+ () => this.progressBarService.stopProgressBar()
+ );
}
public toggleFilterRow(): void {
@@ -193,12 +194,11 @@
public containsNotebook(notebook_name: string, envoirmentNames: Array<string>): boolean {
if (notebook_name && envoirmentNames.length ) {
- return envoirmentNames
- .some(item => CheckUtils.delimitersFiltering(notebook_name) === CheckUtils.delimitersFiltering(item));
- }
+ return envoirmentNames
+ .some(item => CheckUtils.delimitersFiltering(notebook_name) === CheckUtils.delimitersFiltering(item));
+ }
return false;
- }
-
+ }
public isResourcesInProgress(notebook): boolean {
const env = this.getResourceByName(notebook.name, notebook.project);
@@ -227,14 +227,19 @@
public printDetailEnvironmentModal(data): void {
this.dialog.open(DetailDialogComponent, { data:
- {notebook: data, bucketStatus: this.healthStatus.bucketBrowser, buckets: this.bucketsList, type: 'resource'},
+ {
+ notebook: data,
+ bucketStatus: this.healthStatus.bucketBrowser,
+ buckets: this.bucketsList,
+ type: 'resource'
+ },
panelClass: 'modal-lg'
})
.afterClosed().subscribe(() => this.buildGrid());
}
public printDetailOdahuModal(data): void {
- this.dialog.open(DetailDialogComponent, { data: {odahu: data}, panelClass: 'modal-lg' })
+ this.dialog.open(DetailDialogComponent, { data: { odahu: data }, panelClass: 'modal-lg' })
.afterClosed().subscribe(() => this.buildGrid());
}
@@ -246,7 +251,13 @@
public exploratoryAction(data, action: string): void {
const resource = this.getResourceByName(data.name, data.project);
if (action === 'deploy') {
- this.dialog.open(ComputationalResourceCreateDialogComponent, { data: { notebook: resource, full_list: this.environments }, panelClass: 'modal-xxl' })
+ this.dialog.open(ComputationalResourceCreateDialogComponent, { data:
+ {
+ notebook: resource,
+ full_list: this.environments
+ },
+ panelClass: 'modal-xxl'
+ })
.afterClosed().subscribe((res) => {
res && this.buildGrid();
});
@@ -266,7 +277,13 @@
} else if (action === 'terminate') {
const compute = data.resources.filter(cluster => cluster.status === 'running' || cluster.status === 'stopped');
this.dialog.open(ConfirmationDialogComponent, { data:
- { notebook: data, compute, type: ConfirmationDialogType.TerminateExploratory }, panelClass: 'modal-sm' })
+ {
+ notebook: data,
+ compute,
+ type: ConfirmationDialogType.TerminateExploratory
+ },
+ panelClass: 'modal-sm'
+ })
.afterClosed().subscribe((res) => res && this.buildGrid());
} else if (action === 'install') {
this.dialog.open(InstallLibrariesComponent, { data: data, panelClass: 'modal-fullscreen' })
@@ -287,7 +304,11 @@
project.endpoints.forEach((endpoint: ProjectEndpoint) => {
if (endpoint.status === 'ACTIVE') {
const currEndpoint: SharedEndpoint = project.projectEndpoints[endpoint.name];
- const edgeItem: BucketList = {name: `${project.project} (${endpoint.name})`, children: [], cloud: endpoint.cloudProvider};
+ const edgeItem: BucketList = {
+ name: `${project.project} (${endpoint.name})`,
+ children: [],
+ cloud: endpoint.cloudProvider
+ };
let projectBucket: string = currEndpoint.user_own_bicket_name
|| currEndpoint.user_own_bucket_name;
if (currEndpoint.user_container_name) {
@@ -313,10 +334,10 @@
this.bucketsList = SortUtils.flatDeep(bucketsList, 1).filter(v => v.children.length);
}
-
// PRIVATE
private getResourceByName(notebook_name: string, project_name: string) {
- return this.getEnvironmentsListCopy().filter(environments => environments.project === project_name)
+ return this.getEnvironmentsListCopy()
+ .filter(environments => environments.project === project_name)
.map(env => env.exploratory.find(({ name }) => name === notebook_name))
.filter(name => !!name)[0];
}
@@ -359,6 +380,7 @@
if (filteredData.some((v) => v.exploratory.length)) {
this.filtering = true;
}
+
if (config) {
this.activeProject = config.project;
filteredData = filteredData
@@ -443,14 +465,17 @@
private getUserPreferences(): void {
this.userResourceService.getUserPreferences()
- .subscribe((result: FilterConfigurationModel) => {
- if (result) {
- this.isActiveFilter(result);
- this.filterForm = this.loadUserPreferences(result.type ? this.filterActiveInstances() : this.aliveStatuses(result));
- }
- this.applyFilter_btnClick(result || this.filterForm);
- this.checkFilters();
- }, () => this.applyFilter_btnClick(null));
+ .subscribe(
+ (result: FilterConfigurationModel) => {
+ if (result) {
+ this.isActiveFilter(result);
+ this.filterForm = this.loadUserPreferences(result.type ? this.filterActiveInstances() : this.aliveStatuses(result));
+ }
+ this.applyFilter_btnClick(result || this.filterForm);
+ this.checkFilters();
+ },
+ () => this.applyFilter_btnClick(null)
+ );
}
private loadUserPreferences(config): FilterConfigurationModel {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
index 94366f6..43aaf5a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
@@ -26,10 +26,14 @@
[matTooltipClass]="'full-size-tooltip'"
[matTooltipDisabled]="healthStatus?.projectAssigned && resourcesGrid.activeProjectsList?.length !== 0"
>
- <button mat-raised-button class="butt butt-create" (click)="createEnvironment()"
- [disabled]="!healthStatus?.projectAssigned || !resourcesGrid.activeProjectsList?.length">
- <i class="material-icons">add</i>Create new
- </button>
+ <button
+ mat-raised-button
+ class="butt butt-create"
+ (click)="createEnvironment()"
+ [disabled]="!healthStatus?.projectAssigned || !resourcesGrid.activeProjectsList?.length"
+ >
+ <i class="material-icons">add</i>Create new
+ </button>
</span>
<div class="mat-reset">
<div class="control selector-wrapper" *ngIf="projects?.length">
@@ -39,19 +43,22 @@
<mat-select
disableOptionCentering
[(value)]="resourcesGrid.activeProject"
- panelClass="top-select scrolling">
+ panelClass="top-select scrolling"
+ >
<mat-option
*ngIf="projects?.length > 1"
- (click)="setActiveProject('')">Show all
+ (click)="setActiveProject('')"
+ >
+ Show all
</mat-option>
<mat-option
*ngFor="let project of projects"
[value]="project"
- (click)="setActiveProject(project)">
+ (click)="setActiveProject(project)"
+ >
{{ project }}
</mat-option>
- <mat-option *ngIf="!projects?.length" class="multiple-select ml-10" disabled>Projects list is empty
- </mat-option>
+ <mat-option *ngIf="!projects?.length" class="multiple-select ml-10" disabled>Projects list is empty</mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -62,13 +69,18 @@
</div>
<div>
- <span matTooltip="{{!this.bucketStatus?.view ? 'You have not permission to open bucket browser' : 'You have not any bucket'}}"
- matTooltipPosition="above"
- matTooltipDisabled="{{resourcesGrid.bucketsList?.length > 0 && this.bucketStatus?.view}}"
- [matTooltipClass]="'full-size-tooltip'"
+ <span
+ matTooltip="{{!this.bucketStatus?.view ? 'You have not permission to open bucket browser' : 'You have not any bucket'}}"
+ matTooltipPosition="above"
+ matTooltipDisabled="{{resourcesGrid.bucketsList?.length > 0 && this.bucketStatus?.view}}"
+ [matTooltipClass]="'full-size-tooltip'"
>
- <button mat-raised-button class="butt butt-tool" (click)="bucketBrowser(this.bucketStatus?.view)"
- [disabled]="!this.bucketStatus?.view || resourcesGrid.bucketsList?.length === 0">
+ <button
+ mat-raised-button
+ class="butt butt-tool"
+ (click)="bucketBrowser(this.bucketStatus?.view)"
+ [disabled]="!this.bucketStatus?.view || resourcesGrid.bucketsList?.length === 0"
+ >
<i class="material-icons"></i>Bucket browser
</button>
</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
index a5185b0..9f53c46 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
@@ -17,16 +17,15 @@
* under the License.
*/
-import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MatDialog } from '@angular/material/dialog';
import { ResourcesGridComponent } from './resources-grid/resources-grid.component';
import { ExploratoryEnvironmentCreateComponent } from './exploratory/create-environment';
-import {ApplicationSecurityService, HealthStatusService} from '../core/services';
+import { ApplicationSecurityService, HealthStatusService } from '../core/services';
import { ManageUngitComponent } from './manage-ungit/manage-ungit.component';
-import {BucketBrowserComponent} from './bucket-browser/bucket-browser.component';
-
+import { BucketBrowserComponent } from './bucket-browser/bucket-browser.component';
@Component({
selector: 'datalab-resources',
@@ -69,8 +68,6 @@
this.exploratoryEnvironments = this.resourcesGrid.environments;
}
-
-
public toggleFiltering(): void {
if (this.resourcesGrid.activeFiltering) {
this.resourcesGrid.resetFilterConfigurations();
@@ -93,7 +90,8 @@
bucketStatus: this.bucketStatus,
buckets: this.resourcesGrid.bucketsList
},
- panelClass: 'modal-fullscreen' })
+ panelClass: 'modal-fullscreen'
+ })
.afterClosed().subscribe();
}
@@ -108,19 +106,16 @@
}
private checkAutorize() {
- this.applicationSecurityService.isLoggedIn().subscribe( () => {
- this.getEnvironmentHealthStatus();
- }
- );
+ this.applicationSecurityService.isLoggedIn().subscribe(() => {
+ this.getEnvironmentHealthStatus();
+ });
}
-
public getEnvironments(environment) {
this.exploratoryEnvironments = environment;
this.projects = environment.map(env => env.project);
}
-
private getEnvironmentHealthStatus() {
this.healthStatusService.getEnvironmentHealthStatus().subscribe(
(result: any) => {
@@ -128,6 +123,7 @@
this.resourcesGrid.healthStatus = this.healthStatus;
this.bucketStatus = this.healthStatus.bucketBrowser;
},
- error => this.toastr.error(error.message, 'Oops!'));
+ error => this.toastr.error(error.message, 'Oops!')
+ );
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
index cd98dd5..47aea4c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
@@ -27,23 +27,23 @@
import { ExploratoryEnvironmentCreateModule } from './exploratory/create-environment';
import { ManageUngitComponent } from './manage-ungit/manage-ungit.component';
import { ConfirmDeleteAccountDialogComponent } from './manage-ungit/manage-ungit.component';
-import {MatTreeModule} from '@angular/material/tree';
-import {BucketDataService} from './bucket-browser/bucket-data.service';
-import {ConvertFileSizePipeModule} from '../core/pipes/convert-file-size';
-import {BucketBrowserModule} from './bucket-browser/bucket-browser.module';
+import { MatTreeModule } from '@angular/material/tree';
+import { BucketDataService } from './bucket-browser/bucket-data.service';
+import { ConvertFileSizePipeModule } from '../core/pipes/convert-file-size';
+import { BucketBrowserModule } from './bucket-browser/bucket-browser.module';
@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- ResourcesGridModule,
- ExploratoryEnvironmentCreateModule,
- MaterialModule,
- MatTreeModule,
- ConvertFileSizePipeModule,
- BucketBrowserModule
- ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ ResourcesGridModule,
+ ExploratoryEnvironmentCreateModule,
+ MaterialModule,
+ MatTreeModule,
+ ConvertFileSizePipeModule,
+ BucketBrowserModule
+ ],
declarations: [
ResourcesComponent,
ManageUngitComponent,
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.html
index eb81592..8db2137 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.html
@@ -35,55 +35,81 @@
<span *ngIf="toggleSchedule" class="hold-label">Scheduler by time</span>
</mat-slide-toggle>
<div class="idle" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
- <mat-slide-toggle labelPosition="before" [checked]="enableIdleTime" (change)="toggleIdleTimes($event)">
- <span *ngIf="toggleSchedule" class="hold-label">Scheduler by inactivity</span>
- </mat-slide-toggle>
+ <mat-slide-toggle labelPosition="before" [checked]="enableIdleTime" (change)="toggleIdleTimes($event)">
+ <span *ngIf="toggleSchedule" class="hold-label">Scheduler by inactivity</span>
+ </mat-slide-toggle>
</div>
</div>
- <div class="note m-bott-10" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
- NOTE: In case of turning on inactivity time-check, your schedule
- configuration will be decommissioned.
- </div>
+ <div class="note m-bott-10" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
+ NOTE: In case of turning on inactivity time-check, your schedule
+ configuration will be decommissioned.
+ </div>
<div class="control-group idle-control" [ngClass]="{ show: enableIdleTimeView }">
<label class="label">Scheduler by inactivity, min</label>
<div class="control">
- <input type="text" class="form-control" placeholder="Enter time in min" formControlName="inactivityTime"
- (keypress)="CheckUtils.isNumberKey($event)" (keydown.arrowup)="inactivityCounter($event, 'increment')"
- (keydown.arrowdown)="inactivityCounter($event, 'decrement')" />
+ <input
+ type="text"
+ class="form-control"
+ placeholder="Enter time in min"
+ formControlName="inactivityTime"
+ (keypress)="CheckUtils.isNumberKey($event)"
+ (keydown.arrowup)="inactivityCounter($event, 'increment')"
+ (keydown.arrowdown)="inactivityCounter($event, 'decrement')"
+ />
<span class="error" *ngIf="!schedulerForm.controls.inactivityTime.valid">
<span>The value should be an integer greater than or equal to {{ inactivityLimits.min }} and
cannot exceed 1 week ({{ inactivityLimits.max }}) in min.</span>
</span>
</div>
</div>
- <div class="schedule-by-time" *ngIf="!enableIdleTimeView" [ngClass]="{ hide: enableIdleTimeView, resource: destination.type === 'СOMPUTATIONAL',
- des: destination.image === 'docker.datalab-dataengine-service' }">
- <div class="row-wrap" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
- <div class="col-3">
- <mat-form-field>
- <input matInput [matDatepicker]="startDate" placeholder="Choose start date"
- formControlName="startDate">
- <mat-datepicker-toggle
-
- matSuffix [for]="startDate"
- [ngClass]="{'not-allowed' : destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule }"></mat-datepicker-toggle>
- <mat-datepicker #startDate></mat-datepicker>
- </mat-form-field>
- </div>
- <div class="col-3">
+ <div
+ class="schedule-by-time"
+ *ngIf="!enableIdleTimeView"
+ [ngClass]="{ hide: enableIdleTimeView, resource: destination.type === 'СOMPUTATIONAL',
+ des: destination.image === 'docker.datalab-dataengine-service' }"
+ >
+ <div class="row-wrap" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
+ <div class="col-3">
<mat-form-field>
- <input matInput [matDatepicker]="finishDate" placeholder="Choose finish date"
- formControlName="finishDate">
- <mat-datepicker-toggle matSuffix [for]="finishDate" [ngClass]="{'not-allowed' : destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule }"></mat-datepicker-toggle>
+ <input
+ matInput
+ [matDatepicker]="startDate"
+ placeholder="Choose start date"
+ formControlName="startDate"
+ />
+ <mat-datepicker-toggle
+ matSuffix [for]="startDate"
+ [ngClass]="{'not-allowed' : destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule }"
+ ></mat-datepicker-toggle>
+ <mat-datepicker #startDate></mat-datepicker>
+ </mat-form-field>
+ </div>
+ <div class="col-3">
+ <mat-form-field>
+ <input
+ matInput
+ [matDatepicker]="finishDate"
+ placeholder="Choose finish date"
+ formControlName="finishDate"
+ />
+ <mat-datepicker-toggle
+ matSuffix
+ [for]="finishDate"
+ [ngClass]="{'not-allowed' : destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule }"
+ ></mat-datepicker-toggle>
<mat-datepicker #finishDate ></mat-datepicker>
</mat-form-field>
</div>
<div class="col-3" *ngIf="destination.type === 'СOMPUTATIONAL'; else timezone">
<mat-form-field>
- <input matInput [matDatepicker]="terminateDate" placeholder="Choose terminate date"
- formControlName="terminateDate" >
+ <input
+ matInput
+ [matDatepicker]="terminateDate"
+ placeholder="Choose terminate date"
+ formControlName="terminateDate"
+ />
<mat-datepicker-toggle matSuffix [for]="terminateDate"></mat-datepicker-toggle>
<mat-datepicker #terminateDate></mat-datepicker>
</mat-form-field>
@@ -102,90 +128,133 @@
</ng-template>
</div>
- <div class="row-wrap" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
- <div class="control-group col-3 time-range">
- <datalab-time-picker [(pickTime)]="startTime" [(milisecTime)]="startTimeMilliseconds"
- [label]="'Choose start time'"
- [disable]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule">
- {{destination.type}}
- </datalab-time-picker>
- </div>
- <div class="control-group col-3 time-range">
- <datalab-time-picker [(pickTime)]="endTime" [(milisecTime)]="endTimeMilliseconds"
- [label]="'Choose finish time'"
- [disable]="destination.type === 'СOMPUTATIONAL' && inherit ||!enableSchedule">
- </datalab-time-picker>
- </div>
- <div class="control-group col-3 time-range" *ngIf="destination.type === 'СOMPUTATIONAL'">
- <datalab-time-picker [(pickTime)]="terminateTime" [(milisecTime)]="terminateTimeMilliseconds"
- [label]="'Choose terminate time'"
- [disable]="!enableSchedule"></datalab-time-picker>
- </div>
- <div *ngIf="timeReqiered" class="error term m-bott-10 mt-5"><span>At least one of time range fields
- should be selected</span>
+ <div class="row-wrap" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
+ <div class="control-group col-3 time-range">
+ <datalab-time-picker
+ [(pickTime)]="startTime"
+ [(milisecTime)]="startTimeMilliseconds"
+ [label]="'Choose start time'"
+ [disable]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
+ >
+ {{destination.type}}
+ </datalab-time-picker>
+ </div>
+ <div class="control-group col-3 time-range">
+ <datalab-time-picker
+ [(pickTime)]="endTime"
+ [(milisecTime)]="endTimeMilliseconds"
+ [label]="'Choose finish time'"
+ [disable]="destination.type === 'СOMPUTATIONAL' && inherit ||!enableSchedule"
+ ></datalab-time-picker>
+ </div>
+ <div class="control-group col-3 time-range" *ngIf="destination.type === 'СOMPUTATIONAL'">
+ <datalab-time-picker
+ [(pickTime)]="terminateTime"
+ [(milisecTime)]="terminateTimeMilliseconds"
+ [label]="'Choose terminate time'"
+ [disable]="!enableSchedule"
+ ></datalab-time-picker>
+ </div>
+ <div *ngIf="timeReqiered" class="error term m-bott-10 mt-5">
+ <span>At least one of time range fields should be selected</span>
</div>
<div *ngIf="terminateDataReqiered">
<span class="error term m-bott-10 mt-5">Both terminate date and time fields should be selected</span>
</div>
</div>
- <div class="row-wrap"
- *ngIf="destination.type === 'СOMPUTATIONAL' && destination.image !== 'docker.datalab-dataengine-service'">
- <div class="col-3">
- <mat-form-field class="timezone-offset">
- <mat-select placeholder="Select timezone" [(value)]="tzOffset"
- [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule">
- <mat-option *ngFor="let zone of zones | keys" [value]="zone.key"
- matTooltip="{{ zone.value }}"
- matTooltipShowDelay="1000" matTooltipPosition="above"> GMT {{zone.key}} {{
- zone.value }}
- </mat-option>
- </mat-select>
- </mat-form-field>
- </div>
+ <div
+ class="row-wrap"
+ *ngIf="destination.type === 'СOMPUTATIONAL' && destination.image !== 'docker.datalab-dataengine-service'"
+ >
+ <div class="col-3">
+ <mat-form-field class="timezone-offset">
+ <mat-select
+ placeholder="Select timezone"
+ [(value)]="tzOffset"
+ [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
+ >
+ <mat-option
+ *ngFor="let zone of zones | keys"
+ [value]="zone.key"
+ matTooltip="{{ zone.value }}"
+ matTooltipShowDelay="1000"
+ matTooltipPosition="above"
+ >
+ GMT {{zone.key}} {{zone.value }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
</div>
- <div class="control-group"
- *ngIf="destination && destination.image !== 'docker.datalab-dataengine-service'">
- <label class="label repeat" for="options">Repeat on :</label>
- <div class="days-block">
- <label>Start date:</label>
- <mat-button-toggle *ngFor="let day of weekdays; let i = index" value="{{ day }}"
- (change)="onDaySelect($event, day, 'start')"
- [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
- [checked]="selectedStartWeekDays[day.toLowerCase()]">{{ day[0] }}
- </mat-button-toggle>
- </div>
- <div class="days-block">
+ <div
+ class="control-group"
+ *ngIf="destination && destination.image !== 'docker.datalab-dataengine-service'"
+ >
+ <label class="label repeat" for="options">Repeat on :</label>
+ <div class="days-block">
+ <label>Start date:</label>
+ <mat-button-toggle
+ *ngFor="let day of weekdays; let i = index"
+ value="{{ day }}"
+ (change)="onDaySelect($event, day, 'start')"
+ [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
+ [checked]="selectedStartWeekDays[day.toLowerCase()]"
+ >
+ {{ day[0] }}
+ </mat-button-toggle>
+ </div>
+ <div class="days-block">
<label>Stop date:</label>
- <mat-button-toggle *ngFor="let day of weekdays; let i = index" value="{{ day }}"
+ <mat-button-toggle
+ *ngFor="let day of weekdays; let i = index"
+ value="{{ day }}"
(change)="onDaySelect($event, day, 'stop')"
[disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
- [checked]="selectedStopWeekDays[day.toLowerCase()]">{{ day[0] }}
+ [checked]="selectedStopWeekDays[day.toLowerCase()]"
+ >
+ {{ day[0] }}
</mat-button-toggle>
</div>
</div>
- <div class="des-block" *ngIf="destination.image === 'docker.datalab-dataengine-service'">
- <div class="row-wrap">
- <div class="col-3">
- <mat-form-field>
- <input matInput [matDatepicker]="terminateDate" placeholder="Choose terminate date"
- formControlName="terminateDate">
- <mat-datepicker-toggle matSuffix [for]="terminateDate"></mat-datepicker-toggle>
- <mat-datepicker #terminateDate></mat-datepicker>
- </mat-form-field>
- </div>
- <div class="control-group col-3 time-range" *ngIf="destination.type === 'СOMPUTATIONAL'">
- <datalab-time-picker [(pickTime)]="terminateTime" [(milisecTime)]="terminateTimeMilliseconds"
- [label]="'Choose terminate time'"
- [disable]="!enableSchedule"></datalab-time-picker>
- </div>
+ <div class="des-block" *ngIf="destination.image === 'docker.datalab-dataengine-service'">
+ <div class="row-wrap">
+ <div class="col-3">
+ <mat-form-field>
+ <input
+ matInput
+ [matDatepicker]="terminateDate"
+ placeholder="Choose terminate date"
+ formControlName="terminateDate"
+ />
+ <mat-datepicker-toggle matSuffix [for]="terminateDate"></mat-datepicker-toggle>
+ <mat-datepicker #terminateDate></mat-datepicker>
+ </mat-form-field>
+ </div>
+ <div class="control-group col-3 time-range" *ngIf="destination.type === 'СOMPUTATIONAL'">
+ <datalab-time-picker
+ [(pickTime)]="terminateTime"
+ [(milisecTime)]="terminateTimeMilliseconds"
+ [label]="'Choose terminate time'"
+ [disable]="!enableSchedule"
+ ></datalab-time-picker>
+ </div>
<div class="col-3">
<mat-form-field class="timezone-offset">
- <mat-select placeholder="Select timezone" [(value)]="tzOffset"
- [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule">
- <mat-option *ngFor="let zone of zones | keys" [value]="zone.key" matTooltip="{{ zone.value }}"
- matTooltipShowDelay="1000" matTooltipPosition="above"> GMT {{zone.key}} {{ zone.value }}
+ <mat-select
+ placeholder="Select timezone"
+ [(value)]="tzOffset"
+ [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
+ >
+ <mat-option
+ *ngFor="let zone of zones | keys"
+ [value]="zone.key"
+ matTooltip="{{ zone.value }}"
+ matTooltipShowDelay="1000"
+ matTooltipPosition="above"
+ >
+ GMT {{zone.key}} {{ zone.value }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -196,24 +265,33 @@
</div>
</div>
- <div class="options"
- *ngIf="destination && allowInheritView && destination.image !== 'docker.datalab-dataengine-service'">
- <mat-slide-toggle labelPosition="after" [checked]="inherit" (change)="toggleInherit($event)"
- [disabled]="!enableSchedule || (!parentInherit && destination.type === 'СOMPUTATIONAL')">
+ <div
+ class="options"
+ *ngIf="destination && allowInheritView && destination.image !== 'docker.datalab-dataengine-service'"
+ >
+ <mat-slide-toggle
+ labelPosition="after"
+ [checked]="inherit"
+ (change)="toggleInherit($event)"
+ [disabled]="!enableSchedule || (!parentInherit && destination.type === 'СOMPUTATIONAL')"
+ >
<span *ngIf="destination.type === 'EXPLORATORY'; else resourcePropagation" class="hold-label">
- <span>Start all spark clusters associated with current notebook based on notebook start
- schedule</span>
+ <span>Start all spark clusters associated with current notebook based on notebook start schedule</span>
</span>
- <ng-template #resourcePropagation>
- <span class="hold-label">Inherit notebook schedule settings</span>
- </ng-template>
- </mat-slide-toggle>
+ <ng-template #resourcePropagation>
+ <span class="hold-label">Inherit notebook schedule settings</span>
+ </ng-template>
+ </mat-slide-toggle>
</div>
</div>
<div class="options" *ngIf="destination.type === 'EXPLORATORY'">
- <mat-slide-toggle labelPosition="after" [checked]="considerInactivity"
- [disabled]="!enableSchedule && !enableIdleTime" (change)="considerInactivity = !considerInactivity">
+ <mat-slide-toggle
+ labelPosition="after"
+ [checked]="considerInactivity"
+ [disabled]="!enableSchedule && !enableIdleTime"
+ (change)="considerInactivity = !considerInactivity"
+ >
<span class="hold-label">
<span>In case of running jobs on Spark standalone, notebook stop scheduler will not be triggered</span>
</span>
@@ -222,10 +300,23 @@
</form>
<div class="text-center m-top-30">
- <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
- <button mat-raised-button type="button" class="butt butt-success action"
+ <button
+ mat-raised-button
+ type="button"
+ class="butt action"
+ (click)="dialogRef.close()"
+ >
+ Cancel
+ </button>
+ <button
+ mat-raised-button
+ type="button"
+ class="butt butt-success action"
[disabled]="enableIdleTime && !schedulerForm.controls.inactivityTime.valid"
- (click)="scheduleInstance_btnClick()">Save</button>
+ (click)="scheduleInstance_btnClick()"
+ >
+ Save
+ </button>
</div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.scss
index 54a1eed..7b0c54c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.scss
@@ -20,7 +20,7 @@
.scheduler-dialog {
.mat-form-field-appearance-legacy {
.mat-form-field-label {
- font-family: 'Open Sans', sans-serif !important;
+ font-family: "Open Sans", sans-serif !important;
font-size: 13px;
}
}
@@ -49,17 +49,17 @@
.enable-schedule {
display: flex;
- margin-bottom: 10px;
justify-content: space-between;
+ margin-bottom: 10px;
.idle {
display: flex;
width: 50%;
i {
- font-size: 20px;
padding-left: 10px;
align-self: center;
+ font-size: 20px;
user-select: none;
cursor: pointer;
}
@@ -69,17 +69,17 @@
.info-message,
.idle-control {
height: 0;
+ padding-bottom: 0;
opacity: 0;
visibility: hidden;
text-align: left;
transition: height 0.35s linear 0.2s;
- padding-bottom: 0;
&.show {
height: 30px;
+ margin-bottom: 50px;
visibility: visible;
opacity: 1;
- margin-bottom: 50px;
}
}
@@ -207,7 +207,7 @@
box-shadow: none;
margin: 2px;
border: none;
- color: #607D8B;
+ color: #607d8b;
&.mat-button-toggle-checked {
background-color: rgba(77, 184, 218, 0.62);
@@ -219,10 +219,10 @@
}
.mat-button-toggle-label-content {
- line-height: 26px;
- padding: 0px 8px;
width: 26px;
+ padding: 0px 8px;
font-size: 13px;
+ line-height: 26px;
text-align: center;
background: rgba(196, 231, 243, 0.3);
}
@@ -242,10 +242,10 @@
}
.options {
+ margin-bottom: 10px;
color: #718ba6;
font-size: 15px;
font-weight: 600;
- margin-bottom: 10px;
.mat-slide-toggle-content {
padding: 5px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.ts
index 79b5008..e1206e8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.ts
@@ -25,7 +25,6 @@
import * as _moment from 'moment';
import 'moment-timezone';
-
import { SchedulerService } from '../../core/services';
import { SchedulerModel, WeekdaysModel } from './scheduler.model';
import { SchedulerCalculations } from './scheduler.calculations';
@@ -184,13 +183,16 @@
}
public setInactivity(...params) {
- this.model.setInactivityTime(params).subscribe((response: any) => {
- if (response.status === HTTP_STATUS_CODES.OK) {
- this.toastr.success('Schedule data were successfully saved', 'Success!');
- this.dialogRef.close();
- }
- },
- error => this.toastr.error(error.message || 'Scheduler configuration failed!', 'Oops!'));
+ this.model.setInactivityTime(params)
+ .subscribe(
+ (response: any) => {
+ if (response.status === HTTP_STATUS_CODES.OK) {
+ this.toastr.success('Schedule data were successfully saved', 'Success!');
+ this.dialogRef.close();
+ }
+ },
+ error => this.toastr.error(error.message || 'Scheduler configuration failed!', 'Oops!')
+ );
}
public inactivityCounter($event, action: string): void {
@@ -320,12 +322,13 @@
}
private validInactivityRange(control) {
- if (control)
+ if (control) {
return this.enableIdleTime
? (control.value
&& control.value >= this.inactivityLimits.min
&& control.value <= this.inactivityLimits.max ? null : { valid: false })
: control.value;
+ }
}
private checkIsActiveSpark() {
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
index 331f715..0769b00 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css
@@ -18,12 +18,12 @@
*/
.bubble-up {
+ position: absolute;
+ display: none;
width: 100%;
background: #fff;
border: none;
- display: none;
overflow: visible;
- position: absolute;
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts
index 46d6d63..02e8dde 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts
@@ -17,9 +17,18 @@
* under the License.
*/
-import { Component, Input, Output, EventEmitter, HostBinding,
- ChangeDetectorRef, ElementRef, OnInit, OnDestroy,
- ViewEncapsulation, HostListener } from '@angular/core';
+import {
+ Component,
+ Input,
+ Output,
+ EventEmitter,
+ HostBinding,
+ ChangeDetectorRef,
+ ElementRef,
+ OnDestroy,
+ ViewEncapsulation,
+ HostListener
+} from '@angular/core';
import { BubblesCollector, BubbleService } from './bubble.service';
@Component({
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html
index 13d6b7d..d483d25 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html
@@ -18,7 +18,13 @@
-->
<div class="dropdown-list" >
- <button class="dropdown-toggle" type="button" #list (click)="emitEvent()" (click)="actions.toggle($event, list)">
+ <button
+ class="dropdown-toggle"
+ type="button"
+ #list
+ (click)="emitEvent()"
+ (click)="actions.toggle($event, list)"
+ >
<span class="title"><span [innerHTML]="label || 'None'"></span></span>
<span class="caret-btn"><i class="material-icons">keyboard_arrow_down</i></span>
</button>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
index 66cf215..b49f8b6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
@@ -26,18 +26,18 @@
.dropdown-list button,
.dropdown-multiselect button {
min-width: 100%;
- background: #fff;
- padding-left: 15px;
- font-size: 13px;
- padding-top: 1px;
height: 34px;
+ padding-left: 15px;
+ padding-top: 1px;
+ background: #fff;
+ font-size: 13px;
text-align: left;
white-space: nowrap;
cursor: pointer;
border-radius: 0;
border: none;
outline: none;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+ 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);
}
.dropdown-list {
@@ -48,9 +48,9 @@
color: #4a5c89;
em {
+ margin-right: 0px;
font-size: 13px;
color: #35afd5;
- margin-right: 0px;
font-style: normal;
}
}
@@ -61,7 +61,7 @@
.dropdown-list button:focus,
.dropdown-multiselect button:active,
.dropdown-multiselect button:focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+ 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);
}
.dropdown-multiselect {
@@ -91,8 +91,8 @@
right: 0;
width: 40px;
height: 100%;
- text-align: center;
padding: 7px;
+ text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
border-left: 1px solid #ececec;
@@ -101,9 +101,9 @@
}
.list-menu {
+ left: 0;
width: 100%;
max-height: 260px;
- left: 0;
padding: 0;
margin: 0;
overflow-y: auto;
@@ -113,7 +113,6 @@
padding: 0;
margin: 0;
}
-
}
&.statuses {
@@ -135,10 +134,9 @@
.dropdown-list .list-menu a,
.dropdown-multiselect .list-menu li a {
- display: block;
- padding: 10px;
- padding-left: 15px;
position: relative;
+ display: block;
+ padding: 10px 10px 10px 15px;
font-weight: 300;
cursor: pointer;
color: #4a5c89;
@@ -147,7 +145,7 @@
.dropdown-multiselect .list-menu li a {
padding-left: 30px;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
}
.dropdown-list .list-menu a:hover,
@@ -163,16 +161,15 @@
}
.dropdown-multiselect .list-menu .filter-actions a {
- width: 50%;
- color: #35afd5;
display: block;
+ width: 50%;
padding: 0;
+ color: #35afd5;
line-height: 40px !important;
text-align: center;
}
.dropdown-list {
-
.list-menu,
.title {
span {
@@ -206,16 +203,15 @@
}
.dropdown-list .list-menu a {
- padding: 12px;
- padding-left: 15px;
position: relative;
+ padding: 12px 12px 12px 15px;
font-weight: 300;
cursor: pointer;
em {
+ margin-right: 0px;
font-size: 13px;
color: #35afd5;
- margin-right: 0px;
font-style: normal;
}
}
@@ -229,7 +225,7 @@
color: #35afd5;
font-size: 18px;
line-height: 26px;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
}
.dropdown-multiselect .list-menu .select_all:hover,
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
index ef66677..1d6fda6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
@@ -37,92 +37,91 @@
</a>
</li>
- <ng-template ngFor let-item [ngForOf]="items" let-i="index">
- <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" >
- <a href="#" class="list-item" role="menuitem">
- <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}">
+ <ng-template ngFor let-item [ngForOf]="items" let-i="index">
+ <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" >
+ <a href="#" class="list-item" role="menuitem">
+ <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}">
+ <i class="material-icons">keyboard_arrow_right</i>
+ </span>
+ <!-- <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >-->
+ <!-- <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>-->
+ <!-- <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>-->
+ <!-- </span>-->
+ <datalab-checkbox
+ class="header-checkbox"
+ [checked]="selectedAllInCattegory(item.type)"
+ [someChecked]="selectedSomeInCattegory(item.type)"
+ (toggleSelection)="toggleselectedCategory(model, item.type)"
+ ></datalab-checkbox>
+ {{labels[item.type] || item.type | titlecase}}
+ </a>
+ </li>
+
+ <li
+ class="role-item"
+ role="presentation"
+ *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'"
+ [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'"
+ >
+ <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)">
+ <!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
+ <!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
+ <!-- </span>-->
+ <datalab-checkbox
+ class="header-checkbox"
+ [checked]="checkInModel(item.role)"
+ (toggleSelection)="toggleSelectedOptions(model, item)"
+ ></datalab-checkbox>
+ {{item.role}}
+ </a>
+ </li>
+ <li
+ class="role-item"
+ role="presentation"
+ (click)="toggleItemsForCloud(item.type + item.cloud, $event)"
+ *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud
+ || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type
+ || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud
+ || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type"
+ >
+ <a href="#" class="list-item" role="menuitem">
+ <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}">
<i class="material-icons">keyboard_arrow_right</i>
- </span>
-<!-- <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >-->
-<!-- <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>-->
-<!-- <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>-->
-<!-- </span>-->
- <datalab-checkbox
- class="header-checkbox"
- [checked]="selectedAllInCattegory(item.type)"
- [someChecked]="selectedSomeInCattegory(item.type)"
- (toggleSelection)="toggleselectedCategory(model, item.type)"
- >
- </datalab-checkbox>
+ </span>
+ <!-- <span class="empty-checkbox"-->
+ <!-- [ngClass]="{-->
+ <!-- 'checked': selectedAllInCloud(item.type, item.cloud)-->
+ <!-- || selectedSomeInCloud(item.type, item.cloud)}"-->
+ <!-- (click)="toggleSelectedCloud($event, model, item.type, item.cloud);-->
+ <!-- $event.stopPropagation()"-->
+ <!-- >-->
+ <!-- <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>-->
+ <!-- <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>-->
+ <!-- </span>-->
+ <datalab-checkbox
+ class="header-checkbox"
+ [checked]="selectedAllInCloud(item.type, item.cloud)"
+ [someChecked]="selectedSomeInCloud(item.type, item.cloud)"
+ (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)"
+ ></datalab-checkbox>
+ {{item.cloud}}
+ </a>
+ </li>
+ <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" >
+ <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)">
+ <!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
+ <!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
+ <!-- </span>-->
+ <datalab-checkbox
+ class="header-checkbox"
+ [checked]="checkInModel(item.role)"
+ (toggleSelection)="toggleSelectedOptions(model, item)"
+ ></datalab-checkbox>
+ {{item.role}}
+ </a>
+ </li>
- {{labels[item.type] || item.type | titlecase}}
- </a>
- </li>
-
- <li class="role-item"
- role="presentation"
- *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'"
- [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'"
- >
- <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)">
-<!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
-<!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
-<!-- </span>-->
- <datalab-checkbox
- class="header-checkbox"
- [checked]="checkInModel(item.role)"
- (toggleSelection)="toggleSelectedOptions(model, item)"
- >
- </datalab-checkbox>
- {{item.role}}
- </a>
- </li>
- <li class="role-item" role="presentation" (click)="toggleItemsForCloud(item.type + item.cloud, $event)"
- *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud
- || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type
- || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud
- || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type"
- >
- <a href="#" class="list-item" role="menuitem">
- <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}">
- <i class="material-icons">keyboard_arrow_right</i>
- </span>
-<!-- <span class="empty-checkbox"-->
-<!-- [ngClass]="{-->
-<!-- 'checked': selectedAllInCloud(item.type, item.cloud)-->
-<!-- || selectedSomeInCloud(item.type, item.cloud)}"-->
-<!-- (click)="toggleSelectedCloud($event, model, item.type, item.cloud);-->
-<!-- $event.stopPropagation()"-->
-<!-- >-->
-<!-- <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>-->
-<!-- <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>-->
-<!-- </span>-->
- <datalab-checkbox
- class="header-checkbox"
- [checked]="selectedAllInCloud(item.type, item.cloud)"
- [someChecked]="selectedSomeInCloud(item.type, item.cloud)"
- (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)"
- >
- </datalab-checkbox>
- {{item.cloud}}
- </a>
- </li>
- <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" >
- <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)">
-<!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
-<!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
-<!-- </span>-->
- <datalab-checkbox
- class="header-checkbox"
- [checked]="checkInModel(item.role)"
- (toggleSelection)="toggleSelectedOptions(model, item)"
- >
- </datalab-checkbox>
- {{item.role}}
- </a>
- </li>
-
- </ng-template>
+ </ng-template>
<li *ngIf="items?.length == 0">
<a role="menuitem" class="list-item">
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
index 6231568..62e893a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
@@ -25,19 +25,18 @@
.dropdown-list button,
.dropdown-multiselect button {
-
width: 100%;
- background: #fff;
- padding-left: 15px;
- font-size: 13px;
height: 34px;
+ padding-left: 15px;
+ background: #fff;
+ font-size: 13px;
text-align: left;
white-space: nowrap;
cursor: pointer;
border-radius: 0;
border: none;
outline: none;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+ 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);
}
.dropdown-list {
@@ -48,9 +47,9 @@
color: #4a5c89;
em {
+ margin-right: 0px;
font-size: 13px;
color: #35afd5;
- margin-right: 0px;
font-style: normal;
}
}
@@ -61,27 +60,27 @@
.dropdown-list button:focus,
.dropdown-multiselect button:active,
.dropdown-multiselect button:focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+ 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);
}
.dropdown-multiselect {
button {
- span{
- color: #999;
- font-weight: 300;
+ span {
display: inline-block;
max-width: 80%;
+ color: #999;
+ font-weight: 300;
}
- span:not(.caret-btn){
+ span:not(.caret-btn) {
padding-top: 3px;
font-size: 14px;
}
.selected-items {
- color: #4a5c89;
max-width: 477px;
padding-top: 5px;
+ color: #4a5c89;
}
}
}
@@ -98,8 +97,8 @@
right: 0;
width: 40px;
height: 100%;
- text-align: center;
padding: 7px;
+ text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
border-left: 1px solid #ececec;
@@ -108,9 +107,9 @@
}
.list-menu {
+ left: 0;
width: 100%;
max-height: 450px;
- left: 0;
padding: 0;
margin: 0;
overflow-y: auto;
@@ -121,14 +120,13 @@
margin: 0;
}
- .role-item{
+ .role-item {
padding-left: 30px;
}
- .role-cloud-item{
+ .role-cloud-item {
padding-left: 60px;
}
-
}
&.statuses {
@@ -150,10 +148,10 @@
.dropdown-list .list-menu a,
.dropdown-multiselect .list-menu li a {
+ position: relative;
display: flex;
padding: 10px;
padding-left: 15px;
- position: relative;
font-weight: 300;
cursor: pointer;
color: #4a5c89;
@@ -162,7 +160,7 @@
.dropdown-multiselect .list-menu li a {
padding-left: 25px;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
}
.dropdown-list .list-menu a:hover,
@@ -178,16 +176,15 @@
}
.dropdown-multiselect .list-menu .filter-actions a {
- width: 50%;
- color: #35afd5;
display: block;
+ width: 50%;
padding: 0;
+ color: #35afd5;
line-height: 40px !important;
text-align: center;
}
.dropdown-list {
-
.list-menu,
.title {
span {
@@ -221,9 +218,9 @@
}
.dropdown-list .list-menu a {
+ position: relative;
padding: 12px;
padding-left: 15px;
- position: relative;
font-weight: 300;
cursor: pointer;
@@ -244,7 +241,7 @@
color: #35afd5;
font-size: 18px;
line-height: 26px;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
}
.dropdown-multiselect .list-menu .select_all:hover,
@@ -267,13 +264,13 @@
color: #35afd5;
&.checked-checkbox {
+ position: absolute;
top: 0;
left: 4px;
width: 5px;
height: 10px;
border-bottom: 2px solid white;
border-right: 2px solid white;
- position: absolute;
transform: rotate(45deg);
}
@@ -285,28 +282,28 @@
border-bottom: 2px solid white;
}
- &.arrow{
+ &.arrow {
left: 2px;
top: 9px;
- i{
+
+ i {
color: lightgrey;
}
- &.rotate-arrow{
+
+ &.rotate-arrow {
transform: rotate(90deg);
- transition: .1s ease-in-out;
+ transition: 0.1s ease-in-out;
top: 6px;
left: 0;
}
- &.arrow-checked{
- i{
- color: #36afd5
+ &.arrow-checked {
+ i {
+ color: #36afd5;
}
}
}
}
-
-
}
.dropdown-multiselect.btn-group.open .dropdown-toggle {
@@ -314,22 +311,23 @@
}
.empty-checkbox {
+ position: relative;
width: 16px;
height: 16px;
+ margin-top: 2px;
border-radius: 2px;
border: 2px solid lightgrey;
- margin-top: 2px;
- position: relative;
+
&.checked {
border-color: #35afd5;
background-color: #35afd5;
}
}
-.d-none{
+.d-none {
display: none;
}
-datalab-checkbox{
+datalab-checkbox {
margin: 2px 5px 0 0;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
index 9b1c918..0a2300f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
@@ -18,7 +18,7 @@
*/
import { Input, Output, Component, EventEmitter } from '@angular/core';
-import {SortUtils} from '../../../core/util';
+import { SortUtils } from '../../../core/util';
@Component({
selector: 'multi-level-select-dropdown',
@@ -34,12 +34,8 @@
@Input() isAdmin: boolean;
@Output() selectionChange: EventEmitter<{}> = new EventEmitter();
- public isOpenCategory = {
- };
-
- public isCloudOpen = {
-
- };
+ public isOpenCategory = {};
+ public isCloudOpen = {};
public labels = {
COMPUTATIONAL_SHAPE: 'Compute shapes',
@@ -49,8 +45,7 @@
};
public selectedList: any;
- constructor() {
- }
+ constructor() {}
toggleSelectedOptions( model, value, event?) {
if (event) event.preventDefault();
@@ -63,7 +58,9 @@
if (event) event.preventDefault();
const categoryItems = this.items.filter(role => role.type === value);
this.selectedAllInCattegory(value) ? this.model = this.model.filter(role => role.type !== value) : categoryItems.forEach(role => {
- if (!model.filter(mod => mod.role === role.role).length) {this.model.push(role); }
+ if (!model.filter(mod => mod.role === role.role).length) {
+ this.model.push(role);
+ }
});
this.onUpdate(event);
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
index 2458d9f..178f9bc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
@@ -20,9 +20,10 @@
<div class="dropdown-multiselect btn-group" ngClass="{{type || ''}}">
<button type="button" #list (click)="multiactions.toggle($event, list)">
<span class="ellipsis" *ngIf="model.length === 0 && type">
- <ng-container *ngIf="type === 'resource_type' || type === 'resource_types';else noResourceTypeSelect">Select {{ type | convertaction}}</ng-container>
- <ng-template #noResourceTypeSelect>Select {{ type }}</ng-template>
-
+ <ng-container *ngIf="type === 'resource_type' || type === 'resource_types';else noResourceTypeSelect">
+ Select {{ type | convertaction}}
+ </ng-container>
+ <ng-template #noResourceTypeSelect>Select {{ type }}</ng-template>
</span>
<span class="selected-items ellipsis" *ngIf="model.length !== 0">
Selected {{model.length}} item<strong *ngIf="model.length > 1">s</strong>
@@ -40,23 +41,33 @@
<i class="material-icons">clear</i> None
</a>
</li>
- <ng-template let-item ngFor [ngForOf]="items">
- <li role="presentation" *ngIf="model">
- <a href="#"
- class="list-item billing-user-name"
- [ngClass]="{'uppercase': type === 'resource_type' || type === 'status'}"
- role="menuitem"
- (click)="toggleSelectedOptions($event, model, item)">
- <span class="material-icons" *ngIf="model.indexOf(item) >= 0">done</span>
- <ng-container *ngIf="type !== 'resource_type' && type !== 'resource_types' && item !== 'invalid_name' && item !== 'invalid_version' && item !== 'installation_error'">
- <div [ngClass]="{'uppercase': type === 'status'}">{{item}}</div>
- </ng-container>
- <ng-container *ngIf="type === 'resource_type' || type === 'resource_types' || item === 'invalid_name' || item === 'invalid_version' || item === 'installation_error'">
- <div [ngClass]="{'uppercase': type === 'status' || type === 'resource_type'}">{{item | convertaction}}</div>
- </ng-container>
- </a>
- </li>
- </ng-template>
+ <ng-template let-item ngFor [ngForOf]="items">
+ <li role="presentation" *ngIf="model">
+ <a
+ href="#"
+ class="list-item billing-user-name"
+ [ngClass]="{'uppercase': type === 'resource_type' || type === 'status'}"
+ role="menuitem"
+ (click)="toggleSelectedOptions($event, model, item)"
+ >
+ <span class="material-icons" *ngIf="model.indexOf(item) >= 0">done</span>
+ <ng-container
+ *ngIf="type !== 'resource_type' && type !== 'resource_types'
+ && item !== 'invalid_name' && item !== 'invalid_version'
+ && item !== 'installation_error'"
+ >
+ <div [ngClass]="{'uppercase': type === 'status'}">{{item}}</div>
+ </ng-container>
+ <ng-container
+ *ngIf="type === 'resource_type' || type === 'resource_types'
+ || item === 'invalid_name' || item === 'invalid_version'
+ || item === 'installation_error'"
+ >
+ <div [ngClass]="{'uppercase': type === 'status' || type === 'resource_type'}">{{item | convertaction}}</div>
+ </ng-container>
+ </a>
+ </li>
+ </ng-template>
<li *ngIf="items?.length == 0">
<a role="menuitem" class="list-item">
<span class="material-icons">visibility_off</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css
index 4a36213..96ee4e1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css
@@ -18,16 +18,16 @@
*/
.message-wrapper{
- min-height: 200px;
- width: 100%;
- box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
- transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
- border-radius: 4px;
+ min-height: 200px;
+ width: 100%;
background: #fff;
color: rgba(0,0,0,.87);
+ border-radius: 4px;
+ box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+ transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts
index f516928..26491cb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts
@@ -17,10 +17,7 @@
* under the License.
*/
-import { Component, Input, Output, EventEmitter, HostBinding,
- ChangeDetectorRef, ElementRef, OnInit, OnDestroy,
- ViewEncapsulation, HostListener } from '@angular/core';
-
+import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'inform-message',
@@ -32,10 +29,7 @@
export class InformMessageComponent implements OnInit {
@Input() message: string;
- constructor() {}
+ constructor() { }
- ngOnInit(): void {
- }
-
-
+ ngOnInit(): void { }
}
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 c539dbb..4c61dc9 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
@@ -18,7 +18,7 @@
-->
<div class="nav-bar" [hidden]="!isLoggedIn">
-<!-- <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>-->
+ <!-- <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>-->
<mat-progress-bar *ngIf="progressBarService.showProgressBar | async" mode="indeterminate"></mat-progress-bar>
<div class="menu-area" *ngIf="healthStatus">
@@ -61,88 +61,131 @@
</p>
</div>
</bubble-up>
- <button class="btn btn-logout ani" (click)="logout_btnClick()">Log out <span
- class="user-name">{{currentUserName}}</span></button>
+ <button class="btn btn-logout ani" (click)="logout_btnClick()">
+ Log out <span class="user-name">{{currentUserName}}</span>
+ </button>
</div>
-
</div>
+
<mat-sidenav-container class="example-container" autosize >
- <mat-sidenav #drawer mode="side" opened role="navigation" [style.width]="isExpanded ? '220px' : '60px'" disableClose *ngIf="healthStatus">
+ <mat-sidenav
+ #drawer
+ mode="side"
+ opened
+ role="navigation"
+ [style.width]="isExpanded ? '220px' : '60px'"
+ disableClose
+ *ngIf="healthStatus"
+ >
<mat-nav-list >
<nav>
<div>
- <a class="nav-item" [routerLink]="['/resources_list']" [routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}">
+ <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 || healthStatus?.projectAdmin">
<span *ngIf="isExpanded">Administration</span>
- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/roles']"
- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+ <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}">
+ <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]="['/odahu']"-->
-<!-- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">-->
-<!-- <span *ngIf="isExpanded; else odahu">Odahu deployment</span>-->
-<!-- <ng-template #odahu><i class="material-icons">get_app</i></ng-template>-->
-<!-- </a>-->
- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
- [routerLink]="['/environment_management']" [routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}">
+ <!-- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/odahu']"-->
+ <!-- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">-->
+ <!-- <span *ngIf="isExpanded; else odahu">Odahu deployment</span>-->
+ <!-- <ng-template #odahu><i class="material-icons">get_app</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 *ngIf="healthStatus?.admin" class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'"
- [routerLink]="['/configuration']" [routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}" >
+ <a
+ *ngIf="healthStatus?.admin"
+ class="sub-nav-item"
+ [style.margin-left.px]="isExpanded ? '30' : '0'"
+ [routerLink]="['/configuration']"
+ [routerLinkActive]="['active']"
+ [routerLinkActiveOptions]="{exact:true}"
+ >
<span *ngIf="isExpanded; else env">Configuration</span>
<ng-template #env><i class="material-icons">build_circle</i></ng-template>
</a>
</a>
<a class="nav-item has-children" *ngIf="healthStatus?.billingEnabled || healthStatus?.auditEnabled">
<span *ngIf="isExpanded">Reports</span>
- <a *ngIf="healthStatus?.auditEnabled" class="sub-nav-item" [routerLink]="['/audit']" [style.margin-left.px]="isExpanded ? '30' : '0'"
- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+ <a
+ *ngIf="healthStatus?.auditEnabled"
+ class="sub-nav-item"
+ [routerLink]="['/audit']"
+ [style.margin-left.px]="isExpanded ? '30' : '0'"
+ [routerLinkActive]="['active']"
+ [routerLinkActiveOptions]="{exact:true}"
+ >
<span *ngIf="isExpanded; else audit">Audit</span>
<ng-template #audit><i class="material-icons">library_books</i></ng-template>
</a>
- <a *ngIf="healthStatus?.billingEnabled" class="sub-nav-item" [routerLink]="['/billing_report']"
- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [style.margin-left.px]="isExpanded ? '30' : '0'">
+ <a
+ *ngIf="healthStatus?.billingEnabled"
+ class="sub-nav-item"
+ [routerLink]="['/billing_report']"
+ [routerLinkActive]="['active']"
+ [routerLinkActiveOptions]="{exact:true}"
+ [style.margin-left.px]="isExpanded ? '30' : '0'"
+ >
<span *ngIf="isExpanded; else billing">Billing</span>
<ng-template #billing><i class="material-icons">account_balance_wallet</i></ng-template>
</a>
</a>
</div>
-<!-- <div>-->
-<!-- <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"-->
-<!-- [routerLinkActiveOptions]="{exact:true}">-->
-<!-- <span *ngIf="isExpanded; else endpoint">Cloud Endpoint API</span>-->
-<!-- <ng-template #endpoint>-->
-<!-- <span>-->
-<!-- <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.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z" fill="#FFFFFF"></path>-->
-<!-- <path id="swager-bgr" 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.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z" fill="#577289"></path>-->
-<!-- <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,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#ffffff"></path>-->
-<!-- </g>-->
-<!-- </svg>-->
-<!-- </span>-->
-<!-- </ng-template>-->
-<!-- </a>-->
-<!-- </div>-->
+ <!-- <div>-->
+ <!-- <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"-->
+ <!-- [routerLinkActiveOptions]="{exact:true}">-->
+ <!-- <span *ngIf="isExpanded; else endpoint">Cloud Endpoint API</span>-->
+ <!-- <ng-template #endpoint>-->
+ <!-- <span>-->
+ <!-- <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.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z" fill="#FFFFFF"></path>-->
+ <!-- <path id="swager-bgr" 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.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z" fill="#577289"></path>-->
+ <!-- <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,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#ffffff"></path>-->
+ <!-- </g>-->
+ <!-- </svg>-->
+ <!-- </span>-->
+ <!-- </ng-template>-->
+ <!-- </a>-->
+ <!-- </div>-->
</nav>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content id="scrolling" [style.margin-left]="isExpanded ? '220px' : '60px'">
<div [@fadeAnimation]="getRouterOutletState(routerOutlet)" class="fade-animation">
-
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
</mat-sidenav-content>
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 86480bd..3d99f7d 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
@@ -21,15 +21,15 @@
// }
.nav-bar {
- min-height: 48px;
- height: 48px;
- background-color: #222;
- border-color: #080808;
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 0;
border-radius: 0;
+ min-height: 48px;
+ height: 48px;
+ background-color: #222;
+ border-color: #080808;
.menu-area {
display: flex;
@@ -52,10 +52,10 @@
.statusbar {
display: flex;
+ justify-content: center;
width: 50px;
height: 46px;
text-decoration: none;
- justify-content: center;
color: #f9fafb;
cursor: pointer;
@@ -99,14 +99,14 @@
.btn-logout {
height: 46px;
+ min-width: 280px;
padding: 0 28px;
background: #383838;
+ font-size: 14px;
color: #cfdae6;
border: 0;
border-radius: 0;
- font-size: 14px;
cursor: pointer;
- min-width: 280px;
text-align: left;
.user-name {
@@ -129,11 +129,11 @@
p {
strong {
+ display: inline-block;
+ width: 120px;
color: #455c74;
font-size: 14px;
font-weight: 600;
- width: 120px;
- display: inline-block;
}
.helper_instruction {
@@ -145,8 +145,8 @@
}
span {
- width: 180px;
display: inline-block;
+ width: 180px;
vertical-align: bottom;
}
}
@@ -157,13 +157,13 @@
}
a.nav-item {
- display: block;
position: relative;
+ display: block;
height: 56px;
padding: 5px 10px;
line-height: 48px;
font-family: "Open Sans", sans-serif;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
text-decoration: none;
font-size: 14px;
overflow: hidden;
@@ -184,18 +184,19 @@
background: none !important;
color: #36afd5 !important;
}
- &:not(.has-children):hover #swager-bgr{
+
+ &:not(.has-children):hover #swager-bgr {
fill: #36afd5;
}
&:not(:last-child)::after {
- content: ' ';
+ content: " ";
position: absolute;
bottom: 0;
- left: calc(50% - 200px/2);
+ left: calc(50% - 200px / 2);
+ display: block;
height: 1px;
width: 200px;
- display: block;
background: #edf1f5;
}
@@ -212,7 +213,7 @@
.sub-nav-item {
display: block;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
i {
vertical-align: middle;
@@ -235,30 +236,30 @@
.error,
.user-name,
.meta {
- transition: all .35s ease-in-out;
+ transition: all 0.35s ease-in-out;
}
.hamburger {
- border: none;
- padding: 0;
- background: none;
- outline: none;
width: 60px;
height: 46px;
+ padding: 0;
+ border: none;
+ background: none;
+ outline: none;
cursor: pointer;
border-radius: 0;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
.line {
+ display: block;
width: 22px;
height: 2px;
- display: block;
margin: 4px auto;
border-radius: 1px;
background-color: #ecf0f1;
- -webkit-transition: all .35s ease-in-out;
- -o-transition: all .35s ease-in-out;
- transition: all .35s ease-in-out;
+ -webkit-transition: all 0.35s ease-in-out;
+ -o-transition: all 0.35s ease-in-out;
+ transition: all 0.35s ease-in-out;
&:nth-child(2) {
-webkit-transition-delay: 0.3s;
@@ -299,7 +300,6 @@
}
mat-sidenav {
-
mat-nav-list {
height: 100%;
@@ -329,6 +329,6 @@
}
}
-.blue{
+.blue {
color: #35afd5;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
index bdb2b86..95907e7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
@@ -17,13 +17,19 @@
* under the License.
*/
-import {Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild, ChangeDetectorRef, ApplicationRef} from '@angular/core';
+import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import {Subscription, timer, interval, Subject} from 'rxjs';
+import { Subscription, timer } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { RouterOutlet } from '@angular/router';
-import { ApplicationSecurityService, HealthStatusService, AppRoutingService, SchedulerService, StorageService } from '../../core/services';
+import {
+ ApplicationSecurityService,
+ HealthStatusService,
+ AppRoutingService,
+ SchedulerService,
+ StorageService
+} from '../../core/services';
import { GeneralEnvironmentStatus } from '../../administration/management/management.model';
import { NotificationDialogComponent } from '../modal-dialog/notification-dialog';
import {
@@ -31,13 +37,12 @@
animate,
transition,
style,
- query, group,
-
+ query,
+ group,
} from '@angular/animations';
import {skip, take} from 'rxjs/operators';
import {ProgressBarService} from '../../core/services/progress-bar.service';
-
interface Quota {
projectQuotas: {};
totalQuotaUsed: number;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts
index 6600838..45931f1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts
@@ -38,8 +38,13 @@
<button mat-mini-fab class="ticker-selected"></button>
</mat-toolbar>
<div *ngFor="let step of steps; let i = index" [class]="getTimeValueClass(step, i)" >
- <button mat-mini-fab [color]="selectedTimePart === step ? color : ''"
- (click)="changeTimeValue(step)"> {{ step }} </button>
+ <button
+ mat-mini-fab
+ [color]="selectedTimePart === step ? color : ''"
+ (click)="changeTimeValue(step)"
+ >
+ {{ step }}
+ </button>
</div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts
index 96aa5ef..79f3434 100755
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Component, Input, Output, OnInit, Inject, EventEmitter } from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { CLOCK_TYPE, TimeFormat } from './ticker.component';
type TimeFormatAlias = TimeFormat;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss
index 55909ef..43281d1 100755
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss
@@ -17,7 +17,7 @@
* under the License.
*/
-@import '_variables.scss';
+@import "_variables.scss";
@-webkit-keyframes bounce {
from {
@@ -88,15 +88,15 @@
}
.time-cover {
- max-height: 100%;
- width: 300px;
display: flex;
flex-direction: column;
+ max-height: 100%;
+ width: 300px;
.container {
- padding: 15px;
min-width: 160px;
width: 160px;
+ padding: 15px;
&.mat-toolbar-single-row {
background: $modal-header-color;
@@ -105,9 +105,9 @@
}
.selected-time {
+ display: flex;
font-size: 3.5rem;
font-weight: 400;
- display: flex;
.active {
color: #36afd5;
@@ -115,9 +115,9 @@
}
.selected-meridiem {
+ padding-top: 2rem;
font-size: 1rem;
line-height: 1.3rem;
- padding-top: 2rem;
.active {
color: #36afd5;
@@ -135,19 +135,19 @@
}
}
-.selected-time>span,
-.selected-meridiem>span {
+.selected-time > span,
+.selected-meridiem > span {
outline: 0;
opacity: 0.5;
}
-.selected-time>span:not(.active),
-.selected-meridiem>span:not(.active) {
+.selected-time > span:not(.active),
+.selected-meridiem > span:not(.active) {
cursor: pointer;
}
-.selected-time>span.active,
-.selected-meridiem>span.active {
+.selected-time > span.active,
+.selected-meridiem > span.active {
opacity: 1;
}
@@ -164,50 +164,50 @@
.ticker {
width: 200px;
height: 200px;
+ padding: 24px;
+ margin: 30px auto;
border-radius: 50%;
cursor: pointer;
- padding: 24px;
background: #ededed;
- margin: 30px auto;
.ticker-container {
- width: 100%;
- height: 100%;
position: relative;
display: block;
+ width: 100%;
+ height: 100%;
}
.ticker-center {
- height: 6px;
- width: 6px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
+ height: 6px;
+ width: 6px;
margin: auto;
border-radius: 50%;
}
.pointer {
box-shadow: none;
- width: 1px;
- height: 50%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
+ z-index: 0;
+ width: 1px;
+ height: 50%;
margin: 0 auto;
padding: 0;
transform-origin: top center;
transition: transform 200ms;
- z-index: 0;
pointer-events: none;
}
.ticker-step {
- display: block;
position: absolute;
+ display: block;
transform: translate(-50%, -50%);
transition: transform 200ms;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts
index 7b1f38d..6fba205 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts
@@ -29,13 +29,21 @@
template: `
<div class="time-picker">
<mat-form-field class="time-select">
- <input matInput
- placeholder="{{ label }}"
- [value]="(selectedTime | localDate : 'shortTime') || null"
- (input)="checkEmpty($event.target['value'])"
- [disabled]="disable"
+ <input
+ matInput
+ placeholder="{{ label }}"
+ [value]="(selectedTime | localDate : 'shortTime') || null"
+ (input)="checkEmpty($event.target['value'])"
+ [disabled]="disable"
/>
- <mat-icon matSuffix [ngClass]="{'not-allowed': disable}" (click)="openDatePickerDialog($event)" disabled="disable">access_time</mat-icon>
+ <mat-icon
+ matSuffix
+ [ngClass]="{'not-allowed': disable}"
+ (click)="openDatePickerDialog($event)"
+ disabled="disable"
+ >
+ access_time
+ </mat-icon>
</mat-form-field>
</div>`,
styleUrls: ['./time-picker.component.scss']
diff --git a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
index 0b54e47..9d4adf1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Component, OnInit, ElementRef, ViewEncapsulation, ViewContainerRef, ViewChild, Inject } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewEncapsulation, ViewChild, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import Guacamole from 'guacamole-common-js';
@@ -28,7 +28,6 @@
const API_URL = environment.apiUrl;
import { StorageService } from '../core/services';
-import { FileUtils } from '../core/util';
@Component({
selector: 'datalab-webterminal',
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 e10cc90..2802945 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
@@ -17,7 +17,7 @@
* under the License.
*/
-@import '_variables.scss';
+@import "_variables.scss";
.modal-xs {
width: 375px;
@@ -61,22 +61,22 @@
overflow-x: hidden;
&.mat-dialog-container {
+ position: relative;
padding: 0;
border-radius: 0;
overflow-x: hidden;
- position: relative;
#dialog-box {
- color: $modal-text-color;
min-height: 150px;
+ color: $modal-text-color;
font-family: "Open Sans", sans-serif;
.dialog-header {
- padding-left: 30px;
- background: $modal-header-color;
- height: 50px;
- line-height: 50px;
position: relative;
+ padding-left: 30px;
+ height: 50px;
+ background: $modal-header-color;
+ line-height: 50px;
.modal-title {
width: 90%;
@@ -89,8 +89,8 @@
font-size: 18px;
background: $modal-header-color;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
@@ -112,7 +112,7 @@
color: #577289;
outline: none;
cursor: pointer;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
&:hover {
color: #36afd5;
@@ -126,7 +126,7 @@
.dialog-content {
.mat-select {
- font-family: 'Opens Sans', sans-serif;
+ font-family: "Opens Sans", sans-serif;
}
}
@@ -137,7 +137,7 @@
.upload-key {
margin-bottom: 20px;
- &>div>div {
+ & > div > div {
margin-top: 5px;
}
}
@@ -156,9 +156,10 @@
a {
color: #35afd5;
text-decoration: none;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
line-height: 19px;
- &.spark-url{
+
+ &.spark-url {
line-height: 16px;
}
@@ -168,21 +169,21 @@
}
.info-label {
- font-size: 15px;
margin-top: 20px;
+ font-size: 15px;
}
.control-label {
- font-weight: 600;
margin-top: 6px;
+ font-weight: 600;
}
.form-group {
small {
- font-size: 12px;
- color: #9cadbe;
display: inline-block;
margin-top: 6px;
+ font-size: 12px;
+ color: #9cadbe;
}
}
}
@@ -195,40 +196,39 @@
.butt-file {
position: relative;
- overflow: hidden;
- margin-bottom: 10px;
display: inline-block;
- color: #35afd5;
- padding: 6px 29px 6px 23px;
width: 170px;
+ margin-bottom: 10px;
+ padding: 6px 29px 6px 23px;
+ overflow: hidden;
+ color: #35afd5;
// font: 600 16px/1.45 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 1.45;
- font-family: 'Open Sans', sans-serif;
-
+ font-family: "Open Sans", sans-serif;
text-align: center;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+ 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);
.upload-icon {
- background: url(/../../assets/img/upload-icon.png) no-repeat;
- background-size: 100%;
+ position: relative;
+ top: 2px;
display: inline-block;
width: 17px;
height: 17px;
margin-right: 8px;
- position: relative;
- top: 2px;
+ background: url(/../../assets/img/upload-icon.png) no-repeat;
+ background-size: 100%;
}
- input[type=file] {
+ input[type="file"] {
+ display: block;
font-size: 100px;
text-align: right;
outline: none;
background: #fff;
cursor: inherit;
- display: block;
}
&:active {
@@ -237,15 +237,15 @@
}
.detail-header {
- border-bottom: 0;
width: 100%;
+ border-bottom: 0;
border-collapse: collapse;
table-layout: fixed;
td {
+ padding: 20px;
border: 1px solid #edf1f5;
text-align: center;
- padding: 20px;
text-align: center !important;
background: #fff;
@@ -257,8 +257,8 @@
text-overflow: ellipsis;
overflow: hidden;
cursor: default;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
@@ -276,9 +276,9 @@
.detail-info {
p {
- font-weight: 400;
- margin-bottom: 10px;
display: flex;
+ margin-bottom: 10px;
+ font-weight: 400;
small {
font-size: 12px;
@@ -286,21 +286,23 @@
}
}
- span:not(.description),{
+ span:not(.description) {
+ display: block;
+ max-width: 450px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
- display: block;
- max-width: 450px;
white-space: nowrap;
- &::after{
- content: '';
+
+ &::after {
+ content: "";
display: block;
}
- &.link-icon{
+
+ &.link-icon {
//margin-left: 10px;
- cursor: pointer;
padding-top: 2px;
+ cursor: pointer;
}
}
@@ -326,7 +328,8 @@
}
}
- .create-resources-dialog, .top-select {
+ .create-resources-dialog,
+ .top-select {
margin-left: 6px;
min-width: calc(100% + 10px) !important;
}
@@ -356,103 +359,103 @@
display: flex;
}
-.endpoints-table{
+.endpoints-table {
border-collapse: separate;
}
-.mat-step-icon-state-number .mat-step-icon-content{
+.mat-step-icon-state-number .mat-step-icon-content {
top: 49%;
}
-.confirmation-dialog p.delete-user{
- font-weight: 500;
+.confirmation-dialog p.delete-user {
max-height: 200px;
padding: 5px;
+ font-weight: 500;
overflow: hidden auto;
text-overflow: ellipsis;
}
-.bucket-browser{
+.bucket-browser {
.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
width: calc(100% + 85px);
}
}
-.full-size-tooltip{
- max-width: 1100px !important;
+.full-size-tooltip {
+ max-width: 1100px !important;
white-space: pre-line;
}
-.mat-list-base .mat-list-item.delete-item{
+.mat-list-base .mat-list-item.delete-item {
height: 30px;
}
-.mat-list-item{
+.mat-list-item {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
-.d-none{
+.d-none {
display: none !important;
}
-.d-flex{
+.d-flex {
display: flex !important;
}
-.progres{
- border: 1px solid rgba(0,0,0,.12);
- height: 17px;
+.progres {
position: relative;
+ height: 17px;
width: 155px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
- .bar{
+ .bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
- background-color: #00bcd4;
+ background-color: #00bcd4;
}
- .progress-bar-text{
+ .progress-bar-text {
position: absolute;
left: 5px;
top: 0;
bottom: 0;
+ z-index: 10;
font-size: 11px;
line-height: 13px;
color: rgba(0, 0, 0, 0.87);
- z-index: 10;
}
}
-.not-allow{
+.not-allow {
cursor: not-allowed !important;
- &.open-bucket{
+
+ &.open-bucket {
color: $blue-grey-color !important;
}
}
-.audit-info-content{
+.audit-info-content {
.mat-list {
height: unset;
.list-header {
line-height: unset;
-
- .mat-list-item-content{
+
+ .mat-list-item-content {
align-items: start !important;
}
}
}
}
-.add-folder-form .mat-hint{
+.add-folder-form .mat-hint {
color: #00bcd4;
}
-
@media screen and (max-width: 1280px) {
.modal-fullscreen {
max-width: 100vw !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 16ffc1e..74dc5b4 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
@@ -17,9 +17,12 @@
* under the License.
*/
-html, body { height: 100%; }
+html, body {
+ height: 100%;
+}
+
body {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
overflow-x: hidden;
font-weight: 300;
@@ -29,28 +32,54 @@
overflow: hidden;
}
-.alignleft, .al {float: left}
-.alignright, .ar {float: right; left: 26px; z-index: 1010}
-.aligncenter, .ac {margin-left: auto;margin-right: auto}
+.alignleft, .al {
+ float: left;
+}
-.mt-5 {margin-top: 5px}
+.alignright, .ar {
+ float: right;
+ left: 26px;
+ z-index: 1010;
+}
+.aligncenter, .ac {
+ margin-left: auto;
+ margin-right: auto;
+}
-.pr-3{padding-right: 3px}
+.mt-5 {
+ margin-top: 5px;
+}
-.pb-50 {padding-bottom: 50px;}
-.pb-25 {padding-bottom: 25px;}
-.pb-10 {padding-bottom: 10px;}
+.pr-3 {
+ padding-right: 3px;
+}
-.full-width{width: 100%;}
+.pb-50 {
+ padding-bottom: 50px;
+}
+.pb-25 {
+ padding-bottom: 25px;
+}
+.pb-10 {
+ padding-bottom: 10px;
+}
-.txt-r {text-align: right }
-.txt-l {text-align: left }
+.full-width {
+ width: 100%;
+}
-input[type='text']:not(.mat-input-element),
-input[type='number']:not(.mat-input-element),
-input[type='email']:not(.mat-input-element),
-input[type='password']:not(.mat-input-element),
+.txt-r {
+ text-align: right;
+}
+.txt-l {
+ text-align: left;
+}
+
+input[type="text"]:not(.mat-input-element),
+input[type="number"]:not(.mat-input-element),
+input[type="email"]:not(.mat-input-element),
+input[type="password"]:not(.mat-input-element),
textarea {
width: 100%;
height: 36px;
@@ -60,39 +89,41 @@
background: rgba(247, 247, 247, 0.87);
transition: border 0.1s ease-out;
outline: none;
- font: 300 16px/26px 'Open Sans', sans-serif;
+ font: 300 16px/26px "Open Sans", sans-serif;
}
-input[type='text']:not(.mat-input-element):focus,
-input[type='number']:not(.mat-input-element):focus,
-input[type='email']:not(.mat-input-element):focus,
-input[type='password']:not(.mat-input-element):focus,
+input[type="text"]:not(.mat-input-element):focus,
+input[type="number"]:not(.mat-input-element):focus,
+input[type="email"]:not(.mat-input-element):focus,
+input[type="password"]:not(.mat-input-element):focus,
textarea:focus {
border: none;
background: #fff;
transition: border 0.2s ease-in;
- box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-}
-input[type='text']:not(.mat-input-element):disabled {
- opacity: .4;
- cursor: not-allowed;
- color: rgba(0,0,0,.38);
- background-color: rgba(0,0,0,.12);
+ 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);
}
-input[type='text']:not(.mat-input-element)::placeholder,
-input[type='number']:not(.mat-input-element)::placeholder,
-input[type='email']:not(.mat-input-element)::placeholder,
-input[type='password']:not(.mat-input-element)::placeholder,
+input[type="text"]:not(.mat-input-element):disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.38);
+ background-color: rgba(0, 0, 0, 0.12);
+}
+
+input[type="text"]:not(.mat-input-element)::placeholder,
+input[type="number"]:not(.mat-input-element)::placeholder,
+input[type="email"]:not(.mat-input-element)::placeholder,
+input[type="password"]:not(.mat-input-element)::placeholder,
textarea::placeholder {
color: #718ba6;
}
-.control-group, .row-wrap {
+.control-group,
+.row-wrap {
+ position: relative;
display: flex;
flex-flow: row wrap;
padding-bottom: 20px;
- position: relative;
}
.row-wrap {
@@ -104,13 +135,13 @@
}
.control-group .label {
+ align-self: center;
width: 35%;
color: #718ba6;
font-size: 15px;
font-weight: 600;
- align-self: center;
text-align: left;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
}
.control-group .control {
@@ -118,14 +149,28 @@
}
button {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
}
-.info_color {color: #5bc0de}
-.primary_color {color: #337ab7}
-.success_color {color: #5cb85c}
-.warning_color {color: #f0ad4e}
-.danger_color {color: #d9534f}
+.info_color {
+ color: #5bc0de;
+}
+
+.primary_color {
+ color: #337ab7;
+}
+
+.success_color {
+ color: #5cb85c;
+}
+
+.warning_color {
+ color: #f0ad4e;
+}
+
+.danger_color {
+ color: #d9534f;
+}
.list-header {
width: 100%;
@@ -144,10 +189,11 @@
}
}
}
+
.capt {
+ margin-right: 0px;
font-size: 13px;
color: #35afd5;
- margin-right: 0px;
font-style: normal;
}
}
@@ -156,14 +202,16 @@
color: #35afd5;
overflow: hidden;
cursor: pointer;
- transition: all .45s ease-in-out;
+ transition: all 0.45s ease-in-out;
+
&:hover {
color: #3392b0;
}
+
.material-icons {
+ padding-right: 5px;
font-size: 20px;
vertical-align: top;
- padding-right: 5px;
overflow: hidden;
}
}
@@ -177,21 +225,21 @@
line-height: 26px;
}
-input[type=file],
-input[type=file]::-webkit-file-upload-button {
- cursor: pointer;
+input[type="file"],
+input[type="file"]::-webkit-file-upload-button {
+ cursor: pointer;
}
-.refresh-icon{
+.refresh-icon {
color: #35afd5;
}
.buttons {
position: absolute;
+ bottom: 9px;
+ z-index: 102;
display: flex;
justify-content: space-around;
- z-index: 102;
- bottom: 9px;
width: 100%;
.mat-mini-fab {
@@ -199,26 +247,23 @@
width: 25px;
.mat-button-wrapper {
- padding: 0;
- line-height: unset;
display: flex;
align-items: center;
justify-content: center;
- padding-top: 2px;
+ padding: 2px 0 0;
+ line-height: unset;
}
}
}
-.shadow-none{
+.shadow-none {
box-shadow: none !important;
}
-.right-sticky{
+.right-sticky {
right: -15px !important;
}
-.cursor-pointer{
+.cursor-pointer {
cursor: pointer;
}
-
-
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
index 6e90bae..3386a8d 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
@@ -48,7 +48,7 @@
}
a {
- text-decoration: none
+ text-decoration: none;
}
table {
@@ -56,23 +56,22 @@
border-spacing: 0;
}
-[hidden],
-.hidden {
+[hidden], .hidden {
display: none !important;
}
::-moz-selection,
::selection {
color: #fff;
- background: #3399ff
+ background: #3399ff;
}
:focus {
- outline: none
+ outline: none;
}
::-moz-focus-inner {
- border: 0
+ border: 0;
}
::-webkit-file-upload-button {
@@ -98,7 +97,6 @@
}
input {
-
&::-ms-clear,
&::-ms-reveal {
display: none;
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 4a37d89..becd4a2 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
@@ -26,10 +26,11 @@
font-style: normal;
font-weight: 600;
font-size: 15px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
color: #577289;
- &[disabled]{
- box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+
+ &[disabled] {
+ 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);
}
i {
@@ -43,8 +44,9 @@
margin: 0 5px 0 0;
font-size: 20px;
vertical-align: middle;
- &.arrow-icon{
- vertical-align: -5px
+
+ &.arrow-icon {
+ vertical-align: -5px;
}
}
}
@@ -56,23 +58,23 @@
&.action {
width: 140px;
- &.install-btn{
+ &.install-btn {
margin-left: 0;
}
- &.close-btn{
+ &.close-btn {
margin-right: 25px;
}
}
&.butt-success {
- background-color: #49af38;
margin-left: 25px;
+ background-color: #49af38;
color: #fff;
&.mini {
- margin-left: 5px;
width: 80px;
+ margin-left: 5px;
}
}
@@ -90,8 +92,8 @@
}
&.butt-generate {
- color: #35afd5;
width: 170px;
+ color: #35afd5;
&:active {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
@@ -100,15 +102,13 @@
}
}
-
-
.selector-wrapper {
display: flex;
align-self: center;
width: 100%;
height: 36px;
padding-left: 10px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 300;
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);
@@ -125,50 +125,49 @@
}
.caret {
+ position: absolute;
+ right: 0;
+ top: 0px;
width: 40px;
height: 40px;
color: #4ab8dc;
border: none;
border-left: 1px solid #ececec;
background-color: #fff;
- position: absolute;
- right: 0;
- top: 0px;
cursor: pointer;
&.not-allowed {
background-color: #dcdcdc;
.mat-select-placeholder {
- cursor: not-allowed;
+ cursor: not-allowed;
}
}
}
}
}
-
-.audit{
+.audit {
.select-wrapper {
- .mat-reset{
- .selector-wrapper{
+ .mat-reset {
+ .selector-wrapper {
height: 25px;
- .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{
- padding-top: 6px;
- font-size: 13px;
- }
+ .mat-form-field .mat-form-field-wrapper .mat-form-field-infix {
+ padding-top: 6px;
+ font-size: 13px;
+ }
.caret {
width: 25px;
height: 31px;
-
}
}
}
}
}
+
.multiple-select {
- border-bottom: 1px solid #dedbdb;
padding: 0;
+ border-bottom: 1px solid #dedbdb;
a {
display: inline-block;
@@ -210,10 +209,10 @@
}
.mat-option {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
.mat-option-text {
- color: #607D8B;
+ color: #607d8b;
font-size: 15px;
}
@@ -250,17 +249,17 @@
font-size: 14px;
}
-.mat-select-disabled{
+.mat-select-disabled {
.mat-select-placeholder {
cursor: not-allowed;
}
- .mat-select-value{
+ .mat-select-value {
cursor: not-allowed;
}
}
.mat-select-disabled + .caret,
-.mat-tab-disabled{
+.mat-tab-disabled {
cursor: not-allowed !important;
}
@@ -274,7 +273,7 @@
/* grid filtering */
.filter-row .dropdown-multiselect button,
-.filter-row input[type='text'] {
+.filter-row input[type="text"] {
font-size: 14px;
height: 34px;
}
@@ -294,7 +293,7 @@
font-weight: 100;
font-size: 16px;
line-height: 24px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
}
.backup-dialog .mat-slide-toggle,
@@ -351,32 +350,33 @@
.project-form,
.create-environment,
.selection,
-.manage-roles{
- .mat-select-value{
- overflow: visible;
- }
- .mat-form-field-label {
- line-height: 21px !important;
- font-size: 15px !important;
+.manage-roles {
+ .mat-select-value {
+ overflow: visible;
+ }
+ .mat-form-field-label {
+ line-height: 21px !important;
+ font-size: 15px !important;
- &:not(.mat-form-field-empty) {
- color: transparent !important;
- }
+ &:not(.mat-form-field-empty) {
+ color: transparent !important;
}
+ }
}
.mat-chip-list {
pointer-events: none;
- .mat-chip{
+ .mat-chip {
overflow: hidden;
pointer-events: all;
- &.mat-standard-chip.mat-chip-disabled{
+ &.mat-standard-chip.mat-chip-disabled {
opacity: 1;
}
}
}
-.selection, .project-form {
+.selection,
+.project-form {
.mat-reset .mat-form-field .mat-form-field-wrapper .mat-form-field-label {
transform: none;
}
@@ -385,7 +385,7 @@
.manage-roles,
.project-form,
.selection,
-.audit{
+.audit {
.mat-form-field {
width: 100%;
}
@@ -410,14 +410,13 @@
overflow: hidden;
.mat-form-field-wrapper {
-
.mat-form-field-infix {
width: 275px;
+ padding-top: 10px;
border: 0;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 300;
- padding-top: 10px;
.mat-select-value {
max-width: inherit;
@@ -481,18 +480,17 @@
}
.mat-chip {
+ max-width: 385px !important;
background-color: rgba(47, 174, 215, 0.2) !important;
color: #687e96;
- max-width: 385px !important;
}
.roles {
-
.selector-wrapper,
.selector-wrapper-edit {
.mat-select-trigger {
- width: 100%;
display: flex;
+ width: 100%;
max-width: 500px;
}
}
@@ -501,7 +499,7 @@
.audit {
.mat-select {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
.mat-select-value-text span {
color: unset !important;
@@ -510,100 +508,102 @@
}
.empty-checkbox {
+ position: relative;
min-width: 16px;
width: 16px;
height: 16px;
+ margin-top: 2px;
border-radius: 2px;
border: 2px solid lightgrey;
- margin-top: 2px;
- position: relative;
cursor: pointer;
&.checked {
border-color: #35afd5;
background-color: #35afd5;
}
+
.checked-checkbox {
+ position: absolute;
top: 0;
left: 4px;
width: 5px;
height: 10px;
border-bottom: 2px solid white;
border-right: 2px solid white;
- position: absolute;
transform: rotate(45deg);
}
.line-checkbox {
+ position: absolute;
top: 0;
left: 2px;
width: 8px;
height: 7px;
border-bottom: 2px solid white;
- position: absolute;
}
}
-.none-select{
+.none-select {
user-select: none;
}
-.action-select-wrapper{
+.action-select-wrapper {
position: relative;
display: block !important;
- .action-button-wrapper{
+ .action-button-wrapper {
position: relative;
width: 160px;
}
- .mat-raised-button.butt{
+ .mat-raised-button.butt {
margin-bottom: 0;
padding-left: 45px;
text-align: left;
-
- &.actions-btn{
+ &.actions-btn {
padding-right: 38px;
margin: 0;
- .material-icons{
- transition: ease-in-out 1s;
- font-size: 25px;
+ .material-icons {
position: absolute;
top: 7px;
right: 30px;
+ transition: ease-in-out 1s;
+ font-size: 25px;
}
}
}
- .action-menu{
+ .action-menu {
position: absolute;
- text-align: center;
display: block;
+ text-align: center;
background-color: #fff;
- &-item.mat-raised-button.butt{
+ &-item.mat-raised-button.butt {
+ position: relative;
z-index: 101;
- margin: 0;
- box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 0px 0px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
width: 160px;
padding: 0 20px;
+ margin: 0;
+ box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 0;
font-style: normal;
font-weight: 600;
font-size: 15px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
color: #577289;
- position: relative;
overflow: hidden;
line-height: 36px;
- &.action-menu-item{
- &:hover{
- color: #00bcd4;
+
+ &.action-menu-item {
+ &:hover {
+ color: #00bcd4;
background-color: #fafafa;
}
- &.disabled{
- &:hover{
+
+ &.disabled {
+ &:hover {
color: #577289;
}
}
@@ -619,7 +619,7 @@
}
.mat-step-label {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 300;
}
@@ -655,8 +655,8 @@
}
&.roles {
- height: 190px;
flex-direction: column;
+ height: 190px;
text-align: center;
.inner-step {
@@ -671,8 +671,8 @@
}
.multiple-select {
- border-bottom: 1px solid #dedbdb;
padding: 0 !important;
+ border-bottom: 1px solid #dedbdb;
a {
display: inline-block;
@@ -712,8 +712,8 @@
&.reporting {
.dropdown-multiselect {
button {
- font-size: 13px;
padding-left: 10px;
+ font-size: 13px;
}
}
}
@@ -739,20 +739,20 @@
padding: 0;
.content {
- color: #718ba6;
padding: 20px 40px;
+ margin: 0;
+ color: #718ba6;
font-size: 14px;
font-weight: 400;
text-align: center;
- margin: 0;
}
.dialog-header {
position: relative;
top: 0;
+ height: 54px;
padding-left: 30px;
background: #f6fafe;
- height: 54px;
line-height: 54px;
}
@@ -795,17 +795,17 @@
font-family: "Open Sans", sans-serif;
font-weight: 400;
- .mat-cell{
+ .mat-cell {
font-size: 13px;
}
.header-row,
- .mat-header-row{
+ .mat-header-row {
.mat-header-cell {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 13px;
- .label{
- font-family: 'Open Sans', sans-serif;
+ .label {
+ font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 13px;
}
@@ -814,7 +814,7 @@
.mat-cell {
word-break: break-all;
vertical-align: top;
- padding: 15px 5px 10px 5px;
+ padding: 15px 5px 10px;
font-size: 13px;
font-family: "Open Sans", sans-serif;
@@ -843,30 +843,33 @@
mat-progress-bar {
.mat-progress-bar-fill::after {
- background-color: #00BCD4;
+ background-color: #00bcd4;
}
.mat-progress-bar-buffer {
background-color: #baf0f7;
}
}
-.manage-roles{
- .mat-horizontal-content-container{
+.manage-roles {
+ .mat-horizontal-content-container {
overflow: visible !important;
}
}
-.filter-row-item, .label-header{
+.filter-row-item,
+.label-header {
box-shadow: inset 0 -1px 0 lightgrey;
border-bottom: none !important;
- multi-select-dropdown, .input-wrapper{
+
+ multi-select-dropdown,
+ .input-wrapper {
position: absolute;
top: 10px;
left: 5px;
right: 5px;
}
- .input-wrapper{
+ .input-wrapper {
left: 10px;
right: 4px;
}
@@ -883,27 +886,24 @@
fill: #36afd5;
}
-#range-picker .ng-daterangepicker,
- {
+#range-picker .ng-daterangepicker {
border: none;
border-radius: 0;
box-shadow: none;
}
#range-picker .ng-daterangepicker .calendar {
+ top: 58px;
z-index: 102;
border: 1px solid rgba(234, 234, 234, 0.64);
border-radius: 0;
- 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);
- top: 58px;
+ 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;
}
- &.is-opened{
+ &.is-opened {
display: flex;
}
}
@@ -922,8 +922,8 @@
#range-picker .ng-daterangepicker .calendar .side-container .side-button.is-active,
#range-picker .ng-daterangepicker .input-section .label-txt {
- color: #35afd5;
display: unset;
+ color: #35afd5;
font-size: 13px;
}
@@ -937,7 +937,6 @@
#range-picker .ng-daterangepicker .calendar .calendar-container .days .day-num:hover {
background: #35afd5;
background-clip: padding-box;
-
}
#range-picker .ng-daterangepicker .calendar .calendar-container .day-names,
@@ -951,7 +950,7 @@
}
#range-picker .ng-daterangepicker .calendar .calendar-container .day.is-within-range {
- background: #e9f8fc
+ background: #e9f8fc;
}
#range-picker .ng-daterangepicker .input-section .cal-icon svg path {
@@ -959,9 +958,9 @@
}
#range-picker .ng-daterangepicker .input-section .value-txt {
- color: #718ba6;
display: unset;
padding-left: 5px;
+ color: #718ba6;
}
#range-picker .ng-daterangepicker .input-section .value-txt.untouched,
@@ -978,9 +977,9 @@
//}
.filter-row .actions {
- text-align: right;
display: flex;
justify-content: flex-end;
+ text-align: right;
}
.filter-row .actions button {
@@ -1003,49 +1002,50 @@
}
#range-picker .ng-daterangepicker {
- height: 37px;
- width: 360px;
display: flex;
justify-content: space-between;
+ height: 37px;
+ width: 360px;
-
- .d-none{
+ .d-none {
display: none;
}
.input-section {
height: 37px;
- padding-right: 30px;
width: 175px;
- box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+ padding-right: 30px;
+ 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);
}
}
-.show-all-btn.mat-raised-button .mat-button-wrapper > *{
+.show-all-btn.mat-raised-button .mat-button-wrapper > * {
vertical-align: baseline;
}
.resource-btns {
- .mat-raised-button{
+ .mat-raised-button {
line-height: 38px;
}
- .mat-select-value{
+ .mat-select-value {
margin-top: 1px;
}
}
-.alert .highlight .strong{ color: #35afd5}
+.alert .highlight .strong {
+ color: #35afd5;
+}
.audit-table-wrapper,
-.billing-page-wrapper{
- tfoot{
+.billing-page-wrapper {
+ tfoot {
position: sticky;
z-index: 102;
bottom: 0;
}
- .dropdown-multiselect{
+ .dropdown-multiselect {
&.resources {
.list-menu {
.list-item {
@@ -1055,20 +1055,23 @@
}
}
}
-.configuration-wrapper{
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
- .mat-tab-header{
+.configuration-wrapper {
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+ 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+ 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+
+ .mat-tab-header {
margin: 0 30px;
}
- .mat-tab-label{
- .mat-tab-label-content{
+ .mat-tab-label {
+ .mat-tab-label-content {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 13px;
}
}
- .ace-monokai{
+ .ace-monokai {
height: calc(100%);
}
@@ -1076,13 +1079,7 @@
width: unset !important;
}
- .ace_scrollbar{
+ .ace_scrollbar {
scrollbar-width: thin;
}
}
-
-
-
-
-
-
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 efc6b3a..00a27bb 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -19,20 +19,20 @@
// @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
-@import './assets/fonts/Material_Icons/material-icons.css';
-@import './assets/fonts/Open_Sans/open-sans.css';
+@import "./assets/fonts/Material_Icons/material-icons.css";
+@import "./assets/fonts/Open_Sans/open-sans.css";
-@import '_reset.scss';
-@import '_general.scss';
-@import '_theme.scss';
-@import '_dialogs.scss';
+@import "_reset.scss";
+@import "_general.scss";
+@import "_theme.scss";
+@import "_dialogs.scss";
.sans {
- font-family: 'Open Sans', sans-serif !important;
+ font-family: "Open Sans", sans-serif !important;
}
.mat-tab-label {
- font-family: 'Open Sans', sans-serif !important;
+ font-family: "Open Sans", sans-serif !important;
color: #455c74;
}
@@ -61,13 +61,14 @@
height: calc(100% - 48px);
}
-
.mat-chip-list-wrap {
max-height: 120px;
- overflow: auto;
margin-right: 5px;
- .mat-chip-list-wrapper{
+ overflow: auto;
+
+ .mat-chip-list-wrapper {
margin: 0;
+
.mat-chip {
font-size: 13px;
}
@@ -75,10 +76,10 @@
}
mat-chip.mat-chip {
+ padding: 8px 18px;
outline: none;
color: #758ea8;
font-size: 14px;
- padding: 8px 18px;
}
mat-chip.mat-chip a {
@@ -97,17 +98,17 @@
}
.loader {
+ position: relative;
+ top: 28px;
+ width: 18px;
+ height: 18px;
+ margin-right: 15px;
+ float: right;
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #35afd5;
- width: 18px;
- height: 18px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
- position: relative;
- top: 28px;
- margin-right: 15px;
- float: right;
}
.rotate {
@@ -156,7 +157,7 @@
.deleted,
.invalid_version,
.invalid_name,
-.installation_error{
+.installation_error {
color: #f1696e;
}
@@ -172,13 +173,13 @@
pointer-events: none;
}
-.cursor-not-allow{
+.cursor-not-allow {
cursor: not-allowed !important;
}
.not-active {
cursor: not-allowed !important;
- opacity: .6;
+ opacity: 0.6;
}
.message {
@@ -187,22 +188,23 @@
}
.info {
+ position: relative;
font-size: 15px;
font-weight: 300;
color: #35afd5;
- position: relative;
- .buttons{
+
+ .buttons {
position: absolute;
}
}
.base-retreat {
+ display: inline-block;
height: 100%;
max-height: 100%;
width: 100%;
- box-sizing: border-box;
padding: 12px 15px;
- display: inline-block;
+ box-sizing: border-box;
}
.sub-nav {
@@ -246,21 +248,21 @@
}
.tooltip-wrap .tooltip {
- background: rgba(97, 97, 97, 0.9);
- bottom: 100%;
- color: #f3f3f3;
- display: block;
+ position: absolute;
left: -25px;
+ bottom: 100%;
+ display: block;
+ width: 100%;
margin-bottom: 5px;
- opacity: 0;
padding: 5px;
+ background: rgba(97, 97, 97, 0.9);
+ color: #f3f3f3;
+ opacity: 0;
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 2px;
font-size: 10px;
pointer-events: none;
- position: absolute;
- width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
@@ -289,8 +291,7 @@
}
/* IE can just show/hide with no transition */
-@media all and (-ms-high-contrast: none),
-(-ms-high-contrast: active) {
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.tooltip-wrap .tooltip {
display: none;
}
@@ -301,13 +302,13 @@
}
/* Turn off number input spinners */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
-input[type='number'] {
+input[type="number"] {
-moz-appearance: textfield;
}
@@ -320,19 +321,19 @@
text-align: right;
}
-.pl-5{
+.pl-5 {
padding-left: 5px;
}
-.pl-10{
+.pl-10 {
padding-left: 10px !important;
}
-.pl-20{
+.pl-20 {
padding-left: 20px;
}
-.pr-20{
+.pr-20 {
padding-right: 20px;
}
@@ -385,7 +386,7 @@
}
.ani {
- transition: all .35s ease-in-out;
+ transition: all 0.35s ease-in-out;
}
.empty-box {
@@ -399,7 +400,9 @@
text-align: center;
}
}
-#scrolling, .scrolling, ace_scrollbar{
+#scrolling,
+.scrolling,
+ace_scrollbar {
scrollbar-width: thin;
}
@@ -456,8 +459,8 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
@@ -474,27 +477,27 @@
.overlay-container {
#toast-container {
- >div {
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+ > div {
+ margin: 5px 0 15px;
+ padding: 12px 20px;
+ 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);
border-radius: 2px;
background-color: #fff;
- padding: 12px 20px;
overflow: inherit;
- margin: 5px 0 15px;
font-size: 14px;
&::before {
position: absolute;
left: -15px;
top: -15px;
- font-family: "Material Icons";
- background-color: #fff;
width: 30px;
height: 30px;
padding: 7px;
+ font-family: "Material Icons";
+ background-color: #fff;
box-sizing: border-box;
border-radius: 50%;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+ 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);
}
&.toast-success {
@@ -537,22 +540,23 @@
}
.dialog-max-width {
- margin: 0 auto;
max-width: 350px;
+ margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
.group-updated-tooltip {
- white-space: pre-line;
max-width: fit-content !important;
+ white-space: pre-line;
}
-.mat-tooltip-for-users, .mat-tooltip-description {
+.mat-tooltip-for-users,
+.mat-tooltip-description {
overflow-wrap: break-word;
}
