Feat/epinio 479 trailhand table by Hannahbird · Pull Request #538 · epinio/ui

Hannahbird · 2026-03-05T20:59:49Z

PR Checklist

Linting Test is passing
Code is well documented
If applicable, a PR in the epinio/docs repository has been opened

Summary

Fixes #

Adopt the trailhand data-table web component across all Epinio UI list, detail, and page views, replacing the legacy custom DataTable.vue and Rancher SortableTable components.

Occurred changes and/or fixed issues

Replaced all table implementations in list/, detail/, and pages/ with web component
Extracted all shared cell renderer logic into utils/table-formatters.ts — state tags, router links, commit SHA/author cells, app routes, bound services, and build progress cells
Applied dark mode hover CSS variables (--sortable-table-row-hover-bg, --sortable-table-header-hover-bg) to every data-table instance
Created a local copy of GitPicker.vue using the shared formatters

Technical notes summary

Areas or cases that should be tested

All list views: Applications, Configurations, Services, Namespaces, App Charts
Applications detail page — git commit picker, bound resources, action menu
Catalog Services detail page
About page — versions table and CLI downloads table
Epinio cluster index page — state tags, available/unavailable cluster links
Namespace create modal (still inline in list/namespaces.vue)
Dark mode — hover states on all tables
Table sorting, search, and pagination where enabled

Areas which could experience regressions

Screenshot/Video

Light mode - Applications Page

--- #### Dark Mode - Applications Page

…ew tag and action components as well

Replace custom DataTable.vue and Rancher SortableTable across all list, detail, and page views with the trailhand data-table web component for consistency with the design system. Extract all shared cell renderers into utils/table-formatters.ts, eliminating duplicated DOM construction logic across components. Helpers cover state tags, router links, commit SHA/author cells, app routes, and build progress cells. Apply dark mode hover CSS variables to every data-table instance. Configure vue.config.js isCustomElement to suppress Vue compiler warnings for web component tag names.

dashboard/pkg/epinio/components/application/AppProgress.vue

johnlcos · 2026-03-06T15:51:06Z

dashboard/pkg/epinio/components/application/AppProgress.vue

