diff options
| author | Bill Chan <bill_chan@jabil.com> | 2026-09-17 11:03:30 +0300 |
|---|---|---|
| committer | bill_chan <bill_chan@jabil.com> | 2026-10-19 09:48:13 +0300 |
| commit | 50e92abc421665c1d7aac2d05a7dc38d6c86ade3 (patch) | |
| tree | d81292cc75e21ea3db5551c9c0d9180935cc7015 /docs/guide/components/page-section | |
| parent | a2fe0fdaa8efbac57d9ee711e9618748df7c04b0 (diff) | |
| download | webui-vue-master.tar.xz | |
The status column of the sensors table renders its health text alone,
OK or Warning or Critical, with no icon beside it.
Two separate faults combine to produce this, and Vue reports neither.
Sensors renders <status-icon> but does not import the component. It is
a <script setup> component, so it has no components option and no
mixins, and main.js registers only the bootstrap-vue-next B*
components globally, so nothing supplies StatusIcon implicitly.
An unimported component normally produces a resolveComponent call and
a loud "Failed to resolve component" warning at runtime. Sensors gets
neither, because of the second fault. Under <script setup> the
template compiler matches a tag against the setup bindings after
capitalizing and camelizing it, so <status-icon> is offered both
StatusIcon and statusIcon. The local statusIcon helper wins, and the
compiler emits the helper as the component:
_createVNode($setup["statusIcon"], {
status: $setup.statusIcon(value)
}, ...)
One binding serves as both the component and the function producing
its status prop. Rendering a function as a component yields nothing
and warns nothing, which is why the column has been quietly iconless
rather than visibly broken.
Adding the import alone does not help. With both names in scope the
compiler still prefers the lower-case one, so the tag keeps binding to
the helper; the two names have to stop colliding.
Rename the helper to healthStatusIcon, after AppHeader, which maps the
same Redfish Health strings under that name. The tag then resolves to
the component and the prop to the helper:
_createVNode($setup["StatusIcon"], {
status: $setup.healthStatusIcon(value)
}, ...)
Note that the statusIcon exported by useDataFormatter collides in the
same way. Sensors already calls that composable and would hit this
again if the local helper were replaced by the shared one without a
rename at the call site.
Sensors has been in this state since d3b0503 moved it to the
Composition API, which dropped both the import and the components
option but kept the identically named helper. eslint cannot catch it:
vue/no-unused-components is disabled and no rule reports a component
that is used but undefined, let alone one shadowed by a function.
Tested:
Confirmed in a browser on the sensors page: the status column now
shows the icon beside each health value. The minified slot in the
built bundle passes two distinct identifiers where it previously
passed one for both.
Two pre-existing snapshot failures remain, AppHeader and Search, both
unrelated to this change and present on unmodified master.
Change-Id: I51e3e0019d50aa0cd1cb4eb74de67bb3f54cd79e
Signed-off-by: Bill Chan <bill_chan@jabil.com>
Diffstat (limited to 'docs/guide/components/page-section')
0 files changed, 0 insertions, 0 deletions
