Dominik Wombacher 3dcc50980b
feat: Introduce VM Import UI flow pages (#642)
* feat(vmimport): First working side nav attempt

Add vmimport entries when the related resource actually exists aka addon was enabled

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): improved version that uses 'store.watch' instead of polling

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): further tuning of dynamic side navi load/unload

Code formatting and commits. Also safeguard if something is wrong with the store

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): separate vmimport side nav entries from dynamic logic

function registerAddonSideNav introduced in utils/dynamic-nav.js

Decouples vmimport side nav entries from the hide/unhide based on addon status logic

Makes it reusable in the UI with other AddOns in the future

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): add custom headers for HCI.VMIMPORT

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): add custom headers for HCI.VMIMPORT_SOURCE_V

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): add custom headers for HCI.VMIMPORT_SOURCE_O

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): array instead string passed to configureType

Caused routing issues for CRUD operations

Labels moved to labelTypes section to follow standards

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): registerAddonSideNav improved and refactored

Clear comments, code refactoring, additional checks and validations

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): show correct status for virtualmachineimport

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): custom list components with ns grouping

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): 404 on refresh and missing menu entry

Restores virtualType definitions to register routes synchronously,
preventing 404 errors during page reload.

Updates dynamic-nav to force-fetch addon data if missing, fixing
hidden menu issues on direct page access.

Restores explicit label keys for virtualTypes to ensure correct
naming in the side navigation.

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): add edit form for VirtualMachineImport resource

Adds a UI form for VirtualMachineImport to replace manual YAML editing.
The form fetches VmwareSource and OpenstackSource objects for the
source selection dropdown.

It validates the VM name against RFC-1123 rules and filters out
internal storage classes. Users can also configure network mappings
via a dynamic list.

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): add edit form for VmwareSource

Adds a UI to configure VmwareSource resources including the endpoint
and datacenter fields.

For authentication, users can either select an existing Secret or
enter a username and password directly. The form handles creating
the required Kubernetes Secret in the background when new credentials
are provided.

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): add edit form for OpenstackSource

Custom edit form for OpenstackSource resource. Creates new secret
or lets users select existing secrets. Support all fields the CRD has.

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* chore(vmimport): vmware source default endpoint and datacenter renamed

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): add edit form for OvaSource

OvaSource (new in harvester / vm-import-controller v1.7.0).
Imports VMs from an OVA file using via HTTP or HTTPS.

The form supports URL configuration and optional Basic Auth using a
username and password. Users can also provide an optional CA Certificate
for HTTPS verification and configure advanced HTTP timeout settings.

VirtualMachineImport edit page to updated to include OvaSource in
the source dropdown.

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* chore(vmimport): align tab names on openstacksource

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): import { TextArea } from '@components/Form/TextArea' not found

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): 'Destination Network' don't list all networks

Online listed the 'mgmt' Network. Adjust to read all Virtual Machine Networks.

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): rename side-nav entry to 'Virtual Machine Imports'

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): OvaSource Auth tab throws error selecting existing secret

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): Add missing caCert input field to vmware source

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): use 'LabeledInput' instead of 'TextAreaAutoGrow' for cacert fields

Changing the type allows labels to show up in the UI

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): Move vars into types files and reference them

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): Use 'currentProduct' value instead of hardcoded 'harvester' string

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): shorten 'selectedOption.raw' usage

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): Checks to make splice() usage more robust

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): re-use existing rfc1123 val function

Move rfc1123 validation error message to l10n/en-us.yaml

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* fix(vmimport): var name typo in vmi edit rfc1123 check

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): vmi use 'FormValidation' and l10n for labels

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): oss use 'FormValidation' and l10n for labels

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): ovas use 'FormValidation' and l10n for labels

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* feat(vmimport): vms use 'FormValidation' and l10n for labels

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>

* refactor(vmimport): Display error message at the top of the page

Signed-off-by: Volker Theile <vtheile@suse.com>

---------

Signed-off-by: Dominik Wombacher <dominik.wombacher@suse.com>
Signed-off-by: Volker Theile <vtheile@suse.com>
Co-authored-by: Volker Theile <vtheile@suse.com>
2026-01-21 15:30:55 +08:00
2025-06-26 08:39:44 +08:00
2024-10-23 17:01:02 +02:00
2024-11-12 11:50:19 +01:00
2024-11-12 11:50:19 +01:00
2024-11-12 11:50:26 +01:00
2024-10-23 17:00:51 +02:00
2024-10-23 17:00:40 +02:00
2024-04-28 01:20:11 +02:00
2024-10-23 17:00:44 +02:00

