diff options
Diffstat (limited to 'app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue')
-rw-r--r-- | app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue new file mode 100644 index 00000000000..84d1c5ccc6a --- /dev/null +++ b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue @@ -0,0 +1,197 @@ +<script> +import { uniqueId } from 'lodash'; +import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea } from '@gitlab/ui'; +import { s__, __, sprintf } from '~/locale'; +import { NAME_REGEX_LENGTH } from '../constants'; +import { mapComputedToEvent } from '../utils'; + +export default { + components: { + GlFormGroup, + GlToggle, + GlFormSelect, + GlFormTextarea, + }, + props: { + formOptions: { + type: Object, + required: false, + default: () => ({}), + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + value: { + type: Object, + required: false, + default: () => ({}), + }, + labelCols: { + type: [Number, String], + required: false, + default: 3, + }, + labelAlign: { + type: String, + required: false, + default: 'right', + }, + }, + nameRegexPlaceholder: '.*', + selectList: [ + { + name: 'expiration-policy-interval', + label: s__('ContainerRegistry|Expiration interval:'), + model: 'older_than', + optionKey: 'olderThan', + }, + { + name: 'expiration-policy-schedule', + label: s__('ContainerRegistry|Expiration schedule:'), + model: 'cadence', + optionKey: 'cadence', + }, + { + name: 'expiration-policy-latest', + label: s__('ContainerRegistry|Number of tags to retain:'), + model: 'keep_n', + optionKey: 'keepN', + }, + ], + data() { + return { + uniqueId: uniqueId(), + }; + }, + computed: { + ...mapComputedToEvent(['enabled', 'cadence', 'older_than', 'keep_n', 'name_regex'], 'value'), + policyEnabledText() { + return this.enabled ? __('enabled') : __('disabled'); + }, + toggleDescriptionText() { + return sprintf( + s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}'), + { + toggleStatus: `<strong>${this.policyEnabledText}</strong>`, + }, + false, + ); + }, + regexHelpText() { + return sprintf( + s__( + 'ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported. To select all tags, use %{codeStart}.*%{codeEnd}', + ), + { + codeStart: '<code>', + codeEnd: '</code>', + }, + false, + ); + }, + nameRegexState() { + return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null; + }, + fieldsValidity() { + return this.nameRegexState !== false; + }, + isFormElementDisabled() { + return !this.enabled || this.isLoading; + }, + }, + watch: { + fieldsValidity: { + immediate: true, + handler(valid) { + if (valid) { + this.$emit('validated'); + } else { + this.$emit('invalidated'); + } + }, + }, + }, + methods: { + idGenerator(id) { + return `${id}_${this.uniqueId}`; + }, + updateModel(value, key) { + this[key] = value; + }, + }, +}; +</script> + +<template> + <div ref="form-elements" class="lh-2"> + <gl-form-group + :id="idGenerator('expiration-policy-toggle-group')" + :label-cols="labelCols" + :label-align="labelAlign" + :label-for="idGenerator('expiration-policy-toggle')" + :label="s__('ContainerRegistry|Expiration policy:')" + > + <div class="d-flex align-items-start"> + <gl-toggle + :id="idGenerator('expiration-policy-toggle')" + v-model="enabled" + :disabled="isLoading" + /> + <span class="mb-2 ml-1 lh-2" v-html="toggleDescriptionText"></span> + </div> + </gl-form-group> + + <gl-form-group + v-for="select in $options.selectList" + :id="idGenerator(`${select.name}-group`)" + :key="select.name" + :label-cols="labelCols" + :label-align="labelAlign" + :label-for="idGenerator(select.name)" + :label="select.label" + > + <gl-form-select + :id="idGenerator(select.name)" + :value="value[select.model]" + :disabled="isFormElementDisabled" + @input="updateModel($event, select.model)" + > + <option + v-for="option in formOptions[select.optionKey]" + :key="option.key" + :value="option.key" + > + {{ option.label }} + </option> + </gl-form-select> + </gl-form-group> + + <gl-form-group + :id="idGenerator('expiration-policy-name-matching-group')" + :label-cols="labelCols" + :label-align="labelAlign" + :label-for="idGenerator('expiration-policy-name-matching')" + :label=" + s__('ContainerRegistry|Docker tags with names matching this regex pattern will expire:') + " + :state="nameRegexState" + :invalid-feedback=" + s__('ContainerRegistry|The value of this input should be less than 255 characters') + " + > + <gl-form-textarea + :id="idGenerator('expiration-policy-name-matching')" + v-model="name_regex" + :placeholder="$options.nameRegexPlaceholder" + :state="nameRegexState" + :disabled="isFormElementDisabled" + trim + /> + <template #description> + <span ref="regex-description" v-html="regexHelpText"></span> + </template> + </gl-form-group> + </div> +</template> |