reduced duplication of job details
This commit is contained in:
parent
9827f3db10
commit
1d43689e5a
|
@ -1,9 +1,10 @@
|
|||
<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"
|
||||
/>
|
||||
<span>
|
||||
{{ detailJob.name }}
|
||||
<a
|
||||
:href="detailJob.path"
|
||||
target="_blank"
|
||||
class="ide-external-link"
|
||||
>
|
||||
{{ jobId }}
|
||||
<icon
|
||||
name="external-link"
|
||||
:size="12"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<job-description
|
||||
:job="detailJob"
|
||||
/>
|
||||
<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"
|
||||
: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"
|
||||
:disabled="isScrolledToBottom"
|
||||
@click="scrollDown"
|
||||
>
|
||||
<icon name="scroll_down" />
|
||||
</button>
|
||||
</div>
|
||||
<scroll-button
|
||||
direction="up"
|
||||
:disabled="isScrolledToTop"
|
||||
@click="scrollUp"
|
||||
/>
|
||||
<scroll-button
|
||||
direction="down"
|
||||
:disabled="isScrolledToBottom"
|
||||
@click="scrollDown"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<pre
|
||||
|
|
|
@ -0,0 +1,47 @@
|
|||
<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>
|
|
@ -0,0 +1,61 @@
|
|||
<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>
|
|
@ -1,11 +1,9 @@
|
|||
<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);
|
||||
|
||||
|
|
Loading…
Reference in New Issue