Skip to content

Commit 4a07a4a

Browse files
adrwadrw
committed
Update Backfill Show to use full width tables
1 parent cdec551 commit 4a07a4a

File tree

2 files changed

+28
-130
lines changed

2 files changed

+28
-130
lines changed

‎service/src/main/kotlin/app/cash/backfila/ui/actions/BackfillShowButtonHandlerAction.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,5 +83,6 @@ class BackfillShowButtonHandlerAction @Inject constructor(
8383

8484
companion object {
8585
const val PATH = "/api/backfill/{id}/update"
86+
fun path(id: String) = PATH.replace("{id}", id)
8687
}
8788
}

‎service/src/main/kotlin/app/cash/backfila/ui/pages/BackfillShowAction.kt‎

Lines changed: 27 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@ import app.cash.backfila.dashboard.GetBackfillStatusAction
44
import app.cash.backfila.dashboard.GetBackfillStatusResponse
55
import app.cash.backfila.service.persistence.BackfillState
66
import app.cash.backfila.ui.actions.BackfillShowButtonHandlerAction
7-
import app.cash.backfila.ui.actions.BackfillShowButtonHandlerAction.Companion
87
import app.cash.backfila.ui.components.AutoReload
98
import app.cash.backfila.ui.components.DashboardPageLayout
109
import app.cash.backfila.ui.components.PageTitle
1110
import app.cash.backfila.ui.components.ProgressBar
12-
import app.cash.backfila.ui.pages.BackfillShowAction.Companion.UPDATE_BUTTON_LABEL
1311
import javax.inject.Inject
1412
import javax.inject.Singleton
1513
import kotlinx.html.ButtonType
@@ -61,7 +59,6 @@ class BackfillShowAction @Inject constructor(
6159
val leftColumnConfigurationRows = configurationRows.take(configurationRows.size / 2)
6260
val rightColumnConfigurationRows = configurationRows.takeLast(configurationRows.size / 2)
6361

64-
6562
val htmlResponseBody = dashboardPageLayout.newBuilder()
6663
.title("Backfill $id | Backfila")
6764
.breadcrumbLinks(
@@ -92,139 +89,30 @@ class BackfillShowAction @Inject constructor(
9289
}
9390
}
9491

95-
div("mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8") {
96-
div("mx-auto grid max-w-2xl grid-cols-1 grid-rows-1 items-start gap-x-8 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3") {
97-
// +"""<!-- Right Column -->"""
98-
div("lg:col-start-3 lg:row-end-1") {
99-
div("rounded-lg bg-gray-50 shadow-sm ring-1 ring-gray-900/5 p-6") {
100-
h2("text-base font-semibold leading-6 text-gray-900") { +"""Configuration""" }
101-
dl("divide-y divide-gray-100") {
102-
configurationRows.map {
103-
104-
}
92+
Card {
93+
div("mx-auto grid max-w-2xl grid-cols-1 grid-rows-1 items-start gap-x-24 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-2") {
94+
// <!-- Left Column -->"""
95+
div("") {
96+
h2("text-base font-semibold leading-6 text-gray-900") { +"""Configuration""" }
97+
dl("divide-y divide-gray-100") {
98+
leftColumnConfigurationRows.map {
99+
ConfigurationRows(id, it)
105100
}
106101
}
107102
}
108103

109-
// +"""<!-- Left Column -->"""
110-
div("") {
111-
div("rounded-lg bg-gray-50 shadow-sm ring-1 ring-gray-900/5 p-6") {
112-
h2("text-base font-semibold leading-6 text-gray-900") { +"""Configuration""" }
113-
dl("divide-y divide-gray-100") {
114-
configurationRows.map {
115-
div("px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0") {
116-
attributes["data-controller"] = "toggle"
117-
118-
this@dl.dt("text-sm font-medium leading-6 text-gray-900") { +it.label }
119-
this@dl.dd("mt-1 flex text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0") {
120-
span("flex-grow") {
121-
attributes["data-toggle-target"] = "toggleable"
122-
attributes["data-css-class"] = "hidden"
123-
124-
+it.description
125-
}
126-
it.button?.let { button ->
127-
if (button.label == UPDATE_BUTTON_LABEL) {
128-
// Initial Update Button to toggle showing form
129-
span("ml-4 flex-shrink-0") {
130-
attributes["data-toggle-target"] = "toggleable"
131-
attributes["data-css-class"] = "hidden"
132-
133-
button(
134-
classes = "mt-1 rounded-md font-medium text-indigo-600 hover:text-indigo-500",
135-
) {
136-
attributes["data-action"] = "toggle#toggle"
137-
type = ButtonType.button
138-
+button.label
139-
}
140-
}
141-
142-
// Have initial click reveal the update form with editable input
143-
form(classes = "flex-grow hidden") {
144-
attributes["data-toggle-target"] = "toggleable"
145-
attributes["data-css-class"] = "hidden"
146-
147-
action = BackfillShowButtonHandlerAction.PATH.replace("{id}", id)
148-
149-
it.updateFieldId?.let { updateFieldId ->
150-
input {
151-
type = InputType.hidden
152-
name = "field_id"
153-
value = updateFieldId
154-
}
155-
156-
div {
157-
div("flex rounded-md shadow-sm") {
158-
div("relative flex flex-grow items-stretch focus-within:z-10") {
159-
input(classes = "block w-full rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6") {
160-
name = "field_value"
161-
value = it.description
162-
}
163-
}
164-
button(classes = "relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50") {
165-
type = ButtonType.submit
166-
+"""Update"""
167-
}
168-
}
169-
}
170-
}
171-
}
172-
173-
// Cancel Button to hide form
174-
span("hidden ml-4 flex-shrink-0") {
175-
attributes["data-toggle-target"] = "toggleable"
176-
attributes["data-css-class"] = "hidden"
177-
178-
button(
179-
classes = "mt-1 rounded-md font-medium text-indigo-600 hover:text-indigo-500",
180-
) {
181-
attributes["data-action"] = "toggle#toggle"
182-
type = ButtonType.button
183-
+"Cancel"
184-
}
185-
}
186-
} else {
187-
span("ml-4 flex-shrink-0") {
188-
// Button when clicked updates without additional form
189-
form {
190-
action = BackfillShowButtonHandlerAction.PATH.replace("{id}", id)
191-
192-
it.updateFieldId?.let {
193-
input {
194-
type = InputType.hidden
195-
name = "field_id"
196-
value = it
197-
}
198-
199-
input {
200-
type = InputType.hidden
201-
name = "field_value"
202-
value = button.href
203-
}
204-
}
205-
206-
button(
207-
classes = "rounded-md font-medium text-indigo-600 hover:text-indigo-500",
208-
) {
209-
type = ButtonType.submit
210-
+button.label
211-
}
212-
}
213-
}
214-
}
215-
}
216-
}
217-
}
218-
}
104+
// <!-- Right Column -->"""
105+
div("divide-x divide-gray-100") {
106+
dl("divide-y divide-gray-100") {
107+
rightColumnConfigurationRows.map {
108+
ConfigurationRows(id, it)
219109
}
220110
}
221111
}
222112
}
223113
}
224114

225-
// +"""<!-- Left Main Column -->"""
226-
// TODO shrink padding so it shows full width
227-
div("-mx-4 px-4 py-8 overflow-x-auto shadow-sm ring-1 ring-gray-900/5 sm:mx-0 sm:rounded-lg sm:px-8 sm:pb-14 lg:col-span-2 lg:row-span-2 lg:row-end-2 xl:px-16 xl:pb-20 xl:pt-16") {
115+
Card {
228116
// Partitions
229117
h2("text-base font-semibold leading-6 text-gray-900") { +"""Partitions""" }
230118
table("my-8 whitespace-nowrap text-left text-sm leading-6") {
@@ -289,9 +177,11 @@ class BackfillShowAction @Inject constructor(
289177
}
290178
}
291179
}
180+
}
292181

182+
Card {
293183
// Logs
294-
h2("text-base font-semibold leading-6 text-gray-900 pt-8") { +"""Logs""" }
184+
h2("text-base font-semibold leading-6 text-gray-900") { +"""Logs""" }
295185
table("my-8 text-left text-sm leading-6") {
296186
thead("border-b border-gray-200 text-gray-900") {
297187
tr {
@@ -424,13 +314,20 @@ class BackfillShowAction @Inject constructor(
424314
DescriptionListRow(
425315
label = "Logs",
426316
description = "",
317+
// TODO add link real URL
427318
button = Link(
428319
label = "View",
429320
href = "#",
430321
),
431-
),
322+
)
432323
)
433324

325+
private fun TagConsumer<*>.Card(block: TagConsumer<*>.() -> Unit) {
326+
div("-mx-4 mb-8 px-4 py-8 overflow-x-auto shadow-sm ring-1 ring-gray-900/5 sm:mx-0 sm:rounded-lg sm:px-8 lg:col-span-2 lg:row-span-2 lg:row-end-2") {
327+
block()
328+
}
329+
}
330+
434331
private fun TagConsumer<*>.ConfigurationRows(id: String, it: DescriptionListRow) {
435332
div("px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0") {
436333
attributes["data-controller"] = "toggle"
@@ -464,7 +361,7 @@ class BackfillShowAction @Inject constructor(
464361
attributes["data-toggle-target"] = "toggleable"
465362
attributes["data-css-class"] = "hidden"
466363

467-
action = BackfillShowButtonHandlerAction.PATH.replace("{id}", id)
364+
action = BackfillShowButtonHandlerAction.path(id)
468365

469366
it.updateFieldId?.let { updateFieldId ->
470367
input {
@@ -507,7 +404,7 @@ class BackfillShowAction @Inject constructor(
507404
span("ml-4 flex-shrink-0") {
508405
// Button when clicked updates without additional form
509406
form {
510-
action = BackfillShowButtonHandlerAction.PATH.replace("{id}", id)
407+
action = BackfillShowButtonHandlerAction.path(id)
511408

512409
it.updateFieldId?.let {
513410
input {

0 commit comments

Comments
 (0)