| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| |
| <template> |
| <div class="form-layout" v-ctrl-enter="handleSubmit"> |
| <a-spin :spinning="loading"> |
| <a-form |
| :ref="formRef" |
| :model="form" |
| :rules="rules" |
| @finish="handleSubmit" |
| layout="vertical"> |
| <a-form-item name="name" ref="name"> |
| <template #label> |
| <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/> |
| </template> |
| <a-input |
| v-model:value="form.name" |
| :placeholder="apiParams.name.description" |
| v-focus="true" /> |
| </a-form-item> |
| <a-form-item name="description" ref="description"> |
| <template #label> |
| <tooltip-label :title="$t('label.description')" :tooltip="apiParams.description.description"/> |
| </template> |
| <a-input |
| v-model:value="form.description" |
| :placeholder="apiParams.description.description"/> |
| </a-form-item> |
| <a-form-item name="scope" ref="scope" v-if="isAdminOrDomainAdmin"> |
| <template #label> |
| <tooltip-label :title="$t('label.scope')" :tooltip="apiParams.scope.description"/> |
| </template> |
| <a-radio-group |
| v-model:value="form.scope" |
| buttonStyle="solid" |
| @change="handleScopeChange"> |
| <a-radio-button value="Local"> |
| {{ $t('label.local') }} |
| </a-radio-button> |
| <a-radio-button value="Domain"> |
| {{ $t('label.domain') }} |
| </a-radio-button> |
| <a-radio-button value="Global" v-if="isAdmin"> |
| {{ $t('label.global') }} |
| </a-radio-button> |
| </a-radio-group> |
| </a-form-item> |
| <a-form-item name="domainid" ref="domainid" v-if="isAdminOrDomainAdmin && ['Domain', 'Local'].includes(form.scope)"> |
| <template #label :title="apiParams.domainid.description"> |
| {{ $t('label.domainid') }} |
| <a-tooltip> |
| <info-circle-outlined style="color: rgba(0,0,0,.45)" /> |
| </a-tooltip> |
| </template> |
| <infinite-scroll-select |
| id="domain-selection" |
| v-model:value="form.domainid" |
| api="listDomains" |
| :apiParams="domainsApiParams" |
| resourceType="domain" |
| optionValueKey="id" |
| optionLabelKey="path" |
| defaultIcon="block-outlined" |
| :defaultOption="{ id: null, path: ''}" |
| allowClear="true" |
| :placeholder="apiParams.domainid.description" |
| @change-option-value="handleDomainChanged" /> |
| </a-form-item> |
| <a-form-item name="account" ref="account" v-if="isAdminOrDomainAdmin && ['Local'].includes(form.scope) && form.domainid"> |
| <template #label> |
| <tooltip-label :title="$t('label.account')" :tooltip="apiParams.account.description"/> |
| </template> |
| <infinite-scroll-select |
| v-model:value="form.account" |
| api="listAccounts" |
| :apiParams="accountsApiParams" |
| resourceType="account" |
| optionValueKey="name" |
| optionLabelKey="name" |
| defaultIcon="team-outlined" |
| :placeholder="apiParams.account.description" /> |
| </a-form-item> |
| <a-form-item name="payloadurl" ref="payloadurl"> |
| <template #label> |
| <tooltip-label :title="$t('label.payloadurl')" :tooltip="apiParams.payloadurl.description"/> |
| </template> |
| <a-input |
| v-model:value="form.payloadurl" |
| :placeholder="apiParams.payloadurl.description" |
| @change="handleParamUpdate"/> |
| </a-form-item> |
| <a-form-item name="sslverification" ref="sslverification" v-if="isPayloadUrlHttps"> |
| <template #label> |
| <tooltip-label :title="$t('label.sslverification')" :tooltip="apiParams.sslverification.description"/> |
| </template> |
| <a-alert |
| v-if="!form.sslverification" |
| class="ssl-alert" |
| type="warning" |
| :message="$t('message.disable.webhook.ssl.verification')" /> |
| <a-switch |
| v-model:checked="form.sslverification" |
| @change="handleParamUpdate" /> |
| </a-form-item> |
| <a-form-item name="secretkey" ref="secretkey"> |
| <template #label> |
| <tooltip-label :title="$t('label.secretkey')" :tooltip="apiParams.secretkey.description"/> |
| </template> |
| <a-input |
| v-model:value="form.secretkey" |
| :placeholder="apiParams.secretkey.description" |
| @change="handleParamUpdate"/> |
| </a-form-item> |
| <test-webhook-delivery-view |
| ref="dispatchview" |
| :payloadUrl="form.payloadurl" |
| :sslVerification="isPayloadUrlHttps && form.sslverification" |
| :secretKey="form.secretkey" |
| :showActions="!(!form.payloadurl)" /> |
| <a-form-item name="state" ref="state"> |
| <template #label> |
| <tooltip-label :title="$t('label.enabled')" :tooltip="apiParams.state.description"/> |
| </template> |
| <a-switch v-model:checked="form.state" /> |
| </a-form-item> |
| <div :span="24" class="action-button"> |
| <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button> |
| <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button> |
| </div> |
| </a-form> |
| </a-spin> |
| </div> |
| </template> |
| |
| <script> |
| import { ref, reactive, toRaw } from 'vue' |
| import { postAPI } from '@/api' |
| import { mixinForm } from '@/utils/mixin' |
| import TooltipLabel from '@/components/widgets/TooltipLabel' |
| import TestWebhookDeliveryView from '@/components/view/TestWebhookDeliveryView' |
| import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect.vue' |
| |
| export default { |
| name: 'CreateWebhook', |
| mixins: [mixinForm], |
| components: { |
| TooltipLabel, |
| TestWebhookDeliveryView, |
| InfiniteScrollSelect |
| }, |
| props: {}, |
| data () { |
| return { |
| loading: false, |
| testDeliveryAllowed: false, |
| testDeliveryLoading: false |
| } |
| }, |
| beforeCreate () { |
| this.apiParams = this.$getApiParams('createWebhook') |
| }, |
| created () { |
| this.initForm() |
| }, |
| computed: { |
| isAdminOrDomainAdmin () { |
| return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype) |
| }, |
| isAdmin () { |
| return ['Admin'].includes(this.$store.getters.userInfo.roletype) |
| }, |
| isPayloadUrlHttps () { |
| if (this.form.payloadurl) { |
| return this.form.payloadurl.toLowerCase().startsWith('https://') |
| } |
| return false |
| }, |
| domainsApiParams () { |
| return { |
| listAll: true, |
| showicon: true, |
| details: 'min' |
| } |
| }, |
| accountsApiParams () { |
| if (!this.form.domainid) { |
| return null |
| } |
| return { |
| domainid: this.form.domainid |
| } |
| } |
| }, |
| methods: { |
| initForm () { |
| this.formRef = ref() |
| this.form = reactive({ |
| scope: 'Local', |
| state: true, |
| sslverification: true |
| }) |
| this.rules = reactive({ |
| name: [{ required: true, message: this.$t('message.error.create.webhook.name') }], |
| payloadurl: [{ required: true, message: this.$t('message.error.create.webhook.payloadurl') }] |
| }) |
| }, |
| isValidValueForKey (obj, key) { |
| return key in obj && obj[key] != null |
| }, |
| arrayHasItems (array) { |
| return array !== null && array !== undefined && Array.isArray(array) && array.length > 0 |
| }, |
| isObjectEmpty (obj) { |
| return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object) |
| }, |
| updateTestDeliveryLoading (value) { |
| this.testDeliveryLoading = value |
| }, |
| handleSubmit (e) { |
| e.preventDefault() |
| if (this.loading) return |
| this.formRef.value.validate().then(() => { |
| const formRaw = toRaw(this.form) |
| const values = this.handleRemoveFields(formRaw) |
| const params = { |
| name: values.name, |
| description: values.description, |
| payloadurl: values.payloadurl, |
| state: values.state ? 'Enabled' : 'Disabled' |
| } |
| if (this.isValidValueForKey(values, 'scope')) { |
| params.scope = values.scope |
| } |
| if (this.isValidValueForKey(values, 'sslverification')) { |
| params.sslverification = values.sslverification |
| } |
| if (this.isValidValueForKey(values, 'secretkey')) { |
| params.secretkey = values.secretkey |
| } |
| if (values.domainid) { |
| params.domainid = values.domainid |
| } |
| if (values.scope === 'Local' && values.domainid && !values.account) { |
| this.$notification.error({ |
| message: this.$t('message.request.failed'), |
| description: this.$t('message.error.create.webhook.local.account') |
| }) |
| return |
| } |
| if (values.account) { |
| // values.account is the account name (optionValueKey="name") |
| params.account = values.account |
| } |
| this.loading = true |
| postAPI('createWebhook', params).then(json => { |
| this.$emit('refresh-data') |
| this.$notification.success({ |
| message: this.$t('label.create.webhook'), |
| description: `${this.$t('message.success.create.webhook')} ${params.name}` |
| }) |
| this.closeAction() |
| }).catch(error => { |
| this.$notifyError(error) |
| }).finally(() => { |
| this.loading = false |
| }) |
| }).catch(error => { |
| this.formRef.value.scrollToField(error.errorFields[0].name) |
| }) |
| }, |
| closeAction () { |
| this.$emit('close-action') |
| }, |
| handleParamUpdate () { |
| setTimeout(() => { |
| this.$refs.dispatchview.timedTestWebhookDelivery() |
| }, 1) |
| }, |
| handleScopeChange (e) { |
| this.form.domainid = null |
| this.form.account = null |
| }, |
| handleDomainChanged (domainid) { |
| this.form.account = null |
| } |
| } |
| } |
| </script> |
| |
| <style scoped lang="less"> |
| .form-layout { |
| width: 80vw; |
| |
| @media (min-width: 700px) { |
| width: 650px; |
| } |
| } |
| |
| .ssl-alert { |
| margin: 0 0 10px 0; |
| } |
| </style> |
