diff options
Diffstat (limited to 'app/assets/javascripts/runner/admin_runners/admin_runners_app.vue')
-rw-r--r-- | app/assets/javascripts/runner/admin_runners/admin_runners_app.vue | 87 |
1 files changed, 73 insertions, 14 deletions
diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue index c8513a0b803..3edb658eaf5 100644 --- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue +++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue @@ -1,18 +1,26 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlBadge, GlLink } from '@gitlab/ui'; import createFlash from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import { updateHistory } from '~/lib/utils/url_utility'; -import { formatNumber, sprintf, __ } from '~/locale'; +import { sprintf, __ } from '~/locale'; + +import RegistrationDropdown from '../components/registration/registration_dropdown.vue'; import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue'; import RunnerList from '../components/runner_list.vue'; -import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue'; import RunnerName from '../components/runner_name.vue'; import RunnerPagination from '../components/runner_pagination.vue'; +import RunnerTypeTabs from '../components/runner_type_tabs.vue'; + import { statusTokenConfig } from '../components/search_tokens/status_token_config'; import { tagTokenConfig } from '../components/search_tokens/tag_token_config'; -import { typeTokenConfig } from '../components/search_tokens/type_token_config'; -import { ADMIN_FILTERED_SEARCH_NAMESPACE, INSTANCE_TYPE, I18N_FETCH_ERROR } from '../constants'; +import { + ADMIN_FILTERED_SEARCH_NAMESPACE, + INSTANCE_TYPE, + GROUP_TYPE, + PROJECT_TYPE, + I18N_FETCH_ERROR, +} from '../constants'; import getRunnersQuery from '../graphql/get_runners.query.graphql'; import { fromUrlQueryToSearch, @@ -24,19 +32,37 @@ import { captureException } from '../sentry_utils'; export default { name: 'AdminRunnersApp', components: { + GlBadge, GlLink, + RegistrationDropdown, RunnerFilteredSearchBar, RunnerList, - RunnerManualSetupHelp, RunnerName, RunnerPagination, + RunnerTypeTabs, }, props: { + registrationToken: { + type: String, + required: true, + }, activeRunnersCount: { - type: Number, + type: String, required: true, }, - registrationToken: { + allRunnersCount: { + type: String, + required: true, + }, + instanceRunnersCount: { + type: String, + required: true, + }, + groupRunnersCount: { + type: String, + required: true, + }, + projectRunnersCount: { type: String, required: true, }, @@ -86,13 +112,12 @@ export default { }, activeRunnersMessage() { return sprintf(__('Runners currently online: %{active_runners_count}'), { - active_runners_count: formatNumber(this.activeRunnersCount), + active_runners_count: this.activeRunnersCount, }); }, searchTokens() { return [ statusTokenConfig, - typeTokenConfig, { ...tagTokenConfig, recentTokenValuesStorageKey: `${this.$options.filteredSearchNamespace}-recent-tags`, @@ -116,6 +141,20 @@ export default { this.reportToSentry(error); }, methods: { + tabCount({ runnerType }) { + switch (runnerType) { + case null: + return this.allRunnersCount; + case INSTANCE_TYPE: + return this.instanceRunnersCount; + case GROUP_TYPE: + return this.groupRunnersCount; + case PROJECT_TYPE: + return this.projectRunnersCount; + default: + return null; + } + }, reportToSentry(error) { captureException({ error, component: this.$options.name }); }, @@ -126,10 +165,30 @@ export default { </script> <template> <div> - <runner-manual-setup-help - :registration-token="registrationToken" - :type="$options.INSTANCE_TYPE" - /> + <div + class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0" + > + <runner-type-tabs + v-model="search" + class="gl-w-full" + 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-w-full gl-sm-w-auto gl-mr-auto" + :registration-token="registrationToken" + :type="$options.INSTANCE_TYPE" + right + /> + </div> <runner-filtered-search-bar v-model="search" |