[Improvement-18647][UI] Improve workflow Gantt inspection

[stevqin]

Was this PR generated or assisted by AI?

YES. OpenAI Codex assisted with the Gantt UI implementation, data-normalization tests, navigation regression fixes, and this description. The UI was iterated with the contributor and verified in running DolphinScheduler instances.

Purpose of the pull request

Closes #18647.

Make the workflow-instance Gantt view useful for inspecting workflows with mixed task durations and large task counts. The previous view rounds timestamps to whole seconds, making subsecond tasks appear to have no duration, and does not expose task-count summaries or direct log access.

For example, a workflow containing a long task and an 8 ms task should keep the short task visible, preserve its actual duration, show whether other tasks are still unsubmitted or have failed, and let an operator open the corresponding log while still being able to select and copy task names.

The task list must also remain the only vertical scrolling area when many tasks are present. The earlier fixed viewport calculation could create nested scrolling and move the whole page. In addition, leaving the Gantt route briefly invalidates its route parameters; refresh work must stop before those values can produce requests for /process-instances/NaN, /NaN/tasks, and /NaN/view-gantt and three error messages.

Screenshot

The screenshot below uses a running workflow instance with 32 tasks: 13 running and 19 succeeded. It demonstrates the compact status summary, responsive elapsed-time/percentage axis, mixed task durations, live running bars, separate log actions, and the internally scrolling task viewport.

Brief change log

• Replace the fixed chart layout with a compact timeline that fits the available width, with elapsed-time and percentage ticks shown together and no horizontal scrollbar.
• Preserve millisecond timestamps and use a 5 px visual minimum for short task bars, including bars at the right edge. Duration labels and percentages still represent the actual values; parallel-task percentages may total more than 100%.
• Add compact, color-coded counts for total, submitted, unsubmitted, waiting, running, succeeded, failed, and paused/stopped tasks. Use the instance's definition version and deduplicate retries by task code.
• Refresh active workflows every five seconds, extend running durations, and retain the last successful snapshot on refresh failure. Ignore stale requests after navigation or unmount.
• Keep task names selectable and provide a separate log button using the existing log modal, refresh, and download actions. Bound the in-page preview to 20,000 lines and offer the full download.
• Size the task viewport from the actual remaining application content area and contain wheel overscroll so large workflows do not create a second page scroll.
• Validate the workflow-instance and project identity before every refresh so route teardown cannot send requests with NaN path parameters.
• Add subtle grid guides, responsive layout, existing theme colors, and Chinese/English text. Display the last update beside the workflow-instance ID.

The change is confined to the UI and uses existing APIs. There are no backend, database-schema, public-API, or dependency changes.

Verify this pull request

This change adds tests and was verified as follows:

• cd dolphinscheduler-ui && node --test tests/gantt*.test.cjs: 9 tests passed, covering retry deduplication, unsubmitted nodes, millisecond precision, running/completed durations, missing dates, parallel-task percentages, UTC parsing, subsecond timeline bounds, available viewport height, and invalid route identities.
• vue-tsc --noEmit: passed.
• Prettier checks for all changed UI and test files: passed.
• npm run build:prod: passed (existing bundle-size and eval warnings remain).
• Manual browser verification: large task lists keep scrolling inside the Gantt viewport, returning to the workflow-instance list sends no NaN requests and shows no error messages, short task bars remain visible, task names remain selectable, and logs open from the separate action.

Running-time calculations are covered by tests. A new production workload was not launched for this change.

[SbloodyS]

Please provide a screenshot before and after optimization in the PR details.

[SbloodyS]

Avoid quadratic work on each live Gantt update

buildGanttModel calls gantt?.tasks.find(...) for every task definition (model.ts:117). While a workflow is active, useGantt updates now every second and rebuilds the model, repeating this O(n²) search even when the task data has not changed. Since large task counts are an explicit goal of #18647, please index the Gantt tasks once before building the rows, while preserving the duplicate-name and status checks.

NIT: state(row) also recreates the entire tasksState(t) mapping for each rendered row. Consider caching it per locale.

[SbloodyS]

Please quote the picture in the document.

[stevqin]

@SbloodyS, addressed the requested live-update performance changes in 734ccd9.

• Indexed the Gantt response by task name in one pass before building rows. Precision matching now searches only the indexed candidates while retaining the existing duplicate-name and status checks.
• Cached the localized tasksState(t) mapping instead of recreating it for every rendered row.
• Added a regression test with 100 tasks. Before the change, model construction read 5,051 Gantt task entries; the indexed implementation performs a linear scan.

Verification:

• node --test tests/gantt*.test.cjs: 10/10 passed
• vue-tsc --noEmit: passed
• Prettier check for the changed files: passed
• npm run build:prod: passed (existing bundle-size and eval warnings remain)

Please re-review when convenient.

[stevqin]

Follow-up update pushed in 6c03c89:

• Added a read-only task configuration viewer directly from each Gantt row. It uses the task definition embedded in the workflow instance DAG, so the dialog reflects the exact instance version rather than the latest workflow definition.
• Kept task names selectable/copyable. Row numbers remain in a dedicated left column; the status indicator is now 7px, followed by status/type and the log/configuration actions.
• Read-only task dialogs no longer apply project defaults and show only the cancel/close action.
• Preserved the linear-time Gantt model construction from the previous review fix.

Validation: Gantt model/layout tests (10/10), Prettier, vue-tsc --noEmit, and production build all pass. The same change was also smoke-tested on the 3.2.1 production UI with a 32-task workflow, including opening an SQL task configuration and verifying name, SQL, pre-SQL, datasource, retry settings, and read-only behavior.