mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-04 13:16:05 +08:00
Add pkg/harvester components + shell portings - 1
Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
This commit is contained in:
Francesco Torchia
@@ -0,0 +1,157 @@
|
||||
<script>
|
||||
import debounce from 'lodash/debounce';
|
||||
import { _EDIT, _VIEW } from '@shell/config/query-params';
|
||||
import { removeAt } from '@shell/utils/array';
|
||||
import { clone } from '@shell/utils/object';
|
||||
import { mapGetters } from 'vuex';
|
||||
import PriorityRow from './PriorityRow';
|
||||
|
||||
export default {
|
||||
components: { PriorityRow },
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: _EDIT,
|
||||
},
|
||||
autoAddIfEmpty: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
const rows = clone(this.value || []);
|
||||
|
||||
return { rows };
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['isRancherInHarvester', 'isStandaloneHarvester']),
|
||||
|
||||
isView() {
|
||||
return this.mode === _VIEW;
|
||||
},
|
||||
|
||||
showAdd() {
|
||||
return !this.isView;
|
||||
},
|
||||
|
||||
showRemove() {
|
||||
return !this.isView;
|
||||
},
|
||||
|
||||
showProjectAndCluster() {
|
||||
return !this.isStandaloneHarvester;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.queueUpdate = debounce(this.update, 500);
|
||||
},
|
||||
|
||||
methods: {
|
||||
add() {
|
||||
const defaultRow = { namespace: '*' };
|
||||
|
||||
if (!this.showProjectAndCluster) {
|
||||
this.rows.push(defaultRow);
|
||||
} else {
|
||||
this.rows.push({
|
||||
...defaultRow,
|
||||
project: '*',
|
||||
guestCluster: '*',
|
||||
});
|
||||
}
|
||||
|
||||
this.queueUpdate();
|
||||
},
|
||||
|
||||
remove(idx) {
|
||||
removeAt(this.rows, idx);
|
||||
this.queueUpdate();
|
||||
},
|
||||
|
||||
update() {
|
||||
if ( this.isView ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.rows);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3>
|
||||
{{ t('harvester.ipPool.scope.label') }}
|
||||
</h3>
|
||||
<div v-if="rows.length">
|
||||
<div
|
||||
class="pool-headers"
|
||||
:class="{
|
||||
'show-project-and-cluster': showProjectAndCluster,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
v-if="showProjectAndCluster"
|
||||
class="pool-project"
|
||||
>
|
||||
<t k="harvester.ipPool.project.label" />
|
||||
</span>
|
||||
<span class="pool-namespace">
|
||||
<t k="harvester.ipPool.namespace.label" />
|
||||
</span>
|
||||
<span
|
||||
v-if="showProjectAndCluster"
|
||||
class="pool-guestCluster"
|
||||
>
|
||||
<t k="harvester.ipPool.guestCluster.label" />
|
||||
</span>
|
||||
<span
|
||||
v-if="showRemove"
|
||||
class="remove"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(row, idx) in rows"
|
||||
:key="idx"
|
||||
>
|
||||
<PriorityRow
|
||||
:row="row"
|
||||
:mode="mode"
|
||||
:rows="rows"
|
||||
:idx="idx"
|
||||
@input="queueUpdate"
|
||||
@remove="remove(idx)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdd" class="footer">
|
||||
<button type="button" class="btn role-tertiary add" @click="add()">
|
||||
<t k="harvester.ipPool.scope.addLabel" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pool-headers {
|
||||
display: grid;
|
||||
grid-column-gap: $column-gutter;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
|
||||
grid-template-columns: 40% 40% 15%;
|
||||
|
||||
&.show-project-and-cluster {
|
||||
grid-template-columns: 25% 25% 25% 15%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<script>
|
||||
import { _EDIT, _VIEW } from '@shell/config/query-params';
|
||||
import Select from '@shell/components/form/Select';
|
||||
import { MANAGEMENT, CAPI } from '@shell/config/types';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { HCI } from '@pkg/harvester/types';
|
||||
|
||||
export default {
|
||||
components: { Select },
|
||||
|
||||
props: {
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
mode: {
|
||||
type: String,
|
||||
default: _EDIT,
|
||||
},
|
||||
|
||||
rows: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
idx: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return { value: '' };
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['allNamespaces', 'currentCluster', 'isRancherInHarvester', 'isStandaloneHarvester']),
|
||||
|
||||
showProjectAndCluster() {
|
||||
return !this.isStandaloneHarvester;
|
||||
},
|
||||
|
||||
isView() {
|
||||
return this.mode === _VIEW;
|
||||
},
|
||||
|
||||
showRemove() {
|
||||
return !this.isView;
|
||||
},
|
||||
|
||||
filteredNamespaces() {
|
||||
const namespaces = this.allNamespaces || [];
|
||||
|
||||
return namespaces.filter((namespace) => {
|
||||
if (this.row.project === '*') {
|
||||
return true;
|
||||
} else if (this.row.project) {
|
||||
return namespace.project?.id === this.row.project;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
namespaceOptions() {
|
||||
const out = (this.filteredNamespaces || []).map((namespace) => {
|
||||
return {
|
||||
label: namespace.metadata.name,
|
||||
value: namespace.id,
|
||||
};
|
||||
});
|
||||
|
||||
return [{
|
||||
label: this.t('generic.all'),
|
||||
value: '*',
|
||||
}, ...out];
|
||||
},
|
||||
|
||||
guestClusterOptions() {
|
||||
const clusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
|
||||
const configs = this.$store.getters['management/all'](HCI.HARVESTER_CONFIG);
|
||||
const selectedClusters = this.rows.map(row => row?.guestCluster);
|
||||
const filteredNamespaces = this.filteredNamespaces.map(n => n.id);
|
||||
|
||||
const out = clusters.filter((c) => {
|
||||
const machinePools = c.spec?.rkeConfig?.machinePools || [];
|
||||
const machineConfigName = machinePools[0]?.machineConfigRef?.name;
|
||||
const config = configs.find(c => c.id === `fleet-default/${ machineConfigName }`);
|
||||
|
||||
if (config) {
|
||||
const vmNamespace = config?.vmNamespace;
|
||||
|
||||
if (this.row.namespace === '*' && filteredNamespaces.includes(vmNamespace)) {
|
||||
return true;
|
||||
} else {
|
||||
return vmNamespace === this.row.namespace && !selectedClusters.includes(c.id);
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}).map((cluster) => {
|
||||
return {
|
||||
label: cluster.nameDisplay,
|
||||
value: cluster.metadata.name,
|
||||
};
|
||||
});
|
||||
|
||||
return [{
|
||||
label: this.t('generic.none'),
|
||||
value: '',
|
||||
}, {
|
||||
label: this.t('generic.all'),
|
||||
value: '*',
|
||||
}, ...out];
|
||||
},
|
||||
|
||||
projectOptions() {
|
||||
const projects = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
|
||||
|
||||
const out = projects.filter(p => p.metadata.namespace === this.currentCluster.id).map((project) => {
|
||||
return {
|
||||
label: project.nameDisplay,
|
||||
value: project.id,
|
||||
};
|
||||
});
|
||||
|
||||
return [{
|
||||
label: this.t('generic.none'),
|
||||
value: '',
|
||||
}, {
|
||||
label: this.t('generic.all'),
|
||||
value: '*',
|
||||
}, ...out];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
update() {
|
||||
const { namespace, project, guestCluster } = this.row;
|
||||
|
||||
this.$emit('input', {
|
||||
namespace,
|
||||
project,
|
||||
guestCluster,
|
||||
});
|
||||
},
|
||||
|
||||
remove() {
|
||||
this.$emit('remove');
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
'row.project'() {
|
||||
if (this.row.namespace !== '*') {
|
||||
this.row.namespace = '';
|
||||
}
|
||||
|
||||
if (this.row.guestCluster !== '*' || this.row.guestCluster !== '') {
|
||||
this.row.guestCluster = '';
|
||||
}
|
||||
},
|
||||
|
||||
'row.namespace'() {
|
||||
if (this.row.guestCluster !== '*') {
|
||||
this.row.guestCluster = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="pool-row"
|
||||
:class="{
|
||||
'show-project-and-cluster': showProjectAndCluster,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="showProjectAndCluster"
|
||||
class="pool-project"
|
||||
>
|
||||
<span v-if="isView">
|
||||
{{ row.project }}
|
||||
</span>
|
||||
<Select
|
||||
v-else
|
||||
v-model="row.project"
|
||||
:options="projectOptions"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
<div class="pool-namespace">
|
||||
<span v-if="isView">
|
||||
{{ row.namespace }}
|
||||
</span>
|
||||
<Select
|
||||
v-else
|
||||
v-model="row.namespace"
|
||||
:options="namespaceOptions"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showProjectAndCluster"
|
||||
class="pool-guestCluster"
|
||||
>
|
||||
<span v-if="isView">
|
||||
{{ row.guestCluster }}
|
||||
</span>
|
||||
<Select
|
||||
v-else
|
||||
v-model="row.guestCluster"
|
||||
:options="guestClusterOptions"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="showRemove" class="remove">
|
||||
<button type="button" class="btn role-link" @click="remove(idx)">
|
||||
<t k="generic.remove" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pool-row {
|
||||
display: grid;
|
||||
grid-column-gap: $column-gutter;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
|
||||
grid-template-columns: 40% 40% 15%;
|
||||
|
||||
&.show-project-and-cluster {
|
||||
grid-template-columns: 25% 25% 25% 15%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
<script>
|
||||
import debounce from 'lodash/debounce';
|
||||
import { _EDIT, _VIEW } from '@shell/config/query-params';
|
||||
import { removeAt } from '@shell/utils/array';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: _EDIT,
|
||||
},
|
||||
specType: {
|
||||
type: String,
|
||||
default: 'ClusterIP',
|
||||
},
|
||||
autoAddIfEmpty: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
const rows = (this.value || []).map((row) => {
|
||||
let type = 'cidr';
|
||||
|
||||
if (row.rangeStart && row.rangeEnd) {
|
||||
type = 'range';
|
||||
}
|
||||
|
||||
return {
|
||||
...row,
|
||||
type,
|
||||
};
|
||||
});
|
||||
|
||||
return { rows };
|
||||
},
|
||||
|
||||
computed: {
|
||||
isView() {
|
||||
return this.mode === _VIEW;
|
||||
},
|
||||
|
||||
showAdd() {
|
||||
return !this.isView;
|
||||
},
|
||||
|
||||
showRemove() {
|
||||
return !this.isView;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.queueUpdate = debounce(this.update, 500);
|
||||
},
|
||||
|
||||
methods: {
|
||||
addCIDR() {
|
||||
this.rows.push({
|
||||
subnet: '',
|
||||
gateway: '',
|
||||
type: 'cidr',
|
||||
});
|
||||
|
||||
this.queueUpdate();
|
||||
},
|
||||
|
||||
addRange() {
|
||||
this.rows.push({
|
||||
subnet: '',
|
||||
gateway: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
type: 'range',
|
||||
});
|
||||
|
||||
this.queueUpdate();
|
||||
},
|
||||
|
||||
remove(idx) {
|
||||
removeAt(this.rows, idx);
|
||||
this.queueUpdate();
|
||||
},
|
||||
|
||||
update() {
|
||||
if ( this.isView ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.rows);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="rows.length">
|
||||
<div
|
||||
v-for="(row, idx) in rows"
|
||||
:key="idx"
|
||||
>
|
||||
<div
|
||||
class="pool-headers"
|
||||
:class="{
|
||||
[row.type]: true,
|
||||
}"
|
||||
>
|
||||
<span class="pool-subnet">
|
||||
<t k="harvester.ipPool.subnet.label" />
|
||||
<span class="text-error">
|
||||
*
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="pool-gateway"
|
||||
>
|
||||
<t k="harvester.ipPool.gateway.label" />
|
||||
</span>
|
||||
<span
|
||||
v-if="row.type === 'range'"
|
||||
class="pool-startIP"
|
||||
>
|
||||
<t k="harvester.ipPool.startIP.label" />
|
||||
</span>
|
||||
<span
|
||||
v-if="row.type === 'range'"
|
||||
class="pool-endIP"
|
||||
>
|
||||
<t k="harvester.ipPool.endIP.label" />
|
||||
</span>
|
||||
<span
|
||||
v-if="showRemove"
|
||||
class="remove"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="pool-row"
|
||||
:class="{
|
||||
[row.type]: true,
|
||||
}"
|
||||
>
|
||||
<div class="pool-subnet">
|
||||
<span v-if="isView">
|
||||
{{ row.subnet }}
|
||||
</span>
|
||||
<input
|
||||
v-else
|
||||
v-model="row.subnet"
|
||||
type="text"
|
||||
@input="queueUpdate"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="pool-gateway"
|
||||
>
|
||||
<span v-if="isView">
|
||||
{{ row.gateway }}
|
||||
</span>
|
||||
<input
|
||||
v-else
|
||||
v-model="row.gateway"
|
||||
type="text"
|
||||
@input="queueUpdate"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="row.type === 'range'"
|
||||
class="pool-startIP"
|
||||
>
|
||||
<span v-if="isView">
|
||||
{{ row.rangeStart }}
|
||||
</span>
|
||||
<input
|
||||
v-else
|
||||
v-model="row.rangeStart"
|
||||
type="text"
|
||||
@input="queueUpdate"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="row.type === 'range'"
|
||||
class="pool-endIP"
|
||||
>
|
||||
<span v-if="isView">
|
||||
{{ row.rangeEnd }}
|
||||
</span>
|
||||
<input
|
||||
v-else
|
||||
v-model="row.rangeEnd"
|
||||
type="text"
|
||||
@input="queueUpdate"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="showRemove" class="remove">
|
||||
<button type="button" class="btn role-link" @click="remove(idx)">
|
||||
<t k="generic.remove" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdd" class="footer">
|
||||
<button type="button" class="btn role-tertiary add" @click="addCIDR()">
|
||||
<t k="harvester.ipPool.cidr.addLabel" />
|
||||
</button>
|
||||
<button type="button" class="btn role-tertiary add" @click="addRange()">
|
||||
<t k="harvester.ipPool.range.addLabel" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pool-headers, .pool-row {
|
||||
display: grid;
|
||||
grid-column-gap: $column-gutter;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
|
||||
&.cidr {
|
||||
grid-template-columns: 40%+$column-gutter 40%+$column-gutter 15%;
|
||||
}
|
||||
|
||||
&.range {
|
||||
grid-template-columns: 20% 20% 20% 20% 15%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script>
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import Priority from './Priority';
|
||||
|
||||
import { NETWORK_ATTACHMENT } from '@shell/config/types';
|
||||
import { _EDIT } from '@shell/config/query-params';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LabeledSelect,
|
||||
LabeledInput,
|
||||
Priority,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: _EDIT,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const selector = this.value || {
|
||||
network: '',
|
||||
priority: 0,
|
||||
scope: [],
|
||||
};
|
||||
|
||||
return { selector };
|
||||
},
|
||||
|
||||
computed: {
|
||||
networkOptions() {
|
||||
const networks = this.$store.getters['harvester/all'](NETWORK_ATTACHMENT) || [];
|
||||
|
||||
return [{
|
||||
label: this.t('generic.none'),
|
||||
value: '',
|
||||
}, ...networks.map(n => ({
|
||||
label: n.id,
|
||||
value: n.id,
|
||||
}))];
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.queueUpdate = debounce(this.update, 500);
|
||||
},
|
||||
|
||||
methods: {
|
||||
update() {
|
||||
if ( this.isView ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.selector);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
v-model="selector.network"
|
||||
:label="t('harvester.ipPool.network.label')"
|
||||
:options="networkOptions"
|
||||
:mode="mode"
|
||||
@input="queueUpdate"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model.number="selector.priority"
|
||||
:label="t('harvester.ipPool.priority.label')"
|
||||
:mode="mode"
|
||||
type="number"
|
||||
min="0"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Priority
|
||||
v-model="selector.scope"
|
||||
class="col span-12"
|
||||
:mode="mode"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,119 @@
|
||||
<script>
|
||||
import NameNsDescription from '@shell/components/form/NameNsDescription';
|
||||
import ResourceTabs from '@shell/components/form/ResourceTabs';
|
||||
import Tab from '@shell/components/Tabbed/Tab';
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import { NETWORK_ATTACHMENT, CAPI } from '@shell/config/types';
|
||||
import { allHash } from '@shell/utils/promise';
|
||||
import CruResource from '@shell/components/CruResource';
|
||||
import Range from './Range';
|
||||
import Selector from './Selector';
|
||||
import { HCI } from '@pkg/harvester/types';
|
||||
|
||||
export default {
|
||||
name: 'HarvesterIPPool',
|
||||
|
||||
components: {
|
||||
NameNsDescription,
|
||||
ResourceTabs,
|
||||
Tab,
|
||||
CruResource,
|
||||
Range,
|
||||
Selector,
|
||||
},
|
||||
|
||||
mixins: [CreateEditView],
|
||||
|
||||
async fetch() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
|
||||
const hash = {
|
||||
networks: this.$store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT }),
|
||||
settings: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SETTING }),
|
||||
};
|
||||
|
||||
if (this.$store.getters['management/schemaFor'](HCI.HARVESTER_CONFIG)) {
|
||||
hash.harvesterConfigs = this.$store.dispatch(`management/findAll`, { type: HCI.HARVESTER_CONFIG });
|
||||
}
|
||||
|
||||
if (this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER)) {
|
||||
hash.rancherClusters = this.$store.dispatch(`management/findAll`, { type: CAPI.RANCHER_CLUSTER });
|
||||
}
|
||||
|
||||
await allHash(hash);
|
||||
},
|
||||
|
||||
data() {
|
||||
return { errors: [] };
|
||||
},
|
||||
|
||||
computed: {
|
||||
yamlModifiers() {
|
||||
const activelyRemove = [
|
||||
'metadata.managedFields',
|
||||
'metadata.relationships',
|
||||
'metadata.state',
|
||||
'links',
|
||||
'type',
|
||||
'id'
|
||||
];
|
||||
|
||||
if (this.isCreate) {
|
||||
activelyRemove.push('status');
|
||||
}
|
||||
|
||||
return { activelyRemove };
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CruResource
|
||||
:done-route="doneRoute"
|
||||
:resource="value"
|
||||
:mode="mode"
|
||||
:errors="errors"
|
||||
:apply-hooks="applyHooks"
|
||||
:yaml-modifiers="yamlModifiers"
|
||||
@finish="save"
|
||||
>
|
||||
<NameNsDescription
|
||||
:value="value"
|
||||
:namespaced="false"
|
||||
:mode="mode"
|
||||
/>
|
||||
|
||||
<ResourceTabs
|
||||
class="mt-15"
|
||||
:need-conditions="false"
|
||||
:need-related="false"
|
||||
:side-tabs="true"
|
||||
:mode="mode"
|
||||
>
|
||||
<Tab
|
||||
name="range"
|
||||
:label="t('harvester.ipPool.tabs.range')"
|
||||
:weight="98"
|
||||
class="bordered-table"
|
||||
>
|
||||
<Range
|
||||
v-model="value.spec.ranges"
|
||||
class="col span-12"
|
||||
:mode="mode"
|
||||
/>
|
||||
</Tab>
|
||||
<Tab
|
||||
name="selector"
|
||||
:label="t('harvester.ipPool.tabs.selector')"
|
||||
:weight="97"
|
||||
class="bordered-table"
|
||||
>
|
||||
<Selector
|
||||
v-model="value.spec.selector"
|
||||
:mode="mode"
|
||||
/>
|
||||
</Tab>
|
||||
</ResourceTabs>
|
||||
</CruResource>
|
||||
</template>
|
||||
Reference in New Issue
Block a user