From 33f6d61b2414490bb62371888936b7dbae28df02 Mon Sep 17 00:00:00 2001
From: Avan Thakkar <athakkar@redhat.com>
Date: Tue, 24 Mar 2020 18:14:02 +0530
Subject: [PATCH] mgr/dashboard: RGW auto refresh is not working Fixes:
 https://tracker.ceph.com/issues/44667

Signed-off-by: Avan Thakkar <athakkar@redhat.com>
---
 .../rgw-bucket-list.component.html            |  4 ++++
 .../rgw-bucket-list.component.ts              | 21 ++++++++++++++++--
 .../rgw-user-list.component.html              |  4 ++++
 .../rgw-user-list/rgw-user-list.component.ts  | 22 ++++++++++++++++---
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html
index 37797e96e00..1a2fbaeba02 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html
@@ -1,3 +1,7 @@
+<cd-alert-panel *ngIf="isStale"
+                type="warning"
+                size="slim"
+                i18n>The bucket list data might be stale. If needed, you can manually reload it.</cd-alert-panel>
 <cd-table #table
           [autoReload]="false"
           [data]="buckets"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts
index 24050ebb74a..8573c739557 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, NgZone, ViewChild } from '@angular/core';
 
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import { BsModalService } from 'ngx-bootstrap/modal';
@@ -34,6 +34,8 @@ export class RgwBucketListComponent {
   columns: CdTableColumn[] = [];
   buckets: object[] = [];
   selection: CdTableSelection = new CdTableSelection();
+  isStale = false;
+  staleTimeout: number;
 
   constructor(
     private authStorageService: AuthStorageService,
@@ -41,7 +43,8 @@ export class RgwBucketListComponent {
     private bsModalService: BsModalService,
     private i18n: I18n,
     private urlBuilder: URLBuilderService,
-    public actionLabels: ActionLabelsI18n
+    public actionLabels: ActionLabelsI18n,
+    private ngZone: NgZone
   ) {
     this.permission = this.authStorageService.getPermissions().rgw;
     this.columns = [
@@ -80,9 +83,23 @@ export class RgwBucketListComponent {
       canBePrimary: (selection: CdTableSelection) => selection.hasMultiSelection
     };
     this.tableActions = [addAction, editAction, deleteAction];
+    this.timeConditionReached();
+  }
+
+  timeConditionReached() {
+    clearTimeout(this.staleTimeout);
+    this.ngZone.runOutsideAngular(() => {
+      this.staleTimeout = window.setTimeout(() => {
+        this.ngZone.run(() => {
+          this.isStale = true;
+        });
+      }, 10000);
+    });
   }
 
   getBucketList(context: CdTableFetchDataContext) {
+    this.isStale = false;
+    this.timeConditionReached();
     this.rgwBucketService.list().subscribe(
       (resp: object[]) => {
         this.buckets = resp;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html
index a154f1182e3..f1d603536d4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html
@@ -1,3 +1,7 @@
+<cd-alert-panel *ngIf="isStale"
+                type="warning"
+                size="slim"
+                i18n>The user list data might be stale. If needed, you can manually reload it.</cd-alert-panel>
 <cd-table #table
           [autoReload]="false"
           [data]="users"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts
index 46c40201963..8775220401b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, NgZone, ViewChild } from '@angular/core';
 
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import { BsModalService } from 'ngx-bootstrap/modal';
@@ -29,12 +29,13 @@ const BASE_URL = 'rgw/user';
 export class RgwUserListComponent {
   @ViewChild(TableComponent, { static: true })
   table: TableComponent;
-
   permission: Permission;
   tableActions: CdTableAction[];
   columns: CdTableColumn[] = [];
   users: object[] = [];
   selection: CdTableSelection = new CdTableSelection();
+  isStale = false;
+  staleTimeout: number;
 
   constructor(
     private authStorageService: AuthStorageService,
@@ -42,7 +43,8 @@ export class RgwUserListComponent {
     private bsModalService: BsModalService,
     private i18n: I18n,
     private urlBuilder: URLBuilderService,
-    public actionLabels: ActionLabelsI18n
+    public actionLabels: ActionLabelsI18n,
+    private ngZone: NgZone
   ) {
     this.permission = this.authStorageService.getPermissions().rgw;
     this.columns = [
@@ -103,9 +105,23 @@ export class RgwUserListComponent {
       canBePrimary: (selection: CdTableSelection) => selection.hasMultiSelection
     };
     this.tableActions = [addAction, editAction, deleteAction];
+    this.timeConditionReached();
+  }
+
+  timeConditionReached() {
+    clearTimeout(this.staleTimeout);
+    this.ngZone.runOutsideAngular(() => {
+      this.staleTimeout = window.setTimeout(() => {
+        this.ngZone.run(() => {
+          this.isStale = true;
+        });
+      }, 10000);
+    });
   }
 
   getUserList(context: CdTableFetchDataContext) {
+    this.isStale = false;
+    this.timeConditionReached();
     this.rgwUserService.list().subscribe(
       (resp: object[]) => {
         this.users = resp;