Merge branch 'master' into issue-9490

Author: houhoucoop

src/routes/host/HostList.js

@@ -8,7 +8,19 @@ import DiskList from './DiskList'
 import HostActions from './HostActions'
 import InstanceManagerComponent from './components/InstanceManagerComponent'
 import { nodeStatusColorMap } from '../../utils/status'
-import { byteToGi, getStorageProgressStatus } from './helper/index'
+import {
+  byteToGi,
+  getStorageProgressStatus,
+  computeTotalAllocated,
+  computeAllocated,
+  computeBackingImageAllocated,
+  computeReplicaAllocated,
+  computeUsagePercentage,
+  computeTotalUsed,
+  computeUsed,
+  computeSize,
+  computeReserved
+} from './helper/index'
 import { formatMib } from '../../utils/formatter'
 import { pagination } from '../../utils/page'
 import { ModalBlur } from '../../components'
@@ -195,26 +207,6 @@ class List extends React.Component {
       deleteHost,
     }
 
-    const computeTotalAllocated = (record) => {
-      const max = Object.values(record.disks).reduce((total, item) => total + item.storageMaximum, 0)
-      const reserved = Object.values(record.disks).reduce((total, item) => total + item.storageReserved, 0)
-      return ((max - reserved) * storageOverProvisioningPercentage) / 100
-    }
-    const computeAllocated = (record) => {
-      return Object.values(record.disks).reduce((total, item) => total + item.storageScheduled, 0)
-    }
-    const coumputeTotalUsed = (record) => {
-      return Object.values(record.disks).reduce((total, item) => total + item.storageMaximum, 0)
-    }
-    const computeUsed = (record) => {
-      return Object.values(record.disks).reduce((total, item) => total + (item.storageMaximum - item.storageAvailable), 0)
-    }
-    const computeSize = (record) => {
-      return Object.values(record.disks).reduce((total, item) => total + (item.storageMaximum - item.storageReserved), 0)
-    }
-    const computeReserved = (record) => {
-      return Object.values(record.disks).reduce((total, item) => total + item.storageReserved, 0)
-    }
     const columns = [
       {
         title: <span style={{ display: 'inline-block', padding: '0 0 0 30px' }}>Status</span>,
@@ -289,13 +281,34 @@ class List extends React.Component {
         sorter: (a, b) => computeAllocated(a) - computeAllocated(b),
         render: (text, record) => {
           const allocated = computeAllocated(record)
-          const total = computeTotalAllocated(record)
-          const p = total === 0 ? 0 : Math.round((allocated / total) * 100)
+          const total = computeTotalAllocated(record, storageOverProvisioningPercentage)
+          const backingImageAllocated = computeBackingImageAllocated(record)
+          const replicaAllocated = computeReplicaAllocated(record)
+          const percent = computeUsagePercentage(allocated, total)
+          const backingImagePercent = computeUsagePercentage(backingImageAllocated, total)
+          const status = getStorageProgressStatus(minimalSchedulingQuotaWarning, percent)
+
+          const renderTooltipContent = () => (
+            <div className={styles.allocatedTooltip}>
+              <span>Replica Size: {byteToGi(replicaAllocated)} Gi</span>
+              <span>Backing Image Size: {byteToGi(backingImageAllocated)} Gi</span>
+              <span>Total Usage: {percent}%</span>
+            </div>
+          )
+          const tooltipContent = renderTooltipContent()
+
           return (
             <div>
               <div>
-                <Tooltip title={`${p}%`}>
-                  <Progress strokeWidth={14} status={getStorageProgressStatus(minimalSchedulingQuotaWarning, p)} percent={p > 100 ? 100 : p} showInfo={false} />
+                <Tooltip title={tooltipContent}>
+                  <Progress
+                    strokeWidth={14}
+                    status={status}
+                    percent={percent}
+                    successPercent={backingImagePercent}
+                    showInfo={false}
+                    className={styles.progress}
+                  />
                 </Tooltip>
               </div>
               <div className={styles.secondLabel}>
@@ -312,12 +325,13 @@ class List extends React.Component {
         sorter: (a, b) => computeUsed(a) - computeUsed(b),
         render: (text, record) => {
           const used = computeUsed(record)
-          const total = coumputeTotalUsed(record)
-          const p = total === 0 ? 0 : Math.round((used / total) * 100)
+          const total = computeTotalUsed(record)
+          const p = computeUsagePercentage(used, total)
+
           return (
             <div>
               <div>
-                <Tooltip title={`${p}%`}>
+                <Tooltip title={`Total usage: ${p}%`}>
                   <Progress strokeWidth={14} status={getStorageProgressStatus(minimalSchedulingQuotaWarning, p)} percent={p > 100 ? 100 : p} showInfo={false} />
                 </Tooltip>
               </div>

src/routes/host/HostList.less

@@ -2,7 +2,7 @@
   color: #27ae60;
 }
 .status, .name, .allocated, .replicas, .used, .size {
-  text-align: center !important; 
+  text-align: center !important;
 }
 .allowScheduling {
   text-align: right !important;
@@ -21,3 +21,15 @@ a {
     background-color: #27AE5F !important;
   }
 }
+.allocatedTooltip {
+  display: flex;
+  flex-direction: column;
+}
+
+.progress {
+  :global {
+    .ant-progress-success-bg {
+      background: #219653; // darken(#27AE5F, 10%)
+    }
+  }
+}

src/routes/host/helper/index.js

@@ -25,3 +25,54 @@ export function getStorageProgressStatus(minimalSchedulingQuotaWarning, percent)
   }
   return 'success'
 }
+
+export const computeTotalAllocated = (record, storageOverProvisioningPercentage) => {
+  const max = Object.values(record.disks).reduce((total, item) => total + item.storageMaximum, 0)
+  const reserved = Object.values(record.disks).reduce((total, item) => total + item.storageReserved, 0)
+  return ((max - reserved) * storageOverProvisioningPercentage) / 100
+}
+
+export const computeAllocated = (record) => {
+  return Object.values(record.disks).reduce((total, item) => total + item.storageScheduled, 0)
+}
+
+export const computeTotalSize = (record, property) => {
+  if (!record?.disks) return 0
+  return Object.keys(record.disks).reduce((totalSize, key) => {
+    const disk = record.disks[key]
+
+    if (!disk) return totalSize
+    if (disk[property]) {
+      totalSize += Object.values(disk[property]).reduce((acc, size) => acc + size, 0)
+    }
+    return totalSize
+  }, 0)
+}
+
+export const computeBackingImageAllocated = (record) => {
+  return computeTotalSize(record, 'scheduledBackingImage')
+}
+
+export const computeReplicaAllocated = (record) => {
+  return computeTotalSize(record, 'scheduledReplica')
+}
+
+export const computeUsagePercentage = (allocated, total) => {
+  return total > 0 ? Math.round((allocated / total) * 100) : 0
+}
+
+export const computeTotalUsed = (record) => {
+  return Object.values(record.disks).reduce((total, item) => total + item.storageMaximum, 0)
+}
+
+export const computeUsed = (record) => {
+  return Object.values(record.disks).reduce((total, item) => total + (item.storageMaximum - item.storageAvailable), 0)
+}
+
+export const computeSize = (record) => {
+  return Object.values(record.disks).reduce((total, item) => total + (item.storageMaximum - item.storageReserved), 0)
+}
+
+export const computeReserved = (record) => {
+  return Object.values(record.disks).reduce((total, item) => total + item.storageReserved, 0)
+}