v0.13.1 UI Polish Fixes (Round 2)
This commit is contained in:
@@ -1,211 +1,319 @@
|
||||
# TASK.md — v0.13.0 UI Polish Fixes
|
||||
# TASK.md — v0.13.1 UI Polish Fixes (Round 2)
|
||||
|
||||
**Version:** v0.13.0
|
||||
**Type:** UI polish — 8 independent fixes
|
||||
**Files likely affected:** `dashboard.html`, `backups.html`, `deploy.html`, `monitoring.html`, `style.css`, `handlers.go`, `alerts.go`
|
||||
**Version:** v0.13.1
|
||||
**Type:** UI polish — 4 fixes
|
||||
**Files likely affected:** `deploy.html`, `backups.html`, `dashboard.html`, `monitoring.html`, `layout.html`, `style.css`, `handlers.go`, `alerts.go`, `funcmap.go`
|
||||
|
||||
Read `CLAUDE.md`, `controller/README.md`, and `CONTEXT.md` before starting.
|
||||
|
||||
---
|
||||
|
||||
## Fix 1: Dashboard backup card missing border
|
||||
## Fix 1: Backup section on deploy page needs card/box styling
|
||||
|
||||
**Problem:** The "Biztonsági mentés" card on the Vezérlőpult page has no visible border/box, unlike all other sections on the page (stats-grid, system-info-card, stack-list). It looks out of place.
|
||||
**Problem:** The "Biztonsági mentés" section on app deploy/settings pages (e.g., `/stacks/immich/deploy`) has no visible border or card styling, unlike the "Adattárolás" section above it and other card sections on the page. It looks flat and out of place.
|
||||
|
||||
**Solution:** The `.backup-status-card` in `dashboard.html` needs the same card styling as `.system-info-card` — a border, background, and border-radius consistent with the dark card style used throughout the UI.
|
||||
**Where:** `deploy.html` line ~96: `<div class="deploy-cross-drive">` and the `.deploy-cross-drive` CSS class in `style.css`.
|
||||
|
||||
**Where:**
|
||||
- `style.css`: Check if `.backup-status-card` already has card-like styling. If not, add `border: 1px solid var(--border)`, `background: var(--card-bg)`, `border-radius: 12px`, `padding` — match whatever `.system-info-card` or `.monitor-card` uses.
|
||||
**Solution:** Add card-like styling to `.deploy-cross-drive` in `style.css`. Look at how `.deploy-storage-info` (the "Adattárolás" card above it on the same page) is styled and match it:
|
||||
- `border: 1px solid var(--border)`
|
||||
- `background: var(--card-bg)`
|
||||
- `border-radius: 12px`
|
||||
- `padding: 1.5rem`
|
||||
|
||||
If `.deploy-cross-drive` already exists in CSS, add the missing border/background properties. If it doesn't exist, create it with the above properties.
|
||||
|
||||
---
|
||||
|
||||
## Fix 2: Show auto-generated env values on deploy page
|
||||
## Fix 2: Clean up auto-generated env values section on deploy page
|
||||
|
||||
**Problem:** When an app is already deployed, auto-generated values (Domain, DB password, etc.) only show a label + "✓ Automatikusan generálva" green badge. The actual values are hidden. Users need to see what was generated (e.g., to configure DNS, or to log into the app's DB).
|
||||
**Problem:** The "Automatikusan generált értékek" section on the deploy page is cluttered. Each field currently shows: input + "Megjelenítés" button (for passwords) + "Másolás" button + badge. Too many elements stacked together.
|
||||
|
||||
**Solution:** Show the actual values in read-only fields. Passwords should be masked by default with a show/hide toggle (eye icon button), like the restic password on the backup page. Non-secret values (like Domain) should be shown in plain text.
|
||||
**Current code location:** `deploy.html` lines ~254-281, inside the `{{if .AutoFields}}` block.
|
||||
|
||||
**Where:**
|
||||
- `deploy.html`: In the "Automatikusan generált értékek" section, replace the simple badge-only display with actual field values. For each auto field:
|
||||
- If the field type is `password` or the key contains `PASSWORD`/`SECRET`/`KEY`: render a read-only `<input type="password">` with a toggle-visibility button (eye icon). Use the same pattern as the restic password field in `backups.html` ("Megjelenítés" / "Elrejtés" toggle button).
|
||||
- Otherwise (domain, non-secret values): render a read-only `<input type="text">` showing the value, plus a "Másolás" (copy) button.
|
||||
- Keep the "✓ Automatikusan generálva" badge too, but next to the field, not replacing it.
|
||||
- `handlers.go` (`deployHandler`): The auto field values need to be passed to the template. Currently `AutoFields` comes from `meta.AutoGeneratedFields()`. Check if the values are already populated from `app.yaml` for deployed apps. If not, read them from the stack's `.env` file or `app.yaml` `env_values` map. The values must be available in the template data.
|
||||
- `style.css`: Add styling for the auto-field display (read-only input + button group), keeping it consistent with the rest of the deploy form.
|
||||
**Current structure per field:**
|
||||
```html
|
||||
<div class="form-group form-group-auto">
|
||||
<label>{{.Label}}</label>
|
||||
{{if and $isDeployed $val}}
|
||||
{{if eq .Type "secret"}}
|
||||
<div class="input-with-button">
|
||||
<input type="password" ...>
|
||||
<button ... onclick="toggleAutoField(...)">Megjelenítés</button>
|
||||
<button ... onclick="copyAutoField(...)">Másolás</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="input-with-button">
|
||||
<input type="text" ...>
|
||||
<button ... onclick="copyAutoField(...)">Másolás</button>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
<span class="auto-generated-badge">✓ Automatikusan generálva</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Important:** Only show values for already-deployed apps. For new deployments (not yet deployed), keep the current behavior (just show the badge, since values haven't been generated yet).
|
||||
**Changes:**
|
||||
|
||||
1. **Remove ALL "Másolás" buttons** — users can select+copy natively, dedicated button adds clutter
|
||||
2. **Keep** the "Megjelenítés"/"Elrejtés" toggle button for secret/password fields (essential)
|
||||
3. **Move the badge inline with the label** — instead of on a separate line below the input, put it next to the label text
|
||||
|
||||
**New structure per field:**
|
||||
```html
|
||||
<div class="form-group form-group-auto">
|
||||
<label>{{.Label}} <span class="auto-generated-badge">✓ Automatikusan generálva</span></label>
|
||||
{{if and $isDeployed $val}}
|
||||
{{if eq .Type "secret"}}
|
||||
<div class="input-with-button">
|
||||
<input type="password" id="auto-field-{{.EnvVar}}" class="form-control" value="{{$val}}" readonly>
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="toggleAutoField('auto-field-{{.EnvVar}}', this)">Megjelenítés</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<input type="text" id="auto-field-{{.EnvVar}}" class="form-control" value="{{$val}}" readonly>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
```
|
||||
|
||||
4. **Remove the `copyAutoField` JS function** — search for `function copyAutoField` in deploy.html's `<script>` block and remove it entirely.
|
||||
|
||||
5. **CSS adjustments** in `style.css`:
|
||||
- `.form-group-auto label` should use `display: flex; align-items: center; gap: 0.5rem;` so the badge sits inline with the label text
|
||||
- `.auto-generated-badge` should be `font-size: 0.75rem` and `font-weight: normal` to not overpower the label
|
||||
- Read-only inputs (`.form-group-auto .form-control[readonly]`) could have a slightly muted background (e.g., `background: var(--bg-secondary)`) to visually indicate they're not editable
|
||||
|
||||
---
|
||||
|
||||
## Fix 3: Temperature value not visible enough on dashboard
|
||||
## Fix 3: Pillanatképek — show 0 instead of n/a
|
||||
|
||||
**Problem:** The temperature display in the system info card blends into the heading text. The small colored dot + number isn't prominent enough.
|
||||
**Problem:** In the Pillanatképek table on the backup page, columns "Hozzáadott (új adat)", "Új fájl", "Változott" show `n/a` with a long tooltip when `HasStats` is false. The user wants `0` instead — `n/a` implies "data unavailable", but `0` correctly means "no changes".
|
||||
|
||||
**Solution:** Make the temperature more visually distinct:
|
||||
- Increase the font size of the temperature value (make it match the other metric values like memory/CPU percentages)
|
||||
- Add a background pill/badge around the temperature value with a subtle color matching the status (green/yellow/red background with low opacity)
|
||||
- Keep the colored dot but make it slightly larger
|
||||
**Current code** (`backups.html`, in the snapshot table tbody):
|
||||
```html
|
||||
<td class="mono">{{if .HasStats}}+{{.DataAdded}}{{else}}<span class="col-na" title="A restic pillanatképek nem tartalmaznak méretadatot — csak az utolsó mentés adatai állnak rendelkezésre.">n/a</span>{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesNew}}{{else}}<span class="col-na" title="A restic pillanatképek nem tartalmaznak fájlszámot — csak az utolsó mentés adatai állnak rendelkezésre.">n/a</span>{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesChanged}}{{else}}<span class="col-na" title="A restic pillanatképek nem tartalmaznak fájlszámot — csak az utolsó mentés adatai állnak rendelkezésre.">n/a</span>{{end}}</td>
|
||||
```
|
||||
|
||||
**Where:**
|
||||
- `dashboard.html`: The temperature is in the `.system-info-item` for "HŐMÉRSÉKLET". Ensure the value part (`{{fmtTemp ...}}°C`) has a dedicated class for styling.
|
||||
- `style.css`: Add/modify the temperature display class. Consider a colored background pill like: `background: rgba(35,134,54,0.15); padding: 2px 8px; border-radius: 4px;` (with color varying by temp status). The dot should be ~10-12px instead of 8px.
|
||||
**Replace with:**
|
||||
```html
|
||||
<td class="mono">{{if .HasStats}}+{{.DataAdded}}{{else}}0{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesNew}}{{else}}0{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesChanged}}{{else}}0{{end}}</td>
|
||||
```
|
||||
|
||||
Remove the `<span class="col-na" title="...">` wrappers entirely. Simple `0` values.
|
||||
|
||||
Also remove the `.col-na` CSS class from `style.css` if it's no longer used elsewhere.
|
||||
|
||||
---
|
||||
|
||||
## Fix 4: Rework dashboard backup section — remove button, show compact info + warnings
|
||||
## Fix 4: Move disk warnings from top banner to inline under storage bars
|
||||
|
||||
**Problem:** After the backup architecture overhaul, having a "Mentés most" button on the dashboard is unnecessary — backups run automatically on schedule. The dashboard should show a compact status summary with potential warnings, linking to the detailed backup page for settings and manual triggers.
|
||||
**Problem:** The yellow HDD warning banner ("Az adattároló nem külön meghajtón van...") appears at the very top of the page via `layout.html`, rendered as a full-width alert banner. Even though v0.13.0 added `PageOnly` filtering (only dashboard + monitoring), the warnings are still too prominent and positioned at the top rather than near the relevant storage info.
|
||||
|
||||
**Solution:** Replace the current backup card content with a compact summary:
|
||||
- **Status line:** "Utolsó mentés:" + timestamp (colored green if recent, yellow if >24h old, red if >48h or failed) — keep this
|
||||
- **DB line:** "Adatbázisok:" + count — keep this
|
||||
- **NEW — Tier 2 status line:** Show count of apps with Tier 2 configured vs total deployed apps. E.g., "2. mentés: 3 / 5 alkalmazás". If zero configured, show a yellow warning: "⚠ Nincs 2. mentés beállítva"
|
||||
- **NEW — Warnings:** If any cross-drive backup has failed status, show a compact red warning line
|
||||
- **Remove** the "Mentés most" button entirely
|
||||
- **Remove** the "Tároló méret" line (that detail belongs on the backup page)
|
||||
- The card title "Biztonsági mentés" should remain a clickable link to `/backups`
|
||||
**Goal:**
|
||||
1. Disk warnings should NOT appear in the layout.html top banner at all
|
||||
2. They should render **inline, under the relevant storage usage bar** on dashboard and monitoring pages
|
||||
3. They should be **smaller and more subtle** than the current full-width alert banner
|
||||
|
||||
**Where:**
|
||||
- `dashboard.html`: Modify the `.backup-status-card` content. Remove `triggerBackup()` JS function and the button. Add Tier 2 summary line.
|
||||
- `handlers.go` (`dashboardHandler`): Add data for Tier 2 summary. You can derive this from the cross-drive configs: count apps with `Enabled: true` in their cross-drive settings, and count those with last status "ok" vs "error". Pass something like `CrossDriveTotal`, `CrossDriveConfigured`, `CrossDriveOK`, `CrossDriveFailed` to the template.
|
||||
- `style.css`: Minor adjustments if needed for the warning line styling.
|
||||
### Step 1: Add `Inline` field to Alert struct
|
||||
|
||||
---
|
||||
In `alerts.go`, add an `Inline bool` field to the `Alert` struct:
|
||||
|
||||
## Fix 5: HDD warning banner — only on Vezérlőpult and Rendszermonitor
|
||||
```go
|
||||
type Alert struct {
|
||||
ID string
|
||||
Level string
|
||||
Message string
|
||||
Link string
|
||||
LinkText string
|
||||
PageOnly []string
|
||||
Inline bool // If true, rendered by page template, not layout
|
||||
}
|
||||
```
|
||||
|
||||
**Problem:** The yellow "Az adattároló nem külön meghajtón van" warning banner appears on ALL pages via `layout.html`. This is overkill for pages like Alkalmazások or Beállítások, and it cannot be dismissed.
|
||||
### Step 2: Mark disk warnings as inline in Refresh()
|
||||
|
||||
**Solution:** Show this specific warning only on the Vezérlőpult (dashboard) and Rendszermonitor (monitoring) pages, positioned under the system drive usage bar rather than at the very top.
|
||||
In `alerts.go` `Refresh()`, where disk warnings get `PageOnly` set (the block checking for "meghajtón" / "adattároló" / "meghajtó"), also set `Inline: true`:
|
||||
|
||||
**Implementation approach:**
|
||||
```go
|
||||
if strings.Contains(w, "meghajtón") || strings.Contains(w, "adattároló") || strings.Contains(w, "meghajtó") {
|
||||
alert.ID = "disk-not-separate"
|
||||
alert.PageOnly = []string{"dashboard", "monitoring"}
|
||||
alert.Inline = true
|
||||
}
|
||||
```
|
||||
|
||||
The alert system already supports filtering via `GetAlerts(excludeIDs ...string)`. The disk/HDD-related warnings come from `report.Warnings` and get hashed IDs like `"health-XXXXXXXX"`.
|
||||
### Step 3: Skip inline alerts in layout.html
|
||||
|
||||
1. In `alerts.go` `Refresh()`: Tag disk-related warnings with a stable, recognizable ID prefix. When generating alerts from `report.Warnings`, check if the warning text contains HDD/disk keywords (like "adattároló", "meghajtó", "nem külön meghajtón") and give those a stable ID like `"disk-not-separate"` instead of the hash-based `"health-XXXXXXXX"`.
|
||||
2. Also add a `PageOnly []string` field to the `Alert` struct so the layout can conditionally render them.
|
||||
|
||||
**Recommended approach:** Add a `PageOnly []string` field to `Alert`. In `Refresh()`, set `PageOnly: []string{"dashboard", "monitoring"}` for disk warnings. In `layout.html`, wrap each alert render with a page check:
|
||||
In `layout.html`, update the alert rendering loop to skip inline alerts:
|
||||
|
||||
**Current:**
|
||||
```html
|
||||
{{range .Alerts}}
|
||||
{{if or (not .PageOnly) (pageMatch .PageOnly $.Page)}}
|
||||
<div class="alert-banner alert-banner-{{.Level}}">...</div>
|
||||
{{end}}
|
||||
<div class="alert-banner alert-banner-{{.Level}}">
|
||||
```
|
||||
|
||||
**Change to:**
|
||||
```html
|
||||
{{range .Alerts}}
|
||||
{{if and (not .Inline) (or (not .PageOnly) (pageMatch .PageOnly $.Page))}}
|
||||
<div class="alert-banner alert-banner-{{.Level}}">
|
||||
```
|
||||
|
||||
### Step 4: Add GetInlineAlerts method to AlertManager
|
||||
|
||||
In `alerts.go`, add a new method:
|
||||
|
||||
```go
|
||||
// GetInlineAlerts returns alerts marked as Inline for a specific page.
|
||||
func (am *AlertManager) GetInlineAlerts(page string) []Alert {
|
||||
am.mu.RLock()
|
||||
defer am.mu.RUnlock()
|
||||
|
||||
var result []Alert
|
||||
for _, a := range am.alerts {
|
||||
if !a.Inline {
|
||||
continue
|
||||
}
|
||||
if len(a.PageOnly) == 0 {
|
||||
result = append(result, a)
|
||||
continue
|
||||
}
|
||||
for _, p := range a.PageOnly {
|
||||
if p == page {
|
||||
result = append(result, a)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
```
|
||||
|
||||
### Step 5: Pass inline alerts in dashboard and monitoring handlers
|
||||
|
||||
In `handlers.go`:
|
||||
|
||||
**In `dashboardHandler`**, after `baseData()` call, add:
|
||||
```go
|
||||
if s.alertManager != nil {
|
||||
data["DiskWarnings"] = s.alertManager.GetInlineAlerts("dashboard")
|
||||
}
|
||||
```
|
||||
|
||||
**In `monitoringHandler`**, after `baseData()` call, add:
|
||||
```go
|
||||
if s.alertManager != nil {
|
||||
data["DiskWarnings"] = s.alertManager.GetInlineAlerts("monitoring")
|
||||
}
|
||||
```
|
||||
|
||||
### Step 6: Render inline warnings in dashboard.html
|
||||
|
||||
In `dashboard.html`, inside the `.system-info-card`, right after the second `.system-info-items` block (the one with SSD and HDD bars) — just before the closing `</div>` of `.system-info-card` — add:
|
||||
|
||||
```html
|
||||
{{if .DiskWarnings}}
|
||||
<div class="inline-warnings">
|
||||
{{range .DiskWarnings}}
|
||||
<div class="inline-warning inline-warning-{{.Level}}">
|
||||
<span class="inline-warning-dot">●</span>
|
||||
<span class="inline-warning-text">{{.Message}}</span>
|
||||
{{if .Link}}<a href="{{.Link}}" class="inline-warning-link">{{.LinkText}} →</a>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
```
|
||||
|
||||
Add a `pageMatch` template function in `funcmap.go` that checks if a string is in a slice. The `.Page` value is already set by `baseData()`.
|
||||
Place this INSIDE the `{{if .SystemInfo.TotalMemMB}}...{{end}}` block, after the storage bars but before the closing `</div>` of `.system-info-card`.
|
||||
|
||||
**Where:**
|
||||
- `alerts.go`: Add `PageOnly []string` to `Alert` struct. In `Refresh()`, set `PageOnly: []string{"dashboard", "monitoring"}` for disk-related warnings (detect by checking if the warning message contains "meghajtó" or "adattároló" keywords, or better: use a dedicated health-check category if available).
|
||||
- `layout.html`: Add the `pageMatch` filter around alert rendering.
|
||||
- `funcmap.go`: Add `"pageMatch"` template function.
|
||||
### Step 7: Render inline warnings in monitoring.html
|
||||
|
||||
In `monitoring.html`, inside the Tárhely `.monitor-card` (currently Section 1.5), right after the `.storage-bars` closing `</div>` but still inside the `.monitor-card`, add the same block:
|
||||
|
||||
```html
|
||||
{{if .DiskWarnings}}
|
||||
<div class="inline-warnings">
|
||||
{{range .DiskWarnings}}
|
||||
<div class="inline-warning inline-warning-{{.Level}}">
|
||||
<span class="inline-warning-dot">●</span>
|
||||
<span class="inline-warning-text">{{.Message}}</span>
|
||||
{{if .Link}}<a href="{{.Link}}" class="inline-warning-link">{{.LinkText}} →</a>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
```
|
||||
|
||||
### Step 8: Add CSS for inline warnings
|
||||
|
||||
In `style.css`, add:
|
||||
|
||||
```css
|
||||
.inline-warnings {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.inline-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.inline-warning-warning {
|
||||
color: var(--yellow);
|
||||
background: rgba(250, 204, 21, 0.06);
|
||||
border: 1px solid rgba(250, 204, 21, 0.15);
|
||||
}
|
||||
.inline-warning-error {
|
||||
color: var(--red);
|
||||
background: rgba(218, 54, 51, 0.06);
|
||||
border: 1px solid rgba(218, 54, 51, 0.15);
|
||||
}
|
||||
.inline-warning-dot {
|
||||
font-size: 0.6rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.inline-warning-text {
|
||||
flex: 1;
|
||||
}
|
||||
.inline-warning-link {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.inline-warning-link:hover {
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
```
|
||||
|
||||
This makes the warnings compact (small font, subtle background, thin border) and positioned right under the storage bar they relate to.
|
||||
|
||||
---
|
||||
|
||||
## Fix 6: Move Tárhely section higher on Rendszermonitor page
|
||||
## Implementation order
|
||||
|
||||
**Problem:** The storage (Tárhely) section is the very last section on the monitoring page, below all CPU/memory/temperature charts. Storage is basic system info that should be visible without scrolling past graphs.
|
||||
|
||||
**Solution:** Move the Tárhely section to be right after "Rendszer áttekintés" — before "Távoli monitoring" and before all the charts.
|
||||
|
||||
**Where:**
|
||||
- `monitoring.html`: Cut the entire `<!-- Section 5: Storage -->` block (the `.monitor-card` with `<h3>Tárhely</h3>`) and paste it right after the "Rendszer áttekintés" section (the first `.monitor-card`), before "Távoli monitoring".
|
||||
|
||||
---
|
||||
|
||||
## Fix 7: Snapshot table — show 0 instead of "-", add clarity to column headers
|
||||
|
||||
**Problem:** In the Pillanatképek table on the backup page, all detail columns (Méret, Új fájl, Változott) show "–" (dash) which reads as "not available" or "unknown". If there's genuinely no change, it should show `0`.
|
||||
|
||||
Also, "Méret" is ambiguous — is it total snapshot size or incremental size (data added)?
|
||||
|
||||
**Solution:**
|
||||
- Rename column headers for clarity:
|
||||
- "MÉRET" → "HOZZÁADOTT" (data added by this snapshot), or keep "MÉRET" but add "(új adat)" subtitle
|
||||
- Add a tooltip or subtitle to make meaning clear
|
||||
- Show `0` instead of `–` for zero values. Show `–` only when the data is truly unavailable (nil/missing from restic output).
|
||||
- For "Új fájl" and "Változott": show `0` when the count is zero, not `–`.
|
||||
|
||||
**Where:**
|
||||
- `backups.html`: Update the Pillanatképek table headers and cell rendering logic.
|
||||
- Check the `Snapshot` struct in the backup package and how it's populated — the fields for size/files_new/files_changed may already exist but are zero-valued, or they may be genuinely absent from the restic output.
|
||||
- If restic's `snapshots` command doesn't provide per-snapshot stats (it doesn't — you need `restic stats` or `restic diff`), document this limitation clearly. At minimum:
|
||||
- Change `–` to `0` for fields that have a zero value (not nil/missing)
|
||||
- Keep `–` only for genuinely unavailable data
|
||||
- Update column header for clarity
|
||||
|
||||
**Note on restic data:** `restic snapshots --json` returns hostname, paths, time, tags, tree hash — but NOT size/files stats. Getting per-snapshot size requires `restic stats <snapshot-id>` (expensive per snapshot). Consider:
|
||||
- Running `restic stats latest` during the nightly backup and caching the result
|
||||
- Or accepting that individual snapshot sizes aren't available and removing the misleading columns
|
||||
- At minimum, make the display honest: if data isn't collected, show "n/a" with a tooltip explaining why, rather than `–`
|
||||
|
||||
---
|
||||
|
||||
## Fix 8: Tároló section — show all backup storage locations
|
||||
|
||||
**Problem:** The Tároló section at the bottom of the Biztonsági mentés page only shows a single restic repository path (`/srv/backups/restic-repo`). With the new tiered backup architecture, backups are saved to multiple locations:
|
||||
- **Tier 1 (restic):** `/srv/backups/restic-repo` (SSD, local)
|
||||
- **Tier 2 (cross-drive):** rsync/restic to secondary drive (e.g., `/mnt/hdd_1/backups/rsync/`)
|
||||
- **DB dumps:** `/srv/backups/db-dumps/`
|
||||
|
||||
Also, `/srv/` is the Filebrowser root, not the actual host path. If showing the Filebrowser-accessible path, label it clearly.
|
||||
|
||||
**Solution:** Restructure the Tároló section into subsections per storage tier:
|
||||
|
||||
1. **1. mentés — Helyi mentés (restic):**
|
||||
- Path: the restic repo path (current display)
|
||||
- Size, snapshot count, integrity (current display)
|
||||
- Encryption key (current display)
|
||||
- Backed-up paths list (current display)
|
||||
|
||||
2. **2. mentés — Másodlagos másolat:** (only shown if any app has Tier 2 configured)
|
||||
- Destination path(s) — from cross-drive configs (may be multiple if different apps target different drives)
|
||||
- Method per destination (rsync or restic)
|
||||
- Total size per destination (if calculable via `du -sh`)
|
||||
|
||||
3. **Adatbázis mentések:**
|
||||
- Path: DB dump directory
|
||||
- File count and total size from `DumpFiles` data already available in the handler
|
||||
|
||||
4. **Mentett útvonalak:** Keep the current list but restructure:
|
||||
- Group by what's in Tier 1 (restic paths) vs what's additionally in Tier 2
|
||||
- Make it clear these are the source paths being backed up, not the backup destinations
|
||||
|
||||
**Where:**
|
||||
- `backups.html`: Restructure the `.repo-card` section. Split into subsections with clear tier headings. Keep the restic key/password display under Tier 1.
|
||||
- `handlers.go` (`backupsHandler`): Pass additional template data:
|
||||
- Cross-drive destination paths and their stats (from `CrossDriveSummary` which is already computed)
|
||||
- DB dump directory path and stats (path is in `cfg.Paths.DBDumpDir`, file count/size from `DumpFiles`)
|
||||
- Deduplicated list of Tier 2 destinations across all apps
|
||||
|
||||
---
|
||||
|
||||
## Implementation order (suggested)
|
||||
|
||||
These fixes are independent. Suggested grouping by complexity:
|
||||
|
||||
**Quick (template/CSS only):**
|
||||
1. Fix 1 — backup card border
|
||||
2. Fix 3 — temperature visibility
|
||||
3. Fix 6 — move Tárhely section
|
||||
|
||||
**Medium (template + minor handler):**
|
||||
4. Fix 7 — snapshot table display
|
||||
5. Fix 5 — warning banner scope
|
||||
|
||||
**Larger (template + handler logic):**
|
||||
6. Fix 2 — show auto-generated env values
|
||||
7. Fix 4 — dashboard backup section rework
|
||||
8. Fix 8 — Tároló section restructure
|
||||
1. **Fix 3** — Pillanatképek 0 vs n/a (template-only, 1 min)
|
||||
2. **Fix 1** — Deploy page card border (CSS only, 1 min)
|
||||
3. **Fix 2** — Auto-generated values cleanup (template + CSS)
|
||||
4. **Fix 4** — Disk warnings inline (alerts.go + layout.html + dashboard.html + monitoring.html + handlers.go + style.css)
|
||||
|
||||
## Build & deploy
|
||||
|
||||
After all fixes, bump version to **v0.13.0**, then follow the standard build workflow in `CLAUDE.md`:
|
||||
1. `git add -A && git commit && git push`
|
||||
2. Build on 192.168.0.180
|
||||
3. Deploy on 192.168.0.162
|
||||
4. Verify
|
||||
After all fixes, bump version to **v0.13.1**, then follow the standard build workflow in `CLAUDE.md`:
|
||||
|
||||
Update `CHANGELOG.md`, `CONTEXT.md`, and `controller/README.md` at the end.
|
||||
```
|
||||
Read TASK.md for the full plan. Apply all code changes described, then build and deploy.
|
||||
After all fixes are done:
|
||||
1. Run `go build ./...` and `go vet ./...` from the controller/ directory — fix any errors
|
||||
2. Update CHANGELOG.md with a new entry at the top (read top 30 lines only for format, then Edit to insert)
|
||||
3. Commit, build, and deploy following the workflow in CLAUDE.md
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user