diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-28 12:15:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-28 12:15:22 +0300 |
commit | fa4a0663e8c12b7b80e9e7edec99e6ca5a04a253 (patch) | |
tree | 9ed8293aabb57dd4e162498791a7a05e9de016b9 /app/assets/javascripts/runner | |
parent | 4315ed03878b5c5d4ab6a49bf41857cfe036dac7 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/runner')
3 files changed, 108 insertions, 38 deletions
diff --git a/app/assets/javascripts/runner/components/runner_type_tabs.vue b/app/assets/javascripts/runner/components/runner_type_tabs.vue index b767dafaccf..25ed6600dc9 100644 --- a/app/assets/javascripts/runner/components/runner_type_tabs.vue +++ b/app/assets/javascripts/runner/components/runner_type_tabs.vue @@ -1,27 +1,21 @@ <script> import { GlTabs, GlTab } from '@gitlab/ui'; -import { s__ } from '~/locale'; import { searchValidator } from '~/runner/runner_search_utils'; -import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants'; +import { + INSTANCE_TYPE, + GROUP_TYPE, + PROJECT_TYPE, + I18N_ALL_TYPES, + I18N_INSTANCE_TYPE, + I18N_GROUP_TYPE, + I18N_PROJECT_TYPE, +} from '../constants'; -const tabs = [ - { - title: s__('Runners|All'), - runnerType: null, - }, - { - title: s__('Runners|Instance'), - runnerType: INSTANCE_TYPE, - }, - { - title: s__('Runners|Group'), - runnerType: GROUP_TYPE, - }, - { - title: s__('Runners|Project'), - runnerType: PROJECT_TYPE, - }, -]; +const I18N_TAB_TITLES = { + [INSTANCE_TYPE]: I18N_INSTANCE_TYPE, + [GROUP_TYPE]: I18N_GROUP_TYPE, + [PROJECT_TYPE]: I18N_PROJECT_TYPE, +}; export default { components: { @@ -29,12 +23,34 @@ export default { GlTab, }, props: { + runnerTypes: { + type: Array, + required: false, + default: () => [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE], + }, value: { type: Object, required: true, validator: searchValidator, }, }, + computed: { + tabs() { + const tabs = this.runnerTypes.map((runnerType) => ({ + title: I18N_TAB_TITLES[runnerType], + runnerType, + })); + + // Always add a "All" tab that resets filters + return [ + { + title: I18N_ALL_TYPES, + runnerType: null, + }, + ...tabs, + ]; + }, + }, methods: { onTabSelected({ runnerType }) { this.$emit('input', { @@ -47,13 +63,12 @@ export default { return runnerType === this.value.runnerType; }, }, - tabs, }; </script> <template> <gl-tabs v-bind="$attrs" data-testid="runner-type-tabs"> <gl-tab - v-for="tab in $options.tabs" + v-for="tab in tabs" :key="`${tab.runnerType}`" :active="isTabActive(tab)" @click="onTabSelected(tab)" diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js index ad0437d84ef..221696836ac 100644 --- a/app/assets/javascripts/runner/constants.js +++ b/app/assets/javascripts/runner/constants.js @@ -2,12 +2,16 @@ import { __, s__ } from '~/locale'; export const RUNNER_PAGE_SIZE = 20; export const RUNNER_JOB_COUNT_LIMIT = 1000; -export const GROUP_RUNNER_COUNT_LIMIT = 1000; export const I18N_FETCH_ERROR = s__('Runners|Something went wrong while fetching runner data.'); export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}'); // Type + +export const I18N_ALL_TYPES = s__('Runners|All'); +export const I18N_INSTANCE_TYPE = s__('Runners|Instance'); +export const I18N_GROUP_TYPE = s__('Runners|Group'); +export const I18N_PROJECT_TYPE = s__('Runners|Project'); export const I18N_INSTANCE_RUNNER_DESCRIPTION = s__('Runners|Available to all projects'); export const I18N_GROUP_RUNNER_DESCRIPTION = s__( 'Runners|Available to all projects and subgroups in the group', diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue index 3a7b58e3dc9..c4ee0ad4dfb 100644 --- a/app/assets/javascripts/runner/group_runners/group_runners_app.vue +++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue @@ -1,9 +1,9 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlBadge, GlLink } from '@gitlab/ui'; import { createAlert } from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import { updateHistory } from '~/lib/utils/url_utility'; -import { formatNumber, sprintf, s__ } from '~/locale'; +import { formatNumber } from '~/locale'; import RegistrationDropdown from '../components/registration/registration_dropdown.vue'; import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue'; @@ -18,7 +18,7 @@ import { I18N_FETCH_ERROR, GROUP_FILTERED_SEARCH_NAMESPACE, GROUP_TYPE, - GROUP_RUNNER_COUNT_LIMIT, + PROJECT_TYPE, STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE, @@ -46,6 +46,7 @@ const runnersCountSmartQuery = { export default { name: 'GroupRunnersApp', components: { + GlBadge, GlLink, RegistrationDropdown, RunnerFilteredSearchBar, @@ -131,6 +132,33 @@ export default { }; }, }, + allRunnersCount: { + ...runnersCountSmartQuery, + variables() { + return { + ...this.countVariables, + type: null, + }; + }, + }, + groupRunnersCount: { + ...runnersCountSmartQuery, + variables() { + return { + ...this.countVariables, + type: GROUP_TYPE, + }; + }, + }, + projectRunnersCount: { + ...runnersCountSmartQuery, + variables() { + return { + ...this.countVariables, + type: PROJECT_TYPE, + }; + }, + }, }, computed: { variables() { @@ -139,23 +167,17 @@ export default { groupFullPath: this.groupFullPath, }; }, + countVariables() { + // Exclude pagination variables, leave only filters variables + const { sort, before, last, after, first, ...countVariables } = this.variables; + return countVariables; + }, runnersLoading() { return this.$apollo.queries.runners.loading; }, noRunnersFound() { return !this.runnersLoading && !this.runners.items.length; }, - groupRunnersCount() { - if (this.groupRunnersLimitedCount > GROUP_RUNNER_COUNT_LIMIT) { - return `${formatNumber(GROUP_RUNNER_COUNT_LIMIT)}+`; - } - return formatNumber(this.groupRunnersLimitedCount); - }, - runnerCountMessage() { - return sprintf(s__('Runners|Runners in this group: %{groupRunnersCount}'), { - groupRunnersCount: this.groupRunnersCount, - }); - }, searchTokens() { return [statusTokenConfig]; }, @@ -179,10 +201,31 @@ export default { this.reportToSentry(error); }, methods: { + tabCount({ runnerType }) { + let count; + switch (runnerType) { + case null: + count = this.allRunnersCount; + break; + case GROUP_TYPE: + count = this.groupRunnersCount; + break; + case PROJECT_TYPE: + count = this.projectRunnersCount; + break; + default: + return null; + } + if (typeof count === 'number') { + return formatNumber(count); + } + return null; + }, reportToSentry(error) { captureException({ error, component: this.$options.name }); }, }, + TABS_RUNNER_TYPES: [GROUP_TYPE, PROJECT_TYPE], GROUP_TYPE, }; </script> @@ -198,9 +241,17 @@ export default { <div class="gl-display-flex gl-align-items-center"> <runner-type-tabs v-model="search" + :runner-types="$options.TABS_RUNNER_TYPES" content-class="gl-display-none" nav-class="gl-border-none!" - /> + > + <template #title="{ tab }"> + {{ tab.title }} + <gl-badge v-if="tabCount(tab)" class="gl-ml-1" size="sm"> + {{ tabCount(tab) }} + </gl-badge> + </template> + </runner-type-tabs> <registration-dropdown class="gl-ml-auto" |