diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-15 15:14:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-15 15:14:49 +0300 |
commit | 524e97262236b70abe4399faef040f4298c31d38 (patch) | |
tree | 20ee49eadaa5e5796e5e4b9d35b43c866f4b37f9 /app/assets/javascripts/runner | |
parent | e7e44c0e4ce493bb103b0fd98f8dd3c90928d291 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/runner')
4 files changed, 89 insertions, 48 deletions
diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue index 50fb8d36992..bb36882d3ae 100644 --- a/app/assets/javascripts/runner/components/runner_list.vue +++ b/app/assets/javascripts/runner/components/runner_list.vue @@ -2,31 +2,14 @@ import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; -import { formatNumber, __, s__ } from '~/locale'; +import { __, s__ } from '~/locale'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; -import { RUNNER_JOB_COUNT_LIMIT } from '../constants'; +import { formatJobCount, tableField } from '../utils'; import RunnerActionsCell from './cells/runner_actions_cell.vue'; import RunnerSummaryCell from './cells/runner_summary_cell.vue'; import RunnerStatusCell from './cells/runner_status_cell.vue'; import RunnerTags from './runner_tags.vue'; -const tableField = ({ key, label = '', thClasses = [] }) => { - return { - key, - label, - thClass: [ - 'gl-bg-transparent!', - 'gl-border-b-solid!', - 'gl-border-b-gray-100!', - 'gl-border-b-1!', - ...thClasses, - ], - tdAttr: { - 'data-testid': `td-${key}`, - }, - }; -}; - export default { components: { GlTable, @@ -54,10 +37,7 @@ export default { }, methods: { formatJobCount(jobCount) { - if (jobCount > RUNNER_JOB_COUNT_LIMIT) { - return `${formatNumber(RUNNER_JOB_COUNT_LIMIT)}+`; - } - return formatNumber(jobCount); + return formatJobCount(jobCount); }, runnerTrAttr(runner) { if (runner) { diff --git a/app/assets/javascripts/runner/components/runner_projects.vue b/app/assets/javascripts/runner/components/runner_projects.vue index 2063404eb64..c4065a24ff2 100644 --- a/app/assets/javascripts/runner/components/runner_projects.vue +++ b/app/assets/javascripts/runner/components/runner_projects.vue @@ -9,6 +9,7 @@ import { I18N_FETCH_ERROR, RUNNER_DETAILS_PROJECTS_PAGE_SIZE, } from '../constants'; +import { getPaginationVariables } from '../utils'; import { captureException } from '../sentry_utils'; import RunnerAssignedItem from './runner_assigned_item.vue'; import RunnerPagination from './runner_pagination.vue'; @@ -62,19 +63,9 @@ export default { 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, + ...getPaginationVariables(this.pagination, RUNNER_DETAILS_PROJECTS_PAGE_SIZE), }; }, loading() { diff --git a/app/assets/javascripts/runner/runner_search_utils.js b/app/assets/javascripts/runner/runner_search_utils.js index c80a73948b8..fe141332be3 100644 --- a/app/assets/javascripts/runner/runner_search_utils.js +++ b/app/assets/javascripts/runner/runner_search_utils.js @@ -18,6 +18,7 @@ import { RUNNER_PAGE_SIZE, STATUS_NEVER_CONTACTED, } from './constants'; +import { getPaginationVariables } from './utils'; /** * The filters and sorting of the runners are built around @@ -184,30 +185,27 @@ export const fromSearchToVariables = ({ sort = null, pagination = {}, } = {}) => { - const variables = {}; + const filterVariables = {}; const queryObj = filterToQueryObject(processFilters(filters), { filteredSearchTermKey: PARAM_KEY_SEARCH, }); - [variables.status] = queryObj[PARAM_KEY_STATUS] || []; - variables.search = queryObj[PARAM_KEY_SEARCH]; - variables.tagList = queryObj[PARAM_KEY_TAG]; + [filterVariables.status] = queryObj[PARAM_KEY_STATUS] || []; + filterVariables.search = queryObj[PARAM_KEY_SEARCH]; + filterVariables.tagList = queryObj[PARAM_KEY_TAG]; if (runnerType) { - variables.type = runnerType; + filterVariables.type = runnerType; } if (sort) { - variables.sort = sort; + filterVariables.sort = sort; } - if (pagination.before) { - variables.before = pagination.before; - variables.last = RUNNER_PAGE_SIZE; - } else { - variables.after = pagination.after; - variables.first = RUNNER_PAGE_SIZE; - } + const paginationVariables = getPaginationVariables(pagination, RUNNER_PAGE_SIZE); - return variables; + return { + ...filterVariables, + ...paginationVariables, + }; }; diff --git a/app/assets/javascripts/runner/utils.js b/app/assets/javascripts/runner/utils.js new file mode 100644 index 00000000000..6e4c8c45e7b --- /dev/null +++ b/app/assets/javascripts/runner/utils.js @@ -0,0 +1,72 @@ +import { formatNumber } from '~/locale'; +import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants'; +import { RUNNER_JOB_COUNT_LIMIT } from './constants'; + +/** + * Formats a job count, limited to a max number + * + * @param {Number} jobCount + * @returns Formatted string + */ +export const formatJobCount = (jobCount) => { + if (typeof jobCount !== 'number') { + return ''; + } + if (jobCount > RUNNER_JOB_COUNT_LIMIT) { + return `${formatNumber(RUNNER_JOB_COUNT_LIMIT)}+`; + } + return formatNumber(jobCount); +}; + +/** + * Returns a GlTable fields with a given key and label + * + * @param {Object} options + * @returns Field object to add to GlTable fields + */ +export const tableField = ({ key, label = '', thClasses = [] }) => { + return { + key, + label, + thClass: [DEFAULT_TH_CLASSES, ...thClasses], + tdAttr: { + 'data-testid': `td-${key}`, + }, + }; +}; + +/** + * Returns variables for a GraphQL query that uses keyset + * pagination. + * + * https://docs.gitlab.com/ee/development/graphql_guide/pagination.html#keyset-pagination + * + * @param {Object} pagination - Contains before, after, page + * @param {Number} pageSize + * @returns Variables + */ +export const getPaginationVariables = (pagination, pageSize = 10) => { + const { before, after } = pagination; + + // first + after: Next page + // Get the first N items after item X + if (after) { + return { + after, + first: pageSize, + }; + } + + // last + before: Prev page + // Get the first N items before item X, when you click on Prev + if (before) { + return { + before, + last: pageSize, + }; + } + + // first page + // Get the first N items + return { first: pageSize }; +}; |