diff options
Diffstat (limited to 'app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue')
-rw-r--r-- | app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue b/app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue new file mode 100644 index 00000000000..a56302898ca --- /dev/null +++ b/app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue @@ -0,0 +1,131 @@ +<script> +import { GlDrawer, GlFormGroup, GlFormSelect, GlLink, GlSprintf } from '@gitlab/ui'; +import { getContentWrapperHeight } from '~/lib/utils/dom_utils'; +import { DRAWER_Z_INDEX } from '~/lib/utils/constants'; + +import { + DEFAULT_PLATFORM, + MACOS_PLATFORM, + LINUX_PLATFORM, + WINDOWS_PLATFORM, + INSTALL_HELP_URL, +} from '../../constants'; +import { installScript, platformArchitectures } from './utils'; + +import CliCommand from './cli_command.vue'; + +export default { + components: { + GlDrawer, + GlFormGroup, + GlFormSelect, + GlLink, + GlSprintf, + CliCommand, + }, + props: { + open: { + type: Boolean, + required: true, + }, + platform: { + type: String, + required: false, + default: DEFAULT_PLATFORM, + }, + }, + data() { + return { + selectedPlatform: this.platform, + selectedArchitecture: null, + }; + }, + computed: { + drawerHeightOffset() { + return getContentWrapperHeight('.content-wrapper'); + }, + architectureOptions() { + return platformArchitectures({ platform: this.selectedPlatform }); + }, + script() { + return installScript({ + platform: this.selectedPlatform, + architecture: this.selectedArchitecture, + }); + }, + }, + watch: { + selectedPlatform() { + this.selectedArchitecture = + this.architectureOptions.find((value) => value === this.selectedArchitecture) || + this.architectureOptions[0]; + + this.$emit('selectPlatform', this.selectedPlatform); + }, + }, + created() { + [this.selectedArchitecture] = this.architectureOptions; + }, + methods: { + onClose() { + this.$emit('close'); + }, + }, + platformOptions: [ + /* eslint-disable @gitlab/require-i18n-strings */ + { value: LINUX_PLATFORM, text: 'Linux' }, + { value: MACOS_PLATFORM, text: 'macOS' }, + { value: WINDOWS_PLATFORM, text: 'Windows' }, + /* eslint-enable @gitlab/require-i18n-strings */ + ], + INSTALL_HELP_URL, + DRAWER_Z_INDEX, +}; +</script> +<template> + <gl-drawer + :open="open" + :header-height="drawerHeightOffset" + :z-index="$options.DRAWER_Z_INDEX" + @close="onClose" + > + <template #title> + <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24"> + {{ s__('Runners|Install GitLab Runner') }} + </h2> + </template> + <div> + <p>{{ s__('Runners|Select platform specifications to install GitLab Runner.') }}</p> + + <gl-form-group :label="s__('Runners|Environment')" label-for="runner-environment-select"> + <gl-form-select + id="runner-environment-select" + v-model="selectedPlatform" + :options="$options.platformOptions" + /> + </gl-form-group> + + <gl-form-group :label="s__('Runners|Architecture')" label-for="runner-architecture-select"> + <gl-form-select + id="runner-architecture-select" + v-model="selectedArchitecture" + :options="architectureOptions" + /> + </gl-form-group> + + <cli-command :command="script" /> + + <p> + <gl-sprintf + :message=" + s__('Runners|See more %{linkStart}installation methods and architectures%{linkEnd}.') + " + > + <template #link="{ content }"> + <gl-link :href="$options.INSTALL_HELP_URL">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </div> + </gl-drawer> +</template> |