1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<script>
import { GlToggle, GlLoadingIcon, GlTooltip, GlAlert } from '@gitlab/ui';
import { debounce } from 'lodash';
import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale';
import { DEBOUNCE_TOGGLE_DELAY, ERROR_MESSAGE } from '../constants';
export default {
components: {
GlToggle,
GlLoadingIcon,
GlTooltip,
GlAlert,
},
inject: [
'updatePath',
'sharedRunnersAvailability',
'parentSharedRunnersAvailability',
'runnerEnabled',
'runnerDisabled',
'runnerAllowOverride',
],
data() {
return {
isLoading: false,
enabled: true,
allowOverride: false,
error: null,
};
},
computed: {
toggleDisabled() {
return this.parentSharedRunnersAvailability === this.runnerDisabled || this.isLoading;
},
enabledOrDisabledSetting() {
return this.enabled ? this.runnerEnabled : this.runnerDisabled;
},
disabledWithOverrideSetting() {
return this.allowOverride ? this.runnerAllowOverride : this.runnerDisabled;
},
},
created() {
if (this.sharedRunnersAvailability !== this.runnerEnabled) {
this.enabled = false;
}
if (this.sharedRunnersAvailability === this.runnerAllowOverride) {
this.allowOverride = true;
}
},
methods: {
generatePayload(data) {
return { shared_runners_setting: data };
},
enableOrDisable() {
this.updateRunnerSettings(this.generatePayload(this.enabledOrDisabledSetting));
// reset override toggle to false if shared runners are enabled
this.allowOverride = false;
},
override() {
this.updateRunnerSettings(this.generatePayload(this.disabledWithOverrideSetting));
},
updateRunnerSettings: debounce(function debouncedUpdateRunnerSettings(setting) {
this.isLoading = true;
axios
.put(this.updatePath, setting)
.then(() => {
this.isLoading = false;
})
.catch((error) => {
const message = [
error.response?.data?.error || __('An error occurred while updating configuration.'),
ERROR_MESSAGE,
].join(' ');
this.error = message;
});
}, DEBOUNCE_TOGGLE_DELAY),
},
};
</script>
<template>
<div ref="sharedRunnersForm">
<gl-alert v-if="error" variant="danger" :dismissible="false">{{ error }}</gl-alert>
<h4 class="gl-display-flex gl-align-items-center">
{{ __('Set up shared runner availability') }}
<gl-loading-icon v-if="isLoading" class="gl-ml-3" size="sm" inline />
</h4>
<section class="gl-mt-5">
<gl-toggle
v-model="enabled"
:disabled="toggleDisabled"
:label="__('Enable shared runners for this group')"
data-testid="enable-runners-toggle"
@change="enableOrDisable"
/>
<span class="gl-text-gray-600">
{{ __('Enable shared runners for all projects and subgroups in this group.') }}
</span>
</section>
<section v-if="!enabled" class="gl-mt-5">
<gl-toggle
v-model="allowOverride"
:disabled="toggleDisabled"
:label="__('Allow projects and subgroups to override the group setting')"
data-testid="override-runners-toggle"
@change="override"
/>
<span class="gl-text-gray-600">
{{ __('Allows projects or subgroups in this group to override the global setting.') }}
</span>
</section>
<gl-tooltip v-if="toggleDisabled" :target="() => $refs.sharedRunnersForm">
{{ __('Shared runners are disabled for the parent group') }}
</gl-tooltip>
</div>
</template>
|
