Merge pull request #4164 from concourse/issue/4111

web: add red border to failing steps
concourse · Aug 1, 2019 · c2233dc · c2233dc
2 parents 6e35cbd + ddcbebf
commit c2233dc
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 3 deletions.
diff --git a/web/elm/src/Build/StepTree/StepTree.elm b/web/elm/src/Build/StepTree/StepTree.elm
@@ -554,7 +554,7 @@ viewStep model session { id, name, log, state, error, expanded, version, metadat
             ([ class "header"
              , onClick <| Click <| StepHeader id
              ]
-                ++ Styles.stepHeader
+                ++ Styles.stepHeader state
             )
             [ Html.div
                 [ style "display" "flex" ]

diff --git a/web/elm/src/Build/Styles.elm b/web/elm/src/Build/Styles.elm
@@ -19,6 +19,7 @@ module Build.Styles exposing
 
 import Application.Styles
 import Build.Models exposing (StepHeaderType(..))
+import Build.StepTree.Models exposing (StepState(..))
 import Colors
 import Concourse
 import Dashboard.Styles exposing (striped)
@@ -141,10 +142,34 @@ triggerTooltip =
     ]
 
 
-stepHeader : List (Html.Attribute msg)
-stepHeader =
+stepHeader : StepState -> List (Html.Attribute msg)
+stepHeader state =
     [ style "display" "flex"
     , style "justify-content" "space-between"
+    , style "border" <|
+        "1px solid "
+            ++ (case state of
+                    StepStateFailed ->
+                        Colors.failure
+
+                    StepStateErrored ->
+                        Colors.error
+
+                    StepStatePending ->
+                        Colors.frame
+
+                    StepStateRunning ->
+                        Colors.frame
+
+                    StepStateInterrupted ->
+                        Colors.frame
+
+                    StepStateCancelled ->
+                        Colors.frame
+
+                    StepStateSucceeded ->
+                        Colors.frame
+               )
     ]
 
 

diff --git a/web/elm/tests/BuildTests.elm b/web/elm/tests/BuildTests.elm
@@ -3219,6 +3219,51 @@ all =
                                 }
                                 ++ [ style "background-size" "14px 14px" ]
                             )
+                , test "successful step has no border" <|
+                    fetchPlanWithGetStep
+                        >> Application.handleDelivery
+                            (EventsReceived <|
+                                Ok <|
+                                    [ { url =
+                                            eventsUrl
+                                      , data =
+                                            STModels.FinishGet
+                                                { source = "stdout"
+                                                , id = "plan"
+                                                }
+                                                0
+                                                Dict.empty
+                                                []
+                                                Nothing
+                                      }
+                                    ]
+                            )
+                        >> Tuple.first
+                        >> Common.queryView
+                        >> Query.find [ class "header" ]
+                        >> Query.has
+                            [ style "border" <| "1px solid " ++ Colors.frame ]
+                , test "failing step has a red border" <|
+                    fetchPlanWithGetStep
+                        >> Application.handleDelivery
+                            (EventsReceived <|
+                                Ok <|
+                                    [ { url = eventsUrl
+                                      , data =
+                                            STModels.FinishGet
+                                                { source = "stdout", id = "plan" }
+                                                1
+                                                Dict.empty
+                                                []
+                                                Nothing
+                                      }
+                                    ]
+                            )
+                        >> Tuple.first
+                        >> Common.queryView
+                        >> Query.find [ class "header" ]
+                        >> Query.has
+                            [ style "border" <| "1px solid " ++ Colors.failure ]
                 , test "network error on first event shows passport officer" <|
                     let
                         imgUrl =