public/harvester-ui-extension
1
0
Fork 0
mirror of https://github.com/harvester/harvester-ui-extension.git synced 2026-08-16 12:49:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(forklift): route and router doesnt work properly on extensions

Browse Source 
Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
This commit is contained in:
Marcelo Fukumoto 2026-05-12 18:52:47 +02:00
parent 4480b2cd8f
commit bf01a9dc43
No known key found for this signature in database
GPG Key ID: 1CA12189625C2543
5 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pkg/harvester/pages/c/_cluster/forklift/configure-mappings.vue
View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import Loading from '@shell/components/Loading'; import Loading from '@shell/components/Loading';
import Masthead from '@shell/components/ResourceList/Masthead'; import Masthead from '@shell/components/ResourceList/Masthead';
import AsyncButton from '@shell/components/AsyncButton'; import AsyncButton from '@shell/components/AsyncButton';
@ -11,6 +10,7 @@ import { SCHEMA, STORAGE_CLASS, NETWORK_ATTACHMENT } from '@shell/config/types';
import { useI18n } from '@shell/composables/useI18n'; import { useI18n } from '@shell/composables/useI18n';
import { HCI } from '../../../../types'; import { HCI } from '../../../../types';
import { PRODUCT_NAME } from '../../../../config/harvester'; import { PRODUCT_NAME } from '../../../../config/harvester';
import { currentRouter, currentRoute } from '../../../../utils/router';
const schema = { const schema = {
id: HCI.FORKLIFT_NETWORK_MAP, id: HCI.FORKLIFT_NETWORK_MAP,
@ -23,8 +23,6 @@ const schema = {
}; };
const store = useStore(); const store = useStore();
const route = useRoute();
const router = useRouter();
const { t } = useI18n(store); const { t } = useI18n(store);
const vms = ref([]); const vms = ref([]);
@ -36,7 +34,7 @@ const errors = ref([]);
const loading = ref(true); const loading = ref(true);
const NAMESPACE = 'forklift'; const NAMESPACE = 'forklift';
const providerName = computed(() => route.query.provider || 'vsphere'); const providerName = computed(() => currentRoute().query.provider || 'vsphere');
const harvesterNetworkOptions = computed(() => { const harvesterNetworkOptions = computed(() => {
const options = [ const options = [
@ -170,7 +168,7 @@ const cancel = async() => {
await provider.remove(); await provider.remove();
} }
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift`, name: `${ PRODUCT_NAME }-c-cluster-forklift`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -289,7 +287,7 @@ const saveMappings = async(buttonCb) => {
usedBy: entry.usedBy, usedBy: entry.usedBy,
})); }));
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift-review-migration`, name: `${ PRODUCT_NAME }-c-cluster-forklift-review-migration`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -297,7 +295,7 @@ const saveMappings = async(buttonCb) => {
}, },
query: { query: {
provider: providerName.value, provider: providerName.value,
vms: route.query.vms, vms: currentRoute().query.vms,
networkMap: networkMap.metadata.name, networkMap: networkMap.metadata.name,
storageMap: storageMap.metadata.name, storageMap: storageMap.metadata.name,
networkMappings: JSON.stringify(networkMappingsData), networkMappings: JSON.stringify(networkMappingsData),
@ -336,7 +334,7 @@ const init = async() => {
const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || []; const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE); const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
const vmsParam = route.query.vms; const vmsParam = currentRoute().query.vms;
if (vmsParam) { if (vmsParam) {
try { try {

10
pkg/harvester/pages/c/_cluster/forklift/configure-provider.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref, computed, watch } from 'vue'; import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { LabeledInput } from '@components/Form/LabeledInput'; import { LabeledInput } from '@components/Form/LabeledInput';
import { Checkbox } from '@components/Form/Checkbox'; import { Checkbox } from '@components/Form/Checkbox';
import { Banner } from '@components/Banner'; import { Banner } from '@components/Banner';
@ -12,6 +12,7 @@ import { randomStr } from '@shell/utils/string';
import { useI18n } from '@shell/composables/useI18n'; import { useI18n } from '@shell/composables/useI18n';
import { HCI } from '../../../../types'; import { HCI } from '../../../../types';
import { PRODUCT_NAME } from '../../../../config/harvester'; import { PRODUCT_NAME } from '../../../../config/harvester';
import { currentRouter } from '../../../../utils/router';
const schema = { const schema = {
id: HCI.FORKLIFT_PROVIDER, id: HCI.FORKLIFT_PROVIDER,
@ -24,7 +25,6 @@ const schema = {
}; };
const store = useStore(); const store = useStore();
const router = useRouter();
const { t } = useI18n(store); const { t } = useI18n(store);
const allSecrets = ref([]); const allSecrets = ref([]);
@ -59,7 +59,7 @@ const cancel = async() => {
createdSecret.value = null; createdSecret.value = null;
} }
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift`, name: `${ PRODUCT_NAME }-c-cluster-forklift`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -235,7 +235,7 @@ const saveProvider = async(buttonCb) => {
// Test hasn't passed yet — run it first // Test hasn't passed yet — run it first
await testConnection((success) => { await testConnection((success) => {
if (success) { if (success) {
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`, name: `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -251,7 +251,7 @@ const saveProvider = async(buttonCb) => {
return; return;
} }
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`, name: `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],

20
pkg/harvester/pages/c/_cluster/forklift/review-migration.vue
View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import Loading from '@shell/components/Loading'; import Loading from '@shell/components/Loading';
import Masthead from '@shell/components/ResourceList/Masthead'; import Masthead from '@shell/components/ResourceList/Masthead';
import AsyncButton from '@shell/components/AsyncButton'; import AsyncButton from '@shell/components/AsyncButton';
@ -12,6 +11,7 @@ import { SCHEMA } from '@shell/config/types';
import { useI18n } from '@shell/composables/useI18n'; import { useI18n } from '@shell/composables/useI18n';
import { HCI } from '../../../../types'; import { HCI } from '../../../../types';
import { PRODUCT_NAME } from '../../../../config/harvester'; import { PRODUCT_NAME } from '../../../../config/harvester';
import { currentRouter, currentRoute } from '../../../../utils/router';
const schema = { const schema = {
id: HCI.FORKLIFT_PLAN, id: HCI.FORKLIFT_PLAN,
@ -24,8 +24,6 @@ const schema = {
}; };
const store = useStore(); const store = useStore();
const route = useRoute();
const router = useRouter();
const { t } = useI18n(store); const { t } = useI18n(store);
const vms = ref([]); const vms = ref([]);
@ -36,9 +34,9 @@ const loading = ref(true);
const NAMESPACE = 'forklift'; const NAMESPACE = 'forklift';
const TARGET_NAMESPACE = 'default'; const TARGET_NAMESPACE = 'default';
const providerName = computed(() => route.query.provider || 'vsphere'); const providerName = computed(() => currentRoute().query.provider || 'vsphere');
const networkMapName = computed(() => route.query.networkMap || ''); const networkMapName = computed(() => currentRoute().query.networkMap || '');
const storageMapName = computed(() => route.query.storageMap || ''); const storageMapName = computed(() => currentRoute().query.storageMap || '');
const totalVCpu = computed(() => vms.value.reduce((sum, vm) => sum + (vm.cpuCount || vm.numCPU || 0), 0)); const totalVCpu = computed(() => vms.value.reduce((sum, vm) => sum + (vm.cpuCount || vm.numCPU || 0), 0));
@ -100,7 +98,7 @@ const cancel = async() => {
await provider.remove(); await provider.remove();
} }
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift`, name: `${ PRODUCT_NAME }-c-cluster-forklift`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -206,7 +204,7 @@ const startMigration = async(buttonCb) => {
await provider.save(); await provider.save();
} }
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift`, name: `${ PRODUCT_NAME }-c-cluster-forklift`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -229,7 +227,7 @@ const init = async() => {
const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || []; const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE); const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
const vmsParam = route.query.vms; const vmsParam = currentRoute().query.vms;
if (vmsParam) { if (vmsParam) {
try { try {
@ -252,7 +250,7 @@ const init = async() => {
} }
} }
const networkMappingsParam = route.query.networkMappings; const networkMappingsParam = currentRoute().query.networkMappings;
if (networkMappingsParam) { if (networkMappingsParam) {
try { try {
@ -262,7 +260,7 @@ const init = async() => {
} }
} }
const storageMappingsParam = route.query.storageMappings; const storageMappingsParam = currentRoute().query.storageMappings;
if (storageMappingsParam) { if (storageMappingsParam) {
try { try {

12
pkg/harvester/pages/c/_cluster/forklift/select-vms.vue
View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import Loading from '@shell/components/Loading'; import Loading from '@shell/components/Loading';
import Masthead from '@shell/components/ResourceList/Masthead'; import Masthead from '@shell/components/ResourceList/Masthead';
import SortableTable from '@shell/components/SortableTable'; import SortableTable from '@shell/components/SortableTable';
@ -10,6 +9,7 @@ import { SCHEMA } from '@shell/config/types';
import { useI18n } from '@shell/composables/useI18n'; import { useI18n } from '@shell/composables/useI18n';
import { HCI } from '../../../../types'; import { HCI } from '../../../../types';
import { PRODUCT_NAME } from '../../../../config/harvester'; import { PRODUCT_NAME } from '../../../../config/harvester';
import { currentRouter, currentRoute } from '../../../../utils/router';
const schema = { const schema = {
id: HCI.FORKLIFT_PROVIDER, id: HCI.FORKLIFT_PROVIDER,
@ -22,8 +22,6 @@ const schema = {
}; };
const store = useStore(); const store = useStore();
const route = useRoute();
const router = useRouter();
const { t } = useI18n(store); const { t } = useI18n(store);
const allProviders = ref([]); const allProviders = ref([]);
@ -35,7 +33,7 @@ const loading = ref(true);
const networkMap = ref({}); const networkMap = ref({});
const datastoreMap = ref({}); const datastoreMap = ref({});
const providerName = computed(() => provider.value?.metadata?.name || route.query.provider || ''); const providerName = computed(() => provider.value?.metadata?.name || currentRoute().query.provider || '');
const vmCount = computed(() => discoveredVMs.value.length); const vmCount = computed(() => discoveredVMs.value.length);
const selectedCount = computed(() => selectedVMs.value.length); const selectedCount = computed(() => selectedVMs.value.length);
@ -158,7 +156,7 @@ const cancel = async() => {
await found.remove(); await found.remove();
} }
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift`, name: `${ PRODUCT_NAME }-c-cluster-forklift`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -170,7 +168,7 @@ const cancel = async() => {
const saveSelection = () => { const saveSelection = () => {
const vmIds = selectedVMs.value.map((vm) => vm.id || vm.vmId || vm.metadata?.name); const vmIds = selectedVMs.value.map((vm) => vm.id || vm.vmId || vm.metadata?.name);
router.push({ currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-forklift-configure-mappings`, name: `${ PRODUCT_NAME }-c-cluster-forklift-configure-mappings`,
params: { params: {
product: store.getters['productId'], product: store.getters['productId'],
@ -188,7 +186,7 @@ const init = async() => {
allProviders.value = await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER }); allProviders.value = await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
const queryProvider = route.query.provider; const queryProvider = currentRoute().query.provider;
if (queryProvider) { if (queryProvider) {
provider.value = allProviders.value.find( provider.value = allProviders.value.find(

11
pkg/harvester/utils/router.js Normal file
View File

@ -0,0 +1,11 @@
// Mirrors Resource class methods from @shell/plugins/dashboard-store/resource-class.js
// useRouter()/useRoute() from vue-router don't work in extension mode,
// so we use the same global access pattern the shell uses internally.
export function currentRouter() {
return window.$globalApp.$router;
}
export function currentRoute() {
return window.$globalApp.$route;
}