Skip to content

Commit

Permalink
Add play/pause pipeline to dashboard
Browse files Browse the repository at this point in the history 
#2365

Signed-off-by: Joshua Winters <jwinters@pivotal.io>
  • Loading branch information
@mhuangpivotal
mhuangpivotal authored and Joshua Winters committed Jul 11, 2018
1 parent 33cb9f3 commit 11661b5
Show file tree
Hide file tree
Showing 8 changed files with 234 additions and 30 deletions.
21 changes: 20 additions & 1 deletion acceptance/spec/dashboard_spec.rb
View file
Expand Up @@ -180,6 +180,16 @@
expect(page).to have_content('paused')
end
end

it 'shows a play button that unpauses' do
within '.dashboard-pipeline', text: 'some-pipeline' do
expect(page).to have_css '.icon-play'

page.find('.icon-play').click
expect(page).not_to have_css '.icon-play'
end
expect(banner_color).to be_greyscale
end
end

context 'when a pipeline is pending' do
Expand All @@ -197,6 +207,16 @@
expect(page).to have_content('pending', wait: 10)
end
end

it 'shows a pause button that pauses' do
within '.dashboard-pipeline', text: 'some-pipeline' do
expect(page).to have_css '.icon-pause'

page.find('.icon-pause').click
expect(page).not_to have_css '.icon-pause'
end
expect(banner_palette).to eq(BLUE)
end
end

context 'when a pipeline has a failed build' do
Expand Down Expand Up @@ -546,7 +566,6 @@ def title_element(pipeline = 'some-pipeline')

def visit_dashboard
login
visit dash_route
end

def visit_hd_dashboard
Expand Down
36 changes: 31 additions & 5 deletions assets/css/dashboard.less
View file
Expand Up @@ -26,7 +26,7 @@
.pipeline-grid {
float: none;
display: flex;
padding: 20px 36px 10px;
padding: 20px 36px;
width: 200px;
height: 120px;
}
Expand Down Expand Up @@ -81,6 +81,7 @@
vertical-align: middle;
font-size: (30px * @scale);
margin-left: (16px * @scale);
float: left;
}

.dashboard-team-group {
Expand Down Expand Up @@ -138,7 +139,33 @@

.dashboard-pipeline-footer {
text-align: center;
margin-bottom: (27px * @scale);
padding: (27px * @scale);
border-top: 2px solid @base02;

.dashboard-pipeline-icon {
float: left;
}

.pause-toggle {
float: right;
background-size: contain;
width: 20px;
height: 20px;
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');
}
}
}

Expand Down Expand Up @@ -408,10 +435,9 @@

