From: Tiago Melo Date: Thu, 28 May 2020 20:18:55 +0000 (+0000) Subject: mgr/dashboard: Use ng-bootstrap for Typeahead X-Git-Tag: v16.1.0~2159^2 X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=bf41ddae0701b049273485c3979c728a247773ab;p=ceph.git mgr/dashboard: Use ng-bootstrap for Typeahead Removed semicolon tslint rule, since it was conflicting with prettier. Fixes: https://tracker.ceph.com/issues/45756 Signed-off-by: Tiago Melo --- diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json index 16e7f4d296c8..57b383da505e 100644 --- a/src/pybind/mgr/dashboard/frontend/package-lock.json +++ b/src/pybind/mgr/dashboard/frontend/package-lock.json @@ -2287,6 +2287,11 @@ "glob-to-regexp": "^0.3.0" } }, + "@ng-bootstrap/ng-bootstrap": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-6.1.0.tgz", + "integrity": "sha512-2GzkNJBKdeHkaUqaCAqSILPft0IzzHjMfAlAuGY6/ZLlVQ0glt5MTbIXtIhSbjR+OvlrljoXFLrvzs1LGdmE+A==" + }, "@ngtools/webpack": { "version": "9.1.5", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.5.tgz", @@ -7613,11 +7618,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, - "fsevents": { - "dev": true, - "optional": true, - "version": "2.1.2" - }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json index 432905b5c9e0..3e30c38c170f 100644 --- a/src/pybind/mgr/dashboard/frontend/package.json +++ b/src/pybind/mgr/dashboard/frontend/package.json @@ -75,6 +75,7 @@ "@angular/platform-browser-dynamic": "9.1.6", "@angular/router": "9.1.6", "@auth0/angular-jwt": "2.1.1", + "@ng-bootstrap/ng-bootstrap": "6.1.0", "@ngx-translate/i18n-polyfill": "1.0.0", "@swimlane/ngx-datatable": "17.0.0", "@types/file-saver": "2.0.1", diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts index 5eb59c9e7f54..3bc76953b81c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { TreeModule } from 'angular-tree-component'; import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation'; import { AlertModule } from 'ngx-bootstrap/alert'; @@ -12,7 +13,6 @@ import { ModalModule } from 'ngx-bootstrap/modal'; import { TabsModule } from 'ngx-bootstrap/tabs'; import { TimepickerModule } from 'ngx-bootstrap/timepicker'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; -import { TypeaheadModule } from 'ngx-bootstrap/typeahead'; import { OrchestratorDocModalComponent } from '../../shared/components/orchestrator-doc-modal/orchestrator-doc-modal.component'; import { SharedModule } from '../../shared/shared.module'; @@ -81,7 +81,7 @@ import { TelemetryComponent } from './telemetry/telemetry.component'; AlertModule.forRoot(), TooltipModule.forRoot(), MgrModulesModule, - TypeaheadModule.forRoot(), + NgbTypeaheadModule, TimepickerModule.forRoot(), TreeModule.forRoot(), BsDatepickerModule.forRoot(), diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html index e6e4764b73ff..9285f3ff2b1d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html @@ -40,8 +40,7 @@ { imports: [ HttpClientTestingModule, SharedModule, - TypeaheadModule.forRoot(), + NgbTypeaheadModule, RouterTestingModule, ReactiveFormsModule ], diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts index 139a3ee23a87..9621b4acaa67 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts @@ -3,6 +3,8 @@ import { FormControl, Validators } from '@angular/forms'; import * as _ from 'lodash'; import { BsModalRef } from 'ngx-bootstrap/modal'; +import { Observable } from 'rxjs'; +import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'; import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder'; import { CdFormGroup } from '../../../../shared/forms/cd-form-group'; @@ -76,4 +78,16 @@ export class SilenceMatcherModalComponent { this.submitAction.emit(this.form.value); this.bsModalRef.hide(); } + + search = (text$: Observable) => { + return text$.pipe( + debounceTime(200), + distinctUntilChanged(), + map((term) => + this.possibleValues + .filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1) + .slice(0, 10) + ) + ); + }; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html index f351ea9f059c..df48700c607a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html @@ -246,8 +246,8 @@ name="path" id="path" formControlName="path" - [typeahead]="pathDataSource" - (typeaheadOnSelect)="pathChangeHandler()" + [ngbTypeahead]="pathDataSource" + (selectItem)="pathChangeHandler()" (blur)="pathChangeHandler()"> { RouterTestingModule, SharedModule, ToastrModule.forRoot(), - TypeaheadModule.forRoot() + NgbTypeaheadModule ], providers: [ { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts index 0df8b002be6c..4cf1c39adbce 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts @@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { I18n } from '@ngx-translate/i18n-polyfill'; import * as _ from 'lodash'; import { forkJoin, Observable, of } from 'rxjs'; -import { map, mergeMap } from 'rxjs/operators'; +import { debounceTime, distinctUntilChanged, map, mergeMap } from 'rxjs/operators'; import { NfsService } from '../../../shared/api/nfs.service'; import { RgwUserService } from '../../../shared/api/rgw-user.service'; @@ -68,16 +68,22 @@ export class NfsFormComponent extends CdForm implements OnInit { this.i18n ); - pathDataSource: Observable = Observable.create((observer: any) => { - observer.next(this.nfsForm.getValue('path')); - }).pipe( - mergeMap((token: string) => this.getPathTypeahead(token)), - map((val: any) => val.paths) - ); + pathDataSource = (text$: Observable) => { + return text$.pipe( + debounceTime(200), + distinctUntilChanged(), + mergeMap((token: string) => this.getPathTypeahead(token)), + map((val: any) => val.paths) + ); + }; - bucketDataSource: Observable = Observable.create((observer: any) => { - observer.next(this.nfsForm.getValue('path')); - }).pipe(mergeMap((token: string) => this.getBucketTypeahead(token))); + bucketDataSource = (text$: Observable) => { + return text$.pipe( + debounceTime(200), + distinctUntilChanged(), + mergeMap((token: string) => this.getBucketTypeahead(token)) + ); + }; constructor( private authStorageService: AuthStorageService, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts index 79d6562641a6..ac66522bb447 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts @@ -3,9 +3,9 @@ import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation'; import { TabsModule } from 'ngx-bootstrap/tabs'; -import { TypeaheadModule } from 'ngx-bootstrap/typeahead'; import { SharedModule } from '../../shared/shared.module'; import { Nfs501Component } from './nfs-501/nfs-501.component'; @@ -21,7 +21,7 @@ import { NfsListComponent } from './nfs-list/nfs-list.component'; SharedModule, TabsModule.forRoot(), CommonModule, - TypeaheadModule.forRoot(), + NgbTypeaheadModule, NgBootstrapFormValidationModule ], declarations: [ diff --git a/src/pybind/mgr/dashboard/frontend/tslint.json b/src/pybind/mgr/dashboard/frontend/tslint.json index f3e62b3a92e3..cc3f6582c779 100644 --- a/src/pybind/mgr/dashboard/frontend/tslint.json +++ b/src/pybind/mgr/dashboard/frontend/tslint.json @@ -47,7 +47,6 @@ "prefer-const": true, "quotemark": [true, "single", "avoid-escape"], "radix": true, - "semicolon": [true, "always"], "triple-equals": [true, "allow-null-check"], "typedef-whitespace": [ true,