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

reduced duplication of job details

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