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).
Context
src/components/ConfigPanel.vueis ~1719 lines: one modal with 13+ inlinev-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, …), leavingConfigPanel.vueas 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
v-model/config bindings, emits (close/update/delete/update:attachments),handleVmAction/handleSave/handleDelete,defineExpose({ openApplyDialog }).src/__tests__/configPanelVmAction.test.jsgreen; the stub list there will need updating if components are extracted.Deferred from the 2026-06-09 ConfigPanel UI/UX polish (that pass deliberately did chrome only, not structural decomposition).