You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2019/12/06 13:15:13 UTC
[incubator-dlab] 01/01: [DLAB-448] Added possibility of filtering
list of installed libraries
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-448
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 3626d5f355712b3b6aa66bc79366a70e8be442fe
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Dec 6 15:14:49 2019 +0200
[DLAB-448] Added possibility of filtering list of installed libraries
---
.../install-libraries/filter-libs.model.ts | 36 ++++++++
.../install-libraries.component.html | 97 ++++++++++++++++++++--
.../install-libraries.component.scss | 35 +++++++-
.../install-libraries.component.ts | 35 ++++++++
4 files changed, 194 insertions(+), 9 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/filter-libs.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/filter-libs.model.ts
new file mode 100644
index 0000000..4d211cc
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/filter-libs.model.ts
@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export class FilterLibsModel {
+ constructor(
+ public name: string,
+ public group: Array<any>,
+ public resource: Array<any>,
+ public resourceType: Array<any>,
+ public status: Array<any>,
+ ) { }
+
+ resetFilterLibs(): void {
+ this.name = '';
+ this.group = [];
+ this.resource = [];
+ this.resourceType = [];
+ this.status = [];
+ }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
index b015ab8..c8e02b3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
@@ -101,19 +101,106 @@
<div class="libs-info">
<mat-list>
<mat-list-item class="list-header">
- <div class="lib-name">Name</div>
- <div class="lib-group">Group</div>
- <div class="lib-destination">Destination</div>
- <div class="lib-resource-type">Resource type</div>
+ <div class="lib-name">Name
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtered> 0 ">filter_list</span>
+ <span [hidden]="filtered> 0 ">more_vert</span>
+ </i>
+ </button></div>
+ <div class="lib-group">Group
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtered> 0 ">filter_list</span>
+ <span [hidden]="filtered> 0 ">more_vert</span>
+ </i>
+ </button>
+ </div>
+ <div class="lib-destination">Destination
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtered> 0 ">filter_list</span>
+ <span [hidden]="filtered> 0 ">more_vert</span>
+ </i>
+ </button>
+ </div>
+ <div class="lib-resource-type">Resource type
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtered> 0 ">filter_list</span>
+ <span [hidden]="filtered> 0 ">more_vert</span>
+ </i>
+ </button>
+ </div>
<div class="lib-status">Status</div>
+
+
</mat-list-item>
+
+ <ng-container *ngIf="filtered" >
+ <mat-list-item class="list-header lib-col">
+ <th class="lib-name">
+ <input [value]="filterModel.name" (input)="filterModel.name = $event.target.value" type="text" class="form-control filter-field"/>
+ </th>
+ <th class="lib-group lib-col">
+ <multi-select-dropdown
+ [items]="this.filterConfiguration.group"
+ [type]="'group'"
+ [model]="this.filterModel.group"
+ >
+ </multi-select-dropdown>
+ </th>
+ <th class="lib-destination lib-col">
+ <multi-select-dropdown
+ [items]="this.filterConfiguration.resource"
+ [type]="'resource'"
+ [model]="this.filterModel.resource"
+ >
+ </multi-select-dropdown>
+ </th>
+ <th class="lib-resource-type lib-col">
+ <multi-select-dropdown
+ [items]="this.filterConfiguration.resourceType"
+ [type]="'resourceType'"
+ [model]="this.filterModel.resourceType"
+ >
+ </multi-select-dropdown>
+ </th>
+ <th class="lib-status lib-col">
+ <multi-select-dropdown [items]="this.filterConfiguration.status"
+ [type]="'status'"
+ [model]="this.filterModel.status">
+
+ </multi-select-dropdown>
+ </th>
+ <ng-container matColumnDef="action-filter" stickyEnd>
+ <th mat-header-cell>
+ <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)="filterData()">
+ <!-- [disabled]="filteredEnvironments.length == 0 && !filtering">-->
+ <i class="material-icons">done</i>
+ <!-- [ngClass]="{'not-allowed': filteredEnvironments.length == 0 && !filtering}"-->
+ </button>
+ </div>
+ </th>
+ </ng-container>
+ </mat-list-item>
+ </ng-container>
+
+
+
+
<div class="scrollingList" id="scrolling" *ngIf="notebookLibs?.length">
<div *ngIf="notebook?.status !== 'running' && notebookFailedLibs.length > 0" class="info message">
<p>Cannot retry to reinstall failed libraries: Exploratory {{ notebook?.name }} is not running</p>
</div>
- <mat-list-item *ngFor="let lib of notebookLibs">
+ <mat-list-item *ngFor="let lib of filtredNotebookLibs">
<div class="lib-name">
<strong>{{ lib.name }}</strong>
<span *ngIf="lib.version && lib.version !== 'N/A'">v.{{ lib.version }}</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
index 3d033de..76a7de3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
@@ -266,7 +266,9 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
}
}
-
+ .lib-col{
+ padding: 0 3px;
+ }
.lib-name {
width: 30%;
@@ -277,16 +279,16 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.lib-group,
.lib-destination {
- width: 20%;
+ width: 15%;
}
.lib-status {
- width: 20%;
+ width: 15%;
text-align: center;
}
.lib-resource-type {
- width: 10%;
+ width: 15%;
}
.st-group {
@@ -349,6 +351,31 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
background-color: #35afd5;
}
+.dropdown-multiselect button span {
+ padding: 5px;
+}
+
+.mat-dialog-container.mat-dialog-container #dialog-box {
+ .mat-header-cell{
+ padding: 0;
+ border: none;
+ }
+ .actions {
+ display: flex;
+
+ .btn {
+ padding: 6px;
+ height: auto;
+ width: auto;
+ min-width: 0;
+
+ .mat-button-wrapper {
+ display: flex;
+ }
+ }
+ }
+}
+
@media screen and (min-width: 1281px) {
.libs-info {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
index 917fcbb..e777205 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts
@@ -27,6 +27,7 @@ import { debounceTime } from 'rxjs/operators';
import { InstallLibrariesModel } from './install-libraries.model';
import { LibrariesInstallationService } from '../../../core/services';
import { SortUtils, HTTP_STATUS_CODES } from '../../../core/util';
+import {FilterLibsModel} from "./filter-libs.model";
@Component({
@@ -68,6 +69,12 @@ export class InstallLibrariesComponent implements OnInit {
private clear: number;
private clearCheckInstalling = undefined;
+ public filterConfiguration: FilterLibsModel = new FilterLibsModel('',[],[],[],[]);
+ public filterModel: FilterLibsModel = new FilterLibsModel('', [], [], [],[]);
+ public filtered: boolean;
+
+ public filtredNotebookLibs:any;
+
@ViewChild('groupSelect', { static: false }) group_select;
@ViewChild('resourceSelect', { static: false }) resource_select;
@@ -233,7 +240,12 @@ export class InstallLibrariesComponent implements OnInit {
this.model.getInstalledLibrariesList(this.notebook)
.subscribe((data: any) => {
this.notebookLibs = data ? data : [];
+ this.filtredNotebookLibs = [...this.notebookLibs];
this.changeDetector.markForCheck();
+ this.filterConfiguration.group = this.notebookLibs.map(v=>v.group).filter((v,i,arr)=>arr.indexOf(v) === i);
+ this.filterConfiguration.resource = this.notebookLibs.map(v=>v.status[0].resource).filter((v,i,arr)=> arr.indexOf(v) === i);
+ this.filterConfiguration.resourceType = this.notebookLibs.map(v=>v.status[0].resourceType).filter((v,i,arr)=>arr.indexOf(v) === i);
+ this.filterConfiguration.status = this.notebookLibs.map(v=>v.status[0].status).filter((v,i,arr)=>arr.indexOf(v) === i);
this.isInstallingInProgress(this.notebookLibs);
});
}
@@ -300,6 +312,29 @@ export class InstallLibrariesComponent implements OnInit {
this.clearCheckInstalling = undefined;
this.selectorsReset();
}
+
+ public toggleFilterRow (){
+ this.filtered = !this.filtered
+ }
+ public filterData(){
+ this.filtredNotebookLibs = this.notebookLibs.filter(lib => {
+ const isName = this.filterModel.name ? lib.name.toLowerCase().indexOf(this.filterModel.name.toLowerCase().trim()) !== -1 : true;
+ const isGroup = this.filterModel.group.length ? this.filterModel.group.includes(lib.group) : true;
+ const isResource = this.filterModel.resource.length ? this.filterModel.resource.includes(lib.status[0].resource) : true;
+ const isResourceType = this.filterModel.resourceType.length ? this.filterModel.resourceType.includes(lib.status[0].resourceType) : true;
+ const isStatus = this.filterModel.status.length ? this.filterModel.status.includes(lib.status[0].status) : true;
+
+ return isName && isGroup && isResource && isResourceType && isStatus;
+ });
+ console.log(this.filterModel);
+ }
+
+ public resetFilterConfigurations() {
+ this.filtredNotebookLibs = [...this.notebookLibs];
+ this.filterModel.resetFilterLibs();
+ }
+
+
}
@Component({
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org