Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2018-06-01 14:59:56 +0300
committerPhil Hughes <me@iamphill.com>2018-06-06 10:33:03 +0300
commit9827f3db10fc46d902f6670c183c09661ea5da07 (patch)
treedb2ec81ce707eb4c8de860bcd5c275440c33ce0c
parente59d9a0c09d4ab3543015a9ca8a8012dc7faad03 (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
-rw-r--r--app/assets/javascripts/ide/components/jobs/detail.vue122
-rw-r--r--app/assets/javascripts/ide/components/jobs/item.vue15
-rw-r--r--app/assets/javascripts/ide/components/jobs/list.vue3
-rw-r--r--app/assets/javascripts/ide/components/jobs/stage.vue4
-rw-r--r--app/assets/javascripts/ide/stores/modules/pipelines/actions.js22
-rw-r--r--app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js4
-rw-r--r--app/assets/javascripts/ide/stores/modules/pipelines/mutations.js12
-rw-r--r--app/assets/javascripts/ide/stores/modules/pipelines/utils.js2
-rw-r--r--app/assets/stylesheets/pages/builds.scss1
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;