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:12 UTC
[incubator-dlab] branch DLAB-448 created (now 3626d5f)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DLAB-448
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.
at 3626d5f [DLAB-448] Added possibility of filtering list of installed libraries
This branch includes the following new commits:
new 3626d5f [DLAB-448] Added possibility of filtering list of installed libraries
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org
[incubator-dlab] 01/01: [DLAB-448] Added possibility of filtering
list of installed libraries
Posted by dg...@apache.org.
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