diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue new file mode 100644 index 00000000000..cafebdfe5f4 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue @@ -0,0 +1,123 @@ +<script> +import { + GlButton, + GlSprintf, + GlLink, + GlFormRadioGroup, + GlFormRadio, + GlAccordion, + GlAccordionItem, +} from '@gitlab/ui'; +import Tracking from '~/tracking'; +import { getBaseURL, objectToQuery, visitUrl } from '~/lib/utils/url_utility'; +import { __, s__ } from '~/locale'; +import { + AWS_README_URL, + AWS_CF_BASE_URL, + AWS_TEMPLATES_BASE_URL, + AWS_EASY_BUTTONS, +} from '../constants'; + +export default { + components: { + GlButton, + GlSprintf, + GlLink, + GlFormRadioGroup, + GlFormRadio, + GlAccordion, + GlAccordionItem, + }, + mixins: [Tracking.mixin()], + data() { + return { + selectedIndex: 0, + }; + }, + computed: { + selected() { + return this.$options.easyButtons[this.selectedIndex]; + }, + }, + methods: { + borderBottom(idx) { + return idx < this.$options.easyButtons.length - 1; + }, + easyButtonUrl(easyButton) { + const params = { + templateURL: AWS_TEMPLATES_BASE_URL + easyButton.templateName, + stackName: easyButton.stackName, + param_3GITLABRunnerInstanceURL: getBaseURL(), + }; + return AWS_CF_BASE_URL + objectToQuery(params); + }, + trackCiRunnerTemplatesClick(stackName) { + this.track('template_clicked', { + label: stackName, + }); + }, + onOk() { + this.trackCiRunnerTemplatesClick(this.selected.stackName); + visitUrl(this.easyButtonUrl(this.selected), true); + }, + onClose() { + this.$emit('close'); + }, + }, + i18n: { + title: s__('Runners|Deploy GitLab Runner in AWS'), + instructions: s__( + 'Runners|Select your preferred option here. In the next step, you can choose the capacity for your runner in the AWS CloudFormation console.', + ), + chooseRunner: s__('Runners|Choose your preferred GitLab Runner'), + dontSeeWhatYouAreLookingFor: s__( + "Runners|Don't see what you are looking for? See the full list of options, including a fully customizable option %{linkStart}here%{linkEnd}.", + ), + moreDetails: __('More Details'), + lessDetails: __('Less Details'), + }, + readmeUrl: AWS_README_URL, + easyButtons: AWS_EASY_BUTTONS, +}; +</script> +<template> + <div> + <p>{{ $options.i18n.instructions }}</p> + <gl-form-radio-group v-model="selectedIndex" :label="$options.i18n.chooseRunner" label-sr-only> + <gl-form-radio + v-for="(easyButton, idx) in $options.easyButtons" + :key="easyButton.templateName" + :value="idx" + class="gl-py-5 gl-pl-8" + :class="{ 'gl-border-b': borderBottom(idx) }" + > + <div class="gl-mt-n1 gl-pl-4 gl-pb-2 gl-font-weight-bold"> + {{ easyButton.description }} + <gl-accordion :header-level="3" class="gl-pt-3"> + <gl-accordion-item + :title="$options.i18n.moreDetails" + :title-visible="$options.i18n.lessDetails" + class="gl-font-weight-normal" + > + <p class="gl-pt-2">{{ easyButton.moreDetails1 }}</p> + <p class="gl-m-0">{{ easyButton.moreDetails2 }}</p> + </gl-accordion-item> + </gl-accordion> + </div> + </gl-form-radio> + </gl-form-radio-group> + <p> + <gl-sprintf :message="$options.i18n.dontSeeWhatYouAreLookingFor"> + <template #link="{ content }"> + <gl-link :href="$options.readmeUrl" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <footer class="gl-display-flex gl-justify-content-end gl-pt-3 gl-gap-3"> + <gl-button @click="onClose()">{{ __('Close') }}</gl-button> + <gl-button variant="confirm" @click="onOk()"> + {{ s__('Runners|Deploy GitLab Runner in AWS') }} + </gl-button> + </footer> + </div> +</template> |