Work in progress

RaphaelGauthier · Aug 31, 2020 · 22ccbd3 · 22ccbd3
1 parent 31e33d7
commit 22ccbd3
Show file tree

Hide file tree

Showing 21 changed files with 588 additions and 600 deletions.
diff --git a/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala b/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala
@@ -68,13 +68,6 @@ import com.normation.box._
 
 object DirectiveEditForm {
 
-  /**
-   * This is part of component static initialization.
-   * Any page which contains (or may contains after an ajax request)
-   * that component have to add the result of that method in it.
-   */
-  def staticInit: NodeSeq = RuleGrid.staticInit
-
   private def body = ChooseTemplate(
       "templates-hidden" :: "components" :: "ComponentDirectiveEditForm" :: Nil
     , "component-body"
@@ -142,7 +135,6 @@ class DirectiveEditForm(
   }
 
   def showForm(): NodeSeq = {
-    staticInit ++
     (
       "#container [id]" #> htmlId_policyConf &
       "#editForm" #> showDirectiveForm()
@@ -260,7 +252,7 @@ class DirectiveEditForm(
         ( "" , NodeSeq.Empty )
     }
     (
-      "#editForm *" #> { (n: NodeSeq) => SHtml.ajaxForm(n) } andThen
+      "#editForm" #> { (n: NodeSeq) => SHtml.ajaxForm(n) } andThen
       // don't show the action button when we are creating a popup
       "#pendingChangeRequestNotification" #> { xml:NodeSeq =>
           PendingChangeRequestDisplayer.checkByDirective(xml, directive.id)
@@ -273,13 +265,14 @@ class DirectiveEditForm(
       ClearClearable &
       //activation button: show disactivate if activated
       "#directiveTitle *" #> <span class={ if(fullActiveTechnique.isEnabled) "" else "is-disabled" }>{directive.name}</span> &
+      "#shortDescription *" #> directive.shortDescription &
       "#disactivateButtonLabel" #> {
         if (directive.isEnabled) "Disable" else "Enable"
        } &
-       "#removeAction *" #> {
+       "#removeAction" #> {
          SHtml.ajaxSubmit("Delete", () => onSubmitDelete(),("class" ,"btn btn-danger"))
        } &
-       "#desactivateAction *" #> {
+       "#desactivateAction" #> {
          val status = directive.isEnabled ? DGModAction.Disable | DGModAction.Enable
          SHtml.ajaxSubmit(status.name, () => onSubmitDisable(status), ("class" ,"btn btn-default"))
        } &
@@ -299,7 +292,7 @@ class DirectiveEditForm(
       "#techniqueDescription *" #> technique.description &
       "#isDisabled" #> {
         if (!fullActiveTechnique.isEnabled || !directive.isEnabled)
-          <div class="alert alert-warning">
+          <div class="main-alert alert alert-warning">
             <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
             {disableMessage}
             {enableBtn}
@@ -319,7 +312,7 @@ class DirectiveEditForm(
       "#parameters" #> parameterEditor.toFormNodeSeq &
       "#directiveRulesTab *" #> ruleDisplayer &
       "#save" #> { SHtml.ajaxSubmit("Save", onSubmitSave _) % ("id" -> htmlId_save) % ("class" -> "btn btn-success") } &
-      "#notifications *" #> updateAndDisplayNotifications() &
+      "#notifications" #> updateAndDisplayNotifications() &
       "#showTechnical *" #> <button type="button" class="btn btn-technical-details btn-sm btn-primary" onclick="$('#technicalDetails').toggle(400);$(this).toggleClass('opened');">Technical Details</button> &
       "#isSingle *" #> showIsSingle &
       "#compatibilityOs" #> osCompatibility &
@@ -338,8 +331,7 @@ class DirectiveEditForm(
            |checkMigrationButton("${currentVersion}","${versionSelectId}");
            |$$('#${directiveVersion.uniqueFieldId.getOrElse("id_not_found")}').change( function () {
            |  checkMigrationButton("${currentVersion}","${versionSelectId}")
-           |} );
-           |adjustHeight("#edit-box","#directiveToolbar")""".stripMargin)
+           |} );""".stripMargin)
     )
     )
   }
@@ -365,9 +357,7 @@ class DirectiveEditForm(
   }
 
   private[this] def showErrorNotifications() : JsCmd = {
-    onFailureCallback() & Replace("editForm", showDirectiveForm) &
-    //restore user to the update parameter tab
-    JsRaw("""scrollToElement("notifications", "#directiveDetails");""")
+    onFailureCallback() & Replace("editForm", showDirectiveForm)
   }
 
   private[this] def showIsSingle(): NodeSeq = {
@@ -401,6 +391,7 @@ class DirectiveEditForm(
     override def className = "form-control"
     override def labelClassName = "col-xs-12"
     override def subContainerClassName = "col-xs-12"
+    override def errorClassName = ""
     override def validations =
       valMinLen(1, "Name must not be empty") _ :: Nil
   }
@@ -772,8 +763,8 @@ class DirectiveEditForm(
       NodeSeq.Empty
     }
     else {
-      <div id="notifications" class="notify">
-        <ul class="field_errors">{notifications.map( n => <li>{n}</li>) }</ul>
+      <div class="main-alert alert alert-danger">
+        <ul>{notifications.map( n => <li>{n}</li>) }</ul>
       </div>
     }
   }

diff --git a/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala b/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
@@ -181,7 +181,7 @@ class NodeGroupForm(
     val displayCompliance = DisplayColumn.FromConfig
     val ruleGrid = new RuleGrid("rules_for_current_group", None, false, None, displayCompliance, displayCompliance)
     val rules = dependencyService.targetDependencies(target).map( _.rules.toSet.filter(!_.isSystem).map(_.id)).toOption
-    RuleGrid.staticInit ++ ruleGrid.rulesGridWithUpdatedInfo(None, false, false) ++ Script(OnLoad(ruleGrid.asyncDisplayAllRules(rules).applied))
+    ruleGrid.rulesGridWithUpdatedInfo(None, false, false) ++ Script(OnLoad(ruleGrid.asyncDisplayAllRules(rules).applied))
   }
   private[this] val groupNameString = nodeGroup.fold(
     t => rootCategory.allTargets.get(t).map(_.name).getOrElse(t.target)

diff --git a/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleDisplayer.scala b/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleDisplayer.scala
@@ -129,7 +129,7 @@ class RuleDisplayer (
   }
   def actionButtonCategory: NodeSeq =
     if (directive.isEmpty) {
-      SHtml.ajaxButton("", () => showCategoryPopup(None), ("class" -> "new-icon category btn btn-success btn-outline btn-sm"))
+      SHtml.ajaxButton("Add Category", () => showCategoryPopup(None), ("class" -> "new-icon category btn btn-success btn-outline btn-sm"))
     } else {
       NodeSeq.Empty
     }

diff --git a/...urces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleGrid.scala b/...urces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleGrid.scala
@@ -73,21 +73,6 @@ import scala.concurrent.ExecutionContext.Implicits.global
 import scala.concurrent._
 import scala.xml._
 
-object RuleGrid {
-  def staticInit =
-    <head>
-      <style type="text/css">
-        #actions_zone , .dataTables_length , .dataTables_filter {{ display: inline-block; }}
-        .greenCompliance {{ background-color: #5cb85c }}
-        .orangeCompliance  {{ background-color: #FF6600 }}
-        .redCompliance  {{ background-color: #c9302c }}
-        .noCompliance   {{ background-color:#b4b4b4; }}
-        .applyingCompliance {{ background-color:#5bc0de; }}
-        .compliance {{ text-align: center; }}
-      </style>
-    </head>
-}
-
 /**
  * An ADT to denote if a column should be display or not,
  * or if is should be decided from config service.

diff --git a/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueEditForm.scala b/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/TechniqueEditForm.scala
@@ -581,7 +581,7 @@ class TechniqueEditForm(
       NodeSeq.Empty
     }
     else {
-      val html = <div id="notifications" class="notify">
+      val html = <div id="notifications">
         <ul class="field_errors">{notifications.map( n => <li>{n}</li>) }</ul></div>
       html
     }

diff --git a/...er/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayDirectiveTree.scala b/...er/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayDirectiveTree.scala
@@ -311,6 +311,7 @@ object DisplayDirectiveTree extends Loggable {
             <span class="tags-label"
                   data-toggle="tooltip"
                   data-placement="top"
+                  data-container="body"
                   data-html="true"
                   data-original-title={tagsTooltipContent}>
               <i class="fa fa-tags"></i>
@@ -434,10 +435,6 @@ object DisplayDirectiveTree extends Loggable {
       if(!angular.element(scopeElmnt).scope()){
         angular.bootstrap(scopeElmnt, ['filters']);
       }
-      adjustHeight('#activeTechniquesTree');
-      $$('#showFiltersDirective').on('click', function () {
-        setTimeout(function(){adjustHeight('#activeTechniquesTree');}, 550);
-      });
       $$(".bsTooltip").bsTooltip({container: "${if(addEditLink){"#editRuleZonePortlet"}else{"#boxDirectiveTree"}}"})
     """))
     directiveLib.subCategories.filterNot(_.isSystem).sortBy( _.name ).flatMap { cat => displayCategory(cat, cat.id.value).toXml }

diff --git a/...b/src/main/scala/com/normation/rudder/web/snippet/configuration/DirectiveManagement.scala b/...b/src/main/scala/com/normation/rudder/web/snippet/configuration/DirectiveManagement.scala
@@ -117,7 +117,6 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
    * Head information (JsTree dependencies,...)
    */
   def head() : NodeSeq = {
-    DirectiveEditForm.staticInit ++
     (
       <head>
         {Script(OnLoad(parseJsArg()))}
@@ -174,8 +173,8 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
                   , false
                 )
               }</ul>
-            case (x, y, z) =>
 
+            case (x, y, z) =>
               (x :: y :: z :: Nil).foreach {
                 case eb: EmptyBox =>
                   val f = eb ?~! "Error when trying to get the root category of Active Techniques"
@@ -204,10 +203,6 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
         }
 
         buildDirectiveTree('#${htmlId_activeTechniquesTree}', [ directiveId ], '${S.contextPath}', 1);
-        $$(window).on('resize',function(){
-          adjustHeight('#activeTechniquesTree');
-        });
-        adjustHeight('#activeTechniquesTree');
         $$('#activeTechniquesTree').on('scroll',function(){$$('.tooltip').hide();});
         createTooltip();
     """)
@@ -223,13 +218,15 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
   def initTechniqueDetails() : MemoizeTransform = SHtml.memoize {
     "#techniqueDetails *" #> ( currentTechnique match {
       case None =>
-        "#info-title *" #> "Directives" &
-        "#details *" #> {
-            <div class="col-lg-12">
-              <div class="col-lg-12 callout-fade callout-info">
-                <div class="marker">
-                  <span class="glyphicon glyphicon-info-sign"></span>
-                </div>
+        ".main-header [class+]" #> "no-header" &
+          "#details *" #> {
+            <div>
+              <style>
+                #policyConfiguration{{
+                display:none;}}
+              </style>
+              <div class="jumbotron">
+                <h1>Directives</h1>
                 <p>A Directive is an instance of a Technique, which allows to set values for the parameters of the latter.</p>
                 <p>Each Directive can have a unique name, and should be completed with a short and a long description, and a collection of parameters for the variables defined by the Technique.</p>
                 <p>Techniques are often available in several versions, numbered X.Y, X being the major version number and Y the minor version number:</p>
@@ -241,7 +238,7 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
                 <p>You can find your own Techniques written in the Technique Editor in the <b>User Techniques</b> category.</p>
               </div>
             </div>
-      }
+          }
 
       case Some((fullActiveTechnique,version)) =>
         fullActiveTechnique.techniques.get(version) match {
@@ -281,35 +278,22 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
                  None
              }
            }.toSeq.flatten.sortBy( _._1 )
-
+           ".main-container [class-]" #> "no-header" &
            "#directiveIntro " #> {
              currentDirectiveSettingForm.get.map { piForm =>
                (".directive *" #> piForm.directive.name)
              }
            } &
            "#techniqueName" #> <span class={ if(fullActiveTechnique.isEnabled) "" else "is-disabled" }>{technique.name}</span> &
-           "#compatibility" #> technique.compatible.map { comp =>
-             { if(comp.os.isEmpty) {
-               NodeSeq.Empty
-             } else {
-               <li><b>Supported operating systems: </b>{comp.os.mkString(", ")}</li>
-             } } ++ {
-             if (comp.agents.isEmpty) {
-               NodeSeq.Empty
-             } else {
-               <li><b>Supported agents: </b>{comp.agents.mkString(", ")}</li>
-             } }
-           } &
            "#techniqueID *" #>  technique.id.name.value &
            "#techniqueDescription *" #>  Script(JsRaw(s"""generateMarkdown(${Str(technique.description).toJsCmd}, "#techniqueDescription")""")) &
            "#techniqueLongDescription" #>  technique.longDescription &
            "#isSingle *" #> showIsSingle(technique) &
-           "#isDisabled *" #> {
+           "#isDisabled" #> {
              if(!fullActiveTechnique.isEnabled)
-               <div class="alert alert-warning">
+               <div class="main-alert alert alert-warning">
                  <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                  This Technique is disabled.
-
                  <a class="btn btn-sm btn-default" href={s"/secure/administration/techniqueLibraryManagement/#${fullActiveTechnique.techniqueName}"}>Edit Technique</a>
                </div>
              else NodeSeq.Empty

diff --git a/...er-web/src/main/scala/com/normation/rudder/web/snippet/configuration/RuleManagement.scala b/...er-web/src/main/scala/com/normation/rudder/web/snippet/configuration/RuleManagement.scala
@@ -48,7 +48,7 @@ import net.liftweb.http.js._
 import JsCmds._
 import com.normation.rudder.web.components.popup.CreateOrCloneRulePopup
 import JE._
-import com.normation.rudder.web.components.{RuleEditForm, RuleGrid}
+import com.normation.rudder.web.components.{RuleEditForm}
 import com.normation.rudder.domain.policies.Rule
 import bootstrap.liftweb.RudderConfig
 import com.normation.plugins.DefaultExtendableSnippet
@@ -93,7 +93,6 @@ class RuleManagement extends DispatchSnippet with DefaultExtendableSnippet[RuleM
 
   def head(changeMsgEnabled : Boolean) : NodeSeq = {
     RuleEditForm.staticInit ++
-    RuleGrid.staticInit ++
     {<head>
       {Script(
         JsRaw("""

diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/angular/filters.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/angular/filters.js
@@ -63,7 +63,6 @@ app.controller('filterTagCtrl', function ($scope, $http, $location, $timeout, $r
       $scope.searchTree($scope.directiveTreeId);
       if($scope.fullPage){
         $timeout(function() {
-        adjustHeight($scope.directiveTreeId);
         },0);
       }
     } else {
@@ -173,9 +172,6 @@ app.controller('filterTagCtrl', function ($scope, $http, $location, $timeout, $r
     if($scope.showFilters){
       $('.input-key').focus();
     }
-    if($scope.fullPage){
-      adjustHeight($scope.directiveTreeId);
-    }
   }
 
   $scope.onlyKey = function(elem){
@@ -296,9 +292,6 @@ app.controller('filterTagCtrl', function ($scope, $http, $location, $timeout, $r
       }
     );
   }
-  if($scope.fullPage){
-    adjustHeight($scope.directiveTreeId);
-  }
 });
 
 app.config(function($locationProvider) {

diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/directive.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/directive.js
@@ -37,25 +37,35 @@
 
 $(document).ready(function(){
   var treeId = '#activeTechniquesTree';
-  var formId = '#edit-box';
   var storageTreeId = 'directiveTreeSettings_nodesState'
-  $(window).on('resize',function(){
-    adjustHeight(treeId);
-    adjustHeight(formId,"#directiveToolbar");
-  });
   $(treeId).on("searchtag.jstree",function(e, data){
 	  data.res.length>0 ? $('#activeTechniquesTree_alert').hide() : $('#activeTechniquesTree_alert').show();
-    adjustHeight(treeId);
   });
   $(treeId).on("clear_search.jstree",function(e, data){
     $('#activeTechniquesTree_alert').hide();
     $(this).jstree(true).show_all();
-    adjustHeight(treeId);
   });
   $(treeId).on('close_node.jstree', function(e, data){
     updateTreeSettings(storageTreeId, data, false);
   });
   $(treeId).on('open_node.jstree', function(e, data){
     updateTreeSettings(storageTreeId, data, true);
   });
-});
+});
+
+function navScroll(event, target, container){
+  if(event) event.preventDefault();
+  var container       = $(container);
+  var target          = $(target);
+  var paddingTop      = 10; // Substract padding-top of the container
+  var anchorDiff      = 20; // Used to trigger the scrollSpy feature
+  var containerOffset = container.offset().top;
+  var targetOffset    = target.offset().top - paddingTop;
+  var offsetDiff      = targetOffset - containerOffset;
+  var scrollTop       = container.scrollTop()
+  if(Math.abs(offsetDiff) > anchorDiff){
+    container.animate({ scrollTop: scrollTop + offsetDiff + anchorDiff }, 200);
+    // TODO : Keep scroll in localstorage
+  }
+  return false;
+}
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder.js
@@ -48,10 +48,12 @@ var bootstrapScrollspy = $.fn.scrollspy.noConflict();
 var bootstrapTab = $.fn.tab.noConflict();
 var bootstrapAffix = $.fn.affix.noConflict();
 var bootstrapModal = $.fn.modal.noConflict();
+
 $.fn.bsModal = bootstrapModal;
 $.fn.bsTooltip = bootstrapTooltip;
 $.fn.bsPopover = bootstrapPopover;
 $.fn.bsTab = bootstrapTab;
+$.fn.bsScrollSpy = bootstrapScrollspy;
 /**
  * Instanciate the tooltip
  * For each element having the "tooltipable" class, when hovering it will look for it's
@@ -553,7 +555,7 @@ function createTextAgentPolicyMode(isNode, currentPolicyMode, explanation){
   var policyMode = currentPolicyMode.toLowerCase();
   var nodeOrDirective = isNode ? "node" : "directive";
   var labelType = "label-"+policyMode;
-  var span = "<span class='label-text " + labelType + " glyphicon glyphicon-question-sign' data-toggle='tooltip' data-placement='top' data-html='true' title=''></span>"
+  var span = "<span class='label-text " + labelType + " glyphicon glyphicon-question-sign' data-toggle='tooltip' data-placement='top' data-html='true' title='' data-container='body'></span>"
   var badge = $(span).get(0);
   var tooltip = policyModeTooltip(nodeOrDirective, policyMode, explanation);
   badge.setAttribute("title", tooltip);