diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-16 18:25:58 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-16 18:25:58 +0000 |
commit | a5f4bba440d7f9ea47046a0a561d49adf0a1e6d4 (patch) | |
tree | fb69158581673816a8cd895f9d352dcb3c678b1e /app/assets/javascripts/jobs/components | |
parent | d16b2e8639e99961de6ddc93909f3bb5c1445ba1 (diff) | |
download | gitlab-ce-a5f4bba440d7f9ea47046a0a561d49adf0a1e6d4.tar.gz |
Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42
Diffstat (limited to 'app/assets/javascripts/jobs/components')
5 files changed, 89 insertions, 17 deletions
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue index c08ac0317b8..d0594d1ad27 100644 --- a/app/assets/javascripts/jobs/components/job_container_item.vue +++ b/app/assets/javascripts/jobs/components/job_container_item.vue @@ -54,7 +54,7 @@ export default { <template> <div class="build-job gl-relative" :class="classes"> <gl-link - v-gl-tooltip:tooltip-container.left + v-gl-tooltip.left.viewport :href="job.status.details_path" :title="tooltipText" class="gl-display-flex gl-align-items-center" diff --git a/app/assets/javascripts/jobs/components/table/constants.js b/app/assets/javascripts/jobs/components/table/constants.js new file mode 100644 index 00000000000..7e973a34e5c --- /dev/null +++ b/app/assets/javascripts/jobs/components/table/constants.js @@ -0,0 +1,9 @@ +export const GRAPHQL_PAGE_SIZE = 30; + +export const initialPaginationState = { + currentPage: 1, + prevPageCursor: '', + nextPageCursor: '', + first: GRAPHQL_PAGE_SIZE, + last: null, +}; diff --git a/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql b/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql index c2104754bad..68c6584cda6 100644 --- a/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql +++ b/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql @@ -1,6 +1,13 @@ -query getJobs($fullPath: ID!, $statuses: [CiJobStatus!]) { +query getJobs( + $fullPath: ID! + $first: Int + $last: Int + $after: String + $before: String + $statuses: [CiJobStatus!] +) { project(fullPath: $fullPath) { - jobs(first: 20, statuses: $statuses) { + jobs(after: $after, before: $before, first: $first, last: $last, statuses: $statuses) { pageInfo { endCursor hasNextPage diff --git a/app/assets/javascripts/jobs/components/table/jobs_table.vue b/app/assets/javascripts/jobs/components/table/jobs_table.vue index 4fe5bbf79cd..076c0e78b11 100644 --- a/app/assets/javascripts/jobs/components/table/jobs_table.vue +++ b/app/assets/javascripts/jobs/components/table/jobs_table.vue @@ -1,5 +1,6 @@ <script> import { GlTable } from '@gitlab/ui'; +import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants'; import { s__, __ } from '~/locale'; import CiBadge from '~/vue_shared/components/ci_badge_link.vue'; import ActionsCell from './cells/actions_cell.vue'; @@ -9,7 +10,7 @@ import PipelineCell from './cells/pipeline_cell.vue'; const defaultTableClasses = { tdClass: 'gl-p-5!', - thClass: 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!', + thClass: DEFAULT_TH_CLASSES, }; // eslint-disable-next-line @gitlab/require-i18n-strings const coverageTdClasses = `${defaultTableClasses.tdClass} gl-display-none! gl-lg-display-table-cell!`; diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue index cf7970f41b1..2061b1f1eb2 100644 --- a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue +++ b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue @@ -1,6 +1,7 @@ <script> -import { GlAlert, GlSkeletonLoader } from '@gitlab/ui'; +import { GlAlert, GlPagination, GlSkeletonLoader } from '@gitlab/ui'; import { __ } from '~/locale'; +import { GRAPHQL_PAGE_SIZE, initialPaginationState } from './constants'; import GetJobs from './graphql/queries/get_jobs.query.graphql'; import JobsTable from './jobs_table.vue'; import JobsTableEmptyState from './jobs_table_empty_state.vue'; @@ -12,6 +13,7 @@ export default { }, components: { GlAlert, + GlPagination, GlSkeletonLoader, JobsTable, JobsTableEmptyState, @@ -28,10 +30,18 @@ export default { variables() { return { fullPath: this.fullPath, + first: this.pagination.first, + last: this.pagination.last, + after: this.pagination.nextPageCursor, + before: this.pagination.prevPageCursor, }; }, - update({ project }) { - return project?.jobs?.nodes || []; + update(data) { + const { jobs: { nodes: list = [], pageInfo = {} } = {} } = data.project || {}; + return { + list, + pageInfo, + }; }, error() { this.hasError = true; @@ -40,10 +50,11 @@ export default { }, data() { return { - jobs: null, + jobs: {}, hasError: false, isAlertDismissed: false, scope: null, + pagination: initialPaginationState, }; }, computed: { @@ -51,7 +62,16 @@ export default { return this.hasError && !this.isAlertDismissed; }, showEmptyState() { - return this.jobs.length === 0 && !this.scope; + return this.jobs.list.length === 0 && !this.scope; + }, + prevPage() { + return Math.max(this.pagination.currentPage - 1, 0); + }, + nextPage() { + return this.jobs.pageInfo?.hasNextPage ? this.pagination.currentPage + 1 : null; + }, + showPaginationControls() { + return Boolean(this.prevPage || this.nextPage) && !this.$apollo.loading; }, }, methods: { @@ -60,6 +80,24 @@ export default { this.$apollo.queries.jobs.refetch({ statuses: scope }); }, + handlePageChange(page) { + const { startCursor, endCursor } = this.jobs.pageInfo; + + if (page > this.pagination.currentPage) { + this.pagination = { + ...initialPaginationState, + nextPageCursor: endCursor, + currentPage: page, + }; + } else { + this.pagination = { + last: GRAPHQL_PAGE_SIZE, + first: null, + prevPageCursor: startCursor, + currentPage: page, + }; + } + }, }, }; </script> @@ -79,17 +117,34 @@ export default { <jobs-table-tabs @fetchJobsByStatus="fetchJobsByStatus" /> <div v-if="$apollo.loading" class="gl-mt-5"> - <gl-skeleton-loader - preserve-aspect-ratio="none" - equal-width-lines - :lines="5" - :width="600" - :height="66" - /> + <gl-skeleton-loader :width="1248" :height="73"> + <circle cx="748.031" cy="37.7193" r="15.0307" /> + <circle cx="787.241" cy="37.7193" r="15.0307" /> + <circle cx="827.759" cy="37.7193" r="15.0307" /> + <circle cx="866.969" cy="37.7193" r="15.0307" /> + <circle cx="380" cy="37" r="18" /> + <rect x="432" y="19" width="126.587" height="15" /> + <rect x="432" y="41" width="247" height="15" /> + <rect x="158" y="19" width="86.1" height="15" /> + <rect x="158" y="41" width="168" height="15" /> + <rect x="22" y="19" width="96" height="36" /> + <rect x="924" y="30" width="96" height="15" /> + <rect x="1057" y="20" width="166" height="35" /> + </gl-skeleton-loader> </div> <jobs-table-empty-state v-else-if="showEmptyState" /> - <jobs-table v-else :jobs="jobs" /> + <jobs-table v-else :jobs="jobs.list" /> + + <gl-pagination + v-if="showPaginationControls" + :value="pagination.currentPage" + :prev-page="prevPage" + :next-page="nextPage" + align="center" + class="gl-mt-3" + @input="handlePageChange" + /> </div> </template> |