Deployment and lifecycle management for Nix
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

web: cleanup and standardize tables

+55 -99
+22 -63
apps/sower/lib/sower_web/components/sower_components.ex
··· 4 4 import SowerWeb.CoreComponents, only: [button: 1] 5 5 6 6 @doc """ 7 - Renders a table with mobile-responsive column hiding. 7 + Renders a table with responsive column hiding. 8 8 9 - Columns can be hidden on mobile by setting `hide_on={:mobile}` on the `:col` slot, 10 - which applies `hidden sm:table-cell` classes to both `<th>` and `<td>` elements. 9 + Columns can be hidden below a breakpoint by setting `hide_on={:sm}` (or `:md`, `:lg`, `:xl`) 10 + on the `:col` slot, which applies `hidden <bp>:table-cell` classes to both `<th>` and `<td>`. 11 11 """ 12 12 attr :id, :string, required: true 13 13 attr :rows, :list, required: true ··· 20 20 attr :hide_on, :atom 21 21 end 22 22 23 + attr :action_hide_on, :atom, default: nil 24 + attr :header_border, :boolean, default: true 23 25 slot :action 24 26 25 27 def table(assigns) do ··· 35 37 <tr> 36 38 <th 37 39 :for={col <- @col} 38 - class={["p-0 pr-6 pb-4 font-normal", col[:hide_on] == :mobile && "hidden sm:table-cell"]} 40 + class={[ 41 + "p-0 pr-6 pb-4 font-normal", 42 + col[:hide_on] && "hidden #{col[:hide_on]}:table-cell" 43 + ]} 39 44 > 40 45 {col[:label]} 41 46 </th> 42 - <th :if={@action != []} class="relative p-0 pb-4"> 47 + <th 48 + :if={@action != []} 49 + class={["relative p-0 pb-4", @action_hide_on && "hidden #{@action_hide_on}:table-cell"]} 50 + > 43 51 <span class="sr-only">{gettext("Actions")}</span> 44 52 </th> 45 53 </tr> ··· 47 55 <tbody 48 56 id={@id} 49 57 phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"} 50 - class="relative divide-y divide-zinc-100 dark:divide-zinc-700 border-t border-zinc-200 dark:border-zinc-700 text-sm leading-6" 58 + class={[ 59 + "relative divide-y divide-zinc-100 dark:divide-zinc-700 text-sm leading-6", 60 + @header_border && "border-t border-zinc-200 dark:border-zinc-700" 61 + ]} 51 62 > 52 63 <tr 53 64 :for={row <- @rows} ··· 60 71 class={[ 61 72 "relative p-0", 62 73 @row_click && "hover:cursor-pointer", 63 - col[:hide_on] == :mobile && "hidden sm:table-cell" 74 + col[:hide_on] && "hidden #{col[:hide_on]}:table-cell" 64 75 ]} 65 76 > 66 77 <div class="block py-4 pr-6"> ··· 70 81 </span> 71 82 </div> 72 83 </td> 73 - <td :if={@action != []} class="relative w-14 p-0"> 84 + <td 85 + :if={@action != []} 86 + class={["relative w-14 p-0", @action_hide_on && "hidden #{@action_hide_on}:table-cell"]} 87 + > 74 88 <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium"> 75 89 <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800" /> 76 90 <span ··· 141 155 > 142 156 {render_slot(@inner_block)} 143 157 </.link> 144 - """ 145 - end 146 - 147 - attr :id, :string, required: true 148 - attr :rows, :list, required: true 149 - attr :row_id, :any, default: nil 150 - attr :row_click, :any, default: nil 151 - 152 - attr :row_item, :any, default: &Function.identity/1 153 - 154 - slot :col, required: true do 155 - attr :label, :string 156 - end 157 - 158 - def responsive_table(assigns) do 159 - assigns = 160 - with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do 161 - assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end) 162 - end 163 - 164 - ~H""" 165 - <div class="sm:overflow-visible sm:px-0"> 166 - <table class="responsive-table w-full mt-11"> 167 - <thead class="text-sm text-left leading-6 text-zinc-500 dark:text-zinc-400"> 168 - <tr> 169 - <th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal">{col[:label]}</th> 170 - </tr> 171 - </thead> 172 - <tbody 173 - id={@id} 174 - phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"} 175 - class="relative divide-y divide-zinc-200/50 dark:divide-zinc-700/50 border-t border-zinc-200/50 dark:border-zinc-700/50 text-sm leading-6" 176 - > 177 - <tr 178 - :for={row <- @rows} 179 - id={@row_id && @row_id.(row)} 180 - class="group hover:bg-zinc-50 dark:hover:bg-zinc-800" 181 - > 182 - <td 183 - :for={{col, i} <- Enum.with_index(@col)} 184 - phx-click={@row_click && @row_click.(row)} 185 - data-label={col[:label]} 186 - class={["relative p-0", @row_click && "hover:cursor-pointer"]} 187 - > 188 - <div class="block py-4 pr-6"> 189 - <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800 sm:block hidden" /> 190 - <span class={["relative", i == 0 && "font-semibold"]}> 191 - {render_slot(col, @row_item.(row))} 192 - </span> 193 - </div> 194 - </td> 195 - </tr> 196 - </tbody> 197 - </table> 198 - </div> 199 158 """ 200 159 end 201 160
-6
apps/sower/lib/sower_web/live/agent_live/index.ex
··· 22 22 {:noreply, apply_action(socket, socket.assigns.live_action, params)} 23 23 end 24 24 25 - defp apply_action(socket, :edit, %{"sid" => sid}) do 26 - socket 27 - |> assign(:page_title, "Edit Agent") 28 - |> assign(:agent, Orchestration.get_agent_sid!(sid)) 29 - end 30 - 31 25 defp apply_action(socket, :new, _params) do 32 26 socket 33 27 |> assign(:page_title, "New Agent")
+3 -3
apps/sower/lib/sower_web/live/agent_live/index.html.heex
··· 12 12 id="agents" 13 13 rows={@streams.agents} 14 14 row_click={fn {_id, agent} -> JS.navigate(~p"/agents/#{agent}") end} 15 + action_hide_on={:sm} 15 16 > 16 17 <:col :let={{_id, agent}} label="Name">{agent.name}</:col> 17 - <:col :let={{_id, agent}} label="Online" hide_on={:mobile}> 18 + <:col :let={{_id, agent}} label="Online"> 18 19 <.online state={agent.sid in Map.keys(@agent_presence)} /> 19 20 </:col> 20 - <:col :let={{_id, agent}} label="Latest Deployment" hide_on={:mobile}> 21 + <:col :let={{_id, agent}} label="Deploy"> 21 22 <.result result={agent.latest_deployment && agent.latest_deployment.result} /> 22 23 </:col> 23 24 <:action :let={{_id, agent}}> 24 25 <div class="sr-only"> 25 26 <.link navigate={~p"/agents/#{agent}"}>Show</.link> 26 27 </div> 27 - <.link patch={~p"/agents/#{agent}/edit"}>Edit</.link> 28 28 </:action> 29 29 <:action :let={{id, agent}}> 30 30 <.link
+9 -9
apps/sower/lib/sower_web/live/agent_live/show.html.heex
··· 45 45 </.link> 46 46 </div> 47 47 </div> 48 - <.responsive_table 48 + <.table 49 49 id="generations" 50 50 rows={@generations} 51 51 row_click={fn gen -> JS.navigate(~p"/seeds/#{gen.seed.sid}") end} ··· 56 56 <:col :let={gen} label="Current"> 57 57 {(gen.is_current && "✓") || ""} 58 58 </:col> 59 - <:col :let={gen} label="Created"> 59 + <:col :let={gen} label="Created" hide_on={:sm}> 60 60 <.local_datetime datetime={gen.created_at_generation} user_timezone={@user_timezone} /> 61 61 </:col> 62 - </.responsive_table> 62 + </.table> 63 63 <p 64 64 :if={@generations == []} 65 65 class="text-sm text-zinc-500 dark:text-zinc-400 italic" ··· 70 70 71 71 <section> 72 72 <h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 mb-4">Subscriptions</h2> 73 - <.responsive_table 73 + <.table 74 74 id="subscriptions" 75 75 rows={@agent.subscriptions} 76 76 row_click={ ··· 81 81 > 82 82 <:col :let={subscription} label="Name">{subscription.seed_name}</:col> 83 83 <:col :let={subscription} label="Type">{subscription.seed_type}</:col> 84 - <:col :let={subscription} label="Updated"> 84 + <:col :let={subscription} label="Updated" hide_on={:sm}> 85 85 <.local_datetime datetime={subscription.updated_at} user_timezone={@user_timezone} /> 86 86 </:col> 87 87 <:col :let={subscription} label=""> ··· 92 92 deploy_error={if @deploying_sub == subscription.sid, do: @deploy_error} 93 93 /> 94 94 </:col> 95 - </.responsive_table> 95 + </.table> 96 96 <p 97 97 :if={@agent.subscriptions == []} 98 98 class="text-sm text-zinc-500 dark:text-zinc-400 italic" ··· 113 113 </:col> 114 114 <:col :let={deployment} label="SID"> 115 115 <span 116 - class="sm:hidden truncate max-w-[8rem] inline-block align-bottom" 116 + class="sm:hidden truncate max-sm:max-w-[12rem] inline-block align-bottom" 117 117 title={deployment.sid} 118 118 > 119 119 {deployment.sid} 120 120 </span> 121 121 <span class="hidden sm:inline">{deployment.sid}</span> 122 122 </:col> 123 - <:col :let={deployment} label="Created" hide_on={:mobile}> 123 + <:col :let={deployment} label="Created" hide_on={:sm}> 124 124 <.local_datetime datetime={deployment.inserted_at} user_timezone={@user_timezone} /> 125 125 </:col> 126 126 <:action :let={deployment}> ··· 131 131 phx-value-deployment_sid={deployment.sid} 132 132 phx-stop-propagation 133 133 phx-disable-with="Retrying..." 134 - class="hidden sm:inline text-sm text-zinc-700 dark:text-zinc-200 hover:text-orange-500 dark:hover:text-orange-400 disabled:opacity-50" 134 + class="text-sm text-zinc-700 dark:text-zinc-200 hover:text-orange-500 dark:hover:text-orange-400 disabled:opacity-50" 135 135 disabled={@retrying_deployment == deployment.sid} 136 136 > 137 137 Retry
+1 -1
apps/sower/lib/sower_web/live/deployment_live/index.ex
··· 32 32 <:col :let={{_id, deployment}} label="agent"> 33 33 {get_in(deployment.agent.name) || "-"} 34 34 </:col> 35 - <:col :let={{_id, deployment}} label="completed" hide_on={:mobile}> 35 + <:col :let={{_id, deployment}} label="completed" hide_on={:sm}> 36 36 <.local_datetime datetime={deployment.deployed_at} user_timezone={@user_timezone} /> 37 37 </:col> 38 38 <:action :let={{_id, deployment}}>
+4 -3
apps/sower/lib/sower_web/live/deployment_live/show.ex
··· 41 41 42 42 <section> 43 43 <h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 mb-4">Subscriptions</h2> 44 - <.responsive_table 44 + <.table 45 45 id="subscriptions" 46 46 rows={@deployment.subscriptions} 47 47 row_click={ ··· 49 49 JS.navigate(~p"/agents/#{@deployment.agent}/subscriptions/#{subscription.sid}") 50 50 end 51 51 } 52 + header_border={false} 52 53 > 53 - <:col :let={subscription} label="Subscription"> 54 + <:col :let={subscription}> 54 55 {subscription.seed_type}/{subscription.seed_name} 55 56 </:col> 56 - </.responsive_table> 57 + </.table> 57 58 <p 58 59 :if={@deployment.subscriptions == []} 59 60 class="text-sm text-zinc-500 dark:text-zinc-400 italic"
+2 -2
apps/sower/lib/sower_web/live/forge/connection_live/index.html.heex
··· 14 14 row_click={fn {_id, connection} -> JS.navigate(~p"/forges/#{connection}") end} 15 15 > 16 16 <:col :let={{_id, connection}} label="Name">{connection.name}</:col> 17 - <:col :let={{_id, connection}} label="Url" hide_on={:mobile}>{connection.url}</:col> 18 - <:col :let={{_id, connection}} label="Type" hide_on={:mobile}>{connection.type}</:col> 17 + <:col :let={{_id, connection}} label="Url" hide_on={:sm}>{connection.url}</:col> 18 + <:col :let={{_id, connection}} label="Type" hide_on={:sm}>{connection.type}</:col> 19 19 <:action :let={{_id, connection}}> 20 20 <div class="sr-only"> 21 21 <.link navigate={~p"/forges/#{connection}"}>Show</.link>
+1 -1
apps/sower/lib/sower_web/live/nix/cache_live/index.html.heex
··· 14 14 row_click={fn {_id, cache} -> JS.navigate(~p"/nix/caches/#{cache}") end} 15 15 > 16 16 <:col :let={{_id, cache}} label="Url">{cache.url}</:col> 17 - <:col :let={{_id, cache}} label="Public key" hide_on={:mobile}>{cache.public_key}</:col> 17 + <:col :let={{_id, cache}} label="Public key" hide_on={:sm}>{cache.public_key}</:col> 18 18 <:action :let={{_id, cache}}> 19 19 <div class="sr-only"> 20 20 <.link navigate={~p"/nix/caches/#{cache}"}>Show</.link>
+5 -3
apps/sower/lib/sower_web/live/seed_live/index.html.heex
··· 9 9 rows={@streams.seeds} 10 10 row_click={fn {_id, seed} -> JS.navigate(~p"/seeds/#{seed}") end} 11 11 > 12 - <:col :let={{_id, seed}} label="name">{seed.name}</:col> 13 - <:col :let={{_id, seed}} label="seed_type" hide_on={:mobile}>{seed.seed_type}</:col> 14 - <:col :let={{_id, seed}} label="updated" hide_on={:mobile}> 12 + <:col :let={{_id, seed}} label="name"> 13 + <span class="block truncate max-sm:max-w-[8rem]">{seed.name}</span> 14 + </:col> 15 + <:col :let={{_id, seed}} label="seed_type">{seed.seed_type}</:col> 16 + <:col :let={{_id, seed}} label="updated" hide_on={:sm}> 15 17 <.local_datetime datetime={seed.updated_at} user_timezone={@user_timezone} /> 16 18 </:col> 17 19 <:action :let={{_id, seed}}>
+2 -2
apps/sower/lib/sower_web/live/settings/access_token_live/index.html.heex
··· 31 31 </:action> 32 32 33 33 <:col :let={{_id, access_token}} label="Description">{access_token.description}</:col> 34 - <:col :let={{_id, access_token}} label="Token" hide_on={:mobile}> 34 + <:col :let={{_id, access_token}} label="Token" hide_on={:sm}> 35 35 sower_{access_token.sid}_... 36 36 </:col> 37 - <:col :let={{_id, access_token}} label="Expires" hide_on={:mobile}> 37 + <:col :let={{_id, access_token}} label="Expires" hide_on={:sm}> 38 38 {access_token.expires_at} 39 39 </:col> 40 40 </.table>
+4 -4
apps/sower/lib/sower_web/live/subscription_live/show.html.heex
··· 48 48 49 49 <section> 50 50 <h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 mb-4">Matching Seeds</h2> 51 - <.responsive_table 51 + <.table 52 52 id="matching-seeds" 53 53 rows={@matching_seeds} 54 54 row_click={fn seed -> JS.navigate(~p"/seeds/#{seed}") end} ··· 61 61 <:col :let={seed} label="Created"> 62 62 <.local_datetime datetime={seed.inserted_at} user_timezone={@user_timezone} /> 63 63 </:col> 64 - </.responsive_table> 64 + </.table> 65 65 <p 66 66 :if={@matching_seeds == []} 67 67 class="text-sm text-zinc-500 dark:text-zinc-400 italic" ··· 72 72 73 73 <section> 74 74 <h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 mb-4">Deployments</h2> 75 - <.responsive_table 75 + <.table 76 76 id="deployments" 77 77 rows={@subscription.deployments} 78 78 row_click={fn deployment -> JS.navigate(~p"/deployments/#{deployment.sid}") end} ··· 84 84 <:col :let={deployment} label="Created"> 85 85 <.local_datetime datetime={deployment.inserted_at} user_timezone={@user_timezone} /> 86 86 </:col> 87 - </.responsive_table> 87 + </.table> 88 88 <p 89 89 :if={@subscription.deployments == []} 90 90 class="text-sm text-zinc-500 dark:text-zinc-400 italic"
+2 -2
apps/sower/test/sower_web/components/sower_components_test.exs
··· 28 28 refute html =~ "sm:table-cell" 29 29 end 30 30 31 - test "renders column with hide_on={:mobile} with hidden and sm:table-cell classes" do 31 + test "renders column with hide_on={:sm} with hidden and sm:table-cell classes" do 32 32 assigns = %{ 33 33 rows: [%{id: "1", name: "Alice", email: "alice@example.com"}] 34 34 } ··· 37 37 rendered_to_string(~H""" 38 38 <SowerComponents.table id="test-table" rows={@rows}> 39 39 <:col :let={row} label="Name">{row.name}</:col> 40 - <:col :let={row} label="Email" hide_on={:mobile}>{row.email}</:col> 40 + <:col :let={row} label="Email" hide_on={:sm}>{row.email}</:col> 41 41 </SowerComponents.table> 42 42 """) 43 43