diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-07 03:08:48 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-07 03:08:48 +0300 |
commit | 29e19880e22c31eef2d007647b0c46db8f0e7a04 (patch) | |
tree | 027c642958a2bec4983d0e6eed8690df57dfeeb6 /app/assets/javascripts/jobs | |
parent | 02c6800ac51fc1a504f527426d6cc5a780481a1d (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/jobs')
5 files changed, 51 insertions, 26 deletions
diff --git a/app/assets/javascripts/jobs/components/table/graphql/cache_config.js b/app/assets/javascripts/jobs/components/table/graphql/cache_config.js index 354245443ce..8bcd7ffd10f 100644 --- a/app/assets/javascripts/jobs/components/table/graphql/cache_config.js +++ b/app/assets/javascripts/jobs/components/table/graphql/cache_config.js @@ -32,6 +32,7 @@ export default { nodes, statuses, pageInfo, + count: incoming.count, }; } @@ -45,6 +46,7 @@ export default { nodes, statuses, pageInfo, + count: incoming.count, }; }, }, 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 151e49af87e..f3ca958b3ca 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 @@ -3,6 +3,7 @@ query getJobs($fullPath: ID!, $after: String, $statuses: [CiJobStatus!]) { id __typename jobs(after: $after, first: 30, statuses: $statuses) { + count pageInfo { endCursor hasNextPage diff --git a/app/assets/javascripts/jobs/components/table/index.js b/app/assets/javascripts/jobs/components/table/index.js index 1b9c7cdcfdd..88da1169e01 100644 --- a/app/assets/javascripts/jobs/components/table/index.js +++ b/app/assets/javascripts/jobs/components/table/index.js @@ -27,7 +27,6 @@ export default (containerId = 'js-jobs-table') => { const { fullPath, - jobCounts, jobStatuses, pipelineEditorPath, emptyStateSvgPath, @@ -42,7 +41,6 @@ export default (containerId = 'js-jobs-table') => { fullPath, pipelineEditorPath, jobStatuses: JSON.parse(jobStatuses), - jobCounts: JSON.parse(jobCounts), admin: parseBoolean(admin), }, render(createElement) { 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 b141dcf81dd..3ea50dfb7a3 100644 --- a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue +++ b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue @@ -43,10 +43,11 @@ export default { }; }, update(data) { - const { jobs: { nodes: list = [], pageInfo = {} } = {} } = data.project || {}; + const { jobs: { nodes: list = [], pageInfo = {}, count } = {} } = data.project || {}; return { list, pageInfo, + count, }; }, error() { @@ -64,6 +65,7 @@ export default { scope: null, infiniteScrollingTriggered: false, filterSearchTriggered: false, + count: 0, }; }, computed: { @@ -93,6 +95,20 @@ export default { showFilteredSearch() { return this.glFeatures?.jobsTableVueSearch && !this.scope; }, + jobsCount() { + return this.jobs.count; + }, + }, + watch: { + // this watcher ensures that the count on the all tab + // is not updated when switching to the finished tab + jobsCount(newCount, oldCount) { + if (this.scope) { + this.count = oldCount; + } else { + this.count = newCount; + } + }, }, mounted() { eventHub.$on('jobActionPerformed', this.handleJobAction); @@ -161,7 +177,11 @@ export default { {{ $options.i18n.errorMsg }} </gl-alert> - <jobs-table-tabs @fetchJobsByStatus="fetchJobsByStatus" /> + <jobs-table-tabs + :all-jobs-count="count" + :loading="loading" + @fetchJobsByStatus="fetchJobsByStatus" + /> <jobs-filtered-search v-if="showFilteredSearch" diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue index ad4651a7c9f..0a25dc5bea5 100644 --- a/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue +++ b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue @@ -1,50 +1,50 @@ <script> -import { GlBadge, GlTab, GlTabs } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { GlBadge, GlTab, GlTabs, GlLoadingIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; export default { components: { GlBadge, GlTab, GlTabs, + GlLoadingIcon, }, inject: { - jobCounts: { - default: {}, - }, jobStatuses: { default: {}, }, }, + props: { + allJobsCount: { + type: Number, + required: true, + }, + loading: { + type: Boolean, + required: true, + }, + }, computed: { tabs() { return [ { - text: __('All'), - count: this.jobCounts.all, + text: s__('Jobs|All'), + count: this.allJobsCount, scope: null, testId: 'jobs-all-tab', + showBadge: true, }, { - text: __('Pending'), - count: this.jobCounts.pending, - scope: this.jobStatuses.pending, - testId: 'jobs-pending-tab', - }, - { - text: __('Running'), - count: this.jobCounts.running, - scope: this.jobStatuses.running, - testId: 'jobs-running-tab', - }, - { - text: __('Finished'), - count: this.jobCounts.finished, + text: s__('Jobs|Finished'), scope: [this.jobStatuses.success, this.jobStatuses.failed, this.jobStatuses.canceled], testId: 'jobs-finished-tab', + showBadge: false, }, ]; }, + showLoadingIcon() { + return this.loading && !this.allJobsCount; + }, }, }; </script> @@ -59,7 +59,11 @@ export default { > <template #title> <span>{{ tab.text }}</span> - <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge> + <gl-loading-icon v-if="showLoadingIcon && tab.showBadge" class="gl-ml-2" /> + + <gl-badge v-else-if="tab.showBadge" size="sm" class="gl-tab-counter-badge"> + {{ tab.count }} + </gl-badge> </template> </gl-tab> </gl-tabs> |