diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-22 11:31:16 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-22 11:31:16 +0000 |
commit | 905c1110b08f93a19661cf42a276c7ea90d0a0ff (patch) | |
tree | 756d138db422392c00471ab06acdff92c5a9b69c /app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue | |
parent | 50d93f8d1686950fc58dda4823c4835fd0d8c14b (diff) | |
download | gitlab-ce-905c1110b08f93a19661cf42a276c7ea90d0a0ff.tar.gz |
Add latest changes from gitlab-org/gitlab@12-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue new file mode 100644 index 00000000000..4e7d77863b9 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -0,0 +1,65 @@ +<script> +import { GlLoadingIcon, GlTooltipDirective, GlButton } from '@gitlab/ui'; +import CiStatus from '~/vue_shared/components/ci_icon.vue'; + +export default { + directives: { + GlTooltip: GlTooltipDirective, + }, + components: { + CiStatus, + GlLoadingIcon, + GlButton, + }, + props: { + pipeline: { + type: Object, + required: true, + }, + }, + computed: { + tooltipText() { + return `${this.projectName} - ${this.pipelineStatus.label}`; + }, + buttonId() { + return `js-linked-pipeline-${this.pipeline.id}`; + }, + pipelineStatus() { + return this.pipeline.details.status; + }, + projectName() { + return this.pipeline.project.name; + }, + }, + methods: { + onClickLinkedPipeline() { + this.$root.$emit('bv::hide::tooltip', this.buttonId); + this.$emit('pipelineClicked'); + }, + }, +}; +</script> + +<template> + <li class="linked-pipeline build"> + <div class="curve"></div> + <gl-button + :id="buttonId" + v-gl-tooltip + :title="tooltipText" + class="js-linked-pipeline-content linked-pipeline-content" + data-qa-selector="linked_pipeline_button" + :class="`js-pipeline-expand-${pipeline.id}`" + @click="onClickLinkedPipeline" + > + <gl-loading-icon v-if="pipeline.isLoading" class="js-linked-pipeline-loading d-inline" /> + <ci-status + v-else + :status="pipelineStatus" + css-classes="position-top-0" + class="js-linked-pipeline-status" + /> + <span class="str-truncated align-bottom"> {{ projectName }} • #{{ pipeline.id }} </span> + </gl-button> + </li> +</template> |