diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/variables/dropdown_field.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/variables/dropdown_field.vue | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue new file mode 100644 index 00000000000..d79b8284a65 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue @@ -0,0 +1,53 @@ +<script> +import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui'; + +export default { + components: { + GlFormGroup, + GlDropdown, + GlDropdownItem, + }, + props: { + name: { + type: String, + required: true, + }, + label: { + type: String, + required: true, + }, + value: { + type: String, + required: false, + default: '', + }, + options: { + type: Object, + required: true, + }, + }, + computed: { + text() { + const selectedOpt = this.options.values?.find(opt => opt.value === this.value); + return selectedOpt?.text || this.value; + }, + }, + methods: { + onUpdate(value) { + this.$emit('onUpdate', this.name, value); + }, + }, +}; +</script> +<template> + <gl-form-group :label="label"> + <gl-dropdown toggle-class="dropdown-menu-toggle" :text="text || s__('Metrics|Select a value')"> + <gl-dropdown-item + v-for="val in options.values" + :key="val.value" + @click="onUpdate(val.value)" + >{{ val.text }}</gl-dropdown-item + > + </gl-dropdown> + </gl-form-group> +</template> |