diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/runner_aws_deployments')
2 files changed, 9 insertions, 168 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 deleted file mode 100644 index 88c975b97b9..00000000000 --- a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js +++ /dev/null @@ -1,63 +0,0 @@ -import { s__, sprintf } from '~/locale'; - -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.', - ), - moreDetails1: s__('Runners|No spot. This is the default choice for Linux Docker executor.'), - moreDetails2: s__( - 'Runners|A capacity of 1 enables warm HA through Auto Scaling group re-spawn. A capacity of 2 enables hot HA because the service is available even when a node is lost. A capacity of 3 or more enables hot HA and manual scaling of runner fleet.', - ), - }, - { - 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%' }, - ), - moreDetails1: sprintf(s__('Runners|%{percentage} spot.'), { percentage: '100%' }), - moreDetails2: s__( - 'Runners|Capacity of 1 enables warm HA through Auto Scaling group re-spawn. Capacity of 2 enables hot HA because the service is available even when a node is lost. Capacity of 3 or more enables hot HA and manual scaling of runner fleet.', - ), - }, - { - 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.', - ), - moreDetails1: s__('Runners|No spot. Default choice for Windows Shell executor.'), - moreDetails2: s__( - 'Runners|Capacity of 1 enables warm HA through Auto Scaling group re-spawn. Capacity of 2 enables hot HA because the service is available even when a node is lost. Capacity of 3 or more enables hot HA and manual scaling of runner fleet.', - ), - }, - { - 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%' }, - ), - moreDetails1: sprintf(s__('Runners|%{percentage} spot.'), { percentage: '100%' }), - moreDetails2: s__( - 'Runners|Capacity of 1 enables warm HA through Auto Scaling group re-spawn. Capacity of 2 enables hot HA because the service is available even when a node is lost. Capacity of 3 or more enables hot HA and manual scaling of runner fleet.', - ), - }, -]; 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 index eee65d90285..08acde1aefc 100644 --- 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 @@ -1,125 +1,29 @@ <script> -import { - GlModal, - 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 { README_URL, CF_BASE_URL, TEMPLATES_BASE_URL, EASY_BUTTONS } from './constants'; +import { GlModal } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import RunnerAwsInstructions from '~/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue'; export default { components: { GlModal, - GlSprintf, - GlLink, - GlFormRadioGroup, - GlFormRadio, - GlAccordion, - GlAccordionItem, + RunnerAwsInstructions, }, - mixins: [Tracking.mixin()], props: { modalId: { type: String, required: true, }, }, - data() { - return { - selected: this.$options.easyButtons[0], - }; - }, methods: { - borderBottom(idx) { - return idx < this.$options.easyButtons.length - 1; - }, - easyButtonUrl(easyButton) { - const params = { - templateURL: TEMPLATES_BASE_URL + easyButton.templateName, - stackName: easyButton.stackName, - param_3GITLABRunnerInstanceURL: getBaseURL(), - }; - return CF_BASE_URL + objectToQuery(params); - }, - trackCiRunnerTemplatesClick(stackName) { - this.track('template_clicked', { - label: stackName, - }); - }, - handleModalPrimary() { - this.trackCiRunnerTemplatesClick(this.selected.stackName); - visitUrl(this.easyButtonUrl(this.selected), true); + onClose() { + this.$refs.modal.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'), - }, - deployButton: { - text: s__('Runners|Deploy GitLab Runner in AWS'), - attributes: [{ variant: 'confirm' }], - }, - closeButton: { - text: __('Cancel'), - attributes: [{ variant: 'default' }], - }, - readmeUrl: README_URL, - easyButtons: EASY_BUTTONS, + i18n_title: s__('Runners|Deploy GitLab Runner in AWS'), }; </script> <template> - <gl-modal - :modal-id="modalId" - :title="$options.i18n.title" - :action-primary="$options.deployButton" - :action-secondary="$options.closeButton" - size="sm" - @primary="handleModalPrimary" - > - <p>{{ $options.i18n.instructions }}</p> - <gl-form-radio-group v-model="selected" :label="$options.i18n.chooseRunner" label-sr-only> - <gl-form-radio - v-for="(easyButton, idx) in $options.easyButtons" - :key="easyButton.templateName" - :value="easyButton" - 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> + <gl-modal ref="modal" :modal-id="modalId" :title="$options.i18n_title" hide-footer size="sm"> + <runner-aws-instructions @close="onClose" /> </gl-modal> </template> |