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/07/16 14:21:20 UTC
[incubator-dlab] 02/05: [DLAB-867]: added filtering controls to
resources list
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch feature/projects
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 51033ac9d2fbf8a006e94822bc7171a4bd9657f0
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Tue Jul 16 14:46:30 2019 +0300
[DLAB-867]: added filtering controls to resources list
---
.../resources-grid/resources-grid.component.html | 21 +++++---
.../resources-grid/resources-grid.component.scss | 16 ++++++
.../resources-grid/resources-grid.component.ts | 59 ++++++++++++----------
3 files changed, 62 insertions(+), 34 deletions(-)
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 bdd30a7..62c1022 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
@@ -25,7 +25,15 @@
<td mat-cell *matCellDef="let element" [attr.colspan]="6" class="highlight"> {{ element.project }} </td>
</ng-container>
<ng-container *ngFor="let column of filteringColumns; let i = index" matColumnDef="{{ column.name }}">
- <th mat-header-cell *matHeaderCellDef ngClass="{{ column.class }}"> {{ column.title }} </th>
+ <th mat-header-cell *matHeaderCellDef ngClass="{{ column.class }}">
+ <span class="label">{{ column.title }}</span>
+ <button mat-icon-button *ngIf="column.filtering" aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">more_vert</span>
+ </i>
+ </button>
+ </th>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" class="exploratory" [attr.colspan]="6"
@@ -129,32 +137,32 @@
<!-- FILTER START -->
<ng-container matColumnDef="name-filter" sticky>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="name-col">
<input placeholder="Filter by environment name" type="text" class="form-control filter-field"
[value]="filterForm.name" (input)="filterForm.name = $event.target.value" />
</th>
</ng-container>
<ng-container matColumnDef="status-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="status-col">
<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>
+ <th mat-header-cell *matHeaderCellDef class="shape-col">
<multi-select-dropdown (selectionChange)="onUpdate($event)"
[type]="DICTIONARY.cloud_provider === 'aws' ? 'shapes': 'sizes'" [items]="filterConfiguration.shapes"
[model]="filterForm.shapes"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="resource-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="resources-col">
<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>
+ <th mat-header-cell *matHeaderCellDef class="cost-col">
</th>
</ng-container>
@@ -180,6 +188,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns" class="header-row"></tr>
<tr 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"
(click)="expandedElement = expandedElement === element ? null : 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 c40c2cd..cf2d788 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
@@ -24,6 +24,13 @@
table {
width: 100%;
+ .header-row {
+ .label {
+ display: inline-block;
+ padding-top: 10px;
+ }
+ }
+
.exploratory {
padding: 0;
@@ -35,6 +42,11 @@ table {
border-bottom: 1px solid #d9d9d9;
}
}
+
+ }
+
+ .filter-row {
+ height: 0 !important;
}
.name-col {
@@ -44,19 +56,23 @@ table {
.status-col {
width: 16%;
+ padding: 5px;
}
.shape-col {
width: 16%;
+ padding: 5px;
}
.resources-col {
width: 30%;
+ padding: 5px;
}
.cost-col {
width: 10%;
text-align: center;
+
}
.actions-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 7bc9595..a7f868e 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
@@ -63,7 +63,7 @@ export class ResourcesGridComponent implements OnInit {
filteredEnvironments: Exploratory[] = [];
- filterConfiguration: FilterConfigurationModel;
+ filterConfiguration: FilterConfigurationModel = new FilterConfigurationModel('', [], [], [], '');
filterForm: FilterConfigurationModel = new FilterConfigurationModel('', [], [], [], '');
isOutscreenDropdown: boolean;
@@ -73,16 +73,16 @@ export class ResourcesGridComponent implements OnInit {
healthStatus: GeneralEnvironmentStatus;
public filteringColumns: Array<any> = [
- { title: 'Environment name', name: 'name', class: 'name-col', filter: 'name-filter' },
- { title: 'Status', name: 'statuses', class: 'status-col', filter: 'status-filter' },
- { title: DICTIONARY.instance_size, name: 'shapes', class: 'shape-col', filter: 'shape-filter' },
- { title: DICTIONARY.computational_resource, name: 'resources', class: 'resources-col', filter: 'resource-filter' },
- { title: 'Cost', name: 'cost', class: 'cost-col', filter: 'cost-filter' },
- { title: '', name: 'actions', class: 'actions-col', filter: 'action-filter' }
+ { 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 },
+ { title: DICTIONARY.instance_size, name: 'shapes', class: 'shape-col', filter_class: 'shape-filter', filtering: true },
+ { title: DICTIONARY.computational_resource, name: 'resources', class: 'resources-col', filter_class: 'resource-filter', filtering: true },
+ { title: 'Cost', name: 'cost', class: 'cost-col', filter_class: 'cost-filter', filtering: false },
+ { title: '', name: 'actions', class: 'actions-col', filter_class: 'action-filter', filtering: false }
];
displayedColumns: string[] = this.filteringColumns.map(item => item.name);
- displayedFilterColumns: string[] = this.filteringColumns.map(item => item.filter);
+ displayedFilterColumns: string[] = this.filteringColumns.map(item => item.filter_class);
constructor(
public toastr: ToastrService,
@@ -92,7 +92,6 @@ export class ResourcesGridComponent implements OnInit {
ngOnInit(): void {
this.buildGrid();
- debugger;
}
public buildGrid(): void {
@@ -104,35 +103,35 @@ export class ResourcesGridComponent implements OnInit {
});
}
+ public toggleFilterRow(): void {
+ this.collapseFilterRow = !this.collapseFilterRow;
+ }
-
- toggleFilterRow(): void {
- this.collapseFilterRow = !this.collapseFilterRow;
- }
-
getDefaultFilterConfiguration(): void {
- // const data: Exploratory[] = this.environments;
+ const data: Exploratory[] = this.environments;
const shapes = [], statuses = [], resources = [];
- // data.forEach((item: any) => {
- // if (shapes.indexOf(item.shape) === -1)
- // shapes.push(item.shape);
- // if (statuses.indexOf(item.status) === -1)
- // statuses.push(item.status);
- // statuses.sort(SortUtil.statusSort);
-
- // item.resources.forEach((resource: any) => {
- // if (resources.indexOf(resource.status) === -1)
- // resources.push(resource.status);
- // resources.sort(SortUtil.statusSort);
- // });
- // });
+ data.filter(elem => elem.exploratory.forEach((item: any) => {
+ if (shapes.indexOf(item.shape) === -1)
+ shapes.push(item.shape);
+ if (statuses.indexOf(item.status) === -1)
+ statuses.push(item.status);
+ statuses.sort(SortUtils.statusSort);
+
+ item.resources.forEach((resource: any) => {
+ if (resources.indexOf(resource.status) === -1)
+ resources.push(resource.status);
+ resources.sort(SortUtils.statusSort);
+ });
+ }));
this.filterConfiguration = new FilterConfigurationModel('', statuses, shapes, resources, '');
+
+ debugger;
}
applyFilter_btnClick(config: FilterConfigurationModel) {
@@ -298,4 +297,8 @@ export class ResourcesGridComponent implements OnInit {
.afterClosed().subscribe(() => this.buildGrid());
}
}
+
+
+
+
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org