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 <andriana_kovalys...@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-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org