Fixes #24361: Status point next the node hostname doesn't provide muc…

…h info
Normation · Mar 27, 2024 · a0814ce · a0814ce
1 parent ab60a4b
commit a0814ce
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 23 deletions.
diff --git a/...rces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala b/...rces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
@@ -483,9 +483,7 @@ object DisplayNode extends Loggable {
     }
 
     val nodeStateIcon = (
-      <span class={"node-state " ++ getNodeState(node.rudderSettings.state).toLowerCase} title={
-        getNodeState(node.rudderSettings.state)
-      }></span>
+      <span class={"node-state " ++ getNodeState(node.rudderSettings.state).toLowerCase}></span>
     )
 
     <div class="header-title">

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss
@@ -38,9 +38,6 @@
 // Modules
 @use 'rudder-variables' as *;
 
-// Variables
-$node-state-size: 14px;
-
 // Override Rudder template
 .rudder-template {
   .header-title{
@@ -66,6 +63,12 @@ $node-state-size: 14px;
   font-size: 24px !important;
 }
 
+#nodeHeaderInfo {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .page-title-description{
   padding: 0 15px;
   margin-bottom: 8px;
@@ -103,33 +106,50 @@ $node-state-size: 14px;
 }
 
 .node-state{
-  display: inline-block;
-  width: $node-state-size;
-  height: $node-state-size;
-  border-radius: 50%;
+  display: inline-flex;
+  padding: 6px 8px;
+  border-radius: 4px;
   background-color: #4eb934;
+  color: #fff;
+  font-size: 0.8rem;
+  align-items: baseline;
 
-  &.ignored:after{
+  &:after{
+    content : "ENABLED";
+  }
+  &.ignored{
     background-color: #a4aebf;
+    &:after{
+      content : "IGNORED";
+    }
   }
-  &.empty-policies:after{
+  &.empty-policies{
     background-color: #7591c599;
+    &:after{
+      content : "EMPTY POLICIES";
+    }
   }
-  &.initializing:after{
-    color: #08a3ef;
+  &.initializing{
+    background-color: #08a3ef;
+    &:after{
+      content : "INITIALIZING";
+    }
+    &:before{
     content: "\f1ce";
-    font: normal normal normal 14px/1 inherit;
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    background-color: transparent;
-    font-weight: bold;
-    font-size: 1.1em;
-    animation: fa-spin 2s infinite linear;
-    height: 14px;
-    width: auto;
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+      background-color: transparent;
+      font-weight: bold;
+      font-size: 1.1em;
+      animation: fa-spin 2s infinite linear;
+      margin-right: 4px;
+    }
   }
   &.preparing-eol:after{
     background-color: #EF9600;
+    &:after{
+      content : "PREPARING EOL";
+    }
   }
 }
 .machine-os-info {