Add latest changes from gitlab-org/gitlab@master

2 files changed, 188 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js
index ac83cb78bc0..3dbc5246c3d 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js
@@ -1,4 +1,69 @@
+import { s__, sprintf } from '~/locale';
+
 export const REGISTRATION_TOKEN_PLACEHOLDER = '$REGISTRATION_TOKEN';
 
 export const PLATFORM_DOCKER = 'docker';
 export const PLATFORM_KUBERNETES = 'kubernetes';
+
+export const AWS_README_URL =
+  'https://gitlab.com/guided-explorations/aws/gitlab-runner-autoscaling-aws-asg/-/blob/main/easybuttons.md';
+
+export const AWS_CF_BASE_URL =
+  'https://us-west-2.console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/create/review?';
+
+export const AWS_TEMPLATES_BASE_URL =
+  'https://gl-public-templates.s3.amazonaws.com/cfn/experimental/';
+
+export const AWS_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_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>