mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-01 11:46:06 +08:00
Compare commits
72
Commits
v1.9.0-rc2
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3c92a06268 | ||
|
|
6256cdc97a | ||
|
|
4323132565 | ||
|
|
d05ec68e16 | ||
|
|
cb2cef5e73 | ||
|
|
45116b568a | ||
|
|
f42d798d10 | ||
|
|
50b4cf5248 | ||
|
|
cba37194b6 | ||
|
|
bbe0c4643f | ||
|
|
00584f1d19 | ||
|
|
4fa6470343 | ||
|
|
d550046189 | ||
|
|
5f32a9ade5 | ||
|
|
3f39d561be | ||
|
|
7c84269ed6 | ||
|
|
f63be73b11 | ||
|
|
fabc1cec21 | ||
|
|
ed2b6f2551 | ||
|
|
72282ae50e | ||
|
|
8fba4e7050 | ||
|
|
fbd4a1108f | ||
|
|
823a88c85b | ||
|
|
3a2c6e3a3d | ||
|
|
be6e9b5f06 | ||
|
|
a88bed9eb4 | ||
|
|
f97f14c811 | ||
|
|
f8a29a1c54 | ||
|
|
9a935434c2 | ||
|
|
afe632b723 | ||
|
|
d050f21f9a | ||
|
|
b87f367583 | ||
|
|
92aa8ec603 | ||
|
|
e013534373 | ||
|
|
d23c3d3b72 | ||
|
|
719c33fa12 | ||
|
|
a6bd7ec00e | ||
|
|
ac26fe2f0e | ||
|
|
790cade04d | ||
|
|
2903e86c02 | ||
|
|
2d747e435a | ||
|
|
eadda2a18b | ||
|
|
a178302f73 | ||
|
|
d376bfb3a5 | ||
|
|
7a84e08f99 | ||
|
|
3d39626b93 | ||
|
|
1c3b40b631 | ||
|
|
87baf75301 | ||
|
|
a10d651827 | ||
|
|
11ff7c8a7c | ||
|
|
f6dffe9816 | ||
|
|
b813bc578e | ||
|
|
7c3b2730ab | ||
|
|
429d9e18ad | ||
|
|
dc166d8fc9 | ||
|
|
3ff4534294 | ||
|
|
d4223ad2ae | ||
|
|
44297ada16 | ||
|
|
aea53fdd65 | ||
|
|
9640c87947 | ||
|
|
2cefd7cb78 | ||
|
|
fb6ffa3c0f | ||
|
|
e0436bff28 | ||
|
|
219f39ae52 | ||
|
|
41cf44d231 | ||
|
|
7d09cb7142 | ||
|
|
560643d299 | ||
|
|
c3bb0ea4be | ||
|
|
3c37f04ef6 | ||
|
|
d98db6ba49 | ||
|
|
531ed03796 | ||
|
|
59f260eab8 |
@@ -1,14 +1,23 @@
|
||||
<!-- This template is for Devs to give QA details before moving the issue To-Test -->
|
||||
### Summary
|
||||
<!-- Give the fix root cause or feature requirement, at least list what this PR changes -->
|
||||
|
||||
### PR Checklists
|
||||
|
||||
### PR Checklist
|
||||
<!-- Check Yes if there is backend PR related to this UI PR, tag the backend owner's Github account -->
|
||||
- Are backend engineers aware of UI changes ?
|
||||
- [ ] Yes, the backend owner is:
|
||||
- [ ] Yes, the backend owner is @
|
||||
- [ ] No, frontend-only.
|
||||
|
||||
### Related Issue #
|
||||
<!-- Define findings related to the feature or bug issue. -->
|
||||
### Related Issue
|
||||
<!-- Link the issue as harvester/harvester#<issue_number> -->
|
||||
harvester/harvester#<issue_number>
|
||||
|
||||
|
||||
### Test Steps
|
||||
<!-- Provide the test steps for reviewer to verify the issue -->
|
||||
1. Go to ... page
|
||||
|
||||
### Test screenshot or video
|
||||
<!-- Attach screenshot or video of the changes and eventual comparison if you find it necessary -->
|
||||
<!-- Attach screenshot or video of the changes and eventual comparison -->
|
||||
|
||||
|
||||
|
||||
@@ -125,6 +125,13 @@ jobs:
|
||||
node-version-file: '.nvmrc'
|
||||
cache: 'yarn'
|
||||
|
||||
# Tag builds (RC, formal and sprint releases) ship the tag as the package
|
||||
# version. RC/formal tags already match package.json; sprint tags
|
||||
# (vX.Y.Z-dev-YYYYMMDD) only share its prefix, so pin it here for the build.
|
||||
- name: Pin package version to tag
|
||||
if: ${{ inputs.CI_BUILD_TAG != '' }}
|
||||
run: ./scripts/bump_version.sh "${{ inputs.CI_BUILD_TAG }}"
|
||||
|
||||
- id: ci-build-pkg
|
||||
name: Build pkg
|
||||
run: ./scripts/ci-build-pkg.sh harvester
|
||||
|
||||
@@ -58,6 +58,12 @@ jobs:
|
||||
- name: Setup Nodejs with yarn install
|
||||
uses: ./.github/actions/setup
|
||||
|
||||
# The catalog image is tagged with the package.json version. Sprint tags
|
||||
# (vX.Y.Z-dev-YYYYMMDD) only share its prefix, so pin it to the tag here.
|
||||
- name: Pin package version to tag
|
||||
if: ${{ github.ref_type == 'tag' }}
|
||||
run: ./scripts/bump_version.sh "${{ github.ref_name }}"
|
||||
|
||||
- name: Build and push UI image
|
||||
run: |
|
||||
publish="yarn publish-pkgs -cp -r ${{ inputs.registry_target }} -o ${{ inputs.registry_user }}"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
name: Build Standalone on PR Merge
|
||||
|
||||
on:
|
||||
workflow_dispatch: # manually trigger on Github Actions only support PR branch pushed to harvester/harvester-ui-extension
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
@@ -29,3 +30,35 @@ jobs:
|
||||
id-token: write
|
||||
with:
|
||||
CI_BRANCH: ${{github.ref_name}}
|
||||
comment-on-pr:
|
||||
name: Comment build result on PR
|
||||
# Only for manual runs so the existing push / pull_request flows are untouched.
|
||||
if: github.event_name == 'workflow_dispatch'
|
||||
needs:
|
||||
- build
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
pull-requests: write
|
||||
steps:
|
||||
- name: Add build artifact comment to the PR opened from this branch
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
BRANCH: ${{ github.ref_name }}
|
||||
run: |
|
||||
set -euo pipefail
|
||||
# Match scripts/version: sanitize the branch and map main -> latest.
|
||||
if [ "$BRANCH" = "main" ]; then
|
||||
DIR="latest"
|
||||
else
|
||||
DIR=$(printf '%s' "$BRANCH" | sed -E 's/[^a-zA-Z0-9.-]+/-/g')
|
||||
fi
|
||||
URL="https://releases.rancher.com/harvester-ui/dashboard/${DIR}/index.html"
|
||||
|
||||
PR=$(gh pr list --repo "$GITHUB_REPOSITORY" --state open --base main --head "$BRANCH" --json number --jq '.[0].number // empty')
|
||||
if [ -z "$PR" ]; then
|
||||
echo "No open PR found for branch $BRANCH, skipping comment."
|
||||
exit 0
|
||||
fi
|
||||
|
||||
BODY=$(printf '🚀 **UI Artifact Build Status:** `SUCCESS` ✅\n> ui-index: %s\n> ui-source: external' "$URL")
|
||||
gh pr comment "$PR" --repo "$GITHUB_REPOSITORY" --body "$BODY"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
> This `./AGENTS.md` file is generated by running `yarn agents:generate`.
|
||||
> This `./AGENTS.md` file is generated by running `yarn agents:generate`. `CLAUDE.md` and `GEMINI.md` are symlinks to this file so Claude Code, GitHub Copilot and Gemini all read the same content.
|
||||
|
||||
|
||||
# Project Overview
|
||||
@@ -28,9 +28,7 @@ You are an expert Senior Software Engineer specializing in Vue.js and TypeScript
|
||||
- Run `yarn lint:fix` before commits.
|
||||
- Use conventional commit format:
|
||||
```
|
||||
<type>:
|
||||
|
||||
<description>
|
||||
<type>: <description>
|
||||
```
|
||||
- Follow existing naming conventions (PascalCase for components, camelCase for functions).
|
||||
- After changing a Vue, JS, or TS file, make sure it's automatically formatted with ESLint.
|
||||
@@ -130,8 +128,8 @@ To get started, follow the `Development Setup` section.
|
||||
- `Vue.js`:
|
||||
- Composition API components are preferred over Options API.
|
||||
- Large pages with lots of code and styles should be avoided by breaking the page up into smaller Vue components.
|
||||
- Place source tag above template above style.
|
||||
- style tag should contain `lang='scss' scoped`.
|
||||
- Order the Single File Component blocks as `<script>`, then `<template>`, then `<style>`.
|
||||
- The `<style>` tag should include `lang="scss" scoped`.
|
||||
- `Linting`: Follow the ESLint configuration in the root.
|
||||
|
||||
- **File Structure:**
|
||||
@@ -163,24 +161,26 @@ To get started, follow the `Development Setup` section.
|
||||
|
||||
## Harvester UI Extension Development Guide
|
||||
|
||||
1. Backward Compatibility
|
||||
The Harvester UI Extension supports earlier cluster versions (e.g., UI Ext v1.8.0 works with clusters v1.7.0 and v1.6.0). It uses Feature Flags defined in pkg/config/feature-flags to ensure the UI matches the cluster's specific version.
|
||||
### Backward Compatibility
|
||||
|
||||
The Harvester UI Extension supports earlier cluster versions (e.g., UI Ext v1.8.0 works with clusters v1.7.0 and v1.6.0). It uses Feature Flags defined in `pkg/harvester/config/` to ensure the UI matches the cluster's specific version.
|
||||
|
||||
### Implementation Steps for New Features
|
||||
|
||||
2. Implementation Steps for New Features
|
||||
To add a feature in a new release, follow these steps:
|
||||
|
||||
Register: Add a unique [Feature Name] to the corresponding release array in the configuration.
|
||||
1. **Register**: Add a unique `[Feature Name]` to the corresponding release array in the configuration.
|
||||
2. **Check**: Use the following getter to verify if the feature is enabled for the current version:
|
||||
|
||||
Check: Use the following getter to verify if the feature is enabled for the current version:
|
||||
```js
|
||||
computed: {
|
||||
newFeatureEnabled() {
|
||||
return this.$store.getters['harvester-common/getFeatureEnabled']('[Feature Name]');
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
```
|
||||
computed: {
|
||||
newFeatureEnabled() {
|
||||
return this.$store.getters['harvester-common/getFeatureEnabled']('[Feature Name]');
|
||||
},
|
||||
},
|
||||
```
|
||||
Render: Use the result of the check to conditionally render the UI components.
|
||||
3. **Render**: Use the result of the check to conditionally render the UI components.
|
||||
|
||||
|
||||
## E2E Tests (Cypress)
|
||||
@@ -228,7 +228,7 @@ For the Renovate config, see `.github/renovate.json`.
|
||||
### Commit Message Format
|
||||
All commit messages must follow the conventional commit format:
|
||||
```
|
||||
<type>[optional scope]: <description>
|
||||
<type>: <description>
|
||||
|
||||
[optional body]
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ For Harvester UI extension installation instructions, please refer to the page *
|
||||
|
||||
## Development Setup
|
||||
|
||||
Ensure **Node.js v20 or later** is installed for development and debugging.
|
||||
Ensure **Node.js v24 or later** is installed for development and debugging.
|
||||
|
||||
### Standalone Mode
|
||||
|
||||
|
||||
@@ -32,10 +32,11 @@ module.exports = {
|
||||
'subject-empty': [2, 'never'],
|
||||
'subject-full-stop': [2, 'never', '.'],
|
||||
'subject-max-length': [0, 'never'],
|
||||
'header-max-length': [0, 'always', 100],
|
||||
'body-leading-blank': [2, 'always'],
|
||||
'body-max-line-length': [0, 'always', 100],
|
||||
'footer-leading-blank': [2, 'always'],
|
||||
'footer-max-line-length': [2, 'always', 100],
|
||||
'footer-max-line-length': [0, 'always', 100],
|
||||
},
|
||||
// Ignore merge commits and revert commits
|
||||
ignores: [
|
||||
|
||||
@@ -6,9 +6,7 @@
|
||||
- Run `yarn lint:fix` before commits.
|
||||
- Use conventional commit format:
|
||||
```
|
||||
<type>:
|
||||
|
||||
<description>
|
||||
<type>: <description>
|
||||
```
|
||||
- Follow existing naming conventions (PascalCase for components, camelCase for functions).
|
||||
- After changing a Vue, JS, or TS file, make sure it's automatically formatted with ESLint.
|
||||
|
||||
@@ -16,8 +16,8 @@ To get started, follow the `Development Setup` section.
|
||||
- `Vue.js`:
|
||||
- Composition API components are preferred over Options API.
|
||||
- Large pages with lots of code and styles should be avoided by breaking the page up into smaller Vue components.
|
||||
- Place source tag above template above style.
|
||||
- style tag should contain `lang='scss' scoped`.
|
||||
- Order the Single File Component blocks as `<script>`, then `<template>`, then `<style>`.
|
||||
- The `<style>` tag should include `lang="scss" scoped`.
|
||||
- `Linting`: Follow the ESLint configuration in the root.
|
||||
|
||||
- **File Structure:**
|
||||
@@ -49,22 +49,24 @@ To get started, follow the `Development Setup` section.
|
||||
|
||||
## Harvester UI Extension Development Guide
|
||||
|
||||
1. Backward Compatibility
|
||||
The Harvester UI Extension supports earlier cluster versions (e.g., UI Ext v1.8.0 works with clusters v1.7.0 and v1.6.0). It uses Feature Flags defined in pkg/config/feature-flags to ensure the UI matches the cluster's specific version.
|
||||
### Backward Compatibility
|
||||
|
||||
The Harvester UI Extension supports earlier cluster versions (e.g., UI Ext v1.8.0 works with clusters v1.7.0 and v1.6.0). It uses Feature Flags defined in `pkg/harvester/config/` to ensure the UI matches the cluster's specific version.
|
||||
|
||||
### Implementation Steps for New Features
|
||||
|
||||
2. Implementation Steps for New Features
|
||||
To add a feature in a new release, follow these steps:
|
||||
|
||||
Register: Add a unique [Feature Name] to the corresponding release array in the configuration.
|
||||
1. **Register**: Add a unique `[Feature Name]` to the corresponding release array in the configuration.
|
||||
2. **Check**: Use the following getter to verify if the feature is enabled for the current version:
|
||||
|
||||
Check: Use the following getter to verify if the feature is enabled for the current version:
|
||||
```js
|
||||
computed: {
|
||||
newFeatureEnabled() {
|
||||
return this.$store.getters['harvester-common/getFeatureEnabled']('[Feature Name]');
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
```
|
||||
computed: {
|
||||
newFeatureEnabled() {
|
||||
return this.$store.getters['harvester-common/getFeatureEnabled']('[Feature Name]');
|
||||
},
|
||||
},
|
||||
```
|
||||
Render: Use the result of the check to conditionally render the UI components.
|
||||
3. **Render**: Use the result of the check to conditionally render the UI components.
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
### Commit Message Format
|
||||
All commit messages must follow the conventional commit format:
|
||||
```
|
||||
<type>[optional scope]: <description>
|
||||
<type>: <description>
|
||||
|
||||
[optional body]
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
> This `./AGENTS.md` file is generated by running `yarn agents:generate`.
|
||||
> This `./AGENTS.md` file is generated by running `yarn agents:generate`. `CLAUDE.md` and `GEMINI.md` are symlinks to this file so Claude Code, GitHub Copilot and Gemini all read the same content.
|
||||
|
||||
|
||||
# Project Overview
|
||||
|
||||
+17
-9
@@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "harvester-ui-extension",
|
||||
"version": "1.9.0-rc2",
|
||||
"version": "1.10.0-dev",
|
||||
"private": false,
|
||||
"engines": {
|
||||
"node": ">=24.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-class-static-block": "7.29.7",
|
||||
"@rancher/shell": "3.0.12-rc.3",
|
||||
"@rancher/shell": "3.0.13",
|
||||
"@vue-flow/background": "^1.3.0",
|
||||
"@vue-flow/controls": "^1.1.1",
|
||||
"@vue-flow/core": "^1.33.5",
|
||||
@@ -15,13 +15,19 @@
|
||||
"cache-loader": "^4.1.0",
|
||||
"color": "4.2.3",
|
||||
"ip": "2.0.1",
|
||||
"@xterm/xterm": "6.0.0",
|
||||
"@xterm/addon-fit": "0.11.0",
|
||||
"@xterm/addon-search": "0.16.0",
|
||||
"@xterm/addon-web-links": "0.12.0",
|
||||
"@xterm/addon-webgl": "0.19.0",
|
||||
"@xterm/addon-canvas": "0.7.0",
|
||||
"node-polyfill-webpack-plugin": "^3.0.0",
|
||||
"elkjs": "^0.11.0",
|
||||
"vue-draggable-next": "^2.2.1",
|
||||
"yaml": "^2.5.1"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/node": "25.9.4",
|
||||
"@types/node": "25.9.6",
|
||||
"cronstrue": "2.59.0",
|
||||
"d3-color": "3.1.0",
|
||||
"ejs": "3.1.10",
|
||||
@@ -29,12 +35,12 @@
|
||||
"glob": "7.2.3",
|
||||
"glob-parent": "6.0.2",
|
||||
"json5": "2.2.3",
|
||||
"@types/lodash": "4.17.24",
|
||||
"@types/lodash": "4.17.25",
|
||||
"merge": "2.1.1",
|
||||
"node-forge": "1.4.0",
|
||||
"nth-check": "2.1.1",
|
||||
"qs": "6.15.3",
|
||||
"roarr": "7.21.6",
|
||||
"qs": "6.16.0",
|
||||
"roarr": "7.21.7",
|
||||
"semver": "7.8.5",
|
||||
"@vue/cli-service/html-webpack-plugin": "^5.0.0"
|
||||
},
|
||||
@@ -42,15 +48,17 @@
|
||||
"dev": "NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve",
|
||||
"build": "./node_modules/.bin/vue-cli-service build",
|
||||
"clean": "./node_modules/@rancher/shell/scripts/clean",
|
||||
"lint": "./node_modules/.bin/eslint --max-warnings 0 --ext .js,.ts,.vue .",
|
||||
"lint:fix": "./node_modules/.bin/eslint --fix --max-warnings 0 --ext .js,.ts,.vue .",
|
||||
"lint": "./node_modules/@rancher/shell/scripts/lint --max-warnings 0 --ext .js,.ts,.vue .",
|
||||
"lint:fix": "./node_modules/@rancher/shell/scripts/lint --fix --max-warnings 0 --ext .js,.ts,.vue .",
|
||||
"build-pkg": "./node_modules/@rancher/shell/scripts/build-pkg.sh",
|
||||
"serve-pkgs": "./node_modules/@rancher/shell/scripts/serve-pkgs",
|
||||
"publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish",
|
||||
"parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name",
|
||||
"commitlint": "commitlint --edit",
|
||||
"prepare": "husky",
|
||||
"agents:generate": "./scripts/generate-agent-and-persona-mds.sh"
|
||||
"agents:generate": "./scripts/generate-agent-and-persona-mds.sh",
|
||||
"prelint": "npm --prefix node_modules/@rancher/shell/eslint-legacy install eslint-plugin-jest@^24 --no-save --no-audit --no-fund --legacy-peer-deps --loglevel=error",
|
||||
"prelint:fix": "npm --prefix node_modules/@rancher/shell/eslint-legacy install eslint-plugin-jest@^24 --no-save --no-audit --no-fund --legacy-peer-deps --loglevel=error"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/load": "^19.8.1",
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
@@ -271,4 +271,9 @@ export default {
|
||||
.filter-label .v-popper__arrow-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-header-actions .middle .filter + .btn-group {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -116,6 +116,11 @@ export default {
|
||||
.vm-schedule-dropdown .v-popper__arrow-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-header-actions .middle .vm-schedule-filter + .btn-group {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -55,8 +55,12 @@ export default {
|
||||
!this.latestUpgrade.isUpgradeFailed;
|
||||
},
|
||||
|
||||
canUpgrade() {
|
||||
return this.versionOptions.length > 0 && !this.isUpgradeInProgress;
|
||||
},
|
||||
|
||||
versionOptions() {
|
||||
const versions = this.$store.getters['harvester/all'](HCI.VERSION);
|
||||
const versions = this.$store.getters['harvester/all'](HCI.VERSION) || [];
|
||||
|
||||
return versions.map((V) => V.metadata.name);
|
||||
},
|
||||
@@ -154,14 +158,23 @@ export default {
|
||||
:cluster="currentCluster.nameDisplay"
|
||||
/>
|
||||
</h1>
|
||||
<button
|
||||
v-if="versionOptions.length && !isUpgradeInProgress"
|
||||
type="button"
|
||||
class="btn bg-warning btn-sm"
|
||||
@click="open"
|
||||
<span
|
||||
v-clean-tooltip="{
|
||||
content: canUpgrade ? t('harvester.upgradePage.upgradeAvailable') : t('harvester.upgradePage.upgradeUnavailable'),
|
||||
triggers: ['hover', 'focus', 'touch'],
|
||||
}"
|
||||
class="upgrade-btn-wrap"
|
||||
:tabindex="canUpgrade ? -1 : 0"
|
||||
>
|
||||
<t k="harvester.upgradePage.upgrade" />
|
||||
</button>
|
||||
<button
|
||||
:disabled="!canUpgrade"
|
||||
type="button"
|
||||
class="btn bg-warning btn-sm"
|
||||
@click="open"
|
||||
>
|
||||
<t k="harvester.upgradePage.upgrade" />
|
||||
</button>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<ModalWithCard
|
||||
@@ -296,6 +309,18 @@ export default {
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.upgrade-btn-wrap {
|
||||
display: inline-flex;
|
||||
|
||||
button {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.currentVersion {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
import { allHash } from '@shell/utils/promise';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import Socket, {
|
||||
EVENT_CONNECTED,
|
||||
EVENT_CONNECTING,
|
||||
@@ -22,74 +21,98 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
socket: null,
|
||||
terminal: null,
|
||||
fitAddon: null,
|
||||
searchAddon: null,
|
||||
webglAddon: null,
|
||||
isOpen: false,
|
||||
isOpening: false,
|
||||
backlog: [],
|
||||
firstTime: true,
|
||||
queue: []
|
||||
socket: null,
|
||||
terminal: null,
|
||||
textDecoder: null,
|
||||
fitAddon: null,
|
||||
searchAddon: null,
|
||||
webglAddon: null,
|
||||
onResize: null,
|
||||
isOpen: false,
|
||||
isOpening: false,
|
||||
backlog: [],
|
||||
firstTime: true,
|
||||
queue: [],
|
||||
isDraining: false,
|
||||
drainScheduled: false,
|
||||
drainTimer: null,
|
||||
showSearch: false,
|
||||
searchQuery: '',
|
||||
searchOptions: {
|
||||
caseSensitive: false,
|
||||
regex: false,
|
||||
wholeWord: false,
|
||||
incremental: true,
|
||||
decorations: {
|
||||
matchBackground: '#B45309',
|
||||
matchBorder: '#FDBA74',
|
||||
matchOverviewRuler: '#FDBA74',
|
||||
activeMatchBackground: '#EA580C',
|
||||
activeMatchBorder: '#FED7AA',
|
||||
activeMatchColorOverviewRuler: '#FED7AA',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
serialConsoleUrl() {
|
||||
return this.value?.getSerialConsolePath || '';
|
||||
},
|
||||
|
||||
xtermConfig() {
|
||||
return {
|
||||
allowProposedApi: true,
|
||||
cursorBlink: true,
|
||||
cursorStyle: 'bar',
|
||||
cursorWidth: 2,
|
||||
scrollback: 5000,
|
||||
useStyle: true,
|
||||
fontSize: 12,
|
||||
fontFamily: 'JetBrains Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
fontSize: 16,
|
||||
lineHeight: 1.3,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
queue: {
|
||||
handler: debounce(async function(neu) {
|
||||
if (neu.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const msg = await Promise.all(neu);
|
||||
|
||||
(msg || []).forEach((m) => {
|
||||
this.terminal.write(m);
|
||||
});
|
||||
|
||||
this.queue = [];
|
||||
}, 10),
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.close();
|
||||
},
|
||||
|
||||
watch: {
|
||||
serialConsoleUrl() {
|
||||
if (this.terminal) {
|
||||
this.connect();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.textDecoder = new TextDecoder('utf-8');
|
||||
await this.setupTerminal();
|
||||
await this.connect();
|
||||
this.onResize = debounce(() => this.fit(), 100);
|
||||
window.addEventListener('resize', this.onResize);
|
||||
this.scheduleFit();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async setupTerminal() {
|
||||
const docStyle = getComputedStyle(document.querySelector('body'));
|
||||
const xterm = await import(/* webpackChunkName: "xterm" */ 'xterm');
|
||||
const xterm = await import(/* webpackChunkName: "xterm" */ '@xterm/xterm');
|
||||
|
||||
const addons = await allHash({
|
||||
fit: import(/* webpackChunkName: "xterm" */ 'xterm-addon-fit'),
|
||||
webgl: import(/* webpackChunkName: "xterm" */ 'xterm-addon-webgl'),
|
||||
weblinks: import(/* webpackChunkName: "xterm" */ 'xterm-addon-web-links'),
|
||||
search: import(/* webpackChunkName: "xterm" */ 'xterm-addon-search'),
|
||||
fit: import(/* webpackChunkName: "xterm" */ '@xterm/addon-fit'),
|
||||
webgl: import(/* webpackChunkName: "xterm" */ '@xterm/addon-webgl'),
|
||||
weblinks: import(/* webpackChunkName: "xterm" */ '@xterm/addon-web-links'),
|
||||
search: import(/* webpackChunkName: "xterm" */ '@xterm/addon-search'),
|
||||
canvas: import(/* webpackChunkName: "xterm" */ '@xterm/addon-canvas'),
|
||||
});
|
||||
|
||||
const terminal = new xterm.Terminal({
|
||||
theme: {
|
||||
background: docStyle.getPropertyValue('--terminal-bg').trim(),
|
||||
cursor: docStyle.getPropertyValue('--terminal-cursor').trim(),
|
||||
cursor: docStyle.getPropertyValue('--terminal-text').trim(),
|
||||
foreground: docStyle.getPropertyValue('--terminal-text').trim()
|
||||
},
|
||||
...this.xtermConfig,
|
||||
@@ -97,25 +120,48 @@ export default {
|
||||
|
||||
this.fitAddon = new addons.fit.FitAddon();
|
||||
this.searchAddon = new addons.search.SearchAddon();
|
||||
|
||||
try {
|
||||
this.webglAddon = new addons.webgl.WebGlAddon();
|
||||
} catch (e) {
|
||||
// Some browsers (Safari) don't support the webgl renderer, so don't use it.
|
||||
this.webglAddon = null;
|
||||
}
|
||||
|
||||
terminal.loadAddon(this.fitAddon);
|
||||
terminal.loadAddon(this.searchAddon);
|
||||
terminal.loadAddon(new addons.weblinks.WebLinksAddon());
|
||||
terminal.open(this.$refs.xterm);
|
||||
|
||||
if ( this.webglAddon ) {
|
||||
// The webgl renderer can fail without throwing: the context may be lost
|
||||
// mid-session, or it can attach but silently never paint, leaving the
|
||||
// terminal's helper textarea at 0x0. Detect both cases and fall back to the
|
||||
// canvas renderer so the terminal stays interactive.
|
||||
try {
|
||||
this.webglAddon = new addons.webgl.WebglAddon();
|
||||
|
||||
this.webglAddon.onContextLoss(() => {
|
||||
if (!this.isUnmounted && this.terminal) {
|
||||
this.fallbackToCanvas(terminal, addons);
|
||||
}
|
||||
});
|
||||
|
||||
terminal.loadAddon(this.webglAddon);
|
||||
|
||||
// Detect the silent "attaches but never paints" failure after a render frame.
|
||||
requestAnimationFrame(() => {
|
||||
if (this.isUnmounted || !this.terminal) {
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = this.$refs.xterm?.querySelector('.xterm-helper-textarea');
|
||||
const hasPainted = textarea && textarea.getBoundingClientRect().height > 0;
|
||||
|
||||
if (this.webglAddon && !hasPainted) {
|
||||
this.fallbackToCanvas(terminal, addons);
|
||||
this.fit();
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// Some browsers (e.g. Safari) don't support the webgl renderer, so don't use it.
|
||||
this.fallbackToCanvas(terminal, addons);
|
||||
}
|
||||
|
||||
this.fit();
|
||||
this.flush();
|
||||
this.scheduleDrainQueue();
|
||||
|
||||
terminal.onData((input) => {
|
||||
const msg = this.str2ab(input);
|
||||
@@ -123,9 +169,132 @@ export default {
|
||||
this.write(msg);
|
||||
});
|
||||
|
||||
terminal.attachCustomKeyEventHandler((event) => {
|
||||
const key = event.key?.toLowerCase();
|
||||
|
||||
if ((event.ctrlKey || event.metaKey) && key === 'f') {
|
||||
event.preventDefault();
|
||||
this.openSearch();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (key === 'escape' && this.showSearch) {
|
||||
event.preventDefault();
|
||||
this.closeSearch();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
this.terminal = terminal;
|
||||
},
|
||||
|
||||
openSearch() {
|
||||
this.showSearch = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
const input = this.$refs.searchInput;
|
||||
|
||||
if (input) {
|
||||
input.focus();
|
||||
input.select();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeSearch() {
|
||||
this.showSearch = false;
|
||||
this.searchQuery = '';
|
||||
this.clearSearchHighlights();
|
||||
this.terminal?.focus();
|
||||
},
|
||||
|
||||
clearSearchHighlights() {
|
||||
this.searchAddon?.clearActiveDecoration();
|
||||
this.searchAddon?.clearDecorations();
|
||||
this.terminal?.clearSelection();
|
||||
|
||||
// Disposing the search decorations doesn't repaint the webgl/canvas
|
||||
// layer, so force a refresh to remove the lingering highlight.
|
||||
if (this.terminal) {
|
||||
this.terminal.refresh(0, this.terminal.rows - 1);
|
||||
}
|
||||
},
|
||||
|
||||
findNext() {
|
||||
if (!this.searchAddon || !this.searchQuery) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.searchAddon.findNext(this.searchQuery, this.searchOptions);
|
||||
},
|
||||
|
||||
findPrevious() {
|
||||
if (!this.searchAddon || !this.searchQuery) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.searchAddon.findPrevious(this.searchQuery, this.searchOptions);
|
||||
},
|
||||
|
||||
onSearchInput() {
|
||||
if (!this.searchQuery) {
|
||||
this.clearSearchHighlights();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.findNext();
|
||||
},
|
||||
|
||||
onSearchKeydown(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
if (event.shiftKey) {
|
||||
this.findPrevious();
|
||||
} else {
|
||||
this.findNext();
|
||||
}
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
this.closeSearch();
|
||||
}
|
||||
},
|
||||
|
||||
scheduleFit() {
|
||||
this.$nextTick(() => {
|
||||
requestAnimationFrame(() => {
|
||||
this.fit();
|
||||
|
||||
// Re-fit after layout settles to avoid undersized rows on first paint.
|
||||
setTimeout(() => this.fit(), 120);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// Dispose the webgl renderer (if any) and switch to the canvas renderer.
|
||||
// Used when webgl fails to construct, loses its context, or silently never paints.
|
||||
fallbackToCanvas(terminal, addons) {
|
||||
if (this.isUnmounted) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.webglAddon?.dispose();
|
||||
this.webglAddon = null;
|
||||
|
||||
if (!this.canvasAddon) {
|
||||
this.canvasAddon = new addons.canvas.CanvasAddon();
|
||||
terminal.loadAddon(this.canvasAddon);
|
||||
}
|
||||
this.fit();
|
||||
},
|
||||
|
||||
str2ab(str) {
|
||||
const enc = new TextEncoder();
|
||||
|
||||
@@ -140,12 +309,131 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
enqueueMessage(messagePromise) {
|
||||
this.queue.push(messagePromise);
|
||||
this.scheduleDrainQueue();
|
||||
},
|
||||
|
||||
scheduleDrainQueue() {
|
||||
if (this.drainScheduled || this.isDraining || !this.terminal) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.drainScheduled = true;
|
||||
|
||||
const shouldDrainImmediately = this.queue.length <= 3;
|
||||
|
||||
const runDrain = () => {
|
||||
this.drainScheduled = false;
|
||||
this.drainTimer = null;
|
||||
this.drainQueue();
|
||||
};
|
||||
|
||||
if (shouldDrainImmediately) {
|
||||
runDrain();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.drainTimer = requestAnimationFrame(runDrain);
|
||||
},
|
||||
|
||||
async decodeMessageData(data) {
|
||||
if (typeof data === 'string') {
|
||||
return data;
|
||||
}
|
||||
|
||||
if (!this.textDecoder) {
|
||||
this.textDecoder = new TextDecoder('utf-8');
|
||||
}
|
||||
|
||||
if (data instanceof Blob) {
|
||||
const buffer = await data.arrayBuffer();
|
||||
|
||||
return this.textDecoder.decode(new Uint8Array(buffer), { stream: true });
|
||||
}
|
||||
|
||||
if (data instanceof ArrayBuffer) {
|
||||
return this.textDecoder.decode(new Uint8Array(data), { stream: true });
|
||||
}
|
||||
|
||||
if (ArrayBuffer.isView(data)) {
|
||||
const view = data;
|
||||
const bytes = new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
|
||||
|
||||
return this.textDecoder.decode(bytes, { stream: true });
|
||||
}
|
||||
|
||||
return String(data || '');
|
||||
},
|
||||
|
||||
async drainQueue() {
|
||||
if (this.isDraining || !this.terminal) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isDraining = true;
|
||||
|
||||
try {
|
||||
while (this.queue.length > 0) {
|
||||
const pendingMessages = this.queue.splice(0, this.queue.length);
|
||||
const settledMessages = await Promise.allSettled(pendingMessages);
|
||||
const messages = settledMessages
|
||||
.filter((result) => result.status === 'fulfilled')
|
||||
.map((result) => result.value);
|
||||
const output = messages.filter(Boolean).join('');
|
||||
|
||||
if (output) {
|
||||
await this.writeOutputInChunks(output);
|
||||
}
|
||||
|
||||
if (this.queue.length > 0) {
|
||||
await this.nextFrame();
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
this.isDraining = false;
|
||||
|
||||
// If data arrived between the last while-check and releasing the lock,
|
||||
// immediately schedule another drain so output never gets stuck.
|
||||
if (this.queue.length > 0 && this.terminal) {
|
||||
this.scheduleDrainQueue();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async writeOutputInChunks(output) {
|
||||
if (!output) {
|
||||
return;
|
||||
}
|
||||
|
||||
const chunkSize = output.length > 20000 ? 16000 : output.length > 8000 ? 8000 : output.length;
|
||||
|
||||
if (chunkSize === output.length) {
|
||||
this.terminal.write(output);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
for (let index = 0; index < output.length; index += chunkSize) {
|
||||
this.terminal.write(output.slice(index, index + chunkSize));
|
||||
|
||||
if (index + chunkSize < output.length) {
|
||||
await this.nextFrame();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
nextFrame() {
|
||||
return new Promise((resolve) => requestAnimationFrame(resolve));
|
||||
},
|
||||
|
||||
clear() {
|
||||
this.terminal.clear();
|
||||
},
|
||||
|
||||
getSocketUrl() {
|
||||
return `${ this.value?.getSerialConsolePath }`;
|
||||
return this.serialConsoleUrl;
|
||||
},
|
||||
|
||||
async connect() {
|
||||
@@ -181,6 +469,7 @@ export default {
|
||||
this.fit();
|
||||
this.flush();
|
||||
}
|
||||
this.scheduleFit();
|
||||
|
||||
if (this.firstTime) {
|
||||
this.socket.send(this.str2ab('\n'));
|
||||
@@ -195,7 +484,7 @@ export default {
|
||||
});
|
||||
|
||||
this.socket.addEventListener(EVENT_MESSAGE, (e) => {
|
||||
this.queue.push(e.detail.data.text());
|
||||
this.enqueueMessage(this.decodeMessageData(e.detail.data));
|
||||
});
|
||||
|
||||
this.socket.connect();
|
||||
@@ -218,22 +507,19 @@ export default {
|
||||
}
|
||||
|
||||
this.fitAddon.fit();
|
||||
|
||||
const { rows, cols } = this.fitAddon.proposeDimensions();
|
||||
|
||||
if ( !this.isOpen ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const message = JSON.stringify({
|
||||
Width: cols,
|
||||
Height: rows
|
||||
});
|
||||
|
||||
this.socket.send(this.str2ab(message));
|
||||
},
|
||||
|
||||
close() {
|
||||
if (this.onResize) {
|
||||
window.removeEventListener('resize', this.onResize);
|
||||
this.onResize = null;
|
||||
}
|
||||
|
||||
if (this.drainTimer) {
|
||||
cancelAnimationFrame(this.drainTimer);
|
||||
this.drainTimer = null;
|
||||
}
|
||||
|
||||
if ( this.socket ) {
|
||||
this.socket.disconnect();
|
||||
}
|
||||
@@ -248,6 +534,44 @@ export default {
|
||||
|
||||
<template>
|
||||
<div class="harvester-shell-container">
|
||||
<div
|
||||
v-if="showSearch"
|
||||
class="shell-search"
|
||||
>
|
||||
<input
|
||||
ref="searchInput"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="shell-search-input"
|
||||
placeholder="Search in terminal"
|
||||
@input="onSearchInput"
|
||||
@keydown="onSearchKeydown"
|
||||
>
|
||||
<button
|
||||
class="btn role-secondary btn-sm shell-search-btn"
|
||||
type="button"
|
||||
title="Shift+Enter"
|
||||
@click="findPrevious"
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
class="btn role-secondary btn-sm shell-search-btn"
|
||||
type="button"
|
||||
title="Enter"
|
||||
@click="findNext"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<button
|
||||
class="btn role-secondary btn-sm shell-search-btn"
|
||||
type="button"
|
||||
title="Esc"
|
||||
@click="closeSearch"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref="xterm"
|
||||
class="shell-body"
|
||||
@@ -257,18 +581,73 @@ export default {
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../../node_modules/xterm/css/xterm.css';
|
||||
@import '../../../../node_modules/@xterm/xterm/css/xterm.css';
|
||||
|
||||
body, #__nuxt, #__layout, MAIN {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.harvester-shell-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.shell-body, .terminal.xterm {
|
||||
.resize-observer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shell-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
z-index: 5;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--body-bg) 88%, transparent);
|
||||
}
|
||||
|
||||
.shell-search-input {
|
||||
min-width: 220px;
|
||||
max-width: 420px;
|
||||
flex: 0 1 320px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--body-bg);
|
||||
color: var(--body-text);
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.shell-search-btn {
|
||||
min-width: 64px;
|
||||
}
|
||||
|
||||
.shell-body {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.terminal.xterm,
|
||||
.terminal.xterm .xterm-viewport,
|
||||
.terminal.xterm .xterm-screen,
|
||||
.terminal.xterm .xterm-scrollable-element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.terminal.xterm .xterm-scrollable-element {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { docLink } from '../utils/feature-flags';
|
||||
const CATEGORY = {
|
||||
ui: [
|
||||
'branding',
|
||||
HCI_SETTING.SERVER_FLAVOR,
|
||||
'ui-source',
|
||||
'ui-index',
|
||||
]
|
||||
@@ -53,7 +54,7 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
computed: { ...mapGetters({ t: 'i18n/t' }) },
|
||||
computed: { ...mapGetters({ t: 'i18n/t', isHarvesterPrime: 'harvester-common/isHarvesterPrime' }) },
|
||||
|
||||
watch: {
|
||||
settings: {
|
||||
@@ -231,14 +232,21 @@ export default {
|
||||
v-if="setting.customized"
|
||||
class="modified"
|
||||
>
|
||||
Modified
|
||||
{{ t('advancedSettings.tags.modified.label') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="setting.experimental"
|
||||
v-clean-tooltip="t('advancedSettings.experimental')"
|
||||
v-clean-tooltip="t('advancedSettings.tags.experimental.description')"
|
||||
class="experimental"
|
||||
>
|
||||
Experimental
|
||||
{{ t('advancedSettings.tags.experimental.label') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="setting.preview"
|
||||
v-clean-tooltip="t('advancedSettings.tags.preview.description')"
|
||||
class="preview"
|
||||
>
|
||||
{{ t('advancedSettings.tags.preview.label') }}
|
||||
</span>
|
||||
</h1>
|
||||
<h2 v-clean-html="t(setting.description, getDocLinkParams(setting) || {}, true)">
|
||||
@@ -262,7 +270,8 @@ export default {
|
||||
v-if="!setting.hide"
|
||||
class="settings-value"
|
||||
>
|
||||
<pre v-if="setting.kind === 'json'">{{ setting.json }}</pre>
|
||||
<pre v-if="setting.id === 'branding' && isHarvesterPrime">{{ $store.getters['harvester-common/privateLabel'] }}</pre>
|
||||
<pre v-else-if="setting.kind === 'json'">{{ setting.json }}</pre>
|
||||
<pre v-else-if="setting.kind === 'multiline'">{{ setting.data.value || setting.data.default }}</pre>
|
||||
<pre v-else-if="setting.kind === 'enum'">{{ t(setting.enum) }}</pre>
|
||||
<pre v-else-if="setting.kind === 'custom' && setting.custom">{{ setting.custom }}</pre>
|
||||
@@ -352,21 +361,19 @@ export default {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modified {
|
||||
.modified,
|
||||
.experimental,
|
||||
.preview {
|
||||
margin-left: 10px;
|
||||
border: 1px solid var(--primary);
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.experimental {
|
||||
margin-left: 10px;
|
||||
border: 1px solid var(--error);
|
||||
border-radius: 5px;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.modified { border-color: var(--primary); }
|
||||
.experimental { border-color: var(--error); }
|
||||
.preview { border-color: var(--warning); }
|
||||
|
||||
.no-search-match {
|
||||
text-align: center;
|
||||
|
||||
@@ -55,6 +55,10 @@ export default {
|
||||
const host = window.location.host;
|
||||
const prefix = window.location.pathname.replace(this.$route.path, '');
|
||||
const params = this.$route?.params;
|
||||
const popupWidth = Math.max(800, screen.width - 200);
|
||||
const popupHeight = Math.max(600, screen.height - 200);
|
||||
const popupLeft = Math.max(0, window.screenX + Math.floor((window.outerWidth - popupWidth) / 2));
|
||||
const popupTop = Math.max(0, window.screenY + Math.floor((window.outerHeight - popupHeight) / 2));
|
||||
|
||||
const url = `https://${ host }${ prefix }/${ PRODUCT_NAME }/c/${ params.cluster }/console/${ uid }/${ type }`;
|
||||
|
||||
@@ -63,7 +67,7 @@ export default {
|
||||
window.open(
|
||||
url,
|
||||
'_blank',
|
||||
`toolbars=0,width=${ screen.width - 200 },height=${ screen.height - 200 },left=0,top=0,noreferrer`
|
||||
`toolbars=0,width=${ popupWidth },height=${ popupHeight },left=${ popupLeft },top=${ popupTop },noreferrer`
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
@@ -7,10 +7,15 @@ import { STORAGE_CLASS, NETWORK_ATTACHMENT } from '@shell/config/types';
|
||||
import { useI18n } from '@shell/composables/useI18n';
|
||||
import { randomStr } from '@shell/utils/string';
|
||||
import { HCI } from '../../types';
|
||||
import { VOLUME_MODE, ACCESS_MODE } from '../../config/types';
|
||||
import { FORKLIFT_NAMESPACE } from '../../config/harvester-map';
|
||||
import { buildNetworkMapEntries, buildStorageMapEntries } from '../../utils/forklift';
|
||||
import { isInternalStorageClass } from '../../utils/storage-class';
|
||||
import MappingColumn from './MappingColumn.vue';
|
||||
import StorageDefaultsModal from './StorageDefaultsModal.vue';
|
||||
|
||||
const DEFAULT_VOLUME_MODE = VOLUME_MODE.FILE_SYSTEM;
|
||||
const DEFAULT_ACCESS_MODE = ACCESS_MODE?.READ_WRITE_MANY ?? 'ReadWriteMany';
|
||||
|
||||
const props = defineProps({
|
||||
providerName: { type: String, default: '' },
|
||||
@@ -35,6 +40,10 @@ const allStorageMaps = ref([]);
|
||||
const errors = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
// Storage defaults edit modal state.
|
||||
const showStorageDefaultsModal = ref(false);
|
||||
const editingStorageEntry = ref(null);
|
||||
|
||||
const { networkEntries, storageEntries } = toRefs(props.stepData);
|
||||
|
||||
const NAMESPACE = FORKLIFT_NAMESPACE;
|
||||
@@ -105,7 +114,7 @@ const applyNetworkMapTargets = (mapSpec) => {
|
||||
});
|
||||
};
|
||||
|
||||
const applyStorageMapTargets = (mapSpec) => {
|
||||
const applyStorageMapTargets = (mapSpec, { markOverridden = false, captureInherited = false } = {}) => {
|
||||
if (!mapSpec) {
|
||||
return;
|
||||
}
|
||||
@@ -117,6 +126,30 @@ const applyStorageMapTargets = (mapSpec) => {
|
||||
|
||||
if (match?.destination?.storageClass) {
|
||||
entry.target = match.destination.storageClass;
|
||||
|
||||
if (captureInherited) {
|
||||
entry.inheritedFromProvider = true;
|
||||
}
|
||||
|
||||
if (match.destination.volumeMode) {
|
||||
entry.volumeMode = match.destination.volumeMode;
|
||||
|
||||
if (captureInherited) {
|
||||
entry.inheritedVolumeMode = match.destination.volumeMode;
|
||||
}
|
||||
}
|
||||
|
||||
if (match.destination.accessMode) {
|
||||
entry.accessModes = [match.destination.accessMode];
|
||||
|
||||
if (captureInherited) {
|
||||
entry.inheritedAccessModes = [match.destination.accessMode];
|
||||
}
|
||||
}
|
||||
|
||||
if (markOverridden) {
|
||||
entry.overridden = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -134,12 +167,39 @@ const applyDefaultStorageMap = () => {
|
||||
(sm) => sm.metadata.name === `${ props.providerName }-storage-map-default`
|
||||
);
|
||||
|
||||
applyStorageMapTargets(defaultMap?.spec?.map);
|
||||
applyStorageMapTargets(defaultMap?.spec?.map, { captureInherited: true });
|
||||
};
|
||||
|
||||
const allNetworksMapped = computed(() => networkEntries.value.length > 0 && networkEntries.value.every((e) => !!e.target));
|
||||
const allStorageMapped = computed(() => storageEntries.value.length > 0 && storageEntries.value.every((e) => !!e.target));
|
||||
|
||||
// The "Inherited from provider" hint only appears in the migration plan wizard
|
||||
// (where mappings inherit from the provider default), not on the provider creation page.
|
||||
const inheritedProviderName = computed(() => (props.useAllProviderData ? '' : props.providerName));
|
||||
|
||||
const openStorageDefaults = (entry) => {
|
||||
editingStorageEntry.value = entry;
|
||||
showStorageDefaultsModal.value = true;
|
||||
};
|
||||
|
||||
const closeStorageDefaults = () => {
|
||||
showStorageDefaultsModal.value = false;
|
||||
editingStorageEntry.value = null;
|
||||
};
|
||||
|
||||
const applyStorageDefaults = ({ volumeMode, accessModes }) => {
|
||||
if (editingStorageEntry.value) {
|
||||
editingStorageEntry.value.volumeMode = volumeMode;
|
||||
editingStorageEntry.value.accessModes = accessModes;
|
||||
|
||||
const inheritedVolumeMode = editingStorageEntry.value.inheritedVolumeMode;
|
||||
const inheritedAccessMode = editingStorageEntry.value.inheritedAccessModes?.[0];
|
||||
const selectedAccessMode = accessModes?.[0];
|
||||
|
||||
editingStorageEntry.value.overridden = volumeMode !== inheritedVolumeMode || selectedAccessMode !== inheritedAccessMode;
|
||||
}
|
||||
};
|
||||
|
||||
const canSave = computed(() => {
|
||||
if (props.useAllProviderData) {
|
||||
return true;
|
||||
@@ -202,13 +262,19 @@ const buildStorageEntries = () => {
|
||||
if (ds && ds.id) {
|
||||
if (!datastoreMap[ds.id]) {
|
||||
datastoreMap[ds.id] = {
|
||||
name: ds.name || t('harvester.addons.vmMigration.generic.unknown'),
|
||||
id: ds.id,
|
||||
type: ds.type || '',
|
||||
capacity: 0,
|
||||
target: '',
|
||||
usedBy: [],
|
||||
_key: `stor-${ ds.id }`,
|
||||
name: ds.name || t('harvester.addons.vmMigration.generic.unknown'),
|
||||
id: ds.id,
|
||||
type: ds.type || '',
|
||||
capacity: 0,
|
||||
target: '',
|
||||
volumeMode: DEFAULT_VOLUME_MODE,
|
||||
accessModes: [DEFAULT_ACCESS_MODE],
|
||||
inheritedVolumeMode: DEFAULT_VOLUME_MODE,
|
||||
inheritedAccessModes: [DEFAULT_ACCESS_MODE],
|
||||
inheritedFromProvider: false,
|
||||
overridden: false,
|
||||
usedBy: [],
|
||||
_key: `stor-${ ds.id }`,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -238,13 +304,19 @@ const buildNetworkEntriesFromProvider = (networksData) => {
|
||||
|
||||
const buildStorageEntriesFromProvider = (datastoresData) => {
|
||||
storageEntries.value = (Array.isArray(datastoresData) ? datastoresData : []).map((ds) => ({
|
||||
name: ds.name || ds.id,
|
||||
id: ds.id || '',
|
||||
type: ds.type || '',
|
||||
capacity: ds.capacity || 0,
|
||||
target: '',
|
||||
usedBy: [],
|
||||
_key: `stor-${ ds.id || ds.name }`,
|
||||
name: ds.name || ds.id,
|
||||
id: ds.id || '',
|
||||
type: ds.type || '',
|
||||
capacity: ds.capacity || 0,
|
||||
target: '',
|
||||
volumeMode: DEFAULT_VOLUME_MODE,
|
||||
accessModes: [DEFAULT_ACCESS_MODE],
|
||||
inheritedVolumeMode: DEFAULT_VOLUME_MODE,
|
||||
inheritedAccessModes: [DEFAULT_ACCESS_MODE],
|
||||
inheritedFromProvider: false,
|
||||
overridden: false,
|
||||
usedBy: [],
|
||||
_key: `stor-${ ds.id || ds.name }`,
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -461,7 +533,7 @@ const init = async() => {
|
||||
|
||||
if (!hasExistingStorageTargets) {
|
||||
if (props.existingStorageMap?.spec?.map) {
|
||||
applyStorageMapTargets(props.existingStorageMap.spec.map);
|
||||
applyStorageMapTargets(props.existingStorageMap.spec.map, { markOverridden: true });
|
||||
} else {
|
||||
applyDefaultStorageMap();
|
||||
}
|
||||
@@ -511,6 +583,9 @@ init();
|
||||
:placeholder="t('harvester.addons.vmMigration.configureMappings.storageMapping.placeholder')"
|
||||
:show-used-by="!useAllProviderData"
|
||||
:clearable="useAllProviderData"
|
||||
:show-volume-settings="true"
|
||||
:inherited-provider-name="inheritedProviderName"
|
||||
@edit-defaults="openStorageDefaults"
|
||||
>
|
||||
<template #source-detail="{ entry }">
|
||||
<span
|
||||
@@ -520,6 +595,19 @@ init();
|
||||
</template>
|
||||
</MappingColumn>
|
||||
</div>
|
||||
|
||||
<StorageDefaultsModal
|
||||
v-if="showStorageDefaultsModal && editingStorageEntry"
|
||||
:storage-class-name="editingStorageEntry.target"
|
||||
:provider-name="providerName"
|
||||
:show-inherited="!!inheritedProviderName"
|
||||
:volume-mode="editingStorageEntry.volumeMode"
|
||||
:access-modes="editingStorageEntry.accessModes"
|
||||
:inherited-volume-mode="editingStorageEntry.inheritedVolumeMode"
|
||||
:inherited-access-modes="editingStorageEntry.inheritedAccessModes"
|
||||
@apply="applyStorageDefaults"
|
||||
@close="closeStorageDefaults"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -42,6 +42,7 @@ const {
|
||||
username,
|
||||
password,
|
||||
skipTlsVerify,
|
||||
vddkInitImage,
|
||||
testPassed,
|
||||
testResult,
|
||||
testError,
|
||||
@@ -97,6 +98,7 @@ watch(selectedProvider, (val) => {
|
||||
username.value = '';
|
||||
password.value = '';
|
||||
skipTlsVerify.value = false;
|
||||
vddkInitImage.value = '';
|
||||
createdProvider.value = null;
|
||||
createdSecret.value = null;
|
||||
} else {
|
||||
@@ -107,6 +109,7 @@ watch(selectedProvider, (val) => {
|
||||
if (provider) {
|
||||
providerName.value = provider.metadata.name;
|
||||
url.value = provider.spec?.url || '';
|
||||
vddkInitImage.value = provider.spec?.settings?.vddkInitImage || '';
|
||||
|
||||
const secretRef = provider.spec?.secret;
|
||||
|
||||
@@ -239,6 +242,18 @@ const testConnection = async(buttonCb) => {
|
||||
if (props.editMode && createdProvider.value) {
|
||||
try {
|
||||
createdProvider.value.spec.url = url.value;
|
||||
|
||||
const vddkImage = vddkInitImage.value?.trim();
|
||||
|
||||
if (vddkImage) {
|
||||
createdProvider.value.spec.settings = {
|
||||
...(createdProvider.value.spec.settings || {}),
|
||||
vddkInitImage: vddkImage,
|
||||
};
|
||||
} else if (createdProvider.value.spec.settings) {
|
||||
delete createdProvider.value.spec.settings.vddkInitImage;
|
||||
}
|
||||
|
||||
await createdProvider.value.save();
|
||||
|
||||
const secretRef = createdProvider.value.spec?.secret;
|
||||
@@ -283,20 +298,28 @@ const testConnection = async(buttonCb) => {
|
||||
const namespace = FORKLIFT_NAMESPACE;
|
||||
const secretName = `${ providerName.value }-creds-${ randomStr(4).toLowerCase() }`;
|
||||
|
||||
const spec = {
|
||||
type: 'vsphere',
|
||||
url: url.value,
|
||||
secret: {
|
||||
name: secretName,
|
||||
namespace,
|
||||
},
|
||||
};
|
||||
|
||||
const vddkImage = vddkInitImage.value?.trim();
|
||||
|
||||
if (vddkImage) {
|
||||
spec.settings = { vddkInitImage: vddkImage };
|
||||
}
|
||||
|
||||
const provider = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_PROVIDER,
|
||||
metadata: {
|
||||
name: providerName.value,
|
||||
namespace,
|
||||
},
|
||||
spec: {
|
||||
type: 'vsphere',
|
||||
url: url.value,
|
||||
secret: {
|
||||
name: secretName,
|
||||
namespace,
|
||||
},
|
||||
}
|
||||
spec,
|
||||
});
|
||||
|
||||
await provider.save();
|
||||
@@ -420,17 +443,28 @@ defineExpose({ testConnection, clickTestButton });
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LabeledInput
|
||||
v-model:value="url"
|
||||
:label="t('harvester.addons.vmMigration.configureProvider.urlLabel')"
|
||||
:placeholder="t('harvester.addons.vmMigration.configureProvider.urlPlaceholder')"
|
||||
:disabled="isExistingProvider && !editMode"
|
||||
required
|
||||
/>
|
||||
<p class="text-deemphasized mt-5">
|
||||
{{ t('harvester.addons.vmMigration.configureProvider.urlHint') }}
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="url"
|
||||
:label="t('harvester.addons.vmMigration.configureProvider.urlLabel')"
|
||||
:placeholder="t('harvester.addons.vmMigration.configureProvider.urlPlaceholder')"
|
||||
:disabled="isExistingProvider && !editMode"
|
||||
required
|
||||
/>
|
||||
<p class="text-deemphasized mt-5">
|
||||
{{ t('harvester.addons.vmMigration.configureProvider.urlHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="vddkInitImage"
|
||||
:label="t('harvester.addons.vmMigration.configureProvider.vddkImageLabel')"
|
||||
:placeholder="t('harvester.addons.vmMigration.configureProvider.vddkImagePlaceholder')"
|
||||
:tooltip="t('harvester.addons.vmMigration.configureProvider.vddkImageTooltip')"
|
||||
:disabled="isExistingProvider && !editMode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -1,25 +1,33 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import { RcItemCard } from '@components/RcItemCard';
|
||||
import { useI18n } from '@shell/composables/useI18n';
|
||||
import { VOLUME_MODE } from '../../config/types';
|
||||
|
||||
const store = useStore();
|
||||
const { t } = useI18n(store);
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, default: '' },
|
||||
entries: { type: Array, default: () => [] },
|
||||
options: { type: Array, default: () => [] },
|
||||
placeholder: { type: String, default: '' },
|
||||
showUsedBy: { type: Boolean, default: false },
|
||||
clearable: { type: Boolean, default: false },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, default: '' },
|
||||
entries: { type: Array, default: () => [] },
|
||||
options: { type: Array, default: () => [] },
|
||||
placeholder: { type: String, default: '' },
|
||||
showUsedBy: { type: Boolean, default: false },
|
||||
clearable: { type: Boolean, default: false },
|
||||
// Storage-specific: show the volume/access mode defaults row with an Edit action.
|
||||
showVolumeSettings: { type: Boolean, default: false },
|
||||
// When set, the defaults row shows an "Inherited from provider" hint (migration plan wizard only).
|
||||
inheritedProviderName: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const selectOptions = computed(() => {
|
||||
if (!props.clearable) {
|
||||
const emit = defineEmits(['edit-defaults']);
|
||||
|
||||
// Only offer "Remove Map" for entries that already have a target selected;
|
||||
// entries without a selection just show the regular options.
|
||||
const optionsFor = (entry) => {
|
||||
if (!props.clearable || !entry.target) {
|
||||
return props.options;
|
||||
}
|
||||
|
||||
@@ -34,14 +42,16 @@ const selectOptions = computed(() => {
|
||||
disabled: true,
|
||||
kind: 'divider',
|
||||
},
|
||||
{
|
||||
label: `${ props.placeholder }:`,
|
||||
disabled: true,
|
||||
kind: 'title',
|
||||
},
|
||||
...props.options,
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
const formatModes = (entry) => {
|
||||
const volumeMode = entry.volumeMode || VOLUME_MODE.FILE_SYSTEM;
|
||||
const accessModes = (entry.accessModes || []).join(', ');
|
||||
|
||||
return t('harvester.addons.vmMigration.storageDefaults.summary', { volumeMode, accessModes });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -85,12 +95,35 @@ const selectOptions = computed(() => {
|
||||
<div class="mapping-target">
|
||||
<LabeledSelect
|
||||
v-model:value="entry.target"
|
||||
:options="selectOptions"
|
||||
:options="optionsFor(entry)"
|
||||
:placeholder="placeholder+'...'"
|
||||
:searchable="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showVolumeSettings && entry.target"
|
||||
class="storage-defaults-row"
|
||||
>
|
||||
<div class="storage-defaults">
|
||||
<div class="storage-defaults-info">
|
||||
<span class="storage-defaults-summary">{{ formatModes(entry) }}</span>
|
||||
<span
|
||||
v-if="inheritedProviderName && entry.inheritedFromProvider && !entry.overridden"
|
||||
class="text-deemphasized storage-defaults-inherited"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.storageDefaults.inherited', { provider: inheritedProviderName }) }}
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
role="button"
|
||||
class="storage-defaults-edit"
|
||||
@click.prevent="emit('edit-defaults', entry)"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.storageDefaults.edit') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showUsedBy && entry.usedBy && entry.usedBy.length">
|
||||
<span class="used-by">
|
||||
{{ t('harvester.addons.vmMigration.generic.usedBy') }} <b>{{ entry.usedBy.join(', ') }}</b>
|
||||
@@ -177,6 +210,41 @@ const selectOptions = computed(() => {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.storage-defaults-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.storage-defaults {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--body-bg);
|
||||
|
||||
.storage-defaults-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.storage-defaults-summary {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.storage-defaults-inherited {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.storage-defaults-edit {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light-gray {
|
||||
background-color: var(--category-active) !important;
|
||||
border: 0;
|
||||
|
||||
@@ -2,11 +2,14 @@
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import Loading from '@shell/components/Loading';
|
||||
import SortableTable from '@shell/components/SortableTable';
|
||||
import { Banner } from '@components/Banner';
|
||||
import { RcItemCard } from '@components/RcItemCard';
|
||||
import { BadgeState } from '@components/BadgeState';
|
||||
import { RcDropdown, RcDropdownItem, RcDropdownTrigger } from '@components/RcDropdown';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import MappingsCell from '../MappingsCell';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import { useI18n } from '@shell/composables/useI18n';
|
||||
import { NAMESPACE } from '@shell/config/types';
|
||||
import { HCI } from '../../types';
|
||||
import { FORKLIFT_NAMESPACE } from '../../config/harvester-map';
|
||||
import {
|
||||
@@ -21,29 +24,70 @@ const props = defineProps({
|
||||
stepData: { type: Object, required: true },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['ready']);
|
||||
const emit = defineEmits(['ready', 'edit-selection', 'edit-mappings', 'remove-vm']);
|
||||
|
||||
const store = useStore();
|
||||
const { t } = useI18n(store);
|
||||
|
||||
const vms = ref([]);
|
||||
const vms = computed(() => props.selectedVms);
|
||||
const networkMappings = ref([]);
|
||||
const storageMappings = ref([]);
|
||||
const planName = ref('');
|
||||
const targetNamespace = ref('');
|
||||
const namespaceOptions = ref([]);
|
||||
const existingProviderNames = ref([]);
|
||||
const existingPlanNames = ref([]);
|
||||
const errors = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
// Restore persisted state
|
||||
planName.value = props.stepData.planName;
|
||||
targetNamespace.value = props.stepData.targetNamespace || '';
|
||||
|
||||
const NAMESPACE = FORKLIFT_NAMESPACE;
|
||||
const TARGET_NAMESPACE = 'default';
|
||||
const NS = FORKLIFT_NAMESPACE;
|
||||
|
||||
const nameConflictError = computed(() => {
|
||||
const name = (planName.value || '').trim();
|
||||
|
||||
if (!name) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (existingProviderNames.value.includes(name)) {
|
||||
return t('harvester.addons.vmMigration.reviewMigration.planNameProviderConflict', { name });
|
||||
}
|
||||
|
||||
if (existingPlanNames.value.includes(name)) {
|
||||
return t('harvester.addons.vmMigration.reviewMigration.planNamePlanConflict', { name });
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
|
||||
watch(planName, (val) => {
|
||||
props.stepData.planName = val;
|
||||
emit('ready', !!val);
|
||||
}, { immediate: true });
|
||||
|
||||
watch(targetNamespace, (val) => {
|
||||
props.stepData.targetNamespace = val;
|
||||
});
|
||||
|
||||
watch([planName, targetNamespace, nameConflictError], () => {
|
||||
emit('ready', !!planName.value && !!targetNamespace.value && !nameConflictError.value);
|
||||
}, { immediate: true });
|
||||
|
||||
const formatNetworkTarget = (target = '') => {
|
||||
if (target === 'pod') {
|
||||
return t('harvester.addons.vmMigration.configureMappings.networkMapping.options.podNetworking');
|
||||
}
|
||||
|
||||
if (target === 'ignored') {
|
||||
return t('harvester.addons.vmMigration.generic.ignored');
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
const totalVCpu = computed(() => vms.value.reduce((sum, vm) => sum + (vm.cpuCount || vm.numCPU || 0), 0));
|
||||
|
||||
const totalMemoryGB = computed(() => {
|
||||
@@ -64,7 +108,7 @@ const totalStorageGB = computed(() => {
|
||||
return bytesToGB(totalBytes);
|
||||
});
|
||||
|
||||
const vmCards = computed(() => {
|
||||
const vmRows = computed(() => {
|
||||
return vms.value.map((vm) => {
|
||||
const cpus = vm.cpuCount || vm.numCPU || 0;
|
||||
const memMB = vm.memoryMB || vm.memory || 0;
|
||||
@@ -78,23 +122,93 @@ const vmCards = computed(() => {
|
||||
|
||||
const diskDisplay = totalDiskBytes ? t('harvester.addons.vmMigration.generic.memoryGb', { value: bytesToGB(totalDiskBytes) }) : '-';
|
||||
const os = vm.guestName || vm.guestOS || vm.os || '-';
|
||||
const rawPowerState = vm.powerState || vm.status?.phase || '-';
|
||||
const powerState = rawPowerState.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase());
|
||||
const powerStateClass = powerState.toLowerCase().includes('on') || powerState.toLowerCase().includes('running') ? 'power-on' : 'power-off';
|
||||
|
||||
const vmNetworkMappings = networkMappings.value.filter((m) => m.usedBy && m.usedBy.includes(vm.name || vm.id));
|
||||
const vmStorageMappings = storageMappings.value.filter((m) => m.usedBy && m.usedBy.includes(vm.name || vm.id));
|
||||
|
||||
const networkMappingSort = vmNetworkMappings.map((m) => `${ m.source } ${ formatNetworkTarget(m.target) }`).join(', ');
|
||||
const storageMappingSort = vmStorageMappings.map((m) => `${ m.source } ${ m.target }`).join(', ');
|
||||
|
||||
return {
|
||||
_key: vm.id || vm.vmId || vm.metadata?.name,
|
||||
id: vm.id,
|
||||
name: vm.name || vm.id,
|
||||
identifier: vm.id || vm.vmId || vm.metadata?.name || '-',
|
||||
os,
|
||||
cpus,
|
||||
memGB,
|
||||
diskDisplay,
|
||||
resources: t('harvester.addons.vmMigration.generic.vCpu', { count: cpus }),
|
||||
resourcesSub: `${ memGB } • ${ diskDisplay }`,
|
||||
powerState,
|
||||
powerStateClass,
|
||||
networkMappings: vmNetworkMappings,
|
||||
storageMappings: vmStorageMappings,
|
||||
networkMapping: networkMappingSort,
|
||||
storageMapping: storageMappingSort,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const vmHeaders = [
|
||||
{
|
||||
name: 'vmName',
|
||||
labelKey: 'harvester.addons.vmMigration.reviewMigration.columns.vmName',
|
||||
value: 'name',
|
||||
sort: ['name'],
|
||||
subLabel: t('harvester.addons.vmMigration.generic.identifier'),
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
name: 'os',
|
||||
labelKey: 'harvester.addons.vmMigration.reviewMigration.columns.os',
|
||||
value: 'os',
|
||||
sort: ['os'],
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
name: 'resources',
|
||||
labelKey: 'harvester.addons.vmMigration.reviewMigration.columns.resources',
|
||||
value: 'resources',
|
||||
sort: false,
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
name: 'powerState',
|
||||
labelKey: 'harvester.addons.vmMigration.reviewMigration.columns.powerState',
|
||||
value: 'powerState',
|
||||
sort: ['powerState'],
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
name: 'networkMapping',
|
||||
labelKey: 'harvester.addons.vmMigration.reviewMigration.columns.networkMapping',
|
||||
value: 'networkMapping',
|
||||
sort: ['networkMapping'],
|
||||
subLabel: t('harvester.addons.vmMigration.reviewMigration.columns.sourceTarget'),
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
name: 'storageMapping',
|
||||
labelKey: 'harvester.addons.vmMigration.reviewMigration.columns.storageMapping',
|
||||
value: 'storageMapping',
|
||||
sort: ['storageMapping'],
|
||||
subLabel: t('harvester.addons.vmMigration.reviewMigration.columns.sourceTarget'),
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: ' ',
|
||||
align: 'right',
|
||||
sort: false,
|
||||
width: 40,
|
||||
},
|
||||
];
|
||||
|
||||
const onEditSelection = () => emit('edit-selection');
|
||||
const onEditMappings = () => emit('edit-mappings');
|
||||
const onRemoveVm = (id) => emit('remove-vm', id);
|
||||
|
||||
const startMigrationAction = async() => {
|
||||
const inStore = store.getters['currentProduct'].inStore;
|
||||
|
||||
@@ -103,13 +217,13 @@ const startMigrationAction = async() => {
|
||||
apiVersion: FORKLIFT_API_VERSION,
|
||||
kind: 'Provider',
|
||||
name: props.providerName,
|
||||
namespace: NAMESPACE,
|
||||
namespace: NS,
|
||||
},
|
||||
destination: {
|
||||
apiVersion: FORKLIFT_API_VERSION,
|
||||
kind: 'Provider',
|
||||
name: 'host',
|
||||
namespace: NAMESPACE,
|
||||
namespace: NS,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -118,15 +232,15 @@ const startMigrationAction = async() => {
|
||||
|
||||
const networkMap = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_NETWORK_MAP,
|
||||
metadata: { name: networkMapName, namespace: NAMESPACE },
|
||||
spec: { map: buildNetworkMapEntries(props.mappingEntries?.networkEntries || [], NAMESPACE), provider: providerRef },
|
||||
metadata: { name: networkMapName, namespace: NS },
|
||||
spec: { map: buildNetworkMapEntries(props.mappingEntries?.networkEntries || [], NS), provider: providerRef },
|
||||
});
|
||||
|
||||
await networkMap.save();
|
||||
|
||||
const storageMap = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_STORAGE_MAP,
|
||||
metadata: { name: storageMapName, namespace: NAMESPACE },
|
||||
metadata: { name: storageMapName, namespace: NS },
|
||||
spec: { map: buildStorageMapEntries(props.mappingEntries?.storageEntries || []), provider: providerRef },
|
||||
});
|
||||
|
||||
@@ -134,7 +248,7 @@ const startMigrationAction = async() => {
|
||||
|
||||
const plan = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_PLAN,
|
||||
metadata: { name: planName.value, namespace: NAMESPACE },
|
||||
metadata: { name: planName.value, namespace: NS },
|
||||
spec: {
|
||||
provider: providerRef,
|
||||
map: {
|
||||
@@ -142,16 +256,16 @@ const startMigrationAction = async() => {
|
||||
apiVersion: FORKLIFT_API_VERSION,
|
||||
kind: 'NetworkMap',
|
||||
name: networkMapName,
|
||||
namespace: NAMESPACE,
|
||||
namespace: NS,
|
||||
},
|
||||
storage: {
|
||||
apiVersion: FORKLIFT_API_VERSION,
|
||||
kind: 'StorageMap',
|
||||
name: storageMapName,
|
||||
namespace: NAMESPACE,
|
||||
namespace: NS,
|
||||
},
|
||||
},
|
||||
targetNamespace: TARGET_NAMESPACE,
|
||||
targetNamespace: targetNamespace.value,
|
||||
vms: vms.value.map((vm) => ({ id: vm.id, name: vm.name || vm.id })),
|
||||
warm: false,
|
||||
},
|
||||
@@ -159,26 +273,37 @@ const startMigrationAction = async() => {
|
||||
|
||||
await plan.save();
|
||||
|
||||
const planOwnerRef = {
|
||||
apiVersion: FORKLIFT_API_VERSION,
|
||||
kind: 'Plan',
|
||||
name: plan.metadata.name,
|
||||
uid: plan.metadata.uid,
|
||||
blockOwnerDeletion: true,
|
||||
};
|
||||
|
||||
networkMap.metadata.ownerReferences = [planOwnerRef];
|
||||
await networkMap.save();
|
||||
storageMap.metadata.ownerReferences = [planOwnerRef];
|
||||
await storageMap.save();
|
||||
|
||||
// Kick off the first migration through the model so the Migration payload
|
||||
// lives in a single place (also reused by the dashboard start/restart action).
|
||||
await plan.startMigration();
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
vms.value = props.selectedVms;
|
||||
const init = async() => {
|
||||
const inStore = store.getters['currentProduct'].inStore;
|
||||
|
||||
try {
|
||||
const namespaces = await store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE });
|
||||
|
||||
namespaceOptions.value = namespaces.filter((ns) => !ns.isSystem).map((ns) => ns.metadata.name).sort().map((name) => ({ label: name, value: name }));
|
||||
} catch (e) {
|
||||
namespaceOptions.value = [];
|
||||
}
|
||||
|
||||
try {
|
||||
await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
|
||||
} catch (e) {}
|
||||
|
||||
existingProviderNames.value = (store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [])
|
||||
.map((p) => p.metadata?.name)
|
||||
.filter(Boolean);
|
||||
|
||||
try {
|
||||
await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PLAN });
|
||||
} catch (e) {}
|
||||
|
||||
existingPlanNames.value = (store.getters[`${ inStore }/all`](HCI.FORKLIFT_PLAN) || [])
|
||||
.map((p) => p.metadata?.name)
|
||||
.filter(Boolean);
|
||||
|
||||
if (props.mappingEntries) {
|
||||
networkMappings.value = (props.mappingEntries.networkEntries || []).map((entry) => ({
|
||||
@@ -211,116 +336,178 @@ defineExpose({ startMigration: startMigrationAction });
|
||||
<div
|
||||
class="review-migration-content"
|
||||
>
|
||||
<Banner
|
||||
v-if="nameConflictError"
|
||||
color="error"
|
||||
:label="nameConflictError"
|
||||
/>
|
||||
|
||||
<!-- Migration Details Summary -->
|
||||
<div class="migration-details">
|
||||
<h3 class="section-title m-0">
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.migrationDetails') }}
|
||||
</h3>
|
||||
<div class="span-9">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title m-0">
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.migrationDetails') }}
|
||||
</h3>
|
||||
<span class="section-description text-deemphasized">
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.migrationDetailsDescription') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="name-row">
|
||||
<LabeledInput
|
||||
v-model:value="planName"
|
||||
class="name-input"
|
||||
:label="t('harvester.addons.vmMigration.reviewMigration.planName')"
|
||||
:placeholder="t('harvester.addons.vmMigration.reviewMigration.planNamePlaceholder')"
|
||||
required
|
||||
/>
|
||||
<LabeledSelect
|
||||
v-model:value="targetNamespace"
|
||||
class="namespace-select"
|
||||
:label="t('harvester.addons.vmMigration.reviewMigration.targetNamespace')"
|
||||
:placeholder="t('harvester.addons.vmMigration.reviewMigration.targetNamespacePlaceholder')"
|
||||
:options="namespaceOptions"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="details-grid span-9">
|
||||
<div class="detail-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.totalVms') }}</span>
|
||||
<span class="detail-value detail-value-large">{{ vms.length }}</span>
|
||||
</div>
|
||||
|
||||
<div class="summary-row">
|
||||
<div class="migration-mode-column">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.migrationMode') }}</span>
|
||||
<span class="cold-migration-badge">{{ t('harvester.addons.vmMigration.reviewMigration.coldMigration') }}</span>
|
||||
<span class="text-deemphasized">{{ t('harvester.addons.vmMigration.reviewMigration.coldMigrationDescription') }}</span>
|
||||
<span class="text-deemphasized">{{ t('harvester.addons.vmMigration.reviewMigration.coldMigrationHint') }}</span>
|
||||
</div>
|
||||
<div class="detail-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.source') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-value">{{ providerName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.targetNamespace') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-value">{{ TARGET_NAMESPACE }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.vcpu') }}</span>
|
||||
<span class="detail-value">{{ totalVCpu }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.memory') }}</span>
|
||||
<span class="detail-value">{{ t('harvester.addons.vmMigration.generic.memoryGb', { value: totalMemoryGB }) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.storage') }}</span>
|
||||
<span class="detail-value">{{ t('harvester.addons.vmMigration.generic.memoryGb', { value: totalStorageGB }) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-column grid-column-2">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.migrationMode') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-value">
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.coldMigration') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-column">
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.provider') }}</span>
|
||||
<span class="detail-value">{{ providerName }}</span>
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.totalVms') }}</span>
|
||||
<span class="detail-value">{{ vms.length }}</span>
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.vcpu') }}</span>
|
||||
<span class="detail-value">{{ totalVCpu }}</span>
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.memory') }}</span>
|
||||
<span class="detail-value">{{ t('harvester.addons.vmMigration.generic.memoryGb', { value: totalMemoryGB }) }}</span>
|
||||
<span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.storage') }}</span>
|
||||
<span class="detail-value">{{ t('harvester.addons.vmMigration.generic.memoryGb', { value: totalStorageGB }) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Virtual Machines -->
|
||||
<div class="vm-section">
|
||||
<h3 class="section-title m-0">
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.virtualMachines') }} ({{ vms.length }})
|
||||
</h3>
|
||||
|
||||
<div class="vm-cards-grid">
|
||||
<RcItemCard
|
||||
v-for="vm in vmCards"
|
||||
:id="vm.id"
|
||||
:key="vm.id"
|
||||
:variant="'small'"
|
||||
:header="{ title: { text: vm.name } }"
|
||||
>
|
||||
<template #item-card-content>
|
||||
<div class="vm-card-content">
|
||||
<div class="vm-card-specs">
|
||||
<span class="vm-os text-deemphasized">{{ vm.os }}</span>
|
||||
<span class="vm-resources">
|
||||
<i
|
||||
class="icon icon-disk"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ t('harvester.addons.vmMigration.generic.vCpu', { count: vm.cpus }) }} • {{ vm.memGB }} • {{ vm.diskDisplay }}
|
||||
</span>
|
||||
</div>
|
||||
<MappingsCell
|
||||
:network-entries="vm.networkMappings.map(m => `${m.source} → ${m.target}`)"
|
||||
:storage-entries="vm.storageMappings.map(m => `${m.source} → ${m.target}`)"
|
||||
/>
|
||||
<SortableTable
|
||||
class="vm-sortable-table"
|
||||
:rows="vmRows"
|
||||
:headers="vmHeaders"
|
||||
:search="false"
|
||||
:table-actions="false"
|
||||
:row-actions="false"
|
||||
:groupable="false"
|
||||
:paging="true"
|
||||
key-field="_key"
|
||||
>
|
||||
<template #header-left>
|
||||
<h4 class="section-title m-0">
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.virtualMachines') }} ({{ vms.length }})
|
||||
</h4>
|
||||
</template>
|
||||
<template #header-right>
|
||||
<a
|
||||
href="#"
|
||||
class="edit-selection-link"
|
||||
@click.prevent="onEditSelection"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.editSelection') }}
|
||||
</a>
|
||||
</template>
|
||||
<template #cell:vmName="{ row }">
|
||||
<div class="vm-name-cell">
|
||||
<span class="vm-name">{{ row.name }}</span>
|
||||
<span class="vm-id text-deemphasized">{{ row.identifier }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell:resources="{ row }">
|
||||
<span>{{ row.resources }}</span><br>
|
||||
<span class="text-deemphasized">{{ row.resourcesSub }}</span>
|
||||
</template>
|
||||
<template #cell:powerState="{ row }">
|
||||
<BadgeState
|
||||
:label="row.powerState"
|
||||
:color="row.powerStateClass === 'power-on' ? 'bg-warning' : 'bg-darker'"
|
||||
/>
|
||||
</template>
|
||||
<template #cell:networkMapping="{ row }">
|
||||
<template v-if="row.networkMappings.length">
|
||||
<div
|
||||
v-for="(m, i) in row.networkMappings"
|
||||
:key="'net-' + i"
|
||||
class="mapping-cell"
|
||||
>
|
||||
<span class="mapping-source">{{ m.source }}</span>
|
||||
<span class="mapping-target text-deemphasized">→ {{ formatNetworkTarget(m.target) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</RcItemCard>
|
||||
</div>
|
||||
<span
|
||||
v-else
|
||||
class="text-deemphasized"
|
||||
>-</span>
|
||||
</template>
|
||||
<template #cell:storageMapping="{ row }">
|
||||
<template v-if="row.storageMappings.length">
|
||||
<div
|
||||
v-for="(m, i) in row.storageMappings"
|
||||
:key="'stor-' + i"
|
||||
class="mapping-cell"
|
||||
>
|
||||
<span class="mapping-source">{{ m.source }}</span>
|
||||
<span class="mapping-target text-deemphasized">→ {{ m.target }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span
|
||||
v-else
|
||||
class="text-deemphasized"
|
||||
>-</span>
|
||||
</template>
|
||||
<template #cell:actions="{ row }">
|
||||
<rc-dropdown :aria-label="t('harvester.addons.vmMigration.reviewMigration.actions.menuLabel')">
|
||||
<rc-dropdown-trigger
|
||||
variant="ghost"
|
||||
:aria-label="t('harvester.addons.vmMigration.reviewMigration.actions.menuLabel')"
|
||||
>
|
||||
<i class="icon icon-actions" />
|
||||
</rc-dropdown-trigger>
|
||||
<template #dropdownCollection>
|
||||
<rc-dropdown-item @click="onEditMappings">
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.actions.editMappings') }}
|
||||
</rc-dropdown-item>
|
||||
<rc-dropdown-item
|
||||
class="text-error"
|
||||
@click="onRemoveVm(row.id)"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.actions.removeFromPlan') }}
|
||||
</rc-dropdown-item>
|
||||
</template>
|
||||
</rc-dropdown>
|
||||
</template>
|
||||
<template #no-rows>
|
||||
<tr class="no-rows">
|
||||
<td
|
||||
:colspan="vmHeaders.length"
|
||||
class="text-center"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.noVmSelected') }}
|
||||
<a
|
||||
href="#"
|
||||
class="edit-selection-link"
|
||||
@click.prevent="onEditSelection"
|
||||
>{{ t('harvester.addons.vmMigration.reviewMigration.noVmSelectedLink') }}</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</SortableTable>
|
||||
</div>
|
||||
|
||||
<!-- Cold Migration Warning -->
|
||||
<Banner
|
||||
color="warning"
|
||||
class="m-0"
|
||||
>
|
||||
<div>
|
||||
<span class="banner-title">{{ t('harvester.addons.vmMigration.reviewMigration.warningTitle') }}</span><br>
|
||||
{{ t('harvester.addons.vmMigration.reviewMigration.warningMessage') }}
|
||||
</div>
|
||||
</Banner>
|
||||
|
||||
<!-- Error banner -->
|
||||
<Banner
|
||||
v-for="(err, i) in errors"
|
||||
@@ -347,74 +534,122 @@ defineExpose({ startMigration: startMigrationAction });
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
.name-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(230px, 1fr) 1fr 1fr;
|
||||
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 12px clamp(64px, 8vw, 128px);
|
||||
line-height: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px clamp(12px, 1vw, 96px);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.detail-column {
|
||||
.summary-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px clamp(12px, 1vw, 96px);
|
||||
line-height: 20px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&.grid-column-2 {
|
||||
grid-column: span 2;
|
||||
.section-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
.migration-mode-column {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
.detail-label {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
.cold-migration-badge {
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
opacity: 0.8;
|
||||
font-weight: 600;
|
||||
background: rgba(224, 191, 90, 0.16);
|
||||
color: #E0BF5A;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
|
||||
&.detail-value-large {
|
||||
font-size: 24px;
|
||||
.theme-light & {
|
||||
background: rgba(168, 128, 26, 0.16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vm-cards-grid {
|
||||
.stats-column {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
gap: 16px;
|
||||
grid-template-columns: auto auto;
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
column-gap: clamp(24px, 4vw, 64px);
|
||||
row-gap: 8px;
|
||||
}
|
||||
|
||||
.vm-card-content {
|
||||
.detail-label {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.edit-selection-link {
|
||||
cursor: pointer;
|
||||
color: var(--link);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vm-sortable-table {
|
||||
:deep(.fixed-header-actions) {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
:deep(table) {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
:deep(td) {
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(th:first-child),
|
||||
:deep(td:first-child) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.vm-name-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
line-height: 20px;
|
||||
|
||||
.vm-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vm-id {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vm-card-specs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
|
||||
.vm-os {
|
||||
font-size: 14px;
|
||||
.mapping-cell {
|
||||
.mapping-target {
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.vm-resources {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.mapping-cell + .mapping-cell {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
|
||||
@@ -25,8 +25,9 @@ const { discoveredVMs, selectedVMIds, tableRows } = toRefs(props.stepData);
|
||||
|
||||
const selectedVMs = ref([]);
|
||||
const loading = ref(true);
|
||||
const networkMap = ref({});
|
||||
const datastoreMap = ref({});
|
||||
// Restored from stepData so friendly names survive step navigation / remount.
|
||||
const networkMap = ref(props.stepData.networkMap || {});
|
||||
const datastoreMap = ref(props.stepData.datastoreMap || {});
|
||||
const sortableTableRef = ref(null);
|
||||
const allVMsSelected = ref(false);
|
||||
const errors = ref([]);
|
||||
@@ -94,7 +95,7 @@ const showSelectAllBanner = computed(() => {
|
||||
|
||||
const theadElement = computed(() => sortableTableRef.value?.$el?.querySelector('thead'));
|
||||
|
||||
const headers = [
|
||||
const headers = ref([
|
||||
{
|
||||
name: 'vmName',
|
||||
labelKey: 'harvester.addons.vmMigration.selectVms.columns.vmName',
|
||||
@@ -139,7 +140,7 @@ const headers = [
|
||||
subLabel: t('harvester.addons.vmMigration.generic.identifier'),
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
const buildTableRows = () => {
|
||||
return discoveredVMs.value.map((vm) => {
|
||||
@@ -190,6 +191,7 @@ const buildTableRows = () => {
|
||||
return {
|
||||
_original: vm,
|
||||
_key: vm.id || vm.vmId || vm.metadata?.name,
|
||||
selectedSort: selectedVMIds.value.has(vm.id) ? 0 : 1,
|
||||
vmName: vm.name || vm.metadata?.name || '-',
|
||||
vmId: vm.id || vm.vmId || vm.metadata?.name || '-',
|
||||
os: vm.guestName || vm.guestOS || vm.os || '-',
|
||||
@@ -239,6 +241,10 @@ const clearSelection = () => {
|
||||
|
||||
if (table) {
|
||||
table.clearSelection();
|
||||
|
||||
if (typeof table.setPage === 'function') {
|
||||
table.setPage(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -249,6 +255,49 @@ const selectAllVMs = () => {
|
||||
selectedVMs.value = discoveredVMs.value.slice();
|
||||
};
|
||||
|
||||
// Moves currently-selected VMs to the first page(s) and re-checks them.
|
||||
const sortSelectedToFront = () => {
|
||||
if (selectedVMIds.value.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
tableRows.value.forEach((row) => {
|
||||
row.selectedSort = selectedVMIds.value.has(row._original?.id) ? 0 : 1;
|
||||
});
|
||||
|
||||
headers.value = headers.value.map((h) => (
|
||||
h.name === 'vmName' ? { ...h, sort: ['selectedSort', 'vmName'] } : h
|
||||
));
|
||||
|
||||
skipNextSelectionEvent = true;
|
||||
|
||||
nextTick(() => {
|
||||
const table = sortableTableRef.value;
|
||||
|
||||
if (!table) {
|
||||
skipNextSelectionEvent = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof table.changeSort === 'function') {
|
||||
table.changeSort('vmName', false);
|
||||
} else if (typeof table.setPage === 'function') {
|
||||
table.setPage(1);
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
const rowsToReselect = (table.pagedRows || []).filter((row) => selectedVMIds.value.has(row._original?.id));
|
||||
|
||||
if (rowsToReselect.length > 0) {
|
||||
table.update(rowsToReselect, []);
|
||||
}
|
||||
|
||||
skipNextSelectionEvent = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => sortableTableRef.value?.page,
|
||||
() => {
|
||||
@@ -318,6 +367,9 @@ const fetchVMs = async() => {
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
props.stepData.networkMap = networkMap.value;
|
||||
props.stepData.datastoreMap = datastoreMap.value;
|
||||
|
||||
lastFetchedAt.value = Date.now();
|
||||
tableRows.value = buildTableRows();
|
||||
};
|
||||
@@ -374,6 +426,10 @@ const init = async() => {
|
||||
tableRows.value = buildTableRows();
|
||||
loading.value = false;
|
||||
|
||||
// Returning to the step with an existing selection: bring selected VMs forward and re-check them.
|
||||
await nextTick();
|
||||
sortSelectedToFront();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -441,7 +497,6 @@ init();
|
||||
:row-actions="false"
|
||||
:groupable="false"
|
||||
:paging="true"
|
||||
:rows-per-page="20"
|
||||
key-field="_key"
|
||||
@selection="onSelect"
|
||||
>
|
||||
@@ -450,7 +505,20 @@ init();
|
||||
<h3 class="m-0">
|
||||
{{ t('harvester.addons.vmMigration.selectVms.availableVms') }}
|
||||
</h3>
|
||||
<span class="text-deemphasized">{{ selectedCount }} {{ t('harvester.addons.vmMigration.selectVms.selected') }}</span>
|
||||
<span class="selected-actions">
|
||||
<span class="text-deemphasized">
|
||||
{{ selectedCount }} {{ t('harvester.addons.vmMigration.selectVms.selected') }}
|
||||
</span>
|
||||
<template v-if="selectedCount > 0">
|
||||
<span class="text-deemphasized">|</span>
|
||||
<a
|
||||
role="button"
|
||||
@click.prevent="clearSelection"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.selectVms.clearAll') }}
|
||||
</a>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell:vmName="{ row }">
|
||||
@@ -466,7 +534,7 @@ init();
|
||||
<template #cell:powerState="{ row }">
|
||||
<BadgeState
|
||||
:label="row.powerState"
|
||||
:color="row.powerStateClass === 'power-on' ? 'bg-warning' : 'bg-darker'"
|
||||
:color="row.powerStateClass === 'power-on' ? 'bg-success' : 'bg-darker'"
|
||||
/>
|
||||
</template>
|
||||
<template #cell:network="{ row }">
|
||||
@@ -533,6 +601,23 @@ init();
|
||||
.text-deemphasized {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.selected-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
color: var(--muted);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vm-name-cell {
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { Card } from '@components/Card';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import AppModal from '@shell/components/AppModal';
|
||||
import { useI18n } from '@shell/composables/useI18n';
|
||||
import { VOLUME_MODE, ACCESS_MODE } from '../../config/types';
|
||||
|
||||
const VOLUME_MODE_OPTIONS = [VOLUME_MODE.FILE_SYSTEM, VOLUME_MODE.BLOCK];
|
||||
const {
|
||||
READ_WRITE_ONCE = 'ReadWriteOnce',
|
||||
READ_ONLY_MANY = 'ReadOnlyMany',
|
||||
READ_WRITE_MANY = 'ReadWriteMany',
|
||||
READ_WRITE_ONCE_POD = 'ReadWriteOncePod'
|
||||
} = ACCESS_MODE || {};
|
||||
const ACCESS_MODE_OPTIONS = [READ_WRITE_ONCE, READ_WRITE_MANY, READ_ONLY_MANY, READ_WRITE_ONCE_POD];
|
||||
|
||||
const props = defineProps({
|
||||
storageClassName: { type: String, default: '' },
|
||||
providerName: { type: String, default: '' },
|
||||
showInherited: { type: Boolean, default: false },
|
||||
volumeMode: { type: String, default: VOLUME_MODE.FILE_SYSTEM },
|
||||
accessModes: { type: Array, default: () => ['ReadWriteMany'] },
|
||||
inheritedVolumeMode: { type: String, default: VOLUME_MODE.FILE_SYSTEM },
|
||||
inheritedAccessModes: { type: Array, default: () => ['ReadWriteMany'] },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['apply', 'close']);
|
||||
|
||||
const store = useStore();
|
||||
const { t } = useI18n(store);
|
||||
|
||||
const localVolumeMode = ref(props.volumeMode || VOLUME_MODE.FILE_SYSTEM);
|
||||
const localAccessMode = ref(props.accessModes?.[0] || READ_WRITE_MANY);
|
||||
|
||||
const volumeModeOptions = VOLUME_MODE_OPTIONS.map((value) => ({ label: value, value }));
|
||||
const accessModeOptions = ACCESS_MODE_OPTIONS.map((value) => ({ label: value, value }));
|
||||
|
||||
const apply = () => {
|
||||
emit('apply', {
|
||||
volumeMode: localVolumeMode.value,
|
||||
accessModes: [localAccessMode.value],
|
||||
});
|
||||
emit('close');
|
||||
};
|
||||
|
||||
// Repopulate the dropdowns with the provider default values; the user then applies.
|
||||
const reset = () => {
|
||||
localVolumeMode.value = props.inheritedVolumeMode || VOLUME_MODE.FILE_SYSTEM;
|
||||
localAccessMode.value = props.inheritedAccessModes?.[0] || READ_WRITE_MANY;
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<app-modal
|
||||
class="storage-defaults-modal"
|
||||
name="storageDefaultsDialog"
|
||||
:width="620"
|
||||
height="auto"
|
||||
:click-to-close="false"
|
||||
@close="cancel"
|
||||
>
|
||||
<Card
|
||||
class="storage-defaults-card"
|
||||
:show-highlight-border="false"
|
||||
>
|
||||
<template #title>
|
||||
<h4 class="text-default-text">
|
||||
{{ t('harvester.addons.vmMigration.storageDefaults.title', { name: storageClassName }) }}
|
||||
</h4>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<p class="text-deemphasized description">
|
||||
<template v-if="showInherited">
|
||||
{{ t('harvester.addons.vmMigration.storageDefaults.descriptionInherited', { name: storageClassName, provider: providerName }) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('harvester.addons.vmMigration.storageDefaults.description', { name: storageClassName }) }}
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<div class="settings-box">
|
||||
<LabeledSelect
|
||||
v-model:value="localVolumeMode"
|
||||
class="volume-mode"
|
||||
:label="t('harvester.addons.vmMigration.storageDefaults.volumeMode')"
|
||||
:options="volumeModeOptions"
|
||||
:searchable="false"
|
||||
:clearable="false"
|
||||
/>
|
||||
|
||||
<LabeledSelect
|
||||
v-model:value="localAccessMode"
|
||||
class="access-mode"
|
||||
:label="t('harvester.addons.vmMigration.storageDefaults.accessMode')"
|
||||
:options="accessModeOptions"
|
||||
:searchable="false"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<div class="buttons">
|
||||
<button
|
||||
class="btn role-secondary"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.storageDefaults.cancel') }}
|
||||
</button>
|
||||
<div class="right-buttons">
|
||||
<button
|
||||
v-if="showInherited"
|
||||
class="btn role-secondary mr-10"
|
||||
@click="reset"
|
||||
>
|
||||
{{ t('harvester.addons.vmMigration.storageDefaults.resetToProviderDefault') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn role-primary"
|
||||
:disabled="!localAccessMode"
|
||||
@click="apply"
|
||||
>
|
||||
{{ showInherited ? t('harvester.addons.vmMigration.storageDefaults.applyOverride') : t('harvester.addons.vmMigration.storageDefaults.apply') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</app-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.storage-defaults-modal {
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
.storage-defaults-card {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.settings-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--category-active);
|
||||
}
|
||||
|
||||
.volume-mode {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.access-mode {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.right-buttons {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -77,6 +77,10 @@ const FEATURE_FLAGS = {
|
||||
'staticIPForVM',
|
||||
'fsFreezeDeadline',
|
||||
],
|
||||
'v1.9.1': [
|
||||
'lvmDmThinOnly',
|
||||
],
|
||||
'v1.10.0': [],
|
||||
};
|
||||
|
||||
const generateFeatureFlags = () => {
|
||||
|
||||
@@ -57,6 +57,8 @@ import {
|
||||
} from './table-headers';
|
||||
import { ADD_ONS } from './harvester-map';
|
||||
import { registerAddonSideNav } from '../utils/dynamic-nav';
|
||||
import { setVendor } from '@shell/config/private-label';
|
||||
import { createCssVars } from '@shell/utils/color';
|
||||
|
||||
const TEMPLATE = HCI.VM_VERSION;
|
||||
const MONITORING_GROUP = 'Monitoring & Logging::Monitoring';
|
||||
@@ -109,15 +111,51 @@ export function init($plugin, store) {
|
||||
}
|
||||
};
|
||||
|
||||
store.dispatch('setIsSingleProduct', {
|
||||
productName: PRODUCT_NAME,
|
||||
logo: require(`@shell/assets/images/providers/harvester.svg`),
|
||||
productNameKey: 'harvester.productLabel',
|
||||
getVersionInfo: (store) => store.getters[`${ PRODUCT_NAME }/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
|
||||
afterLoginRoute: home,
|
||||
logoRoute: home,
|
||||
supportCustomLogo: true
|
||||
});
|
||||
store.watch(
|
||||
(_state, getters) => JSON.stringify([
|
||||
!!getters['harvester-common/isHarvesterPrime'],
|
||||
getters['prefs/theme'] === 'dark',
|
||||
getters['harvester-common/privateLabel']
|
||||
]),
|
||||
(value) => {
|
||||
const [isHarvesterPrime, isDark, privateLabel] = JSON.parse(value);
|
||||
const primeLogo = isDark ? require('../assets/images/dark/suse-virtualization.svg') : require('../assets/images/suse-virtualization.svg');
|
||||
|
||||
setVendor(privateLabel || '');
|
||||
|
||||
let primaryColorStyle = document.getElementById('harvester-prime-primary-color');
|
||||
|
||||
// set harvester prime primary color style to #4dd192 (Cyan Green)
|
||||
if (isHarvesterPrime) {
|
||||
if (!primaryColorStyle) {
|
||||
primaryColorStyle = document.createElement('style');
|
||||
primaryColorStyle.id = 'harvester-prime-primary-color';
|
||||
document.head.appendChild(primaryColorStyle);
|
||||
primaryColorStyle.sheet.insertRule('body.theme-light, body.theme-dark {}', 0);
|
||||
}
|
||||
|
||||
const colors = createCssVars('#4dd192', isDark ? 'dark' : 'light');
|
||||
const rule = primaryColorStyle.sheet.cssRules[0];
|
||||
|
||||
Object.entries(colors).forEach(([property, color]) => rule.style.setProperty(property.trim(), color));
|
||||
} else {
|
||||
primaryColorStyle?.remove();
|
||||
}
|
||||
|
||||
const primeLabelKey = privateLabel ? 'harvester.branding.primeLabel' : 'harvester.branding.primeEmptyLabel';
|
||||
|
||||
store.dispatch('setIsSingleProduct', {
|
||||
productName: PRODUCT_NAME,
|
||||
logo: isHarvesterPrime ? primeLogo : require(`@shell/assets/images/providers/harvester.svg`),
|
||||
productNameKey: isHarvesterPrime ? primeLabelKey : 'harvester.productLabel',
|
||||
getVersionInfo: (store) => store.getters[`${ PRODUCT_NAME }/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
|
||||
afterLoginRoute: home,
|
||||
logoRoute: home,
|
||||
supportCustomLogo: !isHarvesterPrime
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
}
|
||||
|
||||
product({
|
||||
|
||||
@@ -86,4 +86,5 @@ export const HCI = {
|
||||
CDI_POPULATOR_KIND: 'cdi.kubevirt.io/storage.populator.kind',
|
||||
CNI_NETWORKS: 'k8s.v1.cni.cncf.io/networks',
|
||||
WINDOWS_SYSPREP: 'harvesterhci.io/windows-sysprep',
|
||||
SKIP_MIG_CONFIGURATION: 'harvesterhci.io/skip-mig-configuration',
|
||||
};
|
||||
|
||||
@@ -3,6 +3,7 @@ export const HCI_SETTING = {
|
||||
CONTAINERD_REGISTRY: 'containerd-registry',
|
||||
LOG_LEVEL: 'log-level',
|
||||
SERVER_VERSION: 'server-version',
|
||||
SERVER_FLAVOR: 'server-flavor',
|
||||
UI_INDEX: 'ui-index',
|
||||
UPGRADE_CHECKER_ENABLED: 'upgrade-checker-enabled',
|
||||
UPGRADE_CHECKER_URL: 'upgrade-checker-url',
|
||||
@@ -68,6 +69,7 @@ export const HCI_ALLOWED_SETTINGS = {
|
||||
kind: 'json', from: 'import', featureFlag: 'csiOnlineExpandValidation'
|
||||
},
|
||||
[HCI_SETTING.SERVER_VERSION]: { readOnly: true },
|
||||
[HCI_SETTING.SERVER_FLAVOR]: { readOnly: true },
|
||||
[HCI_SETTING.UPGRADE_CHECKER_ENABLED]: { kind: 'boolean' },
|
||||
[HCI_SETTING.UPGRADE_CHECKER_URL]: { kind: 'url' },
|
||||
[HCI_SETTING.HTTP_PROXY]: { kind: 'json', from: 'import' },
|
||||
@@ -111,15 +113,17 @@ export const HCI_ALLOWED_SETTINGS = {
|
||||
[HCI_SETTING.KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES]: { kind: 'number', featureFlag: 'kubeconfigDefaultTokenTTLMinutesSetting' },
|
||||
[HCI_SETTING.LONGHORN_V2_DATA_ENGINE_ENABLED]: {
|
||||
kind: 'boolean',
|
||||
experimental: true,
|
||||
preview: true,
|
||||
featureFlag: 'longhornV2LVMSupport'
|
||||
},
|
||||
[HCI_SETTING.LONGHORN_V2_DATA_ENGINE_HUGEPAGE_ENABLED]: {
|
||||
kind: 'boolean',
|
||||
preview: true,
|
||||
featureFlag: 'longhornV2HugepageSettings'
|
||||
},
|
||||
[HCI_SETTING.LONGHORN_V2_DATA_ENGINE_MEMORY_SIZE]: {
|
||||
kind: 'number',
|
||||
preview: true,
|
||||
featureFlag: 'longhornV2HugepageSettings'
|
||||
},
|
||||
[HCI_SETTING.ADDITIONAL_GUEST_MEMORY_OVERHEAD_RATIO]: { kind: 'string', from: 'import' },
|
||||
|
||||
@@ -286,7 +286,7 @@ export const FORKLIFT_PLAN_VM_COUNT = {
|
||||
labelKey: 'harvester.tableHeaders.vmMigrationPlanVmCount',
|
||||
value: 'spec.vms.length',
|
||||
sort: 'spec.vms.length',
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
};
|
||||
|
||||
// Plan reference column in forklift.konveyor.io.migration list page
|
||||
|
||||
@@ -15,6 +15,13 @@ export const VOLUME_MODE = {
|
||||
FILE_SYSTEM: 'Filesystem'
|
||||
};
|
||||
|
||||
export const ACCESS_MODE = {
|
||||
READ_WRITE_MANY: 'ReadWriteMany',
|
||||
READ_WRITE_ONCE: 'ReadWriteOnce',
|
||||
READ_ONLY_MANY: 'ReadOnlyMany',
|
||||
READ_WRITE_ONCE_POD: 'ReadWriteOncePod',
|
||||
};
|
||||
|
||||
export const NETWORK_PROTOCOL = {
|
||||
IPv4: 'IPv4',
|
||||
IPv6: 'IPv6',
|
||||
|
||||
@@ -390,14 +390,17 @@ export default {
|
||||
:vmi-resource="vmi"
|
||||
:vmim-resource="vmim"
|
||||
/>
|
||||
<DashboardMetrics
|
||||
<div
|
||||
v-if="showVmMetrics && liveMigrationProgressEnabled"
|
||||
:detail-url="VM_MIGRATION_DETAIL_URL"
|
||||
graph-height="640px"
|
||||
:has-summary-and-detail="false"
|
||||
:vars="graphVars"
|
||||
class="mb-30"
|
||||
/>
|
||||
class="migration-metrics-scroll mb-30"
|
||||
>
|
||||
<DashboardMetrics
|
||||
:detail-url="VM_MIGRATION_DETAIL_URL"
|
||||
graph-height="960px"
|
||||
:has-summary-and-detail="false"
|
||||
:vars="graphVars"
|
||||
/>
|
||||
</div>
|
||||
<Events
|
||||
v-if="liveMigrationProgressEnabled"
|
||||
:resource="vmi"
|
||||
@@ -436,3 +439,10 @@ export default {
|
||||
</Tabbed>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.migration-metrics-scroll {
|
||||
max-height: 640px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { Card } from '@components/Card';
|
||||
import AsyncButton from '@shell/components/AsyncButton';
|
||||
import { Checkbox } from '@components/Form/Checkbox';
|
||||
import { escapeHtml } from '@shell/utils/string';
|
||||
import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
|
||||
|
||||
export default {
|
||||
name: 'HarvesterEnableSriovGpuDevice',
|
||||
|
||||
emits: ['close'],
|
||||
|
||||
components: {
|
||||
AsyncButton,
|
||||
Card,
|
||||
Checkbox,
|
||||
},
|
||||
|
||||
props: {
|
||||
resources: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return { skipMigConfiguration: this.resources[0]?.metadata?.annotations?.[HCI_ANNOTATIONS.SKIP_MIG_CONFIGURATION] === 'true' };
|
||||
},
|
||||
|
||||
computed: { ...mapGetters({ t: 'i18n/t' }) },
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
async save(buttonCb) {
|
||||
const actionResource = this.resources[0];
|
||||
const prevEnabled = actionResource.spec.enabled;
|
||||
const prevAnnotation = actionResource.metadata.annotations?.[HCI_ANNOTATIONS.SKIP_MIG_CONFIGURATION];
|
||||
|
||||
try {
|
||||
if (this.skipMigConfiguration) {
|
||||
if (!actionResource.metadata.annotations) {
|
||||
actionResource.metadata.annotations = {};
|
||||
}
|
||||
actionResource.metadata.annotations[HCI_ANNOTATIONS.SKIP_MIG_CONFIGURATION] = 'true';
|
||||
} else {
|
||||
if (actionResource.metadata.annotations) {
|
||||
delete actionResource.metadata.annotations[HCI_ANNOTATIONS.SKIP_MIG_CONFIGURATION];
|
||||
}
|
||||
}
|
||||
|
||||
actionResource.spec.enabled = true;
|
||||
await actionResource.save();
|
||||
buttonCb(true);
|
||||
this.close();
|
||||
} catch (err) {
|
||||
actionResource.spec.enabled = prevEnabled;
|
||||
if (prevAnnotation !== undefined) {
|
||||
actionResource.metadata.annotations[HCI_ANNOTATIONS.SKIP_MIG_CONFIGURATION] = prevAnnotation;
|
||||
} else if (actionResource.metadata.annotations) {
|
||||
delete actionResource.metadata.annotations[HCI_ANNOTATIONS.SKIP_MIG_CONFIGURATION];
|
||||
}
|
||||
|
||||
this.$store.dispatch('growl/fromError', {
|
||||
title: this.t('generic.notification.title.error', { name: escapeHtml(actionResource.metadata.name) }),
|
||||
err,
|
||||
}, { root: true });
|
||||
buttonCb(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card :show-highlight-border="false">
|
||||
<template #title>
|
||||
<h4
|
||||
v-clean-html="t('harvester.sriovgpu.enable.title')"
|
||||
class="text-default-text"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div class="body">
|
||||
<Checkbox
|
||||
v-model:value="skipMigConfiguration"
|
||||
:label="t('harvester.sriovgpu.enable.skipMigConfiguration')"
|
||||
/>
|
||||
<p class="note mt-10">
|
||||
{{ t('harvester.sriovgpu.enable.note') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<div class="buttons actions">
|
||||
<button
|
||||
class="btn role-secondary mr-10"
|
||||
@click="close"
|
||||
>
|
||||
{{ t('generic.cancel') }}
|
||||
</button>
|
||||
|
||||
<AsyncButton
|
||||
mode="enable"
|
||||
@click="save"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -2,13 +2,16 @@
|
||||
import { exceptionToErrorsArray } from '@shell/utils/error';
|
||||
import { sortBy } from '@shell/utils/sort';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { PVC } from '@shell/config/types';
|
||||
import { PVC, STORAGE_CLASS, LONGHORN_DRIVER } from '@shell/config/types';
|
||||
import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
|
||||
import { VOLUME_MODE } from '@pkg/harvester/config/types';
|
||||
import { HCI } from '@pkg/harvester/types';
|
||||
import { Card } from '@components/Card';
|
||||
import { Banner } from '@components/Banner';
|
||||
import AsyncButton from '@shell/components/AsyncButton';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import { Checkbox } from '@components/Form/Checkbox';
|
||||
|
||||
export default {
|
||||
name: 'HotplugVolumeModal',
|
||||
@@ -16,7 +19,7 @@ export default {
|
||||
emits: ['close'],
|
||||
|
||||
components: {
|
||||
AsyncButton, Card, LabeledInput, LabeledSelect, Banner
|
||||
AsyncButton, Card, LabeledInput, LabeledSelect, Banner, Checkbox
|
||||
},
|
||||
|
||||
props: {
|
||||
@@ -28,14 +31,19 @@ export default {
|
||||
|
||||
async fetch() {
|
||||
this.allPVCs = await this.$store.dispatch('harvester/findAll', { type: PVC });
|
||||
this.allStorageClasses = await this.$store.dispatch('harvester/findAll', { type: STORAGE_CLASS });
|
||||
this.allVMs = await this.$store.dispatch('harvester/findAll', { type: HCI.VM });
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
diskName: '',
|
||||
volumeName: '',
|
||||
errors: [],
|
||||
allPVCs: [],
|
||||
diskName: '',
|
||||
volumeName: '',
|
||||
shareable: false,
|
||||
errors: [],
|
||||
allPVCs: [],
|
||||
allStorageClasses: [],
|
||||
allVMs: [],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -50,6 +58,31 @@ export default {
|
||||
return this.resources[0];
|
||||
},
|
||||
|
||||
// claim names already attached to the VM this modal was opened for
|
||||
currentVMClaimNames() {
|
||||
const volumes = this.actionResource?.spec?.template?.spec?.volumes || [];
|
||||
|
||||
return volumes.map((vol) => vol.persistentVolumeClaim?.claimName).filter((name) => !!name);
|
||||
},
|
||||
|
||||
// claim names attached to other VMs in the same namespace
|
||||
otherVMClaimNames() {
|
||||
const out = [];
|
||||
|
||||
this.allVMs.forEach((vm) => {
|
||||
if (vm.metadata.namespace !== this.actionResource?.metadata?.namespace || vm.id === this.actionResource?.id) {
|
||||
return;
|
||||
}
|
||||
(vm.spec?.template?.spec?.volumes || []).forEach((vol) => {
|
||||
if (vol.persistentVolumeClaim?.claimName) {
|
||||
out.push(vol.persistentVolumeClaim.claimName);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return out;
|
||||
},
|
||||
|
||||
volumeOption() {
|
||||
return sortBy(
|
||||
this.PVCs
|
||||
@@ -61,6 +94,14 @@ export default {
|
||||
if (pvc.isGoldenImageVolume) {
|
||||
return false;
|
||||
}
|
||||
// a volume attached to this VM can never be attached to it again
|
||||
if (this.currentVMClaimNames.includes(pvc.metadata.name)) {
|
||||
return false;
|
||||
}
|
||||
// a volume attached to another VM can only be re-attached as a shareable disk
|
||||
if (this.otherVMClaimNames.includes(pvc.metadata.name) && !this.isShareableCapablePVC(pvc)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
@@ -73,19 +114,62 @@ export default {
|
||||
'label'
|
||||
);
|
||||
},
|
||||
|
||||
selectedPVC() {
|
||||
return this.PVCs.find((P) => P.metadata.name === this.volumeName);
|
||||
},
|
||||
|
||||
isShareableCapable() {
|
||||
return this.selectedPVC ? this.isShareableCapablePVC(this.selectedPVC) : false;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
isShareableCapable(neu) {
|
||||
if (!neu) {
|
||||
this.shareable = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
isShareableCapablePVC(pvc) {
|
||||
const pvcSpec = pvc?.spec;
|
||||
|
||||
if (!pvcSpec) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const isRWX = (pvcSpec.accessModes || []).includes('ReadWriteMany');
|
||||
const isBlock = pvcSpec.volumeMode === VOLUME_MODE.BLOCK;
|
||||
const storageClass = this.allStorageClasses.find((sc) => sc.name === pvcSpec.storageClassName);
|
||||
|
||||
// fail closed: without a resolved StorageClass the provisioner
|
||||
// requirement cannot be evaluated
|
||||
if (!storageClass) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isRWX && isBlock && storageClass.provisioner !== LONGHORN_DRIVER;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.diskName = '';
|
||||
this.volumeName = '';
|
||||
this.shareable = false;
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
async save(buttonCb) {
|
||||
if (this.actionResource) {
|
||||
try {
|
||||
const res = await this.actionResource.doAction('addVolume', { volumeSourceName: this.volumeName, diskName: this.diskName }, {}, false);
|
||||
const input = { volumeSourceName: this.volumeName, diskName: this.diskName };
|
||||
|
||||
if (this.isShareableCapable && this.shareable) {
|
||||
input.shareable = true;
|
||||
}
|
||||
|
||||
const res = await this.actionResource.doAction('addVolume', input, {}, false);
|
||||
|
||||
if (res._status === 200 || res._status === 204) {
|
||||
this.$store.dispatch('growl/success', {
|
||||
@@ -141,6 +225,19 @@ export default {
|
||||
class="mt-20"
|
||||
required
|
||||
/>
|
||||
<Checkbox
|
||||
v-if="isShareableCapable"
|
||||
v-model:value="shareable"
|
||||
class="mt-20"
|
||||
type="checkbox"
|
||||
label-key="harvester.virtualMachine.volume.shareable.label"
|
||||
tooltip-key="harvester.virtualMachine.volume.shareable.tip"
|
||||
/>
|
||||
<Banner
|
||||
v-if="isShareableCapable && shareable"
|
||||
color="warning"
|
||||
:label="t('harvester.virtualMachine.volume.shareable.warning')"
|
||||
/>
|
||||
<Banner
|
||||
v-for="(err, i) in errors"
|
||||
:key="i"
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
<script>
|
||||
import merge from 'lodash/merge';
|
||||
import jsyaml from 'js-yaml';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { Card } from '@components/Card';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import AsyncButton from '@shell/components/AsyncButton';
|
||||
import { escapeHtml } from '@shell/utils/string';
|
||||
|
||||
const DEFAULT_VALUE = {
|
||||
rancher: {
|
||||
hostname: '',
|
||||
version: '',
|
||||
bootstrapPassword: '',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'HarvesterEnableK3k',
|
||||
|
||||
emits: ['close'],
|
||||
|
||||
components: {
|
||||
AsyncButton,
|
||||
Card,
|
||||
LabeledInput,
|
||||
},
|
||||
|
||||
props: {
|
||||
resources: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
const addon = this.resources[0];
|
||||
let valuesContentJson;
|
||||
|
||||
try {
|
||||
valuesContentJson = merge({}, DEFAULT_VALUE, jsyaml.load(addon.spec.valuesContent));
|
||||
} catch (e) {
|
||||
valuesContentJson = merge({}, DEFAULT_VALUE);
|
||||
}
|
||||
|
||||
return { valuesContentJson };
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({ t: 'i18n/t' }),
|
||||
|
||||
buttonDisabled() {
|
||||
const { rancher } = this.valuesContentJson;
|
||||
|
||||
return !(rancher?.hostname || '').trim() || !(rancher?.version || '').trim() || !(rancher?.bootstrapPassword || '').trim();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
async enable(buttonCb) {
|
||||
const addon = this.resources[0];
|
||||
|
||||
try {
|
||||
addon.spec.valuesContent = jsyaml.dump(this.valuesContentJson);
|
||||
addon.spec.enabled = true;
|
||||
await addon.save();
|
||||
buttonCb(true);
|
||||
this.close();
|
||||
} catch (err) {
|
||||
addon.spec.enabled = false;
|
||||
this.$store.dispatch('growl/fromError', {
|
||||
title: this.t('generic.notification.title.error', { name: escapeHtml(addon.metadata.name) }),
|
||||
err,
|
||||
}, { root: true });
|
||||
buttonCb(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card :show-highlight-border="false">
|
||||
<template #title>
|
||||
<h4
|
||||
v-clean-html="t('harvester.addons.rancherK3k.enable.title')"
|
||||
class="text-default-text"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div class="body">
|
||||
<div class="row mb-15">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="valuesContentJson.rancher.hostname"
|
||||
:required="true"
|
||||
:label="t('harvester.addons.rancherK3k.hostname')"
|
||||
placeholder="rancher.$vip.nip.io"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="valuesContentJson.rancher.version"
|
||||
:required="true"
|
||||
:label="t('harvester.addons.rancherK3k.version')"
|
||||
placeholder="v1.14.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-15">
|
||||
<div class="col span-12">
|
||||
<LabeledInput
|
||||
v-model:value="valuesContentJson.rancher.bootstrapPassword"
|
||||
:required="true"
|
||||
type="password"
|
||||
:label="t('harvester.addons.rancherK3k.password')"
|
||||
:tooltip="t('harvester.addons.rancherK3k.passwordTooltip')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<div class="buttons actions">
|
||||
<button
|
||||
class="btn role-secondary mr-10"
|
||||
@click="close"
|
||||
>
|
||||
{{ t('generic.cancel') }}
|
||||
</button>
|
||||
|
||||
<AsyncButton
|
||||
mode="enable"
|
||||
:disabled="buttonDisabled"
|
||||
@click="enable"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,167 @@
|
||||
<script>
|
||||
import merge from 'lodash/merge';
|
||||
import jsyaml from 'js-yaml';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import { RadioGroup } from '@components/Form/Radio';
|
||||
|
||||
const DEFAULT_VALUE = {
|
||||
certManagerVersion: 'v1.20.2',
|
||||
rancher: {
|
||||
hostname: '',
|
||||
version: '',
|
||||
bootstrapPassword: '',
|
||||
},
|
||||
k3kCluster: {
|
||||
servers: 1,
|
||||
version: 'v1.35.4-k3s1',
|
||||
storageClassName: 'harvester-longhorn',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'EditAddonRancherK3k',
|
||||
components: { LabeledInput, RadioGroup },
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
||||
mode: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
registerBeforeHook: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
let valuesContentJson = {};
|
||||
|
||||
try {
|
||||
valuesContentJson = merge({}, DEFAULT_VALUE, jsyaml.load(this.value.spec.valuesContent));
|
||||
} catch (err) {
|
||||
valuesContentJson = merge({}, DEFAULT_VALUE);
|
||||
|
||||
this.$store.dispatch('growl/fromError', {
|
||||
title: this.$store.getters['i18n/t']('generic.notification.title.error'),
|
||||
err: err.data || err,
|
||||
}, { root: true });
|
||||
}
|
||||
|
||||
return { valuesContentJson };
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.registerBeforeHook) {
|
||||
this.registerBeforeHook(this.willSave, 'willSave');
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
willSave() {
|
||||
const errors = [];
|
||||
|
||||
if (!this.value.spec.enabled) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (!this.valuesContentJson.rancher.hostname) {
|
||||
errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherK3k.hostname') }, true));
|
||||
}
|
||||
|
||||
if (!this.valuesContentJson.rancher.version) {
|
||||
errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherK3k.version') }, true));
|
||||
}
|
||||
|
||||
if (!this.valuesContentJson.rancher.bootstrapPassword) {
|
||||
errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherK3k.password') }, true));
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
return Promise.reject(errors);
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
valuesContentJson: {
|
||||
handler(neu) {
|
||||
this.value.spec['valuesContent'] = jsyaml.dump(neu);
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col span-12">
|
||||
<RadioGroup
|
||||
v-model:value="value.spec.enabled"
|
||||
class="mb-20"
|
||||
name="model"
|
||||
:mode="mode"
|
||||
:options="[true,false]"
|
||||
:labels="[t('generic.enabled'), t('generic.disabled')]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="value.spec.enabled">
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="valuesContentJson.rancher.hostname"
|
||||
label-key="harvester.addons.rancherK3k.hostname"
|
||||
:required="true"
|
||||
:mode="mode"
|
||||
placeholder="rancher.$vip.nip.io"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="valuesContentJson.rancher.version"
|
||||
label-key="harvester.addons.rancherK3k.version"
|
||||
:required="true"
|
||||
:mode="mode"
|
||||
placeholder="v1.14.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-20">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="valuesContentJson.rancher.bootstrapPassword"
|
||||
label-key="harvester.addons.rancherK3k.password"
|
||||
:mode="mode"
|
||||
:required="true"
|
||||
type="password"
|
||||
:tooltip="t('harvester.addons.rancherK3k.passwordTooltip')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() .radio-group {
|
||||
display: flex;
|
||||
.radio-container {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
|
||||
import YamlEditor from '@shell/components/YamlEditor';
|
||||
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import FormValidation from '@shell/mixins/form-validation';
|
||||
import { HCI } from '@pkg/harvester/config/labels-annotations';
|
||||
|
||||
export default {
|
||||
@@ -23,14 +24,19 @@ export default {
|
||||
NameNsDescription,
|
||||
},
|
||||
|
||||
mixins: [CreateEditView],
|
||||
mixins: [CreateEditView, FormValidation],
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
data() {
|
||||
return {
|
||||
config: this.value.data?.cloudInit || '',
|
||||
type: this.value?.metadata?.labels?.[HCI.CLOUD_INIT] || 'user',
|
||||
config: this.value.data?.cloudInit || '',
|
||||
type: this.value?.metadata?.labels?.[HCI.CLOUD_INIT] || 'user',
|
||||
fvFormRuleSets: [{
|
||||
path: 'metadata.name',
|
||||
rules: ['required'],
|
||||
translationKey: 'nameNsDescription.name.label',
|
||||
}],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -78,6 +84,7 @@ export default {
|
||||
:resource="value"
|
||||
:errors="errors"
|
||||
:apply-hooks="applyHooks"
|
||||
:validation-passed="fvFormIsValid"
|
||||
@finish="save"
|
||||
@cancel="done"
|
||||
@error="e=>errors=e"
|
||||
@@ -86,6 +93,7 @@ export default {
|
||||
:value="value"
|
||||
:mode="mode"
|
||||
:namespaced="true"
|
||||
:rules="{ name: fvGetAndReportPathRules('metadata.name') }"
|
||||
@update:value="$emit('update:value', $event)"
|
||||
/>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { VOLUME_MODE } from '@pkg/harvester/config/types';
|
||||
import { VOLUME_MODE, ACCESS_MODE } from '@pkg/harvester/config/types';
|
||||
import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
|
||||
import ArrayList from '@shell/components/form/ArrayList';
|
||||
import { Checkbox } from '@components/Form/Checkbox';
|
||||
@@ -10,6 +10,10 @@ import { HCI_SETTING } from '../../config/settings';
|
||||
import { allHash } from '@shell/utils/promise';
|
||||
import { _EDIT, _CREATE } from '@shell/config/query-params';
|
||||
|
||||
const {
|
||||
READ_WRITE_ONCE, READ_ONLY_MANY, READ_WRITE_MANY, READ_WRITE_ONCE_POD
|
||||
} = ACCESS_MODE;
|
||||
|
||||
export default {
|
||||
name: 'CDISettings',
|
||||
|
||||
@@ -90,10 +94,10 @@ export default {
|
||||
|
||||
accessModeOptions() {
|
||||
return [
|
||||
{ label: 'ReadWriteOnce', value: 'ReadWriteOnce' },
|
||||
{ label: 'ReadOnlyMany', value: 'ReadOnlyMany' },
|
||||
{ label: 'ReadWriteMany', value: 'ReadWriteMany' },
|
||||
{ label: 'ReadWriteOncePod', value: 'ReadWriteOncePod' },
|
||||
{ label: READ_WRITE_ONCE, value: READ_WRITE_ONCE },
|
||||
{ label: READ_ONLY_MANY, value: READ_ONLY_MANY },
|
||||
{ label: READ_WRITE_MANY, value: READ_WRITE_MANY },
|
||||
{ label: READ_WRITE_ONCE_POD, value: READ_WRITE_ONCE_POD },
|
||||
];
|
||||
},
|
||||
|
||||
|
||||
+14
-1
@@ -7,8 +7,12 @@ import { allHash } from '@shell/utils/promise';
|
||||
import { clone } from '@shell/utils/object';
|
||||
import { HCI } from '../../../types';
|
||||
import { NODE } from '@shell/config/types';
|
||||
import { _CREATE, _CLONE } from '@shell/config/query-params';
|
||||
import { LVM_TOPOLOGY_LABEL } from '../index.vue';
|
||||
|
||||
const STRIPED_TYPE = 'striped';
|
||||
const DM_THIN_TYPE = 'dm-thin';
|
||||
|
||||
const DEFAULT_PARAMETERS = [
|
||||
'type',
|
||||
'vgName'
|
||||
@@ -54,8 +58,17 @@ export default {
|
||||
data() {
|
||||
const node = (this.value.allowedTopologies?.[0]?.matchLabelExpressions || []).find((t) => t.key === LVM_TOPOLOGY_LABEL)?.values[0];
|
||||
|
||||
// striped is dropped once the LVM add-on reaches GA (v1.9.1); dm-thin is the only supported type.
|
||||
const dmThinOnly = this.$store.getters['harvester-common/getFeatureEnabled']('lvmDmThinOnly');
|
||||
const volumeGroupTypes = dmThinOnly ? [DM_THIN_TYPE] : [STRIPED_TYPE, DM_THIN_TYPE];
|
||||
|
||||
// Default new storage classes to dm-thin, and reset a cloned striped type that is no longer selectable.
|
||||
if (dmThinOnly && [_CREATE, _CLONE].includes(this.realMode) && !volumeGroupTypes.includes(this.value.parameters.type)) {
|
||||
this.value.parameters.type = DM_THIN_TYPE;
|
||||
}
|
||||
|
||||
return {
|
||||
volumeGroupTypes: ['striped', 'dm-thin'],
|
||||
volumeGroupTypes,
|
||||
node,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -26,9 +26,11 @@ import { HCI, VOLUME_SNAPSHOT } from '../types';
|
||||
import { LVM_DRIVER } from '../models/harvester/storage.k8s.io.storageclass';
|
||||
import { DATA_ENGINE_V2 } from '../models/harvester/persistentvolumeclaim';
|
||||
import { GIBIBYTE } from '../utils/unit';
|
||||
import { VOLUME_MODE } from '@pkg/harvester/config/types';
|
||||
import { VOLUME_MODE, ACCESS_MODE } from '@pkg/harvester/config/types';
|
||||
import { isInternalStorageClass } from '../utils/storage-class';
|
||||
|
||||
const { READ_WRITE_MANY, READ_WRITE_ONCE, READ_ONLY_MANY } = ACCESS_MODE;
|
||||
|
||||
export default {
|
||||
name: 'HarvesterVolume',
|
||||
|
||||
@@ -83,7 +85,7 @@ export default {
|
||||
if (this.mode === _CREATE) {
|
||||
// default volumeMode to Block
|
||||
this.value.spec.volumeMode = VOLUME_MODE.BLOCK;
|
||||
this.value.spec.accessModes = ['ReadWriteMany'];
|
||||
this.value.spec.accessModes = [READ_WRITE_MANY];
|
||||
}
|
||||
|
||||
const storage = this.value?.spec?.resources?.requests?.storage || null;
|
||||
@@ -160,7 +162,7 @@ export default {
|
||||
},
|
||||
|
||||
accessModeOptions() {
|
||||
return ['ReadWriteOnce', 'ReadWriteMany', 'ReadOnlyMany'];
|
||||
return [READ_WRITE_ONCE, READ_WRITE_MANY, READ_ONLY_MANY];
|
||||
},
|
||||
|
||||
imageOption() {
|
||||
@@ -355,7 +357,7 @@ export default {
|
||||
|
||||
getAccessMode() {
|
||||
if (!this.longhornV2LVMSupport) {
|
||||
return ['ReadWriteMany'];
|
||||
return [READ_WRITE_MANY];
|
||||
}
|
||||
|
||||
if (this.value?.spec?.accessModes && this.value?.spec?.accessModes?.length > 0) {
|
||||
@@ -371,7 +373,7 @@ export default {
|
||||
readWriteOnce = storageClass.provisioner === LVM_DRIVER || (!this.value.thirdPartyStorageFeatureEnabled && storageClass.parameters?.dataEngine === DATA_ENGINE_V2);
|
||||
}
|
||||
|
||||
return readWriteOnce ? ['ReadWriteOnce'] : ['ReadWriteMany'];
|
||||
return readWriteOnce ? [READ_WRITE_ONCE] : [READ_WRITE_MANY];
|
||||
},
|
||||
buildDataVolumeObj() {
|
||||
const storage = {
|
||||
|
||||
@@ -9,7 +9,7 @@ import Loading from '@shell/components/Loading';
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import { RadioGroup } from '@components/Form/Radio';
|
||||
import { NETWORK_PROTOCOL, NETWORK_TYPE } from '@pkg/harvester/config/types';
|
||||
import { set } from '@shell/utils/object';
|
||||
import { set, remove } from '@shell/utils/object';
|
||||
import ArrayList from '@shell/components/form/ArrayList';
|
||||
import { allHash } from '@shell/utils/promise';
|
||||
import { HCI } from '../../types';
|
||||
@@ -142,10 +142,12 @@ export default {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
const vlans = this.$store.getters[`${ inStore }/all`](HCI.VLAN) || [];
|
||||
|
||||
return vlans.map((vlan) => ({
|
||||
const options = vlans.map((vlan) => ({
|
||||
label: vlan.id,
|
||||
value: vlan.id,
|
||||
}));
|
||||
|
||||
return [{ label: this.t('generic.none'), value: '' }, ...options];
|
||||
}
|
||||
},
|
||||
|
||||
@@ -160,6 +162,14 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onVlanChange(value) {
|
||||
if (value === '') {
|
||||
remove(this.value.spec, 'vlan');
|
||||
} else {
|
||||
set(this.value, 'spec.vlan', value);
|
||||
}
|
||||
},
|
||||
|
||||
async saveSubnet(buttonCb) {
|
||||
const errors = [];
|
||||
const name = this.value?.metadata?.name;
|
||||
@@ -283,12 +293,13 @@ export default {
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
v-model:value="value.spec.vlan"
|
||||
:value="value.spec.vlan ?? ''"
|
||||
class="mb-20"
|
||||
:options="vlanOptions"
|
||||
:placeholder="t('harvester.subnet.vlan.placeholder')"
|
||||
:label="t('harvester.subnet.vlan.label')"
|
||||
:mode="mode"
|
||||
@update:value="onVlanChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-6
@@ -68,12 +68,6 @@ export default {
|
||||
},
|
||||
|
||||
watch: {
|
||||
osType(neu) {
|
||||
if (neu === 'windows') {
|
||||
this.id = '';
|
||||
}
|
||||
},
|
||||
|
||||
value(neu) {
|
||||
this.yamlScript = neu;
|
||||
},
|
||||
|
||||
@@ -246,4 +246,27 @@ export default {
|
||||
.group-actions {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Match the enable/disable passthrough bulk-action buttons height to the .btn (40px) on the right.
|
||||
:deep(.bulk .rc-button.btn-medium.bulk-action:not(.btn-sm)) {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
// Make the collapsed "Actions" dropdown button 40px too.
|
||||
:deep(.bulk .rc-button.btn-medium.bulk-actions-dropdown:not(.btn-sm)) {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
// Lay the bulk row out with flex so the "N selected" label can wrap below the buttons.
|
||||
:deep(.bulk) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.bulk .action-availability) {
|
||||
flex-basis: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import Banner from '@components/Banner/Banner.vue';
|
||||
import remove from 'lodash/remove';
|
||||
import { set } from '@shell/utils/object';
|
||||
import { uniq } from '@shell/utils/array';
|
||||
import { HCI } from '../../../types';
|
||||
import DeviceList from './DeviceList';
|
||||
import CompatibilityMatrix from '../CompatibilityMatrix';
|
||||
@@ -60,7 +61,15 @@ export default {
|
||||
row.allowDisable = !vmDeviceNames.includes(row.metadata.name);
|
||||
});
|
||||
|
||||
vmDevices.forEach(({ name }) => {
|
||||
// When off, read from spec; otherwise the spec name is a placeholder ('provisioned'),
|
||||
// so read the real allocated device names from the deviceAllocationDetails annotation.
|
||||
const hostDeviceNames = this.vm.isOff ? [
|
||||
...vmDevices.map(({ name }) => name),
|
||||
] : [
|
||||
...Object.values(this.vm?.provisionedHostDevices || {}).reduce((acc, devices) => [...acc, ...devices], []),
|
||||
];
|
||||
|
||||
uniq(hostDeviceNames).forEach((name) => {
|
||||
if (this.enabledDevices.find((device) => device?.metadata?.name === name)) {
|
||||
selectedDevices.push(name);
|
||||
}
|
||||
|
||||
@@ -16,10 +16,12 @@ import { PLUGIN_DEVELOPER, DEV } from '@shell/store/prefs';
|
||||
import { VOLUME_HOTPLUG_ACTION, SOURCE_TYPE } from '../../../config/harvester-map';
|
||||
import { PRODUCT_NAME as HARVESTER_PRODUCT } from '../../../config/harvester';
|
||||
import { HCI } from '../../../types';
|
||||
import { VOLUME_MODE } from '@pkg/harvester/config/types';
|
||||
import { VOLUME_MODE, ACCESS_MODE } from '@pkg/harvester/config/types';
|
||||
import { OFF } from '../../../models/kubevirt.io.virtualmachine';
|
||||
import { EMPTY_IMAGE } from '../../../utils/vm';
|
||||
|
||||
const { READ_WRITE_MANY } = ACCESS_MODE;
|
||||
|
||||
export default {
|
||||
emits: ['update:value'],
|
||||
|
||||
@@ -69,7 +71,7 @@ export default {
|
||||
|
||||
customAccessMode: {
|
||||
type: String,
|
||||
default: 'ReadWriteMany'
|
||||
default: READ_WRITE_MANY
|
||||
},
|
||||
|
||||
resourceType: {
|
||||
|
||||
+56
-2
@@ -5,10 +5,12 @@ import LabelValue from '@shell/components/LabelValue';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import InputOrDisplay from '@shell/components/InputOrDisplay';
|
||||
import { Banner } from '@components/Banner';
|
||||
import { Checkbox } from '@components/Form/Checkbox';
|
||||
import { sortBy } from '@shell/utils/sort';
|
||||
import { PVC } from '@shell/config/types';
|
||||
import { PVC, STORAGE_CLASS, LONGHORN_DRIVER } from '@shell/config/types';
|
||||
import { _CREATE } from '@shell/config/query-params';
|
||||
import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
|
||||
import { VOLUME_MODE } from '@pkg/harvester/config/types';
|
||||
import { HCI } from '../../../../types';
|
||||
import { VOLUME_TYPE, InterfaceOption } from '../../../../config/harvester-map';
|
||||
import { GIBIBYTE } from '../../../../utils/unit';
|
||||
@@ -19,7 +21,7 @@ export default {
|
||||
emits: ['update'],
|
||||
|
||||
components: {
|
||||
UnitInput, LabeledInput, LabeledSelect, InputOrDisplay, LabelValue, Banner
|
||||
UnitInput, LabeledInput, LabeledSelect, InputOrDisplay, LabelValue, Banner, Checkbox
|
||||
},
|
||||
|
||||
props: {
|
||||
@@ -94,6 +96,30 @@ export default {
|
||||
return this.allPVCs.find( (P) => P.metadata.name === this.value.volumeName );
|
||||
},
|
||||
|
||||
storageClasses() {
|
||||
return this.$store.getters['harvester/all'](STORAGE_CLASS) || [];
|
||||
},
|
||||
|
||||
isShareableCapable() {
|
||||
const pvcSpec = this.pvcResource?.spec;
|
||||
|
||||
if (!pvcSpec) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const isRWX = (pvcSpec.accessModes || []).includes('ReadWriteMany');
|
||||
const isBlock = pvcSpec.volumeMode === VOLUME_MODE.BLOCK;
|
||||
const storageClass = this.storageClasses.find((sc) => sc.name === pvcSpec.storageClassName);
|
||||
|
||||
// fail closed: without a resolved StorageClass the provisioner
|
||||
// requirement cannot be evaluated
|
||||
if (!storageClass) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isRWX && isBlock && storageClass.provisioner !== LONGHORN_DRIVER;
|
||||
},
|
||||
|
||||
volumeOption() {
|
||||
return sortBy(
|
||||
this.allPVCs
|
||||
@@ -145,6 +171,7 @@ export default {
|
||||
this.value.size = pvcResource.spec.resources.requests.storage;
|
||||
this.value.storageClassName = pvcResource.spec.storageClassName;
|
||||
this.value.volumeMode = pvcResource.spec.volumeMode;
|
||||
this.value.shareable = false;
|
||||
this.update();
|
||||
},
|
||||
|
||||
@@ -155,6 +182,13 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
isShareableCapable(neu) {
|
||||
if (!neu && this.value.shareable) {
|
||||
this.value.shareable = false;
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
|
||||
pvcResource: {
|
||||
handler(pvc) {
|
||||
if (!this.value.volumeName && pvc?.metadata?.name) {
|
||||
@@ -303,6 +337,26 @@ export default {
|
||||
/>
|
||||
</InputOrDisplay>
|
||||
</div>
|
||||
<div
|
||||
v-if="isShareableCapable"
|
||||
data-testid="input-hee-shareable"
|
||||
class="col span-6"
|
||||
>
|
||||
<Checkbox
|
||||
v-model:value="value.shareable"
|
||||
class="check"
|
||||
type="checkbox"
|
||||
label-key="harvester.virtualMachine.volume.shareable.label"
|
||||
tooltip-key="harvester.virtualMachine.volume.shareable.tip"
|
||||
:mode="mode"
|
||||
@update:value="update"
|
||||
/>
|
||||
<Banner
|
||||
v-if="value.shareable"
|
||||
color="warning"
|
||||
:label="t('harvester.virtualMachine.volume.shareable.warning')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="value.volumeBackups"
|
||||
class="col span-6"
|
||||
|
||||
@@ -14,7 +14,9 @@ import { LVM_DRIVER } from '../../../../models/harvester/storage.k8s.io.storagec
|
||||
import { DATA_ENGINE_V2 } from '../../../../models/harvester/persistentvolumeclaim';
|
||||
import { GIBIBYTE } from '../../../../utils/unit';
|
||||
import { isInternalStorageClass } from '../../../../utils/storage-class';
|
||||
import { VOLUME_MODE } from '@pkg/harvester/config/types';
|
||||
import { VOLUME_MODE, ACCESS_MODE } from '@pkg/harvester/config/types';
|
||||
|
||||
const { READ_WRITE_MANY, READ_WRITE_ONCE } = ACCESS_MODE;
|
||||
|
||||
export default {
|
||||
name: 'HarvesterEditVolume',
|
||||
@@ -205,7 +207,7 @@ export default {
|
||||
|
||||
getAccessMode(storageClassName) {
|
||||
if (!this.longhornV2LVMSupport) {
|
||||
return 'ReadWriteMany';
|
||||
return READ_WRITE_MANY;
|
||||
}
|
||||
|
||||
const storageClass = this.storageClasses.find((sc) => sc.name === storageClassName);
|
||||
@@ -216,7 +218,7 @@ export default {
|
||||
readWriteOnce = storageClass.provisioner === LVM_DRIVER || (!this.thirdPartyStorageClassEnabled && storageClass.parameters?.dataEngine === DATA_ENGINE_V2);
|
||||
}
|
||||
|
||||
return readWriteOnce ? 'ReadWriteOnce' : 'ReadWriteMany';
|
||||
return readWriteOnce ? READ_WRITE_ONCE : READ_WRITE_MANY;
|
||||
},
|
||||
|
||||
update() {
|
||||
|
||||
@@ -93,6 +93,9 @@ export default {
|
||||
|
||||
const hostname = this.value.spec.template.spec.hostname || '';
|
||||
|
||||
// Display name can contain arbitrary strings. There is no XSS risk because the value is
|
||||
// rendered via Vue's {{ }} interpolation which auto-escapes HTML; v-html is never used for
|
||||
// this field. See harvester/harvester#10423 for details.
|
||||
const customizeDisplayName = !!(this.value.metadata?.annotations?.[HCI_ANNOTATIONS.VM_DISPLAY_NAME]);
|
||||
|
||||
return {
|
||||
@@ -484,6 +487,20 @@ export default {
|
||||
await value.save();
|
||||
await this.applyHooks(AFTER_SAVE_HOOKS);
|
||||
} catch (e) {
|
||||
// Reset the generated secret name(s) so a retried create (e.g. after correcting an
|
||||
// invalid/duplicate VM name) always regenerates them from the current name instead of
|
||||
// reusing names derived from this failed attempt. Only do this for create: in edit mode
|
||||
// secretName/sysprep.secretName may reference an existing secret loaded from the VM,
|
||||
// which must not be discarded. See harvester/harvester#11174.
|
||||
if (this.isCreate) {
|
||||
this.secretName = '';
|
||||
this.secretNamePrefixUsed = '';
|
||||
if (this.sysprepSecretNamePrefixUsed !== '') {
|
||||
this.sysprep.secretName = '';
|
||||
this.sysprepSecretNamePrefixUsed = '';
|
||||
}
|
||||
}
|
||||
|
||||
this.errors.push(...exceptionToErrorsArray(e));
|
||||
buttonCb(false);
|
||||
}
|
||||
@@ -1045,7 +1062,6 @@ export default {
|
||||
</div>
|
||||
|
||||
<CloudConfig
|
||||
v-if="!isWindows"
|
||||
ref="yamlEditor"
|
||||
:user-script="userScript"
|
||||
:mode="mode"
|
||||
|
||||
@@ -63,6 +63,7 @@ export default {
|
||||
RANCHER_TYPES,
|
||||
fvFormRuleSets: [{ path: 'spec.displayName', rules: ['required'] }],
|
||||
canEditPSPBindings: true,
|
||||
isQuotasValid: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -190,15 +191,13 @@ export default {
|
||||
this['membershipUpdate'] = update;
|
||||
},
|
||||
|
||||
removeQuota(key) {
|
||||
['resourceQuota', 'namespaceDefaultResourceQuota'].forEach((specProp) => {
|
||||
if (this.value?.spec[specProp]?.limit && this.value?.spec[specProp]?.limit[key]) {
|
||||
delete this.value?.spec[specProp]?.limit[key];
|
||||
}
|
||||
if (this.value?.spec[specProp]?.usedLimit && this.value?.spec[specProp]?.usedLimit[key]) {
|
||||
delete this.value?.spec[specProp]?.usedLimit[key];
|
||||
}
|
||||
});
|
||||
validateQuotas(isValid) {
|
||||
this.isQuotasValid = isValid;
|
||||
},
|
||||
|
||||
onQuotasInput({ projectLimit, nsLimit } = {}) {
|
||||
this.value.spec.resourceQuota = { ...this.value.spec.resourceQuota, limit: projectLimit };
|
||||
this.value.spec.namespaceDefaultResourceQuota = { ...this.value.spec.namespaceDefaultResourceQuota, limit: nsLimit };
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -212,7 +211,7 @@ export default {
|
||||
:resource="value"
|
||||
:subtypes="[]"
|
||||
:can-yaml="false"
|
||||
:validation-passed="fvFormIsValid"
|
||||
:validation-passed="fvFormIsValid && isQuotasValid"
|
||||
@error="e=>errors=e"
|
||||
@finish="save"
|
||||
@cancel="done"
|
||||
@@ -267,10 +266,11 @@ export default {
|
||||
:weight="9"
|
||||
>
|
||||
<ResourceQuota
|
||||
v-model:value="value"
|
||||
:value="value"
|
||||
:mode="canEditTabElements"
|
||||
:types="isStandaloneHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
|
||||
@remove="removeQuota"
|
||||
@input="onQuotasInput"
|
||||
@validationChanged="validateQuotas"
|
||||
/>
|
||||
</Tab>
|
||||
<Tab
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import ConsumptionGauge from '@shell/components/ConsumptionGauge';
|
||||
import PercentageBar from '@shell/components/PercentageBar';
|
||||
import { METRIC, NODE } from '@shell/config/types';
|
||||
import { parseSi } from '@shell/utils/units';
|
||||
|
||||
export default {
|
||||
name: 'HarvesterCpuUsed',
|
||||
components: { ConsumptionGauge },
|
||||
components: { PercentageBar },
|
||||
|
||||
props: {
|
||||
value: {
|
||||
@@ -74,54 +74,89 @@ export default {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
reservedPercentage() {
|
||||
return this.cpuTotal ? (this.reserved * 100) / this.cpuTotal : 0;
|
||||
},
|
||||
|
||||
usedPercentage() {
|
||||
return this.cpuTotal ? (this.used * 100) / this.cpuTotal : 0;
|
||||
},
|
||||
|
||||
reservedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.numberFormatter(this.reserved || 0),
|
||||
total: this.numberFormatter(this.cpuTotal || 0),
|
||||
unit: ` ${ this.cpuUnits }`,
|
||||
};
|
||||
},
|
||||
|
||||
usedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.numberFormatter(this.used || 0),
|
||||
total: this.numberFormatter(this.cpuTotal || 0),
|
||||
unit: ` ${ this.cpuUnits }`,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
numberFormatter(value) {
|
||||
return Number.isInteger(value) ? value : value.toFixed(2);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ConsumptionGauge
|
||||
:capacity="cpuTotal"
|
||||
:used="reserved"
|
||||
:units="cpuUnits"
|
||||
:resource-name="resourceName"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
<div class="consumption-gauge">
|
||||
<div class="numbers">
|
||||
<span class="mr-5">
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="reservedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUsed"
|
||||
class="mt-10"
|
||||
class="consumption-gauge mt-10"
|
||||
>
|
||||
<ConsumptionGauge
|
||||
:capacity="cpuTotal"
|
||||
:used="used"
|
||||
:units="cpuUnits"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
<div class="numbers">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="usedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.consumption-gauge {
|
||||
.numbers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.precent-data {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -132,16 +132,28 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="showIP">
|
||||
<span
|
||||
<div
|
||||
v-if="showIP"
|
||||
class="ip-list"
|
||||
>
|
||||
<div
|
||||
v-for="{ ip, name, isCustom } in ips"
|
||||
:key="`${ip}-${name}`"
|
||||
class="ip-item"
|
||||
>
|
||||
<CopyToClipboardText
|
||||
v-clean-tooltip="isCustom ? t('harvester.formatters.harvesterIpAddress.customIpTooltip') : name"
|
||||
:text="ip"
|
||||
:plain="isCustom"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ip-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import ConsumptionGauge from '@shell/components/ConsumptionGauge';
|
||||
import PercentageBar from '@shell/components/PercentageBar';
|
||||
import { METRIC, NODE } from '@shell/config/types';
|
||||
import { formatSi, exponentNeeded, UNITS, parseSi } from '@shell/utils/units';
|
||||
import { UNIT_SUFFIX } from '../utils/unit';
|
||||
export default {
|
||||
name: 'HarvesterMemoryUsed',
|
||||
components: { ConsumptionGauge },
|
||||
components: { PercentageBar },
|
||||
|
||||
props: {
|
||||
value: {
|
||||
@@ -76,6 +76,30 @@ export default {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
reservedPercentage() {
|
||||
return this.memoryTotal ? (this.reserved * 100) / this.memoryTotal : 0;
|
||||
},
|
||||
|
||||
usedPercentage() {
|
||||
return this.memoryTotal ? (this.used * 100) / this.memoryTotal : 0;
|
||||
},
|
||||
|
||||
reservedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.memoryFormatter(this.reserved || 0),
|
||||
total: this.memoryFormatter(this.memoryTotal || 0),
|
||||
unit: ` ${ this.memoryUnits }`,
|
||||
};
|
||||
},
|
||||
|
||||
usedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.memoryFormatter(this.used || 0),
|
||||
total: this.memoryFormatter(this.memoryTotal || 0),
|
||||
unit: ` ${ this.memoryUnits }`,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -96,50 +120,53 @@ export default {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ConsumptionGauge
|
||||
:capacity="memoryTotal"
|
||||
:used="reserved"
|
||||
:units="memoryUnits"
|
||||
:number-formatter="memoryFormatter"
|
||||
:resource-name="resourceName"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
<div class="consumption-gauge">
|
||||
<div class="numbers">
|
||||
<span class="mr-10">
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="reservedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUsed"
|
||||
class="mt-10"
|
||||
class="consumption-gauge mt-10"
|
||||
>
|
||||
<ConsumptionGauge
|
||||
:capacity="memoryTotal"
|
||||
:used="used"
|
||||
:units="memoryUnits"
|
||||
:number-formatter="memoryFormatter"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
<div class="numbers">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="usedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.consumption-gauge {
|
||||
.numbers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.precent-data {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<script>
|
||||
import ConsumptionGauge from '@shell/components/ConsumptionGauge';
|
||||
import PercentageBar from '@shell/components/PercentageBar';
|
||||
import { LONGHORN } from '@shell/config/types';
|
||||
import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
|
||||
import { UNIT_SUFFIX } from '../utils/unit';
|
||||
|
||||
export default {
|
||||
name: 'HarvesterStorageUsed',
|
||||
components: { ConsumptionGauge },
|
||||
components: { PercentageBar },
|
||||
|
||||
props: {
|
||||
value: {
|
||||
@@ -120,6 +120,14 @@ export default {
|
||||
unit: this.allocatedUnits,
|
||||
};
|
||||
},
|
||||
|
||||
usedPercentage() {
|
||||
return this.storageStats.maximum ? (this.storageStats.used * 100) / this.storageStats.maximum : 0;
|
||||
},
|
||||
|
||||
allocatedPercentage() {
|
||||
return this.storageStats.total ? (this.storageStats.scheduled * 100) / this.storageStats.total : 0;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -144,53 +152,54 @@ export default {
|
||||
<div>
|
||||
<div
|
||||
v-if="showAllocated"
|
||||
class="consumption-gauge"
|
||||
>
|
||||
<ConsumptionGauge
|
||||
:capacity="storageStats.total"
|
||||
:used="storageStats.scheduled"
|
||||
:units="allocatedUnits"
|
||||
:number-formatter="formatter"
|
||||
:resource-name="resourceName"
|
||||
>
|
||||
<template #title="{formattedPercentage}">
|
||||
<span>
|
||||
{{ t('harvester.dashboard.hardwareResourceGauge.allocated') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', allocatedAmountTemplateValues) }}
|
||||
<span class="ml-10 percentage">
|
||||
/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
<div class="numbers">
|
||||
<span class="mr-10">
|
||||
{{ t('harvester.dashboard.hardwareResourceGauge.allocated') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', allocatedAmountTemplateValues) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="allocatedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ConsumptionGauge
|
||||
:capacity="storageStats.maximum"
|
||||
:used="storageStats.used"
|
||||
:units="usedUnits"
|
||||
:number-formatter="formatter"
|
||||
:resource-name="showAllocated ? '' : resourceName"
|
||||
:class="{
|
||||
'mt-10': showAllocated,
|
||||
}"
|
||||
<div
|
||||
class="consumption-gauge"
|
||||
:class="{ 'mt-10': showAllocated }"
|
||||
>
|
||||
<template #title="{formattedPercentage}">
|
||||
<div class="numbers">
|
||||
<span>
|
||||
{{ t('node.detail.glance.consumptionGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
|
||||
<span class="ml-10 percentage">
|
||||
/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="usedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.consumption-gauge {
|
||||
.numbers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.precent-data {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -84,6 +84,8 @@ dialog:
|
||||
|
||||
harvester:
|
||||
branding:
|
||||
primeLabel: '{vendor}'
|
||||
primeEmptyLabel: ''
|
||||
logos:
|
||||
tip: 'Upload a logo to replace the Harvester logo in the top-level navigation header. Image height should be 21 pixels with a max width of 200 pixels. Max file size is 20KB. Accepted formats: JPEG, PNG, SVG.'
|
||||
favicon:
|
||||
@@ -331,7 +333,8 @@ harvester:
|
||||
message: Message
|
||||
phase: Phase
|
||||
attachedVM: Attached Virtual Machine
|
||||
cpuManager: CPU Manager
|
||||
cpuManager: CPU<br>Manager
|
||||
diskState: Disk
|
||||
routeConnectivityTooltip: Connectivity between the VM network and the management network, which the Harvester nodes are connected to.
|
||||
fingerprint: Fingerprint
|
||||
value: Value
|
||||
@@ -487,7 +490,6 @@ harvester:
|
||||
volume:
|
||||
upperType: Volume name
|
||||
lowerType: volume name
|
||||
needAtLeastOneBootable: 'At least one bootable volume is required!'
|
||||
image:
|
||||
ruleTip: 'The URL you have entered ends in an extension that we do not support. We only accept image files that end in .img, .iso, .qcow, .qcow2, .raw.'
|
||||
ruleFileTip: 'The file you have chosen ends in an extension that we do not support. We only accept image files that end in .img, .iso, .qcow, .qcow2, .raw.'
|
||||
@@ -798,6 +800,10 @@ harvester:
|
||||
setFirst: Set as root volume
|
||||
saveVolume: Update Volume
|
||||
encryption: Encryption
|
||||
shareable:
|
||||
label: Shareable
|
||||
tip: Allow multiple virtual machines to attach and write to this volume simultaneously.
|
||||
warning: Multiple virtual machines can write to this volume at the same time. The guest workloads must coordinate access to the shared block device, otherwise concurrent writes will corrupt the data. Workloads that fence through SCSI-3 Persistent Reservations (e.g. Windows Server Failover Clustering) also require persistent reservation support from the storage backend. Host cache and hypervisor disk locking are disabled, and backup or snapshot operations are rejected while the volume is shareable.
|
||||
vmImageVolumeTip: Disk size ({diskSize}) should greater than selected image virtual size ({imageVirtualSize})
|
||||
lockTooltip:
|
||||
all: All volumes are encrypted.
|
||||
@@ -831,13 +837,13 @@ harvester:
|
||||
title: "Network Data:"
|
||||
tip: "The network-data configuration allows you to customize the instance's networking interfaces by assigning subnet configuration, virtual device creation (bonds, bridges, VLANs) routes and DNS configuration. <a href='https://cloudinit.readthedocs.io/en/latest/reference/network-config-format-v1.html' target='_blank'>Learn more</a>"
|
||||
sysprep:
|
||||
title: Windows Sysprep Configuration
|
||||
title: Windows Unattended & Sysprep Configuration
|
||||
description: "Configure Windows automated installation using autounattend.xml. The configuration will be stored in a Kubernetes Secret and mounted as a CD-ROM during installation. <a href='https://docs.microsoft.com/en-us/windows-hardware/manufacture/desktop/automate-windows-setup' target='_blank'>Learn more</a>"
|
||||
createNew: Create new...
|
||||
createNewTitle: Create Windows Sysprep Template
|
||||
createNewTitle: Create Windows Unattended & Sysprep Template
|
||||
xmlContent: autounattend.xml content
|
||||
secret:
|
||||
label: Windows Sysprep Template
|
||||
label: Windows Unattended & Sysprep Template
|
||||
validation:
|
||||
invalidXml: Invalid XML syntax
|
||||
invalidNamespace: Invalid unattend.xml namespace. Expected 'urn:schemas-microsoft-com:unattend'
|
||||
@@ -1099,6 +1105,8 @@ harvester:
|
||||
downloadLog: Download Log
|
||||
logStatus: Log Download Status
|
||||
dismissMessage: Dismiss it
|
||||
upgradeAvailable: Upgrade Available
|
||||
upgradeUnavailable: Upgrade Unavailable
|
||||
upgradeInfo:
|
||||
warning: WARNING
|
||||
doc: Read the <a href="{url}" target="_blank">documentation</a> before starting the upgrade process. Ensure that you complete procedures that are relevant to your environment and the version you are upgrading to.
|
||||
@@ -1826,6 +1834,8 @@ harvester:
|
||||
'rancher-logging': rancher-logging is an add-on to collect versatile logs, events, and audits from the Harvester cluster and route them to many kinds of servers based on flows.
|
||||
'rancher-monitoring': rancher-monitoring is an add-on to collect Harvester cluster and virtual machine metrics, view them on the embedded dashboard, and send alert(s) to remote servers.
|
||||
'rancher-vcluster': rancher-vcluster deploys a virtual cluster (vcluster) with Rancher installed.
|
||||
'k3k': k3k is an add-on to deploy the k3k controller.
|
||||
'rancher-k3k': rancher-k3k deploys a k3k virtual cluster with Rancher installed.
|
||||
'harvester-seeder': harvester-seeder is an add-on that uses IPMI and Redfish to discover hardware information and perform out-of-band operations.
|
||||
'harvester-system/harvester-seeder': harvester-seeder is an add-on that uses IPMI and Redfish to discover hardware information and perform out-of-band operations.
|
||||
'harvester-csi-driver-lvm': harvester-csi-driver-lvm is an add-on allowing users to create PVC through the LVM with local devices.
|
||||
@@ -1836,6 +1846,7 @@ harvester:
|
||||
unknown: Unknown
|
||||
identifier: Identifier
|
||||
podNetwork: Pod Network
|
||||
ignored: Ignored
|
||||
usedBy: "Used by:"
|
||||
vlan: "VLAN {id}"
|
||||
vCpu: "{count} vCPU"
|
||||
@@ -1890,11 +1901,14 @@ harvester:
|
||||
providerSelect: Provider
|
||||
createNew: Create new provider
|
||||
requirementsTitle: Requirements
|
||||
requirementsText: "To migrate virtual machines from VMware, you will need a vCenter Server running version 6.5 or higher with a user account that has at least read permissions, and the source environment must be network-accessible from Rancher."
|
||||
requirementsText: "To migrate virtual machines from VMware, you will need a vCenter Server running version 6.5 or higher with a user account that has at least read permissions, and the source environment must be network-accessible from Harvester Node."
|
||||
name: Name
|
||||
urlLabel: vCenter/ESXi URL
|
||||
urlPlaceholder: "https://vcenter.example.com/sdk"
|
||||
urlHint: Enter the full URL including https://
|
||||
vddkImageLabel: VMware VDDK Image
|
||||
vddkImagePlaceholder: "[your-private-registry]/vddk-image:latest"
|
||||
vddkImageTooltip: Specify the VMware VDDK (Virtual Disk Development Kit) Image to accelerate and optimize VMware virtual machine migration.
|
||||
skipSsl: Skip SSL certificate verification
|
||||
skipSslHint: Not recommended for production environments
|
||||
testConnection:
|
||||
@@ -1916,6 +1930,7 @@ harvester:
|
||||
refreshNow: Refresh now
|
||||
availableVms: Available Virtual Machines
|
||||
selected: selected
|
||||
clearAll: Clear All
|
||||
saveSelection: Save Selection and Continue
|
||||
selectAllBanner:
|
||||
pageOnly: "Your current selection includes only VMs currently shown on the page."
|
||||
@@ -1954,14 +1969,15 @@ harvester:
|
||||
initializingMigration: Initializing migration
|
||||
finishedSuccessfully: Finished Successfully
|
||||
step: "Step {index}"
|
||||
vmCount: "{count} VMs"
|
||||
vmCount: "{count, plural, one {# VM} other {# VMs}}"
|
||||
vmId: "id: {id}"
|
||||
checkMigratedVm: Click to check migrated VM details
|
||||
configureMappings:
|
||||
title: Set Mappings
|
||||
description: Map VMware networks and datastores to Harvester and Longhorn target resources
|
||||
save: Save Mappings and Continue
|
||||
noTemplate: Start from scratch
|
||||
removeMap: Remove Map
|
||||
removeMap: Remove mapping
|
||||
networkMapping:
|
||||
title: Network Mapping
|
||||
description: Map VMware port groups to Harvester networks
|
||||
@@ -1969,27 +1985,62 @@ harvester:
|
||||
template: Use existing network mapping as template
|
||||
options:
|
||||
podNetworking: Management Network
|
||||
ignored: Ignored
|
||||
ignored: Ignored (No NIC will be created)
|
||||
storageMapping:
|
||||
title: Storage Mapping
|
||||
description: Map VMware datastores to Harvester storage classes
|
||||
placeholder: Choose a Longhorn Storage Volume
|
||||
placeholder: Choose a Harvester Storage Class
|
||||
template: Use existing storage mapping as template
|
||||
storageDefaults:
|
||||
title: 'Storage defaults — {name}'
|
||||
description: 'Set the volume mode and access modes applied to every datastore in this storage map that maps to {name}.'
|
||||
descriptionInherited: 'Applies to every datastore in this storage map that maps to {name}. The provider default for {provider} stays unchanged.'
|
||||
summary: 'Volume mode: {volumeMode} · Access mode: {accessModes}'
|
||||
inherited: 'Inherited from provider {provider}'
|
||||
volumeMode: Volume Mode
|
||||
accessMode: Access Mode
|
||||
edit: Edit
|
||||
cancel: Cancel
|
||||
apply: Apply
|
||||
resetToProviderDefault: Reset to Provider Default
|
||||
applyOverride: Apply Override
|
||||
reviewMigration:
|
||||
title: Review Migration Plan
|
||||
description: Confirm your migration settings before starting the transfer of VMs to the target cluster.
|
||||
planName: Name
|
||||
planNamePlaceholder: "e.g. my-migration-plan"
|
||||
planNameProviderConflict: 'The name “{name}” is already used by an existing provider. Please input a different plan name.'
|
||||
planNamePlanConflict: 'The name “{name}” is already used by an existing migration plan. Please input a different plan name.'
|
||||
migrationDetails: Migration Details
|
||||
migrationDetailsDescription: Name this plan and choose the namespace where migrated VMs will be created.
|
||||
totalVms: Total VMs
|
||||
vcpu: vCPU
|
||||
memory: Memory
|
||||
storage: Storage
|
||||
source: Source
|
||||
targetNamespace: Target Namespace
|
||||
provider: Provider
|
||||
targetNamespace: Namespace
|
||||
targetNamespacePlaceholder: "Select target namespace"
|
||||
migrationMode: Migration Mode
|
||||
coldMigration: Cold Migration
|
||||
coldMigrationDescription: All source VMs will be powered off during migration.
|
||||
coldMigrationHint: Plan a maintenance window and notify relevant stakeholders before starting.
|
||||
virtualMachines: Virtual Machines
|
||||
editSelection: Edit selection
|
||||
noVmSelected: "No VMs selected. Return to "
|
||||
noVmSelectedLink: "Step 2 to select virtual machines."
|
||||
columns:
|
||||
vmName: VM Name
|
||||
os: Operating System
|
||||
resources: Resources
|
||||
powerState: Power State
|
||||
networkMapping: Network Mapping
|
||||
storageMapping: Storage Mapping
|
||||
sourceTarget: "Source \u2192 Target"
|
||||
actions:
|
||||
menuLabel: Actions
|
||||
editMappings: Edit Mappings
|
||||
removeFromPlan: Remove from Plan
|
||||
warningTitle: "Cold Migration Warning"
|
||||
warningMessage: "All source VMs will be powered off, and downtime will occur during migration. Plan your maintenance window accordingly and notify relevant stakeholders"
|
||||
startMigration: Start Migration Plan
|
||||
@@ -2089,6 +2140,14 @@ harvester:
|
||||
hostname: Hostname
|
||||
rancherVersion: Rancher Version
|
||||
password: Bootstrap Password
|
||||
rancherK3k:
|
||||
accessRancher: Access the Rancher Dashboard
|
||||
hostname: Hostname
|
||||
version: Rancher Version
|
||||
password: Bootstrap Password
|
||||
passwordTooltip: The initial password in Rancher for the first time login.
|
||||
enable:
|
||||
title: Enable K3k
|
||||
switchFailed: "{action} {name} failed!"
|
||||
nvidiaDriverToolkit:
|
||||
titles:
|
||||
@@ -2254,6 +2313,12 @@ harvester:
|
||||
prefix: The nvidia-driver-toolkit add-on is not enabled, click
|
||||
middle: here
|
||||
suffix: to enable it to manage your SR-IOV GPU devices.
|
||||
enable:
|
||||
title: Enable SR-IOV GPU Device
|
||||
skipMigConfiguration: Use timesliced mode (skip MIG configuration)
|
||||
note: If unchecked, MIG mode will be attempted by default. If MIG mode is not supported or fails to initialize, it will fall back to timesliced mode. The actual mode depends on whether the GPU supports MIG.
|
||||
timeslicedBadge: timesliced mode
|
||||
timesliced: Timesliced
|
||||
|
||||
migconfiguration:
|
||||
label: vGPU MIG Configurations
|
||||
@@ -2364,7 +2429,15 @@ typeDescription:
|
||||
harvester: "Branding allows administrators to globally re-brand the UI by customizing the Harvester product name, logos and color scheme."
|
||||
|
||||
advancedSettings:
|
||||
experimental: 'Experimental features allow users to test and evaluate early-access functionality prior to official supported releases'
|
||||
tags:
|
||||
modified:
|
||||
label: Modified
|
||||
experimental:
|
||||
label: Experimental
|
||||
description: 'Experimental: The feature is incomplete but its essential functionality is operational. The feature is not recommended for use in production environments.'
|
||||
preview:
|
||||
label: Technical Preview
|
||||
description: 'Technical Preview: The feature is almost complete and its functionality is not expected to change significantly. Explore the feature extensively before using in production environments.'
|
||||
descriptions:
|
||||
'harv-vlan': Default Network Interface name of the VLAN network.
|
||||
'harv-backup-target': Custom backup target to store virtual machine backups.
|
||||
@@ -2374,6 +2447,7 @@ advancedSettings:
|
||||
'harv-containerd-registry': Containerd Registry Configuration to connect private registries.
|
||||
'harv-log-level': Configure Harvester server log level. Defaults to Info.
|
||||
'harv-server-version': Harvester server version.
|
||||
'harv-server-flavor': "Indicates the Harvester edition: Prime or Community."
|
||||
'harv-upgrade-checker-enabled': Specifies whether to enable Harvester upgrade check or not. Default is True.
|
||||
'harv-upgrade-checker-url': Default Harvester upgrade check url. Only used when the <code>upgrade-checker-enabled</code> is equal to True.
|
||||
'harv-ui-source': Configure how to load the UI source. The `External` option is used to load the UI from a ui-index URL, while the `Bundled` option loads the UI from the local Harvester server.
|
||||
|
||||
@@ -86,6 +86,13 @@ export default {
|
||||
value: 'spec.address',
|
||||
sort: ['spec.address']
|
||||
},
|
||||
{
|
||||
name: 'timesliced',
|
||||
labelKey: 'harvester.sriovgpu.timesliced',
|
||||
value: 'isTimesliced',
|
||||
formatter: 'Checked',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'vfAddresses',
|
||||
label: 'VF Addresses',
|
||||
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
/>
|
||||
|
||||
<a
|
||||
v-if="scope.row.metadata.name === 'rancher-vcluster' && scope.row.spec.enabled"
|
||||
v-if="['rancher-vcluster', 'rancher-k3k'].includes(scope.row.metadata.name) && scope.row.spec.enabled"
|
||||
v-tooltip="t('harvester.addons.rancherVcluster.accessRancher')"
|
||||
class="ml-5"
|
||||
rel="nofollow noopener noreferrer"
|
||||
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
},
|
||||
{
|
||||
...NAME,
|
||||
width: 130,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
name: 'host-ip',
|
||||
@@ -136,14 +136,14 @@ export default {
|
||||
value: 'id',
|
||||
formatter: 'HarvesterCPUPinning',
|
||||
formatterOpts: { rows: this.rows },
|
||||
width: 150,
|
||||
width: 75,
|
||||
align: 'center',
|
||||
});
|
||||
}
|
||||
if (this.hasLonghornSchema) {
|
||||
out.push({
|
||||
name: 'diskState',
|
||||
labelKey: 'tableHeaders.diskState',
|
||||
labelKey: 'harvester.tableHeaders.diskState',
|
||||
value: 'diskState',
|
||||
formatter: 'HarvesterDiskState',
|
||||
width: 130,
|
||||
@@ -156,7 +156,6 @@ export default {
|
||||
name: 'console',
|
||||
label: ' ',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
});
|
||||
|
||||
return out;
|
||||
@@ -239,6 +238,8 @@ export default {
|
||||
v-if="!row.consoleUrl"
|
||||
:href="consoleDocLink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="console-info"
|
||||
><i class="icon icon-info" /></a>
|
||||
</div>
|
||||
</template>
|
||||
@@ -249,5 +250,13 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.console-button {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.console-info {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,6 +38,10 @@ export const SSH_EXISTING_TYPE = {
|
||||
export default {
|
||||
methods: {
|
||||
hasCloudConfigComment(userScript) {
|
||||
if (typeof userScript === 'string' && /^\s*#cloud-config(\s|$)/.test(userScript)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check that userData contains: #cloud-config
|
||||
const userDataDoc = userScript ? YAML.parseDocument(userScript) : YAML.parseDocument({});
|
||||
const items = userDataDoc?.contents?.items || [];
|
||||
@@ -52,6 +56,14 @@ export default {
|
||||
exist = true;
|
||||
}
|
||||
|
||||
if (userDataDoc?.contents?.commentBefore === 'cloud-config' || userDataDoc?.contents?.commentBefore?.includes('cloud-config\n')) {
|
||||
exist = true;
|
||||
}
|
||||
|
||||
if (userDataDoc?.contents?.comment === 'cloud-config' || userDataDoc?.contents?.comment?.includes('cloud-config\n')) {
|
||||
exist = true;
|
||||
}
|
||||
|
||||
items.map((item) => {
|
||||
const key = item.key;
|
||||
|
||||
|
||||
@@ -25,7 +25,9 @@ import { HCI } from '../../types';
|
||||
import { parseVolumeClaimTemplates, EMPTY_IMAGE } from '../../utils/vm';
|
||||
import impl, { QGA_JSON, USB_TABLET } from './impl';
|
||||
import { GIBIBYTE } from '../../utils/unit';
|
||||
import { VOLUME_MODE, FILESYSTEM_SOURCE_TYPE } from '@pkg/harvester/config/types';
|
||||
import { VOLUME_MODE, ACCESS_MODE, FILESYSTEM_SOURCE_TYPE } from '@pkg/harvester/config/types';
|
||||
|
||||
const { READ_WRITE_MANY } = ACCESS_MODE;
|
||||
|
||||
const LONGHORN_V2_DATA_ENGINE = 'longhorn-system/v2-data-engine';
|
||||
|
||||
@@ -162,6 +164,12 @@ export default {
|
||||
machineType: '',
|
||||
machineTypes: [],
|
||||
secretName: '',
|
||||
// Tracks the name prefix that `secretName` was generated from, so it can be
|
||||
// regenerated if the VM name changes (e.g. after a failed create attempt is retried
|
||||
// with a different name). See harvester/harvester#11174.
|
||||
secretNamePrefixUsed: '',
|
||||
// Same purpose as secretNamePrefixUsed, but for the Windows sysprep secret name.
|
||||
sysprepSecretNamePrefixUsed: '',
|
||||
secretRef: null,
|
||||
showAdvanced: false,
|
||||
deleteAgent: true,
|
||||
@@ -270,7 +278,7 @@ export default {
|
||||
},
|
||||
|
||||
customAccessMode() {
|
||||
return this.storageClassSetting.accessModes || 'ReadWriteMany';
|
||||
return this.storageClassSetting.accessModes || READ_WRITE_MANY;
|
||||
},
|
||||
|
||||
isWindows() {
|
||||
@@ -498,7 +506,7 @@ export default {
|
||||
id: randomStr(5),
|
||||
source: SOURCE_TYPE.IMAGE,
|
||||
name: 'disk-0',
|
||||
accessMode: 'ReadWriteMany', // root disk only support LHv1 volume, should be RWX
|
||||
accessMode: READ_WRITE_MANY, // root disk only support LHv1 volume, should be RWX
|
||||
bus,
|
||||
volumeName: '',
|
||||
size,
|
||||
@@ -564,7 +572,7 @@ export default {
|
||||
const pvcResource = allPVCs.find( (O) => O.id === `${ namespace }/${ volume?.persistentVolumeClaim?.claimName }`);
|
||||
|
||||
source = SOURCE_TYPE.ATTACH_VOLUME;
|
||||
accessMode = pvcResource?.spec?.accessModes?.[0] || 'ReadWriteMany';
|
||||
accessMode = pvcResource?.spec?.accessModes?.[0] || READ_WRITE_MANY;
|
||||
size = pvcResource?.spec?.resources?.requests?.storage || '10Gi';
|
||||
storageClassName = pvcResource?.spec?.storageClassName;
|
||||
volumeMode = pvcResource?.spec?.volumeMode || VOLUME_MODE.BLOCK;
|
||||
@@ -610,6 +618,7 @@ export default {
|
||||
type,
|
||||
storageClassName,
|
||||
hotpluggable,
|
||||
shareable: DISK.shareable || false,
|
||||
volumeStatus,
|
||||
dataSource,
|
||||
namespace,
|
||||
@@ -783,18 +792,41 @@ export default {
|
||||
}
|
||||
|
||||
const staticIpPrefix = `${ HCI_ANNOTATIONS.STATIC_IP }/`;
|
||||
const annotations = vm.metadata.annotations;
|
||||
|
||||
Object.keys(vm.metadata.annotations).forEach((key) => {
|
||||
if (key.startsWith(staticIpPrefix)) {
|
||||
delete vm.metadata.annotations[key];
|
||||
}
|
||||
});
|
||||
const desired = {};
|
||||
|
||||
this.networkRows.forEach((row) => {
|
||||
if (row.name && row.staticIp) {
|
||||
vm.metadata.annotations[`${ staticIpPrefix }${ row.name }`] = row.staticIp;
|
||||
desired[`${ staticIpPrefix }${ row.name }`] = row.staticIp;
|
||||
}
|
||||
});
|
||||
|
||||
const current = {};
|
||||
|
||||
Object.keys(annotations).forEach((key) => {
|
||||
if (key.startsWith(staticIpPrefix)) {
|
||||
current[key] = annotations[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Skip mutation when already in sync to avoid triggering a reactive update loop.
|
||||
const desiredKeys = Object.keys(desired);
|
||||
const currentKeys = Object.keys(current);
|
||||
const isSame = desiredKeys.length === currentKeys.length &&
|
||||
desiredKeys.every((key) => current[key] === desired[key]);
|
||||
|
||||
if (isSame) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentKeys.forEach((key) => {
|
||||
delete annotations[key];
|
||||
});
|
||||
|
||||
Object.entries(desired).forEach(([key, value]) => {
|
||||
annotations[key] = value;
|
||||
});
|
||||
},
|
||||
|
||||
setCPUAndMemory() {
|
||||
@@ -866,18 +898,30 @@ export default {
|
||||
}
|
||||
});
|
||||
|
||||
if (this.needNewSecret || !this.secretName) {
|
||||
// Regenerate the cloud-init secret name whenever it hasn't been generated yet, or the VM
|
||||
// name has changed since it was last generated (e.g. a previous create attempt failed with
|
||||
// an invalid/duplicate name and the user corrected it). Without this, a stale secret name
|
||||
// derived from a rejected attempt gets reused for the VM that's actually created.
|
||||
// See harvester/harvester#11174.
|
||||
if (this.needNewSecret || !this.secretName || (this.isCreate && this.secretNamePrefixUsed !== this.secretNamePrefix)) {
|
||||
this.secretName = this.generateSecretName(this.secretNamePrefix);
|
||||
this.secretNamePrefixUsed = this.secretNamePrefix;
|
||||
}
|
||||
|
||||
if (!disks.find((D) => D.name === 'sysprep') && this.isWindows) {
|
||||
const hasSysprepContent = !!this.sysprep.xmlContent?.trim?.();
|
||||
|
||||
// If we have content but no secret name, it's a new secret that needs a name.
|
||||
if (hasSysprepContent && !this.sysprep.secretName?.trim?.()) {
|
||||
// If we have content but no secret name, it's a new secret that needs a name. Also
|
||||
// regenerate when creating a VM if the name prefix has changed since it was last
|
||||
// generated.
|
||||
const sysprepNeedsNewSecretName = !this.sysprep.secretName?.trim?.() ||
|
||||
(this.isCreate && this.sysprepSecretNamePrefixUsed !== '' && this.sysprepSecretNamePrefixUsed !== this.secretNamePrefix);
|
||||
|
||||
if (hasSysprepContent && sysprepNeedsNewSecretName) {
|
||||
const prefix = this.secretNamePrefix ? `${ this.secretNamePrefix }-windows-sysprep` : 'windows-sysprep';
|
||||
|
||||
this.sysprep.secretName = `${ this.value.metadata.namespace }/${ this.generateSecretName(prefix) }`;
|
||||
this.sysprepSecretNamePrefixUsed = this.secretNamePrefix;
|
||||
}
|
||||
|
||||
// Preserve/attach sysprep whenever a secret is selected/known.
|
||||
@@ -896,38 +940,44 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
if (!disks.find( (D) => D.name === 'cloudinitdisk') && (this.userData || this.networkData)) {
|
||||
if (!this.isWindows) {
|
||||
disks.push({
|
||||
name: 'cloudinitdisk',
|
||||
disk: { bus: 'virtio' }
|
||||
});
|
||||
if (!disks.find( (D) => D.name === 'cloudinitdisk') && (this.userData || this.networkScript)) {
|
||||
disks.push({
|
||||
name: 'cloudinitdisk',
|
||||
disk: { bus: 'virtio' }
|
||||
});
|
||||
|
||||
const userData = this.getUserData({ osType: this.osType, installAgent: this.installAgent });
|
||||
const cloudinitdisk = {
|
||||
name: 'cloudinitdisk',
|
||||
cloudInitNoCloud: {}
|
||||
};
|
||||
const userData = this.getUserData({ osType: this.osType, installAgent: this.installAgent });
|
||||
const cloudinitdisk = {
|
||||
name: 'cloudinitdisk',
|
||||
cloudInitNoCloud: {}
|
||||
};
|
||||
|
||||
if (this.saveUserDataAsClearText) {
|
||||
cloudinitdisk.cloudInitNoCloud.userData = userData;
|
||||
} else {
|
||||
cloudinitdisk.cloudInitNoCloud.secretRef = { name: this.secretName };
|
||||
}
|
||||
|
||||
if (this.saveNetworkDataAsClearText) {
|
||||
cloudinitdisk.cloudInitNoCloud.networkData = this.networkScript;
|
||||
} else {
|
||||
cloudinitdisk.cloudInitNoCloud.networkDataSecretRef = { name: this.secretName };
|
||||
}
|
||||
|
||||
volumes.push(cloudinitdisk);
|
||||
if (this.saveUserDataAsClearText) {
|
||||
cloudinitdisk.cloudInitNoCloud.userData = userData;
|
||||
} else {
|
||||
cloudinitdisk.cloudInitNoCloud.secretRef = { name: this.secretName };
|
||||
}
|
||||
|
||||
if (this.saveNetworkDataAsClearText) {
|
||||
cloudinitdisk.cloudInitNoCloud.networkData = this.networkScript;
|
||||
} else {
|
||||
cloudinitdisk.cloudInitNoCloud.networkDataSecretRef = { name: this.secretName };
|
||||
}
|
||||
|
||||
volumes.push(cloudinitdisk);
|
||||
}
|
||||
|
||||
const specDisks = this.spec?.template?.spec?.domain?.devices?.disks;
|
||||
const mergedDisks = this.mergeDeviceList(specDisks, disks);
|
||||
|
||||
// `shareable` is an attachment-level opt-in, remove the field
|
||||
// inherited from the old spec when the disk row no longer requests it
|
||||
mergedDisks.forEach((disk) => {
|
||||
if (disk.shareable && !disks.find((D) => D.name === disk.name)?.shareable) {
|
||||
delete disk.shareable;
|
||||
}
|
||||
});
|
||||
|
||||
let spec = {
|
||||
...this.spec,
|
||||
runStrategy: this.runStrategy,
|
||||
@@ -1124,6 +1174,16 @@ export default {
|
||||
},
|
||||
|
||||
getInitUserData(config) {
|
||||
// Windows guests don't use qemu-guest-agent via systemd (VMDP installs
|
||||
// the QGA as a Windows service), and the Linux `runcmd` recipe would
|
||||
// fail on Cloudbase-Init. Return an empty string so `this.userData`
|
||||
// stays falsy on Windows until the user actually enters cloud-config
|
||||
// content — this prevents emitting a spurious cloudinitdisk volume
|
||||
// and Secret for every Windows VM (Copilot review comment on #984).
|
||||
if (config.osType === 'windows') {
|
||||
return '';
|
||||
}
|
||||
|
||||
const _QGA_JSON = this.getMatchQGA(config.osType);
|
||||
|
||||
const out = jsyaml.dump(_QGA_JSON);
|
||||
@@ -1151,9 +1211,10 @@ export default {
|
||||
|
||||
userDataDoc = config.installAgent ? this.mergeQGA({ userDataDoc, ...config }) : this.deleteQGA({ userDataDoc, ...config });
|
||||
const userDataYaml = userDataDoc.toString();
|
||||
const userDataValue = userDataDoc.toJSON();
|
||||
|
||||
if (userDataYaml === '{}\n') {
|
||||
// When the YAML parsed value is '{}\n', it means that the userData is empty, then undefined is returned.
|
||||
if (userDataValue === null || (typeof userDataValue === 'object' && !Array.isArray(userDataValue) && isEmpty(userDataValue))) {
|
||||
// Empty userData should not create cloud-init content like `null`.
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@@ -1202,6 +1263,10 @@ export default {
|
||||
out.cdrom = { bus: R.bus };
|
||||
}
|
||||
|
||||
if (R.shareable) {
|
||||
out.shareable = true;
|
||||
}
|
||||
|
||||
out.bootOrder = index + 1;
|
||||
|
||||
return out;
|
||||
@@ -1252,8 +1317,9 @@ export default {
|
||||
case SOURCE_TYPE.IMAGE: {
|
||||
const image = this.images.find( (I) => R.image === I.id);
|
||||
|
||||
out.spec.storageClassName = R.realName ? R.storageClassName : (R.storageClassName || image?.storageClassName);
|
||||
|
||||
if (image) {
|
||||
out.spec.storageClassName = image.storageClassName;
|
||||
out.metadata.annotations = { [HCI_ANNOTATIONS.IMAGE_ID]: image.id };
|
||||
} else {
|
||||
out.metadata.annotations = { [HCI_ANNOTATIONS.IMAGE_ID]: '' };
|
||||
@@ -1326,13 +1392,22 @@ export default {
|
||||
*/
|
||||
deleteYamlDocProp(doc, paths) {
|
||||
try {
|
||||
const item = doc.getIn([])?.items[0];
|
||||
const key = item?.key;
|
||||
const hasCloudConfigComment = !!key?.commentBefore?.includes('cloud-config');
|
||||
const isMatchProp = key.source === paths[paths.length - 1];
|
||||
const items = doc.getIn([])?.items;
|
||||
const firstKey = items?.[0]?.key;
|
||||
const hasCloudConfigComment = !!firstKey?.commentBefore?.includes('cloud-config');
|
||||
const isFirstProp = firstKey?.source === paths[paths.length - 1];
|
||||
|
||||
if (key && hasCloudConfigComment && isMatchProp) {
|
||||
// Comments are mounted on the next node and we should not delete the node containing cloud-config
|
||||
if (firstKey && hasCloudConfigComment && isFirstProp) {
|
||||
const comment = firstKey.commentBefore;
|
||||
|
||||
doc.deleteIn(paths);
|
||||
|
||||
// Move the comment to the new first key; if no keys remain the comment is lost.
|
||||
const newFirstKey = doc.getIn([])?.items?.[0]?.key;
|
||||
|
||||
if (newFirstKey) {
|
||||
newFirstKey.commentBefore = comment;
|
||||
}
|
||||
} else {
|
||||
doc.deleteIn(paths);
|
||||
}
|
||||
@@ -1383,7 +1458,6 @@ export default {
|
||||
if (packages.length > 0) {
|
||||
userDataDoc.setIn(['packages'], packages);
|
||||
} else {
|
||||
userDataDoc.setIn(['packages'], []); // It needs to be set empty first, as it is possible that cloud-init comments are mounted on this node
|
||||
this.deleteYamlDocProp(userDataDoc, ['packages']);
|
||||
this.deleteYamlDocProp(userDataDoc, ['package_update']);
|
||||
}
|
||||
@@ -1398,7 +1472,7 @@ export default {
|
||||
},
|
||||
|
||||
deleteQGA(config) {
|
||||
const { osType, userDataDoc, deletePackage = false } = config;
|
||||
const { osType, userDataDoc } = config;
|
||||
|
||||
const userDataTemplateValue = this.$store.getters['harvester/byId'](CONFIG_MAP, this.userDataTemplateId)?.data?.cloudInit || '';
|
||||
|
||||
@@ -1407,6 +1481,15 @@ export default {
|
||||
const packages = userDataJSON?.packages || [];
|
||||
const runcmd = userDataJSON?.runcmd || [];
|
||||
|
||||
// Special handling of OS types.
|
||||
let deletePackage = config.deletePackage ?? false;
|
||||
|
||||
switch (osType) {
|
||||
case 'windows':
|
||||
deletePackage = true;
|
||||
break;
|
||||
}
|
||||
|
||||
if (Array.isArray(packages) && deletePackage) {
|
||||
const templateHasQGAPackage = this.convertToJson(userDataTemplateValue);
|
||||
|
||||
@@ -1432,7 +1515,6 @@ export default {
|
||||
if (packages.length > 0) {
|
||||
userDataDoc.setIn(['packages'], packages);
|
||||
} else {
|
||||
userDataDoc.setIn(['packages'], []);
|
||||
this.deleteYamlDocProp(userDataDoc, ['packages']);
|
||||
this.deleteYamlDocProp(userDataDoc, ['package_update']);
|
||||
}
|
||||
@@ -1465,7 +1547,7 @@ export default {
|
||||
},
|
||||
|
||||
async saveSecret(vm) {
|
||||
if (!vm?.spec || !this.secretName || this.isWindows) {
|
||||
if (!vm?.spec || !this.secretName) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -1886,8 +1968,6 @@ export default {
|
||||
isWindows(val) {
|
||||
if (val) {
|
||||
this['sshKey'] = [];
|
||||
this['userScript'] = undefined;
|
||||
this['networkScript'] = undefined;
|
||||
this['installAgent'] = false;
|
||||
}
|
||||
},
|
||||
@@ -1947,9 +2027,8 @@ export default {
|
||||
|
||||
osType(neu, old) {
|
||||
this.installAgent = old === 'windows' ? true : this.installAgent;
|
||||
const out = old === 'windows' ? this.getInitUserData({ osType: neu }) : this.getUserData({ installAgent: this.installAgent, osType: neu });
|
||||
this.userScript = this.getUserData({ installAgent: this.installAgent, osType: neu });
|
||||
|
||||
this['userScript'] = out;
|
||||
this.refreshYamlEditor();
|
||||
},
|
||||
|
||||
|
||||
@@ -69,16 +69,15 @@ export default class SRIOVDevice extends SteveModel {
|
||||
return this.spec.enabled && this.status?.vfAddresses?.length > 0 && this.status?.vGPUDevices?.length > 0;
|
||||
}
|
||||
|
||||
async enableDevice() {
|
||||
try {
|
||||
this.spec.enabled = true;
|
||||
await this.save();
|
||||
} catch (err) {
|
||||
this.$dispatch('growl/fromError', {
|
||||
title: this.t('generic.notification.title.error', { name: escapeHtml(this.metadata.name) }),
|
||||
err,
|
||||
}, { root: true });
|
||||
}
|
||||
get isTimesliced() {
|
||||
return this.metadata?.annotations?.[HCI_ANNOTATIONS.SKIP_MIG_CONFIGURATION] === 'true';
|
||||
}
|
||||
|
||||
enableDevice() {
|
||||
this.$dispatch('promptModal', {
|
||||
resources: [this],
|
||||
component: 'EnableSriovGpuDevice'
|
||||
});
|
||||
}
|
||||
|
||||
async disableDevice() {
|
||||
|
||||
@@ -69,6 +69,11 @@ export default class HarvesterResource extends SteveModel {
|
||||
}
|
||||
}
|
||||
|
||||
// Disable Resources/ Extras cards in resource details pages
|
||||
get resourcesCardRows() {
|
||||
return [];
|
||||
}
|
||||
|
||||
cleanForSave(data, _forNew) {
|
||||
return data;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import SYSTEM_NAMESPACES from '@shell/config/system-namespaces';
|
||||
import { get } from '@shell/utils/object';
|
||||
import { NAMESPACE } from '@shell/config/types';
|
||||
import { PRODUCT_NAME as HARVESTER_PRODUCT } from '@pkg/harvester/config/harvester';
|
||||
import { FORKLIFT_NAMESPACE } from '@pkg/harvester/config/harvester-map';
|
||||
import { HCI } from '../../types';
|
||||
|
||||
const OBSCURE_NAMESPACE_PREFIX = [
|
||||
@@ -93,6 +94,10 @@ export default class HciNamespace extends namespace {
|
||||
}
|
||||
|
||||
get isSystem() {
|
||||
if (this.metadata?.name === FORKLIFT_NAMESPACE) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const systemNamespaces = ['fleet-default'];
|
||||
|
||||
if (systemNamespaces.includes(this.metadata.name)) {
|
||||
|
||||
@@ -5,12 +5,14 @@ import HarvesterResource from './harvester';
|
||||
import { HCI } from '../types';
|
||||
|
||||
const HARVESTER_NVIDIA_DRIVER_TOOLKIT = 'harvester-system/nvidia-driver-toolkit';
|
||||
const RANCHER_VCLUSTER = 'harvester-system/rancher-vcluster';
|
||||
const RANCHER_K3K_ADDON = 'rancher-k3k/rancher-k3k';
|
||||
|
||||
export default class HciAddonConfig extends HarvesterResource {
|
||||
get availableActions() {
|
||||
const out = super._availableActions;
|
||||
|
||||
if (this.id === 'harvester-system/rancher-vcluster') {
|
||||
if (this.id === RANCHER_VCLUSTER || this.id === RANCHER_K3K_ADDON) {
|
||||
const rancherDashboard = {
|
||||
action: 'goToRancher',
|
||||
enabled: this.spec.enabled,
|
||||
@@ -57,6 +59,15 @@ export default class HciAddonConfig extends HarvesterResource {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.spec.enabled && this.id === RANCHER_K3K_ADDON) {
|
||||
this.$dispatch('promptModal', {
|
||||
resources: [this],
|
||||
component: 'HarvesterEnableK3k',
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.spec.enabled = !this.spec.enabled;
|
||||
await this.save();
|
||||
} catch (err) {
|
||||
@@ -69,18 +80,19 @@ export default class HciAddonConfig extends HarvesterResource {
|
||||
}
|
||||
|
||||
goToRancher() {
|
||||
const valuesContent = jsyaml.load(this.spec.valuesContent);
|
||||
|
||||
window.open(
|
||||
`https://${ valuesContent.hostname }`,
|
||||
this.rancherHostname,
|
||||
'_blank',
|
||||
);
|
||||
}
|
||||
|
||||
get rancherHostname() {
|
||||
const valuesContent = jsyaml.load(this.spec.valuesContent);
|
||||
const valuesContent = jsyaml.load(this.spec.valuesContent) || {};
|
||||
|
||||
return `https://${ valuesContent.hostname }`;
|
||||
// rancher-k3k nests the hostname under `rancher`, rancher-vcluster keeps it at the top level
|
||||
const hostname = this.id === RANCHER_K3K_ADDON ? valuesContent.rancher?.hostname : valuesContent.hostname;
|
||||
|
||||
return `https://${ hostname }`;
|
||||
}
|
||||
|
||||
get stateColor() {
|
||||
|
||||
@@ -1315,6 +1315,18 @@ export default class VirtVm extends HarvesterResource {
|
||||
}
|
||||
}
|
||||
|
||||
get provisionedHostDevices() {
|
||||
// Rancher-provisioned VMs store hostDevices.name as a placeholder ('provisioned'); the
|
||||
// real allocated PCI device names live in this annotation, keyed by resourceName.
|
||||
try {
|
||||
const deviceAllocationDetails = JSON.parse(this.metadata?.annotations[HCI_ANNOTATIONS.VM_DEVICE_ALLOCATION_DETAILS] || '{}');
|
||||
|
||||
return deviceAllocationDetails?.hostdevices || {};
|
||||
} catch (error) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
get schedulingVMBackupFeatureEnabled() {
|
||||
return this.$rootGetters['harvester-common/getFeatureEnabled']('schedulingVMBackup');
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import ManagementSetting from '@shell/models/management.cattle.io.setting';
|
||||
import { HCI_SETTING } from '../../config/settings';
|
||||
|
||||
export default class HarvesterManagementSetting extends ManagementSetting {
|
||||
get _availableActions() {
|
||||
const actions = super._availableActions;
|
||||
|
||||
if (this.$rootGetters['isStandaloneHarvester'] && this.id === HCI_SETTING.UI_PL) {
|
||||
return actions.filter((action) => !['goToClone', 'promptRemove'].includes(action.action));
|
||||
}
|
||||
|
||||
return actions;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "harvester",
|
||||
"description": "Rancher UI Extension for Harvester",
|
||||
"version": "1.9.0-rc2",
|
||||
"version": "1.10.0-dev",
|
||||
"private": false,
|
||||
"rancher": {
|
||||
"annotations": {
|
||||
|
||||
@@ -63,6 +63,7 @@ export default {
|
||||
return {
|
||||
vendor: getVendor(),
|
||||
uiPLSetting: {},
|
||||
privateLabelDraft: null,
|
||||
uiLogoDarkSetting: {},
|
||||
uiLogoDark: '',
|
||||
uiLogoLightSetting: {},
|
||||
@@ -81,6 +82,17 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isHarvesterPrime() {
|
||||
return !!this.$store.getters['harvester-common/isHarvesterPrime'];
|
||||
},
|
||||
privateLabel: {
|
||||
get() {
|
||||
return this.privateLabelDraft ?? (this.isHarvesterPrime ? this.$store.getters['harvester-common/privateLabel'] : this.uiPLSetting.value);
|
||||
},
|
||||
set(value) {
|
||||
this.privateLabelDraft = value;
|
||||
}
|
||||
},
|
||||
mode() {
|
||||
const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
|
||||
|
||||
@@ -112,7 +124,7 @@ export default {
|
||||
this.errors.push(e);
|
||||
},
|
||||
async save(btnCB) {
|
||||
this.uiPLSetting.value = this.uiPLSetting.value.replaceAll(/[\<>&=#()"]/gm, '');
|
||||
this.uiPLSetting.value = (this.privateLabel || '').replaceAll(/[\<>&=#()"]/gm, '');
|
||||
if (this.customizeLogo) {
|
||||
this.uiLogoLightSetting.value = this.uiLogoLight;
|
||||
this.uiLogoDarkSetting.value = this.uiLogoDark;
|
||||
@@ -169,7 +181,7 @@ export default {
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="uiPLSetting.value"
|
||||
v-model:value="privateLabel"
|
||||
:label="t('branding.uiPL.label')"
|
||||
:mode="mode"
|
||||
:maxlength="100"
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<script>
|
||||
import Loading from '@shell/components/Loading';
|
||||
import { HCI } from '../../../../../types';
|
||||
import SerialConsole from '../../../../../components/SerialConsole';
|
||||
|
||||
export default {
|
||||
components: { SerialConsole, Loading },
|
||||
components: { SerialConsole },
|
||||
|
||||
async fetch() {
|
||||
this.rows = await this.$store.dispatch('harvester/findAll', { type: HCI.VMI });
|
||||
@@ -38,16 +37,44 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Loading v-if="$fetchState.pending" />
|
||||
<SerialConsole
|
||||
v-else
|
||||
ref="serialConsole"
|
||||
v-model:value="vmi"
|
||||
/>
|
||||
<div class="serial-console-page">
|
||||
<SerialConsole
|
||||
ref="serialConsole"
|
||||
:value="vmi || {}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
body, #__nuxt, #__layout, main {
|
||||
<style lang="scss">
|
||||
html,
|
||||
body,
|
||||
#__nuxt,
|
||||
#__layout,
|
||||
main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.serial-console-page {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
min-height: 0;
|
||||
background: var(--body-bg);
|
||||
color: var(--terminal-text);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 6px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.harvester-shell-container {
|
||||
height: 100%;
|
||||
background: var(--terminal-bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,6 +37,7 @@ const inStore = computed(() => store.getters['currentProduct'].inStore);
|
||||
const allPlans = computed(() => store.getters[`${ inStore.value }/all`](HCI.FORKLIFT_PLAN));
|
||||
const allNetworkMaps = computed(() => store.getters[`${ inStore.value }/all`](HCI.FORKLIFT_NETWORK_MAP));
|
||||
const allStorageMaps = computed(() => store.getters[`${ inStore.value }/all`](HCI.FORKLIFT_STORAGE_MAP));
|
||||
const allVMs = computed(() => store.getters[`${ inStore.value }/all`](HCI.VM));
|
||||
|
||||
const escapeHtml = (value = '') => String(value)
|
||||
.replaceAll('&', '&')
|
||||
@@ -98,12 +99,12 @@ const formatPipelineTooltip = (pipeline = []) => {
|
||||
};
|
||||
|
||||
const formatDuration = (started, completed) => {
|
||||
if (!started || !completed) {
|
||||
if (!started) {
|
||||
return { display: null, seconds: -1 };
|
||||
}
|
||||
|
||||
const startMs = new Date(started).getTime();
|
||||
const endMs = new Date(completed).getTime();
|
||||
const endMs = completed ? new Date(completed).getTime() : Date.now();
|
||||
|
||||
if (isNaN(startMs) || isNaN(endMs) || endMs < startMs) {
|
||||
return { display: null, seconds: -1 };
|
||||
@@ -129,8 +130,8 @@ const rows = computed(() => {
|
||||
const netMap = allNetworkMaps.value.find((m) => m.metadata.name === netMapName && m.metadata.namespace === netMapNs);
|
||||
const storMap = allStorageMaps.value.find((m) => m.metadata.name === storMapName && m.metadata.namespace === storMapNs);
|
||||
|
||||
plan.networkEntries = (netMap?.spec?.map || []).map((e) => `${ e.source?.id || '-' } → ${ e.destination?.type === 'pod' ? t('harvester.addons.vmMigration.generic.podNetwork') : (e.destination?.name || '-') }`);
|
||||
plan.storageEntries = (storMap?.spec?.map || []).map((e) => `${ e.source?.id || '-' } → ${ e.destination?.storageClass || '-' }`);
|
||||
plan.networkEntries = (netMap?.spec?.map || []).map((e) => `${ e.source?.id || 'Ignored' } → ${ e.destination?.type === 'pod' ? t('harvester.addons.vmMigration.configureMappings.networkMapping.options.podNetworking') : (e.destination?.name || 'Ignored') }`);
|
||||
plan.storageEntries = (storMap?.spec?.map || []).map((e) => `${ e.source?.id || 'Ignored' } → ${ e.destination?.storageClass || 'Ignored' }`);
|
||||
|
||||
plan.vmIdsDisplay = (plan.spec?.vms || []).map((vm) => vm.id || vm.name || '').filter(Boolean).join(', ') || '-';
|
||||
|
||||
@@ -178,11 +179,35 @@ const rows = computed(() => {
|
||||
|
||||
overallProgress = Math.round(overallProgress * 10) / 10;
|
||||
|
||||
// If no step-level error but the plan itself is failed, surface it
|
||||
if (!errorMsg && plan.planFailed) {
|
||||
// If no step-level error but the plan itself is failed, surface it.
|
||||
// Skip VMs that already reached 100% (they finished successfully before
|
||||
// the plan failed) so their bar stays green instead of turning red.
|
||||
if (!errorMsg && plan.planFailed && overallProgress < 100) {
|
||||
errorMsg = `${ currentStep || t('harvester.addons.vmMigration.dashboard.progress.migration') }: ${ t('harvester.addons.vmMigration.dashboard.progress.failed') }`;
|
||||
}
|
||||
|
||||
const vmNamespace = vm.namespace || plan.spec?.targetNamespace || plan.metadata?.namespace;
|
||||
const routeParams = currentRouter().currentRoute?.value?.params || {};
|
||||
const product = routeParams.product || store.getters['productId'];
|
||||
const cluster = routeParams.cluster || store.getters['clusterId'];
|
||||
const vmNameCandidates = [vm.targetName, vm.name, vm.id].filter(Boolean);
|
||||
const targetVm = allVMs.value.find((item) => vmNameCandidates.includes(item.metadata?.name) && (!vmNamespace || item.metadata?.namespace === vmNamespace));
|
||||
// A VM that individually reached 100% without error should be navigable
|
||||
// even when the overall plan failed (other VMs in the plan may have
|
||||
// failed); `overallProgress >= 100 && !errorMsg && targetVm` already
|
||||
// guarantees this VM migrated successfully.
|
||||
const canNavigateToVm = overallProgress >= 100 && !errorMsg && !plan.planCanceled && !!targetVm && !!product && !!cluster;
|
||||
const vmDetailLocation = canNavigateToVm ? {
|
||||
name: `${ PRODUCT_NAME }-c-cluster-resource-namespace-id`,
|
||||
params: {
|
||||
product,
|
||||
cluster,
|
||||
resource: HCI.VM,
|
||||
namespace: targetVm.metadata.namespace,
|
||||
id: targetVm.metadata.name,
|
||||
}
|
||||
} : null;
|
||||
|
||||
return {
|
||||
vmName: vm.name || vm.id || t('harvester.addons.vmMigration.generic.unknown'),
|
||||
vmId: vm.id || '',
|
||||
@@ -191,6 +216,7 @@ const rows = computed(() => {
|
||||
pipelineTooltip: formatPipelineTooltip(pipeline),
|
||||
errorMsg,
|
||||
canceled: plan.planCanceled,
|
||||
vmDetailLocation,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -248,7 +274,7 @@ const headers = [
|
||||
labelKey: 'harvester.addons.vmMigration.dashboard.columns.duration',
|
||||
value: 'duration',
|
||||
sort: 'durationSeconds',
|
||||
width: 120,
|
||||
width: 90,
|
||||
},
|
||||
{ ...AGE },
|
||||
];
|
||||
@@ -283,6 +309,17 @@ const init = async() => {
|
||||
store.dispatch(`${ inStore.value }/findAll`, { type: HCI.FORKLIFT_NETWORK_MAP }),
|
||||
store.dispatch(`${ inStore.value }/findAll`, { type: HCI.FORKLIFT_STORAGE_MAP }),
|
||||
]);
|
||||
|
||||
// VMs are only needed to conditionally show the post-migration VM-detail
|
||||
// link, so load them separately and non-fatally: a failure here (or the
|
||||
// cost of findAll on large clusters) should not block plans/maps from
|
||||
// rendering.
|
||||
try {
|
||||
await store.dispatch(`${ inStore.value }/findAll`, { type: HCI.VM });
|
||||
} catch (e) {
|
||||
// Intentionally ignored: the dashboard still works without the VM list,
|
||||
// the migrated VM-detail link simply won't be shown.
|
||||
}
|
||||
} catch (e) {
|
||||
errors.value = [e?.message || t('harvester.addons.vmMigration.errors.failedLoadPlans')];
|
||||
} finally {
|
||||
@@ -366,7 +403,17 @@ init();
|
||||
>
|
||||
<div class="vm-progress-header">
|
||||
<div class="vm-name-block">
|
||||
<span class="vm-name">{{ vm.vmName }}</span>
|
||||
<span class="vm-name">
|
||||
{{ vm.vmName }}
|
||||
<router-link
|
||||
v-if="vm.vmDetailLocation"
|
||||
v-clean-tooltip="t('harvester.addons.vmMigration.dashboard.progress.checkMigratedVm')"
|
||||
:to="vm.vmDetailLocation"
|
||||
class="vm-detail-link"
|
||||
>
|
||||
<i class="icon icon-external-link" />
|
||||
</router-link>
|
||||
</span>
|
||||
<span class="text-muted vm-id">{{ t('harvester.addons.vmMigration.dashboard.progress.vmId', { id: vm.vmId }) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -457,6 +504,14 @@ init();
|
||||
|
||||
.vm-name {
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.vm-detail-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vm-name-block {
|
||||
|
||||
@@ -5,6 +5,7 @@ import CruResource from '@shell/components/CruResource';
|
||||
import Loading from '@shell/components/Loading';
|
||||
import { SECRET } from '@shell/config/types';
|
||||
import { useI18n } from '@shell/composables/useI18n';
|
||||
import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
|
||||
import ConfigureProviderStep from '@pkg/harvester/components/vm-migration/ConfigureProviderStep.vue';
|
||||
import ConfigureMappingsStep from '@pkg/harvester/components/vm-migration/ConfigureMappingsStep.vue';
|
||||
import { PRODUCT_NAME } from '@pkg/harvester/config/harvester';
|
||||
@@ -46,6 +47,7 @@ const stepData = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
skipTlsVerify: false,
|
||||
vddkInitImage: '',
|
||||
testPassed: false,
|
||||
testResult: null,
|
||||
testError: null,
|
||||
@@ -162,7 +164,7 @@ const onFinish = async(buttonCb) => {
|
||||
buttonCb(true);
|
||||
currentRouter().push(providerListLocation);
|
||||
} catch (err) {
|
||||
errors.value = [err instanceof Error ? err.message : String(err)];
|
||||
errors.value = exceptionToErrorsArray(err).map((e) => (typeof e === 'string' ? e : stringify(e)));
|
||||
buttonCb(false);
|
||||
}
|
||||
};
|
||||
@@ -193,6 +195,7 @@ const init = async() => {
|
||||
stepData.provider.selectedProvider = fetchedProvider.metadata.name;
|
||||
stepData.provider.providerName = fetchedProvider.metadata.name;
|
||||
stepData.provider.url = fetchedProvider.spec?.url || '';
|
||||
stepData.provider.vddkInitImage = fetchedProvider.spec?.settings?.vddkInitImage || '';
|
||||
stepData.provider.createdProvider = fetchedProvider;
|
||||
|
||||
const secretRef = fetchedProvider.spec?.secret;
|
||||
@@ -231,7 +234,7 @@ const init = async() => {
|
||||
// Maps may not exist yet
|
||||
}
|
||||
} catch (err) {
|
||||
errors.value = [t('harvester.addons.vmMigration.errors.failedLoadProvider', { error: err.message || err })];
|
||||
errors.value = [t('harvester.addons.vmMigration.errors.failedLoadProvider', { error: err.message || stringify(err) })];
|
||||
}
|
||||
|
||||
initialLoading.value = false;
|
||||
|
||||
@@ -41,6 +41,7 @@ const stepData = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
skipTlsVerify: false,
|
||||
vddkInitImage: '',
|
||||
testPassed: false,
|
||||
testResult: null,
|
||||
testError: null,
|
||||
@@ -56,7 +57,7 @@ const stepData = reactive({
|
||||
networkEntries: [],
|
||||
storageEntries: [],
|
||||
},
|
||||
review: { planName: '' },
|
||||
review: { planName: '', targetNamespace: '' },
|
||||
});
|
||||
|
||||
const steps = reactive([
|
||||
@@ -173,6 +174,24 @@ const onReviewReady = (ready) => {
|
||||
reviewReady.value = ready;
|
||||
};
|
||||
|
||||
const onEditSelection = () => {
|
||||
wizardComponent.value?.goToStep(2);
|
||||
};
|
||||
|
||||
const onEditMappings = () => {
|
||||
wizardComponent.value?.goToStep(3);
|
||||
};
|
||||
|
||||
const onRemoveVm = (id) => {
|
||||
selectedVMs.value = selectedVMs.value.filter((vm) => vm.id !== id);
|
||||
stepData.vms.selectedVMIds.delete(id);
|
||||
|
||||
vmsReady.value = selectedVMs.value.length > 0;
|
||||
if (!vmsReady.value) {
|
||||
reviewReady.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Clear downstream data when provider changes
|
||||
watch(() => stepData.provider.providerName, (newVal, oldVal) => {
|
||||
if (oldVal && newVal !== oldVal) {
|
||||
@@ -191,13 +210,13 @@ watch(() => stepData.provider.providerName, (newVal, oldVal) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Clear mappings and review when VM selection changes
|
||||
// Clear mappings and review when VMs are added to the selection. Pure removals
|
||||
// (e.g. "Remove from Plan" on the review step) keep the existing mappings and plan name.
|
||||
watch(selectedVMs, (newVal, oldVal) => {
|
||||
const newIds = new Set(newVal.map((v) => v.id));
|
||||
const oldIds = new Set(oldVal.map((v) => v.id));
|
||||
const changed = newIds.size !== oldIds.size || [...newIds].some((id) => !oldIds.has(id));
|
||||
const added = newVal.some((v) => !oldIds.has(v.id));
|
||||
|
||||
if (oldVal.length > 0 && changed) {
|
||||
if (oldVal.length > 0 && added) {
|
||||
stepData.mappings.networkEntries = [];
|
||||
stepData.mappings.storageEntries = [];
|
||||
mappingsReady.value = false;
|
||||
@@ -290,6 +309,9 @@ const onCancel = () => {
|
||||
:mapping-entries="stepData.mappings"
|
||||
:step-data="stepData.review"
|
||||
@ready="onReviewReady"
|
||||
@edit-selection="onEditSelection"
|
||||
@edit-mappings="onEditMappings"
|
||||
@remove-vm="onRemoveVm"
|
||||
/>
|
||||
</template>
|
||||
</CruResource>
|
||||
|
||||
@@ -68,41 +68,35 @@ export default defineComponent({
|
||||
return (this.value || []).map((plan) => {
|
||||
const planName = plan?.metadata?.name || '-';
|
||||
const namespace = plan?.metadata?.namespace || '';
|
||||
const networkMap = plan?.spec?.map?.network;
|
||||
const storageMap = plan?.spec?.map?.storage;
|
||||
const history = plan?.status?.migration?.history || [];
|
||||
const networkMapRef = this.getPlanMapRef(plan, 'network');
|
||||
const storageMapRef = this.getPlanMapRef(plan, 'storage');
|
||||
|
||||
const migrationsMap = new Map();
|
||||
const migrations = existing[HCI.FORKLIFT_MIGRATION]
|
||||
.filter((resource) => this.ownedByPlan(resource, plan))
|
||||
.map((resource) => resource?.metadata?.name)
|
||||
.filter(Boolean);
|
||||
|
||||
history
|
||||
.map((entry) => ({
|
||||
name: entry?.migration?.name,
|
||||
namespace: entry?.migration?.namespace || namespace,
|
||||
}))
|
||||
.filter((entry) => !!entry.name)
|
||||
.forEach((entry) => {
|
||||
const matched = existing[HCI.FORKLIFT_MIGRATION].find((resource) => resource?.metadata?.name === entry.name && resource?.metadata?.namespace === entry.namespace);
|
||||
|
||||
if (matched) {
|
||||
migrationsMap.set(`${ entry.namespace }/${ entry.name }`, entry);
|
||||
}
|
||||
});
|
||||
|
||||
const matchedNetworkMap = networkMap?.name && existing[HCI.FORKLIFT_NETWORK_MAP].find((resource) => resource?.metadata?.name === networkMap.name && resource?.metadata?.namespace === (networkMap.namespace || namespace));
|
||||
const matchedStorageMap = storageMap?.name && existing[HCI.FORKLIFT_STORAGE_MAP].find((resource) => resource?.metadata?.name === storageMap.name && resource?.metadata?.namespace === (storageMap.namespace || namespace));
|
||||
const matchedNetworkMap = networkMapRef ? existing[HCI.FORKLIFT_NETWORK_MAP].find((resource) => resource?.metadata?.name === networkMapRef.name && resource?.metadata?.namespace === networkMapRef.namespace) : null;
|
||||
const matchedStorageMap = storageMapRef ? existing[HCI.FORKLIFT_STORAGE_MAP].find((resource) => resource?.metadata?.name === storageMapRef.name && resource?.metadata?.namespace === storageMapRef.namespace) : null;
|
||||
|
||||
return {
|
||||
planName,
|
||||
namespace,
|
||||
migrations: [...migrationsMap.values()],
|
||||
migrations,
|
||||
networkMap: matchedNetworkMap ? {
|
||||
namespace: networkMap.namespace || namespace,
|
||||
name: networkMap.name,
|
||||
} : null,
|
||||
namespace: matchedNetworkMap?.metadata?.namespace || networkMapRef?.namespace || namespace,
|
||||
name: matchedNetworkMap?.metadata?.name,
|
||||
} : (networkMapRef ? {
|
||||
namespace: networkMapRef.namespace,
|
||||
name: networkMapRef.name,
|
||||
} : null),
|
||||
storageMap: matchedStorageMap ? {
|
||||
namespace: storageMap.namespace || namespace,
|
||||
name: storageMap.name,
|
||||
} : null,
|
||||
namespace: matchedStorageMap?.metadata?.namespace || storageMapRef?.namespace || namespace,
|
||||
name: matchedStorageMap?.metadata?.name,
|
||||
} : (storageMapRef ? {
|
||||
namespace: storageMapRef.namespace,
|
||||
name: storageMapRef.name,
|
||||
} : null),
|
||||
};
|
||||
});
|
||||
},
|
||||
@@ -125,53 +119,73 @@ export default defineComponent({
|
||||
methods: {
|
||||
resourceNames,
|
||||
|
||||
getPlanMapRef(plan, mapType) {
|
||||
const ref = plan?.spec?.map?.[mapType];
|
||||
const name = ref?.name;
|
||||
|
||||
if (!name) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
namespace: ref?.namespace || plan?.metadata?.namespace || '',
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine whether a related resource (migration / network map / storage map)
|
||||
* is owned by the given plan by inspecting its `metadata.ownerReferences`.
|
||||
* Matches on `kind: Plan` and the plan name; when both sides expose a uid it
|
||||
* must match too, to disambiguate same-named plans.
|
||||
*/
|
||||
ownedByPlan(resource, plan) {
|
||||
const planName = plan?.metadata?.name;
|
||||
const planUid = plan?.metadata?.uid;
|
||||
const owners = resource?.metadata?.ownerReferences || [];
|
||||
|
||||
if (!planName) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return owners.some((owner) => owner?.kind === 'Plan' &&
|
||||
owner?.name === planName &&
|
||||
(!planUid || !owner?.uid || owner.uid === planUid));
|
||||
},
|
||||
|
||||
buildDeleteTargets() {
|
||||
const existing = this.existingRelatedResources;
|
||||
const targets = new Map();
|
||||
|
||||
const addTarget = (type, name, namespace) => {
|
||||
const ns = namespace || '';
|
||||
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
|
||||
const key = `${ type }|${ ns }|${ name }`;
|
||||
|
||||
targets.set(key, {
|
||||
type, name, namespace: ns
|
||||
});
|
||||
};
|
||||
|
||||
for (const plan of this.value || []) {
|
||||
const namespace = plan?.metadata?.namespace || '';
|
||||
const networkMap = plan?.spec?.map?.network;
|
||||
const storageMap = plan?.spec?.map?.storage;
|
||||
const history = plan?.status?.migration?.history || [];
|
||||
const networkMapRef = this.getPlanMapRef(plan, 'network');
|
||||
const storageMapRef = this.getPlanMapRef(plan, 'storage');
|
||||
|
||||
if (networkMap?.name) {
|
||||
const ns = networkMap.namespace || namespace;
|
||||
const key = `${ HCI.FORKLIFT_NETWORK_MAP }|${ ns }|${ networkMap.name }`;
|
||||
|
||||
targets.set(key, {
|
||||
type: HCI.FORKLIFT_NETWORK_MAP,
|
||||
name: networkMap.name,
|
||||
namespace: ns,
|
||||
});
|
||||
if (networkMapRef) {
|
||||
addTarget(HCI.FORKLIFT_NETWORK_MAP, networkMapRef.name, networkMapRef.namespace);
|
||||
}
|
||||
|
||||
if (storageMap?.name) {
|
||||
const ns = storageMap.namespace || namespace;
|
||||
const key = `${ HCI.FORKLIFT_STORAGE_MAP }|${ ns }|${ storageMap.name }`;
|
||||
|
||||
targets.set(key, {
|
||||
type: HCI.FORKLIFT_STORAGE_MAP,
|
||||
name: storageMap.name,
|
||||
namespace: ns,
|
||||
});
|
||||
if (storageMapRef) {
|
||||
addTarget(HCI.FORKLIFT_STORAGE_MAP, storageMapRef.name, storageMapRef.namespace);
|
||||
}
|
||||
|
||||
for (const entry of history) {
|
||||
const migrationName = entry?.migration?.name;
|
||||
|
||||
if (!migrationName) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const migrationNs = entry?.migration?.namespace || namespace;
|
||||
const key = `${ HCI.FORKLIFT_MIGRATION }|${ migrationNs }|${ migrationName }`;
|
||||
|
||||
targets.set(key, {
|
||||
type: HCI.FORKLIFT_MIGRATION,
|
||||
name: migrationName,
|
||||
namespace: migrationNs,
|
||||
});
|
||||
}
|
||||
existing[HCI.FORKLIFT_MIGRATION]
|
||||
.filter((resource) => this.ownedByPlan(resource, plan))
|
||||
.forEach((resource) => addTarget(HCI.FORKLIFT_MIGRATION, resource?.metadata?.name, resource?.metadata?.namespace));
|
||||
}
|
||||
|
||||
return [...targets.values()];
|
||||
@@ -264,11 +278,11 @@ export default defineComponent({
|
||||
<div>• {{ t('harvester.addons.vmMigration.labels.migration') }}:</div>
|
||||
<template v-if="summary.migrations.length">
|
||||
<div
|
||||
v-for="migration in summary.migrations"
|
||||
:key="`${ migration.namespace }/${ migration.name }`"
|
||||
v-for="migrationName in summary.migrations"
|
||||
:key="migrationName"
|
||||
>
|
||||
<div class="ml-20">
|
||||
- {{ migration.name }}
|
||||
- {{ migrationName }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import Parse from 'url-parse';
|
||||
import { MANAGEMENT } from '@shell/config/types';
|
||||
import { SETTING } from '@shell/config/settings';
|
||||
import { HCI } from '../types';
|
||||
import { PRODUCT_NAME } from '../config/harvester';
|
||||
import { featureEnabled, getVersion } from '../utils/feature-flags';
|
||||
@@ -64,6 +66,23 @@ const mutations = {
|
||||
};
|
||||
|
||||
const getters = {
|
||||
isHarvesterPrime: (_state, _getters, _rootState, rootGetters) => {
|
||||
const setting = rootGetters['harvester/byId']?.(HCI.SETTING, 'server-flavor');
|
||||
|
||||
return (setting?.value || setting?.default) === 'prime';
|
||||
},
|
||||
|
||||
privateLabel: (_state, getters, _rootState, rootGetters) => {
|
||||
const setting = rootGetters['management/byId']?.(MANAGEMENT.SETTING, SETTING.PL);
|
||||
const value = setting?.value || '';
|
||||
|
||||
if (getters.isHarvesterPrime && value === (setting?.default || 'Harvester')) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
getBundleId(state) {
|
||||
return state.latestBundleId;
|
||||
},
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { FAVORITE_TYPES } from '@shell/store/prefs';
|
||||
|
||||
/**
|
||||
* Dynamically toggles SideNav entries based on the enabled status of a specific Addon.
|
||||
*
|
||||
@@ -24,13 +26,17 @@ export function registerAddonSideNav(store, productName, {
|
||||
const kickSideNav = () => {
|
||||
const TRIGGER = 'ui.refresh.trigger';
|
||||
|
||||
store.dispatch('type-map/addFavorite', TRIGGER);
|
||||
// Toggle the trigger a few times so an early kick (fired before the SideNav
|
||||
// has mounted on first login) is retried once the component is listening.
|
||||
// Use the prefs/load mutation (in-memory only)
|
||||
[0, 600, 1500].forEach((delay) => {
|
||||
setTimeout(() => {
|
||||
const base = (store.getters['prefs/get'](FAVORITE_TYPES) || []).filter((t) => t !== TRIGGER);
|
||||
|
||||
// SideNav component seem to ignore rapid state changes.
|
||||
// Wait 600ms to ensure the toggle event triggers a re-render.
|
||||
setTimeout(() => {
|
||||
store.dispatch('type-map/removeFavorite', TRIGGER);
|
||||
}, 600);
|
||||
store.commit('prefs/load', { key: FAVORITE_TYPES, value: [...base, TRIGGER] });
|
||||
setTimeout(() => store.commit('prefs/load', { key: FAVORITE_TYPES, value: [...base] }), 300);
|
||||
}, delay);
|
||||
});
|
||||
};
|
||||
|
||||
const hasAccessibleSchema = (t) => {
|
||||
@@ -92,16 +98,25 @@ export function registerAddonSideNav(store, productName, {
|
||||
// Store is ready. Stop polling.
|
||||
clearInterval(waitForStore);
|
||||
|
||||
// Watch the specific addon resource for changes to its enabled status.
|
||||
// Watch the addon's enabled status together with the schema availability
|
||||
// of the gated types. Schemas (e.g. forklift CRDs) can load after the
|
||||
// addon is already enabled, so the watcher must also re-run when they
|
||||
// become accessible; otherwise the menu never updates until a refresh.
|
||||
store.watch(
|
||||
(state, getters) => {
|
||||
const addons = getters[`${ productName }/all`](resourceType);
|
||||
const addon = addons.find((a) => a.metadata.name === addonName);
|
||||
const isEnabled = addon?.spec?.enabled === true;
|
||||
|
||||
return addon?.spec?.enabled === true;
|
||||
const schemaReady = requireSchema ? types.every(hasAccessibleSchema) : true;
|
||||
|
||||
return `${ isEnabled }:${ schemaReady }`;
|
||||
},
|
||||
(isEnabled) => {
|
||||
setMenuVisibility(isEnabled);
|
||||
() => {
|
||||
const addons = store.getters[`${ productName }/all`](resourceType);
|
||||
const addon = addons.find((a) => a.metadata.name === addonName);
|
||||
|
||||
setMenuVisibility(addon?.spec?.enabled === true);
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
@@ -73,8 +73,21 @@ export function buildNetworkMapEntries(entries = [], defaultNamespace) {
|
||||
export function buildStorageMapEntries(entries = []) {
|
||||
return entries
|
||||
.filter((entry) => !!entry.target)
|
||||
.map((entry) => ({
|
||||
source: { name: entry.name, id: entry.id },
|
||||
destination: { storageClass: entry.target },
|
||||
}));
|
||||
.map((entry) => {
|
||||
const destination = { storageClass: entry.target };
|
||||
|
||||
if (entry.volumeMode) {
|
||||
destination.volumeMode = entry.volumeMode;
|
||||
}
|
||||
|
||||
// Forklift StorageMap destination expects a single `accessMode` value.
|
||||
if (Array.isArray(entry.accessModes) && entry.accessModes.length) {
|
||||
destination.accessMode = entry.accessModes[0];
|
||||
}
|
||||
|
||||
return {
|
||||
source: { name: entry.name, id: entry.id },
|
||||
destination,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@@ -69,17 +69,11 @@ export function vmDisks(spec, getters, errors, validatorArgs, displayKey, value)
|
||||
validName(getters, errors, D.name, diskNames, prefix, type, lowerType, upperType);
|
||||
});
|
||||
|
||||
let hasBootableVolume = false;
|
||||
|
||||
_volumes.forEach((V, idx) => {
|
||||
const { type, typeValue } = getVolumeType(getters, V, _volumeClaimTemplates, value);
|
||||
|
||||
const prefix = V.name || idx + 1;
|
||||
|
||||
if ([SOURCE_TYPE.IMAGE, SOURCE_TYPE.ATTACH_VOLUME, SOURCE_TYPE.CONTAINER].includes(type)) {
|
||||
hasBootableVolume = true;
|
||||
}
|
||||
|
||||
if (type === SOURCE_TYPE.NEW || type === SOURCE_TYPE.IMAGE) {
|
||||
if (!/([1-9]|[1-9][0-9]+)[a-zA-Z]+/.test(typeValue?.spec?.resources?.requests?.storage)) {
|
||||
const key = getters['i18n/t']('harvester.fields.size');
|
||||
@@ -136,13 +130,6 @@ export function vmDisks(spec, getters, errors, validatorArgs, displayKey, value)
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* At least one bootable volume must be provided. (Verify only when create.)
|
||||
*/
|
||||
if (!hasBootableVolume && !value.links) {
|
||||
errors.push(getters['i18n/t']('harvester.validation.vm.volume.needAtLeastOneBootable'));
|
||||
}
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,11 @@ if (process.argv.length < 3) {
|
||||
}
|
||||
|
||||
const prTitle = process.argv[2];
|
||||
const prLabel = prTitle.split(':')[0].trim();
|
||||
|
||||
// Parse the conventional-commit prefix `type(scope)!:`, keeping only the type
|
||||
// and dropping an optional scope and breaking-change marker.
|
||||
const prefixMatch = prTitle.match(/^\s*([a-zA-Z]+)(?:\([^)]*\))?!?:/);
|
||||
const prLabel = prefixMatch ? prefixMatch[1].toLowerCase() : '';
|
||||
|
||||
const config = await load({ extends: ["./commitlint.config.js"] });
|
||||
const commitPrefix = config?.rules?.['type-enum']?.[2] || [];
|
||||
|
||||
Reference in New Issue
Block a user