Skip to content

Improve DHCP static leases interface (alternative)#3766

Merged
rdwebdesign merged 39 commits into
developmentfrom
new/simple-dhcp-static-leases2
Jun 13, 2026
Merged

Improve DHCP static leases interface (alternative)#3766
rdwebdesign merged 39 commits into
developmentfrom
new/simple-dhcp-static-leases2

Conversation

@rdwebdesign

@rdwebdesign rdwebdesign commented Apr 22, 2026

Copy link
Copy Markdown
Member

What does this PR aim to accomplish?

This is an alternative attempt to create a better user interface to edit Static DHCP leases.

This version is based on #3565 and all previous commits were kept, to avoid losing authorship credits.

Main differences found on this version:

  • the "hint" is shown once below the table, instead of on multiple table rows;
  • the textarea can't be edited while changes to the table are not finished, to avoid losing changes;
  • save button is shown only when needed;
  • button tooltips are shown;
  • only invalid cells are highlighted (no more green cells);
  • validation is now enforced for hostnames when saving (like other values);
  • IPv6 must be enclosed in brackets (as expected by dnsmasq);
  • a few style adjustments.
New_Static_DHCP_Leases_2

By submitting this pull request, I confirm the following:

  1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
  2. I have commented my proposed changes within the code and I have tested my changes.
  3. I am willing to help maintain this change if there are issues with it later.
  4. It is compatible with the EUPL 1.2 license
  5. I have squashed any insignificant commits. (git rebase)
  6. I have checked that another pull request for this purpose does not exist.
  7. I have considered, and confirmed that this submission will be valuable to others.
  8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
  9. I give this submission freely, and claim no ownership to its content.

  • I have read the above and my PR is ready for review. Check this box to confirm

DL6ER and others added 21 commits July 15, 2025 11:55
…xtarea below

Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
…t any possibility for code injection)

Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
…hemes

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: DL6ER <dl6er@dl6er.de>
…ew feedback

Resolve merge conflict in style/pi-hole.css (keep both StaticDHCPTable
styles and DNSSEC query log styles).

Address outstanding reviewer feedback:
- Change save button icon from floppy-disk to checkmark to clarify it
  confirms the row edit, not a final save
- Update hint text to mention "Save & Apply" is still needed
- Add hostname validation on the hostname cell (rejects spaces, commas,
  and other characters invalid in DNS names)

Signed-off-by: Dominik <dl6er@dl6er.de>
When using the `v` flag, hyphens need to be escaped inside a character class.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Fix regex adding `v` flag and fix line breaks to respect maximum lenght

Note: these issues were not previously reported because there was a
previous merge conflict. The prettier test was executed only after the
merge conflict was resolved.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
@rdwebdesign rdwebdesign requested a review from a team as a code owner April 22, 2026 21:18
- only show save button when needed
- use fixed size and right aligned text for button column
- highlight cells only on error and remove the highlight when is fixed
- replace a few inline CSS styles with proper HTML tags
- adjust CSS on specific themes

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- replace DOMContentLoaded listener with a function and call it when needed
- use javascript to update the CSS variable `--num-lines`
- use CSS to calculate the elements height

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
@rdwebdesign rdwebdesign force-pushed the new/simple-dhcp-static-leases2 branch 4 times, most recently from bf69448 to 8ba9c79 Compare April 22, 2026 22:09
- move and group some CSS selectors in the file, to make editing easier
- use semi-transparent background color for .table-danger
- reduce specificity for StaticDHCPTable cells and .line-numbers
- remove unused and duplicated selectors

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
…data

If enabled, the textarea can be edited, which triggers a table rewrite,
resulting in the loss of all unsaved changes made to the table rows.

This commit keeps the textarea disabled until all edited rows are saved.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR provides an alternative UX for managing static DHCP leases by introducing an editable table view that stays in sync with the underlying dhcp.hosts textarea, while improving validation, tooltips, and styling across themes.

Changes:

  • Added a dedicated “Static DHCP” table UI with per-row confirm/cancel behavior and synchronized textarea + line numbers.
  • Expanded client-side validators (IPv4/IPv6 helpers, bracketed IPv6, stricter hostname checks) and applied them to table editing.
  • Updated core/theme CSS to support the new layout, hint messaging, and validation highlighting.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
style/themes/lcars.css Theme-specific tweaks for button sizing and the new static DHCP hint/disabled-textarea tooltip styles.
style/themes/high-contrast.css Adds StaticDHCPTable-specific styling hooks for danger/success highlighting.
style/themes/high-contrast-dark.css Adds StaticDHCPTable-specific styling hooks for danger/success highlighting.
style/pi-hole.css Adds layout/UX CSS for the StaticDHCPTable, hint message, textarea wrapper, and line numbers.
settings-dhcp.lp Reworks the static DHCP section layout: introduces the table UI, advanced notes, examples cards, and textarea wrapper with line numbers.
scripts/js/utils.js Adds IPv4/IPv6 convenience validators, bracketed IPv6 validation, stricter hostname validation, and updates MAC/hostname trimming behavior.
scripts/js/settings-dhcp.js Implements the static DHCP table rendering/editing workflow, per-row save/cancel, validation highlighting, tooltips, and textarea line numbering.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread scripts/js/settings-dhcp.js
Comment thread scripts/js/settings-dhcp.js Outdated
Comment thread scripts/js/utils.js Outdated
Comment thread scripts/js/utils.js Outdated
Comment thread settings-dhcp.lp Outdated
@rdwebdesign rdwebdesign force-pushed the new/simple-dhcp-static-leases2 branch 2 times, most recently from c877479 to c574020 Compare May 6, 2026 01:15
This function tries to use a simplified version of the dnsmasq code used
to parse dhcp-host options.