.dashboard-pipeline-name {
color: @white;
text-align: center;
text-align: left;
font-size: (34px * @scale);
margin: 0 auto;
padding: (17px * @scale);
padding: (25px * @scale);
width: (300px * @scale);
white-space: nowrap;
overflow: hidden;
Expand Down
81 changes: 75 additions & 6 deletions bindata/bindata.go
View file

Large diffs are not rendered by default.

62 changes: 57 additions & 5 deletions elm/src/Dashboard.elm
View file
Expand Up @@ -19,12 +19,14 @@ import Html.Attributes exposing (class, classList, id, href, src, attribute)
import Html.Attributes.Aria exposing (ariaLabel)
import Http
import Keyboard
import List.Extra
import Mouse
import NewTopBar
import NoPipeline exposing (view, Msg)
import RemoteData
import Routes
import Simple.Fuzzy exposing (match, root, filter)
import StrictEvents exposing (onLeftClick)
import Task exposing (Task)
import Time exposing (Time)

Expand All @@ -46,6 +48,7 @@ type alias Model =
, pipelineJobs : Dict Int (List Concourse.Job)
, pipelineResourceErrors : Dict ( String, String ) Bool
, concourseVersion : String
, csrfToken : String
, turbulenceImgSrc : String
, now : Maybe Time
, showHelp : Bool
Expand All @@ -66,10 +69,18 @@ type Msg
| KeyPressed Keyboard.KeyCode
| KeyDowns Keyboard.KeyCode
| TopBarMsg NewTopBar.Msg
| TogglePipelinePaused Concourse.Pipeline
| PipelinePauseToggled Concourse.Pipeline (Result Http.Error ())


init : Ports -> String -> ( Model, Cmd Msg )
init ports turbulencePath =
type alias Flags =
{ csrfToken : String
, turbulencePath : String
}


init : Ports -> Flags -> ( Model, Cmd Msg )
init ports flags =
let
( topBar, topBarMsg ) =
NewTopBar.init True
Expand All @@ -82,7 +93,8 @@ init ports turbulencePath =
, pipelineJobs = Dict.empty
, pipelineResourceErrors = Dict.empty
, now = Nothing
, turbulenceImgSrc = turbulencePath
, csrfToken = flags.csrfToken
, turbulenceImgSrc = flags.turbulencePath
, concourseVersion = ""
, showHelp = False
, hideFooter = False
Expand Down Expand Up @@ -200,6 +212,32 @@ update msg model =
in
( newModel, newMsg )

TogglePipelinePaused pipeline ->
( model, togglePipelinePaused pipeline model.csrfToken )

PipelinePauseToggled pipeline (Ok ()) ->
( { model
| pipelines =
List.Extra.updateIf
((==) pipeline)
(\pipeline -> { pipeline | paused = not pipeline.paused })
model.pipelines
}
, Cmd.none
)

PipelinePauseToggled _ (Err _) ->
( model, Cmd.none )


togglePipelinePaused : Concourse.Pipeline -> Concourse.CSRFToken -> Cmd Msg
togglePipelinePaused pipeline csrfToken =
Task.attempt (PipelinePauseToggled pipeline) <|
if pipeline.paused then
Concourse.Pipeline.unpause pipeline.teamName pipeline.name csrfToken
else
Concourse.Pipeline.pause pipeline.teamName pipeline.name csrfToken


subscriptions : Model -> Sub Msg
subscriptions model =
Expand Down Expand Up @@ -375,7 +413,7 @@ handleKeyPressed key model =
update ShowFooter model


groupView : Maybe Time -> String -> List PipelineWithJobs -> Html msg
groupView : Maybe Time -> String -> List PipelineWithJobs -> Html Msg
groupView now teamName pipelines =
Html.div [ id teamName, class "dashboard-team-group", attribute "data-team-name" teamName ]
[ Html.div [ class "pin-wrapper" ]
Expand All @@ -385,7 +423,7 @@ groupView now teamName pipelines =
]


pipelineView : Maybe Time -> PipelineWithJobs -> Html msg
pipelineView : Maybe Time -> PipelineWithJobs -> Html Msg
pipelineView now ({ pipeline, jobs, resourceError } as pipelineWithJobs) =
Html.div
[ classList
Expand All @@ -412,11 +450,25 @@ pipelineView now ({ pipeline, jobs, resourceError } as pipelineWithJobs) =
[ Html.div [ class "dashboard-pipeline-icon" ]
[]
, timeSincePipelineTransitioned now pipelineWithJobs
, pauseToggleView pipeline
]
]
]


pauseToggleView : Concourse.Pipeline -> Html Msg
pauseToggleView pipeline =
Html.a
[ classList
[ ( "pause-toggle", True )
, ( "icon-play", pipeline.paused )
, ( "icon-pause", not pipeline.paused )
]
, onLeftClick <| TogglePipelinePaused pipeline
]
[]


timeSincePipelineTransitioned : Maybe Time -> PipelineWithJobs -> Html a
timeSincePipelineTransitioned time ({ jobs } as pipelineWithJobs) =
let
Expand Down
4 changes: 2 additions & 2 deletions elm/src/Layout.elm
View file
Expand Up @@ -89,7 +89,7 @@ init flags location =
Normal

( subModel, subCmd ) =
SubPage.init flags.turbulenceImgSrc route
SubPage.init { turbulencePath = flags.turbulenceImgSrc, csrfToken = flags.csrfToken } route

( topModel, topCmd ) =
TopBar.init route
Expand Down Expand Up @@ -248,7 +248,7 @@ urlUpdate route model =
else if routeMatchesModel route model then
SubPage.urlUpdate route model.subModel
else
SubPage.init model.turbulenceImgSrc route
SubPage.init { turbulencePath = model.turbulenceImgSrc, csrfToken = model.csrfToken } route

