Fixes #9217: Broken CSS in inventory tabs

Normation · Oct 10, 2016 · 3885c1d · 3885c1d
1 parent 4ac4311
commit 3885c1d
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 17 deletions.
diff --git a/rudder-web/src/main/scala/com/normation/rudder/web/components/ShowNodeDetailsFromNode.scala b/rudder-web/src/main/scala/com/normation/rudder/web/components/ShowNodeDetailsFromNode.scala
@@ -233,7 +233,17 @@ class ShowNodeDetailsFromNode(
                 bindNode(node, sm, withinPopup,displayCompliance, globalMode) ++ Script(OnLoad(
                   DisplayNode.jsInit(node.id, sm.node.softwareIds, "") &
                   OnLoad(buildJsTree(groupTreeId) &
-                  JsRaw(s"""$$( "#${detailsId}" ).tabs({ active : ${tab} } )"""))
+                  JsRaw(s"""
+                    $$( "#${detailsId}" ).tabs({ active : ${tab} } );
+                    $$('#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a').on('click',function(){
+                      var tab = $$(this).attr('href');
+                      $$('#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a.active').removeClass('active');
+                      $$(this).addClass('active');
+                      $$('#nodeInventory > .sInventory > .sInventory').hide();
+                      $$(tab).show();
+                    });
+                    $$('#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a')[0].click();
+                    """))
                 ))
               case e:EmptyBox =>
                 val msg = e ?~! s"Could not get global policy mode when getting node '${node.id.value}' details"

diff --git a/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala b/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
@@ -210,11 +210,7 @@ object DisplayNode extends Loggable {
       } &
       // for the software tab, we check for the panel id, and the firstChild id
       // if the firstChild.id == softGridId, then it hasn't been loaded, otherwise it is softGridId_wrapper
-      JsRaw(s"""
-$$("#${detailsId}").bind( "show", function(event, ui) {
-  if(ui.panel.id== '${softPanelId}' && ui.panel.firstChild.id == '${softGridId}') { ${  SHtml.ajaxCall(JsRaw("'"+nodeId.value+"'"), loadSoftware(jsId, softIds) )._2.toJsCmd}; }
-});
-""")
+      JsRaw(s"""${  SHtml.ajaxCall(JsRaw("'"+nodeId.value+"'"), loadSoftware(jsId, softIds) )._2.toJsCmd}""")
     )
   }
 
@@ -258,8 +254,8 @@ $$("#${detailsId}").bind( "show", function(event, ui) {
       displayTabVideos(jsId, sm) ::
       Nil
 
-      <div id={htmlId(jsId,"details_")} class="sInventory tabsv">
-        <ul>{mainTabDeclaration}</ul>
+      <div id={htmlId(jsId,"details_")} class="sInventory tabsv ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-vertical ui-helper-clearfix arrondis">
+        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all arrondisleft">{mainTabDeclaration}</ul>
         {tabContent.flatten}
       </div>
   }
@@ -400,7 +396,10 @@ $$("#${detailsId}").bind( "show", function(event, ui) {
            case None => NodeSeq.Empty
            case Some((mode,explanation)) =>
             <b>Agent policy mode :</b><span id="badge-apm" class="tw-bs"></span><br/>  ++
-            Script(OnLoad(JsRaw(s"""$$('#badge-apm').append(createBadgeAgentPolicyMode('node',"${mode}","${explanation}"));$$('.rudder-label').bsTooltip();""")))
+            Script(OnLoad(JsRaw(s"""
+              $$('#badge-apm').append(createBadgeAgentPolicyMode('node',"${mode}","${explanation}"));
+              $$('.rudder-label').bsTooltip();
+            """)))
          } }
           { displayServerRole(sm, inventoryStatus) }
           <b>Inventory date:</b>  {sm.node.inventoryDate.map(DateFormaterService.getFormatedDate(_)).getOrElse("Unknown")}<br/>
@@ -562,11 +561,21 @@ $$("#${detailsId}").bind( "show", function(event, ui) {
 
   private def displayTabGrid[T](jsId:JsNodeId)(eltName:String, optSeq:Box[Seq[T]],title:Option[String]=None)(columns:List[(String, T => NodeSeq)]) = {
 
-    <div id={htmlId(jsId,"sd_"+eltName +"_")} class="sInventory, overflow_auto">{
+    <div id={htmlId(jsId,"sd_"+eltName +"_")} class="sInventory overflow_auto" style="display:none;">{
       optSeq match {
-        case Empty => <span>No matching components detected on this node</span>
+        case Empty =>
+          <div class="tw-bs">
+            <div class="col-xs-12 alert alert-warning">
+              <span>No matching components detected on this node</span>
+            </div>
+          </div>
         case Failure(m,_,_) => <span class="error">Error when trying to fetch file systems. Reported message: {m}</span>
-        case Full(seq) if (seq.isEmpty && eltName != "soft") => <span>No matching components detected on this node</span>
+        case Full(seq) if (seq.isEmpty && eltName != "soft") =>
+          <div class="tw-bs">
+            <div class="col-xs-12 alert alert-warning">
+              <span>No matching components detected on this node</span>
+            </div>
+          </div>
         case Full(seq) =>
           <table cellspacing="0" id={htmlId(jsId,eltName+"_")} class="tablewidth">
           { title match {

diff --git a/rudder-web/src/main/scala/com/normation/rudder/web/services/LogDisplayer.scala b/rudder-web/src/main/scala/com/normation/rudder/web/services/LogDisplayer.scala
@@ -139,11 +139,7 @@ class LogDisplayer(
           createTechnicalLogsTable("${gridName}",[], "${S.contextPath}",function() {${ajaxRefresh.toJsCmd}}, pickEventLogsInInterval);""") &
         // Load data asynchronously
         JsRaw(
-      s"""
-        $$("#details_${id}").bind( "show", function(event, ui) {
-          if(ui.panel.id== 'node_logs') { ${ajaxRefresh.toJsCmd} }
-        });
-       """
+      s"""${ajaxRefresh.toJsCmd}"""
     )))
   }
 

diff --git a/rudder-web/src/main/webapp/style/rudder/rudder.css b/rudder-web/src/main/webapp/style/rudder/rudder.css
@@ -2712,3 +2712,39 @@ label span.text-fit{
   border: 1px solid #aaaaaa;
   background-color: #f1f1f1;
 }
+
+#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a:hover{
+  color: #c77405;
+}
+#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a {
+  color: #f78f1f;
+  transition-duration:.2s;
+  text-decoration: none;
+  padding: .5em 1em;
+  position: relative;
+  left: -0.25px;
+}
+#nodeInventory .ui-tabs-vertical .ui-tabs-nav li a.active {
+  background-color: #f6f6f6;
+  border-radius: 4px;
+  color: #333;
+}
+#serverDetails .sInventory, #nodeInventory, #node_inventory{
+  border : none !important;
+}
+#nodeInventory .ui-tabs-nav{
+	margin-top: 5px;
+}
+#node_inventory{
+	padding : 0 !important;
+}
+#node_inventory .sInventory .sInventory{
+  padding:5px 0 5px 5px;
+  border: none !important;
+}
+#serverDetails .dataTables_filter input {
+  padding: 8px 5px 8px 30px;
+}
+#serverDetails .dataTables_wrapper_top .dataTables_length{
+  padding: 5px;
+}