diff options
Diffstat (limited to 'app/assets/javascripts/clusters/components/knative_domain_editor.vue')
| -rw-r--r-- | app/assets/javascripts/clusters/components/knative_domain_editor.vue | 232 |
1 files changed, 0 insertions, 232 deletions
diff --git a/app/assets/javascripts/clusters/components/knative_domain_editor.vue b/app/assets/javascripts/clusters/components/knative_domain_editor.vue deleted file mode 100644 index 89446680173..00000000000 --- a/app/assets/javascripts/clusters/components/knative_domain_editor.vue +++ /dev/null @@ -1,232 +0,0 @@ -<script> -import { - GlDropdown, - GlDropdownDivider, - GlDropdownItem, - GlLoadingIcon, - GlSearchBoxByType, - GlSprintf, - GlButton, - GlAlert, -} from '@gitlab/ui'; -import { APPLICATION_STATUS } from '~/clusters/constants'; -import { __, s__ } from '~/locale'; - -import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; - -const { UPDATING, UNINSTALLING } = APPLICATION_STATUS; - -export default { - components: { - GlButton, - ClipboardButton, - GlLoadingIcon, - GlDropdown, - GlDropdownDivider, - GlDropdownItem, - GlSearchBoxByType, - GlSprintf, - GlAlert, - }, - props: { - knative: { - type: Object, - required: true, - }, - ingressDnsHelpPath: { - type: String, - default: '', - required: false, - }, - }, - data() { - return { - searchQuery: '', - }; - }, - computed: { - saveButtonDisabled() { - return [UNINSTALLING, UPDATING].includes(this.knative.status); - }, - saving() { - return [UPDATING].includes(this.knative.status); - }, - saveButtonLabel() { - return this.saving ? __('Saving') : __('Save changes'); - }, - knativeInstalled() { - return this.knative.installed; - }, - knativeExternalEndpoint() { - return this.knative.externalIp || this.knative.externalHostname; - }, - knativeUpdateSuccessful() { - return this.knative.updateSuccessful; - }, - knativeHostname: { - get() { - return this.knative.hostname; - }, - set(hostname) { - this.selectCustomDomain(hostname); - }, - }, - domainDropdownText() { - return this.knativeHostname || s__('ClusterIntegration|Select existing domain or use new'); - }, - availableDomains() { - return this.knative.availableDomains || []; - }, - filteredDomains() { - const query = this.searchQuery.toLowerCase(); - return this.availableDomains.filter(({ domain }) => domain.toLowerCase().includes(query)); - }, - showDomainsDropdown() { - return this.availableDomains.length > 0; - }, - validationError() { - return this.knative.validationError; - }, - }, - watch: { - knativeUpdateSuccessful(updateSuccessful) { - if (updateSuccessful) { - this.$toast.show(s__('ClusterIntegration|Knative domain name was updated successfully.')); - } - }, - }, - methods: { - selectDomain({ id, domain }) { - this.$emit('set', { domain, domainId: id }); - }, - selectCustomDomain(domain) { - this.$emit('set', { domain, domainId: null }); - }, - }, -}; -</script> - -<template> - <div class="row"> - <gl-alert - v-if="knative.updateFailed" - class="gl-mb-5 col-12 js-cluster-knative-domain-name-failure-message" - variant="danger" - > - {{ s__('ClusterIntegration|Something went wrong while updating Knative domain name.') }} - </gl-alert> - - <div - :class="{ 'col-md-6': knativeInstalled, 'col-12': !knativeInstalled }" - class="form-group col-sm-12 mb-0" - > - <label for="knative-domainname"> - <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong> - </label> - - <gl-dropdown - v-if="showDomainsDropdown" - :text="domainDropdownText" - toggle-class="dropdown-menu-toggle" - class="w-100 mb-2" - > - <gl-search-box-by-type - v-model.trim="searchQuery" - :placeholder="s__('ClusterIntegration|Search domains')" - /> - <gl-dropdown-item - v-for="domain in filteredDomains" - :key="domain.id" - @click="selectDomain(domain)" - > - <span class="ml-1">{{ domain.domain }}</span> - </gl-dropdown-item> - <template v-if="searchQuery"> - <gl-dropdown-divider /> - <gl-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)"> - <span class="ml-1"> - <gl-sprintf :message="s__('ClusterIntegration|Use %{query}')"> - <template #query> - <code>{{ searchQuery }}</code> - </template> - </gl-sprintf> - </span> - </gl-dropdown-item> - </template> - </gl-dropdown> - - <input - v-else - id="knative-domainname" - v-model="knativeHostname" - type="text" - class="form-control js-knative-domainname" - /> - - <span v-if="validationError" class="gl-field-error">{{ validationError }}</span> - </div> - - <template v-if="knativeInstalled"> - <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0"> - <label for="knative-endpoint"> - <strong>{{ s__('ClusterIntegration|Knative Endpoint:') }}</strong> - </label> - <div v-if="knativeExternalEndpoint" class="input-group"> - <input - id="knative-endpoint" - :value="knativeExternalEndpoint" - type="text" - class="form-control js-knative-endpoint" - readonly - /> - <span class="input-group-append"> - <clipboard-button - :text="knativeExternalEndpoint" - :title="s__('ClusterIntegration|Copy Knative Endpoint')" - class="input-group-text js-knative-endpoint-clipboard-btn" - /> - </span> - </div> - <div v-else class="input-group"> - <input type="text" class="form-control js-endpoint" readonly /> - <gl-loading-icon - class="position-absolute align-self-center ml-2 js-knative-ip-loading-icon" - /> - </div> - </div> - - <p class="form-text text-muted col-12"> - {{ - s__( - `ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint.`, - ) - }} - <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">{{ - __('More information') - }}</a> - </p> - - <p - v-if="!knativeExternalEndpoint" - class="settings-message js-no-knative-endpoint-message mt-2 mr-3 mb-0 ml-3" - > - {{ - s__(`ClusterIntegration|The endpoint is in - the process of being assigned. Please check your Kubernetes - cluster or Quotas on Google Kubernetes Engine if it takes a long time.`) - }} - </p> - - <gl-button - class="js-knative-save-domain-button gl-mt-5 gl-ml-5" - variant="success" - category="primary" - :loading="saving" - :disabled="saveButtonDisabled" - @click="$emit('save')" - > - {{ saveButtonLabel }} - </gl-button> - </template> - </div> -</template> |