ui: Add fontawesome-free, use in status & mailbox

ui/package.json

@@ -13,10 +13,12 @@
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.1.6",
+    "@fortawesome/fontawesome-free": "^5.6.3",
     "babel-loader": "^8.0.4",
     "css-loader": "^1.0.1",
     "elm-hot-webpack-loader": "^1.0.2",
     "elm-webpack-loader": "^5.0.0",
+    "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "node-elm-compiler": "^5.0.1",
     "style-loader": "^0.23.1",

ui/src/Page/Mailbox.elm

@@ -9,7 +9,8 @@ import DateFormat.Relative as Relative
 import Html exposing (..)
 import Html.Attributes
     exposing
-        ( class
+        ( alt
+        , class
         , classList
         , download
         , href
@@ -458,7 +459,11 @@ view session model =
                     , value model.searchInput
                     ]
                     []
-                , button [ onClick PurgeMailboxPrompt ] [ text "Purge" ]
+                , button
+                    [ onClick PurgeMailboxPrompt
+                    , alt "Purge Mailbox"
+                    ]
+                    [ i [ class "fas fa-trash" ] [] ]
                 ]
             , viewMessageList session model
             , main_

ui/src/Page/Status.elm

@@ -261,6 +261,7 @@ configPanel maybeConfig =
 
         Just config ->
             framePanel "Configuration"
+                "fa-cog"
                 [ textEntry "Version" (config.version ++ ", built on " ++ config.buildDate)
                 , textEntry "SMTP Listener" config.smtpConfig.addr
                 , textEntry "POP3 Listener" config.pop3Listener
@@ -337,6 +338,7 @@ metricPanels model =
 
         Just metrics ->
             [ framePanel "General Metrics"
+                "fa-tachometer-alt"
                 [ textEntry "Uptime" <|
                     "Started "
                         ++ Relative.relativeTime model.now metrics.startTime
@@ -348,6 +350,7 @@ metricPanels model =
                 , viewMetric model.webSockets
                 ]
             , framePanel "SMTP Metrics"
+                "fa-envelope"
                 [ viewMetric model.smtpConnOpen
                 , viewMetric model.smtpConnTotal
                 , viewMetric model.smtpReceivedTotal
@@ -355,6 +358,7 @@ metricPanels model =
                 , viewMetric model.smtpWarnsTotal
                 ]
             , framePanel "Storage Metrics"
+                "fa-archive"
                 [ textEntry "Retention Scan" (retentionScan model)
                 , viewMetric model.retentionDeletesTotal
                 , viewMetric model.retainedCount
@@ -495,10 +499,18 @@ graphZero data =
         ]
 
 
-framePanel : String -> List (Html a) -> Html a
-framePanel name html =
+framePanel : String -> String -> List (Html a) -> Html a
+framePanel name icon html =
+    let
+        fontIcon cn =
+            i [ class ("fas " ++ cn) ] []
+    in
     div [ class "metric-panel" ]
-        [ h2 [] [ text name ]
+        [ h2 []
+            [ fontIcon icon
+            , text " "
+            , text name
+            ]
         , div [ class "metrics" ] html
         ]
 

ui/src/index.js

@@ -1,4 +1,5 @@
 import './main.css'
+import '@fortawesome/fontawesome-free/css/all.css'
 import { Elm } from './Main.elm'
 import registerMonitorPorts from './registerMonitor'
 import './renderedHtml'

ui/src/main.css

@@ -332,9 +332,15 @@ li.navbar-active span,
 }
 
 .message-list-controls {
+  display: flex;
   grid-area: ctrl;
 }
 
+.message-list-controls input[type="search"] {
+  flex: 1 1 auto;
+  padding: 2px 4px;
+}
+
 .message-list {
   grid-area: list;
   overflow-y: scroll;

ui/webpack.config.js

@@ -35,10 +35,15 @@ module.exports = (env, argv) => {
           ],
         },
         {
+          include: [/\/src/, /\/node_modules\/@fortawesome\/fontawesome-free\/css/],
           test: /\.css$/,
-          exclude: [/node_modules/],
           loader: ['style-loader', 'css-loader'],
         },
+        {
+          include: [/\/node_modules\/@fortawesome\/fontawesome-free\/webfonts/],
+          test: /\.(eot|svg|ttf|woff|woff2)$/,
+          loader: ['file-loader'],
+        },
       ]
     },
     plugins: [