Work in progress

webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts.elm

@@ -113,12 +113,12 @@ update msg model =
             in
             ( { model | ui = { ui | copyState = NoCopy } }, Cmd.none )
 
-        UpdateTableFilters tableFilters ->
+        UpdateFilters filters ->
             let
                 ui =
                     model.ui
             in
-            ( { model | ui = { ui | tableFilters = tableFilters } }, Cmd.none )
+            ( { model | ui = { ui | filters = filters } }, Cmd.none )
 
         GetAccountsResult res ->
             case res of

webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/DataTypes.elm

@@ -7,6 +7,7 @@ import Json.Decode as D exposing (..)
 import SingleDatePicker exposing (DatePicker, Settings, TimePickerVisibility(..), defaultSettings, defaultTimePickerSettings)
 import Time exposing (Posix, Zone)
 
+import Ui.Datatable exposing (TableFilters)
 
 
 --
@@ -30,43 +31,26 @@ type ConfirmModalType
     = Delete
     | Regenerate
 
-
-type SortOrder
-    = Asc
-    | Desc
-
-
-type SortBy
-    = Name
-    | Id
-    | ExpDate
-    | CreDate
-
-
 type TenantMode
     = AllAccess -- special "*" permission giving access to objects in any/no tenants
     | NoAccess -- special "-" permission giving access to no object, whatever the tenant or its absence
     | ByTenants --give access to object in any of the listed tenants
 
 
-type alias TableFilters =
-    { sortBy : SortBy
-    , sortOrder : SortOrder
-    , filter : String
-    , authType : String
-    }
-
-
 type alias DatePickerInfo =
     { currentTime : Posix
     , zone : Zone
     , pickedTime : Maybe Posix
     , picker : DatePicker Msg
     }
 
+type alias Filters =
+    { tableFilters : TableFilters
+    , authType : String
+    }
 
 type alias UI =
