show public state of pipelines on dashboard

converted some more CSS to inline styles, extracted common Msgs module for Dashboard stuff #2844 Signed-off-by: Jamie Klassen <cklassen@pivotal.io>
concourse · Nov 28, 2018 · ef5f31f · ef5f31f
1 parent 272cd32
commit ef5f31f
Show file tree

Hide file tree

Showing 13 changed files with 679 additions and 150 deletions.
diff --git a/web/assets/css/dashboard.less b/web/assets/css/dashboard.less
@@ -205,37 +205,6 @@
       background: @base01;
       position: relative;
     }
-
-    .dashboard-pipeline-footer {
-      text-align: center;
-      padding: (@footer-padding * @scale);
-      border-top: 2px solid @base02;
-
-      .dashboard-pipeline-icon {
-        float: left;
-      }
-
-      .pause-toggle {
-        float: right;
-        background-size: contain;
-        width: 40px * @scale;
-        height: 40px * @scale;
-        cursor: pointer;
-        opacity: 0.5;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-
-      .icon-play {
-        background-image: url('images/ic_play_white.svg');
-      }
-
-      .icon-pause {
-        background-image: url('images/ic_pause_white.svg');
-      }
-    }
   }
 
   .dashboard-paused {

diff --git a/web/elm/src/Colors.elm b/web/elm/src/Colors.elm
@@ -14,3 +14,8 @@ pinBarTooltip =
 pinIconHover : String
 pinIconHover =
     "#1e1d1d"
+
+
+dashboardBackground : String
+dashboardBackground =
+    "#3d3c3c"
diff --git a/web/elm/src/Dashboard.elm b/web/elm/src/Dashboard.elm
@@ -1,4 +1,4 @@
-port module Dashboard exposing (Model, Msg(..), init, subscriptions, update, view)
+port module Dashboard exposing (Model, init, subscriptions, update, view)
 
 import Char
 import Concourse
@@ -7,9 +7,11 @@ import Concourse.Pipeline
 import Concourse.PipelineStatus
 import Concourse.User
 import Css
+import Dashboard.APIData as APIData
 import Dashboard.Details as Details
 import Dashboard.Group as Group
 import Dashboard.GroupWithTag as GroupWithTag
+import Dashboard.Msgs exposing (Msg(..))
 import Dashboard.Pipeline as Pipeline
 import Dashboard.SubState as SubState
 import DashboardHd
@@ -26,7 +28,7 @@ import Monocle.Optional
 import Monocle.Lens
 import MonocleHelpers exposing (..)
 import NewTopBar
-import NoPipeline exposing (Msg, view)
+import NoPipeline
 import Regex exposing (HowMany(All), regex, replace)
 import RemoteData
 import Routes
@@ -69,6 +71,7 @@ type alias Model =
     , topBar : NewTopBar.Model
     , turbulencePath : String -- this doesn't vary, it's more a prop (in the sense of react) than state. should be a way to use a thunk for the Turbulence case of DashboardState
     , highDensity : Bool
+    , hoveredPipeline : Maybe Concourse.Pipeline
     }
 
 
@@ -82,20 +85,6 @@ substateOptional =
     Monocle.Optional.Optional (.state >> Result.toMaybe) (\s m -> { m | state = Ok s })
 
 
-type Msg
-    = Noop
-    | APIDataFetched (RemoteData.WebData ( Time.Time, ( Group.APIData, Maybe Concourse.User ) ))
-    | ClockTick Time.Time
-    | AutoRefresh Time
-    | ShowFooter
-    | KeyPressed Keyboard.KeyCode
-    | KeyDowns Keyboard.KeyCode
-    | TopBarMsg NewTopBar.Msg
-    | PipelinePauseToggled Concourse.Pipeline (Result Http.Error ())
-    | PipelineMsg Pipeline.Msg
-    | GroupMsg Group.Msg
-
-
 init : Ports -> Flags -> ( Model, Cmd Msg )
 init ports flags =
     let
