This is an automated email from the ASF dual-hosted git repository. dgnatyshyn pushed a commit to branch DLAB-1874 in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 9b9d5a2134995cbd13b47a9243a2e0c10b75dc20 Author: Dmytro_Gnatyshyn <di1...@ukr.net> AuthorDate: Tue Jun 16 17:28:48 2020 +0300 [DLAB-1874]: Fixed set of tasks for 'Environment management' page --- .../management-grid/management-grid.component.html | 21 ++++++++++++++++++--- .../management-grid/management-grid.component.scss | 8 ++++---- .../management-grid/management-grid.component.ts | 11 +++++++---- .../management/management.component.ts | 11 +++++------ .../computational-resources-list.component.scss | 2 +- .../resources-grid/resources-grid.component.html | 4 ++-- .../resources-grid/resources-grid.component.scss | 14 ++++++++++++++ .../resources/webapp/src/assets/styles/_theme.scss | 4 ++++ 8 files changed, 55 insertions(+), 20 deletions(-) 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 88b005c..02d9012 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 @@ -21,7 +21,11 @@ <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6"> <ng-container matColumnDef="checkbox"> <th mat-header-cell *matHeaderCellDef class="checkbox label-header"> - <div class="empty-checkbox header-checkbox" [ngClass]="{'checked': selected?.length === allActiveNotebooks?.length}" (click)="toggleSelectionAll();$event.stopPropagation()" > + <div class="empty-checkbox header-checkbox" + *ngIf="allActiveNotebooks?.length>0" + [ngClass]="{'checked': selected?.length === allActiveNotebooks?.length}" + (click)="toggleSelectionAll();$event.stopPropagation()" + > <span class="checked-checkbox" *ngIf="selected?.length === allActiveNotebooks?.length"></span> </div> <button mat-icon-button aria-label="More" class="ar checkbox-border" (click)="toggleFilterRow()"> @@ -32,7 +36,12 @@ </button> </th> <td mat-cell *matCellDef="let element"> - <div *ngIf="element.type !== 'edge node' && (element.status==='running' || element.status==='stopped')" class="empty-checkbox" [ngClass]="{'checked': element.isSelected}" (click)="toggleActionForAll(element);$event.stopPropagation()" > + <div + *ngIf="element.type !== 'edge node' && (element.status==='running' || element.status==='stopped')" + class="empty-checkbox" + [ngClass]="{'checked': element.isSelected}" + (click)="toggleActionForAll(element);$event.stopPropagation()" + > <span class="checked-checkbox" *ngIf="element.isSelected"></span> </div> </td> @@ -80,7 +89,13 @@ </i> </button> </th> <td type mat-cell *matCellDef="let element"> - <span *ngIf="element.name" class="computation" (click)="openNotebookDetails(element)">{{element.name}}</span> + <span + *ngIf="element.name" + [ngClass]="{'computation': element.exploratory_urls?.length}" + (click)="openNotebookDetails(element)" + > + {{element.name}} + </span> <span *ngIf="!element.name">{{element.type}}</span> </td> </ng-container> 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 99fde37..548451e 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 @@ -21,11 +21,10 @@ &.management { .mat-column-checkbox{ padding-left: 10px; - padding-right: 10px; + padding-right: 0px; + min-width: 68px; &.label-header{ - width: 65px; - display: flex; - align-items: center; + } } @@ -130,4 +129,5 @@ table.management { .computation{ cursor: pointer; + color: #35afd5; } 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 38e4590..cb1c283 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 @@ -124,7 +124,6 @@ export class ManagementGridComponent implements OnInit { if (filteredData.length) this.filtering = true; 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; @@ -208,7 +207,7 @@ export class ManagementGridComponent implements OnInit { return; } this.dialog.open(DetailDialogComponent, { data: - {notebook: data, bucketStatus: {view: true, upload: true, download: true, delete: true}, buckets: [], type: 'environment'}, + {notebook: data, buckets: [], type: 'environment'}, panelClass: 'modal-lg' }) .afterClosed().subscribe(() => {}); @@ -251,7 +250,7 @@ export class ManagementGridComponent implements OnInit { <div class="resource-name">Notebook</div> <div class="clusters-list"> <div class="clusters-list-item"> - <div class="cluster">Cluster</div> + <div class="cluster"><span *ngIf="isClusterLength">Cluster</span></div> <div class="status">Further status</div> </div> </div> @@ -304,7 +303,7 @@ export class ManagementGridComponent implements OnInit { header a:hover i { color: #35afd5; cursor: pointer; } .plur { font-style: normal; } .scrolling-content{overflow-y: auto; max-height: 200px; } - .cluster { width: 50%; text-align: left; color: #577289;} + .cluster { width: 50%; text-align: left;} .status { width: 50%;text-align: left;} .label { font-size: 15px; font-weight: 500; font-family: "Open Sans",sans-serif;} .node { font-weight: 300;} @@ -325,6 +324,7 @@ export class ManagementGridComponent implements OnInit { export class ReconfirmationDialogComponent { private notebooks; + private isClusterLength; constructor( public dialogRef: MatDialogRef<ReconfirmationDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any @@ -333,6 +333,9 @@ export class ReconfirmationDialogComponent { this.notebooks = JSON.parse(JSON.stringify(data.notebooks)); this.notebooks = this.notebooks.map(notebook => { notebook.resources = notebook.resources.filter(res => res.status !== 'terminated' && res.status.slice(0, 4) !== data.action); + if (notebook.resources.length) { + this.isClusterLength = true; + } return notebook; }); } 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 3062a07..ed66061 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 @@ -216,16 +216,15 @@ export class ManagementComponent implements OnInit { if (res) { notebooks.forEach((env) => { this.manageEnvironmentsService.environmentManagement(env.user, 'stop', env.project, env.name) - .subscribe( - response => { - console.log(response); + .subscribe(response => { this.buildGrid(); }, error => console.log(error) ); }); + this.clearSelection(); } - this.clearSelection(); + this.isActionsOpen = false; }); } else if (action === 'terminate') { this.dialog.open(ReconfirmationDialogComponent, { @@ -237,13 +236,13 @@ export class ManagementComponent implements OnInit { .subscribe( response => { this.buildGrid(); - }, error => console.log(error) ); }); + this.clearSelection(); } - this.clearSelection(); + this.isActionsOpen = false; }); // } else if (action === 'run') { // this.healthStatusService.runEdgeNode().subscribe(() => { 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 a4b825e..87126a4 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 @@ -37,7 +37,7 @@ padding-left: 10px; .detailed-link { - color: #577289; + color: #35afd5; cursor: pointer; } } 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 69edcc3..0d46d0f 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 @@ -22,7 +22,7 @@ class="data-grid resources mat-elevation-z6"> <ng-container matColumnDef="project"> - <td mat-cell *matCellDef="let element" [attr.colspan]="8" class="highlight"> {{ element.project }} </td> + <td mat-cell *matCellDef="let element" [attr.colspan]="8" class="project-name"> {{ element.project }} </td> </ng-container> <!-- <ng-container *ngFor="let column of filteringColumns; let i = index" matColumnDef="{{ column.name }}" @@ -105,7 +105,7 @@ [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" sticky> <tr *ngFor="let element of element.exploratory; let i = index" class="element-row mat-row"> - <td class="name-col" (click)="printDetailEnvironmentModal(element)"> + <td class="name-col highlight" (click)="printDetailEnvironmentModal(element)"> <span matTooltip="{{ element.name }}" matTooltipPosition="above">{{ element.name }}</span> </td> <td class="status-col status" ngClass="{{ element.status.toLowerCase() || ''}}"> 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 d8a6f0b..c0f0a6f 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 @@ -95,11 +95,19 @@ table { padding-right: 5px; padding-left: 24px; background-color: inherit; + &.notebook-name{ + + } .label{ padding-top: 14px; } } + .project-name{ + font-weight: 600; + color: #577289; + } + .status-col, .shape-col { width: 15%; @@ -107,6 +115,12 @@ table { padding-top: 14px; } } + .shape-col{ + color: #577289; + .label{ + color: rgba(0,0,0,.54); + } + } .tag-col { width: 13%; 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 bf3529d..48217e9 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 @@ -442,6 +442,10 @@ span.mat-slide-toggle-content { margin-top: 2px; position: relative; cursor: pointer; + &.header-checkbox{ + margin-top: 13px; + float: left; + } &.checked { border-color: #35afd5; background-color: #35afd5; --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org