Deployment and lifecycle management for Nix
web: cleanup and standardize tables
+55
-99
+22
-63
apps/sower/lib/sower_web/components/sower_components.ex
+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
-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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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