You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by yt...@apache.org on 2021/07/20 11:09:45 UTC
[incubator-datalab] 01/01: [DATALAB-2463] added gpu type/count for
filtering on List of resources and Environment management pages
This is an automated email from the ASF dual-hosted git repository.
ytykhun pushed a commit to branch DATALAB-2463
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 71fd20b6c09d9d5dd17047545b29ec2c505c8e03
Author: Yurii Tykhun <ty...@gmail.com>
AuthorDate: Tue Jul 20 14:09:08 2021 +0300
[DATALAB-2463] added gpu type/count for filtering on List of resources and Environment management pages
---
.../management/management-grid/management-grid.component.ts | 12 +++++++++---
.../resources/resources-grid/resources-grid.component.html | 4 ++--
.../resources/resources-grid/resources-grid.component.scss | 7 ++++---
.../app/resources/resources-grid/resources-grid.component.ts | 12 +++++++++---
.../src/app/resources/resources-grid/resources-grid.model.ts | 4 +++-
5 files changed, 27 insertions(+), 12 deletions(-)
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 2321183..7871156 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
@@ -194,7 +194,10 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView
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) : true;
+ 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;
@@ -249,7 +252,8 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView
}
private getDefaultFilterConfiguration(data): void {
- const users = [], projects = [], shapes = [], statuses = [], resources = [], endpoints = [];
+ 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);
@@ -257,6 +261,8 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView
if (item.status && statuses.indexOf(item.status.toLowerCase()) === -1) statuses.push(item.status.toLowerCase());
if (item.project && projects.indexOf(item.project) === -1) projects.push(item.project);
if (item.shape && shapes.indexOf(item.shape) === -1) shapes.push(item.shape);
+ 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);
@@ -265,7 +271,7 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView
}
});
- this.filterConfiguration = new ManagementConfigModel(users, '', projects, shapes, statuses, resources, endpoints);
+ this.filterConfiguration = new ManagementConfigModel(users, '', projects, [...shapes, ...gpuTypes, ...gpuCounts], statuses, resources, endpoints);
}
public openNotebookDetails(data) {
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 026dccd..36b20e7 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
@@ -63,7 +63,7 @@
</ng-container>
<ng-container matColumnDef="shapes">
<th mat-header-cell *matHeaderCellDef class="shape-col label-header">
- <span class="label"> Size </span>
+ <span class="label"> Shape </span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
<span *ngIf="filtering && filterForm.shapes.length > 0 && !collapseFilterRow">filter_list</span>
@@ -324,7 +324,7 @@
<ng-container matColumnDef="shape-filter">
<th mat-header-cell *matHeaderCellDef class="shape-col filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)"
- [type]="'sizes'" [items]="filterConfiguration.shapes"
+ [type]="'shapes'" [items]="filterConfiguration.shapes"
[model]="filterForm.shapes"></multi-select-dropdown>
</th>
</ng-container>
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 3b01abe..5c7e81b 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
@@ -139,11 +139,12 @@ table.resources {
}
- .status-col,
- .shape-col {
+ .status-col {
width: 11%;
}
+
.shape-col{
+ width: 13%;
color: #577289;
.label{
color: $table-header-color;
@@ -166,7 +167,7 @@ table.resources {
}
.resources-col {
- width: 30%;
+ width: 28%;
}
.cost-col {
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 3447d75..e0c8552 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
@@ -327,10 +327,13 @@ export class ResourcesGridComponent implements OnInit {
private getDefaultFilterConfiguration(): void {
const data = this.environments;
- const shapes = [], statuses = [], resources = [];
+ const shapes = [], statuses = [], resources = [],
+ gpuTypes = [], gpuCounts = [];
data.filter(elem => elem.exploratory.map((item: any) => {
if (shapes.indexOf(item.shape) === -1) shapes.push(item.shape);
+ 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 (statuses.indexOf(item.status) === -1) statuses.push(item.status);
statuses.sort(SortUtils.statusSort);
@@ -340,7 +343,7 @@ export class ResourcesGridComponent implements OnInit {
});
}));
- this.filterConfiguration = new FilterConfigurationModel('', statuses, shapes, resources, '', '');
+ this.filterConfiguration = new FilterConfigurationModel('', statuses, [...shapes, ...gpuTypes, ...gpuCounts], resources, '', '');
}
public applyFilter_btnClick(config: FilterConfigurationModel): void {
@@ -366,7 +369,10 @@ export class ResourcesGridComponent implements OnInit {
const isName = item.name.toLowerCase().indexOf(config.name.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) : true;
+ 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 modifiedResources = containsStatus(item.resources, config.resources);
let isResources = config.resources.length > 0 ? (modifiedResources.length > 0) : true;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
index 4da8818..8c8d8d7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
@@ -93,7 +93,9 @@ export class ExploratoryModel {
el.endpoint,
el.tags,
value.shared[el.endpoint].status,
- !!el.computational_resources.filter(resource => resource.status !== 'terminated' && resource.status !== 'failed').length
+ !!el.computational_resources.filter(resource => resource.status !== 'terminated' && resource.status !== 'failed').length,
+ el.gpu_type,
+ el.gpu_count
);
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org