diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-12 15:15:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-12 15:15:45 +0300 |
commit | 2826582c124144222ddbba4b9a242534b6c59c0c (patch) | |
tree | 9ec406165ff202fe8020b9482bfac82e1931e3e0 /app/assets/javascripts/runner | |
parent | abb061e25f380f1e28bc7e52ed14c6bcbaea4617 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/runner')
-rw-r--r-- | app/assets/javascripts/runner/admin_runners/admin_runners_app.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/runner/components/runner_assigned_item.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/runner/components/runner_details.vue | 14 | ||||
-rw-r--r-- | app/assets/javascripts/runner/components/runner_groups.vue (renamed from app/assets/javascripts/runner/components/runner_detail_groups.vue) | 0 | ||||
-rw-r--r-- | app/assets/javascripts/runner/components/runner_pagination.vue | 12 | ||||
-rw-r--r-- | app/assets/javascripts/runner/components/runner_projects.vue | 120 | ||||
-rw-r--r-- | app/assets/javascripts/runner/constants.js | 9 | ||||
-rw-r--r-- | app/assets/javascripts/runner/graphql/get_runner_projects.query.graphql | 26 | ||||
-rw-r--r-- | app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql | 3 |
9 files changed, 184 insertions, 10 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 e6575e55a1c..a968d4029f8 100644 --- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue +++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue @@ -279,7 +279,11 @@ export default { </gl-link> </template> </runner-list> - <runner-pagination v-model="search.pagination" :page-info="runners.pageInfo" /> + <runner-pagination + v-model="search.pagination" + class="gl-mt-3" + :page-info="runners.pageInfo" + /> </template> </div> </template> diff --git a/app/assets/javascripts/runner/components/runner_assigned_item.vue b/app/assets/javascripts/runner/components/runner_assigned_item.vue index 38105ff3198..ea8074199a6 100644 --- a/app/assets/javascripts/runner/components/runner_assigned_item.vue +++ b/app/assets/javascripts/runner/components/runner_assigned_item.vue @@ -34,8 +34,6 @@ export default { <gl-avatar shape="rect" :entity-name="name" :alt="name" :src="avatarUrl" :size="48" /> </gl-link> - <gl-link :href="href" class="gl-font-lg gl-font-weight-bold gl-text-gray-900!">{{ - fullName - }}</gl-link> + <gl-link :href="href" class="gl-font-weight-bold gl-text-gray-900!">{{ fullName }}</gl-link> </div> </template> diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue index 81f6fcbb1c2..ab4b99d4186 100644 --- a/app/assets/javascripts/runner/components/runner_details.vue +++ b/app/assets/javascripts/runner/components/runner_details.vue @@ -3,9 +3,10 @@ import { GlTabs, GlTab, GlIntersperse } from '@gitlab/ui'; import { s__ } from '~/locale'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; -import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE } from '../constants'; +import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE, PROJECT_TYPE } from '../constants'; import RunnerDetail from './runner_detail.vue'; -import RunnerDetailGroups from './runner_detail_groups.vue'; +import RunnerGroups from './runner_groups.vue'; +import RunnerProjects from './runner_projects.vue'; import RunnerTags from './runner_tags.vue'; export default { @@ -14,7 +15,8 @@ export default { GlTab, GlIntersperse, RunnerDetail, - RunnerDetailGroups, + RunnerGroups, + RunnerProjects, RunnerTags, TimeAgo, }, @@ -48,6 +50,9 @@ export default { isGroupRunner() { return this.runner?.runnerType === GROUP_TYPE; }, + isProjectRunner() { + return this.runner?.runnerType === PROJECT_TYPE; + }, }, ACCESS_LEVEL_REF_PROTECTED, }; @@ -94,7 +99,8 @@ export default { </dl> </div> - <runner-detail-groups v-if="isGroupRunner" :runner="runner" /> + <runner-groups v-if="isGroupRunner" :runner="runner" /> + <runner-projects v-if="isProjectRunner" :runner="runner" /> </template> </gl-tab> </gl-tabs> diff --git a/app/assets/javascripts/runner/components/runner_detail_groups.vue b/app/assets/javascripts/runner/components/runner_groups.vue index c3b35bd52a9..c3b35bd52a9 100644 --- a/app/assets/javascripts/runner/components/runner_detail_groups.vue +++ b/app/assets/javascripts/runner/components/runner_groups.vue diff --git a/app/assets/javascripts/runner/components/runner_pagination.vue b/app/assets/javascripts/runner/components/runner_pagination.vue index 8645b90f5cd..b683a7f2330 100644 --- a/app/assets/javascripts/runner/components/runner_pagination.vue +++ b/app/assets/javascripts/runner/components/runner_pagination.vue @@ -29,7 +29,14 @@ export default { }, methods: { handlePageChange(page) { - if (page > this.value.page) { + if (page === 1) { + // Small optimization for first page + // If we have loaded using "first", + // page is already cached. + this.$emit('input', { + page, + }); + } else if (page > this.value.page) { this.$emit('input', { page, after: this.pageInfo.endCursor, @@ -47,11 +54,12 @@ export default { <template> <gl-pagination + v-bind="$attrs" :value="value.page" :prev-page="prevPage" :next-page="nextPage" align="center" - class="gl-pagination gl-mt-3" + class="gl-pagination" @input="handlePageChange" /> </template> diff --git a/app/assets/javascripts/runner/components/runner_projects.vue b/app/assets/javascripts/runner/components/runner_projects.vue new file mode 100644 index 00000000000..2063404eb64 --- /dev/null +++ b/app/assets/javascripts/runner/components/runner_projects.vue @@ -0,0 +1,120 @@ +<script> +import { GlSkeletonLoading } from '@gitlab/ui'; +import { sprintf, formatNumber } from '~/locale'; +import { createAlert } from '~/flash'; +import getRunnerProjectsQuery from '../graphql/get_runner_projects.query.graphql'; +import { + I18N_ASSIGNED_PROJECTS, + I18N_NONE, + I18N_FETCH_ERROR, + RUNNER_DETAILS_PROJECTS_PAGE_SIZE, +} from '../constants'; +import { captureException } from '../sentry_utils'; +import RunnerAssignedItem from './runner_assigned_item.vue'; +import RunnerPagination from './runner_pagination.vue'; + +export default { + name: 'RunnerProjects', + components: { + GlSkeletonLoading, + RunnerAssignedItem, + RunnerPagination, + }, + props: { + runner: { + type: Object, + required: true, + }, + }, + data() { + return { + projects: { + items: [], + pageInfo: {}, + count: 0, + }, + pagination: { + page: 1, + }, + }; + }, + apollo: { + projects: { + query: getRunnerProjectsQuery, + variables() { + return this.variables; + }, + update(data) { + const { runner } = data; + return { + count: runner?.projectCount || 0, + items: runner?.projects?.nodes || [], + pageInfo: runner?.projects?.pageInfo || {}, + }; + }, + error(error) { + createAlert({ message: I18N_FETCH_ERROR }); + + this.reportToSentry(error); + }, + }, + }, + computed: { + variables() { + const { id } = this.runner; + const { before, after } = this.pagination; + + if (before) { + return { + id, + before, + last: RUNNER_DETAILS_PROJECTS_PAGE_SIZE, + }; + } + return { + id, + after, + first: RUNNER_DETAILS_PROJECTS_PAGE_SIZE, + }; + }, + loading() { + return this.$apollo.queries.projects.loading; + }, + heading() { + return sprintf(I18N_ASSIGNED_PROJECTS, { + projectCount: formatNumber(this.projects.count), + }); + }, + }, + methods: { + reportToSentry(error) { + captureException({ error, component: this.$options.name }); + }, + }, + I18N_NONE, +}; +</script> + +<template> + <div class="gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid"> + <h3 class="gl-font-lg gl-mt-5 gl-mb-0"> + {{ heading }} + </h3> + + <gl-skeleton-loading v-if="loading" class="gl-py-5" /> + <template v-else-if="projects.items.length"> + <runner-assigned-item + v-for="(project, i) in projects.items" + :key="project.id" + :class="{ 'gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid': i !== 0 }" + :href="project.webUrl" + :name="project.name" + :full-name="project.nameWithNamespace" + :avatar-url="project.avatarUrl" + /> + </template> + <span v-else class="gl-text-gray-500">{{ $options.I18N_NONE }}</span> + + <runner-pagination v-model="pagination" :disabled="loading" :page-info="projects.pageInfo" /> + </div> +</template> diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js index 221696836ac..45e61768d1e 100644 --- a/app/assets/javascripts/runner/constants.js +++ b/app/assets/javascripts/runner/constants.js @@ -3,6 +3,8 @@ import { __, s__ } from '~/locale'; export const RUNNER_PAGE_SIZE = 20; export const RUNNER_JOB_COUNT_LIMIT = 1000; +export const RUNNER_DETAILS_PROJECTS_PAGE_SIZE = 5; + export const I18N_FETCH_ERROR = s__('Runners|Something went wrong while fetching runner data.'); export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}'); @@ -39,6 +41,13 @@ export const I18N_RESUME = __('Resume'); export const I18N_LOCKED_RUNNER_DESCRIPTION = s__('Runners|You cannot assign to other projects'); export const I18N_PAUSED_RUNNER_DESCRIPTION = s__('Runners|Not available to run jobs'); +// Runner details + +export const I18N_ASSIGNED_PROJECTS = s__('Runners|Assigned Projects (%{projectCount})'); +export const I18N_NONE = __('None'); + +// Styles + export const RUNNER_TAG_BADGE_VARIANT = 'neutral'; export const RUNNER_TAG_BG_CLASS = 'gl-bg-blue-100'; diff --git a/app/assets/javascripts/runner/graphql/get_runner_projects.query.graphql b/app/assets/javascripts/runner/graphql/get_runner_projects.query.graphql new file mode 100644 index 00000000000..f97237b8267 --- /dev/null +++ b/app/assets/javascripts/runner/graphql/get_runner_projects.query.graphql @@ -0,0 +1,26 @@ +#import "~/graphql_shared/fragments/pageInfo.fragment.graphql" + +query getRunnerProjects( + $id: CiRunnerID! + $first: Int + $last: Int + $before: String + $after: String +) { + runner(id: $id) { + id + projectCount + projects(first: $first, last: $last, before: $before, after: $after) { + nodes { + id + avatarUrl + name + nameWithNamespace + webUrl + } + pageInfo { + ...PageInfo + } + } + } +} diff --git a/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql b/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql index 4479df555b9..ae29fa3a4df 100644 --- a/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql +++ b/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql @@ -19,6 +19,9 @@ fragment RunnerDetailsShared on CiRunner { deleteRunner } groups { + # Only a single group can be loaded here, while projects + # are loaded separately using the query with pagination + # parameters `get_runner_projects.query.graphql`. nodes { id avatarUrl |