From 5e0c5668844a959c0be573ca6cbc502aaa8956f9 Mon Sep 17 00:00:00 2001 From: wass3rw3rk <49894298+wass3rw3rk@users.noreply.github.com> Date: Tue, 17 Sep 2024 16:00:50 -0500 Subject: [PATCH] some wip work - getting closer --- src/elm/Pages/Dashboards.elm | 67 ++++++++++++++++++++++++------------ src/elm/Vela.elm | 2 ++ src/scss/_dashboards.scss | 33 ++++++++++++++++++ 3 files changed, 80 insertions(+), 22 deletions(-) diff --git a/src/elm/Pages/Dashboards.elm b/src/elm/Pages/Dashboards.elm index 091b45b29..b5259cf6a 100644 --- a/src/elm/Pages/Dashboards.elm +++ b/src/elm/Pages/Dashboards.elm @@ -133,7 +133,11 @@ update shared route msg model = -- REFRESH Tick options -> ( model - , Effect.none + , Effect.getDashboards + { baseUrl = shared.velaAPIBaseURL + , session = shared.session + , onResponse = GetDashboardsResponse + } ) @@ -176,28 +180,30 @@ view shared route model = RemoteData.Success dashboards -> if List.length dashboards > 0 then [ div [ class "dashboards" ] - [ h1 [] [ text "Dashboards (beta)" ] - , viewDashboards dashboards - , h2 [] [ text "🧪 Beta Limitations" ] - , p [] [ text "This is an early version of Dashboards. Please be aware of the following:" ] - , ul [] - [ li [] [ text "You have to use CLI/API to manage dashboards" ] - , li [] [ text "You can only list dashboards you created" ] - , li [] [ text "Bookmark or save links to dashboards you didn't create" ] - ] - , h2 [] [ text "💬 Got Feedback?" ] - , p [] [ text "Help us shape Dashboards. What do you want to see? Use the \"feedback\" link in the top right!" ] - ] + (h1 [] [ text "Dashboards", span [ class "beta" ] [ text "beta" ] ] + :: viewDashboards dashboards + ++ [ h2 [] [ text "🧪 Beta Limitations" ] + , p [] [ text "This is an early version of Dashboards. Please be aware of the following:" ] + , ul [] + [ li [] [ text "You have to use CLI/API to manage (add, edit, etc) dashboards" ] + , li [] [ text "This page will only show dashboards you created" ] + , li [] [ text "Bookmark or save links to dashboards you didn't create" ] + ] + , h2 [] [ text "💬 Got Feedback?" ] + , p [] [ text "Help us shape Dashboards. What do you want to see? Use the \"feedback\" link in the top right!" ] + ] + ) ] else [ div [ class "dashboards" ] - [ h1 [] [ text "Welcome to Dashboards (beta)!" ] + [ h1 [] [ text "Welcome to Dashboards", span [ class "beta" ] [ text "beta" ] ] , h2 [] [ text "✨ Want to create a new dashboard?" ] , p [] [ text "Use the Vela CLI to add a new dashboard:" ] , code [ class "shell" ] [ text "vela add dashboard --help" ] + , p [] [ text "Once you added dashboards, they will show on this page." ] , h2 [] [ text "💬 Got Feedback?" ] - , p [] [ text "Follow the link in the top right to let us know your thoughts and ideas." ] + , p [] [ text "Follow the \"feedback\" link in the top right to let us know your thoughts and ideas." ] ] ] @@ -225,20 +231,37 @@ view shared route model = } -{-| viewDashboards : renders a list of dashboard id links. +{-| viewDashboards : renders a list of dashboard links. -} -viewDashboards : List Vela.Dashboard -> Html Msg +viewDashboards : List Vela.Dashboard -> List (Html Msg) viewDashboards dashboards = - div [ class "repo-list" ] - (List.map + dashboards + |> List.map (\dashboard -> + let + dashboardLink = + Route.Path.Dashboards_Dashboard_ { dashboard = dashboard.dashboard.id } + |> Route.Path.href + in div [ class "item" ] - [ a [ Route.Path.href <| Route.Path.Dashboards_Dashboard_ { dashboard = dashboard.dashboard.id } ] + [ a [ dashboardLink ] [ text dashboard.dashboard.name ] , div [ class "buttons" ] - [ a [ class "button", Route.Path.href <| Route.Path.Dashboards_Dashboard_ { dashboard = dashboard.dashboard.id } ] [ text "View" ] + [ a [ class "button", dashboardLink ] [ text "View" ] ] + , viewDashboardRepos dashboard.repos ] ) - dashboards + + +{-| viewDashboards : renders a list of repos belonging to a dashboard. +-} +viewDashboardRepos : List Vela.DashboardRepoCard -> Html Msg +viewDashboardRepos repos = + div [ class "dashboard-repos" ] + (repos + |> List.map + (\repo -> + div [ class "dashboard-repos-item" ] [ text (repo.org ++ "/" ++ repo.name ++ " (" ++ String.fromInt (List.length repo.builds) ++ ")") ] + ) ) diff --git a/src/elm/Vela.elm b/src/elm/Vela.elm index a3462b547..8f7d61f86 100644 --- a/src/elm/Vela.elm +++ b/src/elm/Vela.elm @@ -210,6 +210,7 @@ type alias DashboardRepoCard = { org : String , name : String , counter : Int + , active : Bool , builds : List Build } @@ -245,6 +246,7 @@ decodeDashboardRepoCard = |> optional "org" string "" |> optional "name" string "" |> optional "counter" int -1 + |> optional "active" bool False |> optional "builds" (Json.Decode.list decodeBuild) [] diff --git a/src/scss/_dashboards.scss b/src/scss/_dashboards.scss index a7eaeda9b..ab6425558 100644 --- a/src/scss/_dashboards.scss +++ b/src/scss/_dashboards.scss @@ -2,6 +2,39 @@ // styles for the dashboard pages +.beta { + margin-left: 0.5rem; + padding: 0.25rem 0.4rem; + + font-size: 0.8rem; + vertical-align: top; + + background-color: var(--color-green-dark); +} + +.dashboards .item { + flex-wrap: wrap; +} + +.dashboard-repos { + flex-basis: 100%; + margin-top: 1rem; + padding: 1rem 1rem 0 0; + + border-top: 2px dotted var(--color-bg-light); +} + +.dashboard-repos-item { + display: inline-block; + margin-right: 1rem; + margin-bottom: .5rem; + padding: .25rem .5rem; + + font-size: .8rem; + + background-color: var(--color-bg-darkest); +} + .dashboard-title { border-bottom: var(--line-width) solid var(--color-secondary); }