Work in progress

RaphaelGauthier · Feb 14, 2024 · 32c4186 · 32c4186
1 parent ef67ddf
commit 32c4186
Show file tree

Hide file tree

Showing 22 changed files with 508 additions and 588 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/View.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/View.elm
@@ -16,16 +16,16 @@ view : Model -> Html Msg
 view model =
   div [class "tab-table-content"]
   ( List.append
-    [ ul [class "ui-tabs-nav"]
-      [ li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == RulesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode RulesView)]
-          [ text "By Rules"
-          ]
+    [ ul [class "nav nav-underline"]
+      [ li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == RulesView then " active" else "")), onClick (ChangeViewMode RulesView)]
+          [ text "By Rules" ]
         ]
-      , li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == NodesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode NodesView)]
-          [ text "By Nodes"
-          ]
+      , li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == NodesView then " active" else "")), onClick (ChangeViewMode NodesView)]
+          [ text "By Nodes" ]
         ]
       ]
     ]

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm
@@ -157,7 +157,7 @@ showTechnique model technique origin ui editInfo =
     fakeMetadata = Http.Metadata "internal-elm-call" 200 "call from elm app" Dict.empty
     blocksOnError = checkBlocksOnError technique.elems
     areBlockOnError = Dict.isEmpty blocksOnError
-    activeTabClass = (\tab -> "ui-tabs-tab " ++ (if ui.tab == tab then "active" else ""))
+    activeTabClass = (\tab -> if ui.tab == tab then " active" else "")
     creation = case origin of
                  Creation _ -> True
                  Clone _ _ -> True
@@ -303,22 +303,26 @@ showTechnique model technique origin ui editInfo =
           ]
         ]
       ]
-    , div [ class "main-navbar" ] [
-        ul [ class "ui-tabs-nav nav nav-tabs" ] [
-          li [ class (activeTabClass General) , onClick (SwitchTab General)] [
-            a [] [ text "Information" ]
+    , div [ class "main-navbar" ]
+      [ ul [ class "nav nav-underline" ]
+        [ li [ class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass General)), onClick (SwitchTab General)]
+            [ text "Information"]
           ]
-        , li [ class (activeTabClass Parameters), onClick (SwitchTab Parameters) ] [
-            a [] [
-              text "Parameters "
+        , li [ class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass Parameters)), onClick (SwitchTab Parameters)]
+            [ text "Parameters "
             , span [ class ( "badge badge-secondary badge-resources " ++ if List.isEmpty technique.parameters then "empty" else "") ] [
                 span [] [ text (String.fromInt (List.length technique.parameters)) ]
               ]
             ]
           ]
-        , li [ class (activeTabClass Resources)  , onClick (SwitchTab Resources)] [
-            a [] [
-              text "Resources "
+        , li [ class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass Resources)), onClick (SwitchTab Resources)]
+            [ text "Resources "
             , span [  class  ( "badge badge-secondary badge-resources " ++ if List.isEmpty technique.resources then "empty" else "") ] [
                 if ((List.isEmpty technique.resources)|| (List.any (\s -> (s.state == Untouched) || (s.state == Modified)) technique.resources) ) then span [ class "nb-resources" ] [text (String.fromInt (List.length (List.filter  (\s -> s.state == Untouched || s.state == Modified) technique.resources ) ))] else text ""
               , if not (List.isEmpty (List.filter (.state >> (==) New) technique.resources)) then  span [class "nb-resources new"] [ text ((String.fromInt (List.length (List.filter (.state >> (==) New) technique.resources))))] else text ""
@@ -327,14 +331,15 @@ showTechnique model technique origin ui editInfo =
             ]
           ]
         , if (Maybe.Extra.isJust technique.output) then
-            li [ class (activeTabClass Output)  , onClick (SwitchTab Output)] [
-              a [] [
-                text "Compilation output "
-              , span [  class  ( "fa ") ] []
-              ]
+          li [ class "nav-item" ]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (activeTabClass Output)), onClick (SwitchTab Output)]
+            [ text "Compilation output "
+            , span [ class  ( "fa fa-check") ] []
             ]
-            else
-              text ""
+          ]
+          else
+            text ""
         ]
       ]
     , div [ class "main-details", id "details"]

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/GroupCompliance/View.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/GroupCompliance/View.elm
@@ -16,16 +16,16 @@ view : Model -> Html Msg
 view model =
   div [class "tab-table-content"]
   ( List.append
-    [ ul [class "ui-tabs-nav"]
-      [ li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == RulesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode RulesView)]
-          [ text "By Rules"
-          ]
+    [ ul [class "nav nav-underline"]
+      [ li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == RulesView then " active" else "")), onClick (ChangeViewMode RulesView)]
+          [ text "By Rules" ]
         ]
