1 files changed, 128 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
new file mode 100644
index 000000000..712d771c5
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
@@ -0,0 +1,128 @@
+<cd-rbd-tabs></cd-rbd-tabs>
+
+<cd-table #table
+          [data]="images"
+          columnMode="flex"
+          [columns]="columns"
+          identifier="unique_id"
+          [searchableObjects]="true"
+          [serverSide]="true"
+          [count]="count"
+          forceIdentifier="true"
+          selectionType="single"
+          [hasDetails]="true"
+          [status]="tableStatus"
+          [maxLimit]="25"
+          [autoReload]="-1"
+          (fetchData)="taskListService.fetch($event)"
+          (setExpandedRow)="setExpandedRow($event)"
+          (updateSelection)="updateSelection($event)">
+  <cd-table-actions class="table-actions"
+                    [permission]="permission"
+                    [selection]="selection"
+                    [tableActions]="tableActions">
+  </cd-table-actions>
+  <cd-rbd-details cdTableDetail
+                  [selection]="expandedRow">
+  </cd-rbd-details>
+</cd-table>
+
+<ng-template #scheduleStatus>
+  <div i18n
+       [innerHtml]="'Only available for RBD images with <strong>fast-diff</strong> enabled'"></div>
+</ng-template>
+
+<ng-template #provisionedNotAvailableTooltipTpl
+             let-row="row">
+  <span *ngIf="row.disk_usage === null && !row.features_name.includes('fast-diff'); else provisioned"
+        [ngbTooltip]="usageNotAvailableTooltipTpl"
+        placement="top"
+        i18n>N/A</span>
+  <ng-template #provisioned
+               i18n>{{row.disk_usage | dimlessBinary}}</ng-template>
+</ng-template>
+
+<ng-template #totalProvisionedNotAvailableTooltipTpl
+             let-row="row">
+  <span *ngIf="row.total_disk_usage === null && !row.features_name.includes('fast-diff'); else totalProvisioned"
+        [ngbTooltip]="usageNotAvailableTooltipTpl"
+        placement="top"
+        i18n>N/A</span>
+  <ng-template #totalProvisioned
+               i18n>{{row.total_disk_usage | dimlessBinary}}</ng-template>
+</ng-template>
+
+<ng-template #parentTpl
+             let-value="value">
+  <span *ngIf="value">{{ value.pool_name }}<span
+          *ngIf="value.pool_namespace">/{{ value.pool_namespace }}</span>/{{ value.image_name }}@{{ value.snap_name }}</span>
+  <span *ngIf="!value">-</span>
+</ng-template>
+
+<ng-template #mirroringTpl
+             let-value="value"
+             let-row="row">
+  <span *ngIf="value.length === 3; else probb"
+        class="badge badge-info">{{ value[0] }}</span>&nbsp;
+  <span *ngIf="value.length === 3"
+        class="badge badge-info"
+        [ngbTooltip]="'Next scheduled snapshot on' + ' ' + (value[2] | cdDate)">{{ value[1] }}</span>
+  <span *ngIf="row.primary === true"
+        class="badge badge-info"
+        i18n>primary</span>
+  <span *ngIf="row.primary === false"
+        class="badge badge-info"
+        i18n>secondary</span>
+  <ng-template #probb>
+    <span class="badge badge-info">{{ value }}</span>
+  </ng-template>
+</ng-template>
+
+<ng-template #flattenTpl
+             let-value>
+  You are about to flatten
+  <strong>{{ value.child }}</strong>.
+  <br>
+  <br> All blocks will be copied from parent
+  <strong>{{ value.parent }}</strong> to child
+  <strong>{{ value.child }}</strong>.
+</ng-template>
+
+<ng-template #deleteTpl
+             let-hasSnapshots="hasSnapshots"
+             let-snapshots="snapshots">
+  <div class="alert alert-warning"
+       *ngIf="hasSnapshots"
+       role="alert">
+    <span i18n>Deleting this image will also delete all its snapshots.</span>
+    <br>
+    <ng-container *ngIf="snapshots.length > 0">
+      <span i18n>The following snapshots are currently protected and will be removed:</span>
+      <ul>
+        <li *ngFor="let snapshot of snapshots">{{ snapshot }}</li>
+      </ul>
+    </ng-container>
+  </div>
+</ng-template>
+
+<ng-template #removingStatTpl
+             let-column="column"
+             let-value="value"
+             let-row="row">
+
+  <i [ngClass]="[icons.spinner, icons.spin]"
+     *ngIf="row.cdExecuting"></i>
+  <span [ngClass]="column?.customTemplateConfig?.valueClass">
+    {{ value }}
+  </span>
+  <span *ngIf="row.cdExecuting"
+        [ngClass]="column?.customTemplateConfig?.executingClass ?
+        column.customTemplateConfig.executingClass :
+        'text-muted italic'">
+    ({{ row.cdExecuting }})
+  </span>
+  <i *ngIf="row.source && row.source === 'REMOVING'"
+     i18n-title
+     title="RBD in status 'Removing'"
+     class="{{ icons.warning }} warn"></i>
+</ng-template>