From 85390df0b8c0ec64d09e02c98b6154fa8203782f Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Tue, 23 Jun 2020 15:04:36 +0200
Subject: [PATCH] fix labelManipulation function of ICs (naming of labels
 changed with transition to bootstrap 4.5), state now showing colored.

---
 src/common/table.js |  5 ++++-
 src/ic/ics.js       | 23 ++++++++++++-----------
 src/styles/app.css  |  2 +-
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/common/table.js b/src/common/table.js
index 020f9bd..6ffd303 100644
--- a/src/common/table.js
+++ b/src/common/table.js
@@ -85,15 +85,18 @@ class CustomTable extends Component {
         labelContent = child.props.labelModifier(labelContent, data);
       }
 
+      let labelStyle = child.props.labelStyle(data[labelKey], data)
+
       cell.push(<span>
         &nbsp;
-          <FormLabel column={false} classes={child.props.labelStyle(data[labelKey], data)}>
+          <FormLabel column={false} className={labelStyle}>
             {labelContent.toString()}
           </FormLabel>
       </span>
       );
     }
 
+
     if (child.props.dataIndex) {
       cell.push(index);
     }
diff --git a/src/ic/ics.js b/src/ic/ics.js
index 603e474..e24cd93 100644
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@@ -220,39 +220,40 @@ class InfrastructureComponents extends Component {
     return Date.now() - new Date(component.stateUpdatedAt) > fiveMinutes;
   }
 
-  static stateLabelStyle(state, component){
-    var style = [ 'label' ];
+  stateLabelStyle(state, component){
+
+    var style = [ 'badge' ];
 
     if (InfrastructureComponents.isICOutdated(component) && state !== 'shutdown') {
-      style.push('label-outdated');
+      style.push('badge-outdated');
     }
 
     switch (state) {
       case 'running':
-        style.push('label-success');
+        style.push('badge-success');
         break;
 
       case 'paused':
-        style.push('label-info');
+        style.push('badge-info');
         break;
 
       case 'idle':
-        style.push('label-primary');
+        style.push('badge-primary');
         break;
 
       case 'error':
-        style.push('label-danger');
+        style.push('badge-danger');
         break;
 
       case 'shutdown':
-        style.push('label-warning');
+        style.push('badge-warning');
         break;
 
       default:
-        style.push('label-default');
+        style.push('badge-default');
     }
 
-    return style.join(' ');
+    return style.join(' ')
   }
 
   static stateUpdateModifier(updatedAt) {
@@ -273,7 +274,7 @@ class InfrastructureComponents extends Component {
         <Table data={this.state.ics}>
           <TableColumn checkbox onChecked={(index, event) => this.onICChecked(index, event)} width='30' />
           <TableColumn title='Name' dataKeys={['name', 'rawProperties.name']} />
-          <TableColumn title='State' labelKey='state' tooltipKey='error' labelModifier={InfrastructureComponents.stateLabelModifier} labelStyle={InfrastructureComponents.stateLabelStyle} />
+          <TableColumn title='State' labelKey='state' tooltipKey='error' labelStyle={(state, component) => this.stateLabelStyle(state, component)} />
           <TableColumn title='Category' dataKeys={['category', 'rawProperties.category']} />
           <TableColumn title='Type' dataKeys={['type', 'rawProperties.type']} />
           <TableColumn title='Location' dataKeys={['properties.location', 'rawProperties.location']} />
diff --git a/src/styles/app.css b/src/styles/app.css
index e51cf0c..97c6548 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -400,6 +400,6 @@ body {
   margin-right: 0 !important;
 }
 
-.label-outdated {
+.badge-outdated {
   opacity: 0.4;
 }