( newTopModel, tCmd ) =
if route == model.route then
Expand Down
31 changes: 20 additions & 11 deletions elm/src/SubPage.elm
View file
Expand Up @@ -51,6 +51,12 @@ type Msg
| DashboardHdMsg DashboardHd.Msg


type alias Flags =
{ csrfToken : String
, turbulencePath : String
}


superDupleWrap : ( a -> b, c -> d ) -> ( a, Cmd c ) -> ( b, Cmd d )
superDupleWrap ( modelFunc, msgFunc ) ( model, msg ) =
( modelFunc model, Cmd.map msgFunc msg )
Expand All @@ -61,16 +67,16 @@ queryGroupsForRoute route =
QueryString.all "groups" route.queries


init : String -> Routes.ConcourseRoute -> ( Model, Cmd Msg )
init turbulencePath route =
init : Flags -> Routes.ConcourseRoute -> ( Model, Cmd Msg )
init flags route =
case route.logical of
Routes.Build teamName pipelineName jobName buildName ->
superDupleWrap ( BuildModel, BuildMsg ) <|
Autoscroll.init
Build.getScrollBehavior
<< Build.init
{ title = setTitle }
{ csrfToken = "", hash = route.hash }
{ csrfToken = flags.csrfToken, hash = route.hash }
<|
Build.JobBuildPage
{ teamName = teamName
Expand All @@ -85,7 +91,7 @@ init turbulencePath route =
Build.getScrollBehavior
<< Build.init
{ title = setTitle }
{ csrfToken = "", hash = route.hash }
{ csrfToken = flags.csrfToken, hash = route.hash }
<|
Build.BuildPage <|
Result.withDefault 0 (String.toInt buildId)
Expand All @@ -98,7 +104,7 @@ init turbulencePath route =
, teamName = teamName
, pipelineName = pipelineName
, paging = route.page
, csrfToken = ""
, csrfToken = flags.csrfToken
}

Routes.Job teamName pipelineName jobName ->
Expand All @@ -109,7 +115,7 @@ init turbulencePath route =
, teamName = teamName
, pipelineName = pipelineName
, paging = route.page
, csrfToken = ""
, csrfToken = flags.csrfToken
}

Routes.Pipeline teamName pipelineName ->
Expand All @@ -120,17 +126,17 @@ init turbulencePath route =
}
{ teamName = teamName
, pipelineName = pipelineName
, turbulenceImgSrc = turbulencePath
, turbulenceImgSrc = flags.turbulencePath
, route = route
}

Routes.Dashboard ->
superDupleWrap ( DashboardModel, DashboardMsg ) <|
Dashboard.init { title = setTitle } turbulencePath
Dashboard.init { title = setTitle } { turbulencePath = flags.turbulencePath, csrfToken = flags.csrfToken }

Routes.DashboardHd ->
superDupleWrap ( DashboardHdModel, DashboardHdMsg ) <|
DashboardHd.init { title = setTitle } turbulencePath
DashboardHd.init { title = setTitle } flags.turbulencePath


handleNotFound : String -> ( a -> Model, c -> Msg ) -> ( a, Cmd c, Maybe UpdateMsg ) -> ( Model, Cmd Msg )
Expand Down Expand Up @@ -181,12 +187,15 @@ update turbulence notFound csrfToken msg mdl =
( ResourceMsg message, ResourceModel model ) ->
handleNotFound notFound ( ResourceModel, ResourceMsg ) (Resource.updateWithMessage message { model | csrfToken = csrfToken })

( NewCSRFToken _, _ ) ->
( mdl, Cmd.none )
( NewCSRFToken c, DashboardModel model ) ->
( DashboardModel { model | csrfToken = c }, Cmd.none )

( DashboardMsg message, DashboardModel model ) ->
superDupleWrap ( DashboardModel, DashboardMsg ) <| Dashboard.update message model

( NewCSRFToken _, _ ) ->
( mdl, Cmd.none )

( DashboardHdMsg message, DashboardHdModel model ) ->
superDupleWrap ( DashboardHdModel, DashboardHdMsg ) <| DashboardHd.update message model

Expand Down
15 changes: 15 additions & 0 deletions public/images/ic_pause_white.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions public/images/ic_play_white.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 11661b5

Please sign in to comment.