Deployment and lifecycle management for Nix
web: cleanup some tables/display for small screens
+37
-24
+1
-1
apps/sower/lib/sower_web/components/core_components.ex
+1
-1
apps/sower/lib/sower_web/components/core_components.ex
···
387
387
def header(assigns) do
388
388
~H"""
389
389
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
390
-
<div>
390
+
<div class="min-w-0">
391
391
<h1 class="text-lg font-semibold leading-8 text-zinc-900 dark:text-zinc-300 ">
392
392
{render_slot(@inner_block)}
393
393
</h1>
+1
-1
apps/sower/lib/sower_web/components/sower_components.ex
+1
-1
apps/sower/lib/sower_web/components/sower_components.ex
+19
-9
apps/sower/lib/sower_web/live/agent_live/show.html.heex
+19
-9
apps/sower/lib/sower_web/live/agent_live/show.html.heex
···
103
103
104
104
<section>
105
105
<h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 mb-4">Deployments</h2>
106
-
<.responsive_table
106
+
<.table
107
107
id="deployments"
108
108
rows={@deployments}
109
109
row_click={fn deployment -> JS.navigate(~p"/deployments/#{deployment.sid}") end}
110
110
>
111
-
<:col :let={deployment} label="Status">
111
+
<:col :let={deployment} label="">
112
112
<.deployment_status state={deployment.state} result={deployment.result} />
113
113
</:col>
114
-
<:col :let={deployment} label="SID">{deployment.sid}</:col>
115
-
<:col :let={deployment} label="Created">
114
+
<:col :let={deployment} label="SID">
115
+
<span
116
+
class="sm:hidden truncate max-w-[8rem] inline-block align-bottom"
117
+
title={deployment.sid}
118
+
>
119
+
{deployment.sid}
120
+
</span>
121
+
<span class="hidden sm:inline">{deployment.sid}</span>
122
+
</:col>
123
+
<:col :let={deployment} label="Created" hide_on={:mobile}>
116
124
<.local_datetime datetime={deployment.inserted_at} user_timezone={@user_timezone} />
117
125
</:col>
118
-
<:col :let={deployment} label="">
119
-
<.button
126
+
<:action :let={deployment}>
127
+
<button
120
128
:if={deployment.state in [:completed, :stale]}
121
129
type="button"
122
130
phx-click="retry_deployment"
123
131
phx-value-deployment_sid={deployment.sid}
132
+
phx-stop-propagation
124
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"
125
135
disabled={@retrying_deployment == deployment.sid}
126
136
>
127
137
Retry
128
-
</.button>
129
-
</:col>
130
-
</.responsive_table>
138
+
</button>
139
+
</:action>
140
+
</.table>
131
141
<p
132
142
:if={@deployments == []}
133
143
class="text-sm text-zinc-500 dark:text-zinc-400 italic"
+12
-9
apps/sower/lib/sower_web/live/deployment_live/index.ex
+12
-9
apps/sower/lib/sower_web/live/deployment_live/index.ex
···
17
17
rows={@streams.deployments}
18
18
row_click={fn {_id, deployment} -> JS.navigate(~p"/deployments/#{deployment}") end}
19
19
>
20
-
<:col :let={{_id, deployment}} label="Status">
20
+
<:col :let={{_id, deployment}} label="">
21
21
<.deployment_status state={deployment.state} result={deployment.result} />
22
22
</:col>
23
-
<:col :let={{_id, deployment}} label="sid">{deployment.sid}</:col>
24
-
<:col :let={{_id, deployment}} label="agent" hide_on={:mobile}>
23
+
<:col :let={{_id, deployment}} label="sid">
24
+
<span
25
+
class="sm:hidden truncate max-w-[8rem] inline-block align-bottom"
26
+
title={deployment.sid}
27
+
>
28
+
{deployment.sid}
29
+
</span>
30
+
<span class="hidden sm:inline">{deployment.sid}</span>
31
+
</:col>
32
+
<:col :let={{_id, deployment}} label="agent">
25
33
{get_in(deployment.agent.name) || "-"}
26
34
</:col>
27
35
<:col :let={{_id, deployment}} label="completed" hide_on={:mobile}>
···
35
43
phx-value-sid={deployment.sid}
36
44
phx-stop-propagation
37
45
phx-disable-with="Retrying..."
38
-
class="text-sm text-zinc-700 dark:text-zinc-200 hover:text-orange-500 dark:hover:text-orange-400 disabled:opacity-50"
46
+
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"
39
47
disabled={@retrying_deployment_sid == deployment.sid}
40
48
>
41
49
Retry
42
50
</button>
43
-
</:action>
44
-
<:action :let={{_id, deployment}}>
45
-
<div class="sr-only">
46
-
<.link navigate={~p"/deployments/#{deployment}"}>Show</.link>
47
-
</div>
48
51
</:action>
49
52
</.table>
50
53
</Layouts.app>
+4
-4
apps/sower/lib/sower_web/live/deployment_live/show.ex
+4
-4
apps/sower/lib/sower_web/live/deployment_live/show.ex
···
8
8
~H"""
9
9
<Layouts.app flash={@flash} current_user={@current_user}>
10
10
<.header>
11
-
<div class="flex items-center space-x-2">
11
+
<div class="flex items-center space-x-2 min-w-0">
12
12
<.deployment_status state={@deployment.state} result={@deployment.result} />
13
-
<span>{@deployment.sid}</span>
13
+
<span class="truncate" title={@deployment.sid}>{@deployment.sid}</span>
14
14
</div>
15
15
<:actions>
16
16
<.button
···
70
70
id={"seed-log-#{sd.seed.sid}"}
71
71
class="rounded-lg border border-zinc-200/50 dark:border-zinc-700/50 p-4"
72
72
>
73
-
<div class="flex items-center justify-between gap-4">
74
-
<div class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 flex flex-wrap items-center gap-2">
73
+
<div class="flex flex-wrap items-center justify-between gap-2 sm:gap-4">
74
+
<div class="text-sm font-semibold text-zinc-900 dark:text-zinc-200 flex flex-wrap items-center gap-2 min-w-0">
75
75
<.link
76
76
navigate={~p"/seeds/#{sd.seed.sid}"}
77
77
class="hover:text-orange-500 dark:hover:text-orange-400"