ui: Implement clear button on monitor

ui/src/Page/Monitor.elm

@@ -34,6 +34,7 @@ init session =
 type Msg
     = Connected Bool
     | MessageReceived D.Value
+    | Clear
     | OpenMessage MessageHeader
 
 
@@ -64,6 +65,9 @@ update msg model =
                     , Cmd.none
                     )
 
+        Clear ->
+            ( { model | messages = [] }, Cmd.none )
+
         OpenMessage header ->
             ( model
             , Route.pushUrl model.session.key (Route.Message header.mailbox header.id)
@@ -80,7 +84,8 @@ view model =
     , modal = Nothing
     , content =
         [ h1 [] [ text "Monitor" ]
-        , p []
+        , div [ class "monitor-header" ]
+            [ span [ class "monitor-description" ]
                 [ text "Messages will be listed here shortly after delivery. "
                 , em []
                     [ text
@@ -92,6 +97,10 @@ view model =
                         )
                     ]
                 ]
+            , span [ class "button-bar monitor-buttons" ]
+                [ button [ Events.onClick Clear ] [ text "Clear" ]
+                ]
+            ]
         , node "monitor-messages"
             [ Events.on "connected" (D.map Connected <| D.at [ "detail" ] <| D.bool)
             , Events.on "message" (D.map MessageReceived D.value)

ui/src/main.css

@@ -538,6 +538,16 @@ nav.tab-bar a.active:hover {
 
 /** MONITOR **/
 
+.monitor-header {
+  display: flex;
+  width: 100%;
+}
+
+.monitor-description {
+  display: inline-block;
+  margin-right: auto;
+}
+
 .monitor {
   border-collapse: collapse;
   width: 100%;