Work in progress

RaphaelGauthier · Dec 14, 2023 · 9608ca3 · 9608ca3
1 parent af845fa
commit 9608ca3
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 43 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/homePage.js b/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/homePage.js
@@ -139,7 +139,7 @@ function homePage (
   gauge.animationSpeed = 14; // set animation speed (32 is default value)
 
   if(globalGauge < 0) { //put placeholder texte
-    $("#globalCompliance").html('<div class="placeholder progress"></div>');
+    $("#globalCompliance").html('<div class="placeholder-bar progress"></div>');
     $("#globalComplianceStats").html(
       "<h4>You only have system rules. They are ignored in global compliance.</h4>"+
       "<h4>Please go to <a href='/rudder/secure/configurationManager/ruleManagement'>rule management</a> to define your rules.</h4>"

diff --git a/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder-datatable.js b/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder-datatable.js
@@ -1921,11 +1921,14 @@ function reportsSum (complianceArray) {
  */
 function buildComplianceBar(compliance, minPxSize) {
 
-  if (Array.isArray(compliance)) {
+  var container = $('<div></div>');
+  var content;
+
+  if (Array.isArray(compliance) && compliance.length > 0) {
     //Set the default minimal size and displayed value of compliance bars if not defined
     if (minPxSize === undefined) minPxSize = 5;
 
-    var content = $('<div class="progress"></div>');
+    content = $('<div class="progress"></div>');
 
     // Correct compliance array, if sum is over 100, fix it y removing the excedent amount to the max value
     var sum = compliance.reduce(function(pv, cv) {return pv[1] + cv[1]; }, 0);
@@ -2041,17 +2044,15 @@ function buildComplianceBar(compliance, minPxSize) {
       content.append('<div class="progress-bar progress-bar-no-report" style=" width:'+complianceBars[6].width+'" title="No report: '+tooltip+'%">'+complianceBars[6].value+'</div>');
     }
 
-    var container = $('<div></div>');
-    container.append(content);
-
     $(window).on('resize',function(){
       adjustComplianceBar(content);
     });
 
-    return container
   } else {
-    return compliance
+    content = $("<div class='placeholder-bar progress'></div>");
   }
+  container.append(content);
+  return container
 }
 
 function adjustComplianceBar(bar){

diff --git a/...dder-web/src/main/scala/com/normation/rudder/web/components/ShowNodeDetailsFromNode.scala b/...dder-web/src/main/scala/com/normation/rudder/web/components/ShowNodeDetailsFromNode.scala
@@ -254,6 +254,7 @@ class ShowNodeDetailsFromNode(
     val id = JsNodeId(node.id)
     ("#nodeHeader" #> DisplayNode.showNodeHeader(inventory, Some(node)) &
     "#confirmNodeDeletion" #> showDeleteButton(inventory.node.main) &
+    "#nbGroups *" #> groupLib.getTarget(node).keySet.size.toString &
     "#node_groupTree" #>
     <div id={groupTreeId}>
           <ul>{DisplayNodeGroupTree.buildTreeKeepingGroupWithNode(groupLib, node, None, None, Map(("info", _ => Noop)))}</ul>

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
@@ -533,18 +533,24 @@ object DisplayNode extends Loggable {
       }.headOption.getOrElse("Not found")
     }</div>
           {displayPolicyServerInfos(sm)}
-          <div><label>Administrator account:</label> {sm.node.main.rootUser}</div>
+          <div>
+            {
+            creationDate.map { creation =>
+              <xml:group><label>Accepted since:</label> {DateFormaterService.getDisplayDate(creation)}</xml:group>
+            }.getOrElse(NodeSeq.Empty)
+            }
+          </div>
           {
       sm.node.agents.headOption match {
         case Some(agent) =>
           val checked     = (sm.node.main.status, sm.node.main.keyStatus) match {
             case (AcceptedInventory, CertifiedKey) =>
               <span>
-                <span class="glyphicon glyphicon-ok text-success" data-bs-toggle="tooltip" title="Inventories for this Node must be signed with this key"></span>
+                <span class="fa fa-check text-success" data-bs-toggle="tooltip" title="Inventories for this Node must be signed with this key"></span>
               </span>
             case (AcceptedInventory, UndefinedKey) =>
               <span>
-                <span class="glyphicon glyphicon-exclamation-sign text-warning" data-bs-toggle="tooltip" title="Certificate for this node has been reset, next inventory will be trusted automatically"></span>
+                <span class="fa fa-exclamation-triangle text-warning" data-bs-toggle="tooltip" title="Certificate for this node has been reset, next inventory will be trusted automatically"></span>
               </span>
             case _                                 => // not accepted inventory? Should not get there
               NodeSeq.Empty
@@ -599,7 +605,7 @@ object DisplayNode extends Loggable {
         </div>
 
         <div class="status-info col-lg-6 col-sm-5 col-xs-12">
-          <h3>Status information</h3>
+          <h3>Monitoring</h3>
           <div class="node-compliance-bar"></div>
           <div>
             <label>Inventory created (node local time):</label>  {
@@ -609,13 +615,6 @@ object DisplayNode extends Loggable {
           <div>
             <label>Inventory received:</label>  {
       sm.node.receiveDate.map(DateFormaterService.getDisplayDate(_)).getOrElse("Unknown")
-    }
-          </div>
-          <div>
-            {
-      creationDate.map { creation =>
-        <xml:group><label>Accepted since:</label> {DateFormaterService.getDisplayDate(creation)}</xml:group>
-      }.getOrElse(NodeSeq.Empty)
     }
           </div>
           <div>

diff --git a/...er/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNodeGroupTree.scala b/...er/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNodeGroupTree.scala
@@ -85,7 +85,7 @@ object DisplayNodeGroupTree extends Loggable {
 
       private[this] val localOnClickTarget = onClickTarget.map(_.curried(category))
 
-      private[this] val tooltipContent = s"<h3>${category.name}</h3>\n<div>${category.description}</div>"
+      private[this] val tooltipContent = s"<h4>${category.name}</h4>\n<div class='tooltip-content'>${category.description}</div>"
       private[this] val xml            = (
         <span class="treeGroupCategoryName" data-bs-toggle="tooltip" title={tooltipContent}>{category.name}</span>
       )
@@ -195,7 +195,7 @@ object DisplayNodeGroupTree extends Loggable {
         }
 
         val xml = {
-          val tooltipContent = "<div>\n<h3>{targetInfo.name}</h3>\n<div>{targetInfo.description}</div>\n</div>"
+          val tooltipContent = s"<h4>${targetInfo.name}</h4>\n<div class='tooltip-content'>${targetInfo.description}</div>"
           <span class="treeGroupName" data-bs-toggle="tooltip" title={tooltipContent}>
             {targetInfo.name}
             {if (targetInfo.isSystem) <small class="greyscala"> - System</small>}

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-dashboard.css b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-dashboard.css
@@ -119,16 +119,6 @@
   margin-top: 15px;
 }
 
-.placeholder.progress{
-  background: repeating-linear-gradient(
-    135deg,
-    #eef1f8,
-    #eef1f8 10px,
-    #f8f9fc 10px,
-    #f8f9fc 20px
-  );
-  box-shadow: inset 0 0 2px rgb(0 0 0 / 10%);
-}
 #globalComplianceStats h4 {
   padding: 0 30px;
 }

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
@@ -85,6 +85,7 @@ $node-logo-size: 50px;
 #node_summary{
   display: flex;
   padding: 0 !important;
+  height: 100%;
 }
 
 .rudder-ui-tabs {
@@ -120,11 +121,14 @@ $node-logo-size: 50px;
   top: 2px;
 }
 #nodeGroups > h3 {
+  display: flex;
+  align-items: center;
   color: #041922;
   padding: 15px 15px 10px !important;
   margin: 0;
-  font-size: 20px;
-  background-color: #f7f7f7;
+  font-size: 1.3rem;
+  background-color: #F8F9FC;
+  border-bottom: 1px solid #D6DEEF;
 }
 
 .node-state{
@@ -208,14 +212,10 @@ $node-logo-size: 50px;
 .rudder-info   > h3,
 .status-info   > h3,
 .accounts-info > h3{
-  color: #0419228a;
-  padding: 5px 0 !important;
+  color: #041922;
   display: block;
   margin-bottom: 10px;
-  line-height: inherit;
-  border: 0;
-  border-bottom: 2px solid #d6deef;
-  font-size: 18px;
+  font-size: 1.3rem;
 }
 .rudder-info   > div,
 .status-info   > div,
@@ -226,9 +226,7 @@ $node-logo-size: 50px;
 .rudder-info   > div label,
 .status-info   > div label,
 .accounts-info > div label{
-  font-size: 14px;
-  display: inline-block;
-  margin-bottom: 0;
+  font-weight: bold;
 }
 .rudder-info .rudder-label {
   font-size: 12px;
@@ -370,6 +368,9 @@ $node-logo-size: 50px;
 pre.display-keys{
   padding: 12px;
   border-top-left-radius: 0;
+  border: 1px solid #D6DEEF;
+  border-radius: 0px 4px 4px 4px;
+  background-color: #F8F9FC;
 }
 pre.display-keys > label:first-child{
   margin-top:0;

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-progress-bar.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-progress-bar.scss
@@ -81,6 +81,18 @@ $bar-stripped-gradient : linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, t
         }
       }
     }
+
+    &.placeholder-bar{
+       background: repeating-linear-gradient(
+         135deg,
+         #eef1f8,
+         #eef1f8 10px,
+         #f8f9fc 10px,
+         #f8f9fc 20px
+       );
+       box-shadow: inset 0 0 2px rgb(0 0 0 / 10%);
+       width: 100%;
+     }
   }
 
   .progress-bar-reportsdisabled,

diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/server/server_details.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/server/server_details.html
@@ -104,7 +104,7 @@
             <div id="node_summary">
               <div id="nodeDetails"></div>
               <div id="nodeGroups">
-                <h3>Groups containing this node</h3>
+                <h3>Groups containing this node <span class="badge" id="nbGroups"></span></h3>
                 <div id="node_groupTree"></div>
               </div>
             </div>