diff options
Diffstat (limited to 'app/assets/javascripts/clusters/forms/components/integration_form.vue')
-rw-r--r-- | app/assets/javascripts/clusters/forms/components/integration_form.vue | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters/forms/components/integration_form.vue b/app/assets/javascripts/clusters/forms/components/integration_form.vue new file mode 100644 index 00000000000..53e004b4fc0 --- /dev/null +++ b/app/assets/javascripts/clusters/forms/components/integration_form.vue @@ -0,0 +1,163 @@ +<script> +import { + GlFormGroup, + GlFormInput, + GlToggle, + GlTooltipDirective, + GlSprintf, + GlLink, + GlButton, +} from '@gitlab/ui'; +import { mapState } from 'vuex'; + +export default { + components: { + GlFormGroup, + GlToggle, + GlFormInput, + GlSprintf, + GlLink, + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + inject: { + autoDevopsHelpPath: { + type: String, + }, + externalEndpointHelpPath: { + type: String, + }, + }, + data() { + return { + toggleEnabled: true, + envScope: '*', + baseDomainField: '', + externalIp: '', + }; + }, + computed: { + ...mapState([ + 'enabled', + 'editable', + 'environmentScope', + 'baseDomain', + 'applicationIngressExternalIp', + ]), + canSubmit() { + return ( + this.enabled !== this.toggleEnabled || + this.environmentScope !== this.envScope || + this.baseDomain !== this.baseDomainField + ); + }, + }, + mounted() { + this.toggleEnabled = this.enabled; + this.envScope = this.environmentScope; + this.baseDomainField = this.baseDomain; + this.externalIp = this.applicationIngressExternalIp; + }, +}; +</script> + +<template> + <div class="d-flex gl-flex-direction-column"> + <gl-form-group> + <div class="gl-display-flex gl-align-items-center"> + <h4 class="gl-pr-3 gl-m-0">{{ s__('ClusterIntegration|GitLab Integration') }}</h4> + + <div class="js-cluster-enable-toggle-area"> + <gl-toggle + id="toggleCluster" + v-model="toggleEnabled" + v-gl-tooltip:tooltipcontainer + name="cluster[enabled]" + class="gl-mb-0 js-project-feature-toggle" + data-qa-selector="integration_status_toggle" + aria-describedby="toggleCluster" + :disabled="!editable" + :title=" + s__( + 'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.', + ) + " + /> + </div> + </div> + </gl-form-group> + + <gl-form-group + :label="s__('ClusterIntegration|Environment scope')" + label-size="sm" + label-for="cluster_environment_scope" + :description=" + s__('ClusterIntegration|Choose which of your environments will use this cluster.') + " + > + <gl-form-input + id="cluster_environment_scope" + v-model="envScope" + name="cluster[environment_scope]" + class="col-md-6" + type="text" + /> + </gl-form-group> + + <gl-form-group + :label="s__('ClusterIntegration|Base domain')" + label-size="sm" + label-for="cluster_base_domain" + > + <gl-form-input + id="cluster_base_domain" + v-model="baseDomainField" + name="cluster[base_domain]" + data-qa-selector="base_domain_field" + class="col-md-6" + type="text" + /> + <div class="form-text text-muted inline"> + <gl-sprintf + :message=" + s__( + 'ClusterIntegration|Specifying a domain will allow you to use Auto Review Apps and Auto Deploy stages for %{linkStart}Auto DevOps.%{linkEnd} The domain should have a wildcard DNS configured matching the domain. ', + ) + " + > + <template #link="{ content }"> + <gl-link :href="autoDevopsHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + <div v-if="applicationIngressExternalIp" class="js-ingress-domain-help-text inline"> + {{ s__('ClusterIntegration|Alternatively, ') }} + <gl-sprintf :message="s__('ClusterIntegration|%{externalIp}.nip.io')"> + <template #externalIp>{{ externalIp }}</template> + </gl-sprintf> + {{ s__('ClusterIntegration|can be used instead of a custom domain. ') }} + </div> + <gl-sprintf + class="inline" + :message="s__('ClusterIntegration|%{linkStart}More information%{linkEnd}')" + > + <template #link="{ content }"> + <gl-link :href="externalEndpointHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </div> + </gl-form-group> + <div v-if="editable" class="form group gl-display-flex gl-justify-content-end"> + <gl-button + category="primary" + variant="success" + type="submit" + :disabled="!canSubmit" + :aria-disabled="!canSubmit" + data-qa-selector="save_changes_button" + >{{ s__('ClusterIntegration|Save changes') }}</gl-button + > + </div> + </div> +</template> |