Commit 4aa41d07 authored by Clement Ho's avatar Clement Ho

Merge branch '51259-ci-cd-gitlab-ui-1' into 'master'

Use gitlab-ui in jobs and pipelines

See merge request gitlab-org/gitlab-ce!22782
parents 746ac855 21edd590
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
import timeagoMixin from '~/vue_shared/mixins/timeago'; import timeagoMixin from '~/vue_shared/mixins/timeago';
import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -21,6 +22,8 @@ export default { ...@@ -21,6 +22,8 @@ export default {
TriggerBlock, TriggerBlock,
StagesDropdown, StagesDropdown,
JobsContainer, JobsContainer,
GlLink,
GlButton,
}, },
mixins: [timeagoMixin], mixins: [timeagoMixin],
props: { props: {
...@@ -115,7 +118,7 @@ export default { ...@@ -115,7 +118,7 @@ export default {
<strong class="inline prepend-top-8"> <strong class="inline prepend-top-8">
{{ job.name }} {{ job.name }}
</strong> </strong>
<a <gl-link
v-if="job.retry_path" v-if="job.retry_path"
:class="retryButtonClass" :class="retryButtonClass"
:href="job.retry_path" :href="job.retry_path"
...@@ -123,8 +126,8 @@ export default { ...@@ -123,8 +126,8 @@ export default {
rel="nofollow" rel="nofollow"
> >
{{ __('Retry') }} {{ __('Retry') }}
</a> </gl-link>
<a <gl-link
v-if="job.terminal_path" v-if="job.terminal_path"
:href="job.terminal_path" :href="job.terminal_path"
class="js-terminal-link pull-right btn btn-primary class="js-terminal-link pull-right btn btn-primary
...@@ -133,8 +136,8 @@ export default { ...@@ -133,8 +136,8 @@ export default {
> >
{{ __('Debug') }} {{ __('Debug') }}
<icon name="external-link" /> <icon name="external-link" />
</a> </gl-link>
<button <gl-button
:aria-label="__('Toggle Sidebar')" :aria-label="__('Toggle Sidebar')"
type="button" type="button"
class="btn btn-blank gutter-toggle class="btn btn-blank gutter-toggle
...@@ -146,20 +149,20 @@ export default { ...@@ -146,20 +149,20 @@ export default {
data-hidden="true" data-hidden="true"
class="fa fa-angle-double-right" class="fa fa-angle-double-right"
></i> ></i>
</button> </gl-button>
</div> </div>
<div <div
v-if="job.retry_path || job.new_issue_path" v-if="job.retry_path || job.new_issue_path"
class="block retry-link" class="block retry-link"
> >
<a <gl-link
v-if="job.new_issue_path" v-if="job.new_issue_path"
:href="job.new_issue_path" :href="job.new_issue_path"
class="js-new-issue btn btn-success btn-inverted" class="js-new-issue btn btn-success btn-inverted"
> >
{{ __('New issue') }} {{ __('New issue') }}
</a> </gl-link>
<a <gl-link
v-if="job.retry_path" v-if="job.retry_path"
:href="job.retry_path" :href="job.retry_path"
class="js-retry-job btn btn-inverted-secondary" class="js-retry-job btn btn-inverted-secondary"
...@@ -167,7 +170,7 @@ export default { ...@@ -167,7 +170,7 @@ export default {
rel="nofollow" rel="nofollow"
> >
{{ __('Retry') }} {{ __('Retry') }}
</a> </gl-link>
</div> </div>
<div :class="{ block : renderBlock }"> <div :class="{ block : renderBlock }">
<p <p
...@@ -177,9 +180,9 @@ export default { ...@@ -177,9 +180,9 @@ export default {
<span class="build-light-text"> <span class="build-light-text">
{{ __('Merge Request:') }} {{ __('Merge Request:') }}
</span> </span>
<a :href="job.merge_request.path"> <gl-link :href="job.merge_request.path">
!{{ job.merge_request.iid }} !{{ job.merge_request.iid }}
</a> </gl-link>
</p> </p>
<detail-row <detail-row
...@@ -244,14 +247,14 @@ export default { ...@@ -244,14 +247,14 @@ export default {
v-if="job.cancel_path" v-if="job.cancel_path"
class="btn-group prepend-top-5" class="btn-group prepend-top-5"
role="group"> role="group">
<a <gl-link
:href="job.cancel_path" :href="job.cancel_path"
class="js-cancel-job btn btn-sm btn-default" class="js-cancel-job btn btn-sm btn-default"
data-method="post" data-method="post"
rel="nofollow" rel="nofollow"
> >
{{ __('Cancel') }} {{ __('Cancel') }}
</a> </gl-link>
</div> </div>
</div> </div>
......
<script> <script>
import { GlButton } from '@gitlab-org/gitlab-ui';
export default { export default {
components: {
GlButton,
},
props: { props: {
trigger: { trigger: {
type: Object, type: Object,
...@@ -41,15 +46,14 @@ export default { ...@@ -41,15 +46,14 @@ export default {
</p> </p>
<p v-if="hasVariables"> <p v-if="hasVariables">
<button <gl-button
v-if="!areVariablesVisible" v-if="!areVariablesVisible"
type="button" type="button"
class="btn btn-default group js-reveal-variables" class="btn btn-default group js-reveal-variables"
@click="revealVariables" @click="revealVariables"
> >
{{ __('Reveal Variables') }} {{ __('Reveal Variables') }}
</button> </gl-button>
</p> </p>
<dl <dl
......
<script> <script>
import { GlButton } from '@gitlab-org/gitlab-ui';
export default { export default {
name: 'PipelinesEmptyState', name: 'PipelinesEmptyState',
components: {
GlButton,
},
props: { props: {
helpPagePath: { helpPagePath: {
type: String, type: String,
...@@ -41,12 +46,13 @@ export default { ...@@ -41,12 +46,13 @@ export default {
</p> </p>
<div class="text-center"> <div class="text-center">
<a <gl-button
:href="helpPagePath" :href="helpPagePath"
class="btn btn-primary js-get-started-pipelines" variant="primary"
class="js-get-started-pipelines"
> >
{{ s__('Pipelines|Get started with Pipelines') }} {{ s__('Pipelines|Get started with Pipelines') }}
</a> </gl-button>
</div> </div>
</template> </template>
......
<script> <script>
import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
import LoadingButton from '../../vue_shared/components/loading_button.vue'; import LoadingButton from '../../vue_shared/components/loading_button.vue';
export default { export default {
name: 'PipelineNavControls', name: 'PipelineNavControls',
components: { components: {
LoadingButton, LoadingButton,
GlLink,
GlButton,
}, },
props: { props: {
newPipelinePath: { newPipelinePath: {
...@@ -40,28 +43,29 @@ export default { ...@@ -40,28 +43,29 @@ export default {
</script> </script>
<template> <template>
<div class="nav-controls"> <div class="nav-controls">
<a <gl-button
v-if="newPipelinePath" v-if="newPipelinePath"
:href="newPipelinePath" :href="newPipelinePath"
class="btn btn-success js-run-pipeline" variant="success"
class="js-run-pipeline"
> >
{{ s__('Pipelines|Run Pipeline') }} {{ s__('Pipelines|Run Pipeline') }}
</a> </gl-button>
<loading-button <loading-button
v-if="resetCachePath" v-if="resetCachePath"
:loading="isResetCacheButtonLoading" :loading="isResetCacheButtonLoading"
:label="s__('Pipelines|Clear Runner Caches')" :label="s__('Pipelines|Clear Runner Caches')"
class="btn btn-default js-clear-cache" class="js-clear-cache"
@click="onClickResetCache" @click="onClickResetCache"
/> />
<a <gl-button
v-if="ciLintPath" v-if="ciLintPath"
:href="ciLintPath" :href="ciLintPath"
class="btn btn-default js-ci-lint" class="js-ci-lint"
> >
{{ s__('Pipelines|CI Lint') }} {{ s__('Pipelines|CI Lint') }}
</a> </gl-button>
</div> </div>
</template> </template>
<script> <script>
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import { GlLink, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import tooltip from '../../vue_shared/directives/tooltip'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import popover from '../../vue_shared/directives/popover'; import popover from '~/vue_shared/directives/popover';
export default { export default {
components: { components: {
userAvatarLink, UserAvatarLink,
GlLink,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
popover, popover,
}, },
props: { props: {
...@@ -47,11 +48,12 @@ export default { ...@@ -47,11 +48,12 @@ export default {
</script> </script>
<template> <template>
<div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags"> <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
<a <gl-link
:href="pipeline.path" :href="pipeline.path"
class="js-pipeline-url-link"> class="js-pipeline-url-link"
>
<span class="pipeline-id">#{{ pipeline.id }}</span> <span class="pipeline-id">#{{ pipeline.id }}</span>
</a> </gl-link>
<span>by</span> <span>by</span>
<user-avatar-link <user-avatar-link
v-if="user" v-if="user"
...@@ -68,36 +70,41 @@ export default { ...@@ -68,36 +70,41 @@ export default {
<div class="label-container"> <div class="label-container">
<span <span
v-if="pipeline.flags.latest" v-if="pipeline.flags.latest"
v-tooltip v-gl-tooltip
class="js-pipeline-url-latest badge badge-success" class="js-pipeline-url-latest badge badge-success"
title="Latest pipeline for this branch"> title="Latest pipeline for this branch"
>
latest latest
</span> </span>
<span <span
v-if="pipeline.flags.yaml_errors" v-if="pipeline.flags.yaml_errors"
v-tooltip v-gl-tooltip
:title="pipeline.yaml_errors" :title="pipeline.yaml_errors"
class="js-pipeline-url-yaml badge badge-danger"> class="js-pipeline-url-yaml badge badge-danger"
>
yaml invalid yaml invalid
</span> </span>
<span <span
v-if="pipeline.flags.failure_reason" v-if="pipeline.flags.failure_reason"
v-tooltip v-gl-tooltip
:title="pipeline.failure_reason" :title="pipeline.failure_reason"
class="js-pipeline-url-failure badge badge-danger"> class="js-pipeline-url-failure badge badge-danger"
>
error error
</span> </span>
<a <gl-link
v-if="pipeline.flags.auto_devops" v-if="pipeline.flags.auto_devops"
v-popover="popoverOptions" v-popover="popoverOptions"
tabindex="0" tabindex="0"
class="js-pipeline-url-autodevops badge badge-info autodevops-badge" class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
role="button"> role="button"
>
Auto DevOps Auto DevOps
</a> </gl-link>
<span <span
v-if="pipeline.flags.stuck" v-if="pipeline.flags.stuck"
class="js-pipeline-url-stuck badge badge-warning"> class="js-pipeline-url-stuck badge badge-warning"
>
stuck stuck
</span> </span>
</div> </div>
......
<script> <script>
import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
export default { export default {
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
components: { components: {
Icon, Icon,
GlCountdown, GlCountdown,
GlButton,
GlLoadingIcon, GlLoadingIcon,
}, },
props: { props: {
...@@ -59,14 +59,12 @@ export default { ...@@ -59,14 +59,12 @@ export default {
</script> </script>
<template> <template>
<div class="btn-group"> <div class="btn-group">
<button <gl-button
v-tooltip v-gl-tooltip
:disabled="isLoading" :disabled="isLoading"
type="button"
class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions" class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
title="Manual job" title="Manual job"
data-toggle="dropdown" data-toggle="dropdown"
data-placement="top"
aria-label="Manual job" aria-label="Manual job"
> >
<icon <icon
...@@ -78,17 +76,16 @@ export default { ...@@ -78,17 +76,16 @@ export default {
aria-hidden="true"> aria-hidden="true">
</i> </i>
<gl-loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" />
</button> </gl-button>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right">
<li <li
v-for="action in actions" v-for="action in actions"
:key="action.path" :key="action.path"
> >
<button <gl-button
:class="{ disabled: isActionDisabled(action) }" :class="{ disabled: isActionDisabled(action) }"
:disabled="isActionDisabled(action)" :disabled="isActionDisabled(action)"
type="button"
class="js-pipeline-action-link no-btn btn" class="js-pipeline-action-link no-btn btn"
@click="onClickAction(action)" @click="onClickAction(action)"
> >
...@@ -100,7 +97,7 @@ export default { ...@@ -100,7 +97,7 @@ export default {
<icon name="clock" /> <icon name="clock" />
<gl-countdown :end-date-string="action.scheduled_at" /> <gl-countdown :end-date-string="action.scheduled_at" />
</span> </span>
</button> </gl-button>
</li> </li>
</ul> </ul>
</div> </div>
......
<script> <script>
import tooltip from '../../vue_shared/directives/tooltip'; import { GlLink, GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
components: { components: {
Icon, Icon,
GlLink,
GlButton,
}, },
props: { props: {
artifacts: { artifacts: {
...@@ -22,11 +24,10 @@ export default { ...@@ -22,11 +24,10 @@ export default {
class="btn-group" class="btn-group"
role="group" role="group"
> >
<button <gl-button
v-tooltip v-gl-tooltip
class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download" class="dropdown-toggle build-artifacts js-pipeline-dropdown-download"
title="Artifacts" title="Artifacts"
data-placement="top"
data-toggle="dropdown" data-toggle="dropdown"
aria-label="Artifacts" aria-label="Artifacts"
> >
...@@ -36,18 +37,19 @@ export default { ...@@ -36,18 +37,19 @@ export default {
aria-hidden="true" aria-hidden="true"
> >
</i> </i>
</button> </gl-button>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right">
<li <li
v-for="(artifact, i) in artifacts" v-for="(artifact, i) in artifacts"
:key="i"> :key="i"
<a >
<gl-link
:href="artifact.path" :href="artifact.path"
rel="nofollow" rel="nofollow"
download download
> >
Download {{ artifact.name }} artifacts Download {{ artifact.name }} artifacts
</a> </gl-link>
</li> </li>
</ul> </ul>
</div> </div>
......
---
title: Uses new gitlab-ui components in Jobs and Pipelines components
merge_request:
author:
type: other
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment