change tooManySnapashots condition style and extract to ConditionTool…

…tip component Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · May 29, 2024 · 409957f · 409957f
1 parent 30c1e41
commit 409957f
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 39 deletions.
diff --git a/src/components/Snapshot/Snapshot.less b/src/components/Snapshot/Snapshot.less
@@ -8,8 +8,12 @@
       height: 100%;
     }
   }
+  .ant-tooltip{
+    max-width: fit-content;
+    width: fit-content;
+  }
   .ant-tooltip-inner {
-    max-width: 300px;
+    max-width: fit-content;
   }
   .disable-dropdown-menu
   {

diff --git a/src/routes/volume/detail/ConditionTooltip.js b/src/routes/volume/detail/ConditionTooltip.js
@@ -0,0 +1,87 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { formatDate } from '../../../utils/formatDate'
+import { Icon, Tooltip } from 'antd'
+
+const toolTipContent = (field, prefix, value = '') => {
+  if (!field) return null
+  const text = prefix === 'Last Probe Time' || prefix === 'Last Transition Time' ? formatDate(value) : value
+  return (<div style={{ marginBottom: 5 }}>{prefix}: {text}</div>)
+}
+
+function ConditionTooltip({ selectedVolume, conditionKey }) {
+  let icon = <Icon style={{ marginRight: 5 }} type="exclamation-circle" />
+  let conditionClassName = ''
+  const { type, lastProbeTime, lastTransitionTime, message, reason, status } = selectedVolume.conditions[conditionKey] || {}
+  let title = selectedVolume.conditions[conditionKey] ? (
+    <div>
+      {toolTipContent(type, 'Name', type)}
+      {toolTipContent(lastProbeTime, 'Last Probe Time', lastProbeTime)}
+      {toolTipContent(lastTransitionTime, 'Last Transition Time', lastTransitionTime)}
+      {toolTipContent(message, 'Message', message)}
+      {toolTipContent(reason, 'Reason', reason)}
+      {toolTipContent(status, 'Status', status)}
+    </div>) : ''
+
+  switch (conditionKey) {
+    case 'TooManySnapshots':
+      if (status && (status.toLowerCase() === 'false' || reason === '')) { // hasn't reach TooManySnapshots
+        icon = <Icon style={{ marginRight: 5 }} type="exclamation-circle" />
+        title = (
+          <div>
+            {toolTipContent(type, 'Name', type) }
+            {toolTipContent(lastTransitionTime, 'Last Transition Time', lastTransitionTime)}
+            {toolTipContent(status, 'Status', 'The snapshot number threshold (100) has not been exceeded')}
+          </div>
+        )
+      } else {
+        conditionClassName = 'faulted' // red
+        title = (
+          <div>
+            {toolTipContent(type, 'Name', type)}
+            {toolTipContent(lastProbeTime, 'Last Probe Time', lastProbeTime)}
+            {toolTipContent(lastTransitionTime, 'Last Transition Time', lastTransitionTime)}
+            {toolTipContent(message, 'Message', message)}
+            {toolTipContent(reason, 'Reason', reason)}
+            {toolTipContent(reason, 'Suggestion', 'Try to delete unused snapshots to free up space if needed')}
+            {toolTipContent(status, 'Status', status)}
+          </div>
+        )
+      }
+      break
+    case 'Restore':
+      icon = <Icon style={{ marginRight: 5 }} type="check-circle" />
+      if (reason === '' && status?.toLowerCase() === 'false') {
+        conditionClassName = 'unknown' // grey
+      } else {
+        conditionClassName = 'healthy' // green
+      }
+      break
+    case 'Scheduled':
+      if (status && status.toLowerCase() === 'true') {
+        conditionClassName = 'healthy'
+        icon = <Icon style={{ marginRight: 5 }} type="check-circle" />
+      } else {
+        conditionClassName = 'faulted'
+      }
+      break
+    default:
+      break
+  }
+  const text = type || conditionKey
+  return (
+
+    <Tooltip key={conditionKey} title={title}>
+      <div style={{ display: 'flex', alignItems: 'center', marginRight: 10 }} className={conditionClassName}>
+        {icon}{text}
+      </div>
+    </Tooltip>
+  )
+}
+
+ConditionTooltip.propTypes = {
+  selectedVolume: PropTypes.object,
+  conditionKey: PropTypes.string,
+}
+
+export default ConditionTooltip
diff --git a/src/routes/volume/detail/VolumeInfo.js b/src/routes/volume/detail/VolumeInfo.js
@@ -15,9 +15,10 @@ import {
 } from '../helper/index'
 import styles from './VolumeInfo.less'
 import { EngineImageUpgradeTooltip, ReplicaHATooltip } from '../../../components'
-import IconSnapshot from '../../../components/Icon/IconSnapshot'
+import ConditionTooltip from './ConditionTooltip'
 import { isVolumeImageUpgradable, isVolumeReplicaNotRedundancy, isVolumeRelicaLimited } from '../../../utils/filter'
 
+
 function VolumeInfo({ selectedVolume, snapshotModalState, engineImages, hosts, currentBackingImage }) {
   let errorMsg = null
   const state = snapshotModalState
@@ -247,41 +248,8 @@ function VolumeInfo({ selectedVolume, snapshotModalState, engineImages, hosts, c
             Conditions:
           </span>
           <div className={styles.control} style={{ display: 'flex' }}>
-            {selectedVolume && selectedVolume.conditions && Object.keys(selectedVolume.conditions).filter((key) => {
-              return key === 'Restore' || key === 'Scheduled' || key === 'TooManySnapshots'
-            }).map((key) => {
-              let title = selectedVolume.conditions[key] ? (<div>
-                {selectedVolume.conditions[key].type && <div style={{ marginBottom: 5 }}>Name: {selectedVolume.conditions[key].type}</div>}
-                {selectedVolume.conditions[key].lastProbeTime && <div style={{ marginBottom: 5 }}>Last Probe Time: {formatDate(selectedVolume.conditions[key].lastProbeTime)}</div>}
-                {selectedVolume.conditions[key].lastTransitionTime && <div style={{ marginBottom: 5 }}>Last Transition Time: {formatDate(selectedVolume.conditions[key].lastTransitionTime)}</div>}
-                {selectedVolume.conditions[key].message && <div style={{ marginBottom: 5 }}>Message: {selectedVolume.conditions[key].message}</div>}
-                {selectedVolume.conditions[key].reason && <div style={{ marginBottom: 5 }}>Reason: {selectedVolume.conditions[key].reason}</div>}
-                {selectedVolume.conditions[key].status && <div style={{ marginBottom: 5 }}>Status: {selectedVolume.conditions[key].status}</div>}
-              </div>) : ''
-              let icon = ''
-              if (key === 'TooManySnapshots') {
-                if (selectedVolume.conditions[key] && selectedVolume.conditions[key].status && (selectedVolume.conditions[key].status.toLowerCase() === 'false' || selectedVolume.conditions[key].reason === '')) {
-                  icon = <IconSnapshot fill="#27ae60" />
-                  title = (<div>
-                    {selectedVolume.conditions[key].type && <div style={{ marginBottom: 5 }}>Name: {selectedVolume.conditions[key].type}</div>}
-                    {selectedVolume.conditions[key].lastTransitionTime && <div style={{ marginBottom: 5 }}>Last Transition Time: {formatDate(selectedVolume.conditions[key].lastTransitionTime)}</div>}
-                    <div style={{ marginBottom: 5 }}>Status: The snapshot number threshold has not been exceeded</div>
-                  </div>)
-                } else {
-                  icon = <IconSnapshot fill="#f15354" />
-                }
-              } else if (key === 'Restore') {
-                icon = selectedVolume.conditions[key].status && (selectedVolume.conditions[key].status.toLowerCase() === 'true' || selectedVolume.conditions[key].reason === '') ? <Icon className="healthy" style={{ marginRight: 5, color: selectedVolume.conditions[key].reason === '' && selectedVolume.conditions[key].status.toLowerCase() === 'false' ? '#666666' : '#27ae60' }} type="check-circle" /> : <Icon className="faulted" style={{ marginRight: 5 }} type="exclamation-circle" />
-              } else {
-                icon = selectedVolume.conditions[key].status && selectedVolume.conditions[key].status.toLowerCase() === 'true' ? <Icon className="healthy" style={{ marginRight: 5 }} type="check-circle" /> : <Icon className="faulted" style={{ marginRight: 5 }} type="exclamation-circle" />
-              }
-              let text = key !== 'TooManySnapshots' ? selectedVolume.conditions[key].type : ''
-
-              return (<Tooltip key={key} title={title}><div style={{ display: 'flex', alignItems: 'center', marginRight: 10 }}>
-                  {icon}{text}
-                </div></Tooltip>)
-            })}
-            </div>
+            {selectedVolume && selectedVolume.conditions && Object.keys(selectedVolume.conditions).filter((key) => ['Restore', 'Scheduled', 'TooManySnapshots'].includes(key)).map((key) => <ConditionTooltip key={key} selectedVolume={selectedVolume} conditionKey={key} />)}
+          </div>
         </div>
       </div>
       <div className={styles.row}>

diff --git a/src/routes/volume/detail/VolumeInfo.less b/src/routes/volume/detail/VolumeInfo.less
@@ -11,8 +11,8 @@
 .expendVolumeIcon {
   font-size: 38px;
   position: absolute;
-  top: -13px; 
+  top: -13px;
   width: 100%;
   height: 100%;
   left: -9px;
-}
+}