diff options
Diffstat (limited to 'app/assets/javascripts/clusters/forms')
4 files changed, 215 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> diff --git a/app/assets/javascripts/clusters/forms/show/index.js b/app/assets/javascripts/clusters/forms/show/index.js new file mode 100644 index 00000000000..47a3016c777 --- /dev/null +++ b/app/assets/javascripts/clusters/forms/show/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue'; +import IntegrationForm from '../components/integration_form.vue'; +import { createStore } from '../stores'; + +export default () => { + const entryPoint = document.querySelector('#js-cluster-integration-form'); + + if (!entryPoint) { + return; + } + + const { autoDevopsHelpPath, externalEndpointHelpPath } = entryPoint.dataset; + + // eslint-disable-next-line no-new + new Vue({ + el: entryPoint, + store: createStore(entryPoint.dataset), + provide: { + autoDevopsHelpPath, + externalEndpointHelpPath, + }, + + render(createElement) { + return createElement(IntegrationForm, {}); + }, + }); +}; diff --git a/app/assets/javascripts/clusters/forms/stores/index.js b/app/assets/javascripts/clusters/forms/stores/index.js new file mode 100644 index 00000000000..ae082c07f26 --- /dev/null +++ b/app/assets/javascripts/clusters/forms/stores/index.js @@ -0,0 +1,12 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import state from './state'; + +Vue.use(Vuex); + +export const createStore = initialState => + new Vuex.Store({ + state: state(initialState), + }); + +export default createStore; diff --git a/app/assets/javascripts/clusters/forms/stores/state.js b/app/assets/javascripts/clusters/forms/stores/state.js new file mode 100644 index 00000000000..2a96590b5e7 --- /dev/null +++ b/app/assets/javascripts/clusters/forms/stores/state.js @@ -0,0 +1,13 @@ +import { parseBoolean } from '../../../lib/utils/common_utils'; + +export default (initialState = {}) => { + return { + enabled: parseBoolean(initialState.enabled), + editable: parseBoolean(initialState.editable), + environmentScope: initialState.environmentScope, + baseDomain: initialState.baseDomain, + applicationIngressExternalIp: initialState.applicationIngressExternalIp, + autoDevopsHelpPath: initialState.autoDevopsHelpPath, + externalEndpointHelpPath: initialState.externalEndpointHelpPath, + }; +}; |