diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-01-23 21:50:58 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-02-01 18:41:30 +0300 |
commit | 1123d9dc460353cbc3b46606cc2235f0433f35e1 (patch) | |
tree | 04807a5e04d880b37d7841118a868184c375f65d /app/assets | |
parent | 449b0ebaf6f3ca65b48f372293117acc9a7e0abc (diff) |
Added more tests and corrected typos
Diffstat (limited to 'app/assets')
4 files changed, 72 insertions, 52 deletions
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index 4c42fda16d7..55154cdddcb 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -5,7 +5,6 @@ import TreeView from '~/tree'; import BlobViewer from '~/blob/viewer/index'; import Activities from '~/activities'; import { ajaxGet } from '~/lib/utils/common_utils'; -import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue'; import Star from '../../../star'; import notificationsDropdown from '../../../notifications_dropdown'; diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js index f14c3f86687..c4b3356e478 100644 --- a/app/assets/javascripts/pages/projects/tree/show/index.js +++ b/app/assets/javascripts/pages/projects/tree/show/index.js @@ -15,24 +15,23 @@ export default () => { ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath)); const commitPipelineStatusEl = document.getElementById('commit-pipeline-status'); - const $statusLink = $('.ci-status-link'); - if ($statusLink.length > 0) { - $statusLink.remove(); + const statusLink = document.querySelector('.commit-actions .ci-status-link'); + if (statusLink != null) { + statusLink.remove(); + // eslint-disable-next-line no-new + new Vue({ + el: commitPipelineStatusEl, + components: { + commitPipelineStatus, + }, + render(createElement) { + return createElement('commit-pipeline-status', { + props: { + endpoint: commitPipelineStatusEl.dataset.endpoint, + }, + }); + }, + }); } - commitPipelineStatusEl.classList.remove('hidden'); - // eslint-disable-next-line no-new - new Vue({ - el: '#commit-pipeline-status', - components: { - commitPipelineStatus, - }, - render(createElement) { - return createElement('commit-pipeline-status', { - props: { - endpoint: commitPipelineStatusEl.dataset.endpoint, - }, - }); - }, - }); }; diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue index e13acf8555a..63f20a0041d 100644 --- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue +++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue @@ -1,8 +1,10 @@ <script> import Visibility from 'visibilityjs'; import ciIcon from '~/vue_shared/components/ci_icon.vue'; + import loadingIcon from '~/vue_shared/components/loading_icon.vue'; import Poll from '~/lib/utils/poll'; import Flash from '~/flash'; + import { s__, sprintf } from '~/locale'; import tooltip from '~/vue_shared/directives/tooltip'; import CommitPipelineService from '../services/commit_pipeline_service'; @@ -12,46 +14,54 @@ }, components: { ciIcon, + loadingIcon, }, props: { endpoint: { type: String, required: true, }, + /* This prop can be used to replace some of the `render_commit_status` + used across GitLab, this way we could use this vue component and add a + realtime status where it makes sense realtime: { type: Boolean, required: false, default: true, - }, + }, */ }, data() { return { ciStatus: {}, isLoading: true, - service: {}, - stageTitle: '', }; }, + computed: { + statusTitle() { + return sprintf(s__('Commits|Commit: %{commitText}'), { commitText: this.ciStatus.text }); + }, + }, mounted() { this.service = new CommitPipelineService(this.endpoint); - if (this.realtime) { - this.initPolling(); - } else { - this.fetchPipelineCommitData(); - } + this.initPolling(); }, methods: { successCallback(res) { - if (res.data.pipelines.length > 0) { - this.ciStatus = res.data.pipelines[0].details.stages[0].status; - this.stageTitle = res.data.pipelines[0].details.stages[0].title; - this.isLoading = false; - } else { - this.isLoading = true; + const pipelines = res.data.pipelines; + if (pipelines.length > 0) { + // The pipeline entity always keeps the latest pipeline info on the `details.status` + this.ciStatus = pipelines[0].details.status; } + this.isLoading = false; }, - errorCallback(err) { - Flash(err); + errorCallback() { + this.ciStatus = { + text: 'not found', + icon: 'status_notfound', + group: 'notfound', + }; + this.isLoading = false; + Flash(s__('Something went wrong on our end')); }, initPolling() { this.poll = new Poll({ @@ -78,8 +88,8 @@ }, fetchPipelineCommitData() { this.service.fetchData() - .then(this.successCallback) - .catch(this.errorCallback); + .then(this.successCallback) + .catch(this.errorCallback); }, }, destroy() { @@ -88,19 +98,23 @@ }; </script> <template> - <div - v-if="isLoading"> - </div> - <a - v-else - :href="ciStatus.details_path" - > - <ci-icon - v-tooltip - :title="stageTitle" - :aria-label="stageTitle" - data-container="body" - :status="ciStatus" + <div> + <loading-icon + label="Loading pipeline status" + size="3" + v-if="isLoading" /> - </a> + <a + v-else + :href="ciStatus.details_path" + > + <ci-icon + v-tooltip + :title="statusTitle" + :aria-label="statusTitle" + data-container="body" + :status="ciStatus" + /> + </a> + </div> </template> diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index adfd72556b8..17801ed5910 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -196,6 +196,14 @@ @media (min-width: $screen-sm-min) { font-size: 0; + div { + display: inline; + } + + .fa-spinner { + font-size: 12px; + } + span { font-size: 6px; } @@ -226,7 +234,7 @@ .ci-status-icon { position: relative; - top: 3px; + top: 1px; } } |