dashboard/shell/components/Questions/Reference.vue

135 lines
3.0 KiB
Vue

<script>
import { LabeledInput } from '@components/Form/LabeledInput';
import LabeledSelect from '@shell/components/form/LabeledSelect';
import { filterBy } from '@shell/utils/array';
import { PVC, STORAGE_CLASS } from '@shell/config/types';
import Question from './Question';
// Older versions of rancher document these words as valid types
const LEGACY_MAP = {
storageclass: STORAGE_CLASS,
pvc: PVC,
};
export default {
components: { LabeledInput, LabeledSelect },
mixins: [Question],
props: {
inStore: {
type: String,
default: 'cluster',
},
targetNamespace: {
type: String,
default: null,
},
},
async fetch() {
if ( this.typeSchema ) {
this.all = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.typeName });
}
},
data() {
const t = this.question.type;
let typeName;
const match = t.match(/^reference\[(.*)\]$/);
if ( match ) {
typeName = match?.[1];
} else {
typeName = LEGACY_MAP[t] || t;
}
let typeSchema;
if ( typeName ) {
typeSchema = this.$store.getters[`${ this.inStore }/schemaFor`](typeName);
}
return {
typeName,
typeSchema,
all: [],
};
},
computed: {
isNamespaced() {
return !!this.typeSchema?.attributes?.namespaced;
},
options() {
let out = this.all;
if ( this.isNamespaced ) {
out = filterBy(this.all, 'metadata.namespace', this.targetNamespace);
}
return out.map((x) => {
return {
label: x.nameDisplay || x.metadata.name,
value: x.metadata.name
};
});
}
},
};
</script>
<template>
<div
v-if="typeSchema"
class="row"
>
<div class="col span-6">
<LabeledSelect
:mode="mode"
:options="options"
:disabled="$fetchState.pending || disabled"
:label="displayLabel"
:placeholder="question.description"
:required="question.required"
:value="value"
@input="!$fetchState.pending && $emit('input', $event)"
/>
</div>
<div class="col span-6 mt-10">
{{ typeSchema.attributes.kind }}<span v-if="isNamespaced"> in namespace {{ targetNamespace }}</span>
<div v-if="showDescription">
{{ question.description }}
</div>
</div>
</div>
<div
v-else
class="row"
>
<div class="col span-6">
<LabeledInput
:mode="mode"
:disabled="$fetchState.pending || disabled"
:label="displayLabel"
:placeholder="question.description"
:required="question.required"
:value="value"
@input="!$fetchState.pending && $emit('input', $event)"
/>
</div>
<div class="col span-6 mt-10">
{{ question.type }}<span v-if="isNamespaced"> in namespace {{ targetNamespace }}</span>
<div v-if="showDescription">
{{ question.description }}
</div>
<div class="text-error">
(You do not have access to list this type)
</div>
</div>
</div>
</template>