show different text color for disk status in backing image modal

Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · May 18, 2024 · 4df5d92 · 4df5d92
1 parent 4b65102
commit 4df5d92
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/src/routes/backingImage/BackingImage.less b/src/routes/backingImage/BackingImage.less
@@ -8,7 +8,7 @@
   }
   .parametersContainer {
     margin-bottom: 10px;
-    display: grid; 
+    display: grid;
     grid-template-columns: 36% 63%;
     grid-row-gap: 15px;
     div {

diff --git a/src/routes/backingImage/DiskStateMapDetail.js b/src/routes/backingImage/DiskStateMapDetail.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Table, Modal, Progress, Tooltip, Card, Icon } from 'antd'
 import DiskStateMapActions from './DiskStateMapActions'
 import { ModalBlur, DropOption } from '../../components'
+import { diskStatusColorMap } from '../../utils/filter'
 import style from './BackingImage.less'
 const confirm = Modal.confirm
 
@@ -74,14 +75,36 @@ const modal = ({
       title: 'Status',
       dataIndex: 'status',
       key: 'status',
-      width: 150,
+      width: 200,
       className: 'active',
       render: (text, record) => {
+        const defaultGreyColor = { color: '#dee1e3', bg: 'rgba(222,225,227,.05)' }
+        const colorMap = diskStatusColorMap[text] || defaultGreyColor
         return (
           <div>
-            { text === 'in-progress' ? <Tooltip title={`${record.progress}%`}><div><Progress showInfo={false} percent={record.progress} /></div></Tooltip> : ''}
+            { text === 'in-progress' && (
+              <Tooltip title={`${record.progress}%`}>
+                <div>
+                  <Progress showInfo={false} percent={record.progress} />
+                </div>
+              </Tooltip>
+            )}
             <Tooltip title={record.message}>
-              <div>{text} {record.message ? <Icon type="message" className="color-warning" /> : ''}</div>
+              {text ? (
+                <div
+                  style={{
+                    display: 'inline-block',
+                    width: 'max-content',
+                    padding: '0 4px',
+                    marginRight: '5px',
+                    color: colorMap.color,
+                    border: `1px solid ${colorMap.color}`,
+                    backgroundColor: colorMap.bg,
+                    textTransform: 'capitalize',
+                  }}
+                >{text}</div>
+              ) : <Icon type="sync" style={{ color: '#0077ea' }} spin />}
+              {record.message ? <Icon type="message" className="color-warning" /> : ''}
             </Tooltip>
           </div>
         )
@@ -150,8 +173,8 @@ const modal = ({
               <div>
                 {currentData.parameters && Object.keys(currentData.parameters).length > 0 ? Object.keys(currentData.parameters).map((key) => {
                   return <div style={{ display: 'flex' }} key={key}>
-                    <div style={{ minWidth: 60, fontWeight: 'normal' }}>{key}:</div>
-                    <div style={{ marginLeft: 10, fontWeight: 'normal' }}>{currentData.parameters[key]}</div>
+                    <div style={{ minWidth: 'fit-content', fontWeight: 'normal' }}>{key}:</div>
+                    <div style={{ marginLeft: 5, fontWeight: 'normal' }}>{currentData.parameters[key]}</div>
                   </div>
                 }) : <Tooltip title="empty"><Icon type="stop" className="color-warning" /></Tooltip>}
               </div>

diff --git a/src/utils/filter.js b/src/utils/filter.js
@@ -26,14 +26,22 @@ const isAutoEvicting = (node) => node.conditions && node.conditions.Ready && nod
 const isDisabled = (node) => node.conditions && node.conditions.Ready && node.conditions.Ready.status.toLowerCase() === 'true'
                                              && (node.allowScheduling === false || Object.values(node.disks).every(d => d.allowScheduling === false))
 const isDown = (node) => node.conditions && node.conditions.Ready && node.conditions.Ready.status.toLowerCase() === 'false'
+
+export const diskStatusColorMap = {
+  ready: { color: '#27AE5F', bg: 'rgba(39,174,95,.05)' }, // green
+  'in-progress': { color: '#F1C40F', bg: 'rgba(241,196,15,.05)' }, // yellow
+  'ready-for-transfer': { color: '#F1C40F', bg: 'rgba(241,196,15,.05)' }, // yellow
+  'failed-and-cleanup': { color: '#F15354', bg: 'rgba(241,83,84,.05)' }, // red
+}
+
 export const nodeStatusColorMap = {
-  schedulable: { color: '#27AE5F', bg: 'rgba(39,174,95,.05)' },
-  unschedulable: { color: '#F1C40F', bg: 'rgba(241,196,15,.05)' },
+  schedulable: { color: '#27AE5F', bg: 'rgba(39,174,95,.05)' }, // green
+  unschedulable: { color: '#F1C40F', bg: 'rgba(241,196,15,.05)' }, // yellow
   // autoEvicting nodes are a subset of unschedulable nodes. We use the same color to represent both.
-  autoEvicting: { color: '#F1C40F', bg: 'rgba(241,196,15,.05)' },
-  down: { color: '#F15354', bg: 'rgba(241,83,84,.1)' },
-  disabled: { color: '#dee1e3', bg: 'rgba(222,225,227,.05)' },
-  unknown: { color: '#F15354', bg: 'rgba(241,83,84,.05)' },
+  autoEvicting: { color: '#F1C40F', bg: 'rgba(241,196,15,.05)' }, // yellow
+  down: { color: '#F15354', bg: 'rgba(241,83,84,.1)' }, // red
+  disabled: { color: '#dee1e3', bg: 'rgba(222,225,227,.05)' }, // grey
+  unknown: { color: '#F15354', bg: 'rgba(241,83,84,.05)' }, // red
 }
 export function getNodeStatus(node) {
   // autoEvicting nodes are a subset of unschedulable nodes and the autoEvicting status takes precedence for display.
@@ -62,7 +70,7 @@ export function schedulingDisabledNode(data) { return data.filter(node => isDisa
 // Node is not ready by condition.
 export function downNode(data) { return data.filter(node => isDown(node)) }
 
-export function filterData(data, field, value) {
+function filterData(data, field, value) {
   return data.filter(item => (item[field] || '').toLowerCase().indexOf(value.toLowerCase()) > -1)
 }