@@ -107,6 +96,7 @@ init ports flags =
           , csrfToken = flags.csrfToken
           , turbulencePath = flags.turbulencePath
           , highDensity = flags.highDensity
+          , hoveredPipeline = Nothing
           }
         , Cmd.batch
             [ fetchData
@@ -138,7 +128,7 @@ noop model =
     ( model, Cmd.none )
 
 
-substate : String -> Bool -> ( Time.Time, ( Group.APIData, Maybe Concourse.User ) ) -> Result DashboardError SubState.SubState
+substate : String -> Bool -> ( Time.Time, ( APIData.APIData, Maybe Concourse.User ) ) -> Result DashboardError SubState.SubState
 substate csrfToken highDensity ( now, ( apiData, user ) ) =
     apiData.pipelines
         |> List.head
@@ -237,7 +227,7 @@ update msg model =
                 in
                     ( { model | topBar = newTopBar }, newMsg )
 
-            PipelineMsg (Pipeline.TogglePipelinePaused pipeline) ->
+            TogglePipelinePaused pipeline ->
                 ( model, togglePipelinePaused pipeline model.csrfToken )
 
             PipelinePauseToggled pipeline (Ok ()) ->
@@ -257,30 +247,27 @@ update msg model =
             PipelinePauseToggled _ (Err _) ->
                 ( model, Cmd.none )
 
-            GroupMsg (Group.DragStart teamName index) ->
+            DragStart teamName index ->
                 model
                     |> Monocle.Optional.modify
                         (substateOptional => SubState.detailsOptional)
                         ((Details.dragStateLens |> .set) <| Group.Dragging teamName index)
                     |> noop
 
-            GroupMsg (Group.DragOver teamName index) ->
+            DragOver teamName index ->
                 model
                     |> Monocle.Optional.modify
                         (substateOptional => SubState.detailsOptional)
                         ((Details.dropStateLens |> .set) <| Group.Dropping index)
                     |> noop
 
-            GroupMsg (Group.PipelineMsg msg) ->
-                flip update model <| PipelineMsg msg
-
-            PipelineMsg (Pipeline.TooltipHd pipelineName teamName) ->
+            TooltipHd pipelineName teamName ->
                 ( model, DashboardHd.tooltipHd ( pipelineName, teamName ) )
 
-            PipelineMsg (Pipeline.Tooltip pipelineName teamName) ->
+            Tooltip pipelineName teamName ->
                 ( model, tooltip ( pipelineName, teamName ) )
 
-            GroupMsg Group.DragEnd ->
+            DragEnd ->
                 let
                     updatePipelines : ( Group.PipelineIndex, Group.PipelineIndex ) -> Group.Group -> ( Group.Group, Cmd Msg )
                     updatePipelines ( dragIndex, dropIndex ) group =
@@ -335,6 +322,9 @@ update msg model =
                             )
                         |> Tuple.mapFirst (dragDropOptional.set ( Group.NotDragging, Group.NotDropping ))
 
+            PipelineButtonHover state ->
+                ( { model | hoveredPipeline = state }, Cmd.none )
+
 
 orderPipelines : String -> List Pipeline.PipelineWithJobs -> Concourse.CSRFToken -> Cmd Msg
 orderPipelines teamName pipelines csrfToken =
@@ -394,7 +384,16 @@ dashboardView model =
                     [ Html.div [ class "dashboard-no-content", css [ Css.height (Css.pct 100) ] ] [ (Html.map (always Noop) << Html.fromUnstyled) NoPipeline.view ] ]
 
                 Ok substate ->
-                    [ Html.div [ class "dashboard-content" ] (pipelinesView substate (NewTopBar.query model.topBar) ++ [ footerView substate ]) ]
+                    [ Html.div
+                        [ class "dashboard-content" ]
+                        (pipelinesView
+                            { substate = substate
+                            , query = (NewTopBar.query model.topBar)
+                            , hoveredPipeline = model.hoveredPipeline
+                            }
+                            ++ [ footerView substate ]
+                        )
+                    ]
     in
         Html.div
             [ classList [ ( .pageBodyClass Group.stickyHeaderConfig, True ), ( "dashboard-hd", model.highDensity ) ] ]