harvester-ui-extension

The Harvester UI Extension is a Rancher extension that provides the user interface for Harvester within the Rancher Dashboard.

Note: This extension is available starting from Rancher 2.10.0. Ensure your Rancher version is 2.10.0 or later to access Harvester integration.

Installation

For detailed installation instructions, please refer to the official Harvester documentation.

Development Setup

Ensure Node.js v20 or later is installed for development and debugging.

Standalone Mode

Run the extension standalone with hot reload at https://localhost:8005.

# Install dependencies
yarn install

# Start the development server
RANCHER_ENV=harvester API=https://your-harvester-ip yarn dev

# Example with specific server version
RANCHER_ENV=harvester VUE_APP_SERVER_VERSION=v1.5.0 API=https://192.168.1.123 yarn dev

You may also define environment variables in a .env file:

RANCHER_ENV=harvester
VUE_APP_SERVER_VERSION=v1.5.0
API=https://192.168.1.123

Rancher Integration Mode

To run as a Rancher extension, follow the Rancher UI Extension Guide.

API=https://your-rancher-ip yarn dev

Commit Message Guidelines

This project uses commit-lint with Conventional Commits to ensure consistent and meaningful commit messages.

Commit Message Format

All commit messages must follow the conventional commit format:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Supported Types

  • feat: New features
  • fix: Bug fixes
  • docs: Documentation changes
  • style: Code style changes (formatting, missing semicolons, etc.)
  • refactor: Code refactoring
  • perf: Performance improvements
  • test: Adding or updating tests
  • build: Build system or external dependencies
  • ci: CI/CD changes
  • chore: Other changes that don't modify src or test files
  • revert: Reverts a previous commit
  • wip: Work in progress
  • deps: Dependency updates
  • security: Security fixes

Examples

# Feature
git commit -m "feat: add new virtual machine creation wizard"

# Bug fix
git commit -m "fix: resolve memory leak in VM console"

# Documentation
git commit -m "docs: update installation instructions"

# Breaking change
git commit -m "feat!: change API endpoint structure

BREAKING CHANGE: The /api/v1/vms endpoint has been replaced with /api/v2/vms"

Git Hooks

The project uses Husky to automatically validate commit messages and run linting before commits:

  • pre-commit: Runs ESLint to ensure code quality
  • commit-msg: Validates commit message format using commit-lint

These hooks are automatically installed when you run yarn install.

Manual Validation

You can manually validate commit messages:

# Validate the last commit
yarn commitlint

# Validate a specific commit
npx commitlint --from <commit-hash>

# Validate a range of commits
npx commitlint --from <start-hash> --to <end-hash>

Branch Structure

  • main Main development branch
  • release-harvester-vX.Y Stable release branches per version series
  • vX.Y-head Testing branches for ongoing changes to extension builds in each release series

Note: The vX.Y-head branches are auto-generated and kept in sync with release branches. Use these for testing the latest changes in each version series.

Testing Guidelines

UI Extension Testing

To validate changes in a release series, switch to the appropriate vX.Y-head branch. For main branch testing, use main-head.

  • Examples:
    • Test 1.0.x series → v1.0-head
    • Test 1.5.x series → v1.5-head

Steps:

  1. Navigate to Rancher UILocalAppRepositories
  2. Refresh the Harvester repository using the target vX.Y-head branch
  3. Go to the Extensions page and install the desired version

Standalone Mode Testing

To test the standalone UI, configure Harvester to load the UI from an external source.

  • Examples of ui-index:
    • Main branch → https://releases.rancher.com/harvester-ui/dashboard/latest/index.html
    • Release series 1.5.xhttps://releases.rancher.com/harvester-ui/dashboard/release-harvester-v1.5/index.html

Steps:

  1. Go to Harvester UIAdvancedSettingsUI
  2. Set ui-source to External
  3. Set ui-index to the desired URL

Contributing

If you want to contribute, start by reading this document, then visit our Getting Started guide to learn how to develop and submit changes.

License

Copyright (c) 2014-2026 SUSE, LLC.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Description
Rancher UI Extension for Harvester
Readme Apache-2.0 2.6 GiB
Languages
Vue 76.1%
JavaScript 21.3%
TypeScript 2%
Shell 0.6%