diff options
author | Phil Hughes <me@iamphill.com> | 2018-06-01 14:59:56 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-06-06 10:33:03 +0300 |
commit | 9827f3db10fc46d902f6670c183c09661ea5da07 (patch) | |
tree | db2ec81ce707eb4c8de860bcd5c275440c33ce0c | |
parent | e59d9a0c09d4ab3543015a9ca8a8012dc7faad03 (diff) |
moved fetching trace to store
improved components by making them unaware of the store
removed need for extra CSS - all achieved with BS classes
9 files changed, 87 insertions, 98 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue index 330d2a08eec..bacf08c5b5c 100644 --- a/app/assets/javascripts/ide/components/jobs/detail.vue +++ b/app/assets/javascripts/ide/components/jobs/detail.vue @@ -1,14 +1,13 @@ <script> -import { mapState } from 'vuex'; +import { mapActions, mapState } from 'vuex'; import _ from 'underscore'; -import axios from '../../../lib/utils/axios_utils'; import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import tooltip from '../../../vue_shared/directives/tooltip'; import Icon from '../../../vue_shared/components/icon.vue'; const scrollPositions = { - top: 'top', - bottom: 'bottom', + top: 0, + bottom: 1, }; export default { @@ -22,14 +21,10 @@ export default { data() { return { scrollPos: scrollPositions.top, - loading: true, }; }, computed: { ...mapState('pipelines', ['detailJob']), - rawUrl() { - return `${this.detailJob.path}/raw`; - }, isScrolledToBottom() { return this.scrollPos === scrollPositions.bottom; }, @@ -43,10 +38,8 @@ export default { mounted() { this.getTrace(); }, - beforeDestroy() { - clearTimeout(this.timeout); - }, methods: { + ...mapActions('pipelines', ['fetchJobTrace', 'setDetailJob']), scrollDown() { this.$refs.buildTrace.scrollTo(0, this.$refs.buildTrace.scrollHeight); }, @@ -66,37 +59,19 @@ export default { this.scrollPos = ''; } }), - getTrace(state = null) { - return axios - .get(`${this.detailJob.path}/trace`, { - params: { - state, - }, - }) - .then(({ data }) => { - this.loading = !data.complete; - this.detailJob.output = data.append ? `${this.detailJob.output}${data.html}` : data.html; - - if (!data.complete) { - this.timeout = setTimeout(() => this.getTrace(data.state), 4000); - } - }) - .then(() => this.$nextTick()) - .then(() => this.scrollDown()); + getTrace() { + return this.fetchJobTrace().then(() => this.scrollDown()); }, }, - scrollPositions, }; </script> <template> - <div class="ide-pipeline build-page"> - <header - class="ide-tree-header ide-pipeline-header" - > + <div class="ide-pipeline build-page d-flex flex-column flex-fill"> + <header class="ide-tree-header ide-pipeline-header"> <button - class="btn btn-default btn-sm" - @click="() => { $store.state.pipelines.detailJob = null; $store.dispatch('setRightPane', 'pipelines-list') }" + class="btn btn-default btn-sm d-flex" + @click="setDetailJob(null)" > <icon name="chevron-left" @@ -104,37 +79,37 @@ export default { {{ __('View jobs') }} </button> </header> - <div - class="top-bar" - > - <div class="ide-job-details float-left"> + <div class="top-bar d-flex"> + <div class="ide-job-details d-flex align-items-center"> <ci-icon - class="append-right-4" + class="append-right-4 d-flex" :status="detailJob.status" :borderless="true" :size="24" /> - {{ detailJob.name }} - <a - :href="detailJob.path" - target="_blank" - class="ide-external-link prepend-left-4" - > - {{ jobId }} - <icon - name="external-link" - :size="12" - /> - </a> + <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 float-right"> + <div class="controllers ml-auto"> <a v-tooltip :title="__('Show complete raw')" data-placement="top" data-container="body" class="controllers-buttons" - :href="rawUrl" + :href="detailJob.rawPath" target="_blank" > <i @@ -155,9 +130,7 @@ export default { :disabled="isScrolledToTop" @click="scrollUp" > - <icon - name="scroll_up" - /> + <icon name="scroll_up" /> </button> </div> <div @@ -173,51 +146,26 @@ export default { :disabled="isScrolledToBottom" @click="scrollDown" > - <icon - name="scroll_down" - /> + <icon name="scroll_down" /> </button> </div> </div> </div> <pre - class="build-trace" + class="build-trace mb-0" ref="buildTrace" @scroll="scrollBuildLog" > <code class="bash" v-html="detailJob.output" - ></code> + > + </code> <div - v-show="loading" + v-show="detailJob.isLoading" class="build-loader-animation" > </div> </pre> </div> </template> - -<style scoped> -.build-trace-container { - flex: 1; - display: flex; - flex-direction: column; -} - -.ide-tree-header .btn { - display: flex; -} - -.ide-job-details { - display: flex; -} - -.ide-job-details .ci-status-icon { - height: 0; -} - -.build-trace { - margin-bottom: 0; -} -</style> diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue index 0baeb4bb04f..597b65fa392 100644 --- a/app/assets/javascripts/ide/components/jobs/item.vue +++ b/app/assets/javascripts/ide/components/jobs/item.vue @@ -18,6 +18,11 @@ export default { return `#${this.job.id}`; }, }, + methods: { + clickViewLog() { + this.$emit('clickViewLog', this.job); + }, + }, }; </script> @@ -43,16 +48,10 @@ export default { </a> </span> <button - class="btn btn-default btn-sm" - @click="() => { $store.state.pipelines.detailJob = job; $store.dispatch('setRightPane', 'jobs-detail') }" + class="btn btn-default btn-sm ml-auto" + @click="clickViewLog" > {{ __('View log') }} </button> </div> </template> - -<style scoped> -.btn { - margin-left: auto; -} -</style> diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue index bdd0364c9b9..3b16b860ecd 100644 --- a/app/assets/javascripts/ide/components/jobs/list.vue +++ b/app/assets/javascripts/ide/components/jobs/list.vue @@ -19,7 +19,7 @@ export default { }, }, methods: { - ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']), + ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed', 'setDetailJob']), }, }; </script> @@ -38,6 +38,7 @@ export default { :stage="stage" @fetch="fetchJobs" @toggleCollapsed="toggleStageCollapsed" + @clickViewLog="setDetailJob" /> </template> </div> diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 5b24bb1f5a7..b1428f885fb 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -48,6 +48,9 @@ export default { toggleCollapsed() { this.$emit('toggleCollapsed', this.stage.id); }, + clickViewLog(job) { + this.$emit('clickViewLog', job); + }, }, }; </script> @@ -101,6 +104,7 @@ export default { v-for="job in stage.jobs" :key="job.id" :job="job" + @clickViewLog="clickViewLog" /> </template> </div> diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js index b112bc0e1ac..deb84212fc3 100644 --- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js +++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js @@ -4,6 +4,7 @@ import { __ } from '../../../../locale'; import flash from '../../../../flash'; import Poll from '../../../../lib/utils/poll'; import service from '../../../services'; +import { rightSidebarViews } from '../../../constants'; import * as types from './mutation_types'; let eTagPoll; @@ -77,6 +78,25 @@ export const fetchJobs = ({ dispatch }, stage) => { export const toggleStageCollapsed = ({ commit }, stageId) => commit(types.TOGGLE_STAGE_COLLAPSE, stageId); -export const setDetailJob = ({ commit }, job) => commit(types.SET_DETAIL_JOB, job); +export const setDetailJob = ({ commit, dispatch }, job) => { + commit(types.SET_DETAIL_JOB, job); + dispatch('setRightPane', job ? rightSidebarViews.jobsDetail : rightSidebarViews.pipelines, { + root: true, + }); +}; + +export const requestJobTrace = ({ commit }) => commit(types.REQUEST_JOB_TRACE); +export const receiveJobTraceError = ({ commit }) => commit(types.RECEIVE_JOB_TRACE_ERROR); +export const receiveJobTraceSuccess = ({ commit }, data) => + commit(types.RECEIVE_JOB_TRACE_SUCCESS, data); + +export const fetchJobTrace = ({ dispatch, state }) => { + dispatch('requestJobTrace'); + + return axios + .get(`${state.detailJob.path}/trace`, { params: { format: 'json' } }) + .then(({ data }) => dispatch('receiveJobTraceSuccess', data)) + .catch(() => dispatch('requestJobTraceError')); +}; export default () => {}; diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js index d95ce7c7440..f4c36b9d96f 100644 --- a/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js +++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js @@ -9,3 +9,7 @@ export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS'; export const TOGGLE_STAGE_COLLAPSE = 'TOGGLE_STAGE_COLLAPSE'; export const SET_DETAIL_JOB = 'SET_DETAIL_JOB'; + +export const REQUEST_JOB_TRACE = 'REQUEST_JOB_TRACE'; +export const RECEIVE_JOB_TRACE_ERROR = 'RECEIVE_JOB_TRACE_ERROR'; +export const RECEIVE_JOB_TRACE_SUCCESS = 'RECEIVE_JOB_TRACE_SUCCESS'; diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js index bb49af1f45b..5a2213bbe89 100644 --- a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js +++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js @@ -64,6 +64,16 @@ export default { })); }, [types.SET_DETAIL_JOB](state, job) { - state.detailJob = job; + state.detailJob = { ...job }; + }, + [types.REQUEST_JOB_TRACE](state) { + state.detailJob.isLoading = true; + }, + [types.RECEIVE_JOB_TRACE_ERROR](state) { + state.detailJob.isLoading = false; + }, + [types.RECEIVE_JOB_TRACE_SUCCESS](state, data) { + state.detailJob.isLoading = false; + state.detailJob.output = data.html; }, }; diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/utils.js b/app/assets/javascripts/ide/stores/modules/pipelines/utils.js index 4ee030731e3..a6caca2d2dc 100644 --- a/app/assets/javascripts/ide/stores/modules/pipelines/utils.js +++ b/app/assets/javascripts/ide/stores/modules/pipelines/utils.js @@ -4,6 +4,8 @@ export const normalizeJob = job => ({ name: job.name, status: job.status, path: job.build_path, + rawPath: `${job.build_path}/raw`, started: job.started, output: '', + isLoading: false, }); diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 9ee02ca1d83..9213ccd4cdf 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -75,6 +75,7 @@ .top-bar { height: 35px; + min-height: 35px; background: $gray-light; border: 1px solid $border-color; color: $gl-text-color; |