kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use gitlab-ui in jobs and pipelines

Browse source
This commit is contained in:
Filipa Lacerda 2018-11-09 22:42:24 +00:00 committed by Clement Ho
parent 746ac855f9
commit 21edd590bd
8 changed files with 96 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/assets/javascripts/jobs/components/sidebar.vue
View file

@ -1,6 +1,7 @@
<script>
import _ from 'underscore';
import { mapActions, mapState } from 'vuex';
import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
import Icon from '~/vue_shared/components/icon.vue';
@ -21,6 +22,8 @@ export default {
TriggerBlock,
StagesDropdown,
JobsContainer,
GlLink,
GlButton,
},
mixins: [timeagoMixin],
props: {
@ -115,7 +118,7 @@ export default {
<strong class="inline prepend-top-8">
{{ job.name }}
</strong>
<a
<gl-link
v-if="job.retry_path"
:class="retryButtonClass"
:href="job.retry_path"
@ -123,8 +126,8 @@ export default {
rel="nofollow"
>
{{ __('Retry') }}
</a>
<a
</gl-link>
<gl-link
v-if="job.terminal_path"
:href="job.terminal_path"
class="js-terminal-link pull-right btn btn-primary
@ -133,8 +136,8 @@ export default {
>
{{ __('Debug') }}
<icon name="external-link" />
</a>
<button
</gl-link>
<gl-button
:aria-label="__('Toggle Sidebar')"
type="button"
class="btn btn-blank gutter-toggle
@ -146,20 +149,20 @@ export default {
data-hidden="true"
class="fa fa-angle-double-right"
></i>
</button>
</gl-button>
</div>
<div
v-if="job.retry_path || job.new_issue_path"
class="block retry-link"
>
<a
<gl-link
v-if="job.new_issue_path"
:href="job.new_issue_path"
class="js-new-issue btn btn-success btn-inverted"
>
{{ __('New issue') }}
</a>
<a
</gl-link>
<gl-link
v-if="job.retry_path"
:href="job.retry_path"
class="js-retry-job btn btn-inverted-secondary"
@ -167,7 +170,7 @@ export default {
rel="nofollow"
>
{{ __('Retry') }}
</a>
</gl-link>
</div>
<div :class="{ block : renderBlock }">
<p
@ -177,9 +180,9 @@ export default {
<span class="build-light-text">
{{ __('Merge Request:') }}
</span>
<a :href="job.merge_request.path">
<gl-link :href="job.merge_request.path">
!{{ job.merge_request.iid }}
</a>
</gl-link>
</p>
<detail-row
@ -244,14 +247,14 @@ export default {
v-if="job.cancel_path"
class="btn-group prepend-top-5"
role="group">
<a
<gl-link
:href="job.cancel_path"
class="js-cancel-job btn btn-sm btn-default"
data-method="post"
rel="nofollow"
>
{{ __('Cancel') }}
</a>
</gl-link>
</div>
</div>

10
app/assets/javascripts/jobs/components/trigger_block.vue
View file

@ -1,5 +1,10 @@
<script>
import { GlButton } from '@gitlab-org/gitlab-ui';
export default {
components: {
GlButton,
},
props: {
trigger: {
type: Object,
@ -41,15 +46,14 @@ export default {
</p>
<p v-if="hasVariables">
<button
<gl-button
v-if="!areVariablesVisible"
type="button"
class="btn btn-default group js-reveal-variables"
@click="revealVariables"
>
{{ __('Reveal Variables') }}
</button>
</gl-button>
</p>
<dl

12
app/assets/javascripts/pipelines/components/empty_state.vue
View file

@ -1,6 +1,11 @@
<script>
import { GlButton } from '@gitlab-org/gitlab-ui';
export default {
name: 'PipelinesEmptyState',
components: {
GlButton,
},
props: {
helpPagePath: {
type: String,
@ -41,12 +46,13 @@ export default {
</p>
<div class="text-center">
<a
<gl-button
:href="helpPagePath"
class="btn btn-primary js-get-started-pipelines"
variant="primary"
class="js-get-started-pipelines"
>
{{ s__('Pipelines|Get started with Pipelines') }}
</a>
</gl-button>
</div>
</template>

18
app/assets/javascripts/pipelines/components/nav_controls.vue
View file

@ -1,10 +1,13 @@
<script>
import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
import LoadingButton from '../../vue_shared/components/loading_button.vue';
export default {
name: 'PipelineNavControls',
components: {
LoadingButton,
GlLink,
GlButton,
},
props: {
newPipelinePath: {
@ -40,28 +43,29 @@ export default {
</script>
<template>
<div class="nav-controls">
<a
<gl-button
v-if="newPipelinePath"
:href="newPipelinePath"
class="btn btn-success js-run-pipeline"
variant="success"
class="js-run-pipeline"
>
{{ s__('Pipelines|Run Pipeline') }}
</a>
</gl-button>
<loading-button
v-if="resetCachePath"
:loading="isResetCacheButtonLoading"
:label="s__('Pipelines|Clear Runner Caches')"
class="btn btn-default js-clear-cache"
class="js-clear-cache"
@click="onClickResetCache"
/>
<a
<gl-button
v-if="ciLintPath"
:href="ciLintPath"
class="btn btn-default js-ci-lint"
class="js-ci-lint"
>
{{ s__('Pipelines|CI Lint') }}
</a>
</gl-button>
</div>
</template>

43
app/assets/javascripts/pipelines/components/pipeline_url.vue
View file

@ -1,14 +1,15 @@
<script>
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import tooltip from '../../vue_shared/directives/tooltip';
import popover from '../../vue_shared/directives/popover';
import { GlLink, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import popover from '~/vue_shared/directives/popover';
export default {
components: {
userAvatarLink,
UserAvatarLink,
GlLink,
},
directives: {
tooltip,
GlTooltip: GlTooltipDirective,
popover,
},
props: {
@ -47,11 +48,12 @@ export default {
</script>
<template>
<div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
<a
<gl-link
:href="pipeline.path"
class="js-pipeline-url-link">
class="js-pipeline-url-link"
>
<span class="pipeline-id">#{{ pipeline.id }}</span>
</a>
</gl-link>
<span>by</span>
<user-avatar-link
v-if="user"
@ -68,36 +70,41 @@ export default {
<div class="label-container">
<span
v-if="pipeline.flags.latest"
v-tooltip
v-gl-tooltip
class="js-pipeline-url-latest badge badge-success"
title="Latest pipeline for this branch">
title="Latest pipeline for this branch"
>
latest
</span>
<span
v-if="pipeline.flags.yaml_errors"
v-tooltip
v-gl-tooltip
:title="pipeline.yaml_errors"
class="js-pipeline-url-yaml badge badge-danger">
class="js-pipeline-url-yaml badge badge-danger"
>
yaml invalid
</span>
<span
v-if="pipeline.flags.failure_reason"
v-tooltip
v-gl-tooltip
:title="pipeline.failure_reason"
class="js-pipeline-url-failure badge badge-danger">
class="js-pipeline-url-failure badge badge-danger"
>
error
</span>
<a
<gl-link
v-if="pipeline.flags.auto_devops"
v-popover="popoverOptions"
tabindex="0"
class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
role="button">
role="button"
>
Auto DevOps
</a>
</gl-link>
<span
v-if="pipeline.flags.stuck"
class="js-pipeline-url-stuck badge badge-warning">
class="js-pipeline-url-stuck badge badge-warning"
>
stuck
</span>
</div>

21
app/assets/javascripts/pipelines/components/pipelines_actions.vue
View file

@ -1,18 +1,18 @@
<script>
import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
import { s__, sprintf } from '~/locale';
import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
import eventHub from '../event_hub';
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 {
directives: {
tooltip,
GlTooltip: GlTooltipDirective,
},
components: {
Icon,
GlCountdown,
GlButton,
GlLoadingIcon,
},
props: {
@ -59,14 +59,12 @@ export default {
</script>
<template>
<div class="btn-group">
<button
v-tooltip
<gl-button
v-gl-tooltip
:disabled="isLoading"
type="button"
class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
title="Manual job"
data-toggle="dropdown"
data-placement="top"
aria-label="Manual job"
>
<icon
@ -78,17 +76,16 @@ export default {
aria-hidden="true">
</i>
<gl-loading-icon v-if="isLoading" />
</button>
</gl-button>
<ul class="dropdown-menu dropdown-menu-right">
<li
v-for="action in actions"
:key="action.path"
>
<button
<gl-button
:class="{ disabled: isActionDisabled(action) }"
:disabled="isActionDisabled(action)"
type="button"
class="js-pipeline-action-link no-btn btn"
@click="onClickAction(action)"
>
@ -100,7 +97,7 @@ export default {
<icon name="clock" />
<gl-countdown :end-date-string="action.scheduled_at" />
</span>
</button>
</gl-button>
</li>
</ul>
</div>

24
app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
View file

@ -1,13 +1,15 @@
<script>
import tooltip from '../../vue_shared/directives/tooltip';
import Icon from '../../vue_shared/components/icon.vue';
import { GlLink, GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue';
export default {
directives: {
tooltip,
GlTooltip: GlTooltipDirective,
},
components: {
Icon,
GlLink,
GlButton,
},
props: {
artifacts: {
@ -22,11 +24,10 @@ export default {
class="btn-group"
role="group"
>
<button
v-tooltip
class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download"
<gl-button
v-gl-tooltip
class="dropdown-toggle build-artifacts js-pipeline-dropdown-download"
title="Artifacts"
data-placement="top"
data-toggle="dropdown"
aria-label="Artifacts"
>
@ -36,18 +37,19 @@ export default {
aria-hidden="true"
>
</i>
</button>
</gl-button>
<ul class="dropdown-menu dropdown-menu-right">
<li
v-for="(artifact, i) in artifacts"
:key="i">
<a
:key="i"
>
<gl-link
:href="artifact.path"
rel="nofollow"
download
>
Download {{ artifact.name }} artifacts
</a>
</gl-link>
</li>
</ul>
</div>

5
changelogs/unreleased/51259-ci-cd-gitlab-ui-1.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Uses new gitlab-ui components in Jobs and Pipelines components
merge_request:
author:
type: other