Use vanilla Bootstrap as ui framework (#695)

* Transition NavBar to basic Bootstrap * Restyle filter bar * Highlight currently active tab in navbar * Remove Bootstrap JS plugins
2017-04-05 18:26:39 +02:00 · 2017-04-05 18:26:39 +02:00 · eeee29c65b
parent 4288292365
commit eeee29c65b
7 changed files with 140 additions and 50 deletions
--- a/ui/app/index.html
+++ b/ui/app/index.html
@ -1,21 +1,23 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">

-  <head>
-    <meta charset="UTF-8">
-    <title>Alertmanager</title>
-    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.5.3/css/tachyons.min.css"/>
-    <script src="https://use.fontawesome.com/b7508bb100.js"></script>
-  </head>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Alertmanager</title>
+        <link rel="stylesheet" href="https://unpkg.com/tachyons@4.5.3/css/tachyons.min.css"/>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+        <script src="https://use.fontawesome.com/b7508bb100.js"></script>
+    </head>

-  <body>
-  </body>
+    <body>
+    </body>

-  <!-- Your source after making -->
-  <script type="text/javascript" src="/script.js"></script>
-
-  <!-- Removes splash and starts elm app. -->
-  <script type="text/javascript">
-    var app = Elm.Main.embed(document.body);
-  </script>
+    <!-- Your source after making -->
+    <script type="text/javascript" src="/script.js"></script>

+    <!-- Removes splash and starts elm app. -->
+    <script type="text/javascript">
+     var app = Elm.Main.embed(document.body);
+    </script>
 </html>
--- a/ui/app/src/Main.elm
+++ b/ui/app/src/Main.elm
@ -22,7 +22,6 @@ import Types
        , Model
        )
 import Utils.Types exposing (..)
-import Views.SilenceList.Updates
 import Views.SilenceForm.Types exposing (initSilenceForm)
 import Views.Status.Types exposing (StatusModel, initStatusModel)
 import Updates exposing (update)
--- a/ui/app/src/Views.elm
+++ b/ui/app/src/Views.elm
@ -11,29 +11,20 @@ import Views.AlertList.Views as AlertList
 import Views.Silence.Views as Silence
 import Views.NotFound.Views as NotFound
 import Views.Status.Views as Status
-import Views.NavBar.Views exposing (appHeader)
+import Views.NavBar.Views exposing (navBar)


 view : Model -> Html Msg
 view model =
    div []