-    { tableFilters : TableFilters
+    { filters : Filters
     , modalState : ModalState
     , copyState : CopyState
     , hasWriteRights : Bool
@@ -136,7 +120,7 @@ type Msg
     | CloseCopyPopup
     | GetAccountsResult (Result (Http.Detailed.Error String) ( Http.Metadata, ApiResult ))
     | Ignore
-    | UpdateTableFilters TableFilters
+    | UpdateFilters Filters
     | UpdateAccountForm Account
     | SaveAccount (Result (Http.Detailed.Error String) ( Http.Metadata, Account ))
     | ConfirmActionAccount ConfirmModalType (Result (Http.Detailed.Error String) ( Http.Metadata, Account ))

webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/Init.elm

@@ -8,6 +8,7 @@ import SingleDatePicker exposing (Settings, TimePickerVisibility(..))
 import Task
 import Time exposing (Month(..), Posix, Zone)
 
+import Ui.Datatable exposing (defaultTableFilters)
 
 
 -- PORTS / SUBSCRIPTIONS
@@ -71,8 +72,7 @@ init flags =
         initDatePicker =
             DatePickerInfo (Time.millisToPosix 0) Time.utc Nothing (SingleDatePicker.init UpdatePicker)
 
-        initFilters =
-            TableFilters Name Asc "" ""
+        initFilters = Filters (defaultTableFilters Ui.Datatable.Name) ""
 
         initUi =
             UI initFilters NoModal NoCopy False True initDatePicker False False

webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/View.elm

@@ -56,15 +56,17 @@ view model =
                                                 [ input
                                                     [ class "form-control"
                                                     , type_ "text"
-                                                    , value model.ui.tableFilters.filter
+                                                    , value model.ui.filters.tableFilters.filter
                                                     , placeholder "Filter..."
                                                     , onInput
                                                         (\s ->
                                                             let
+                                                                filters =
+                                                                    model.ui.filters
                                                                 tableFilters =
-                                                                    model.ui.tableFilters
+                                                                    filters.tableFilters
                                                             in
-                                                            UpdateTableFilters { tableFilters | filter = s }
+                                                            UpdateFilters { filters | tableFilters = { tableFilters | filter = s }}
                                                         )
                                                     ]
                                                     []
@@ -75,13 +77,13 @@ view model =
                                                     , onInput
                                                         (\authType ->
                                                             let
-                                                                tableFilters =
-                                                                    model.ui.tableFilters
+                                                                filters =
+                                                                    model.ui.filters
                                                             in
-                                                            UpdateTableFilters { tableFilters | authType = authType }
+                                                            UpdateFilters { filters | authType = authType }
                                                         )
                                                     ]
-                                                    [ option [ selected True, value model.ui.tableFilters.authType, disabled True ] [ text "Filter on access level" ]
+                                                    [ option [ selected True, value model.ui.filters.authType, disabled True ] [ text "Filter on access level" ]
                                                     , option [ value "" ] [ text "All accounts" ]
                                                     , option [ value "none" ] [ text "No access" ]
                                                     , option [ value "ro" ] [ text "Read only" ]

webapp/sources/rudder/rudder-web/src/main/elm/sources/Accounts/ViewUtils.elm

@@ -13,40 +13,18 @@ import Accounts.DatePickerUtils exposing (posixToString, checkIfExpired)
 import Accounts.ViewModals exposing (accountsModalId)
 import String exposing (isEmpty, length, slice)
 
+import Ui.Datatable exposing (thClass, sortTable, SortBy(..), SortOrder(..), filterSearch)
+
 
 --
 -- DATATABLE
 --
 
-thClass : TableFilters -> SortBy -> String
-thClass tableFilters sortBy =
-  if sortBy == tableFilters.sortBy then
-    case  tableFilters.sortOrder of
-      Asc  -> "sorting_asc"
-      Desc -> "sorting_desc"
-  else
-    "sorting"
-
-sortTable : TableFilters -> SortBy -> TableFilters
-sortTable tableFilters sortBy =
-  let
-    order =
-      case tableFilters.sortOrder of
-        Asc -> Desc
-        Desc -> Asc
-  in
-    if sortBy == tableFilters.sortBy then
-      { tableFilters | sortOrder = order}
-    else
-      { tableFilters | sortBy = sortBy, sortOrder = Asc}
-
-
 getSortFunction : Model -> Account -> Account -> Order
 getSortFunction model a1 a2 =
   let
     datePickerInfo = model.ui.datePickerInfo
-    order = case model.ui.tableFilters.sortBy of
-      Name    -> N.compare a1.name a2.name
+    order = case model.ui.filters.tableFilters.sortBy of
       Id      -> N.compare a1.id a2.id
       ExpDate ->
         let
@@ -59,8 +37,9 @@ getSortFunction model a1 a2 =
         in
           N.compare expDate1 expDate2
       CreDate -> N.compare a1.creationDate a2.creationDate
+      _       -> N.compare a1.name a2.name
   in
-    if model.ui.tableFilters.sortOrder == Asc then
+    if model.ui.filters.tableFilters.sortOrder == Asc then
       order
     else
       case order of
@@ -80,20 +59,6 @@ searchField datePickerInfo a =
 cleanDate: String -> String
 cleanDate date = slice 0 16 (String.replace "T" " " date)
 
-filterSearch : String -> List String -> Bool
-filterSearch filterString searchFields =
-  let
-    -- Join all the fields into one string to simplify the search
-    stringToCheck = searchFields
-      |> String.join "|"
-      |> String.toLower
-
-    searchString  = filterString
-      |> String.toLower
-      |> String.trim
-  in
-    String.contains searchString stringToCheck
-
 filterByAuthType : String -> String -> Bool
 filterByAuthType filterAuthType authType=
   String.isEmpty filterAuthType || filterAuthType == authType
@@ -182,22 +147,23 @@ displayAccountsTable model =
             [ span [class "fa fa-times-circle"] [] ]
           ]
         ]
-    filters = model.ui.tableFilters
+    filters = model.ui.filters
+    tableFilters = filters.tableFilters
     filteredAccounts = model.accounts
-      |> List.filter (\a -> filterSearch model.ui.tableFilters.filter (searchField model.ui.datePickerInfo a))
-      |> List.filter (\a -> filterByAuthType model.ui.tableFilters.authType a.authorisationType)
+      |> List.filter (\a -> filterSearch tableFilters.filter (searchField model.ui.datePickerInfo a))
+      |> List.filter (\a -> filterByAuthType filters.authType a.authorisationType)
       |> List.sortWith (getSortFunction model)
   in
     table [class "dataTable"]
     [ thead []
       [ tr [class "head"]
-        [ th [class (thClass model.ui.tableFilters Name    ), onClick (UpdateTableFilters (sortTable filters Name    ))][ text "Account name"    ]
-        , th [class (thClass model.ui.tableFilters Id      ), onClick (UpdateTableFilters (sortTable filters Id      ))][ text "Account id"           ]
+        [ th [class (thClass tableFilters Name    ), onClick (UpdateFilters {filters | tableFilters = (sortTable tableFilters Name    )})][ text "Account name"    ]
+        , th [class (thClass tableFilters Id      ), onClick (UpdateFilters {filters | tableFilters = (sortTable tableFilters Id      )})][ text "Account id"           ]
         , if hasClearTextTokens then
             th [][ text "Token" ]
           else
-            th [class (thClass model.ui.tableFilters CreDate ), onClick (UpdateTableFilters (sortTable filters CreDate ))][ text "Creation date" ]
-        , th [class (thClass model.ui.tableFilters ExpDate ), onClick (UpdateTableFilters (sortTable filters ExpDate ))][ text "Expiration date" ]
+            th [class (thClass tableFilters CreDate ), onClick (UpdateFilters {filters | tableFilters = (sortTable tableFilters CreDate )})][ text "Creation date" ]
+        , th [class (thClass tableFilters ExpDate ), onClick (UpdateFilters {filters | tableFilters = (sortTable tableFilters ExpDate )})][ text "Expiration date" ]
         , th [][ text "Actions" ]
         ]
       ]

webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/DataTypes.elm

@@ -5,6 +5,7 @@ import Http exposing (Error)
 
 import Compliance.DataTypes exposing (..)
 import Rules.DataTypes exposing (RuleCompliance)
+import Ui.Datatable exposing (TableFilters, SortOrder)
 --
 -- All our data types
 --
@@ -48,14 +49,6 @@ type alias NodeCompliance =
   }
 
 
-type alias TableFilters =
-  { sortOrder  : SortOrder
-  , filter     : String
-  , openedRows : Dict String (String, SortOrder)
-  }
-
-type SortOrder = Asc | Desc
-
 type alias UI =
   { ruleFilters       : TableFilters
   , nodeFilters       : TableFilters

webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/Init.elm

@@ -6,11 +6,13 @@ import DirectiveCompliance.ApiCalls exposing (..)
 import DirectiveCompliance.DataTypes exposing (..)
 import Compliance.DataTypes exposing (..)
 import Compliance.Utils exposing (defaultComplianceFilter)
+import Ui.Datatable exposing (defaultTableFilters )
+
 
 init : { directiveId : String, contextPath : String } -> ( Model, Cmd Msg )
 init flags =
   let
-    initFilters  = (TableFilters Asc "" Dict.empty)
+    initFilters  = (defaultTableFilters Ui.Datatable.Name)
     initUI       = UI initFilters initFilters defaultComplianceFilter RulesView True False
     initModel    = Model (DirectiveId flags.directiveId) flags.contextPath "" initUI Nothing
     listInitActions =

webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/ViewNodesCompliance.elm

@@ -13,6 +13,7 @@ import DirectiveCompliance.ApiCalls exposing (..)
 import DirectiveCompliance.DataTypes exposing (..)
 import DirectiveCompliance.ViewUtils exposing (..)
 import Compliance.Utils exposing (displayComplianceFilters, filterDetailsByCompliance)
+import Ui.Datatable exposing (filterSearch, SortOrder(..), generateLoadingTable)
 
 
 displayNodesComplianceTable : Model -> Html Msg
@@ -42,7 +43,7 @@ displayNodesComplianceTable model =
       Nothing -> (\_ _ -> EQ)
   in
     ( if model.ui.loading then
-      generateLoadingTable
+      generateLoadingTable True 2
       else
       div[]
       [ div [class "table-header extra-filters"]

webapp/sources/rudder/rudder-web/src/main/elm/sources/DirectiveCompliance/ViewRulesCompliance.elm

@@ -5,14 +5,15 @@ import Html.Attributes exposing (..)
 import Html.Events exposing (onClick, onInput)
 import List
 import List.Extra
-import String
 import Tuple3
 import Dict
 
 import DirectiveCompliance.ApiCalls exposing (..)
 import DirectiveCompliance.DataTypes exposing (..)
 import DirectiveCompliance.ViewUtils exposing (..)
 import Compliance.Utils exposing (displayComplianceFilters, filterDetailsByCompliance)
+import Ui.Datatable exposing (filterSearch, SortOrder(..), generateLoadingTable)
+
 
 displayRulesComplianceTable : Model -> Html Msg
 displayRulesComplianceTable model =
@@ -41,7 +42,7 @@ displayRulesComplianceTable model =
       Nothing -> (\_ _ -> EQ)
   in
     ( if model.ui.loading then
-      generateLoadingTable
+      generateLoadingTable True 2
       else
       div[][ div [class "table-header extra-filters"]
       [ div[class "main-filters"]