From 4d4505dfaca135ca1cf80e6fb8ba93337b3df3ec Mon Sep 17 00:00:00 2001
From: Pere Diaz Bou <pdiazbou@redhat.com>
Date: Mon, 30 May 2022 16:10:11 +0200
Subject: [PATCH] mgr/dashboard: move replaying images to Syncing tab

Images with 'Replaying' state will be displayed in Syncing tab. syncTmpl
removed as it was unnecessary if sate is provided from the backend.

Replaying images in contrast of Syncing images don't have a progress
percentage, nevertheless, we have an approximation of how much time left
there is until the image is fully synced. Therefore, we can use seconds_until_synced to represent the progress.

Signed-off-by: Pere Diaz Bou <pdiazbou@redhat.com>
---
 .../dashboard/controllers/rbd_mirroring.py    | 36 ++++++++++++-------
 .../image-list/image-list.component.html      | 23 +++++++-----
 .../image-list/image-list.component.ts        |  2 +-
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/pybind/mgr/dashboard/controllers/rbd_mirroring.py b/src/pybind/mgr/dashboard/controllers/rbd_mirroring.py
index a472fbd49e499..df326b5c95007 100644
--- a/src/pybind/mgr/dashboard/controllers/rbd_mirroring.py
+++ b/src/pybind/mgr/dashboard/controllers/rbd_mirroring.py
@@ -220,15 +220,17 @@ def _get_pool_datum(pool_name):
             'state': 'Error'
         },
         rbd.MIRROR_IMAGE_STATUS_STATE_SYNCING: {
-            'health': 'syncing'
+            'health': 'syncing',
+            'state_color': 'success',
+            'state': 'Syncing'
         },
         rbd.MIRROR_IMAGE_STATUS_STATE_STARTING_REPLAY: {
-            'health': 'ok',
+            'health': 'syncing',
             'state_color': 'success',
             'state': 'Starting'
         },
         rbd.MIRROR_IMAGE_STATUS_STATE_REPLAYING: {
-            'health': 'ok',
+            'health': 'syncing',
             'state_color': 'success',
             'state': 'Replaying'
         },
@@ -288,26 +290,36 @@ def _get_content_data():  # pylint: disable=R0914
         for mirror_image in mirror_images:
             image = {
                 'pool_name': pool_name,
-                'name': mirror_image['name']
+                'name': mirror_image['name'],
+                'state_color': mirror_image['state_color'],
+                'state': mirror_image['state']
             }
 
             if mirror_image['health'] == 'ok':
                 image.update({
-                    'state_color': mirror_image['state_color'],
-                    'state': mirror_image['state'],
                     'description': mirror_image['description']
                 })
                 image_ready.append(image)
             elif mirror_image['health'] == 'syncing':
-                p = re.compile("bootstrapping, IMAGE_COPY/COPY_OBJECT (.*)%")
-                image.update({
-                    'progress': (p.findall(mirror_image['description']) or [0])[0]
-                })
+                if mirror_image['state'] == 'Replaying':
+                    p = re.compile("replaying, ({.*})")
+                    replaying_data = p.findall(mirror_image['description'])
+                    assert len(replaying_data) == 1
+                    replaying_data = json.loads(replaying_data[0])
+                    seconds_until_synced = 0
+                    if 'seconds_until_synced' in replaying_data:
+                        seconds_until_synced = replaying_data['seconds_until_synced']
+                    image.update({
+                        'seconds_until_synced': seconds_until_synced
+                    })
+                else:
+                    p = re.compile("bootstrapping, IMAGE_COPY/COPY_OBJECT (.*)%")
+                    image.update({
+                        'progress': (p.findall(mirror_image['description']) or [0])[0]
+                    })
                 image_syncing.append(image)
             else:
                 image.update({
-                    'state_color': mirror_image['state_color'],
-                    'state': mirror_image['state'],
                     'description': mirror_image['description']
                 })
                 image_error.append(image)
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
index 25f1442f88759..a052f43c9a59a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
@@ -4,7 +4,7 @@
     cdStatefulTab="image-list">
   <li ngbNavItem="issues">
     <a ngbNavLink
-       i18n>Issues</a>
+       i18n>Issues ({{ image_error.data.length }})</a>
     <ng-template ngbNavContent>
       <cd-table [data]="image_error.data"
                 columnMode="flex"
@@ -17,7 +17,7 @@
   </li>
   <li ngbNavItem="syncing">
     <a ngbNavLink
-       i18n>Syncing</a>
+       i18n>Syncing ({{ image_syncing.data.length }})</a>
     <ng-template ngbNavContent>
       <cd-table [data]="image_syncing.data"
                 columnMode="flex"
@@ -30,7 +30,7 @@
   </li>
   <li ngbNavItem="ready">
     <a ngbNavLink
-       i18n>Ready</a>
+       i18n>Ready ({{ image_ready.data.length }})</a>
     <ng-template ngbNavContent>
       <cd-table [data]="image_ready.data"
                 columnMode="flex"
@@ -51,14 +51,19 @@
   <span [ngClass]="row.state_color | mirrorHealthColor">{{ value }}</span>
 </ng-template>
 
-<ng-template #syncTmpl>
-  <span class="badge badge-info"
-        i18n>Syncing</span>
-</ng-template>
-
 <ng-template #progressTmpl
+             let-row="row"
              let-value="value">
-  <ngb-progressbar type="info"
+  <div *ngIf="row.state === 'Replaying'">
+    <span *ngIf="row.seconds_until_synced == 0">
+      synced
+    </span>
+    <span *ngIf="row.seconds_until_synced > 0">
+      {{row.seconds_until_synced | duration }} until synced
+    </span>
+  </div>
+  <ngb-progressbar *ngIf="row.state === 'Syncing'"
+                    type="info"
                    [value]="value"
                    [showValue]="true"></ngb-progressbar>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.ts
index 015031ebeebf3..c7f6e91883e9b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.ts
@@ -62,7 +62,7 @@ export class ImageListComponent implements OnInit, OnDestroy {
       {
         prop: 'state',
         name: $localize`State`,
-        cellTemplate: this.syncTmpl,
+        cellTemplate: this.stateTmpl,
         flexGrow: 1
       }
     ];
-- 
2.39.5