[improve] support kanban set auto refresh Interval (apache#2686)

Aias00 · Sep 8, 2024 · c153433 · c153433
1 parent 27175ef
commit c153433
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -28,6 +28,10 @@
 
 <app-toolbar>
   <ng-template #left>
+    <button nz-button nz-dropdown [nzDropdownMenu]="time_menu" nzPlacement="bottomLeft">
+      <span *ngIf="deadline > 0"> {{ 'monitors.detail.auto-refresh' | i18n : { time: countDownTime } }} </span>
+      <span *ngIf="deadline <= 0"> {{ 'monitors.detail.close-refresh' | i18n }} </span>
+    </button>
     <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
@@ -48,6 +52,15 @@
       <i nz-icon nzType="delete" nzTheme="outline"></i>
       {{ 'bulletin.batch.delete' | i18n }}
     </button>
+    <nz-dropdown-menu #time_menu="nzDropdownMenu">
+      <ul nz-menu>
+        <li nz-menu-item (click)="configRefreshDeadline(10)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 10 } }} </li>
+        <li nz-menu-item (click)="configRefreshDeadline(30)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 30 } }} </li>
+        <li nz-menu-item (click)="configRefreshDeadline(60)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 60 } }} </li>
+        <li nz-menu-item (click)="configRefreshDeadline(300)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 300 } }} </li>
+        <li nz-menu-item (click)="configRefreshDeadline(-1)"> {{ 'monitors.detail.close-refresh' | i18n }}</li>
+      </ul>
+    </nz-dropdown-menu>
   </ng-template>
 </app-toolbar>
 

diff --git a/web-app/src/app/routes/bulletin/bulletin.component.ts b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import { I18NService } from '@core';
 import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { NzModalService } from 'ng-zorro-antd/modal';
@@ -46,6 +46,7 @@ export class BulletinComponent implements OnInit, OnDestroy {
     private appDefineSvc: AppDefineService,
     private monitorSvc: MonitorService,
     private bulletinDefineSvc: BulletinDefineService,
+    private cdr: ChangeDetectorRef,
     @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
   search!: string;
@@ -70,12 +71,14 @@ export class BulletinComponent implements OnInit, OnDestroy {
   total: number = 0;
   currentTab: number = 0;
   refreshInterval: any;
+  deadline = 30;
+  countDownTime: number = 0;
 
   ngOnInit() {
     this.loadTabs();
     this.refreshInterval = setInterval(() => {
-      this.loadTabs();
-    }, 30000); // every 30 seconds refresh the tabs
+      this.countDown();
+    }, 1000); // every 30 seconds refresh the tabs
   }
 
   ngOnDestroy() {
@@ -88,6 +91,24 @@ export class BulletinComponent implements OnInit, OnDestroy {
     this.loadData(this.pageIndex - 1, this.pageSize);
   }
 
+  configRefreshDeadline(deadlineTime: number) {
+    this.deadline = deadlineTime;
+    this.countDownTime = this.deadline;
+    this.cdr.detectChanges();
+  }
+
+  countDown() {
+    if (this.deadline > 0) {
+      this.countDownTime = Math.max(0, this.countDownTime - 1);
+      this.cdr.detectChanges();
+      if (this.countDownTime == 0) {
+        this.loadTabs();
+        this.countDownTime = this.deadline;
+        this.cdr.detectChanges();
+      }
+    }
+  }
+
   onNewBulletinDefine() {
     this.resetManageModalData();
     this.isManageModalAdd = true;
@@ -523,5 +544,7 @@ export class BulletinComponent implements OnInit, OnDestroy {
     this.metricsData = [];
     this.loadData(this.pageIndex - 1, this.pageSize);
     console.log(this.metricsData);
+    this.countDownTime = this.deadline;
+    this.cdr.detectChanges();
   }
 }