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