Also, use the parse function when we cancel edit operation on a line

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
@rdwebdesign rdwebdesign force-pushed the new/simple-dhcp-static-leases2 branch from c574020 to 62132c8 Compare May 6, 2026 01:44
Also fix 2 issues on validation functions:
- better regex for validateMAC()
- make sure validateIPv6Brackets() correctly trims the value before
  validation

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
@rdwebdesign rdwebdesign force-pushed the new/simple-dhcp-static-leases2 branch from 09a7fcc to e6fe47c Compare May 6, 2026 03:09
@rdwebdesign

Copy link
Copy Markdown
Member Author

@yubiuser

I think the new parse function will solve some issues, like when "infinite" was considered as hostname (Example: aa:bb:cc:dd:ee:ff, 192.168.0.2, infinite). Now "infinite" is always considered as a lease time string (like on dnsmasq code).

Also, now the position of the items are not really important. The function will parse them and, if valid, will show them on the table, in the correct columns.

…ping

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Now we allow invalid values on the table and highlight them.
This will allow users to find errors in data already saved on pihole.toml.

New parsing rules added - The line is also considered as "advanced" if:
  - the line contains an asterisk;
  - more than one IP is found;
  - more than one Mac Address is found;
  - more than one hostname is found.

The table also highlights invalid data onload, before a row is clicked.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
@rdwebdesign rdwebdesign force-pushed the new/simple-dhcp-static-leases2 branch from 74af516 to a88b579 Compare May 8, 2026 00:29
@rdwebdesign rdwebdesign requested review from PromoFaux and removed request for DL6ER May 19, 2026 17:09
@github-actions

Copy link
Copy Markdown
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
@github-actions

Copy link
Copy Markdown
Contributor

Conflicts have been resolved.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
@rdwebdesign rdwebdesign force-pushed the new/simple-dhcp-static-leases2 branch from 6c8f16c to 5eef250 Compare May 19, 2026 20:57
@rdwebdesign

Copy link
Copy Markdown
Member Author

The current user interface looks like this:

static_DHCP_leases

@DL6ER

DL6ER commented Jun 13, 2026

Copy link
Copy Markdown
Member

During testing, I found one edge-case:

Note: you will need to have at least one active lease (so the copy button is visible) and at least one static lease.

  1. Click a static-table cell and type a change (Save/Cancel buttons appear, textarea greys out).
  2. Without clicking Save, click "Copy to static leases" in the active lease table above.
  3. Table redraws causing the edit to be gone with no warning (Save button/hint vanish too).

Further:

  • Lease-time-shaped hostname makes the line uneditable (in theory, 5m is a valid hostname)
  • Colon-bearing values misclassified as a MAC (like fe80::1,host or tag:green,192.168.1.5) and validateMAC fails so the line cannot be saved

I know that the latter two existed is my initial draft, too, and I am fine with having them as we-can't-fix-'em-all.

@DL6ER DL6ER force-pushed the new/simple-dhcp-static-leases2 branch from e01b595 to 8acbe92 Compare June 13, 2026 15:37
@DL6ER DL6ER force-pushed the new/simple-dhcp-static-leases2 branch from 8acbe92 to bb86afb Compare June 13, 2026 15:39
@DL6ER

DL6ER commented Jun 13, 2026

Copy link
Copy Markdown
Member

I added a proposed fix for the issue I found. I force-pushed as I broke the tests

scripts/js/settings-dhcp.js:533:3                                                                                                 
    ✖  533:3  Expected blank line before this statement.  @stylistic/padding-line-between-statements                                                      
                                                                                                                                                          
    1 error

Should go through clear now. I will approve this but please have a look at my commit before merging.

@rdwebdesign

Copy link
Copy Markdown
Member Author

but please have a look at my commit before merging.

Commit checked. I think this is fine.
We can improve/polish the "Copy to static leases" behavior in a follow up PR, if needed.

Further:

  • Lease-time-shaped hostname makes the line uneditable (in theory, 5m is a valid hostname)

I agree that 5m is both: a valid hostname and a lease time string, but I think dnsmasq considers it as a time lease when dhcp-host=00:11:22:33:44:55,10.0.0.1,5m is added to a config file (maybe I'm wrong).

  • Colon-bearing values misclassified as a MAC (like fe80::1,host or tag:green,192.168.1.5) and validateMAC fails so the line cannot be saved

Hmm... we need more work to check/validate the fe80::1,host case.
In any case, this value can still be saved if you type it on the textarea and then click on the "Save & Apply" button (even if the table misidentify it as an invalid MAC or invalid IP).

The other case (tag:green,192.168.1.5), is correctly handled:

  • if you type tag:green,192.168.1.5 on the textarea, this line will be correctly considered an Advanced line (the line will be saved using the "Save & Apply" button).
  • if you try to type tag:green on the MAC Address column, the validation function will correctly identify it as an invalid MAC (the line won't be saved, as expected).

@rdwebdesign rdwebdesign merged commit b04eaf9 into development Jun 13, 2026
11 checks passed
@rdwebdesign rdwebdesign deleted the new/simple-dhcp-static-leases2 branch June 13, 2026 17:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants