1 files changed, 63 insertions, 0 deletions
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
new file mode 100644
index 000000000..d4972a41c
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
@@ -0,0 +1,63 @@
+<ul ngbNav
+    #nav="ngbNav"
+    class="nav-tabs"
+    cdStatefulTab="image-list">
+  <li ngbNavItem="issues">
+    <a ngbNavLink
+       i18n>Issues ({{ image_error.data.length }})</a>
+    <ng-template ngbNavContent>
+      <cd-table [data]="image_error.data"
+                columnMode="flex"
+                [columns]="image_error.columns"
+                [autoReload]="-1"
+                (fetchData)="refresh()"
+                [status]="tableStatus">
+      </cd-table>
+    </ng-template>
+  </li>
+  <li ngbNavItem="syncing">
+    <a ngbNavLink
+       i18n>Syncing ({{ image_syncing.data.length }})</a>
+    <ng-template ngbNavContent>
+      <cd-table [data]="image_syncing.data"
+                columnMode="flex"
+                [columns]="image_syncing.columns"
+                [autoReload]="-1"
+                (fetchData)="refresh()"
+                [status]="tableStatus">
+      </cd-table>
+    </ng-template>
+  </li>
+  <li ngbNavItem="ready">
+    <a ngbNavLink
+       i18n>Ready ({{ image_ready.data.length }})</a>
+    <ng-template ngbNavContent>
+      <cd-table [data]="image_ready.data"
+                columnMode="flex"
+                [columns]="image_ready.columns"
+                [autoReload]="-1"
+                (fetchData)="refresh()"
+                [status]="tableStatus">
+      </cd-table>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav"></div>
+
+<ng-template #stateTmpl
+             let-row="row"
+             let-value="value">
+  <span [ngClass]="row.state_color | mirrorHealthColor">{{ value }}</span>
+</ng-template>
+
+<ng-template #progressTmpl
+             let-row="row"
+             let-value="value">
+  <div *ngIf="row.state === 'Replaying'">
+  </div>
+  <ngb-progressbar *ngIf="row.state === 'Syncing'"
+                   type="info"
+                   [value]="value"
+                   [showValue]="true"></ngb-progressbar>
+</ng-template>