1 files changed, 180 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
new file mode 100644
index 000000000..ab9454cbc
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
@@ -0,0 +1,180 @@
+<ng-template #usageNotAvailableTooltipTpl>
+  <ng-container i18n>Only available for RBD images with <strong>fast-diff</strong> enabled</ng-container>
+</ng-template>
+
+<ng-container *ngIf="selection && selection.source !== 'REMOVING'">
+  <ul ngbNav
+      #nav="ngbNav"
+      class="nav-tabs"
+      cdStatefulTab="rbd-details">
+    <li ngbNavItem="details">
+      <a ngbNavLink
+         i18n>Details</a>
+      <ng-template ngbNavContent>
+        <table class="table table-striped table-bordered">
+          <tbody>
+            <tr>
+              <td i18n
+                  class="bold w-25">Name</td>
+              <td class="w-75">{{ selection.name }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Pool</td>
+              <td>{{ selection.pool_name }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Data Pool</td>
+              <td>{{ selection.data_pool | empty }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Created</td>
+              <td>{{ selection.timestamp | cdDate }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Size</td>
+              <td>{{ selection.size | dimlessBinary }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Objects</td>
+              <td>{{ selection.num_objs | dimless }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Object size</td>
+              <td>{{ selection.obj_size | dimlessBinary }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Features</td>
+              <td>
+                <span *ngFor="let feature of selection.features_name">
+                  <span class="badge badge-dark mr-2">{{ feature }}</span>
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Provisioned</td>
+              <td>
+                <span *ngIf="selection.features_name?.indexOf('fast-diff') === -1">
+                  <span class="form-text text-muted"
+                        [ngbTooltip]="usageNotAvailableTooltipTpl"
+                        placement="top"
+                        i18n>N/A</span>
+                </span>
+                <span *ngIf="selection.features_name?.indexOf('fast-diff') !== -1">
+                  {{ selection.disk_usage | dimlessBinary }}
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Total provisioned</td>
+              <td>
+                <span *ngIf="selection.features_name?.indexOf('fast-diff') === -1">
+                  <span class="form-text text-muted"
+                        [ngbTooltip]="usageNotAvailableTooltipTpl"
+                        placement="top"
+                        i18n>N/A</span>
+                </span>
+                <span *ngIf="selection.features_name?.indexOf('fast-diff') !== -1">
+                  {{ selection.total_disk_usage | dimlessBinary }}
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Striping unit</td>
+              <td>{{ selection.stripe_unit | dimlessBinary }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Striping count</td>
+              <td>{{ selection.stripe_count }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Parent</td>
+              <td>
+                <span *ngIf="selection.parent">{{ selection.parent.pool_name }}<span
+                        *ngIf="selection.parent.pool_namespace">/{{ selection.parent.pool_namespace }}</span>/{{ selection.parent.image_name }}@{{ selection.parent.snap_name }}</span>
+                <span *ngIf="!selection.parent">-</span>
+              </td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Block name prefix</td>
+              <td>{{ selection.block_name_prefix }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Order</td>
+              <td>{{ selection.order }}</td>
+            </tr>
+            <tr>
+              <td i18n
+                  class="bold">Format Version</td>
+              <td>{{ selection.image_format }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </ng-template>
+    </li>
+    <li ngbNavItem="snapshots">
+      <a ngbNavLink
+         i18n>Snapshots</a>
+      <ng-template ngbNavContent>
+        <cd-rbd-snapshot-list [snapshots]="selection.snapshots"
+                              [featuresName]="selection.features_name"
+                              [poolName]="selection.pool_name"
+                              [namespace]="selection.namespace"
+                              [mirroring]="selection.mirror_mode"
+                              [rbdName]="selection.name"></cd-rbd-snapshot-list>
+      </ng-template>
+    </li>
+    <li ngbNavItem="configuration">
+      <a ngbNavLink
+         i18n>Configuration</a>
+      <ng-template ngbNavContent>
+        <cd-rbd-configuration-table [data]="selection['configuration']"></cd-rbd-configuration-table>
+      </ng-template>
+    </li>
+
+    <li ngbNavItem="performance">
+      <a ngbNavLink
+         i18n>Performance</a>
+      <ng-template ngbNavContent>
+        <cd-grafana [grafanaPath]="rbdDashboardUrl"
+                    uid="YhCYGcuZz"
+                    grafanaStyle="one">
+        </cd-grafana>
+      </ng-template>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav"></div>
+</ng-container>
+<ng-container *ngIf="selection && selection.source === 'REMOVING'">
+  <cd-alert-panel type="warning"
+                  i18n>Information can not be displayed for RBD in status 'Removing'.</cd-alert-panel>
+</ng-container>
+
+<ng-template #poolConfigurationSourceTpl
+             let-row="row"
+             let-value="value">
+  <ng-container *ngIf="+value; else global">
+    <strong i18n
+            i18n-ngbTooltip
+            ngbTooltip="This setting overrides the global value">Image</strong>
+  </ng-container>
+  <ng-template #global>
+    <span i18n
+          i18n-ngbTooltip
+          ngbTooltip="This is the global value. No value for this option has been set for this image.">Global</span>
+  </ng-template>
+</ng-template>