diff options
Diffstat (limited to 'app/assets/javascripts/runner/components')
12 files changed, 224 insertions, 102 deletions
diff --git a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue index 33f7a67aba4..0934508c87f 100644 --- a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue +++ b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue @@ -1,6 +1,6 @@ <script> import { GlButton, GlButtonGroup, GlModalDirective, GlTooltipDirective } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __, s__, sprintf } from '~/locale'; import runnerDeleteMutation from '~/runner/graphql/runner_delete.mutation.graphql'; import runnerActionsUpdateMutation from '~/runner/graphql/runner_actions_update.mutation.graphql'; @@ -69,6 +69,12 @@ export default { runnerDeleteModalId() { return `delete-runner-modal-${this.runnerId}`; }, + canUpdate() { + return this.runner.userPermissions?.updateRunner; + }, + canDelete() { + return this.runner.userPermissions?.deleteRunner; + }, }, methods: { async onToggleActive() { @@ -133,7 +139,7 @@ export default { onError(error) { const { message } = error; - createFlash({ message }); + createAlert({ message }); this.reportToSentry(error); }, @@ -156,14 +162,15 @@ export default { See https://gitlab.com/gitlab-org/gitlab/-/issues/334802 --> <gl-button - v-if="runner.adminUrl" + v-if="canUpdate && runner.editAdminUrl" v-gl-tooltip.hover.viewport="$options.I18N_EDIT" - :href="runner.adminUrl" + :href="runner.editAdminUrl" :aria-label="$options.I18N_EDIT" icon="pencil" data-testid="edit-runner" /> <gl-button + v-if="canUpdate" v-gl-tooltip.hover.viewport="toggleActiveTitle" :aria-label="toggleActiveTitle" :icon="toggleActiveIcon" @@ -172,6 +179,7 @@ export default { @click="onToggleActive" /> <gl-button + v-if="canDelete" v-gl-tooltip.hover.viewport="deleteTitle" v-gl-modal="runnerDeleteModalId" :aria-label="deleteTitle" @@ -182,6 +190,7 @@ export default { /> <runner-delete-modal + v-if="canDelete" :ref="runnerDeleteModalId" :modal-id="runnerDeleteModalId" :runner-name="runnerName" diff --git a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue index 473cd7e9794..93f86ae2a2c 100644 --- a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue +++ b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue @@ -28,7 +28,15 @@ export default { <template> <div> - <runner-status-badge :runner="runner" size="sm" /> - <runner-paused-badge v-if="paused" size="sm" /> + <runner-status-badge + :runner="runner" + size="sm" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + /> + <runner-paused-badge + v-if="paused" + size="sm" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + /> </div> </template> diff --git a/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue b/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue index 3bb15bff8d8..0e259807f98 100644 --- a/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue +++ b/app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue @@ -1,6 +1,6 @@ <script> -import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { GlDropdownItem, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui'; +import { createAlert } from '~/flash'; import { TYPE_GROUP, TYPE_PROJECT } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { __, s__ } from '~/locale'; @@ -10,9 +10,17 @@ import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../../constants'; export default { name: 'RunnerRegistrationTokenReset', + i18n: { + modalTitle: __('Reset registration token'), + modalCopy: __('Are you sure you want to reset the registration token?'), + }, components: { GlDropdownItem, GlLoadingIcon, + GlModal, + }, + directives: { + GlModal: GlModalDirective, }, inject: { groupId: { @@ -22,6 +30,7 @@ export default { default: null, }, }, + modalID: 'token-reset-modal', props: { type: { type: String, @@ -59,14 +68,10 @@ export default { }, }, methods: { + handleModalPrimary() { + this.resetToken(); + }, async resetToken() { - // TODO Replace confirmation with gl-modal - // See: https://gitlab.com/gitlab-org/gitlab/-/issues/333810 - // eslint-disable-next-line no-alert - if (!window.confirm(__('Are you sure you want to reset the registration token?'))) { - return; - } - this.loading = true; try { const { @@ -91,7 +96,7 @@ export default { }, onError(error) { const { message } = error; - createFlash({ message }); + createAlert({ message }); this.reportToSentry(error); }, @@ -106,8 +111,15 @@ export default { }; </script> <template> - <gl-dropdown-item @click.capture.native.stop="resetToken"> + <gl-dropdown-item v-gl-modal="$options.modalID"> {{ __('Reset registration token') }} + <gl-modal + :modal-id="$options.modalID" + :title="$options.i18n.modalTitle" + @primary="handleModalPrimary" + > + <p>{{ $options.i18n.modalCopy }}</p> + </gl-modal> <gl-loading-icon v-if="loading" inline /> </gl-dropdown-item> </template> diff --git a/app/assets/javascripts/runner/components/runner_header.vue b/app/assets/javascripts/runner/components/runner_header.vue new file mode 100644 index 00000000000..09f58df7bd0 --- /dev/null +++ b/app/assets/javascripts/runner/components/runner_header.vue @@ -0,0 +1,52 @@ +<script> +import { GlSprintf } from '@gitlab/ui'; +import { sprintf } from '~/locale'; +import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { I18N_DETAILS_TITLE } from '../constants'; +import RunnerTypeBadge from './runner_type_badge.vue'; +import RunnerStatusBadge from './runner_status_badge.vue'; + +export default { + components: { + GlSprintf, + TimeAgo, + RunnerTypeBadge, + RunnerStatusBadge, + }, + props: { + runner: { + type: Object, + required: true, + }, + }, + computed: { + paused() { + return !this.runner.active; + }, + heading() { + const id = getIdFromGraphQLId(this.runner.id); + return sprintf(I18N_DETAILS_TITLE, { runner_id: id }); + }, + }, +}; +</script> +<template> + <div class="gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"> + <runner-status-badge :runner="runner" /> + <runner-type-badge v-if="runner" :type="runner.runnerType" /> + <template v-if="runner.createdAt"> + <gl-sprintf :message="__('%{runner} created %{timeago}')"> + <template #runner> + <strong>{{ heading }}</strong> + </template> + <template #timeago> + <time-ago :time="runner.createdAt" /> + </template> + </gl-sprintf> + </template> + <template v-else> + <strong>{{ heading }}</strong> + </template> + </div> +</template> diff --git a/app/assets/javascripts/runner/components/runner_status_badge.vue b/app/assets/javascripts/runner/components/runner_status_badge.vue index 0823876a187..6d0445ecb7a 100644 --- a/app/assets/javascripts/runner/components/runner_status_badge.vue +++ b/app/assets/javascripts/runner/components/runner_status_badge.vue @@ -4,11 +4,10 @@ import { __, s__, sprintf } from '~/locale'; import { getTimeago } from '~/lib/utils/datetime_utility'; import { I18N_ONLINE_RUNNER_TIMEAGO_DESCRIPTION, - I18N_NOT_CONNECTED_RUNNER_DESCRIPTION, + I18N_NEVER_CONTACTED_RUNNER_DESCRIPTION, I18N_OFFLINE_RUNNER_TIMEAGO_DESCRIPTION, I18N_STALE_RUNNER_DESCRIPTION, STATUS_ONLINE, - STATUS_NOT_CONNECTED, STATUS_NEVER_CONTACTED, STATUS_OFFLINE, STATUS_STALE, @@ -45,12 +44,11 @@ export default { timeAgo: this.contactedAtTimeAgo, }), }; - case STATUS_NOT_CONNECTED: case STATUS_NEVER_CONTACTED: return { variant: 'muted', - label: s__('Runners|not connected'), - tooltip: I18N_NOT_CONNECTED_RUNNER_DESCRIPTION, + label: s__('Runners|never contacted'), + tooltip: I18N_NEVER_CONTACTED_RUNNER_DESCRIPTION, }; case STATUS_OFFLINE: return { diff --git a/app/assets/javascripts/runner/components/runner_type_alert.vue b/app/assets/javascripts/runner/components/runner_type_alert.vue deleted file mode 100644 index 1400875a1d6..00000000000 --- a/app/assets/javascripts/runner/components/runner_type_alert.vue +++ /dev/null @@ -1,54 +0,0 @@ -<script> -import { GlAlert, GlLink } from '@gitlab/ui'; -import { helpPagePath } from '~/helpers/help_page_helper'; -import { s__ } from '~/locale'; -import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants'; - -const ALERT_DATA = { - [INSTANCE_TYPE]: { - message: s__( - 'Runners|This runner is available to all groups and projects in your GitLab instance.', - ), - anchor: 'shared-runners', - }, - [GROUP_TYPE]: { - message: s__('Runners|This runner is available to all projects and subgroups in a group.'), - anchor: 'group-runners', - }, - [PROJECT_TYPE]: { - message: s__('Runners|This runner is associated with one or more projects.'), - anchor: 'specific-runners', - }, -}; - -export default { - components: { - GlAlert, - GlLink, - }, - props: { - type: { - type: String, - required: false, - default: null, - validator(type) { - return Boolean(ALERT_DATA[type]); - }, - }, - }, - computed: { - alert() { - return ALERT_DATA[this.type]; - }, - helpHref() { - return helpPagePath('ci/runners/runners_scope', { anchor: this.alert.anchor }); - }, - }, -}; -</script> -<template> - <gl-alert v-if="alert" variant="info" :dismissible="false"> - {{ alert.message }} - <gl-link :href="helpHref">{{ __('Learn more.') }}</gl-link> - </gl-alert> -</template> diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue index 9a6fc07f6dd..e3deb94236e 100644 --- a/app/assets/javascripts/runner/components/runner_update_form.vue +++ b/app/assets/javascripts/runner/components/runner_update_form.vue @@ -10,8 +10,8 @@ import { import { modelToUpdateMutationVariables, runnerToModel, -} from 'ee_else_ce/runner/runner_details/runner_update_form_utils'; -import createFlash, { FLASH_TYPES } from '~/flash'; +} from 'ee_else_ce/runner/runner_update_form_utils'; +import { createAlert, VARIANT_SUCCESS } from '~/flash'; import { __ } from '~/locale'; import { captureException } from '~/runner/sentry_utils'; import { ACCESS_LEVEL_NOT_PROTECTED, ACCESS_LEVEL_REF_PROTECTED, PROJECT_TYPE } from '../constants'; @@ -75,14 +75,14 @@ export default { if (errors?.length) { // Validation errors need not be thrown - createFlash({ message: errors[0] }); + createAlert({ message: errors[0] }); return; } this.onSuccess(); } catch (error) { const { message } = error; - createFlash({ message }); + createAlert({ message }); this.reportToSentry(error); } finally { @@ -90,7 +90,7 @@ export default { } }, onSuccess() { - createFlash({ message: __('Changes saved.'), type: FLASH_TYPES.SUCCESS }); + createAlert({ message: __('Changes saved.'), variant: VARIANT_SUCCESS }); this.model = runnerToModel(this.runner); }, reportToSentry(error) { diff --git a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js index 4b356fa47ed..79038eb8228 100644 --- a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js +++ b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js @@ -6,7 +6,7 @@ import { STATUS_PAUSED, STATUS_ONLINE, STATUS_OFFLINE, - STATUS_NOT_CONNECTED, + STATUS_NEVER_CONTACTED, STATUS_STALE, PARAM_KEY_STATUS, } from '../../constants'; @@ -16,7 +16,7 @@ const options = [ { value: STATUS_PAUSED, title: s__('Runners|Paused') }, { value: STATUS_ONLINE, title: s__('Runners|Online') }, { value: STATUS_OFFLINE, title: s__('Runners|Offline') }, - { value: STATUS_NOT_CONNECTED, title: s__('Runners|Not connected') }, + { value: STATUS_NEVER_CONTACTED, title: s__('Runners|Never contacted') }, { value: STATUS_STALE, title: s__('Runners|Stale') }, ]; diff --git a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue index 7461308ab91..59230bb809e 100644 --- a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue +++ b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue @@ -1,6 +1,6 @@ <script> import { GlFilteredSearchSuggestion, GlToken } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { s__ } from '~/locale'; @@ -50,7 +50,7 @@ export default { try { this.tags = await this.getTagsOptions(searchTerm); } catch { - createFlash({ + createAlert({ message: s__('Runners|Something went wrong while fetching the tags suggestions'), }); } finally { diff --git a/app/assets/javascripts/runner/components/stat/runner_online_stat.vue b/app/assets/javascripts/runner/components/stat/runner_online_stat.vue deleted file mode 100644 index b92b9badef0..00000000000 --- a/app/assets/javascripts/runner/components/stat/runner_online_stat.vue +++ /dev/null @@ -1,17 +0,0 @@ -<script> -import { GlSingleStat } from '@gitlab/ui/dist/charts'; - -export default { - components: { - GlSingleStat, - }, -}; -</script> -<template> - <gl-single-stat - v-bind="$attrs" - variant="success" - :title="s__('Runners|Online Runners')" - :meta-text="s__('Runners|online')" - /> -</template> diff --git a/app/assets/javascripts/runner/components/stat/runner_stats.vue b/app/assets/javascripts/runner/components/stat/runner_stats.vue new file mode 100644 index 00000000000..d3693ee593e --- /dev/null +++ b/app/assets/javascripts/runner/components/stat/runner_stats.vue @@ -0,0 +1,49 @@ +<script> +import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '../../constants'; +import RunnerStatusStat from './runner_status_stat.vue'; + +export default { + components: { + RunnerStatusStat, + }, + props: { + onlineRunnersCount: { + type: Number, + required: false, + default: null, + }, + offlineRunnersCount: { + type: Number, + required: false, + default: null, + }, + staleRunnersCount: { + type: Number, + required: false, + default: null, + }, + }, + STATUS_ONLINE, + STATUS_OFFLINE, + STATUS_STALE, +}; +</script> +<template> + <div class="gl-display-flex gl-py-6"> + <runner-status-stat + class="gl-px-5" + :status="$options.STATUS_ONLINE" + :value="onlineRunnersCount" + /> + <runner-status-stat + class="gl-px-5" + :status="$options.STATUS_OFFLINE" + :value="offlineRunnersCount" + /> + <runner-status-stat + class="gl-px-5" + :status="$options.STATUS_STALE" + :value="staleRunnersCount" + /> + </div> +</template> diff --git a/app/assets/javascripts/runner/components/stat/runner_status_stat.vue b/app/assets/javascripts/runner/components/stat/runner_status_stat.vue new file mode 100644 index 00000000000..b77bbe15541 --- /dev/null +++ b/app/assets/javascripts/runner/components/stat/runner_status_stat.vue @@ -0,0 +1,65 @@ +<script> +import { GlSingleStat } from '@gitlab/ui/dist/charts'; +import { s__, formatNumber } from '~/locale'; +import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '../../constants'; + +export default { + components: { + GlSingleStat, + }, + props: { + value: { + type: Number, + required: false, + default: null, + }, + status: { + type: String, + required: true, + }, + }, + computed: { + formattedValue() { + if (typeof this.value === 'number') { + return formatNumber(this.value); + } + return '-'; + }, + stat() { + switch (this.status) { + case STATUS_ONLINE: + return { + variant: 'success', + title: s__('Runners|Online runners'), + metaText: s__('Runners|online'), + }; + case STATUS_OFFLINE: + return { + variant: 'muted', + title: s__('Runners|Offline runners'), + metaText: s__('Runners|offline'), + }; + case STATUS_STALE: + return { + variant: 'warning', + title: s__('Runners|Stale runners'), + metaText: s__('Runners|stale'), + }; + default: + return { + title: s__('Runners|Runners'), + }; + } + }, + }, +}; +</script> +<template> + <gl-single-stat + v-if="stat" + :value="formattedValue" + :variant="stat.variant" + :title="stat.title" + :meta-text="stat.metaText" + /> +</template> |