Commit 1d43689e authored by Phil Hughes's avatar Phil Hughes

reduced duplication of job details

parent 9827f3db
<script>
import { mapActions, mapState } from 'vuex';
import _ from 'underscore';
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import tooltip from '../../../vue_shared/directives/tooltip';
import Icon from '../../../vue_shared/components/icon.vue';
import ScrollButton from './detail/scroll_button.vue';
import JobDescription from './detail/description.vue';
const scrollPositions = {
top: 0,
......@@ -15,8 +16,9 @@ export default {
tooltip,
},
components: {
CiIcon,
Icon,
ScrollButton,
JobDescription,
},
data() {
return {
......@@ -46,7 +48,7 @@ export default {
scrollUp() {
this.$refs.buildTrace.scrollTo(0, 0);
},
scrollBuildLog: _.throttle(function scrollDebounce() {
scrollBuildLog: _.throttle(function buildLogScrollDebounce() {
const scrollTop = this.$refs.buildTrace.scrollTop;
const offsetHeight = this.$refs.buildTrace.offsetHeight;
const scrollHeight = this.$refs.buildTrace.scrollHeight;
......@@ -80,28 +82,9 @@ export default {
</button>
</header>
<div class="top-bar d-flex">
<div class="ide-job-details d-flex align-items-center">
<ci-icon
class="append-right-4 d-flex"
:status="detailJob.status"
:borderless="true"
:size="24"
<job-description
:job="detailJob"
/>
<span>
{{ detailJob.name }}
<a
:href="detailJob.path"
target="_blank"
class="ide-external-link"
>
{{ jobId }}
<icon
name="external-link"
:size="12"
/>
</a>
</span>
</div>
<div class="controllers ml-auto">
<a
v-tooltip
......@@ -117,38 +100,16 @@ export default {
class="fa fa-file-text-o"
></i>
</a>
<div
v-tooltip
class="controllers-buttons"
data-container="body"
data-placement="top"
:title="__('Scroll to top')"
>
<button
class="btn-scroll btn-transparent btn-blank"
type="button"
<scroll-button
direction="up"
:disabled="isScrolledToTop"
@click="scrollUp"
>
<icon name="scroll_up" />
</button>
</div>
<div
v-tooltip
class="controllers-buttons"
data-container="body"
data-placement="top"
:title="__('Scroll to bottom')"
>
<button
class="btn-scroll btn-transparent btn-blank"
type="button"
/>
<scroll-button
direction="down"
:disabled="isScrolledToBottom"
@click="scrollDown"
>
<icon name="scroll_down" />
</button>
</div>
/>
</div>
</div>
<pre
......
<script>
import Icon from '../../../../vue_shared/components/icon.vue';
import CiIcon from '../../../../vue_shared/components/ci_icon.vue';
export default {
components: {
Icon,
CiIcon,
},
props: {
job: {
type: Object,
required: true,
},
},
computed: {
jobId() {
return `#${this.job.id}`;
},
},
};
</script>
<template>
<div class="d-flex align-items-center">
<ci-icon
class="d-flex"
:status="job.status"
:borderless="true"
:size="24"
/>
<span class="prepend-left-8">
{{ job.name }}
<a
:href="job.path"
target="_blank"
class="ide-external-link"
>
{{ jobId }}
<icon
name="external-link"
:size="12"
/>
</a>
</span>
</div>
</template>
<script>
import { __ } from '../../../../locale';
import Icon from '../../../../vue_shared/components/icon.vue';
import tooltip from '../../../../vue_shared/directives/tooltip';
export default {
directives: {
tooltip,
},
components: {
Icon,
},
props: {
direction: {
type: String,
required: true,
validator(value) {
return ['up', 'down'].includes(value);
},
},
disabled: {
type: Boolean,
required: true,
},
},
computed: {
tooltipTitle() {
return this.direction === 'up' ? __('Scroll to top') : __('Scroll to bottom');
},
iconName() {
return `scroll_${this.direction}`;
},
},
methods: {
clickedScroll() {
this.$emit('click');
},
},
};
</script>
<template>
<div
v-tooltip
class="controllers-buttons"
data-container="body"
data-placement="top"
:title="tooltipTitle"
>
<button
class="btn-scroll btn-transparent btn-blank"
type="button"
:disabled="disabled"
@click="clickedScroll"
>
<icon
:name="iconName"
/>
</button>
</div>
</template>
<script>
import Icon from '../../../vue_shared/components/icon.vue';
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import JobDescription from './detail/description.vue';
export default {
components: {
Icon,
CiIcon,
JobDescription,
},
props: {
job: {
......@@ -28,25 +26,9 @@ export default {
<template>
<div class="ide-job-item">
<ci-icon
:status="job.status"
:borderless="true"
:size="24"
<job-description
:job="job"
/>
<span class="prepend-left-8">
{{ job.name }}
<a
:href="job.path"
target="_blank"
class="ide-external-link"
>
{{ jobId }}
<icon
name="external-link"
:size="12"
/>
</a>
</span>
<button
class="btn btn-default btn-sm ml-auto"
@click="clickViewLog"
......
......@@ -86,7 +86,10 @@ export const setDetailJob = ({ commit, dispatch }, job) => {
};
export const requestJobTrace = ({ commit }) => commit(types.REQUEST_JOB_TRACE);
export const receiveJobTraceError = ({ commit }) => commit(types.RECEIVE_JOB_TRACE_ERROR);
export const receiveJobTraceError = ({ commit }) => {
flash(__('Error fetching job trace'));
commit(types.RECEIVE_JOB_TRACE_ERROR);
};
export const receiveJobTraceSuccess = ({ commit }, data) =>
commit(types.RECEIVE_JOB_TRACE_SUCCESS, data);
......
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