diff options
Diffstat (limited to 'app/assets/javascripts/ci/runner/components')
13 files changed, 117 insertions, 42 deletions
diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue index 67b9b0a266f..cfbe37f5ba2 100644 --- a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue +++ b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue @@ -7,8 +7,6 @@ import RunnerPausedBadge from '../runner_paused_badge.vue'; export default { components: { RunnerStatusBadge, - RunnerUpgradeStatusBadge: () => - import('ee_component/ci/runner/components/runner_upgrade_status_badge.vue'), RunnerPausedBadge, }, directives: { @@ -34,10 +32,6 @@ export default { :runner="runner" class="gl-display-inline-block gl-max-w-full gl-text-truncate" /> - <runner-upgrade-status-badge - :runner="runner" - class="gl-display-inline-block gl-max-w-full gl-text-truncate" - /> <runner-paused-badge v-if="paused" class="gl-display-inline-block gl-max-w-full gl-text-truncate" diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_stacked_summary_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue index 1e44d5fccc2..4a72023b6a0 100644 --- a/app/assets/javascripts/ci/runner/components/cells/runner_stacked_summary_cell.vue +++ b/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue @@ -6,9 +6,11 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import RunnerName from '../runner_name.vue'; import RunnerTags from '../runner_tags.vue'; import RunnerTypeBadge from '../runner_type_badge.vue'; +import RunnerJobStatusBadge from '../runner_job_status_badge.vue'; import { formatJobCount } from '../../utils'; import { + I18N_NO_DESCRIPTION, I18N_LOCKED_RUNNER_DESCRIPTION, I18N_VERSION_LABEL, I18N_LAST_CONTACT_LABEL, @@ -25,6 +27,7 @@ export default { RunnerName, RunnerTags, RunnerTypeBadge, + RunnerJobStatusBadge, RunnerUpgradeStatusIcon: () => import('ee_component/ci/runner/components/runner_upgrade_status_icon.vue'), TooltipOnTruncate, @@ -44,6 +47,7 @@ export default { }, }, i18n: { + I18N_NO_DESCRIPTION, I18N_LOCKED_RUNNER_DESCRIPTION, I18N_VERSION_LABEL, I18N_LAST_CONTACT_LABEL, @@ -75,12 +79,21 @@ export default { </gl-sprintf> </div> <div class="gl-text-secondary gl-mx-2" aria-hidden="true">ยท</div> - <tooltip-on-truncate class="gl-text-truncate gl-display-block" :title="runner.description"> + <tooltip-on-truncate + v-if="runner.description" + class="gl-text-truncate gl-display-block" + :title="runner.description" + > {{ runner.description }} </tooltip-on-truncate> + <span v-else class="gl-text-secondary">{{ $options.i18n.I18N_NO_DESCRIPTION }}</span> </div> <div> + <slot :runner="runner" name="runner-job-status-badge"> + <runner-job-status-badge :job-status="runner.jobExecutionStatus" /> + </slot> + <runner-summary-field icon="clock"> <gl-sprintf :message="$options.i18n.I18N_LAST_CONTACT_LABEL"> <template #timeAgo> diff --git a/app/assets/javascripts/ci/runner/components/runner_detail.vue b/app/assets/javascripts/ci/runner/components/runner_detail.vue index c260670b517..9e8055a8432 100644 --- a/app/assets/javascripts/ci/runner/components/runner_detail.vue +++ b/app/assets/javascripts/ci/runner/components/runner_detail.vue @@ -49,7 +49,7 @@ export default { <template v-if="value || $scopedSlots.value"> <slot name="value">{{ value }}</slot> </template> - <span v-else class="gl-text-gray-500">{{ emptyValue }}</span> + <span v-else class="gl-text-secondary">{{ emptyValue }}</span> </dd> </div> </template> diff --git a/app/assets/javascripts/ci/runner/components/runner_groups.vue b/app/assets/javascripts/ci/runner/components/runner_groups.vue index c3b35bd52a9..8501d165157 100644 --- a/app/assets/javascripts/ci/runner/components/runner_groups.vue +++ b/app/assets/javascripts/ci/runner/components/runner_groups.vue @@ -32,6 +32,6 @@ export default { :avatar-url="group.avatarUrl" /> </template> - <span v-else class="gl-text-gray-500">{{ __('None') }}</span> + <span v-else class="gl-text-secondary">{{ __('None') }}</span> </div> </template> diff --git a/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue new file mode 100644 index 00000000000..1e52acecfb8 --- /dev/null +++ b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue @@ -0,0 +1,55 @@ +<script> +import { GlBadge, GlTooltipDirective } from '@gitlab/ui'; +import { + I18N_JOB_STATUS_RUNNING, + I18N_JOB_STATUS_IDLE, + JOB_STATUS_RUNNING, + JOB_STATUS_IDLE, +} from '../constants'; + +export default { + components: { + GlBadge, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + jobStatus: { + required: false, + default: null, + type: String, + }, + }, + computed: { + badge() { + switch (this.jobStatus) { + case JOB_STATUS_RUNNING: + return { + classes: 'gl-text-blue-600! gl-border gl-border-blue-600!', + label: I18N_JOB_STATUS_RUNNING, + }; + case JOB_STATUS_IDLE: + return { + classes: 'gl-text-gray-700! gl-border gl-border-gray-500!', + label: I18N_JOB_STATUS_IDLE, + }; + default: + return null; + } + }, + }, +}; +</script> +<template> + <gl-badge + v-if="badge" + v-bind="$attrs" + size="sm" + class="gl-mr-3 gl-bg-transparent!" + variant="muted" + :class="badge.classes" + > + {{ badge.label }} + </gl-badge> +</template> diff --git a/app/assets/javascripts/ci/runner/components/runner_list.vue b/app/assets/javascripts/ci/runner/components/runner_list.vue index e895537dcdc..b2aad0aac4f 100644 --- a/app/assets/javascripts/ci/runner/components/runner_list.vue +++ b/app/assets/javascripts/ci/runner/components/runner_list.vue @@ -7,7 +7,7 @@ import checkedRunnerIdsQuery from '../graphql/list/checked_runner_ids.query.grap import { formatJobCount, tableField } from '../utils'; import RunnerBulkDelete from './runner_bulk_delete.vue'; import RunnerBulkDeleteCheckbox from './runner_bulk_delete_checkbox.vue'; -import RunnerStackedSummaryCell from './cells/runner_stacked_summary_cell.vue'; +import RunnerSummaryCell from './cells/runner_summary_cell.vue'; import RunnerStatusPopover from './runner_status_popover.vue'; import RunnerStatusCell from './cells/runner_status_cell.vue'; import RunnerOwnerCell from './cells/runner_owner_cell.vue'; @@ -28,7 +28,7 @@ export default { RunnerBulkDelete, RunnerBulkDeleteCheckbox, RunnerStatusPopover, - RunnerStackedSummaryCell, + RunnerSummaryCell, RunnerStatusCell, RunnerOwnerCell, }, @@ -154,11 +154,14 @@ export default { </template> <template #cell(summary)="{ item, index }"> - <runner-stacked-summary-cell :runner="item"> + <runner-summary-cell :runner="item"> <template #runner-name="{ runner }"> <slot name="runner-name" :runner="runner" :index="index"></slot> </template> - </runner-stacked-summary-cell> + <template #runner-job-status-badge="{ runner }"> + <slot name="runner-job-status-badge" :runner="runner" :index="index"></slot> + </template> + </runner-summary-cell> </template> <template #head(owner)="{ label }"> diff --git a/app/assets/javascripts/ci/runner/components/runner_projects.vue b/app/assets/javascripts/ci/runner/components/runner_projects.vue index 84008e8eee8..4a6e90b44a9 100644 --- a/app/assets/javascripts/ci/runner/components/runner_projects.vue +++ b/app/assets/javascripts/ci/runner/components/runner_projects.vue @@ -133,7 +133,7 @@ export default { :is-owner="isOwner(project.id)" /> </template> - <div v-else class="gl-py-5 gl-text-gray-500">{{ $options.I18N_NO_PROJECTS_FOUND }}</div> + <div v-else class="gl-py-5 gl-text-secondary">{{ $options.I18N_NO_PROJECTS_FOUND }}</div> <runner-pagination :disabled="loading" diff --git a/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue b/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue index 584236168ac..70226074993 100644 --- a/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue +++ b/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue @@ -59,21 +59,20 @@ export default { return [ { title: I18N_ALL_TYPES, - runnerType: null, }, ...tabs, ]; }, }, methods: { - onTabSelected({ runnerType }) { + onTabSelected(runnerType) { this.$emit('input', { ...this.value, runnerType, pagination: { page: 1 }, }); }, - isTabActive({ runnerType }) { + isTabActive(runnerType = null) { return runnerType === this.value.runnerType; }, tabBadgeCountVariables(runnerType) { @@ -102,8 +101,8 @@ export default { <gl-tab v-for="tab in tabs" :key="`${tab.runnerType}`" - :active="isTabActive(tab)" - @click="onTabSelected(tab)" + :active="isTabActive(tab.runnerType)" + @click="onTabSelected(tab.runnerType)" > <template #title> {{ tab.title }} diff --git a/app/assets/javascripts/ci/runner/components/search_tokens/paused_token_config.js b/app/assets/javascripts/ci/runner/components/search_tokens/paused_token_config.js index 97ee8ec3eef..71a145dd4a3 100644 --- a/app/assets/javascripts/ci/runner/components/search_tokens/paused_token_config.js +++ b/app/assets/javascripts/ci/runner/components/search_tokens/paused_token_config.js @@ -1,5 +1,5 @@ import { __ } from '~/locale'; -import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants'; +import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants'; import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue'; import { PARAM_KEY_PAUSED, I18N_PAUSED } from '../../constants'; @@ -24,5 +24,5 @@ export const pausedTokenConfig = { // see: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1438 title: title.replace(/\s/g, '\u00a0'), })), - operators: OPERATOR_IS_ONLY, + operators: OPERATORS_IS, }; diff --git a/app/assets/javascripts/ci/runner/components/search_tokens/status_token_config.js b/app/assets/javascripts/ci/runner/components/search_tokens/status_token_config.js index 117a630719e..4bc32909777 100644 --- a/app/assets/javascripts/ci/runner/components/search_tokens/status_token_config.js +++ b/app/assets/javascripts/ci/runner/components/search_tokens/status_token_config.js @@ -1,5 +1,5 @@ import { - OPERATOR_IS_ONLY, + OPERATORS_IS, TOKEN_TITLE_STATUS, } from '~/vue_shared/components/filtered_search_bar/constants'; import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue'; @@ -38,5 +38,5 @@ export const statusTokenConfig = { // see: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1438 title: title.replace(/\s/g, '\u00a0'), })), - operators: OPERATOR_IS_ONLY, + operators: OPERATORS_IS, }; diff --git a/app/assets/javascripts/ci/runner/components/search_tokens/tag_token_config.js b/app/assets/javascripts/ci/runner/components/search_tokens/tag_token_config.js index fdeba714385..369b214f952 100644 --- a/app/assets/javascripts/ci/runner/components/search_tokens/tag_token_config.js +++ b/app/assets/javascripts/ci/runner/components/search_tokens/tag_token_config.js @@ -1,5 +1,5 @@ import { s__ } from '~/locale'; -import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants'; +import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants'; import { PARAM_KEY_TAG } from '../../constants'; import TagToken from './tag_token.vue'; @@ -8,5 +8,5 @@ export const tagTokenConfig = { title: s__('Runners|Tags'), type: PARAM_KEY_TAG, token: TagToken, - operators: OPERATOR_IS_ONLY, + operators: OPERATORS_IS, }; diff --git a/app/assets/javascripts/ci/runner/components/stat/runner_count.vue b/app/assets/javascripts/ci/runner/components/stat/runner_count.vue index 4ad9259f59d..c33c42f3afe 100644 --- a/app/assets/javascripts/ci/runner/components/stat/runner_count.vue +++ b/app/assets/javascripts/ci/runner/components/stat/runner_count.vue @@ -16,13 +16,13 @@ import { INSTANCE_TYPE, GROUP_TYPE } from '../../constants'; * <strong/> tag. * * ```vue - * <runner-count-stat + * <runner-count * #default="{ count }" * :scope="INSTANCE_TYPE" * :variables="{ status: 'ONLINE' }" * > * <strong>{{ count }}</strong> - * </runner-count-stat> + * </runner-count> * ``` * * Use `:skip="true"` to prevent data from being fetched and diff --git a/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue b/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue index 3965e5551f1..2e50dc13d2d 100644 --- a/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue +++ b/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue @@ -1,5 +1,4 @@ <script> -import RunnerSingleStat from '~/ci/runner/components/stat/runner_single_stat.vue'; import { I18N_STATUS_ONLINE, I18N_STATUS_OFFLINE, @@ -8,9 +7,19 @@ import { STATUS_OFFLINE, STATUS_STALE, } from '../../constants'; +import RunnerSingleStat from './runner_single_stat.vue'; +import RunnerCount from './runner_count.vue'; + +/** + * Shows general stats about the runners. + * + * First it checks if there are any runners in this context, and if so, + * shows more details for different status. + */ export default { components: { + RunnerCount, RunnerSingleStat, RunnerUpgradeStatusStats: () => import('ee_component/ci/runner/components/stat/runner_upgrade_status_stats.vue'), @@ -71,19 +80,21 @@ export default { }; </script> <template> - <div class="gl-display-flex gl-flex-wrap gl-py-6"> - <runner-single-stat - v-for="stat in stats" - :key="stat.key" - :scope="scope" - v-bind="stat.props" - class="gl-px-5" - /> + <runner-count #default="{ count }" :scope="scope" :variables="variables"> + <div v-if="count" class="gl-display-flex gl-flex-wrap gl-py-6"> + <runner-single-stat + v-for="stat in stats" + :key="stat.key" + :scope="scope" + v-bind="stat.props" + class="gl-px-5" + /> - <runner-upgrade-status-stats - class="gl-display-contents" - :scope="scope" - :variables="variables" - /> - </div> + <runner-upgrade-status-stats + class="gl-display-contents" + :scope="scope" + :variables="variables" + /> + </div> + </runner-count> </template> |