show different text color for disk status in backing image modal

Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · May 24, 2024 · 30c1e41 · 30c1e41
1 parent a481019
commit 30c1e41
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 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/index.js b/src/routes/backingImage/index.js
@@ -76,13 +76,13 @@ class BackingImage extends React.Component {
     if (field && (value || createdFromValue)) {
       switch (field) {
         case 'name':
-          backingImages = backingImages.filter((image) => image.name.includes(value.trim()))
+          backingImages = backingImages.filter((image) => (value ? image.name.includes(value.trim()) : true))
           break
         case 'uuid':
-          backingImages = backingImages.filter((image) => image.uuid.includes(value.trim()))
+          backingImages = backingImages.filter((image) => (value ? image.uuid.includes(value.trim()) : true))
           break
         case 'sourceType':
-          backingImages = backingImages.filter((image) => image.sourceType === createdFromValue.trim())
+          backingImages = backingImages.filter((image) => (createdFromValue ? image.sourceType === createdFromValue?.trim() : true))
           break
         default:
           break

diff --git a/src/utils/filter.js b/src/utils/filter.js
@@ -35,13 +35,13 @@ export const diskStatusColorMap = {
 }
 
 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.
@@ -70,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)
 }