diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/runner_aws_deployments')
3 files changed, 189 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js new file mode 100644 index 00000000000..46361c6eb32 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js @@ -0,0 +1,49 @@ +import { s__, sprintf } from '~/locale'; + +export const EXPERIMENT_NAME = 'ci_runner_templates'; + +export const README_URL = + 'https://gitlab.com/guided-explorations/aws/gitlab-runner-autoscaling-aws-asg/-/blob/main/easybuttons.md'; + +export const CF_BASE_URL = + 'https://us-west-2.console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/create/review?'; + +export const TEMPLATES_BASE_URL = 'https://gl-public-templates.s3.amazonaws.com/cfn/experimental/'; + +export const EASY_BUTTONS = [ + { + stackName: 'linux-docker-nonspot', + templateName: + 'easybutton-amazon-linux-2-docker-manual-scaling-with-schedule-ondemandonly.cf.yml', + description: s__( + 'Runners|Amazon Linux 2 Docker HA with manual scaling and optional scheduling. Non-spot. Default choice for Linux Docker executor.', + ), + }, + { + stackName: 'linux-docker-spotonly', + templateName: 'easybutton-amazon-linux-2-docker-manual-scaling-with-schedule-spotonly.cf.yml', + description: sprintf( + s__( + 'Runners|Amazon Linux 2 Docker HA with manual scaling and optional scheduling. %{percentage} spot.', + ), + { percentage: '100%' }, + ), + }, + { + stackName: 'win2019-shell-non-spot', + templateName: 'easybutton-windows2019-shell-manual-scaling-with-scheduling-ondemandonly.cf.yml', + description: s__( + 'Runners|Windows 2019 Shell with manual scaling and optional scheduling. Non-spot. Default choice for Windows Shell executor.', + ), + }, + { + stackName: 'win2019-shell-spot', + templateName: 'easybutton-windows2019-shell-manual-scaling-with-scheduling-spotonly.cf.yml', + description: sprintf( + s__( + 'Runners|Windows 2019 Shell with manual scaling and optional scheduling. %{percentage} spot.', + ), + { percentage: '100%' }, + ), + }, +]; diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue new file mode 100644 index 00000000000..e3e3b9abc3c --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue @@ -0,0 +1,43 @@ +<script> +import { GlButton, GlModalDirective } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import RunnerAwsDeploymentsModal from './runner_aws_deployments_modal.vue'; + +export default { + components: { + GlButton, + RunnerAwsDeploymentsModal, + }, + directives: { + GlModalDirective, + }, + modalId: 'runner-aws-deployments-modal', + i18n: { + buttonText: s__('Runners|Deploy GitLab Runner in AWS'), + }, + data() { + return { + opened: false, + }; + }, + methods: { + onClick() { + this.opened = true; + }, + }, +}; +</script> +<template> + <div> + <gl-button + v-gl-modal-directive="$options.modalId" + class="gl-mt-4" + data-testid="show-modal-button" + variant="confirm" + @click="onClick" + > + {{ $options.i18n.buttonText }} + </gl-button> + <runner-aws-deployments-modal v-if="opened" :modal-id="$options.modalId" /> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue new file mode 100644 index 00000000000..f21dea468cb --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue @@ -0,0 +1,97 @@ +<script> +import { GlModal, GlSprintf, GlLink } from '@gitlab/ui'; +import ExperimentTracking from '~/experimentation/experiment_tracking'; +import { getBaseURL, objectToQuery } from '~/lib/utils/url_utility'; +import { __, s__ } from '~/locale'; +import { + EXPERIMENT_NAME, + README_URL, + CF_BASE_URL, + TEMPLATES_BASE_URL, + EASY_BUTTONS, +} from './constants'; + +export default { + components: { + GlModal, + GlSprintf, + GlLink, + }, + props: { + modalId: { + type: String, + required: true, + }, + }, + methods: { + easyButtonUrl(easyButton) { + const params = { + templateURL: TEMPLATES_BASE_URL + easyButton.templateName, + stackName: easyButton.stackName, + param_3GITLABRunnerInstanceURL: getBaseURL(), + }; + return CF_BASE_URL + objectToQuery(params); + }, + trackCiRunnerTemplatesClick(stackName) { + const tracking = new ExperimentTracking(EXPERIMENT_NAME); + tracking.event(`template_clicked_${stackName}`); + }, + }, + i18n: { + title: s__('Runners|Deploy GitLab Runner in AWS'), + instructions: s__( + 'Runners|For each solution, you will choose a capacity. 1 enables warm HA through Auto Scaling group re-spawn. 2 enables hot HA because the service is available even when a node is lost. 3 or more enables hot HA and manual scaling of runner fleet.', + ), + dont_see_what_you_are_looking_for: s__( + "Rnners|Don't see what you are looking for? See the full list of options, including a fully customizable option, %{linkStart}here%{linkEnd}.", + ), + note: s__( + 'Runners|If you do not select an AWS VPC, the runner will deploy to the Default VPC in the AWS Region you select. Please consult with your AWS administrator to understand if there are any security risks to deploying into the Default VPC in any given region in your AWS account.', + ), + }, + closeButton: { + text: __('Cancel'), + attributes: [{ variant: 'default' }], + }, + readmeUrl: README_URL, + easyButtons: EASY_BUTTONS, +}; +</script> +<template> + <gl-modal + :modal-id="modalId" + :title="$options.i18n.title" + :action-secondary="$options.closeButton" + size="sm" + > + <p>{{ $options.i18n.instructions }}</p> + <ul class="gl-list-style-none gl-p-0 gl-mb-0"> + <li v-for="easyButton in $options.easyButtons" :key="easyButton.templateName"> + <gl-link + :href="easyButtonUrl(easyButton)" + target="_blank" + class="gl-display-flex gl-font-weight-bold" + @click="trackCiRunnerTemplatesClick(easyButton.stackName)" + > + <img + :title="easyButton.stackName" + :alt="easyButton.stackName" + src="/assets/aws-cloud-formation.png" + width="46" + height="46" + class="gl-mt-2 gl-mr-5 gl-mb-6" + /> + {{ easyButton.description }} + </gl-link> + </li> + </ul> + <p> + <gl-sprintf :message="$options.i18n.dont_see_what_you_are_looking_for"> + <template #link="{ content }"> + <gl-link :href="$options.readmeUrl" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <p class="gl-font-sm gl-mb-0">{{ $options.i18n.note }}</p> + </gl-modal> +</template> |