2021-04-07 18:09:45 +00:00
|
|
|
<script>
|
|
|
|
import {
|
|
|
|
GlAlert,
|
|
|
|
GlButton,
|
|
|
|
GlModal,
|
|
|
|
GlButtonGroup,
|
|
|
|
GlDropdown,
|
|
|
|
GlDropdownItem,
|
|
|
|
GlIcon,
|
|
|
|
GlLoadingIcon,
|
|
|
|
GlSkeletonLoader,
|
2021-04-30 15:09:50 +00:00
|
|
|
GlResizeObserverDirective,
|
2021-04-07 18:09:45 +00:00
|
|
|
} from '@gitlab/ui';
|
2021-04-30 15:09:50 +00:00
|
|
|
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
|
2021-04-07 18:09:45 +00:00
|
|
|
import { isEmpty } from 'lodash';
|
|
|
|
import { __, s__ } from '~/locale';
|
|
|
|
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
|
|
|
|
import {
|
|
|
|
INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES,
|
2021-10-25 18:12:16 +00:00
|
|
|
PLATFORMS_WITHOUT_ARCHITECTURES,
|
|
|
|
REGISTRATION_TOKEN_PLACEHOLDER,
|
2021-04-07 18:09:45 +00:00
|
|
|
} from './constants';
|
|
|
|
import getRunnerPlatformsQuery from './graphql/queries/get_runner_platforms.query.graphql';
|
|
|
|
import getRunnerSetupInstructionsQuery from './graphql/queries/get_runner_setup.query.graphql';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
GlAlert,
|
|
|
|
GlButton,
|
|
|
|
GlButtonGroup,
|
|
|
|
GlDropdown,
|
|
|
|
GlDropdownItem,
|
|
|
|
GlModal,
|
|
|
|
GlIcon,
|
|
|
|
GlLoadingIcon,
|
|
|
|
GlSkeletonLoader,
|
|
|
|
ModalCopyButton,
|
|
|
|
},
|
2021-04-30 15:09:50 +00:00
|
|
|
directives: {
|
|
|
|
GlResizeObserver: GlResizeObserverDirective,
|
|
|
|
},
|
2021-04-07 18:09:45 +00:00
|
|
|
props: {
|
|
|
|
modalId: {
|
|
|
|
type: String,
|
2021-10-22 18:13:20 +00:00
|
|
|
required: false,
|
|
|
|
default: 'runner-instructions-modal',
|
2021-04-07 18:09:45 +00:00
|
|
|
},
|
2021-10-25 18:12:16 +00:00
|
|
|
registrationToken: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2022-05-02 09:10:46 +00:00
|
|
|
defaultPlatformName: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2021-04-07 18:09:45 +00:00
|
|
|
},
|
|
|
|
apollo: {
|
|
|
|
platforms: {
|
|
|
|
query: getRunnerPlatformsQuery,
|
|
|
|
update(data) {
|
|
|
|
return data?.runnerPlatforms?.nodes.map(({ name, humanReadableName, architectures }) => {
|
|
|
|
return {
|
|
|
|
name,
|
|
|
|
humanReadableName,
|
|
|
|
architectures: architectures?.nodes || [],
|
|
|
|
};
|
|
|
|
});
|
|
|
|
},
|
|
|
|
result() {
|
2022-05-02 09:10:46 +00:00
|
|
|
if (this.platforms.length) {
|
|
|
|
// If it is set and available, select the defaultSelectedPlatform.
|
|
|
|
// Otherwise, select the first available platform
|
|
|
|
this.selectPlatform(this.defaultPlatform() || this.platforms[0]);
|
2021-04-07 18:09:45 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
error() {
|
|
|
|
this.toggleAlert(true);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
instructions: {
|
|
|
|
query: getRunnerSetupInstructionsQuery,
|
|
|
|
skip() {
|
|
|
|
return !this.selectedPlatform;
|
|
|
|
},
|
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
platform: this.selectedPlatformName,
|
|
|
|
architecture: this.selectedArchitectureName || '',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
update(data) {
|
|
|
|
return data?.runnerSetup;
|
|
|
|
},
|
|
|
|
error() {
|
|
|
|
this.toggleAlert(true);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
platforms: [],
|
|
|
|
selectedPlatform: null,
|
|
|
|
selectedArchitecture: null,
|
|
|
|
showAlert: false,
|
|
|
|
instructions: {},
|
2021-04-30 15:09:50 +00:00
|
|
|
platformsButtonGroupVertical: false,
|
2021-04-07 18:09:45 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
platformsEmpty() {
|
|
|
|
return isEmpty(this.platforms);
|
|
|
|
},
|
|
|
|
instructionsEmpty() {
|
|
|
|
return isEmpty(this.instructions);
|
|
|
|
},
|
|
|
|
selectedPlatformName() {
|
|
|
|
return this.selectedPlatform?.name;
|
|
|
|
},
|
|
|
|
selectedArchitectureName() {
|
|
|
|
return this.selectedArchitecture?.name;
|
|
|
|
},
|
|
|
|
hasArchitecureList() {
|
|
|
|
return !PLATFORMS_WITHOUT_ARCHITECTURES.includes(this.selectedPlatformName);
|
|
|
|
},
|
|
|
|
instructionsWithoutArchitecture() {
|
|
|
|
return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatformName]?.instructions;
|
|
|
|
},
|
|
|
|
runnerInstallationLink() {
|
|
|
|
return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatformName]?.link;
|
|
|
|
},
|
2021-10-25 18:12:16 +00:00
|
|
|
registerInstructionsWithToken() {
|
|
|
|
const { registerInstructions } = this.instructions || {};
|
|
|
|
|
|
|
|
if (this.registrationToken) {
|
2022-05-31 12:09:12 +00:00
|
|
|
return registerInstructions?.replace(
|
|
|
|
REGISTRATION_TOKEN_PLACEHOLDER,
|
|
|
|
this.registrationToken,
|
|
|
|
);
|
2021-10-25 18:12:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return registerInstructions;
|
|
|
|
},
|
2021-04-07 18:09:45 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-10-22 18:13:20 +00:00
|
|
|
show() {
|
|
|
|
this.$refs.modal.show();
|
|
|
|
},
|
2022-05-02 09:10:46 +00:00
|
|
|
focusSelected() {
|
|
|
|
// By default the first platform always gets the focus, but when the `defaultPlatformName`
|
|
|
|
// property is present, any other platform might actually be selected.
|
|
|
|
this.$refs[this.selectedPlatformName]?.[0].$el.focus();
|
|
|
|
},
|
|
|
|
defaultPlatform() {
|
|
|
|
return this.platforms.find((platform) => platform.name === this.defaultPlatformName);
|
|
|
|
},
|
2021-04-07 18:09:45 +00:00
|
|
|
selectPlatform(platform) {
|
|
|
|
this.selectedPlatform = platform;
|
|
|
|
|
2022-05-31 12:09:12 +00:00
|
|
|
// Update architecture when platform changes
|
|
|
|
const architectures = platform.architectures || [];
|
|
|
|
const arch = architectures.find(({ name }) => name === this.selectedArchitectureName);
|
|
|
|
if (arch) {
|
|
|
|
this.selectArchitecture(arch);
|
|
|
|
} else {
|
|
|
|
this.selectArchitecture(architectures[0]);
|
2021-04-07 18:09:45 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
selectArchitecture(architecture) {
|
|
|
|
this.selectedArchitecture = architecture;
|
|
|
|
},
|
|
|
|
toggleAlert(state) {
|
|
|
|
this.showAlert = state;
|
|
|
|
},
|
2021-04-30 15:09:50 +00:00
|
|
|
onPlatformsButtonResize() {
|
|
|
|
if (bp.getBreakpointSize() === 'xs') {
|
|
|
|
this.platformsButtonGroupVertical = true;
|
|
|
|
} else {
|
|
|
|
this.platformsButtonGroupVertical = false;
|
|
|
|
}
|
|
|
|
},
|
2021-04-07 18:09:45 +00:00
|
|
|
},
|
|
|
|
i18n: {
|
|
|
|
installARunner: s__('Runners|Install a runner'),
|
|
|
|
architecture: s__('Runners|Architecture'),
|
|
|
|
downloadInstallBinary: s__('Runners|Download and install binary'),
|
|
|
|
downloadLatestBinary: s__('Runners|Download latest binary'),
|
|
|
|
registerRunnerCommand: s__('Runners|Command to register runner'),
|
|
|
|
fetchError: s__('Runners|An error has occurred fetching instructions'),
|
|
|
|
copyInstructions: s__('Runners|Copy instructions'),
|
|
|
|
},
|
|
|
|
closeButton: {
|
|
|
|
text: __('Close'),
|
|
|
|
attributes: [{ variant: 'default' }],
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<gl-modal
|
2021-10-22 18:13:20 +00:00
|
|
|
ref="modal"
|
2021-04-07 18:09:45 +00:00
|
|
|
:modal-id="modalId"
|
|
|
|
:title="$options.i18n.installARunner"
|
|
|
|
:action-secondary="$options.closeButton"
|
2021-10-22 18:13:20 +00:00
|
|
|
v-bind="$attrs"
|
2022-05-02 09:10:46 +00:00
|
|
|
v-on="$listeners"
|
|
|
|
@shown="focusSelected"
|
2021-04-07 18:09:45 +00:00
|
|
|
>
|
|
|
|
<gl-alert v-if="showAlert" variant="danger" @dismiss="toggleAlert(false)">
|
|
|
|
{{ $options.i18n.fetchError }}
|
|
|
|
</gl-alert>
|
|
|
|
|
|
|
|
<gl-skeleton-loader v-if="platformsEmpty && $apollo.loading" />
|
|
|
|
|
|
|
|
<template v-if="!platformsEmpty">
|
|
|
|
<h5>
|
|
|
|
{{ __('Environment') }}
|
|
|
|
</h5>
|
2021-04-30 15:09:50 +00:00
|
|
|
<div v-gl-resize-observer="onPlatformsButtonResize">
|
|
|
|
<gl-button-group
|
|
|
|
:vertical="platformsButtonGroupVertical"
|
|
|
|
:class="{ 'gl-w-full': platformsButtonGroupVertical }"
|
|
|
|
class="gl-mb-3"
|
|
|
|
data-testid="platform-buttons"
|
2021-04-07 18:09:45 +00:00
|
|
|
>
|
2021-04-30 15:09:50 +00:00
|
|
|
<gl-button
|
|
|
|
v-for="platform in platforms"
|
|
|
|
:key="platform.name"
|
2022-05-02 09:10:46 +00:00
|
|
|
:ref="platform.name"
|
2022-05-31 12:09:12 +00:00
|
|
|
:selected="selectedPlatformName === platform.name"
|
2021-04-30 15:09:50 +00:00
|
|
|
@click="selectPlatform(platform)"
|
|
|
|
>
|
|
|
|
{{ platform.humanReadableName }}
|
|
|
|
</gl-button>
|
|
|
|
</gl-button-group>
|
|
|
|
</div>
|
2021-04-07 18:09:45 +00:00
|
|
|
</template>
|
|
|
|
<template v-if="hasArchitecureList">
|
|
|
|
<template v-if="selectedPlatform">
|
|
|
|
<h5>
|
|
|
|
{{ $options.i18n.architecture }}
|
2021-07-07 09:08:35 +00:00
|
|
|
<gl-loading-icon v-if="$apollo.loading" size="sm" inline />
|
2021-04-07 18:09:45 +00:00
|
|
|
</h5>
|
|
|
|
|
|
|
|
<gl-dropdown class="gl-mb-3" :text="selectedArchitectureName">
|
|
|
|
<gl-dropdown-item
|
|
|
|
v-for="architecture in selectedPlatform.architectures"
|
|
|
|
:key="architecture.name"
|
|
|
|
:is-check-item="true"
|
|
|
|
:is-checked="selectedArchitectureName === architecture.name"
|
|
|
|
data-testid="architecture-dropdown-item"
|
|
|
|
@click="selectArchitecture(architecture)"
|
|
|
|
>
|
|
|
|
{{ architecture.name }}
|
|
|
|
</gl-dropdown-item>
|
|
|
|
</gl-dropdown>
|
2021-04-30 15:09:50 +00:00
|
|
|
<div class="gl-sm-display-flex gl-align-items-center gl-mb-3">
|
2021-04-07 18:09:45 +00:00
|
|
|
<h5>{{ $options.i18n.downloadInstallBinary }}</h5>
|
|
|
|
<gl-button
|
|
|
|
class="gl-ml-auto"
|
|
|
|
:href="selectedArchitecture.downloadLocation"
|
|
|
|
download
|
|
|
|
icon="download"
|
|
|
|
data-testid="binary-download-button"
|
|
|
|
>
|
|
|
|
{{ $options.i18n.downloadLatestBinary }}
|
|
|
|
</gl-button>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-if="!instructionsEmpty">
|
|
|
|
<div class="gl-display-flex">
|
|
|
|
<pre
|
2021-06-15 12:10:11 +00:00
|
|
|
class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
|
2021-04-07 18:09:45 +00:00
|
|
|
data-testid="binary-instructions"
|
|
|
|
>{{ instructions.installInstructions }}</pre
|
|
|
|
>
|
|
|
|
<modal-copy-button
|
|
|
|
:title="$options.i18n.copyInstructions"
|
|
|
|
:text="instructions.installInstructions"
|
|
|
|
:modal-id="$options.modalId"
|
|
|
|
css-classes="gl-align-self-start gl-ml-2 gl-mt-2"
|
|
|
|
category="tertiary"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<h5 class="gl-mb-3">{{ $options.i18n.registerRunnerCommand }}</h5>
|
|
|
|
<div class="gl-display-flex">
|
|
|
|
<pre
|
2021-06-15 12:10:11 +00:00
|
|
|
class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
|
2021-04-07 18:09:45 +00:00
|
|
|
data-testid="register-command"
|
2021-10-25 18:12:16 +00:00
|
|
|
>{{ registerInstructionsWithToken }}</pre
|
2021-04-07 18:09:45 +00:00
|
|
|
>
|
|
|
|
<modal-copy-button
|
|
|
|
:title="$options.i18n.copyInstructions"
|
2021-10-25 18:12:16 +00:00
|
|
|
:text="registerInstructionsWithToken"
|
2021-04-07 18:09:45 +00:00
|
|
|
:modal-id="$options.modalId"
|
|
|
|
css-classes="gl-align-self-start gl-ml-2 gl-mt-2"
|
|
|
|
category="tertiary"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<div>
|
|
|
|
<p>{{ instructionsWithoutArchitecture }}</p>
|
|
|
|
<gl-button :href="runnerInstallationLink">
|
|
|
|
<gl-icon name="external-link" />
|
|
|
|
{{ s__('Runners|View installation instructions') }}
|
|
|
|
</gl-button>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</gl-modal>
|
|
|
|
</template>
|