Skip to content

Commit

Permalink
web: update cli icons on the pipeline page to svg
Browse files Browse the repository at this point in the history 
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
Co-authored-by: James Cooper <jcooper@pivotal.io>
  • Loading branch information
@mhuangpivotal
3 people committed Jan 8, 2019
1 parent 9cc6570 commit 5440869
Show file tree
Hide file tree
Showing 2 changed files with 907 additions and 812 deletions.
174 changes: 113 additions & 61 deletions web/elm/src/Pipeline.elm
View file
@@ -1,4 +1,4 @@
port module Pipeline exposing (Model, Msg(..), Flags, init, update, updateWithMessage, view, subscriptions, changeToPipelineAndGroups, resetPipelineFocus)
port module Pipeline exposing (Flags, Model, Msg(..), changeToPipelineAndGroups, init, resetPipelineFocus, subscriptions, update, updateWithMessage, view)

import Char
import Colors
Expand All @@ -8,8 +8,9 @@ import Concourse.Info
import Concourse.Job
import Concourse.Pipeline
import Concourse.Resource
import Dashboard.Styles exposing (infoCliIcon)
import Html exposing (Html)
import Html.Attributes exposing (class, href, id, style, src, width, height)
import Html.Attributes exposing (class, height, href, id, src, style, width)
import Html.Attributes.Aria exposing (ariaLabel)
import Http
import Json.Decode
Expand Down Expand Up @@ -110,7 +111,7 @@ init ports flags =
, hideLegendCounter = 0
}
in
loadPipeline pipelineLocator model
loadPipeline pipelineLocator model


changeToPipelineAndGroups : Flags -> Model -> ( Model, Cmd Msg )
Expand All @@ -121,10 +122,11 @@ changeToPipelineAndGroups flags model =
, pipelineName = flags.pipelineName
}
in
if model.pipelineLocator == pid then
renderIfNeeded { model | selectedGroups = queryGroupsForRoute flags.route }
else
init model.ports flags
if model.pipelineLocator == pid then
renderIfNeeded { model | selectedGroups = queryGroupsForRoute flags.route }

else
init model.ports flags


loadPipeline : Concourse.PipelineIdentifier -> Model -> ( Model, Cmd Msg )
Expand All @@ -146,12 +148,12 @@ updateWithMessage message model =
( mdl, msg ) =
update message model
in
case mdl.pipeline of
RemoteData.Failure _ ->
( mdl, msg, Just UpdateMsg.NotFound )
case mdl.pipeline of
RemoteData.Failure _ ->
( mdl, msg, Just UpdateMsg.NotFound )

_ ->
( mdl, msg, Nothing )
_ ->
( mdl, msg, Nothing )


timeUntilHidden : Time
Expand All @@ -175,6 +177,7 @@ update msg model =
( { model | hideLegend = True }
, Cmd.none
)