+    label: t('tableHeaders.description'),
+    width: '450px',
+    sortable: false,
+    formatter: (_v: any, row: any) => {


Looks like there is some formatting issues here.

still getting this on failure

dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue

dashboard/pkg/epinio/list/namespaces.vue

dashboard/pkg/epinio/list/services.vue

dashboard/pkg/epinio/list/configurations.vue

dashboard/pkg/epinio/list/appcharts.vue

dcharles525

Something with the state of the table isn't working, for example when I create a new namespace, I have to manually refresh the page to get it to show. I even see the namespaces api get hit and new data loaded into the store (same for services and configurations). That being said the applications table does seem to update.

When a table does receive an update (like an app being build/deployed) the icon seems to be missing until page refresh.

I also maybe be mis-rememebring but is there only icons in the applications table? Looks like everything else is iconless. Probably just want to be consistent with it best as possible.

- Add renderActions to namespaces, services, and configurations tables - Fix AppProgress description cell formatter (div → flex span) - Fix dark mode sorted column header (add --sortable-table-header-sorted-bg to all data-table CSS blocks) - Fix Lit reactivity: spread [...rows] on all list table :rows bindings so _MERGE polls trigger re-renders - Force-refresh namespaces store immediately after inline modal create

Hannahbird · 2026-03-09T14:25:48Z

Changes

Action menus

list/namespaces.vue, list/services.vue, and list/configurations.vue were missing row action menus. Added makeActionMenu import and the renderActions ref callback to each table.

AppProgress description cell formatting

The description column formatter was using a block-level div as its wrapper element, which disrupted inline cell layout. Changed to a span with display:flex; flex-direction:column so the optional error sub-text stacks correctly without affecting row height.

Dark mode sorted column header

The data-table component exposes a --sortable-table-header-sorted-bg CSS variable (separate from the hover variable) that defaults to #EBEBEB. Clicking a column header to sort it was flashing white in dark mode. Added --sortable-table-header-sorted-bg: var(--sortable-table-hover-bg) to every data-table CSS block across all migrated files.

Table auto-refresh after create/update

Two issues were preventing tables from reflecting new data:

Lit reactivity: The polling dispatcher uses _MERGE, which mutates the store array in place. Lit compares :rows by reference (===), so it never saw a change. Fixed by spreading [...rows] in every list table's :rows binding so each poll cycle produces a new array reference.
Namespace inline modal: After creating a namespace via the inline modal, there was no immediate store refresh — the new namespace only appeared after the next 30s poll cycle. Fixed by dispatching epinio/findAll with force: true after a successful create before closing the modal.

dcharles525

Looks like the only remaining issue is when new data comes in the table doesn't seem to update it? Example below where I see its deployed in the network request but not in the table. Initial creation does show the item in the table though, so that is fixed. A working table would be applications which updated upon receiving new statuses.

dashboard/pkg/epinio/list/namespaces.vue

dashboard/pkg/epinio/list/appcharts.vue

dashboard/pkg/epinio/utils/table-formatters.ts

… loads Add CONFIGURATION and SERVICE_INSTANCE to the loadCluster kick-start dispatches alongside APP, so data is pre-warmed in the store before the user navigates to those list pages. Simplify configurations and services list pages to only fetch their own type on mount (cross-loading of APP/SERVICE_INSTANCE removed). Add property-touch for status, stateDisplay, and meta in each computed so polling _MERGE updates re-render state tags and age columns in real time.

…railhand_table

johnlcos

LGTM

dcharles525

LGTM

Hannahbird requested review from dcharles525 and johnlcos and removed request for dcharles525 March 5, 2026 21:05

Hannahbird force-pushed the feat/EPINIO-479__trailhand_table branch from 4bafade to 6d65ea6 Compare March 5, 2026 21:24

dcharles525 changed the base branch from 1.14.0 to development March 5, 2026 21:26

dcharles525 changed the base branch from development to 1.14.0 March 5, 2026 21:26

Hannahbird added 2 commits March 5, 2026 16:37

feat: updating applications page to use trailhand table. Connecting n…

a916ac0

…ew tag and action components as well

Hannahbird force-pushed the feat/EPINIO-479__trailhand_table branch from 6d65ea6 to 5b9de2e Compare March 5, 2026 21:37

johnlcos requested changes Mar 6, 2026

View reviewed changes

dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue Outdated Show resolved Hide resolved

johnlcos requested changes Mar 6, 2026

View reviewed changes

dashboard/pkg/epinio/list/namespaces.vue Outdated Show resolved Hide resolved

johnlcos requested changes Mar 6, 2026

View reviewed changes

dashboard/pkg/epinio/list/services.vue Outdated Show resolved Hide resolved

dashboard/pkg/epinio/list/configurations.vue Outdated Show resolved Hide resolved

dashboard/pkg/epinio/list/appcharts.vue Outdated Show resolved Hide resolved

dcharles525 requested changes Mar 9, 2026

View reviewed changes

Hannahbird added 2 commits March 9, 2026 10:42

fix: adding additional icons to deployed and not ready status

916d755

chore: updating component names from trailhand.

be80947

Hannahbird requested review from dcharles525 and johnlcos March 9, 2026 15:00

dcharles525 requested changes Mar 9, 2026

View reviewed changes

johnlcos requested changes Mar 9, 2026

View reviewed changes

dashboard/pkg/epinio/list/namespaces.vue Show resolved Hide resolved

dashboard/pkg/epinio/list/appcharts.vue Show resolved Hide resolved

dashboard/pkg/epinio/utils/table-formatters.ts Show resolved Hide resolved

Hannahbird added 4 commits March 9, 2026 17:07

change requests

0d4bc4f

Merge branch '1.14.0' of github.com:epinio/ui into feat/EPINIO-479__t…

35df0de

…railhand_table

fix(polling): stop poller leaks and reduce cross-page contention

76373da

johnlcos approved these changes Mar 11, 2026

View reviewed changes

dcharles525 self-requested a review March 12, 2026 13:29

dcharles525 approved these changes Mar 12, 2026

View reviewed changes

Hannahbird merged commit f769184 into 1.14.0 Mar 12, 2026
2 checks passed

Hannahbird deleted the feat/EPINIO-479__trailhand_table branch March 12, 2026 13:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/epinio 479 trailhand table#538

Feat/epinio 479 trailhand table#538
Hannahbird merged 9 commits into1.14.0from
feat/EPINIO-479__trailhand_table

Hannahbird commented Mar 5, 2026 •

edited

Loading

Uh oh!

Uh oh!

johnlcos Mar 6, 2026

Uh oh!

johnlcos Mar 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dcharles525 left a comment

Uh oh!

Hannahbird commented Mar 9, 2026

Uh oh!

dcharles525 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

johnlcos left a comment

Uh oh!

dcharles525 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Hannahbird commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

Summary

Occurred changes and/or fixed issues

Technical notes summary

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Light mode - Applications Page

Uh oh!

Uh oh!

johnlcos Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

johnlcos Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dcharles525 left a comment

Choose a reason for hiding this comment

Uh oh!

Hannahbird commented Mar 9, 2026

Changes

Action menus

AppProgress description cell formatting

Dark mode sorted column header

Table auto-refresh after create/update

Uh oh!

dcharles525 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

johnlcos left a comment

Choose a reason for hiding this comment

Uh oh!

dcharles525 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Hannahbird commented Mar 5, 2026 •

edited

Loading