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:19 UTC
[incubator-dlab] 01/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 33ec031d08f7b6a6ea4f46cf298a41c3358a1283
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Mon Jul 15 15:23:39 2019 +0300
[DLAB-867]: added filtering controls to resources list
---
.../resources-grid/resources-grid.component.html | 61 +++++++++++++++++++---
.../resources-grid/resources-grid.component.ts | 16 +++---
2 files changed, 61 insertions(+), 16 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 feba6d0..bdd30a7 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
@@ -24,19 +24,13 @@
<ng-container matColumnDef="project">
<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>
</ng-container>
-
-
<ng-container matColumnDef="expandedDetail">
-
<td mat-cell *matCellDef="let element" class="exploratory" [attr.colspan]="6"
[@detailExpand]="element == expandedElement || forse ? 'expanded' : 'collapsed'">
-
<tr *ngFor="let element of element.exploratory; let i = index" class="element-row mat-row">
<td class="name-col" (click)="printDetailEnvironmentModal(element)">{{ element.name }}</td>
<td class="status-col status" ngClass="{{ element.status.toLowerCase() || ''}}">
@@ -133,13 +127,63 @@
</td>
</ng-container>
+ <!-- FILTER START -->
+ <ng-container matColumnDef="name-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef>
+ <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>
+ <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>
+ <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>
+ <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>
+ </ng-container>
+
+ <ng-container matColumnDef="action-filter" stickyEnd>
+ <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_btnClick(filterForm)"
+ [disabled]="filteredEnvironments.length == 0 && !filtering">
+ <i class="material-icons"
+ [ngClass]="{'not-allowed': filteredEnvironments.length == 0 && !filtering}">done</i>
+ </button>
+ </div>
+ </th>
+ </ng-container>
+
+ <!-- FILTER END -->
+
<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">
</tr>
-
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
</table>
@@ -167,6 +211,9 @@
</th>
</tr>
+
+
+
<tr *ngIf="filteredEnvironments && collapseFilterRow" class="filter-row">
<td>
<input placeholder="Filter by environment name" type="text" class="form-control filter-field"
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 d1084eb..7bc9595 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
@@ -56,9 +56,6 @@ import { DICTIONARY } from '../../../dictionary/global.dictionary';
export class ResourcesGridComponent implements OnInit {
readonly DICTIONARY = DICTIONARY;
- // displayedColumns: string[] = ['name', 'status', 'shape', 'resources', 'cost', 'actions'];
- displayedFilterColumns: string[] = ['name-filter', 'user-filter', 'type-filter', 'status-filter', 'shape-filter', 'service-filter', 'actions'];
-
environments: Exploratory[];
forse: boolean = true;
@@ -76,15 +73,16 @@ export class ResourcesGridComponent implements OnInit {
healthStatus: GeneralEnvironmentStatus;
public filteringColumns: Array<any> = [
- { title: 'Environment name', name: 'name', class: 'name-col', filtering: {} },
- { title: 'Status', name: 'statuses', class: 'status-col', filtering: {} },
- { title: DICTIONARY.instance_size, name: 'shapes', class: 'shape-col', filtering: {} },
- { title: DICTIONARY.computational_resource, name: 'resources', class: 'resources-col', filtering: {} },
- { title: 'Cost', name: 'cost', class: 'cost-col' },
- { title: '', name: 'actions', class: 'actions-col' }
+ { 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' }
];
displayedColumns: string[] = this.filteringColumns.map(item => item.name);
+ displayedFilterColumns: string[] = this.filteringColumns.map(item => item.filter);
constructor(
public toastr: ToastrService,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org