-      , li [class ("ui-tabs-tab ui-tab" ++ (if model.ui.viewMode == NodesView then " active" else ""))]
-        [ a [onClick (ChangeViewMode NodesView)]
-          [ text "By Nodes"
-          ]
+      , li [class "nav-item"]
+        [ button
+          [ attribute "role" "tab", type_ "button", class ("nav-link " ++ (if model.ui.viewMode == NodesView then " active" else "")), onClick (ChangeViewMode NodesView)]
+          [ text "By Rules" ]
         ]
       ]
     ]

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/ViewCategoryDetails.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/ViewCategoryDetails.elm
@@ -1,7 +1,7 @@
 module Rules.ViewCategoryDetails exposing (..)
 
 import Html exposing (Html, button, div, i, span, text, h1, ul, li, input, a, p, form, label, textarea, select, table, thead, tbody)
-import Html.Attributes exposing (id, class, type_, placeholder, value, for, style)
+import Html.Attributes exposing (id, class, type_, placeholder, value, for, style, attribute)
 import Html.Events exposing (onClick, onInput, onSubmit)
 import List
 import Maybe.Extra
@@ -122,14 +122,19 @@ editionTemplateCat model details =
         [ p[][text ""] ]
       ]
     , div [class "main-navbar" ]
-      [ ul[class "ui-tabs-nav "]
-        [ li[class ("ui-tabs-tab" ++ (if details.tab == Information    then " ui-tabs-active" else ""))]
-          [ a[onClick (UpdateCategoryForm {details | tab = Information})][ text "Information" ]
+      [ ul[class "nav nav-underline"]
+        [ li[class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link" ++ (if details.tab == Information then " active" else "")), onClick (UpdateCategoryForm {details | tab = Information})]
+            [ text "Information" ]
           ]
-        , li[class ("ui-tabs-tab" ++ (if details.tab == Rules    then " ui-tabs-active" else ""))]
-          [ a[onClick (UpdateCategoryForm {details | tab = Rules})][ text "Rules" ]
-          , span[class "badge badge-secondary badge-resources"]
-            [ span [class "nb-resources"] [text (String.fromInt (List.length rulesList))]
+        , li[class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link" ++ (if details.tab == Rules then " active" else "")), onClick (UpdateCategoryForm {details | tab = Rules})]
+            [ text "Rules"
+            , span[class "badge badge-secondary badge-resources"]
+              [ span [class "nb-resources"] [text (String.fromInt (List.length rulesList))]
+              ]
             ]
           ]
         ]

diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/ViewRuleDetails.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Rules/ViewRuleDetails.elm
@@ -195,13 +195,15 @@ editionTemplate model details =
         [ p[][text (Maybe.Extra.unwrap "" .shortDescription originRule)] ]
       ]
     , div [class "main-navbar" ]
-      [ ul[class "ui-tabs-nav "]
-        [ li[class ("ui-tabs-tab" ++ (if details.tab == Information   then " ui-tabs-active" else ""))]
-          [ a[onClick (UpdateRuleForm {details | tab = Information })]
+      [ ul[class "nav nav-underline"]
+        [ li[class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link" ++ (if details.tab == Information then " active" else "")), onClick (UpdateRuleForm {details | tab = Information})]
             [ text "Information" ]
           ]
-        , li[class ("ui-tabs-tab" ++ (if details.tab == Directives    then " ui-tabs-active" else ""))]
-          [ a[onClick (UpdateRuleForm {details | tab = Directives})]
+        , li[class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link" ++ (if details.tab == Directives then " active" else "")), onClick (UpdateRuleForm {details | tab = Directives})]
             [ text "Directives"
             , span[class "badge badge-secondary badge-resources"]
               [ getNbResourcesBadge nbDirectives "This rule does not apply any directive"
@@ -213,17 +215,19 @@ editionTemplate model details =
         , ( if isNewRule then
           text ""
         else
-          li[class ("ui-tabs-tab" ++ (if details.tab == Nodes        then " ui-tabs-active" else ""))]
-          [ a[onClick (UpdateRuleForm {details | tab = Nodes })]
+          li[class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link" ++ (if details.tab == Nodes then " active" else "")), onClick (UpdateRuleForm {details | tab = Nodes})]
             [ text "Nodes"
             , span[class "badge badge-secondary badge-resources"]
               [ getNbResourcesBadge (Maybe.withDefault 0 (getRuleNbNodes details)) "This rule is not applied on any node"
               ]
             ]
           ]
         )
-        , li[class ("ui-tabs-tab" ++ (if details.tab == Groups       then " ui-tabs-active" else ""))]
-          [ a[onClick (UpdateRuleForm {details | tab = Groups })]
+        , li[class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link" ++ (if details.tab == Groups then " active" else "")), onClick (UpdateRuleForm {details | tab = Groups})]
             [ text "Groups"
             , span[class "badge badge-secondary badge-resources"]
               [ getGroupsNbResourcesBadge (getRuleNbGroups originRule) (List.length (getTargetIncludedIds (Maybe.Extra.unwrap [] .targets originRule))) "This rule is not applied on any group"
@@ -235,8 +239,9 @@ editionTemplate model details =
         , ( if isNewRule then
           text ""
         else
-          li[class ("ui-tabs-tab" ++ (if details.tab == TechnicalLogs       then " ui-tabs-active" else ""))]
-          [ a[onClick (UpdateRuleForm {details | tab = TechnicalLogs })]
+          li[class "nav-item"]
+          [ button
+            [ attribute "role" "tab", type_ "button", class ("nav-link" ++ (if details.tab == TechnicalLogs then " active" else "")), onClick (UpdateRuleForm {details | tab = TechnicalLogs})]
             [ text "Recent changes"
             , span[class "badge badge-secondary badge-resources"]
               [ span [class "nb-resources"] [text (String.fromFloat (countRecentChanges details.rule.id model.changes))]

diff --git a/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js b/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js
@@ -372,7 +372,7 @@ $(document).ready(function() {
       return ((a < b) ? 1 : ((a > b) ? -1 : 0));
     }
   } );
-  sidebarControl(".sidebar");
+  sidebarControl();
   initBsTooltips();
 });
 
@@ -773,23 +773,22 @@ function buildScrollSpyNav(){
     });
 }
 
-function sidebarControl(a){
-  var b = this
-    , c = 400;
-  $(document).on("click", a + " li a", function(a) {
+function sidebarControl(){
+  var speed = 400;
+  $(".sidebar li a").on("click", function(a) {
     var d = $(this)
       , e = d.next();
     if (e.is(".treeview-menu") && e.is(":visible"))
-      e.slideUp(c, function() {
+      e.slideUp(speed, function() {
         e.removeClass("menu-open")
       }),
       e.parent("li").removeClass("active");
     else if (e.is(".treeview-menu") && !e.is(":visible")) {
       var f = d.parents("ul").first()
-        , g = f.find("ul:visible").slideUp(c);
+        , g = f.find("ul:visible").slideUp(speed);
       g.removeClass("menu-open");
       var h = d.parent("li");
-      e.slideDown(c, function() {
+      e.slideDown(speed, function() {
         e.addClass("menu-open"),
         f.find("li.active").removeClass("active"),
         h.addClass("active")

diff --git a/...rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala b/...rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala
@@ -99,7 +99,7 @@ class NodeGroupCategoryForm(
 
   def showForm(): NodeSeq = {
     val html = SHtml.ajaxForm(
-      <div id="GroupTabs" class="main-container">
+      <div class="main-container">
         <div class="main-header">
           <div class="header-title">
             <h1>
@@ -117,9 +117,9 @@ class NodeGroupCategoryForm(
           </div>
         </div>
         <div class="main-navbar">
-          <ul id="groupTabMenu" class="ui-tabs-nav ui-widget-header">
-            <li class="ui-tabs-tab ui-tab ui-tabs-active ui-state-active">
-              <a href="#categoryParametersTab">Parameters</a>
+          <ul id="groupTabMenu" class="nav nav-underline">
+            <li class="nav-item">
+              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#categoryParametersTab" type="button" role="tab" aria-controls="categoryParametersTab" aria-selected="true">Parameters</button>
             </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
@@ -180,10 +180,7 @@ class NodeGroupForm(
   }
 
   def showForm(): NodeSeq = {
-    val html = SHtml.ajaxForm(body) ++
-      Script(
-        OnLoad(JsRaw("$('#GroupTabs').tabs( {active : 0 });"))
-      )
+    val html = SHtml.ajaxForm(body)
 
     nodeGroup match {
       case Left(target)                     => showFormTarget(target)(html) ++ showRelatedRulesTree(target)
@@ -350,9 +347,13 @@ class NodeGroupForm(
     ("group-pendingchangerequest" #> NodeSeq.Empty
     & "#group-name" #> <span>{groupNameString}<span class="group-system"></span></span>
     & "group-name" #> groupName.readOnlyValue
-    & "#groupTabMenu" #> <ul id="groupTabMenu">
-                           <li><a href="#groupParametersTab">Parameters</a></li>
-                           <li><a id="relatedRulesLinkTab" href="#groupRulesTab">Related rules</a></li>
+    & "#groupTabMenu" #> <ul id="groupTabMenu" class="nav nav-underline">
+                           <li class="nav-item">
+                             <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#groupParametersTab" type="button" role="tab" aria-controls="groupParametersTab">Parameters</button>
+                           </li>
+                           <li>
+                             <button class="nav-link" data-bs-toggle="tab" data-bs-target="#groupRulesTab" type="button" role="tab" aria-controls="groupRulesTab">Related rules</button>
+                           </li>
                          </ul>
     & "group-rudderid" #> <div>
                     <label class="wbBaseFieldLabel">Group ID</label>

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
@@ -198,7 +198,7 @@ class ShowNodeDetailsFromNode(
   ): NodeSeq = {
     nodeFactRepo.get(nodeId).toBox match {
       case Full(None) =>
-        (<ul id="NodeDetailsTabMenu" class="rudder-ui-tabs ui-tabs-nav"></ul>
+        (<ul id="NodeDetailsTabMenu" class="nav nav-underline"></ul>
           <div class="col-xs-12">
             <div class="info-card critical">
               <div class="card-info">
@@ -230,14 +230,10 @@ class ShowNodeDetailsFromNode(
                 bindNode(nf, withinPopup, globalMode, globalScore) ++ Script(
                   DisplayNode.jsInit(node.id, "") &
                   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();
-                    });
+                    var nodeTabs = $$("#${detailsId} .main-navbar > .nav > li ");
+                    var activeTabBtn = nodeTabs.get(${tab}).querySelector("button");
+                    activeTabBtn.classList.add('active');
+                    var activeTab = document.querySelector("#"+activeTabBtn.getAttribute("aria-controls")).classList.add('active', 'show')
                     """) &
                   buildJsTree(groupTreeId)
                 )

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
@@ -152,7 +152,6 @@ object DisplayNode extends Loggable {
 
   def jsInit(nodeId: NodeId, salt: String = ""): JsCmd = {
     val jsId           = JsNodeId(nodeId, salt)
-    val detailsId      = htmlId(jsId, "details_")
     val softGridDataId = htmlId(jsId, "soft_grid_data_")
     val softPanelId    = "soft_tab"
     val eltIdswidth    =
@@ -175,8 +174,7 @@ object DisplayNode extends Loggable {
     )
 
     JsRaw("var " + softGridDataId + "= null") &
-    OnLoad(
-      JsRaw("$('#" + detailsId + "').tabs()") & {
+    OnLoad( {
         eltIds.map { i =>
           JsRaw(s"""
               $$('#${htmlId(jsId, i + "_")}').dataTable({
@@ -324,16 +322,24 @@ object DisplayNode extends Loggable {
       </div>
       <div class="tabs">
         <div class="main-navbar">
-          <ul class="rudder-ui-tabs">
-            <li><a href={htmlId_#(jsId, "node_summary_")}>Summary</a></li>
-            <li><a href={htmlId_#(jsId, "node_inventory_")}>Inventory</a></li>
+          <ul class="nav nav-underline mx-0">
+            <li class="nav-item">
+              <button class="nav-link active" data-bs-toggle="tab" data-bs-target={htmlId_#(jsId, "node_summary_")} type="button" role="tab" aria-controls={htmlId_#(jsId, "node_summary_")} aria-selected="false">Summary</button>
+            </li>
+            <li class="nav-item">
+              <button class="nav-link" data-bs-toggle="tab" data-bs-target={htmlId_#(jsId, "node_inventory_")} type="button" role="tab" aria-controls={htmlId_#(jsId, "node_inventory_")} aria-selected="false">Inventory</button>
+            </li>
           </ul>
         </div>
-        <div id={htmlId(jsId, "node_summary_")}>
-          {showNodeDetails(nodeFact, globalMode, None, salt)}
-        </div>
-        <div id={htmlId(jsId, "node_inventory_")}>
-          {showInventoryVerticalMenu(sm, nodeFact.toCore)}
+        <div class="tab-content">
+          <div id={htmlId(jsId, "node_summary_")} class="tab-pane active show">
+            <div class="d-flex px-3 py-2">
+              {showNodeDetails(nodeFact, globalMode, None, salt)}
+            </div>
+          </div>
+          <div id={htmlId(jsId, "node_inventory_")} class="tab-pane p-3">
+            {showInventoryVerticalMenu(sm, nodeFact.toCore)}
+          </div>
         </div>
       </div>
     </div>