else
( { model | hideLegendCounter = model.hideLegendCounter + timeUntilHiddenCheckInterval }
, Cmd.none
Expand All @@ -190,6 +193,7 @@ update msg model =
( model
, resetPipelineFocus ()
)

else
( model
, Cmd.none
Expand Down Expand Up @@ -220,8 +224,10 @@ update msg model =
Http.BadStatus { status } ->
if status.code == 401 then
( model, LoginRedirect.requestLoginRedirect "" )

else if status.code == 404 then
( { model | pipeline = RemoteData.Failure err }, Cmd.none )

else
( model, Cmd.none )

Expand All @@ -236,6 +242,7 @@ update msg model =
Http.BadStatus { status } ->
if status.code == 401 then
( model, LoginRedirect.requestLoginRedirect "" )

else
( model, Cmd.none )

Expand All @@ -250,6 +257,7 @@ update msg model =
Http.BadStatus { status } ->
if status.code == 401 then
( model, LoginRedirect.requestLoginRedirect "" )

else
( model, Cmd.none )

Expand All @@ -260,7 +268,7 @@ update msg model =
( { model | concourseVersion = version, experiencingTurbulence = False }, Cmd.none )

VersionFetched (Err err) ->
flip always (Debug.log ("failed to fetch version") (err)) <|
flip always (Debug.log "failed to fetch version" err) <|
( { model | experiencingTurbulence = True }, Cmd.none )

ToggleGroup group ->
Expand All @@ -275,7 +283,7 @@ subscriptions model =
Sub.batch
[ autoupdateVersionTimer
, Time.every (5 * Time.second) AutoupdateTimerTicked
, Time.every (timeUntilHiddenCheckInterval) HideLegendTimerTicked
, Time.every timeUntilHiddenCheckInterval HideLegendTimerTicked
, Mouse.moves (\_ -> ShowLegend)
, Keyboard.presses (\_ -> ShowLegend)
, Mouse.clicks (\_ -> ShowLegend)
Expand All @@ -299,15 +307,16 @@ view model =
_ ->
[]
in
Html.ul
[ class
(if List.isEmpty groupList then
"hidden"
else
"groups"
)
]
groupList
Html.ul
[ class
(if List.isEmpty groupList then
"hidden"

else
"groups"
)
]
groupList
]
, Html.div [ class "pipeline-content" ]
[ Svg.svg
Expand All @@ -317,6 +326,7 @@ view model =
, Html.div
[ if model.experiencingTurbulence then
class "error-message"

else
class "error-message hidden"
]
Expand All @@ -329,6 +339,7 @@ view model =
, Html.dl
[ if model.hideLegend then
class "legend hidden"

else
class "legend"
]
Expand Down Expand Up @@ -360,18 +371,39 @@ view model =
[ Html.ul [ class "cli-downloads" ]
[ Html.li []
[ Html.a
[ href (Concourse.Cli.downloadUrl "amd64" "darwin"), ariaLabel "Download OS X CLI" ]
[ Html.i [ class "fa fa-apple" ] [] ]
[ href <|
Concourse.Cli.downloadUrl
"amd64"
"darwin"
, ariaLabel "Download OS X CLI"
, Html.Attributes.style <|
cliIcon "apple"
]
[]
]
, Html.li []
[ Html.a
[ href (Concourse.Cli.downloadUrl "amd64" "windows"), ariaLabel "Download Windows CLI" ]
[ Html.i [ class "fa fa-windows" ] [] ]
[ href <|
Concourse.Cli.downloadUrl
"amd64"
"windows"
, ariaLabel "Download Windows CLI"
, Html.Attributes.style <|
cliIcon "windows"
]
[]
]
, Html.li []
[ Html.a
[ href (Concourse.Cli.downloadUrl "amd64" "linux"), ariaLabel "Download Linux CLI" ]
[ Html.i [ class "fa fa-linux" ] [] ]
[ href <|
Concourse.Cli.downloadUrl
"amd64"
"linux"
, ariaLabel "Download Linux CLI"
, Html.Attributes.style <|
cliIcon "linux"
]
[]
]
]
]
Expand All @@ -395,6 +427,7 @@ viewGroup selectedGroups url grp =
Html.li
[ if List.member grp.name selectedGroups then
class "main active"

else
class "main"
]
Expand All @@ -417,13 +450,13 @@ jobAppearsInGroups groupNames pi jobJson =
concourseJob =
Json.Decode.decodeValue (Concourse.decodeJob pi) jobJson
in
case concourseJob of
Ok cj ->
anyIntersect cj.groups groupNames
case concourseJob of
Ok cj ->
anyIntersect cj.groups groupNames

Err err ->
flip always (Debug.log ("failed to check if job is in group") (err)) <|
False
Err err ->
flip always (Debug.log "failed to check if job is in group" err) <|
False


expandJsonList : Json.Encode.Value -> List Json.Decode.Value
Expand All @@ -432,12 +465,12 @@ expandJsonList flatList =
result =
Json.Decode.decodeValue (Json.Decode.list Json.Decode.value) flatList
in
case result of
Ok res ->
res
case result of
Ok res ->
res

Err err ->
[]
Err err ->
[]


filterJobs : Model -> Json.Encode.Value -> Json.Encode.Value
Expand Down Expand Up @@ -466,32 +499,34 @@ renderIfNeeded model =
filteredFetchedJobs =
if List.isEmpty (activeGroups model) then
fetchedJobs

else
filterJobs model fetchedJobs
in
case ( model.renderedResources, model.renderedJobs ) of
( Just renderedResources, Just renderedJobs ) ->
if
(expandJsonList renderedJobs /= expandJsonList filteredFetchedJobs)
|| (expandJsonList renderedResources /= expandJsonList fetchedResources)
then
( { model
| renderedJobs = Just filteredFetchedJobs
, renderedResources = Just fetchedResources
}
, model.ports.render ( filteredFetchedJobs, fetchedResources )
)
else
( model, Cmd.none )

_ ->
case ( model.renderedResources, model.renderedJobs ) of
( Just renderedResources, Just renderedJobs ) ->
if
(expandJsonList renderedJobs /= expandJsonList filteredFetchedJobs)
|| (expandJsonList renderedResources /= expandJsonList fetchedResources)
then
( { model
| renderedJobs = Just filteredFetchedJobs
, renderedResources = Just fetchedResources
}
, model.ports.render ( filteredFetchedJobs, fetchedResources )
)

else
( model, Cmd.none )

_ ->
( { model
| renderedJobs = Just filteredFetchedJobs
, renderedResources = Just fetchedResources
}
, model.ports.render ( filteredFetchedJobs, fetchedResources )
)

_ ->
( model, Cmd.none )

Expand All @@ -509,7 +544,7 @@ fetchJobs pid =
fetchVersion : Cmd Msg
fetchVersion =
Concourse.Info.fetch
|> Task.map (.version)
|> Task.map .version
|> Task.attempt VersionFetched


Expand All @@ -528,6 +563,7 @@ anyIntersect list1 list2 =
first :: rest ->
if List.member first list2 then
True

else
anyIntersect rest list2

Expand All @@ -536,8 +572,10 @@ toggleGroup : Concourse.PipelineGroup -> List String -> WebData Concourse.Pipeli
toggleGroup grp names mpipeline =
if List.member grp.name names then
List.filter ((/=) grp.name) names

else if List.isEmpty names then
grp.name :: getDefaultSelectedGroups mpipeline

else
grp.name :: names

Expand All @@ -546,6 +584,7 @@ getSelectedGroupsForRoute : Model -> List String
getSelectedGroupsForRoute model =
if List.isEmpty model.selectedGroups then
getDefaultSelectedGroups model.pipeline

else
model.selectedGroups

Expand All @@ -572,7 +611,7 @@ setGroups newGroups model =
pidToUrl (pipelineIdentifierFromModel model) <|
setGroupsInLocation model.route newGroups
in
( model, Navigation.newUrl newUrl )
( model, Navigation.newUrl newUrl )


setGroupsInLocation : Routes.ConcourseRoute -> List String -> Routes.ConcourseRoute
Expand All @@ -581,15 +620,16 @@ setGroupsInLocation loc groups =
updatedUrl =
if List.isEmpty groups then
QueryString.remove "groups" loc.queries

else
List.foldr
(QueryString.add "groups")
QueryString.empty
groups
in
{ loc
| queries = updatedUrl
}
{ loc
| queries = updatedUrl
}


pidToUrl : Maybe Concourse.PipelineIdentifier -> Routes.ConcourseRoute -> String
Expand Down Expand Up @@ -618,3 +658,15 @@ pipelineIdentifierFromModel model =

_ ->
Nothing


cliIcon : String -> List ( String, String )
cliIcon image =
[ ( "width", "12px" )
, ( "height", "12px" )
, ( "background-image", "url(/public/images/" ++ image ++ "_logo.svg)" )
, ( "background-repeat", "no-repeat" )
, ( "background-position", "50% 50%" )
, ( "background-size", "contain" )
, ( "display", "inline-block" )
]

0 comments on commit 5440869

Please sign in to comment.