Work in progress

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

@@ -0,0 +1,37 @@
+module TechniqueVersion.DataTypes exposing (..)
+
+import Http exposing (Error)
+import Http.Detailed
+
+--
+-- All our data types
+--
+
+type alias Technique =
+  { version             : String
+  , isDeprecated        : Bool
+  , deprecationMessage  : String
+  , acceptationDate     : String
+  , dscSupport          : Bool
+  , classicSupport      : Bool
+  , multiVersionSupport : String
+  , mvsMessage          : String
+  , action              : String
+  }
+
+type alias UI =
+  { hasWriteRights    : Bool
+  , displayDeprecated : Bool
+  }
+
+type alias Model =
+  { contextPath    : String
+  , ui             : UI
+  , techniques     : List Technique
+  }
+
+type Msg
+  = Ignore String
+  | CallApi (Model -> Cmd Msg)
+  | Create String
+  | ToggleDeprecated Bool

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

@@ -0,0 +1,26 @@
+port module TechniqueVersion.Init exposing (..)
+
+import Http exposing (Error)
+import Task
+import Json.Decode exposing (..)
+import Json.Decode.Pipeline as D exposing (..)
+
+import TechniqueVersion.DataTypes exposing (..)
+
+
+-- PORTS / SUBSCRIPTIONS
+port createDirective   : String -> Cmd msg
+port errorNotification : String -> Cmd msg
+port initTooltips      : String -> Cmd msg
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+  Sub.none
+
+init : { contextPath : String, hasWriteRights : Bool, versions : List Technique } -> ( Model, Cmd Msg )
+init flags =
+  let
+    initUi      = UI flags.hasWriteRights False
+    initModel   = Model flags.contextPath initUi flags.versions
+  in
+    ( initModel , Cmd.none )

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

@@ -0,0 +1,47 @@
+module TechniqueVersion.View exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (class, type_, value, checked, id, disabled, for, attribute, title)
+import Html.Events exposing (onClick, onCheck)
+import List
+import List.Extra exposing (last)
+import String
+
+import TechniqueVersion.DataTypes exposing (..)
+import TechniqueVersion.ViewUtils exposing (..)
+
+
+view : Model -> Html Msg
+view model =
+  div [id "techniqueVersion"]
+  [ h4[][text "Available versions"]
+  , table [id "versionTable"]
+    [ thead[]
+      [ tr[]
+        [ th[][text "Version"]
+        , th[][text "Instances"]
+        , th[][text "Agent type"]
+        , th[][text "Last updated on"]
+        , if model.ui.hasWriteRights then th[][text "Use this version"] else text ""
+        ]
+      ]
+    , tbody[](displayTechniqueRow model)
+    ]
+  , div [class "checkbox-group"]
+    [ input [id "displayDeprecation", type_ "checkbox", checked model.ui.displayDeprecated , onCheck (\b -> ToggleDeprecated b)][]
+    , label [for "displayDeprecation"][text "Display deprecated Technique versions"]
+    ]
+  , ( if model.ui.hasWriteRights then
+    let
+      createAction = case last model.techniques of
+        Just t  -> (Create t.action)
+        Nothing -> (Ignore "Unknwown technique version")
+    in
+      div [class "space-top"]
+      [ button [type_ "button", id "addButton", class "btn btn-success new-icon", onClick createAction ] -- ng-click "techniques[techniques.length-1].action()"
+        [ text "Create with latest version"]
+      ]
+    else
+    text ""
+    )
+  ]

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

@@ -0,0 +1,108 @@
+module TechniqueVersion.ViewUtils exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (onClick, onInput, custom, onCheck)
+import List
+
+import TechniqueVersion.DataTypes exposing (..)
+
+
+displayTechniqueRow : Model -> List (Html Msg)
+displayTechniqueRow model =
+  let
+    techniques = model.techniques
+    row : Technique -> Html Msg
+    row technique =
+      if technique.isDeprecated && not model.ui.displayDeprecated then
+      text ""
+      else
+      tr[]
+      [ td[]
+        [ text technique.version
+        , ( if technique.isDeprecated then
+          span
+          [ class "glyphicon glyphicon-info-sign text-danger deprecatedTechniqueIcon bsTooltip"
+          , attribute "data-toggle" "tooltip"
+          , attribute "data-placement" "top"
+          , attribute "data-html" "true"
+          , title ("Deprecated: " ++ technique.deprecationMessage)
+          ][]
+          else
+          text ""
+          )
+        ]
+      , td[]
+        [ text technique.multiVersionSupport
+        , span
+          [ class "fa fa-question-circle bsTooltip multiversion-icon"
+          , attribute "data-toggle" "tooltip"
+          , attribute "data-placement" "top"
+          , attribute "data-html" "true"
+          , title technique.mvsMessage
+          ][]
+        ]
+      , td[]
+        [ ( if technique.classicSupport then
+          span
+          [ class "fa fa-gear bsTooltip"
+          , attribute "data-toggle" "tooltip"
+          , attribute "data-placement" "top"
+          , attribute "data-html" "true"
+          , title "This Technique version is compatible with the <b>classic</b> agent."
+          ][]
+          else
+          text ""
+          )
+        , ( if technique.dscSupport then
+          span
+          [ class "dsc-icon bsTooltip"
+          , attribute "data-toggle" "tooltip"
+          , attribute "data-placement" "top"
+          , attribute "data-html" "true"
+          , title "This Technique version is compatible with the <b class='dsc'>Window</b> agent."
+          ][]
+          else
+          text ""
+          )
+        ]
+      , td[]
+        [ text technique.acceptationDate
+        ]
+      , if model.ui.hasWriteRights then
+        td[]
+        [ button [type_ "button", class "btn btn-success new-icon btn-xs", onClick (Create technique.action)] -- ng-click "technique.action()"
+          [ text "Create Directive" ]
+        ]
+        else
+        text ""
+      ]
+  in
+    techniques |> List.map row
+
+-- WARNING:
+--
+-- Here we are building an html snippet that will be placed inside an attribute, so
+-- we can't easily use the Html type as there is no built-in way to serialize it manually.
+-- This means it will be vulnerable to XSS on its parameters (here the description).
+--
+-- We resort to escaping it manually here.
+buildTooltipContent : String -> String -> String
+buildTooltipContent title content =
+  let
+    headingTag = "<h4 class='tags-tooltip-title'>"
+    contentTag = "</h4><div class='tooltip-inner-content'>"
+    closeTag   = "</div>"
+    escapedTitle = htmlEscape title
+    escapedContent = htmlEscape content
+  in
+    headingTag ++ escapedTitle ++ contentTag ++ escapedContent ++ closeTag
+
+htmlEscape : String -> String
+htmlEscape s =
+  String.replace "&" "&amp;" s
+    |> String.replace ">" "&gt;"
+    |> String.replace "<" "&lt;"
+    |> String.replace "\"" "&quot;"
+    |> String.replace "'" "&#x27;"
+    |> String.replace "\\" "&#x2F;"

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

