diff options
Diffstat (limited to 'app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue')
-rw-r--r-- | app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue new file mode 100644 index 00000000000..273226141d2 --- /dev/null +++ b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue @@ -0,0 +1,108 @@ +<script> +import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg?url'; +import DOCKER_LOGO_URL from '@gitlab/svgs/dist/illustrations/third-party-logos/ci_cd-template-logos/docker.png'; +import KUBERNETES_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/kubernetes.svg?url'; +import { GlFormRadioGroup, GlIcon, GlLink } from '@gitlab/ui'; + +import { + LINUX_PLATFORM, + MACOS_PLATFORM, + WINDOWS_PLATFORM, + AWS_PLATFORM, + DOCKER_HELP_URL, + KUBERNETES_HELP_URL, +} from '../constants'; + +import RunnerPlatformsRadio from './runner_platforms_radio.vue'; + +export default { + components: { + GlFormRadioGroup, + GlLink, + GlIcon, + RunnerPlatformsRadio, + }, + props: { + value: { + type: String, + required: false, + default: null, + }, + }, + data() { + return { + model: this.value, + }; + }, + watch: { + model() { + this.$emit('input', this.model); + }, + }, + LINUX_PLATFORM, + MACOS_PLATFORM, + WINDOWS_PLATFORM, + + AWS_PLATFORM, + AWS_LOGO_URL, + DOCKER_HELP_URL, + DOCKER_LOGO_URL, + KUBERNETES_HELP_URL, + KUBERNETES_LOGO_URL, +}; +</script> + +<template> + <gl-form-radio-group v-model="model"> + <div class="gl-mt-3 gl-mb-6"> + <label>{{ s__('Runners|Operating systems') }}</label> + + <div class="gl-display-flex gl-flex-wrap gl-gap-5"> + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + <runner-platforms-radio v-model="model" :value="$options.LINUX_PLATFORM"> + Linux + </runner-platforms-radio> + <runner-platforms-radio v-model="model" :value="$options.MACOS_PLATFORM"> + macOS + </runner-platforms-radio> + <runner-platforms-radio v-model="model" :value="$options.WINDOWS_PLATFORM"> + Windows + </runner-platforms-radio> + </div> + </div> + + <div class="gl-mt-3 gl-mb-6"> + <label>{{ s__('Runners|Cloud templates') }}</label> + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + <div class="gl-display-flex gl-flex-wrap gl-gap-5"> + <runner-platforms-radio + v-model="model" + :image="$options.AWS_LOGO_URL" + :value="$options.AWS_PLATFORM" + > + AWS + </runner-platforms-radio> + </div> + </div> + + <div class="gl-mt-3 gl-mb-6"> + <label>{{ s__('Runners|Containers') }}</label> + + <div class="gl-display-flex gl-flex-wrap gl-gap-5"> + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + <runner-platforms-radio :image="$options.DOCKER_LOGO_URL"> + <gl-link :href="$options.DOCKER_HELP_URL" target="_blank"> + Docker + <gl-icon name="external-link" /> + </gl-link> + </runner-platforms-radio> + <runner-platforms-radio :image="$options.KUBERNETES_LOGO_URL"> + <gl-link :href="$options.KUBERNETES_HELP_URL" target="_blank"> + Kubernetes + <gl-icon name="external-link" /> + </gl-link> + </runner-platforms-radio> + </div> + </div> + </gl-form-radio-group> +</template> |