From 5d12423f74155574b6ff1de5b2ba9c7aee56fb17 Mon Sep 17 00:00:00 2001 From: AllForNothing Date: Mon, 16 Dec 2019 10:36:37 +0800 Subject: [PATCH] Improve search function for replication and tags Signed-off-by: AllForNothing --- .../tag-retention.component.html | 2 +- .../tag-retention.component.scss | 14 +--- .../cron-schedule.component.html | 10 +-- .../cron-schedule.component.scss | 13 +--- .../cron-schedule/cron-schedule.component.ts | 1 + .../components/filter/filter.component.html | 4 +- .../lib/components/filter/filter.component.ts | 2 +- .../image-name-input.component.html | 64 ++++++++++--------- .../image-name-input.component.scss | 16 ++--- .../image-name-input.component.ts | 49 +++++++------- .../replication/replication.component.html | 4 +- .../replication/replication.component.ts | 27 +++++++- .../src/lib/components/tag/tag.component.html | 4 +- .../src/lib/components/tag/tag.component.scss | 4 +- 14 files changed, 109 insertions(+), 105 deletions(-) diff --git a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html index 7518c71de..5fc27a1f0 100644 --- a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html +++ b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html @@ -67,7 +67,7 @@
- +
diff --git a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.scss b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.scss index 7caf597d7..27d2bb7b5 100644 --- a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.scss +++ b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.scss @@ -58,18 +58,6 @@ .font-size-54 { font-size: .541667rem; } -:host::ng-deep { - .normal-wrapper-box { - .normal-wrapper { - .font-style { - width: 150px!important; - } - } - .btn { - margin-left: 150px!important; - } - } -} .flex-150 { flex: 0 0 150px; max-width: 150px; @@ -89,4 +77,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html b/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html index 934230f1e..207ffd434 100644 --- a/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html +++ b/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html @@ -1,6 +1,6 @@
- {{ labelCurrent | translate }} + {{ labelCurrent | translate }} {{(originScheduleType ? 'SCHEDULE.'+ originScheduleType.toUpperCase(): "") | translate}} @@ -17,12 +17,12 @@ {{ "SCHEDULE.CRON" | translate }} : {{ oriCron }}
-
- {{ labelEdit | translate }} + {{ labelEdit | translate }}
- \ No newline at end of file + diff --git a/src/portal/src/lib/components/filter/filter.component.ts b/src/portal/src/lib/components/filter/filter.component.ts index 28b89dcb5..4d8323e31 100644 --- a/src/portal/src/lib/components/filter/filter.component.ts +++ b/src/portal/src/lib/components/filter/filter.component.ts @@ -27,7 +27,7 @@ export class FilterComponent implements OnInit { @Output() private filterEvt = new EventEmitter(); @Output() private openFlag = new EventEmitter(); - + @Input() readonly: string = null; @Input() currentValue: string; @Input("filterPlaceholder") public set flPlaceholder(placeHolder: string) { diff --git a/src/portal/src/lib/components/image-name-input/image-name-input.component.html b/src/portal/src/lib/components/image-name-input/image-name-input.component.html index 0bcfa7ffd..733f7d50c 100644 --- a/src/portal/src/lib/components/image-name-input/image-name-input.component.html +++ b/src/portal/src/lib/components/image-name-input/image-name-input.component.html @@ -1,45 +1,51 @@ -
-
- -
+ +
+ +
- + +
    -
  • {{project?.name}}
    • +
  • {{project?.name}}
+ + {{noProjectInfo | translate}} +
-
- -
+
+ +
- + +
+ + {{ 'RETAG.TIP_REPO' | translate }} +
-
- -
+
+ +
- + +
+ + {{ 'RETAG.TIP_TAG' | translate }} +
- \ No newline at end of file + diff --git a/src/portal/src/lib/components/image-name-input/image-name-input.component.scss b/src/portal/src/lib/components/image-name-input/image-name-input.component.scss index af0e94413..f3e24aa1a 100644 --- a/src/portal/src/lib/components/image-name-input/image-name-input.component.scss +++ b/src/portal/src/lib/components/image-name-input/image-name-input.component.scss @@ -42,13 +42,9 @@ width: 100%; } } - -label.required { - &:after { - content: '*'; - font-size: .58479532rem; - line-height: .5rem; - color: #c92100; - margin-left: .25rem; - } -} \ No newline at end of file +.clr-control-container { + width: 60%; +} +.w-90 { + width: 90%; +} diff --git a/src/portal/src/lib/components/image-name-input/image-name-input.component.ts b/src/portal/src/lib/components/image-name-input/image-name-input.component.ts index f2d29d275..f3b658dc6 100644 --- a/src/portal/src/lib/components/image-name-input/image-name-input.component.ts +++ b/src/portal/src/lib/components/image-name-input/image-name-input.component.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core"; import { Project } from "../project-policy-config/project"; import { Subject } from "rxjs/index"; -import { debounceTime, distinctUntilChanged } from "rxjs/operators"; +import { debounceTime, distinctUntilChanged, switchMap } from "rxjs/operators"; import { ProjectService } from "../../services/project.service"; import { AbstractControl, FormBuilder, FormGroup, Validators } from "@angular/forms"; import { ErrorHandler } from "../../utils/error-handler/error-handler"; @@ -42,36 +42,33 @@ export class ImageNameInputComponent implements OnInit, OnDestroy { ])], }); } + ngOnInit(): void { this.proNameChecker .pipe(debounceTime(200)) - .pipe(distinctUntilChanged()) - .subscribe((name: string) => { - this.noProjectInfo = ""; - this.selectedProjectList = []; - const prolist: any = this.proService.listProjects(name, undefined); - if (prolist.subscribe) { - prolist.subscribe(response => { - if (response.body) { - this.selectedProjectList = response.body.slice(0, 10); - // if input project name exist in the project list - let exist = response.body.find((data: any) => data.name === name); - if (!exist) { - this.noProjectInfo = "REPLICATION.NO_PROJECT_INFO"; - } else { - this.noProjectInfo = ""; - } - } else { - this.noProjectInfo = "REPLICATION.NO_PROJECT_INFO"; - } - }, (error: any) => { - this.errorHandler.error(error); - this.noProjectInfo = "REPLICATION.NO_PROJECT_INFO"; - }); + .pipe(distinctUntilChanged(), + switchMap(name => { + this.noProjectInfo = ""; + this.selectedProjectList = []; + return this.proService.listProjects(name, undefined); + }) + ).subscribe(response => { + if (response.body) { + this.selectedProjectList = response.body.slice(0, 10); + // if input project name exist in the project list + let exist = response.body.find((data: any) => data.name === this.imageNameForm.controls["projectName"].value); + if (!exist) { + this.noProjectInfo = "REPLICATION.NO_PROJECT_INFO"; } else { - this.errorHandler.error("not Observable type"); + this.noProjectInfo = ""; } - }); + } else { + this.noProjectInfo = "REPLICATION.NO_PROJECT_INFO"; + } + }, (error: any) => { + this.errorHandler.error(error); + this.noProjectInfo = "REPLICATION.NO_PROJECT_INFO"; + }); } validateProjectName(): void { diff --git a/src/portal/src/lib/components/replication/replication.component.html b/src/portal/src/lib/components/replication/replication.component.html index 57e88fb06..e75865bdf 100644 --- a/src/portal/src/lib/components/replication/replication.component.html +++ b/src/portal/src/lib/components/replication/replication.component.html @@ -2,7 +2,7 @@
- @@ -93,4 +93,4 @@ (goToRegistry)="goRegistry()" (reload)="reloadRules($event)"> -
\ No newline at end of file +
diff --git a/src/portal/src/lib/components/replication/replication.component.ts b/src/portal/src/lib/components/replication/replication.component.ts index 9f5c60d55..ed03b5a10 100644 --- a/src/portal/src/lib/components/replication/replication.component.ts +++ b/src/portal/src/lib/components/replication/replication.component.ts @@ -21,7 +21,7 @@ import { EventEmitter } from "@angular/core"; import { Comparator, State } from "../../services/interface"; -import { finalize, catchError, map } from "rxjs/operators"; +import { finalize, catchError, map, debounceTime, distinctUntilChanged, switchMap, delay } from "rxjs/operators"; import { Subscription, forkJoin, timer, Observable, throwError as observableThrowError, observable } from "rxjs"; import { TranslateService } from "@ngx-translate/core"; @@ -62,6 +62,7 @@ import { import { OperationService } from "../operation/operation.service"; import { Router } from "@angular/router"; import { errorHandler as errorHandFn } from "../../utils/shared/shared.utils"; +import { FilterComponent } from "../filter/filter.component"; const ONE_HOUR_SECONDS: number = 3600; const ONE_MINUTE_SECONDS: number = 60; const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS; @@ -146,6 +147,9 @@ export class ReplicationComponent implements OnInit, OnDestroy { currentState: State; jobsLoading: boolean = false; timerDelay: Subscription; + @ViewChild(FilterComponent, {static: true}) + filterComponent: FilterComponent; + searchSub: Subscription; constructor( private router: Router, @@ -160,6 +164,23 @@ export class ReplicationComponent implements OnInit, OnDestroy { } ngOnInit() { + if (!this.searchSub) { + this.searchSub = this.filterComponent.filterTerms.pipe( + debounceTime(500), + distinctUntilChanged(), + switchMap( ruleName => { + this.loading = true; + return this.replicationService.getReplicationRules(this.projectId, ruleName); + }) + ).subscribe(rules => { + this.hideJobs(); + this.listReplicationRule.changedRules = rules || []; + this.loading = false; + }, error => { + this.errorHandler.error(error); + this.loading = false; + }); + } this.currentRuleStatus = this.ruleStatus[0]; } @@ -167,6 +188,10 @@ export class ReplicationComponent implements OnInit, OnDestroy { if (this.timerDelay) { this.timerDelay.unsubscribe(); } + if (this.searchSub) { + this.searchSub.unsubscribe(); + this.searchSub = null; + } } // open replication rule diff --git a/src/portal/src/lib/components/tag/tag.component.html b/src/portal/src/lib/components/tag/tag.component.html index 5c5c1c055..e67bc15a9 100644 --- a/src/portal/src/lib/components/tag/tag.component.html +++ b/src/portal/src/lib/components/tag/tag.component.html @@ -26,11 +26,11 @@
-
+
- +
× diff --git a/src/portal/src/lib/components/tag/tag.component.scss b/src/portal/src/lib/components/tag/tag.component.scss index 852fee493..b2e96d574 100644 --- a/src/portal/src/lib/components/tag/tag.component.scss +++ b/src/portal/src/lib/components/tag/tag.component.scss @@ -126,7 +126,7 @@ .filterLabelPiece { position: absolute; - top: 4px; + top: 8px; z-index: 1; } @@ -275,4 +275,4 @@ clr-datagrid { clr-datagrid { height: auto !important; -} \ No newline at end of file +}