detached fb6df0a

Backend: Fix container images management in the webui

- Update image list template to use ShortID instead of full ID
- Reorganize handler files
commit
fb6df0a092fc226d94e4e90b3e17a459036e88f2
author
bamen · · 2024-08-28 12:38 UTC
committer
bamen · · 2024-08-28 12:43 UTC
parent
bb4151a
signature
unsigned
7 files · +43 -23
Unified
UnifiedSplit
R internal/httpserve/handler/adminroutes.go → internal/httpserve/handler/admin-view.go +0 -0 renamed, 100% similar

renamed, 100% similar

R internal/httpserve/handler/clientendpoins.go → internal/httpserve/handler/cli-endpoints.go +0 -0 renamed, 100% similar

renamed, 100% similar

M internal/httpserve/handler/containers.go +0 -1
@@ -135,7 +135,6 @@ func ImageManagerDelete(c echo.Context, a *server.App) error {
135135 ShortID := c.Param("ID")
136136
137137 imageID, exists := safelyInteractWithIDMap(Fetch, ShortID)
138-
139138 if !exists {
140139 return c.String(http.StatusBadRequest, "Invalid ShortImgID")
141140 }
@@ -135,7 +135,6 @@ func ImageManagerDelete(c echo.Context, a *server.App) error {
135 ShortID := c.Param("ID")135 ShortID := c.Param("ID")
136 136
137 imageID, exists := safelyInteractWithIDMap(Fetch, ShortID)137 imageID, exists := safelyInteractWithIDMap(Fetch, ShortID)
138-
139 if !exists {138 if !exists {
140 return c.String(http.StatusBadRequest, "Invalid ShortImgID")139 return c.String(http.StatusBadRequest, "Invalid ShortImgID")
141 }140 }
R internal/httpserve/handler/uploadcontainerimage.go → internal/httpserve/handler/upload-image.go +0 -0 renamed, 100% similar

renamed, 100% similar

M internal/templating/models/html/fragments/imagelist.gohtml +13 -13
@@ -22,9 +22,9 @@
2222 {{
2323 range.Images
2424 }}
25- <tr id="img-{{.ID}}" hx-ext="response-targets" class=" hover:bg-slate-100">
25+ <tr id="img-{{.ShortID}}" hx-ext="response-targets" class=" hover:bg-slate-100">
2626 <td>
27- <span title="{{.ID}}">{{.Name}}</span>
27+ <span title="{{.ShortID}}">{{.Name}}</span>
2828 </td>
2929 <td>
3030 <span title="Image creation date">{{.CreatedStr}}</span>
@@ -33,22 +33,22 @@
3333 <td align="right">
3434
3535 <button
36- id="add-button-img-{{.ID}}"
37- hx-get="/htmx/create-container/{{.ID}}"
38- hx-target="#create-container-{{.ID}}"
39- hx-target-*="#error-message-div-{{.ID}}"
36+ id="add-button-img-{{.ShortID}}"
37+ hx-get="/htmx/create-container/{{.ShortID}}"
38+ hx-target="#create-container-{{.ShortID}}"
39+ hx-target-*="#error-message-div-{{.ShortID}}"
4040 hx-swap="innerHTML"
4141 class="py-2 px-4"
42- _="on click toggle between .visible and .hidden on #create-container-{{.ID}} then add .hidden to #upload-image"
42+ _="on click toggle between .visible and .hidden on #create-container-{{.ShortID}} then add .hidden to #upload-image"
4343 >
4444 <span title="Deploy a container using this image" class="iconf text-xl text-blue-600 hover:text-gordonmascot-hblue"></span>
4545 </button>
4646
4747 <button
48- id="remove-button-img-{{.ID}}"
49- hx-delete="/htmx/image-manager/delete/{{.ID}}"
50- hx-target="#img-{{.ID}}"
51- hx-target-*="#error-message-div-{{.ID}}"
48+ id="remove-button-img-{{.ShortID}}"
49+ hx-delete="/htmx/image-manager/delete/{{.ShortID}}"
50+ hx-target="#img-{{.ShortID}}"
51+ hx-target-*="#error-message-div-{{.ShortID}}"
5252 hx-swap="innerHTML"
5353 hx-confirm="Are you sure you want to delete this container image?"
5454 class="py-2 px-4"
@@ -59,8 +59,8 @@
5959 </tr>
6060 <t>
6161 <td colspan="4">
62- <div id="error-message-div-{{.ID}}" class="text-red-500"></div>
63- <div class="create-container" id="create-container-{{.ID}}"></div>
62+ <div id="error-message-div-{{.ShortID}}" class="text-red-500"></div>
63+ <div class="create-container" id="create-container-{{.ShortID}}"></div>
6464 </td>
6565 </tr>
6666 {{ else }}
@@ -22,9 +22,9 @@
22 {{22 {{
23 range.Images23 range.Images
24 }}24 }}
25- <tr id="img-{{.ID}}" hx-ext="response-targets" class=" hover:bg-slate-100">25+ <tr id="img-{{.ShortID}}" hx-ext="response-targets" class=" hover:bg-slate-100">
26 <td>26 <td>
27- <span title="{{.ID}}">{{.Name}}</span>27+ <span title="{{.ShortID}}">{{.Name}}</span>
28 </td>28 </td>
29 <td>29 <td>
30 <span title="Image creation date">{{.CreatedStr}}</span>30 <span title="Image creation date">{{.CreatedStr}}</span>
@@ -33,22 +33,22 @@
33 <td align="right">33 <td align="right">
34 34
35 <button35 <button
36- id="add-button-img-{{.ID}}"36+ id="add-button-img-{{.ShortID}}"
37- hx-get="/htmx/create-container/{{.ID}}"37+ hx-get="/htmx/create-container/{{.ShortID}}"
38- hx-target="#create-container-{{.ID}}"38+ hx-target="#create-container-{{.ShortID}}"
39- hx-target-*="#error-message-div-{{.ID}}"39+ hx-target-*="#error-message-div-{{.ShortID}}"
40 hx-swap="innerHTML"40 hx-swap="innerHTML"
41 class="py-2 px-4"41 class="py-2 px-4"
42- _="on click toggle between .visible and .hidden on #create-container-{{.ID}} then add .hidden to #upload-image"42+ _="on click toggle between .visible and .hidden on #create-container-{{.ShortID}} then add .hidden to #upload-image"
43 >43 >
44 <span title="Deploy a container using this image" class="iconf text-xl text-blue-600 hover:text-gordonmascot-hblue"></span>44 <span title="Deploy a container using this image" class="iconf text-xl text-blue-600 hover:text-gordonmascot-hblue"></span>
45 </button>45 </button>
46 46
47 <button47 <button
48- id="remove-button-img-{{.ID}}"48+ id="remove-button-img-{{.ShortID}}"
49- hx-delete="/htmx/image-manager/delete/{{.ID}}"49+ hx-delete="/htmx/image-manager/delete/{{.ShortID}}"
50- hx-target="#img-{{.ID}}"50+ hx-target="#img-{{.ShortID}}"
51- hx-target-*="#error-message-div-{{.ID}}"51+ hx-target-*="#error-message-div-{{.ShortID}}"
52 hx-swap="innerHTML"52 hx-swap="innerHTML"
53 hx-confirm="Are you sure you want to delete this container image?"53 hx-confirm="Are you sure you want to delete this container image?"
54 class="py-2 px-4"54 class="py-2 px-4"
@@ -59,8 +59,8 @@
59 </tr>59 </tr>
60 <t>60 <t>
61 <td colspan="4">61 <td colspan="4">
62- <div id="error-message-div-{{.ID}}" class="text-red-500"></div>62+ <div id="error-message-div-{{.ShortID}}" class="text-red-500"></div>
63- <div class="create-container" id="create-container-{{.ID}}"></div>63+ <div class="create-container" id="create-container-{{.ShortID}}"></div>
64 </td>64 </td>
65 </tr>65 </tr>
66 {{ else }}66 {{ else }}
M internal/webui/public/assets/css/tailwind.css +29 -9
@@ -6,7 +6,7 @@
66
77 /* Embeded path : assets/css/cutsom.css */
88
9-/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
9+/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
1010 */
1111
1212 /*
@@ -39,9 +39,11 @@
3939 4. Use the user's configured `sans` font-family by default.
4040 5. Use the user's configured `sans` font-feature-settings by default.
4141 6. Use the user's configured `sans` font-variation-settings by default.
42+7. Disable tap highlights on iOS
4243 */
4344
44-html {
45+html,
46+:host {
4547 line-height: 1.5;
4648 /* 1 */
4749 -webkit-text-size-adjust: 100%;
@@ -51,12 +53,14 @@ html {
5153 -o-tab-size: 4;
5254 tab-size: 4;
5355 /* 3 */
54- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
56+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
5557 /* 4 */
5658 font-feature-settings: normal;
5759 /* 5 */
5860 font-variation-settings: normal;
5961 /* 6 */
62+ -webkit-tap-highlight-color: transparent;
63+ /* 7 */
6064 }
6165
6266 /*
@@ -128,8 +132,10 @@ strong {
128132 }
129133
130134 /*
131-1. Use the user's configured `mono` font family by default.
132-2. Correct the odd `em` font sizing in all browsers.
135+1. Use the user's configured `mono` font-family by default.
136+2. Use the user's configured `mono` font-feature-settings by default.
137+3. Use the user's configured `mono` font-variation-settings by default.
138+4. Correct the odd `em` font sizing in all browsers.
133139 */
134140
135141 code,
@@ -138,8 +144,12 @@ samp,
138144 pre {
139145 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
140146 /* 1 */
141- font-size: 1em;
147+ font-feature-settings: normal;
142148 /* 2 */
149+ font-variation-settings: normal;
150+ /* 3 */
151+ font-size: 1em;
152+ /* 4 */
143153 }
144154
145155 /*
@@ -208,6 +218,8 @@ textarea {
208218 /* 1 */
209219 line-height: inherit;
210220 /* 1 */
221+ letter-spacing: inherit;
222+ /* 1 */
211223 color: inherit;
212224 /* 1 */
213225 margin: 0;
@@ -231,9 +243,9 @@ select {
231243 */
232244
233245 button,
234-[type='button'],
235-[type='reset'],
236-[type='submit'] {
246+input:where([type='button']),
247+input:where([type='reset']),
248+input:where([type='submit']) {
237249 -webkit-appearance: button;
238250 /* 1 */
239251 background-color: transparent;
@@ -489,6 +501,10 @@ video {
489501 --tw-backdrop-opacity: ;
490502 --tw-backdrop-saturate: ;
491503 --tw-backdrop-sepia: ;
504+ --tw-contain-size: ;
505+ --tw-contain-layout: ;
506+ --tw-contain-paint: ;
507+ --tw-contain-style: ;
492508 }
493509
494510 ::backdrop {
@@ -539,6 +555,10 @@ video {
539555 --tw-backdrop-opacity: ;
540556 --tw-backdrop-saturate: ;
541557 --tw-backdrop-sepia: ;
558+ --tw-contain-size: ;
559+ --tw-contain-layout: ;
560+ --tw-contain-paint: ;
561+ --tw-contain-style: ;
542562 }
543563
544564 .container {
@@ -6,7 +6,7 @@
6 6
7 /* Embeded path : assets/css/cutsom.css */7 /* Embeded path : assets/css/cutsom.css */
8 8
9-/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com9+/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
10 */10 */
11 11
12 /*12 /*
@@ -39,9 +39,11 @@
39 4. Use the user's configured `sans` font-family by default.39 4. Use the user's configured `sans` font-family by default.
40 5. Use the user's configured `sans` font-feature-settings by default.40 5. Use the user's configured `sans` font-feature-settings by default.
41 6. Use the user's configured `sans` font-variation-settings by default.41 6. Use the user's configured `sans` font-variation-settings by default.
42+7. Disable tap highlights on iOS
42 */43 */
43 44
44-html {45+html,
46+:host {
45 line-height: 1.5;47 line-height: 1.5;
46 /* 1 */48 /* 1 */
47 -webkit-text-size-adjust: 100%;49 -webkit-text-size-adjust: 100%;
@@ -51,12 +53,14 @@ html {
51 -o-tab-size: 4;53 -o-tab-size: 4;
52 tab-size: 4;54 tab-size: 4;
53 /* 3 */55 /* 3 */
54- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";56+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
55 /* 4 */57 /* 4 */
56 font-feature-settings: normal;58 font-feature-settings: normal;
57 /* 5 */59 /* 5 */
58 font-variation-settings: normal;60 font-variation-settings: normal;
59 /* 6 */61 /* 6 */
62+ -webkit-tap-highlight-color: transparent;
63+ /* 7 */
60 }64 }
61 65
62 /*66 /*
@@ -128,8 +132,10 @@ strong {
128 }132 }
129 133
130 /*134 /*
131-1. Use the user's configured `mono` font family by default.135+1. Use the user's configured `mono` font-family by default.
132-2. Correct the odd `em` font sizing in all browsers.136+2. Use the user's configured `mono` font-feature-settings by default.
137+3. Use the user's configured `mono` font-variation-settings by default.
138+4. Correct the odd `em` font sizing in all browsers.
133 */139 */
134 140
135 code,141 code,
@@ -138,8 +144,12 @@ samp,
138 pre {144 pre {
139 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;145 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
140 /* 1 */146 /* 1 */
141- font-size: 1em;147+ font-feature-settings: normal;
142 /* 2 */148 /* 2 */
149+ font-variation-settings: normal;
150+ /* 3 */
151+ font-size: 1em;
152+ /* 4 */
143 }153 }
144 154
145 /*155 /*
@@ -208,6 +218,8 @@ textarea {
208 /* 1 */218 /* 1 */
209 line-height: inherit;219 line-height: inherit;
210 /* 1 */220 /* 1 */
221+ letter-spacing: inherit;
222+ /* 1 */
211 color: inherit;223 color: inherit;
212 /* 1 */224 /* 1 */
213 margin: 0;225 margin: 0;
@@ -231,9 +243,9 @@ select {
231 */243 */
232 244
233 button,245 button,
234-[type='button'],246+input:where([type='button']),
235-[type='reset'],247+input:where([type='reset']),
236-[type='submit'] {248+input:where([type='submit']) {
237 -webkit-appearance: button;249 -webkit-appearance: button;
238 /* 1 */250 /* 1 */
239 background-color: transparent;251 background-color: transparent;
@@ -489,6 +501,10 @@ video {
489 --tw-backdrop-opacity: ;501 --tw-backdrop-opacity: ;
490 --tw-backdrop-saturate: ;502 --tw-backdrop-saturate: ;
491 --tw-backdrop-sepia: ;503 --tw-backdrop-sepia: ;
504+ --tw-contain-size: ;
505+ --tw-contain-layout: ;
506+ --tw-contain-paint: ;
507+ --tw-contain-style: ;
492 }508 }
493 509
494 ::backdrop {510 ::backdrop {
@@ -539,6 +555,10 @@ video {
539 --tw-backdrop-opacity: ;555 --tw-backdrop-opacity: ;
540 --tw-backdrop-saturate: ;556 --tw-backdrop-saturate: ;
541 --tw-backdrop-sepia: ;557 --tw-backdrop-sepia: ;
558+ --tw-contain-size: ;
559+ --tw-contain-layout: ;
560+ --tw-contain-paint: ;
561+ --tw-contain-style: ;
542 }562 }
543 563
544 .container {564 .container {
M package.json +1 -0
@@ -10,6 +10,7 @@
1010 "dev:css": "tailwindcss -i internal/webui/public/assets/css/custom.css -o internal/webui/public/assets/css/tailwind.css --watch"
1111 },
1212 "dependencies": {
13+ "caniuse-lite": "^1.0.30001653",
1314 "dotenv": "^16.4.5"
1415 }
1516 }
@@ -10,6 +10,7 @@
10 "dev:css": "tailwindcss -i internal/webui/public/assets/css/custom.css -o internal/webui/public/assets/css/tailwind.css --watch"10 "dev:css": "tailwindcss -i internal/webui/public/assets/css/custom.css -o internal/webui/public/assets/css/tailwind.css --watch"
11 },11 },
12 "dependencies": {12 "dependencies": {
13+ "caniuse-lite": "^1.0.30001653",
13 "dotenv": "^16.4.5"14 "dotenv": "^16.4.5"
14 }15 }
15 }16 }

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 7

Tags 106

↑↓ moveenter openesc close