Merge pull request #414 from RailsEventStore/rl/browser-tree

Make Browser display data and metadata in collapsable trees

rails_event_store-browser/elm/elm-package.json

@@ -3,15 +3,16 @@
   "summary": "helpful summary of your project, less than 80 characters",
   "repository": "https://github.com/user/project.git",
   "license": "BSD3",
-  "source-directories": ["."],
+  "source-directories": ["./src"],
   "exposed-modules": [],
   "dependencies": {
     "NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0",
     "elm-lang/core": "5.1.1 <= v < 6.0.0",
     "elm-lang/html": "2.0.0 <= v < 3.0.0",
     "elm-lang/http": "1.0.0 <= v < 2.0.0",
     "elm-lang/navigation": "2.1.0 <= v < 3.0.0",
-    "evancz/url-parser": "2.0.1 <= v < 3.0.0"
+    "evancz/url-parser": "2.0.1 <= v < 3.0.0",
+    "Microsoft/elm-json-tree-view": "1.0.1 <= v < 2.0.0"
   },
   "elm-version": "0.18.0 <= v < 0.19.0"
 }

rails_event_store-browser/elm/package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "@webpack-blocks/elm": "^1.0.0-beta",
+    "elm-format": "^0.6.1-alpha",
     "elm-test": "^0.18.12",
     "html-webpack-plugin": "^2.30.1",
     "open-color": "^1.5.1",

rails_event_store-browser/elm/src/Main.elm

@@ -9,6 +9,7 @@ import Json.Decode.Pipeline exposing (decode, required, requiredAt, optional)
 import Json.Encode exposing (encode)
 import Navigation
 import UrlParser exposing ((</>))
+import OpenedEventUI
 
 
 main : Program Flags Model Msg
@@ -23,7 +24,7 @@ main =
 
 type alias Model =
     { events : PaginatedList Event
-    , event : Maybe Event
+    , event : Maybe OpenedEventUI.Model
     , page : Page
     , flags : Flags
     }
@@ -34,6 +35,7 @@ type Msg
     | GetEvent (Result Http.Error Event)
     | ChangeUrl Navigation.Location
     | GoToPage PaginationLink
+    | OpenedEventUIChanged OpenedEventUI.Msg
 
 
 type Page
@@ -112,7 +114,7 @@ update msg model =
             ( model, Cmd.none )
 
         GetEvent (Ok result) ->
-            ( { model | event = Just result }, Cmd.none )
+            ( { model | event = Just (OpenedEventUI.initModel result) }, Cmd.none )
 
         GetEvent (Err msg) ->
             ( model, Cmd.none )
@@ -123,6 +125,18 @@ update msg model =
         GoToPage paginationLink ->
             ( model, getEvents paginationLink )
 
+        OpenedEventUIChanged openedEventUIMsg ->
+            case model.event of
+                Just openedEvent ->
+                    let
+                        ( newModel, cmd ) =
+                            OpenedEventUI.update openedEventUIMsg openedEvent
+                    in
+                        ( { model | event = Just newModel }, Cmd.none )
+
+                Nothing ->
+                    ( model, Cmd.none )
+
 
 buildUrl : String -> String -> String
 buildUrl baseUrl id =
@@ -213,31 +227,11 @@ browserBody model =
             h1 [] [ text "404" ]
 
 
-showEvent : Maybe Event -> Html Msg
+showEvent : Maybe OpenedEventUI.Model -> Html Msg
 showEvent event =
     case event of
         Just event ->
-            div [ class "event" ]
-                [ h1 [ class "event__title" ] [ text event.eventType ]
-                , div [ class "event__body" ]
-                    [ table []
-                        [ thead []
-                            [ tr []
-                                [ th [] [ text "Event id" ]
-                                , th [] [ text "Raw Data" ]
-                                , th [] [ text "Raw Metadata" ]
-                                ]
-                            ]
-                        , tbody []
-                            [ tr []
-                                [ td [] [ text event.eventId ]
-                                , td [] [ pre [] [ text event.rawData ] ]
-                                , td [] [ pre [] [ text event.rawMetadata ] ]
-                                ]
-                            ]
-                        ]
-                    ]
-                ]
+            Html.map (\msg -> OpenedEventUIChanged msg) (OpenedEventUI.showEvent event)
 
         Nothing ->
             div [ class "event" ] []

rails_event_store-browser/elm/src/OpenedEventUI.elm

@@ -0,0 +1,76 @@
+module OpenedEventUI exposing (..)
+
+import JsonTree
+import Html exposing (..)
+import Html.Attributes exposing (placeholder, disabled, href, class)
+
+
+type alias Event =
+    { eventType : String
+    , eventId : String
+    , createdAt : String
+    , rawData : String
+    , rawMetadata : String
+    }
+
+
+type alias Model =
+    { event : Event
+    , dataTreeState : JsonTree.State
+    , metadataTreeState : JsonTree.State
+    }
+
+
+type Msg
+    = ChangeOpenedEventDataTreeState JsonTree.State
+    | ChangeOpenedEventMetadataTreeState JsonTree.State
+
+
+initModel : Event -> Model
+initModel e =
+    { event = e
+    , dataTreeState = JsonTree.defaultState
+    , metadataTreeState = JsonTree.defaultState
+    }
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ChangeOpenedEventDataTreeState newState ->
+            ( { model | dataTreeState = newState }, Cmd.none )
+
+        ChangeOpenedEventMetadataTreeState newState ->
+            ( { model | metadataTreeState = newState }, Cmd.none )
+
+
+showEvent : Model -> Html Msg
+showEvent model =
+    div [ class "event" ]
+        [ h1 [ class "event__title" ] [ text model.event.eventType ]
+        , div [ class "event__body" ]
+            [ table []
+                [ thead []
+                    [ tr []
+                        [ th [] [ text "Event id" ]
+                        , th [] [ text "Raw Data" ]
+                        , th [] [ text "Raw Metadata" ]
+                        ]
+                    ]
+                , tbody []
+                    [ tr []
+                        [ td [] [ text model.event.eventId ]
+                        , td [] [ showJsonTree model.event.rawData model.dataTreeState (\s -> (ChangeOpenedEventDataTreeState s)) ]
+                        , td [] [ showJsonTree model.event.rawMetadata model.metadataTreeState (\s -> (ChangeOpenedEventMetadataTreeState s)) ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+showJsonTree : String -> JsonTree.State -> (JsonTree.State -> msg) -> Html msg
+showJsonTree rawJson treeState changeState =
+    JsonTree.parseString rawJson
+        |> Result.map (\tree -> JsonTree.view tree ({ onSelect = Nothing, toMsg = changeState }) treeState)
+        |> Result.withDefault (pre [] [ text rawJson ])

rails_event_store-browser/elm/src/mocks/event.json

@@ -6,9 +6,18 @@
       "event_type": "OrderPlaced",
       "data": {
         "order_id": 42,
+        "buyer": {
+          "name": "Ludwik Zamenhof"
+        },
         "net_value": 900001
       },
-      "metadata": { "timestamp": "2017-11-14 23:21:04 UTC" }
+      "metadata": {
+        "timestamp": "2017-11-14 23:21:04 UTC",
+        "originator": {
+          "name": "Admin",
+          "user_id": 444
+        }
+      }
     }
   }
 }