@@ -0,0 +1,48 @@
+module Techniqueversion exposing (..)
+
+import Browser
+import Dict
+import Dict.Extra
+import Http exposing (..)
+import Http.Detailed as Detailed
+import Result
+import List.Extra
+import Random
+import UUID
+import Json.Encode exposing (..)
+import Task
+
+
+import TechniqueVersion.DataTypes exposing (..)
+import TechniqueVersion.Init exposing (..)
+import TechniqueVersion.View exposing (view)
+
+main = Browser.element
+  { init          = init
+  , view          = view
+  , update        = update
+  , subscriptions = subscriptions
+  }
+
+--
+-- update loop --
+--
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+  case msg of
+    -- Do an API call
+    CallApi call ->
+      (model, call model)
+
+    Ignore txt ->
+      (model, errorNotification txt)
+
+    Create action ->
+      (model , (createDirective action))
+
+    ToggleDeprecated check ->
+      let
+        ui = model.ui
+        newModel = { model | ui = { ui | displayDeprecated = check } }
+      in
+        (newModel, initTooltips "")

webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/DirectiveManagement.scala

@@ -329,7 +329,7 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
                </div>
               } else NodeSeq.Empty
             } &
-            "#techniqueVersion *+" #> showVersions(fullActiveTechnique, validTechniqueVersions)
+            "#techniqueversion-app *+" #> showVersions(fullActiveTechnique, validTechniqueVersions)
         }
     })
   }
@@ -405,18 +405,35 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
           ("classicSupport"      -> classicSupport),
           ("multiVersionSupport" -> multiVersionSupport),
           ("mvsMessage"          -> mvsMessage),
-          ("action"              -> action)
+          ("action"              -> action.toJsCmd)
         )
     }
     val dataArray            = JsArray(techniqueVersionInfo.toList)
 
     Script(OnLoad(JsRaw(s"""
-          angular.bootstrap('#techniqueDetails', ['techniqueDetails']);
-          var scope = angular.element($$("#techniqueVersion")).scope();
-          scope.$$apply(function(){
-            scope.init(${dataArray.toJsCmd});
-          } );
-          createTooltip();""")))
+           |var main = document.getElementById("techniqueversion-app");
+           |var initValues = {
+           |    contextPath    : "${S.contextPath}"
+           |  , hasWriteRights : hasWriteRights
+           |  , versions       : ${dataArray.toJsCmd}
+           |};
+           |console.log(initValues)
+           |var app = Elm.Techniqueversion.init({node: main , flags: initValues});
+           |// Initialize tooltips
+           |app.ports.initTooltips.subscribe(function(msg) {
+           |  setTimeout(function(){
+           |    $$('.bs-tooltip').bsTooltip();
+           |  }, 400);
+           |});
+           |app.ports.errorNotification.subscribe(function(msg) {
+           |  createErrorNotification(msg);
+           |});
+           |app.ports.createDirective.subscribe(function(fx) {
+           |  console.log(fx);
+           |  func = eval(fx);
+           |  func();
+           |});
+          """.stripMargin)))
   }
 
   ///////////// finish migration pop-up ///////////////

webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-directives.css

@@ -65,7 +65,8 @@
   display: none;
 }
 #versionTable + .checkbox-group{
-  margin-top:4px;
+  margin-top: 10px;
+  cursor: pointer;
 }
 #versionTable + .checkbox-group input{
   margin: 0px 2px 0px 0px;
@@ -302,4 +303,10 @@
 
 .rudder-template .template-sidebar + .template-main .main-details .input-group-btn .dropdown-toggle {
   height: 31px;
+}
+
+/* === TECHNIQUE === */
+#versionTable > thead > tr > th:last-child,
+#versionTable > tbody > tr > td:last-child{
+  display: table-cell !important;
 }