Skip to content

Refactor: decompose ConfigPanel.vue (~1700 lines) into per-node-type field subcomponents #84

Description

@pparage

Context

src/components/ConfigPanel.vue is ~1719 lines: one modal with 13+ inline v-if="node.type === '...'" field bodies (vm, lxc, docker, network, router, switch, firewall, loadbalancer, dns, dhcp, group, simulated-internet, edge-firewall, vuln-target, shared-service), plus shared chrome (header/footer/status/lifecycle). It does too much for one file — harder to reason about, test, and iterate on.

Proposal

Extract each node-type field body into a focused subcomponent under src/components/ConfigPanel/ (e.g. VmFields.vue, FirewallFields.vue, SwitchFields.vue, …), leaving ConfigPanel.vue as the modal shell + header/footer + dispatch (~300-400 lines). Shared bits (common name/tags/role, deployed-VM status card) can become their own units too.

Notes / risks

  • Behavior-preserving refactor only — keep all v-model/config bindings, emits (close/update/delete/update:attachments), handleVmAction/handleSave/handleDelete, defineExpose({ openApplyDialog }).
  • Keep src/__tests__/configPanelVmAction.test.js green; the stub list there will need updating if components are extracted.
  • Adds per-type unit-test seams as a bonus.

Deferred from the 2026-06-09 ConfigPanel UI/UX polish (that pass deliberately did chrome only, not structural decomposition).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions