update ceph source to reef 18.2.1

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / dashboard-v3 / dashboard-area-chart / dashboard-area-chart.component.html

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.html
index 6ac991fd58c5603ab6b23ad1b206437a035c057d..cb8b9dadb28376b79811933b5156d7b8b44a884a 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.html
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.html
@@ -1,17 +1,33 @@
-<div class="row">
-  <div class="col-3 center-text">
+<div class="row mt-2">
+  <div class="col-3 d-flex flex-column align-self-center">
     <br>
-    <b class="chartTitle"
+    <b class="chartTitle pb-2"
        i18n>{{ chartTitle }}</b>
-    <br>
-    <span [ngbTooltip]="label"
-          i18n>{{currentData}} {{ currentDataUnits }}</span>
-    <br>
-    <span [ngbTooltip]="label2"
-          i18n>{{currentData2}} {{ currentDataUnits2 }}</span>
+    <div
+         i18n>
+      <div class="d-inline-flex align-items-center gap-1">
+        <div *ngIf="!maxValue"
+             class="blue-box">
+      </div>
+        <div *ngIf="label2">{{ label }}:
+        </div>
+        {{ currentData || 'N/A' }} {{ currentDataUnits }}
+        <div *ngIf="maxValue && currentData"> used of
+          {{ maxConvertedValue }} {{ maxConvertedValueUnits }}
+        </div>
+      </div>
+    </div>
+    <div *ngIf="label2"
+         i18n>
+      <div class="d-inline-flex align-items-center gap-1">
+        <div class="yellow-box"></div>
+        <div *ngIf="label2 !== chartTitle" >{{ label2 }}: </div>
+        <div>{{ currentData2 || 'N/A' }} {{ currentDataUnits2 }}</div>
+      </div>
+    </div>
   </div>
-  <div class="col-9">
-    <div class="chart">
+  <div class="col-9 d-flex flex-column">
+    <div class="chart mt-3">
       <canvas baseChart
               [datasets]="chartData.dataset"
               [options]="options"