Merge pull request #18 from erlanglab/about-page-content

About page basic content

elm-package.json

@@ -4,13 +4,14 @@
     "repository": "https://github.com/user/project.git",
     "license": "BSD3",
     "source-directories": [
-      "src/elm",
-      "src/elm/About"
+        "src/elm",
+        "src/elm/About"
     ],
     "exposed-modules": [],
     "dependencies": {
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0"
+        "elm-lang/html": "2.0.0 <= v < 3.0.0",
+        "elm-lang/http": "1.0.0 <= v < 2.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }

src/App.js

@@ -16,8 +16,8 @@ import eplSupTree from './plugins/epl-sup-tree';
 import about from './about';
 
 const tabs = [
-  { path: '/dashboard', icon: 'desktop' },
-  { path: '/sup-tree', icon: 'share-alt' },
+  { path: '/dashboard', icon: 'television' },
+  { path: '/sup-tree', icon: 'sitemap' },
   /*   { path: '/traffic', icon: 'share-alt' },*/
   { path: '/about', icon: 'question' }
 ];

src/about/components/About.css

@@ -1,2 +1,23 @@
 .About {
 }
+
+.About .header {
+  width: 100%;
+}
+
+.About img {
+  height: 150px;
+}
+
+.About .content {
+  width: 80%;
+  margin-left: 10%;
+  padding: 10px;
+}
+
+
+.About a {
+  color: #1F79B7;
+  margin-left: 5px;
+  display: inline-block;
+}

src/about/components/About.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Elm from 'react-elm-components';
 import { About } from '../../elm/About.elm';
 
-import header from '../../images/erlangpl_header.png';
+import header from '../images/header_copy.png';
 
 import './About.css';
 

src/elm/About.elm

@@ -3,16 +3,31 @@ module About exposing (..)
 import About.Types exposing (..)
 import About.View exposing (view)
 import Html exposing (Html, text, button, div)
+import Http
+import Json.Decode as Decode
 
 
 init : String -> ( Model, Cmd Msg )
-init change =
-    ( change, Cmd.none )
+init logo =
+    ( ( logo, "0.4.0" ), getTodos )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
-    ( model, Cmd.none )
+update msg ( logo, vsn ) =
+    case msg of
+        RequestVersion result ->
+            let
+                version =
+                    Result.withDefault vsn result
+            in
+                ( ( logo, version ), Cmd.none )
+
+
+getTodos : Cmd Msg
+getTodos =
+    Http.send RequestVersion <|
+        Http.get "http://localhost:8000/epl_version_EPL" <|
+            Decode.field "version" Decode.string
 
 
 main : Program String Model Msg

src/elm/About/Types.elm

@@ -1,9 +1,11 @@
 module About.Types exposing (..)
 
+import Http
+
 
 type Msg
-    = No0p
+    = RequestVersion (Result Http.Error String)
 
 
 type alias Model =
-    String
+    ( String, String )

src/elm/About/View.elm

@@ -1,12 +1,53 @@
 module About.View exposing (..)
 
 import About.Types exposing (..)
-import Html exposing (Html, div, text, img)
-import Html.Attributes exposing (class, src)
+import Html exposing (Html, h5, h2, h4, div, text, span, img, a, i, br)
+import Html.Attributes exposing (class, src, href, target)
+
+
+viewText : String -> List (Html Msg)
+viewText str =
+    str
+        |> String.lines
+        |> List.foldl (\a acc -> acc ++ [ span [] [ text a ], br [] [] ]) []
+
+
+description : String
+description =
+    """
+     It helps to observe the system and analyze its performance. If you have any idea how we can make erlangpl better,
+     or you want to contribute, feel free to open issue or send PR
+     """
 
 
 view : Model -> Html Msg
-view model =
-    div [ class "About" ]
-        [ text "About page"
+view ( logo, version ) =
+    div [ class "About text-center" ]
+        [ div [ class "header text-center" ]
+            [ img [ src logo ] []
+            ]
+        , div [ class "content" ]
+            [ h2 [ class "text-center" ]
+                [ text <| "Erlang Performance Lab v" ++ version
+                ]
+            , h5 [ class "text-center" ] [ text "tool for developers working with the Erlang VM (BEAM).\n" ]
+            , span [] <| viewText description
+            , h4 [] [ text "Links" ]
+            , i [ class "fa fa-github" ] []
+            , a [ href "https://github.com/erlanglab", target "_blank" ]
+                [ text "GitHub" ]
+            , br [] []
+            , i [ class "fa fa-twitter" ] []
+            , a [ href "https://twitter.com/erlanglab", target "_blank" ]
+                [ text "Twitter" ]
+            , br [] []
+            , i [ class "fa fa-info" ] []
+            , a [ href "https://erlang.pl", target "_blank" ]
+                [ text "Website" ]
+            , br [] []
+            , i [ class "fa fa-file-text-o" ] []
+            , a [ href "http://apache.org/licenses/LICENSE-2.0", target "_blank" ]
+                [ text "Licence: Apache 2.0" ]
+            , br [] []
+            ]
         ]

src/plugins/epl-sup-tree/sockets.js

@@ -8,11 +8,11 @@ export default onWithStore((store, on) => {
     {
       'apps-info': data => {
         // dispatch some action to store this
-        console.log('apps-info', data);
+        /*         console.log('apps-info', data);*/
         store.dispatch(actions.updateAppsInfo(data));
       },
       'node-info': data => {
-        console.log('node-info', data);
+        /*         console.log('node-info', data);*/
         store.dispatch(actions.updateNodeInfo(data));
       }
     },