-        [ appHeader links
-        , div [ class "pt6 w-80 center pa3" ]
-            [ appBody model ]
+        [ navBar model.route
+        , div [ class "container" ]
+            [ currentView model ]
        ]


-links : List ( String, String )
-links =
-    [ ( "#", "AlertManager" )
-    , ( "#/alerts", "Alerts" )
-    , ( "#/silences", "Silences" )
-    , ( "#/status", "Status" )
-    ]
-
-
-appBody : Model -> Html Msg
-appBody model =
+currentView : Model -> Html Msg
+currentView model =
    case model.route of
        StatusRoute ->
            Status.view model
--- a/ui/app/src/Views/AlertList/FilterBar.elm
+++ b/ui/app/src/Views/AlertList/FilterBar.elm
@ -0,0 +1,20 @@
+module Views.AlertList.FilterBar exposing (view)
+
+import Html exposing (Html, div, span, input, text, button, i)
+import Html.Attributes exposing (value, class)
+import Html.Events exposing (onClick, onInput)
+
+
+view : String -> (String -> msg) -> msg -> Html msg
+view filterText inputChangedMsg buttonClickedMsg =
+    div [ class "input-group" ]
+        [ span [ class "input-group-addon" ]
+            [ i [ class "fa fa-filter" ] []
+            ]
+        , input
+            [ class "form-control", value filterText, onInput inputChangedMsg ]
+            []
+        , span
+            [ class "input-group-btn" ]
+            [ button [ class "btn btn-primary", onClick buttonClickedMsg ] [ text "Filter" ] ]
+        ]
--- a/ui/app/src/Views/AlertList/Views.elm
+++ b/ui/app/src/Views/AlertList/Views.elm
@ -3,6 +3,7 @@ module Views.AlertList.Views exposing (view)
 import Alerts.Types exposing (Alert, AlertGroup, Block)
 import Views.AlertList.Types exposing (AlertListMsg(FilterAlerts))
 import Views.AlertList.Filter exposing (silenced, receiver, matchers)
+import Views.AlertList.FilterBar
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
@ -35,8 +36,7 @@ view alertGroups filter errorHtml =
                    (List.map alertGroupView filteredGroups)
    in
        div []
-            [ textField "Filter" filterText (Types.UpdateFilter filter)
-            , a [ class "f6 link br2 ba ph3 pv2 mr2 dib dark-red", onClick (MsgForAlertList FilterAlerts) ] [ text "Filter Alerts" ]
+            [ Views.AlertList.FilterBar.view filterText (Types.UpdateFilter filter) (MsgForAlertList FilterAlerts)
            , errorHtml
            , alertHtml
            ]
--- a/ui/app/src/Views/NavBar/Types.elm
+++ b/ui/app/src/Views/NavBar/Types.elm
@ -0,0 +1,32 @@
+module Views.NavBar.Types exposing (Tab, alertsTab, silencesTab, statusTab, noneTab, tabs)
+
+
+type alias Tab =
+    { link : String
+    , name : String
+    }
+
+
+alertsTab : Tab
+alertsTab =
+    { link = "#/alerts", name = "Alerts" }
+
+
+silencesTab : Tab
+silencesTab =
+    { link = "#/silences", name = "Silences" }
+
+
+statusTab : Tab
+statusTab =
+    { link = "#/status", name = "Status" }
+
+
+noneTab : Tab
+noneTab =
+    { link = "", name = "" }
+
+
+tabs : List Tab
+tabs =
+    [ alertsTab, silencesTab, statusTab ]
--- a/ui/app/src/Views/NavBar/Views.elm
+++ b/ui/app/src/Views/NavBar/Views.elm
@ -1,22 +1,68 @@
-module Views.NavBar.Views exposing (appHeader)
+module Views.NavBar.Views exposing (navBar)

-import Html exposing (Html, header, text, a, nav)
-import Html.Attributes exposing (class, href, title)
+import Html exposing (Html, header, text, a, nav, ul, li)
+import Html.Attributes exposing (class, href, title, style)
+import Types exposing (Route(..))
+import Views.NavBar.Types exposing (Tab, alertsTab, silencesTab, statusTab, noneTab, tabs)


-appHeader : List ( String, String ) -> Html msg
-appHeader links =
-    let
-        headerLinks =
-            List.map (\( link, text ) -> headerLink link text) links
-    in
-        header [ class "bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l" ]
-            [ nav [ class "w-80 center f6 fw6 ttu tracked" ]
-                headerLinks
+navBar : Route -> Html msg
+navBar currentRoute =
+    header
+        [ class "navbar navbar-toggleable-md navbar-light "
+        , style [ ( "margin-bottom", "3rem" ), ( "border-bottom", "1px solid rgba(0,0,0,.15)" ) ]
+        ]
+        [ nav [ class "container" ]
+            [ a [ class "navbar-brand", href "#" ] [ text "AlertManager" ]
+            , ul [ class "navbar-nav" ] (navBarItems currentRoute)
            ]
+        ]


-headerLink : String -> String -> Html msg
-headerLink link linkText =
-    a [ class "link dim white dib mr3", href link, title linkText ]
-        [ text linkText ]
+navBarItems : Route -> List (Html msg)
+navBarItems currentRoute =
+    List.map (navBarItem currentRoute) tabs
+
+
+navBarItem : Route -> Tab -> Html msg
+navBarItem currentRoute tab =
+    li [ class <| "nav-item" ++ (isActive currentRoute tab) ]
+        [ a [ class "nav-link", href tab.link, title tab.name ]
+            [ text tab.name ]
+        ]
+
+
+isActive : Route -> Tab -> String
+isActive currentRoute tab =
+    if routeToTab currentRoute == tab then
+        " active"
+    else
+        ""
+
+
+routeToTab : Route -> Tab
+routeToTab currentRoute =
+    case currentRoute of
+        AlertsRoute _ ->
+            alertsTab
+
+        NotFoundRoute ->
+            noneTab
+
+        SilenceFormEditRoute _ ->
+            silencesTab
+
+        SilenceFormNewRoute _ ->
+            silencesTab
+
+        SilenceListRoute _ ->
+            silencesTab
+
+        SilenceRoute _ ->
+            silencesTab
+
+        StatusRoute ->
+            statusTab
+
+        TopLevelRoute ->
+            noneTab