diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components')
5 files changed, 38 insertions, 51 deletions
diff --git a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue index c56537f4039..041b62e02ec 100644 --- a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue +++ b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue @@ -4,7 +4,7 @@ import SafeHtml from '~/vue_shared/directives/safe_html'; import { __, s__ } from '~/locale'; import { createAlert } from '~/flash'; import { redirectTo } from '~/lib/utils/url_utility'; -import CiBadge from '~/vue_shared/components/ci_badge_link.vue'; +import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; import RetryFailedJobMutation from '../../graphql/mutations/retry_failed_job.mutation.graphql'; import { DEFAULT_FIELDS } from '../../constants'; @@ -12,7 +12,7 @@ export default { fields: DEFAULT_FIELDS, retry: __('Retry'), components: { - CiBadge, + CiBadgeLink, GlButton, GlLink, GlTableLite, @@ -72,7 +72,7 @@ export default { <div class="gl-display-flex gl-align-items-center gl-lg-justify-content-start gl-justify-content-end" > - <ci-badge :status="item.detailedStatus" :show-text="false" class="gl-mr-3" /> + <ci-badge-link :status="item.detailedStatus" :show-text="false" class="gl-mr-3" /> <div class="gl-text-truncate"> <gl-link :href="item.detailedStatus.detailsPath" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue index 30528ce8d17..c498f12d5c7 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdown, GlDropdownItem, GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui'; +import { GlEmptyState, GlIcon, GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/ui'; import { isEqual } from 'lodash'; import { createAlert, VARIANT_INFO, VARIANT_WARNING } from '~/flash'; import { getParameterByName } from '~/lib/utils/url_utility'; @@ -26,8 +26,7 @@ export default { PipelineKeyOptions, components: { EmptyState, - GlDropdown, - GlDropdownItem, + GlCollapsibleListbox, GlEmptyState, GlIcon, GlLoadingIcon, @@ -315,7 +314,7 @@ export default { this.updateContent(this.requestData); }, changeVisibilityPipelineID(val) { - this.selectedPipelineKeyOption = val; + this.selectedPipelineKeyOption = PipelineKeyOptions.find((e) => val === e.value); }, }, }; @@ -355,21 +354,12 @@ export default { :params="validatedParams" @filterPipelines="filterPipelines" /> - <gl-dropdown - class="gl-display-flex" - :text="selectedPipelineKeyOption.text" - data-testid="pipeline-key-dropdown" - > - <gl-dropdown-item - v-for="(val, index) in $options.PipelineKeyOptions" - :key="index" - :is-checked="selectedPipelineKeyOption.key === val.key" - is-check-item - @click="changeVisibilityPipelineID(val)" - > - {{ val.text }} - </gl-dropdown-item> - </gl-dropdown> + <gl-collapsible-listbox + data-testid="pipeline-key-collapsible-box" + :toggle-text="selectedPipelineKeyOption.text" + :items="$options.PipelineKeyOptions" + @select="changeVisibilityPipelineID" + /> </div> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue index 936ae4da1ec..00ab8a25ca1 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue @@ -1,12 +1,12 @@ <script> import { CHILD_VIEW, TRACKING_CATEGORIES } from '~/pipelines/constants'; -import CiBadge from '~/vue_shared/components/ci_badge_link.vue'; +import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; import Tracking from '~/tracking'; import PipelinesTimeago from './time_ago.vue'; export default { components: { - CiBadge, + CiBadgeLink, PipelinesTimeago, }, mixins: [Tracking.mixin()], @@ -38,14 +38,13 @@ export default { <template> <div> - <ci-badge + <ci-badge-link class="gl-mb-3" :status="pipelineStatus" :show-text="!isChildView" - :icon-classes="'gl-vertical-align-middle!'" data-qa-selector="pipeline_commit_status" @ciStatusBadgeClick="trackClick" /> - <pipelines-timeago class="gl-mt-3" :pipeline="pipeline" /> + <pipelines-timeago :pipeline="pipeline" /> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue index 346f5735576..ed32d643c0e 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue @@ -161,7 +161,7 @@ export default { <pipeline-url :pipeline="item" :pipeline-schedule-url="pipelineScheduleUrl" - :pipeline-key="pipelineKeyOption.key" + :pipeline-key="pipelineKeyOption.value" /> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue index cd44c998074..960af030421 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue @@ -19,53 +19,51 @@ export default { duration() { return this.pipeline?.details?.duration; }, - finishedTime() { - return this.pipeline?.details?.finished_at; - }, - skipped() { - return this.pipeline?.details?.status?.label === 'skipped'; - }, - stuck() { - return this.pipeline.flags.stuck; - }, durationFormatted() { return durationTimeFormatted(this.duration); }, + finishedTime() { + return this.pipeline?.details?.finished_at; + }, showInProgress() { return !this.duration && !this.finishedTime && !this.skipped; }, showSkipped() { return !this.duration && !this.finishedTime && this.skipped; }, + skipped() { + return this.pipeline?.details?.status?.label === 'skipped'; + }, + stuck() { + return this.pipeline.flags.stuck; + }, }, }; </script> <template> - <div class="gl-display-block"> - <span v-if="showInProgress" data-testid="pipeline-in-progress"> + <div class="gl-display-flex gl-flex-direction-column time-ago"> + <span + v-if="showInProgress" + class="gl-display-inline-flex gl-align-items-center" + data-testid="pipeline-in-progress" + > <gl-icon v-if="stuck" name="warning" class="gl-mr-2" :size="12" data-testid="warning-icon" /> - <gl-icon - v-else - name="hourglass" - class="gl-vertical-align-baseline! gl-mr-2" - :size="12" - data-testid="hourglass-icon" - /> + <gl-icon v-else name="hourglass" class="gl-mr-2" :size="12" data-testid="hourglass-icon" /> {{ s__('Pipeline|In progress') }} </span> <span v-if="showSkipped" data-testid="pipeline-skipped"> - <gl-icon name="status_skipped_borderless" class="gl-mr-2" :size="16" /> + <gl-icon name="status_skipped_borderless" /> {{ s__('Pipeline|Skipped') }} </span> - <p v-if="duration" class="duration"> - <gl-icon name="timer" class="gl-vertical-align-baseline!" :size="12" /> + <p v-if="duration" class="duration gl-display-inline-flex gl-align-items-center"> + <gl-icon name="timer" class="gl-mr-2" :size="12" /> {{ durationFormatted }} </p> - <p v-if="finishedTime" class="finished-at d-none d-md-block"> - <gl-icon name="calendar" class="gl-vertical-align-baseline!" :size="12" /> + <p v-if="finishedTime" class="finished-at gl-display-inline-flex gl-align-items-center"> + <gl-icon name="calendar" class="gl-mr-2" :size="12" /> <time v-gl-tooltip |