You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/09/25 14:48:52 UTC
[incubator-dlab] 01/08: [DLAB-472]: added filtering controls to
management grid
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch DLAB-1056
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit af3b90e03c58c544312f38c4b7b533fda5ce8476
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Tue Sep 24 16:52:39 2019 +0300
[DLAB-472]: added filtering controls to management grid
---
.../management-grid/management-grid.component.html | 59 ++++++++++++++++++++++
.../management-grid/management-grid.component.ts | 44 +++++++++++++++-
.../administration/management/management.model.ts | 27 ++++++++++
.../reporting-grid/reporting-grid.component.scss | 2 -
.../resources-grid/resources-grid.component.scss | 2 -
5 files changed, 128 insertions(+), 6 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 14c3b89..61350b8 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
@@ -115,6 +115,62 @@
</bubble-up>
</td>
</ng-container>
+
+
+ <!-- FILTERING -->
+ <ng-container matColumnDef="user-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef>
+ <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>
+ <input placeholder="Filter by environment type" type="text" class="form-control filter-field"
+ [value]="filterForm.type" (input)="filterForm.type = $event.target.value" />
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="project-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef>
+ <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
+ [items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="shape-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef>
+ <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>
+ <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>
+ <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>
+ <div class="actions">
+ <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()">
+ <i class="material-icons">close</i>
+ </button>
+
+ <button mat-icon-button class="btn apply" (click)="applyFilter(filterForm)"
+ [disabled]="allEnvironmentData?.length == 0 && !filtering">
+ <i class="material-icons"
+ [ngClass]="{'not-allowed': allEnvironmentData?.length == 0 && !filtering}">done</i>
+ </button>
+ </div>
+ </th>
+ </ng-container>
+
+
<ng-container matColumnDef="placeholder">
<td mat-footer-cell *matFooterCellDef colspan="6" class="info">
To start working, please, create new environment
@@ -122,8 +178,11 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <!-- [hidden]="!collapseFilterRow" -->
+ <tr mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true" class="filter-row"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
<tr [hidden]="allEnvironmentData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
</table>
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 49df128..b0735b6 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
@@ -22,10 +22,11 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
import { ToastrService } from 'ngx-toastr';
import { HealthStatusService } from '../../../core/services';
+import { SortUtils } from '../../../core/util';
import { ConfirmationDialogType } from '../../../shared';
import { ConfirmationDialogComponent } from '../../../shared/modal-dialog/confirmation-dialog';
import { EnvironmentsDataService } from '../management-data.service';
-import { EnvironmentModel } from '../management.model';
+import { EnvironmentModel, ManagementConfigModel } from '../management.model';
export interface ManageAction {
action: string;
@@ -45,6 +46,9 @@ export interface ManageAction {
export class ManagementGridComponent implements OnInit {
allEnvironmentData: Array<any>;
loading: boolean = false;
+ filterConfiguration: ManagementConfigModel = new ManagementConfigModel([], '', [], [], [], []);
+ filterForm: ManagementConfigModel = new ManagementConfigModel([], '', [], [], [], []);
+ filtering: boolean = false;
@Input() environmentsHealthStatuses: Array<any>;
@Input() resources: Array<any>;
@@ -54,6 +58,7 @@ export class ManagementGridComponent implements OnInit {
@Output() actionToggle: EventEmitter<ManageAction> = new EventEmitter();
displayedColumns: string[] = ['user', 'type', 'project', 'shape', 'status', 'resources', 'actions'];
+ displayedFilterColumns: string[] = ['user-filter', 'type-filter', 'project-filter', 'shape-filter', 'status-filter', 'resource-filter', 'actions-filter'];
constructor(
private healthStatusService: HealthStatusService,
@@ -63,13 +68,30 @@ export class ManagementGridComponent implements OnInit {
) { }
ngOnInit() {
- this.environmentsDataService._data.subscribe(data => this.allEnvironmentData = EnvironmentModel.loadEnvironments(data));
+ this.environmentsDataService._data.subscribe(data => {
+ this.allEnvironmentData = EnvironmentModel.loadEnvironments(data);
+ this.getDefaultFilterConfiguration(data);
+ });
}
buildGrid(): void {
this.refreshGrid.emit();
}
+ public onUpdate($event): void {
+ this.filterForm[$event.type] = $event.model;
+ }
+
+ public resetFilterConfigurations(): void {
+ this.filterForm.defaultConfigurations();
+ this.applyFilter(this.filterForm);
+ this.buildGrid();
+ }
+
+ public applyFilter(form) {
+ debugger;
+ }
+
toggleResourceAction(environment: any, action: string, resource?): void {
if (resource) {
const resource_name = resource ? resource.computational_name : environment.name;
@@ -125,6 +147,24 @@ export class ManagementGridComponent implements OnInit {
&& resource.status !== 'running'
&& resource.status !== 'stopped')).length > 0;
}
+
+ private getDefaultFilterConfiguration(data): void {
+ const users = [], projects = [], shapes = [], statuses = [], resources = [];
+
+ data && data.forEach((item: any) => {
+ if (item.user && users.indexOf(item.user) === -1) users.push(item.user);
+ 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);
+
+ item.computational_resources.map((resource: any) => {
+ if (resources.indexOf(resource.status) === -1) resources.push(resource.status);
+ resources.sort(SortUtils.statusSort);
+ });
+ });
+
+ this.filterConfiguration = new ManagementConfigModel(users, '', projects, shapes, statuses, resources);
+ }
}
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 dcc293c..86d553f 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
@@ -73,3 +73,30 @@ export interface GeneralEnvironmentStatus {
status: string;
projectAssigned: boolean;
}
+
+
+export class ManagementConfigModel {
+
+ static getDefault(): ManagementConfigModel {
+ return new ManagementConfigModel([], '', [], [], [], []);
+ }
+
+ constructor(
+ public users: Array<string>,
+ public type: string,
+ public projects: Array<string>,
+ public shapes: Array<string>,
+ public statuses: Array<string>,
+ public resources: Array<string>,
+
+ ) { }
+
+ defaultConfigurations(): void {
+ this.users = [];
+ this.type = '';
+ this.projects = [];
+ this.shapes = [];
+ this.statuses = [];
+ this.resources = [];
+ }
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
index 9bd8d16..4b18ec0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
@@ -114,8 +114,6 @@
}
}
-.no-data {}
-
@media screen and (max-width: 1280px) {
.dashboard_table.reporting {
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 6ca968e..bcc7579 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
@@ -282,10 +282,8 @@ tr.detail-row {
height: 16px;
display: inline-block;
text-align: center;
- /* margin-top: 2px; */
cursor: pointer;
position: absolute;
- top: 5px;
right: 15px;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org