* fix(themes): correct CSS cascade, font fallbacks and responsive selectors
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* fix(themes): remove validated empty and redundant CSS rules
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* style(css): remove reviewed inactive rules and redundant separators
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* style(themes): consolidate two reviewed duplicate selectors
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* fix(themes): remove identical whitespace declaration after consolidation
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* fix(theme): keep context menu fallbacks in Cacti overrides
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* test(theme): measure native CSS and header coverage
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* ci: retain bootstrap coverage and validate request dispatch
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* test: synchronize native coverage fixture dispatch
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* test: measure coverage at the exact PR revision
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* test: cover Midwinter and graph heading CSS repairs in Chromium
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
* ci: take the theme coverage base from the merge commit parent
- github.event.pull_request.base.sha can predate the develop tip the checkout was merged onto, which counted develop's own CSS lines as the PR's.
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
---------
Signed-off-by: Thomas Vincent <thomasvincent@gmail.com>
The common filter class already renders filter checkboxes as text-first toggle sliders. This adds the equivalent styling for legacy plugin filters that still emit a raw <input type=checkbox> inside .filterTable, so they match until they adopt the new filter class. Each theme's filter toggle mirrors that theme's own checkboxSlider (colours, radius, 0.4s). form_checkbox()/common-filter sliders (class formCheckbox) are excluded via :not(.formCheckbox). Track radius is !important to beat .ui-corner-all.
* Add 'Deepness' theme to develop; midwinter billboard + deviceStatus hook
Forward-ports the Deepness theme (1.2.x #8202 + #8205) to develop as one change: the full include/themes/deepness/ theme (emerald-dark :root palette, Paw layout/top-tab JS, full billboard.js 3.13 overload CSS, dark widget CSS), the themes allowlist entry, the i18n_themes name, the midwinter billboard overload rules, and the shared 'deviceStatus' hook class in get_colored_device_status() that the theme styles as status pills. Paper-plane is intentionally untouched (worked separately). The lib/html.php favicon/arrow tweaks from 1.2.x are omitted - develop handles those via get_md5_include_icon()/get_theme_paths() and the theme's own .actionsDropdownArrow CSS.
* deepness: align main.js with Paw parent (drop stale host_id autocomplete & graphDrillDown, fix search-icon/handler leaks)
* deepness: drop bundled billboard.css (obsolete per-theme file; central include/css/billboard.css + main.css .bb overloads cover it)
* i18n: add 'Deepness' theme name to cacti.pot translation template
* Deepness: apply php-cs-fixer formatting and refresh sink inventory baseline
php-cs-fixer fixes the single-quote and // comment style in the deepness theme index.php/rrdtheme.php files, and the sink inventory baseline records the header_redirect sinks in the new deepness index.php files.
* tests: stop the boost upgrade integration test leaking IN_CACTI_INSTALL
BoostProcessTableUpgradeIntegrationTest defined IN_CACTI_INSTALL at file (collection) scope, so it was set for the whole shared pest process and made CactiErrorHandler() take its install-mode early-return. That broke CactiErrorHandlerSuppressionTest ('an enabled level is logged...' expected false, got true) in the pest coverage gate and the locked integration job. The upgrade files required here do not check the constant at load time (only lib/database.php does, at runtime inside its schema probes), so define it in beforeEach after the DB connects instead -- it is never set at collection time and, with no DB in CI, the test skips without defining it. Full pest suite: 2664 passed, 0 failed.
* fix: label modern dialog apply/clear with the page button text; show Rows on the bar
The dialog apply button was hardcoded 'Search', which mismatched the page's submit label (e.g. 'Go') and collided with pages that have a filter field named Search (clog). It now uses the configured go/clear button display text. Also route the 'rows' field to the modern bar alongside timespan/refresh so the per-page Rows selector stays visible.
* feature: always label the row-count selector 'Rows'
emit_field() forces the 'rows' field friendly_name to Rows regardless of page-specific naming (Devices, Trees, ...), in both legacy and modern filters. Refresh already renders on the modern bar via field_is_bar.
* feature: order modern bar selectors (Rows, Refresh) and separate them from the buttons
Rows renders first and Refresh second on the modern filter bar, and a vertical separator now divides the selectors (Layouts, Rows, Refresh) from the layout action buttons.
* changelog: 8191.feature fragment for modern filter bar polish
* jQuery 4: replace removed $.isFunction in bundled plugins
jQuery 4.0 removed $.isFunction. contextMenu, colorpicker and timepicker are hand-vendored orphans fixed in place; tablesorter is npm-managed, so it is also rewritten at sync time in build/sync-js.mjs so a rebuild reproduces the fix (no-ops once the upstream fix is released and the pin is bumped).
* Render the Thumbnails and Business Hours graph filter checkboxes as Cacti toggles
* fix: address review — update modern JS docblock and strengthen bar/label tests
Rewrite the create_modern_javascript docblock to describe the page-configured apply/clear labels (and document the change/clear callback params). Extend FilterLayoutsTest to assert the selector|button separator, the applied Rows-then-Refresh ordering, and both go/clear label lookups, and that the hardcoded Search dialog label is gone.
* Filter bar polish: toggle-style filter checkboxes and flicker-free layout buttons
Render the shared filter_checkbox field as a Cacti toggle switch (.checkboxSwitch/.checkboxSlider) so every page's filter checkboxes match the rest of the UI, and start the layout Rename/Delete/Save As buttons hidden so layoutUpdateButtons() reveals them only when applicable instead of flashing visible on load.
* Modern filter: move the timespan selector onto its own second filter line
Timespan controls were rendered inline on the single modern filter bar. Route method=timespan fields into a separate group and emit them as a second filterTable row so the bar isn't overcrowded, matching the legacy multi-row layout. Applies to every modern filter with a timespan (the graph view pages).
* Modern filter: keep toggle checkboxes on the bar with a visible label and tooltip
filter_checkbox fields now count as bar fields so the Thumbnails/Business Hours toggles sit on the single bar instead of the Edit dialog. Their label used .checkboxLabel (display:none by design for forms), which hid the text; switch to .checkboxLabelWanted and always set a title tooltip from the field's title/friendly_name so each toggle is self-describing.
* Modern filter: toggles back in the dialog, restrict auto-apply to bar fields, drop dialog Clear
- Move filter_checkbox toggles back into the Edit dialog (field_is_bar no longer claims them) and render them as a form row: friendly name in the label column, toggle in the value column.
- In modern mode only bar selectors (Rows, Refresh) and the Layout selector auto-trigger a filter change; dialog field changes/clicks no longer call applyFilter (gate changeChain/clickChain on !use_modern_filter() || field_is_bar). Legacy keeps auto-applying on change (text inputs still excluded).
- Remove the Clear button from the modern Edit dialog and the now-unused clearLabel; update the dialog-labels test accordingly.
* Fix filter toggle vertical alignment across themes
The generic .filterTable .filterColumn label { vertical-align: -10% } nudge (meant for text labels) out-specified .checkboxSwitch and dragged the toggle switch down, which also pulled the adjacent label baseline low in the Edit dialog and misaligned the toggle on the legacy filter bar. Add a higher-specificity label.checkboxSwitch { vertical-align: middle } in every theme carrying the rule (midwinter has no such rule).
* Hide the filter search glyph in the modern Edit dialog
Theme main.js appends a ti-search glyph after #rfilter, positioned for a table cell; in the modern Edit dialog #rfilter sits in a wide div (no td), so the glyph wraps below the field. Skip the injection when #rfilter is inside .cactiFilterEditTable (modern dialog); legacy, which has no such ancestor, keeps the glyph.
* jQuery 4: full removed-API sweep of bundled plugins
Replace every jQuery-4-removed helper across the vendored plugins: \$.trim -> String.prototype.trim, \$.isArray -> Array.isArray, \$.proxy -> Function.prototype.bind, \$.parseJSON -> JSON.parse, \$.type -> typeof/\$.isPlainObject, \$.isWindow -> native window check (plus the earlier \$.isFunction). Orphans (colorpicker, timepicker, multiselect, multiselect.filter, tableDnD) are fixed in place; the npm-managed tablesorter core+widgets are rewritten at sync time in build/sync-js.mjs so a rebuild reproduces the fix.
* Modern filter dialog: non-modal, Apply gated on save, Save keeps dialog open
- Rename the dialog apply action to Apply and disable it until the (new or changed) filter is saved (layoutDirty tracking); Close just closes without applying.
- Save no longer reloads the page: it reflects the saved layout in the selector and re-enables Apply, keeping the dialog open.
- Dialogs are now modal: false.
- Switch the layout selector change from a full document.location reload to an AJAX loadUrl().
- Vertically center the modern bar cells so the barSep separator lines up between the buttons.
* Modern filter: add layout to the filter's session variable structure
Register layout (FILTER_VALIDATE_INT, default 0) in sanitize_filter_variables() alongside page so the selected layout is validated and stored in the filter's session object and persists across page views.
* Modern filter: Graph Template amalgam on line 2, timespan on line 3
Tag the Graph Template + Source/Order/CF/Measure group ('bar' => true on graph_template_id and the html_graph_order_filter_array() metrics) so create_modern_filter renders it as its own second filter line on Graph View and Tree View, pushing the timespan to the third line. These bar fields also auto-trigger the filter so the Template->Source->Order callback chain works on the main bar.
* Fix graph_template_id multi-select: allow comma lists, type get_host_graph_list correctly
get_host_graph_list() immediately transforms graph_template_id via html_transform_graph_template_ids() (handles cg_/dq_ prefixes and comma lists), so its parameter is a string, not an int -- correct the type hint and docblock. Also widen the preview and listview graph_template_id validation regexp to accept a comma-separated list like 'cg_118,cg_106,cg_119', matching the tree filter.
* Modern filter: hide the whole cell for hidden layout buttons to even out bar separator spacing
The Rename/Delete/Save As buttons hid only the <button>, leaving their table-cell (with padding) in the bar, so the separator after them was pushed away from Edit. Put the display:none on the .filterColumnButton cell and toggle the cell in layoutUpdateButtons so hidden buttons take no space and the separators sit evenly between the visible buttons.
* Remove legacy .drop-callback/makeCallbacks() autocomplete widget
The Device dropdown and other form_callback() lookups now always use the
ajax-backed select2 selectmenu. Drop the old makeCallbacks() jQuery-UI
autocomplete entirely and have form_callback() render the select2-callback
<select> by default, keeping the plain full-list <select> only when the
'autocomplete' config option is enabled.
* Carry selected layout through the modern dialog Apply action
The layout_save callback already returns the new layout id (and url), and
layoutDialogSave() selects it in #filter_layout. The dialog Apply button,
however, ran the plain filter apply (applyFilter()) which rebuilds the URL
from the field values and omits filter_layout, so the page reloaded as
(New Filter). Apply now navigates to the selected layout's data-url (which
includes filter_layout=<id>) when a layout is selected, falling back to the
normal filter apply when none is.
* Fix Filter Layouts manage page table and use jQuery UI dialogs for delete/rename
The management table was opened with html_start_box(\ = true), emitting a
<div> instead of a <table>, so the header and rows rendered unstyled and
run-together. Switch it to table mode.
Replace the generic confirm()-based delete with a CDEF-style jQuery UI
confirmation dialog loaded over ajax, and add a Rename action that opens a
matching jQuery UI dialog with a name field. Both post to the existing
layout_delete/layout_rename handlers on confirm.
* Use jQuery UI dialogs for filter-bar layout rename/delete; drop rename from manage page
The filter bar (modern and legacy) was still using native prompt()/confirm()
for the layout Rename and Delete actions - convert both to jQuery UI dialogs
(a name-entry dialog for rename, a confirm dialog for delete).
On the Filter Layouts management page, remove the rename action entirely and
instead link the layout name to its page (with filter_layout set) as an edit
link; keep the Delete confirmation dialog and Publish action.
* Rework Layouts manage page: preset filter bar + actions dropdown; rename to Layouts
Model layouts.php on the preset pages (CDEFs, etc.): add the standard
CactiTableFilter search bar in the legacy look, a sortable list with a
checkbox column, a pager, and a draw_actions_dropdown with Delete, Make
Global (publish), and Make Local (reassign to the current user). The
unimpressive per-row action icons and ajax dialogs are replaced by the
checkbox/confirmation flow. Make Global/Make Local are admin-only.
Treat layouts.php as a filter_layouts preset page so its own filter bar
does not offer the layout dropdown. Rename the page title and Console
Presets menu entry from 'Filters'/'Filter Layouts' to 'Layouts'.
* Show friendly page name in the Layouts list Page column
Map the stored page basename to the Console navigation title (e.g. host.php
=> Devices) via a layouts_page_name() lookup against \, falling
back to the raw basename. The Page column is now nosort since the displayed
label no longer matches the sortable database value.
* Fix filter search TypeError: use filter_options key in default search field
sanitize_filter_variables() reads a field's callback options from the
'filter_options' key, but the default search field in create_default() stored
them under 'options', so the key never reached validate_store_request_vars().
That left FILTER_CALLBACK with no callback and raised 'filter_var(): Option
must be a valid callback' whenever a table filter was searched.
* Address PR scan findings: tablesorter useless conditional + layouts SQL
- jquery.tablesorter.js: drop the redundant 'str &&' guard inside the
already-truthy 'str ?' branch of the digit and currency parsers (CodeQL
useless-conditional). Add a matching sync-js transform rule so a rebuild
from upstream keeps the simplification.
- layouts.php: fully parameterize the management list queries with bound
'?' parameters for the search term and user id, and build the LIMIT from
explicit (int) page/rows, so no request variable reaches the SQL string
(Semgrep cacti-request-var-in-sql).
* Address PR review: colorpicker trim, tablesorter JSON guard, bar separator, i18n
- jquery.colorpicker.js: _setAltField() iterated index <= properties.length, so
the last pass read properties[undefined]; \$.trim(undefined) was '' but native
.trim() throws. Iterate with < so no TypeError.
- jquery.tablesorter.widgets.js: the retrieveValue feature-check still tested the
removed \$.parseJSON; under jQuery 4 it was always falsy so saved widget state
never loaded. Test native window.JSON.parse instead, and add a matching
build/sync-js.mjs transform rule so a rebuild keeps the guard.
- html_filter.php: the Layouts selector is always rendered, so emit the
selector-to-button separator unconditionally (graph preview routes fields to
the amalgam/timespan lines, leaving the bar line without it before).
- changelog/i18n: reword 8191.feature to describe the Apply (save-gated) dialog
action, and add the new layouts.php/html_filter.php msgids to cacti.pot.
* Add tablesorter transform coverage to the sync-js test
Feed a fixture containing every removed jQuery 4 utility (\$.isFunction,
\$.trim, \$.type ===string/object, \$.isWindow, \$.isArray, \$.parseJSON calls
and the bare if (\$.parseJSON) guard) plus the CodeQL str && simplification
through syncAssets, and assert the synced tablesorter output contains the
native equivalents and none of the removed APIs. Previously the transform ran
against a generic stub, so an incomplete rewrite could pass unnoticed.
* Apply php-cs-fixer: comment style, alignment, and single-quote strings
Run through the project php-cs-fixer config (the mandatory pre-PR check):
line comments for the input-validation banners, aligned assignment, and
single-quoted strings where no interpolation is used. No behaviour change.
* Render the filter Go action as a refresh glyph button (modern + legacy)
Replace the 'Go' text submit with a compact 'ti ti-refresh' glyph button
titled 'Refresh page' for every page filter:
- emit_field() forces the glyph/title on any 'go' submit, so both the shared
default and pages that define their own 'go' get it on the legacy filter.
- The modern bar (which has no form) gets a JS-wired #layout_refresh glyph
button right of Edit that loadUrl()s the selected layout url (carrying
filter_layout) or the page change callback.
Add the 'Refresh page' msgid to cacti.pot and note it in 8191.feature.
* Add a Tabler .icon-rotate spin class and use it for refreshing icons
Tabler ships only the icon webfont, with no fa-spin equivalent, so spinning
reload icons stopped animating (e.g. the Troubleshooting > Data Sources
auto-refresh indicator). Define .icon-rotate in every theme (reusing the
globally loaded fa-spin keyframes) and apply it:
- the modern filter refresh button spins while it loads,
- the realtime graph drill-down loader switches from fa-spin to icon-rotate,
- the data_debug auto-refresh indicators spin again.
* tests: sync FilterLayouts assertions with the reworded separator comment and dw.addClass
The source scan expected the old 'Separate the selectors' comment and a chained
.dialog('widget').addClass() form; update to the current reworded comment and
the 'var dw' + dw.addClass('cactiFilterDialog') the dialog now uses.
* Glyph-ify the timespan Refresh/Clear and the generic Clear action
Replace the timespan 'Refresh' text button with a spinning ti ti-refresh glyph
and 'Clear' with a ti ti-eraser glyph (also fixing a stray double </span>), and
make the generic filter Clear a ti ti-eraser glyph button across legacy and
modern via emit_field (button case now honours a 'glyph' key). The timespan
refresh icon spins (icon-rotate) while it reloads.
* Glyph-ify filter Import/Export, layout, and modern-bar action buttons
Force ti-table-import / ti-table-export glyphs for any filter button named import/export (centralized in emit_field like go/clear), so page-defined Import/Export buttons and the modern bar's always-visible action strip render consistent Tabler glyphs. Add a glyph parameter to layout_button() and glyph the Edit/Rename/Delete/Save As/Save/New/Publish buttons across the modern bar and legacy layouts row.
* Use table-import/table-export glyphs for cactiTableButton Import/Export icons
The filter header Export/Import icons injected into cactiTableButton used generic chevron-down/chevron-up glyphs; switch them to ti ti-table-export / ti ti-table-import to match the rest of the glyph theme.
* Glyph-ify the Save Filter Defaults button on the filter bar
The has_save 'Save' action rendered as a text button on the modern bar (and legacy filter); force a ti ti-device-floppy glyph via emit_field like go/clear/import/export so it matches the rest of the glyph theme.
* Regenerate tree-view graphs when applying a saved filter layout
The modern layout selector loaded a layout's saved data-url (action=tree) directly, so on the Graph Tree view it pulled the tree shell instead of regenerating graphs. Route the layout-url loads (selector change, refresh button, and dialog Apply) through correctUrlParameters() so action=tree becomes action=tree_content and graphs reload into #main, matching applyGraphFilter(). No-op on non-tree pages.
* Keep timespan controls working after ajax reloads and tip custom date fields
On the Graph Preview page the predefined_timespan change and tsrefresh/tsclear/shift click handlers were bound directly inside the filter's inline ready script, so an ajax content reload that replaced the timespan controls dropped the bindings (a full page refresh restored them). Bind them with namespaced event delegation on document so they survive content replacement and never double-bind. Add tooltips to the custom start/end date inputs telling the user to click Refresh to apply the range, plus POT entries and a changelog note.
* Record layouts.php static redirect in the sink inventory baseline
The sink and architectural hotspot guard flagged inventory drift: layouts.php's static header('Location: layouts.php') redirect (no request input) was never added to the tracked baseline. Refresh the baseline via tests/security/build_sink_inventory.sh to record it.
* Fix layout Save-As dialog state and use cacti_redirect in layouts.php
Address review findings: (1) use cacti_redirect('layouts.php') instead of a raw header()+exit so the standard redirect checks run (and drop the now-unneeded sink-inventory entry); (2) reset the dialog's force-new flag after the first successful save so later saves update the created layout instead of creating duplicates; (3) preserve an existing dirty state when reopening the Edit dialog so pending edits are not silently discarded by Apply.
* Drop stale layout msgids from the translation template
Remove the Filter Layouts, Published to all users, Publish to all users, and No Filter Layouts Found msgids that this PR replaced (now Layouts, Make Global, Make Local, No Layouts Found); all four are absent from PHP. Keeps the surgically-maintained POT in sync with the shipped strings.
---------
Co-authored-by: TheWitness <TheWitness@users.noreply.github.com>
* fix: align Force Uninstall icon by adding .piforceremove to icon-padding rule
The orphaned-plugin (-5) control introduced in #8107 renders a .piforceremove anchor, but that class was missing from the plugin-action icon padding rule, so the icon lost its 0 3px padding and misaligned in the Actions column. Add .piforceremove alongside .pierror in every theme stylesheet.
* fix: align Force Uninstall confirm wording to standard 'Otherwise click Cancel.' pattern
develop counterpart of the #8109 dialog copy fix. develop already uses the non-modal displayDialog() with a plain-text message, so only the closing sentence is aligned to the house pattern (with trailing period). cacti.pot msgid updated to match.
* fix: bump midwinter core.css cache-buster hash to match the updated file
The Force Uninstall (.piforceremove) alignment change edited
include/themes/midwinter/css/media/core.css, changing its content md5 to
afd5bc6f4d45884846ab715f1583123c, but main.css still imported it with the old
?ad4ed321... query string. Browsers holding the pre-change stylesheet in cache
would keep the icon misaligned. Update the import hash so the change is picked up.
---------
Co-authored-by: TheWitness <copilot@users.noreply.github.com>
* tree: replace jsTree node PNGs with Tabler glyphs, per-type theme colors, and glyph open/close carets
* tree: center carets to 20px node row, remove indent dotted lines, add dots:false to editor source tree
* tree: center jsTree carets with flexbox so alignment is glyph-height independent
* tree: vertically center node glyph with its label text (vertical-align middle)
* tree: preserve jsTree loading throbber and add default folder glyph
Scope the .jstree-ocl reset and caret glyph content to :not(.jstree-loading) so AJAX expansion keeps its loading indicator, and register a 'ti ti-folder' glyph (with per-theme color) for the untyped 'default' branch type so branch nodes are not left with a blank icon.
* feat: convert generic <select> elements to select2, with new class helpers
Replaces the jQuery UI selectmenu() catch-all in setSelectMenus() with select2,
applied uniformly to single and multi selects. Fewer than 10 options disables
the search box (minimumResultsForSearch: Infinity); 10 or more enables it -
same threshold now applied to the existing select2/select2-multi classes.
New layout.js class helper: select2-multi-count, a multi-select whose
selection summary reads "N Selected"/"All Selected" instead of one chip per
option (generic multiSelectAllText/multiSelectCountText strings in html.php,
overridable per-field via data-select-all-text/data-select-count-text/
data-select-all-value). graph_template_id (html_graph.php x2, html_tree.php)
now uses it in place of the jquery.multiselect-based .graph-multiselect,
preserving the existing "All Graph Templates"/"N Templates Selected" wording
and the -1 "all" sentinel behavior (reimplemented via select2:select/unselect
events in setSelectMenus()). The old .graph-multiselect jquery.multiselect
init block is left in place (now unreachable for core's own markup) in case
a plugin/theme still emits that class itself.
select2-callback is reworked from its previously-unused static-URL contract
into an ajax-backed replacement for the legacy .drop-callback/makeCallbacks()
autocomplete widget: data-action + data-variables build the query the same
way makeCallbacks() already did (pageName + action + live values of other
named fields + search term), and data-callback still names a JS function to
invoke on selection, matching form_callback()'s existing $on_change/$class
contract. form_callback() only renders the new <select> markup when its
$class parameter contains select2-callback (opt-in); every existing caller
that doesn't request it keeps the exact legacy output. html_graph.php's
host_id filter (both places) opts in. form_multi_dropdown() gained optional
$select_all_text/$select_count_text/$select_all_value parameters (all
additive/backward compatible) to plumb the graph_template_id wording through.
Compatibility: an org-wide code search found no plugin depending on the
.select2-callback/.graph-multiselect/.drop-callback/makeCallbacks() internals
being changed here (form_callback()'s default output is unchanged; the
.graph-multiselect jquery.multiselect init stays available). Everywhere else
in core that assumed the old jQuery UI selectmenu widget on elements now
covered by the broadened catch-all (disableField()/enableField(), the SNMP
security-level/protocol refresh logic, realtime.js's ds_step/graph_start/size
refresh, api_aggregate.php's field enable/disable, and html_reports.php's
branch_id/site_id/host_template_id handling) now branches on
.select2-hidden-accessible and uses select2's own refresh mechanism
(.trigger('change.select2')) instead, alongside the untouched legacy
selectmenu branch. #user_language and #i18n_default_language (which get
their own bespoke flag-icon languageselect widget) are excluded from the
catch-all, same as before.
The install wizard (install/install.js) has its own independent selectmenu
initialization and is intentionally left untouched.
* fix: use json_encode for select2 multi-select JS translation strings
* fix: make select2 initializers idempotent to stop duplicate widgets
applySkin() (which calls setSelectMenus(), where every select2/select2-multi/
select2-multi-count/select2-callback/catch-all initializer lives) runs more
than once per page view - once from cactiReady() on initial load, and again
from the generic AJAX-completion handler after any loadUrl()/postUrl() call,
which most list/filter pages already trigger during their own initial load.
Since calling .select2() a second time on an element that already has it
initialized creates a second, independent .select2-container next to the
first (select2 does not no-op or tear down the previous instance), every
affected <select> ended up rendering twice. Guard every initializer (plus
the graph_template_id -1 sentinel's event bindings, now namespaced and
unbound first) so a second setSelectMenus() pass skips elements already
marked .select2-hidden-accessible.
* fix: match select2 dropdown styling to the dark theme's real button look
border-radius was 4px (should be 6px, matching .ui-corner-all used
everywhere else); the selection box and dropdown panel were flat black
instead of this theme's actual .ui-button/.ui-widget-content backgrounds
(a subtle gradient-highlight image and a repeating texture image,
respectively). Also add a min-width and force the selected text/dropdown
option list to a single line instead of wrapping.
* fix: match select2 dropdown styling to each theme's real button look
Same fix as the earlier dark theme commit, applied to the remaining themes.
Every theme's select2 override previously used generic placeholder colors
(border-radius: 4px, background: #ffffff/#222222) that did not match that
theme's actual .ui-state-default/.ui-button/.ui-widget-content styling:
- cacti, carrot, hollyberry, raspberry, modern, paw: selection box now uses
the real button gradient-image background instead of flat white; dropdown
panel background already matched and is unchanged.
- sunrise: selection box background corrected to transparent (matching its
real button style) and the dropdown panel to its real black background,
instead of flat white for both.
- paper-plane: selection box background corrected to this theme's real
near-black button color instead of flat white.
- midwinter: switched from hardcoded generic colors to this theme's own
CSS custom properties (var(--border-color), var(--background-content),
var(--text-color-lighter), etc.), matching jquery-ui.midwinter.css.
border-radius is now 6px everywhere, matching .ui-corner-all. All themes
also gained a min-width and forced the selected text/dropdown option list
onto a single line instead of wrapping.
* fix: default select2's dropdownAutoWidth to true
The legacy jQuery UI selectmenu widget always sized its open dropdown to fit
the widest option, regardless of how narrow the closed control itself was.
Select2 defaults to matching the dropdown's width to the control's, so wide
option text was wrapping/truncating inside a narrow panel. Set this as a
global default once instead of touching every individual select2() call.
fix: destroy any existing select2 widget before re-initializing
applySkin() runs more than once per page view. The existing
:not(.select2-hidden-accessible) guards were meant to make re-running the
select2 initializers a no-op, but duplicate widgets were still being
reported. Explicitly tear down any select2 instance still attached right
before the initializers run again, so a widget can never end up duplicated
regardless of why applySkin() re-ran.
fix: don't select2-ify a select a plugin already widget-ified with selectmenu
Symmetric to the above: if a plugin's own script already deliberately
applied jQuery UI selectmenu to one of its selects (a few do, for their own
dynamically-created fields), skip converting it to select2 too.
* fix: convert the Device filter's legacy drop-callback widget to select2-callback
html_host_filter()'s autocomplete-enabled branch never got the select2
treatment applied to every other filter field - it still built its own
<input class='drop-callback'> wired up by the older makeCallbacks()/jQuery UI
autocomplete widget (styled with the legacy ui-selectmenu-button markup),
instead of opting into form_callback()'s newer select2-callback rendering like
everything else. Left side-by-side with now-modernized neighboring filters,
this old widget stood out as a leftover "old select". Switch it to the same
select2-callback select markup (data-action='ajax_hosts',
data-variables='site_id') the 1.2.x branch already uses, reusing the existing
ajax_hosts handlers and get_allowed_ajax_hosts()'s id/label response shape.
* fix: restore select2's gradient after closing without selecting, shrink its height, and drop the now-unneeded min-width
Every theme's active/open select2 style also matched .select2-container--focus,
but select2 leaves that class on the container after the dropdown closes (it
only drops --open), so the flat "active" background stuck around until the
next selection instead of the gradient returning right away. Scope the active
look to --open only.
Also shrink the single-select control from select2's stock 28px down to 24px
(and its arrow/rendered text to match) so it sits closer to the jQuery UI
button height it's replacing, and drop the min-width: 160px placeholder added
earlier to keep wide option text from being clipped - dropdownAutoWidth now
sizes the open dropdown to its content regardless of the closed control's
width, so the constraint is no longer needed.
* feat: add configurable select2 search threshold; drop autocomplete_enabled on develop
Add the same Select Search Minimum Rows setting added on 1.2.x, wiring it
through as the select2SearchRows JS global (include/global_session.php) and
replacing the hardcoded 10-option cutoff in every select2 initializer in
layout.js.
Remove Autocomplete Enabled entirely on develop: it only ever existed to let
the Classic theme opt out of the ajax-backed callback widgets, and Classic
doesn't exist as a develop theme. html_host_filter() and the Graph Items data
source field now always use the ajax-backed rendering (select2-callback /
drop_callback) unconditionally instead of branching on the removed setting.
* fix: keep the first 20 select2 results visible before scrolling
Select2's stock results list only guaranteed ~7-8 rows (200px) before
scrolling. Pin each result row to a consistent 24px (matching the shrunk
control height) and size the list's max-height to fit 20 of them before the
scrollbar kicks in.
* fix: repair layout.js corruption from the select2SearchRows commit, and exclude .multiselect from the catch-all
A faulty automated edit in 3cbc5a75 (feat: add configurable select2 search
threshold) matched the wrong text in 4 places and clobbered unrelated code
instead of the intended minimumResultsForSearch lines:
- deleted the fa-remove icon-class swap and mangled the `if (!theme)` check
- deleted setupPageTimeout()/CsrfMagic.end()
- left a stray bare `select2SearchRows` statement before the themeReady() call
- deleted the #password/#password_confirm delayKeyup wiring and broke the
showPage deferred's closing brace
Restored all four to their pre-corruption behavior and applied the intended
select2SearchRows threshold to the actual 4 select2 init blocks this time
(select2, select2-multi, select2-multi-count, and the generic catch-all).
While in there: the catch-all's '.multi-select'/'.graph-multiselect'
exclusions never matched anything real - form_multi_dropdown() always tags
its <select multiple> with plain 'multiselect', so every field using the
older jquery.multiselect plugin (Automation's day/month pickers, Consolidation
Functions, Selective Debug, etc.) was getting select2-ified on top of its own
dedicated multiselect() init. Exclude '.multiselect' instead.
* feat: checkbox-styled option rows for select2-multi-count dropdowns
Gets closer to the old jquery-multiselect look the count-style multi-selects
(Graph Templates, etc.) replaced: each option row in the open dropdown now
shows a checkbox-style indicator instead of plain text, driven by
[aria-selected] via CSS so it stays in sync with select2's own selection
state without any extra JS bookkeeping. closeOnSelect stays off so multiple
options can still be picked without the dropdown closing between clicks; the
closed control still shows the "N Selected"/"All Selected" summary text.
* fix: match multi-select control height to single-selects and add its missing dropdown arrow
select2's stock multi-select box only had a min-height with no matching
override, so it stayed taller than every single-select control next to it;
select2-multi-count fields never actually show real per-option chips (the
rendered area always gets replaced with "N Selected"/"All Selected" text),
so it's safe to tighten this to match.
select2 also only renders a .select2-selection__arrow element for
single-selects - multi-selects (Templates, Days of Week, etc.) got none by
default, so they looked handle-less next to every single-select control. Add
a matching CSS-only arrow via ::after (flips on select2-container--open,
same as the single-select's).
* fix: stop select2's multi-select inline search box from collapsing to near-zero width
Select2 sizes the inline search input it embeds in .select2-selection__rendered
by measuring the box's natural layout; my earlier height-matching CSS
(zeroed padding, a fixed line-height, and extending the single-select's
overflow:hidden/text-overflow:ellipsis truncation to multi-selects too) broke
that measurement, so the search field rendered as a barely-visible sliver
sitting inline next to the "N Selected" text instead of expanding to a usable
width.
Back off to a lighter touch: only nudge min-height down a little (no padding/
line-height overrides), and keep the overflow/ellipsis truncation scoped to
single-selects, which is where it was actually needed (short "N Selected"/
"All Selected" labels on multi-selects don't need it and it wasn't there
before this session's changes).
* fix: hide the inline search box on select2-multi-count controls
Reducing padding/line-height (previous attempt) didn't stop the box from
showing - select2's inline search-while-typing input for multi-selects still
rendered as a tiny stray rectangle next to the "N Selected" text and kept
inflating the control's height, since that input's own margin/height are
part of the rendered area's natural content flow regardless of the parent's
box model.
select2-multi-count fields always replace the rendered area with summary
text and rely on checkboxes in the open dropdown for picking options, so the
inline search box serves no purpose here - hide it outright via the adjacent-
sibling selector (select.select2-multi-count + .select2-container), which
also lets the control's height settle back down to match single-selects
without needing to fight select2's own sizing math.
* fix: let select2-multi-count's search box work again once opened; fix vertical alignment
Hiding the inline search box outright also removed the only way to search a
multi-select's open dropdown (multi-select mode has no separate dropdown-only
search box - the inline one filters the open list too). Scope the hide to
:not(.select2-container--open) instead, so it stays out of the way while
closed but reappears once the dropdown is open.
Also wrap the "N Selected"/"All Selected" label in its own span
(select2-count-label) instead of writing bare text into
.select2-selection__rendered, so its line-height/truncation can be
controlled independently of whatever else (the search box) shares that
container - this was causing the text to sit off-center vertically.
* fix: keep the multi-select control's height fixed when its search box opens
Even scoped to select2-container--open, the inline search <li> was still
sitting inside .select2-selection__rendered as a normal block-level sibling
of the "N Selected" label span, so it pushed the label onto its own line and
grew/shifted the whole control upward whenever the dropdown opened - visible
proof the search box was structurally part of the "selection" element, not
just visually overlapping it.
Take it fully out of flow with position: absolute (sized to the control via
top/left/right/height: 100%, overriding select2's own inline width/height on
the actual <input>), so it can never affect the parent's layout regardless of
when it's shown. Also switch the control to flexbox with align-items: center
for reliable vertical centering of the label instead of a guessed
line-height, and give it the same 8px left inset the single-select's text
already has.
* fix: stop the multi-select's overlaid search field from painting over the label
The generic .select2-search--inline .select2-search__field rule gives search
boxes a solid background (matching the dropdown panel's search box, where
that's correct) - but once resized to fill the whole control via absolute
positioning, that same solid background completely hid the "N Selected"
label behind it while the dropdown was open. Make it transparent/borderless
instead, and hide the label (visibility, not display, so layout doesn't
shift) while open so there's no overlapping text underneath the cursor.
* fix: put the multi-select's search box on its own row instead of overlapping the selection
Overlaying it via position: absolute solved the layout-corruption bug but
traded it for a worse one - it now hid the "N Selected" label completely.
Let it flow normally below the label instead (its own full-width block, small
top margin for separation), matching how a search box should actually behave
- visible on its own line, not fighting the label for the same space. The
container only grows taller while the dropdown is actually open, since the
search row is hidden entirely while closed.
Also reset the stray margin select2 puts on #select2-<id>-container (the
same element as .select2-selection__rendered) - it was inflating the closed
control's height too.
* fix: multi-select search box wraps below label; vertically center label text
The row-direction flex box for select2-selection--multiple had no
flex-wrap, so once the search field was added as a second full-width flex
item its own line-item competed with the label item in the same row -
squeezing/overlapping both instead of the intended label-then-search
stacked layout. flex-wrap: wrap lets the label take row 1 and the
full-width search field naturally wrap to row 2, only while open.
Also give the label an explicit line-height matching the control's height
(same technique already used for the single-select boxes) - flex centering
alone left the text sitting a few pixels high due to the font's default
line-height metrics.
* fix: search select2-multi-count from the dropdown, not an inline box in the control
Root cause of the open-state height jump: select2 gives every multiple-select
a type-to-filter <input> INSIDE the selection control (its SelectionSearch
adapter). When the dropdown opens that input appears, growing the control and
pushing the surrounding filter rows down. No amount of CSS on an in-flow child
of the control avoids that - the search genuinely lives inside the control's
box.
Single-selects don't have this problem because their search lives in the
floating dropdown panel (DropdownSearch adapter), which is body-attached and
never affects page layout. So give the multi-count controls the same wiring:
a custom dropdownAdapter (Dropdown + DropdownSearch + MinimumResultsForSearch
+ AttachBody) that searches from the panel, and a selectionAdapter of just
MultipleSelection + EventRelay with no inline search box at all.
The control now keeps a fixed height whether open or closed, and the surrounding
form no longer shifts. Guarded so it falls back to default behavior if the
select2 AMD modules aren't reachable.
* fix: show 15 select2 dropdown rows before scrolling instead of 20
* fix: actually apply the multi-count dropdown-search adapters + trim control padding
Two bugs behind the "search still looks attached to the (green) control and the
control grows when open" report:
1. The adapters were required with the ARRAY form of select2's amd.require(),
which almond defers via setTimeout - so multiCountDropdownAdapter/
multiCountSelectionAdapter were still undefined when the init loop ran, and
select2 silently fell back to its default inline search box inside the
control. Fetch each module with the synchronous string form instead so the
adapters are actually in place at init time. The search now lives in the
floating dropdown (black), not inline in the green open-state control.
2. Vendor select2.css's .select2-container--default .select2-selection--multiple
adds padding-bottom:5px (equal specificity, so it wasn't being reset), which
left the count label sitting against the top of the control with a gap below.
Set explicit padding: 0 20px 0 0 so the flex-centered label is truly centered
and the closed control matches the single-select height.
* fix: size select2-multi-count control/dropdown to content, not the native listbox width
* fix: reload graphs after the Template select2 fully closes, not mid-teardown
* docs: track pending select2 upstream dropdown-search PR for future cleanup
* docs: link the actual select2 upstream PR (#6462)
* fix: sync checkbox visuals for graph_template_id's -1/others exclusivity; skip reload if nothing changed
Two bugs in the "All Templates" (-1) mutual-exclusivity sentinel:
1. Selecting -1 didn't visually uncheck the other checkboxes, and vice versa.
The old code flipped the underlying <option>.selected directly and fired a
plain 'change' event - but select2's own 'change' listener only refreshes
the "N Selected" summary label, not the open dropdown's rendered results
list. The checkbox marks are drawn from aria-selected on those already-
rendered <li> elements, which never got touched. Fixed by routing through
select2's own internal event bus (available via $el.data('select2')) with
'select'/'unselect' triggers instead - the exact same path a real click
takes, which also runs Results.setClasses() to redraw the checkboxes.
2. Opening the dropdown and closing it again without changing anything used
to still reload the graphs. Now the selected value is snapshotted on open
and compared on close; the reload only fires if it actually changed.
* fix: force checkbox refresh in graph_template_id sentinel to fix off-by-one visual lag
Reported symptom: click template T1 while "All Graphs & Templates" is
checked - the "All" box unchecks correctly, but T1 does not visually check.
Click T2 next - T1 (not T2) now shows checked. Click T3 - T2 shows checked.
The checkbox visual was always exactly one click behind the actual selection.
Rather than keep chasing the precise internal event-ordering that causes
this (select2's DataAdapter/Results adapters both listen to the same
internal 'select'/'unselect' events our sentinel re-triggers), force a
direct, unconditional call to the Results adapter's own setClasses() method
(exposed publicly as $el.data('select2').results) immediately after our
selection changes. This guarantees the open dropdown's checkboxes reflect
the current underlying <option> selected state before the handler returns,
independent of dispatch ordering.
* debug: temporary console diagnostics for graphTemplateSentinel checkbox lag
* fix: checkbox checkmark keys off --selected class, not aria-selected (hover was stealing it)
Root cause of the "checkbox always one click behind" bug, finally confirmed
via console diagnostics: our checkbox checkmark CSS keyed off the
aria-selected attribute, but select2's own results.js reuses that exact same
attribute for a second, unrelated purpose - tracking which row is currently
mouse-hovered/keyboard-highlighted (a legitimate ARIA listbox pattern). Every
time the mouse moves onto a new row, select2 clears aria-selected on whatever
row was previously "highlighted" and sets it on the newly-hovered row,
completely independent of actual selection state.
Since a user naturally moves the mouse toward the next item immediately after
clicking the current one, this hover-tracking code was stealing
aria-selected="true" away from the just-selected row and handing it to
whatever's now under the cursor - producing exactly the observed "previous
box shows checked, current one doesn't" pattern. Confirmed via console
logging: aria-selected was momentarily correct right after each click (when
our own forced setClasses() call ran), then immediately got reassigned by the
very next mouseenter as the user moved toward their next target.
Fix: key the checkmark off the select2-results__option--selected CSS class
instead. That class is exclusively added/removed by setClasses() based on the
real underlying <option>.selected state, and is never touched by the
mouseenter/highlight-tracking code - so it can't be hijacked by hovering.
Also removes the temporary console.log diagnostics added while tracking this
down; the forced setClasses() calls in the sentinel are kept as harmless extra
insurance.
* chore: apply php-cs-fixer alignment fixes
CI's php-cs-fixer dry-run flagged 4 files for pure whitespace/alignment
drift introduced by the select2 conversion: array `=>` operators and a
docblock's @param columns need to align to the widest key/name in their
respective blocks, and two inline PHP print tags were missing the space
before `?>`. No behavioral change.
* fix: address Copilot review findings on select2 conversion (develop)
- lib/html_form.php: form_callback()'s select2-callback opt-in path used
htmle() (double_encode=false) for the select's id/name/class, its
data-action/data-variables/data-callback attributes, and the
pre-selected option's value attribute. A pre-encoded entity in any of
these caller-supplied values would survive into the attribute and be
decoded back into markup/quotes by the browser. Use html_escape_attr()
(double_encode=true) for all of these attribute contexts; the option's
text content stays on htmle() since that's body text, not an
attribute. Same fix for form_multi_dropdown()'s three
data-select-all-text/data-select-count-text/data-select-all-value
attributes.
- lib/html_reports.php: changeTree()'s replaceWith(data) on #branch_id
only swaps the <select> element itself, leaving a live Select2
instance's sibling .select2-container orphaned in the DOM. Destroy the
existing Select2 instance first so the re-initialization a few lines
down doesn't produce a duplicate branch control.
include/layout.js's select2-callback CSRF finding: verified this is not
an actual bug. select2 4.0.13's AjaxAdapter.query() calls
options.data.call(...) and hands the result straight to $.ajax() via the
default transport; for type: 'post' with a plain-object `data` and no
processData:false/contentType override, jQuery serializes it as the POST
body via $.param(), and Cacti's csrf_check() reads the token via
filter_input(INPUT_POST, ...). The __csrf_magic data() callback already
present here (since the PR's first commit) does get sent correctly. No
global $.fn.select2.defaults override clobbers it. Replied with this
analysis rather than changing working code.
Verified: php -l on both changed PHP files; brace-balance check on
lib/html_reports.php (295 open / 295 close).
* fix: address remaining Copilot review findings on select2 conversion (develop)
- include/layout.js: move the select2-hidden-accessible teardown in
applySkin() to run before setSelectMenus() instead of after it, so the
catch-all initializer still re-enhances plain <select> elements that the
teardown just destroyed (previously they stayed native after any
post-initial-load applySkin() re-run).
- include/layout.js: namespace the select2-callback widget's
select2:select listener and unbind it before rebinding, since destroying
and recreating the Select2 instance on every AJAX filter reload does not
remove a plain jQuery listener bound to the underlying <select>, which
was accumulating duplicate invocations of the configured callback.
- include/layout.js, lib/auth.php, lib/html.php: thread $noany/$nonone
from html_host_filter() through to its ajax-backed select2-callback
widget (as data-noany/data-nonone attributes forwarded as request vars),
and have get_allowed_ajax_hosts() honor them. $sql_where is intentionally
left unapplied over the ajax path and documented as such: passing
caller-supplied raw SQL across the client/server boundary would be a new
SQL injection vector, unlike the boolean any/none toggles.
- lib/html.php: use html_escape_attr() instead of htmle() for the two
attribute contexts in html_host_filter()'s markup (data-callback and the
option value), since htmle()/html_escape() disables double_encode and so
a pre-encoded quote entity in the input could survive and be decoded
back into a live quote by the browser, breaking out of the attribute.
htmle() is kept for the visible option text.
- lib/html.php: use cacti_js_encode() instead of plain json_encode() for
the two new multi-select translation strings emitted into the inline
<script> block, since json_encode() alone does not hex-escape </script>
sequences.
- lib/html_reports.php: use the global select2SearchRows setting instead
of a hard-coded 10-row threshold when reinitializing the branch_id
Select2 control after an AJAX tree change, so the configured
"Select Search Minimum Rows" setting (including "Always") is respected.
- include/themes/paper-plane/main.css, include/themes/sunrise/main.css:
fix unreadable dark-on-dark Select2 control text (both the base control
and its rendered value) by using each theme's existing light foreground
convention instead of the near-black color left over from the plain
jQuery UI selectmenu styling.
Verified: tests/Unit/InlineScriptDataEncodingTest,
tests/Unit/Security/Xss/HtmlEscapeTest, and reports/host/graph-filter
related Unit tests all pass; php -l and node --check clean on touched
files; empirically reproduced (jsdom + real select2 4.1.0 + jQuery 4.0)
that the select2-multi-count adapter combination does not create a
duplicate inline search box, contrary to one review comment - no code
change made for that finding, replied with the reproduction instead.
* feat: add select2 for enhanced/searchable dropdowns
Vendors select2 4.1.0 (MIT, https://select2.org) as a new front-end
dependency, following this branch's existing npm-synced-to-include/js
convention:
- package.json: added "select2": "4.1.0" to dependencies (alongside the
other npm-tracked front-end libs, so Dependabot can track it).
- build/sync-js.mjs: added node_modules/select2/dist/js/select2.full.js ->
include/js/select2.js to the asset map (the "full" build bundles its
jquery-mousewheel dependency, so no extra package is needed).
- include/js/select2.js: the synced output (select2.full.js, unminified,
matching this repo's "vendor unminified where possible" convention).
CSS, following the existing per-theme vendor-CSS convention (jquery-ui.css,
jquery.multiselect.css, etc. - none of which are npm-synced either):
- include/themes/<theme>/select2.css: the upstream select2.css (structural/
functional rules), copied unmodified into all 10 themes.
- lib/html.php: wired both the JS and (per-theme) CSS into the page header,
next to the other jQuery UI plugin includes.
- include/themes/<theme>/main.css: since Select2 4.x publishes no jQuery UI
theme/adapter, appended a small override block per theme (widget border/
background/text, hover, and active/highlighted colors) reusing each
theme's own jquery-ui.css/.ui-state-active colors, so Select2 dropdowns
match that theme's native jQuery UI look instead of Select2's generic
default styling.
* feat: initialize select2() widgets in applySkin()
Wires up the select2/select2-nosearch/select2-tags/select2-multi/
select2-multi-tags/select2-callback marker classes so pages can opt in
to a Select2-enhanced dropdown just by adding the class, matching the
existing markup-driven convention used by other jQuery UI widget
setup in this function.
Dialog-hosted selects pass dropdownParent so the dropdown attaches to
the ui-dialog widget instead of escaping under it (a well-known
Select2 + jQuery UI dialog z-index/stacking issue).
* fix: remove accidental theme:'bootstrap' from select2-multi init
* fix: address Copilot review findings on the select2 PR
- package-lock.json: added the select2@4.1.0 entry (registry resolved URL +
integrity hash) so `npm ci` no longer rejects the package.json/lockfile
mismatch.
- .gitignore / include/js/select2.js: select2.js is a generated npm-synced
build output like the other managed libraries, so it belongs in the
generated-asset ignore list, not committed. Untracked the copy that had
been committed; `npm run build:js` regenerates it locally.
- build/README.md: documented select2 among the npm-managed libraries, and
clarified that the per-theme select2.css copies are committed unmodified
upstream CSS (unlike jquery-ui/jstree's Cacti-owned theme CSS).
- include/themes/paper-plane/main.css: highlighted/focused Select2 options
were the same white as the dropdown background, giving no visible focus
indicator; changed to the theme's own hover color (#dadada / #212121).
- include/themes/sunrise/main.css: same issue; changed to this theme's
established menu focus color (#3C8A3C, matching .ui-menu .ui-state-focus)
with white text.
* fix: address 3 material Copilot review findings on select2 init
- Exclude the select2/select2-nosearch/select2-tags/select2-multi/
select2-multi-tags/select2-callback marker classes from
setSelectMenus()'s generic $('select')... loop, so Select2-marked
single-selects are no longer first hidden/wrapped by jQuery UI
Selectmenu before Select2 wraps them again.
- select2-callback: Select2 calls the ajax.url callback with a context
that is not the original <select>, so $(this).data('callback') read
undefined inside it. Capture the element's callback URL into a local
variable before calling .select2() and use that instead.
- select2-callback: it was the only initializer that never checked for a
jQuery UI dialog ancestor, so its dropdown always appended to body and
could be hidden behind a dialog's overlay. Set dropdownParent the same
way the other five initializers do.
* fix: proactively apply 2 material findings from the 1.2.x PR review
Copilot's review of the companion 1.2.x PR (#8052) found 2 bugs in this
same select2-init code that also apply here unchanged:
- Select2 renders its replacement as <span class="select2 select2-container">,
so the plain class selectors (.select2, .select2-nosearch, etc.) also
matched Select2's own generated wrappers on every later applySkin() call
(e.g. during AJAX navigation), re-initializing and nesting wrappers.
Scoped all six selectors to `select.<marker-class>` so only the original
<select> elements are ever matched.
- select2-callback's ajax response was never normalized: Cacti's existing
callback endpoints (e.g. lib/auth.php) return a plain array of
{label, value, id} objects, but Select2 requires {results: [{id, text}]}.
Added a processResults mapping so callback-backed dropdowns actually
populate.
- select2-callback now also sets dropdownParent unconditionally (dialog
ancestor, or document.body otherwise) instead of leaving it unset outside
dialogs.
* support dynamic resizable rrdgraph
* introducing the newest version of navigationBox including plugin support. This allows reusable navigation Boxes e.g. different trees and so on.
- more nestling & grouping
- navigationbox auto-resizing fully working
- replace table checkboxes by glyphs
- navigation boxes stay hidden during screen rotation.
- make formColumLeft & right flex containers to flip easily between row and column presentation for small screens.
- fix navigation content box scrolling when searchbox is visible.
- introduce a CSS reset.
- many stuff that I've already forgotten
- keep page head as compact as possible
- place fullscreen and color change buttons in the right upper corner
- usage of overlay scrollbars to ensure that table checkboxes are "fixed" and moving to the left.
- First table column cannot be hidden any longer
- add close button support for navigation boxes.
Dropping legacy mode, adding new navigation box model. Table columns can be selected individually, table scrolling improved,
both color schema improved but not finally completed. Font size can be modified individually. Sticky mode for Tabs added.
Kiosk mode added.
* add mark.js
* Update main.css
- fix and force height calculation of cactiHead, breadbrumbar and cactiContent in standard mode
- fix scrollbar border color of console menu for WebKit browser in standard mode
* start splitting CSS
split CSS in 'core' containing all elements Cacti provides, while MidWinter CSS will be maintained separately
* Update jquery.zoom.css
fix borders,
* drop unused media query
1280 definition have not been become active yet.
* add print css
keep print separately, too.
* Update min-width-600.css
skip particles - would have been nice, but MidWinter is already heavy enough.
* split compact mode
more css changes
* more separation
see above
* move css out of main
remove remaining css fragments
* fix kiosk mode
kwt
* start restructuring standard layout
more css
* change compact menu click on
hide menu automatically when menuitem clicked.
issue#4324: Date/Time format of replacement fild on graph cannot be changed
issue#4325: Make identifying rows when editing graph items easier
issue#4326: When using large lists, selection is visible in dropdown menus
- smooth transition between light and dark mode added
- midwinter keeps both settings in local storage and initiates their values if available.
- change default to "legacy + light".
- usage of document data attributes instead of classes.
-TODO:
- migrate colors to HSL,
- build light theme,
- force usage of Ajax anchors everywhere
- update menu visibility function: new UI should only hide the navigation menu in full-screen mode.
- new UI mode added (still alpha state)
Next commit will focus on:
- moving new UI mode from alpha to beta phase
- migrating all colors from RGB to HSL
- introduce light color mode
Thomas Vincent