summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2018-05-25 17:16:57 +0100
committerPhil Hughes <me@iamphill.com>2018-05-25 17:16:57 +0100
commitaf42fa2364254b2c1042b431549b07b275e3cf0e (patch)
treef5156f854ed0f311a117ddd1ffe13a8b57330aa0 /app
parentf59b9778d97235aaedf1248a8304da33d7edd4eb (diff)
downloadgitlab-ce-af42fa2364254b2c1042b431549b07b275e3cf0e.tar.gz
added external link icon
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/ide/components/jobs/item.vue9
-rw-r--r--app/assets/javascripts/ide/components/pipelines/list.vue17
-rw-r--r--app/assets/javascripts/ide/stores/modules/pipelines/getters.js3
-rw-r--r--app/assets/stylesheets/pages/repo.scss13
4 files changed, 38 insertions, 4 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index 7e9c42860ed..42b06945539 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -1,8 +1,10 @@
<script>
+import Icon from '../../../vue_shared/components/icon.vue';
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
export default {
components: {
+ Icon,
CiIcon,
},
props: {
@@ -31,8 +33,13 @@ export default {
<a
:href="job.path"
target="_blank"
- v-text="jobId"
+ class="ide-external-link"
>
+ {{ jobId }}
+ <icon
+ name="external-link"
+ :size="12"
+ />
</a>
</span>
</div>
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index da5220248e3..6aacf9201b8 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -1,6 +1,7 @@
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Icon from '../../../vue_shared/components/icon.vue';
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import Tabs from '../../../vue_shared/components/tabs/tabs';
import Tab from '../../../vue_shared/components/tabs/tab.vue';
@@ -9,13 +10,14 @@ import JobsList from '../jobs/list.vue';
export default {
components: {
LoadingIcon,
+ Icon,
CiIcon,
Tabs,
Tab,
JobsList,
},
computed: {
- ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages']),
+ ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']),
...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline', 'stages', 'isLoadingJobs']),
},
created() {
@@ -49,13 +51,20 @@ export default {
<a
:href="latestPipeline.path"
target="_blank"
+ class="ide-external-link"
>
#{{ latestPipeline.id }}
+ <icon
+ name="external-link"
+ :size="12"
+ />
</a>
</span>
</header>
<tabs>
- <tab active>
+ <tab
+ :active="!pipelineFailed"
+ >
<template slot="title">
Jobs
<span
@@ -70,7 +79,9 @@ export default {
:stages="stages"
/>
</tab>
- <tab>
+ <tab
+ :active="pipelineFailed"
+ >
<template slot="title">
Failed Jobs
<span
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/getters.js b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
index 95bed0f9050..fea77b661b5 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
@@ -1,5 +1,8 @@
export const hasLatestPipeline = state => !state.isLoadingPipeline && !!state.latestPipeline;
+export const pipelineFailed = state =>
+ state.latestPipeline && state.latestPipeline.details.status.text === 'failed';
+
export const failedStages = state =>
state.stages.filter(stage => stage.status.text === 'failed').map(stage => ({
...stage,
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 4f0259e9105..0c6e3d42f6b 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1135,3 +1135,16 @@
white-space: nowrap;
}
}
+
+.ide-external-link {
+ svg {
+ display: none;
+ }
+
+ &:hover,
+ &:focus {
+ svg {
+ display: inline-block;
+ }
+ }
+}