@@ -525,8 +524,13 @@ turbulenceView path =
         ]
 
 
-pipelinesView : SubState.SubState -> String -> List (Html Msg)
-pipelinesView substate query =
+pipelinesView :
+    { substate : SubState.SubState
+    , hoveredPipeline : Maybe Concourse.Pipeline
+    , query : String
+    }
+    -> List (Html Msg)
+pipelinesView { substate, hoveredPipeline, query } =
     let
         filteredGroups =
             substate.teamData |> SubState.apiData |> Group.groups |> filter query
@@ -546,30 +550,58 @@ pipelinesView substate query =
                     case substate.teamData of
                         SubState.Unauthenticated _ ->
                             List.map
-                                (\g -> Group.view (Group.headerView g) details.dragState details.dropState details.now g)
+                                (\g ->
+                                    Group.view
+                                        { header = (Group.headerView g)
+                                        , dragState = details.dragState
+                                        , dropState = details.dropState
+                                        , now = details.now
+                                        , hoveredPipeline = hoveredPipeline
+                                        }
+                                        g
+                                )
                                 groupsToDisplay
 
                         SubState.Authenticated { user } ->
                             List.map
-                                (\g -> Group.view (GroupWithTag.headerView g False) details.dragState details.dropState details.now g.group)
+                                (\g ->
+                                    Group.view
+                                        { header = (GroupWithTag.headerView g False)
+                                        , dragState = details.dragState
+                                        , dropState = details.dropState
+                                        , now = details.now
+                                        , hoveredPipeline = hoveredPipeline
+                                        }
+                                        g.group
+                                )
                                 (GroupWithTag.addTagsAndSort user groupsToDisplay)
 
                 Nothing ->
                     case substate.teamData of
                         SubState.Unauthenticated _ ->
                             List.map
-                                (\g -> Group.hdView (Group.headerView g) g.teamName g.pipelines)
+                                (\g ->
+                                    Group.hdView
+                                        (Group.headerView g)
+                                        g.teamName
+                                        g.pipelines
+                                )
                                 groupsToDisplay
 
                         SubState.Authenticated { user } ->
                             List.map
-                                (\g -> Group.hdView (GroupWithTag.headerView g True) g.group.teamName g.group.pipelines)
+                                (\g ->
+                                    Group.hdView
+                                        (GroupWithTag.headerView g True)
+                                        g.group.teamName
+                                        g.group.pipelines
+                                )
                                 (GroupWithTag.addTagsAndSort user groupsToDisplay)
     in
         if List.isEmpty groupViews then
             [ noResultsView (toString query) ]
         else
-            List.map (Html.map GroupMsg << Html.fromUnstyled) groupViews
+            List.map Html.fromUnstyled groupViews
 
 
 handleKeyPressed : Char -> Model -> ( Model, Cmd Msg )
@@ -596,7 +628,7 @@ fetchData =
         |> Cmd.map APIDataFetched
 
 
-remoteUser : Group.APIData -> Task.Task Http.Error ( Group.APIData, Maybe Concourse.User )
+remoteUser : APIData.APIData -> Task.Task Http.Error ( APIData.APIData, Maybe Concourse.User )
 remoteUser d =
     Concourse.User.fetchUser
         |> Task.map ((,) d << Just)

diff --git a/web/elm/src/Dashboard/APIData.elm b/web/elm/src/Dashboard/APIData.elm
@@ -0,0 +1,12 @@
+module Dashboard.APIData exposing (APIData)
+
+import Concourse
+
+
+type alias APIData =
+    { teams : List Concourse.Team
+    , pipelines : List Concourse.Pipeline
+    , jobs : List Concourse.Job
+    , resources : List Concourse.Resource
+    , version : String
+    }