root
/
gitlab-ce
mirror of https://gitlab.com/free-releases/gitlab-ce.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Render json endpoint

This commit is contained in:
Filipa Lacerda 2018-04-19 09:14:56 +01:00
parent 6ef83d065e
commit fd972f9fd7
No known key found for this signature in database
GPG Key ID: 9CA3FDE4D1E2F1C8
3 changed files with 149 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
View File

@ -82,7 +82,8 @@ export default {
data-toggle="dropdown"
data-container="body"
class="dropdown-menu-toggle build-content"
:title="tooltipText">
:title="tooltipText"
>
<job-name-component
:name="job.name"
@ -99,10 +100,10 @@ export default {
<ul>
<li
v-for="(item, i) in job.jobs"
:key="i">
:key="i"
>
<job-component
:job="item"
:is-dropdown="true"
css-class-job-name="mini-pipeline-graph-dropdown-item"
/>
</li>

6
app/assets/javascripts/pipelines/components/graph/job_component.vue
View File

@ -48,12 +48,6 @@ export default {
required: false,
default: '',
},
isDropdown: {
type: Boolean,
required: false,
default: false,
},
},
computed: {

158
app/assets/javascripts/pipelines/components/stage.vue
View File

@ -1,5 +1,4 @@
<script>
/**
* Renders each stage of the pipeline mini graph.
*
@ -19,12 +18,14 @@
import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import JobComponent from './graph/job_component.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default {
components: {
LoadingIcon,
Icon,
JobComponent,
},
directives: {
@ -53,7 +54,9 @@
computed: {
dropdownClass() {
return this.dropdownContent.length > 0 ? 'js-builds-dropdown-container' : 'js-builds-dropdown-loading';
// return this.dropdownContent.length > 0
// ? 'js-builds-dropdown-container'
// : 'js-builds-dropdown-loading';
},
triggerButtonClass() {
@ -67,9 +70,7 @@
watch: {
updateDropdown() {
if (this.updateDropdown &&
this.isDropdownOpen() &&
!this.isLoading) {
if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
this.fetchJobs();
}
},
@ -91,9 +92,132 @@
},
fetchJobs() {
axios.get(this.stage.dropdown_path)
axios
.get(this.stage.dropdown_path)
.then(({ data }) => {
this.dropdownContent = data.html;
this.dropdownContent = [
{
id: 966,
name: 'rspec:linux 0 3',
started: false,
build_path: '/twitter/flight/-/jobs/966',
cancel_path: '/twitter/flight/-/jobs/966/cancel',
playable: false,
created_at: '2018-04-18T12:10:14.315Z',
updated_at: '2018-04-18T12:10:14.500Z',
status: {
icon: 'status_pending',
text: 'pending',
label: 'pending',
group: 'pending',
tooltip: 'pending',
has_details: true,
details_path: '/twitter/flight/-/jobs/966',
favicon:
'/assets/ci_favicons/dev/favicon_status_pending-db32e1faf94b9f89530ac519790920d1f18ea8f6af6cd2e0a26cd6840cacf101.ico',
action: {
icon: 'cancel',
title: 'Cancel',
path: '/twitter/flight/-/jobs/966/cancel',
method: 'post',
},
},
},
{
id: 208,
name: 'rspec:linux 1 3',
started: '2018-03-07T06:41:46.233Z',
build_path: '/twitter/flight/-/jobs/208',
retry_path: '/twitter/flight/-/jobs/208/retry',
playable: false,
created_at: '2018-03-07T14:41:57.559Z',
updated_at: '2018-03-07T14:41:57.559Z',
status: {
icon: 'status_success',
text: 'passed',
label: 'passed',
group: 'success',
tooltip: 'passed',
has_details: true,
details_path: '/twitter/flight/-/jobs/208',
favicon:
'/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
action: {
icon: 'retry',
title: 'Retry',
path: '/twitter/flight/-/jobs/208/retry',
method: 'post',
},
},
},
{
id: 209,
name: 'rspec:linux 2 3',
started: '2018-03-07T06:41:46.233Z',
build_path: '/twitter/flight/-/jobs/209',
retry_path: '/twitter/flight/-/jobs/209/retry',
playable: false,
created_at: '2018-03-07T14:41:57.605Z',
updated_at: '2018-03-07T14:41:57.605Z',
status: {
icon: 'status_success',
text: 'passed',
label: 'passed',
group: 'success',
tooltip: 'passed',
has_details: true,
details_path: '/twitter/flight/-/jobs/209',
favicon:
'/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
action: {
icon: 'retry',
title: 'Retry',
path: '/twitter/flight/-/jobs/209/retry',
method: 'post',
},
},
},
{
id: 63701097,
name: 'spinach-mysql 0 2',
started: false,
build_path: '/gitlab-org/gitlab-ce/-/jobs/63701097',
playable: false,
created_at: '2018-04-18T15:16:52.707Z',
updated_at: '2018-04-18T15:16:52.707Z',
status: {
icon: 'status_created',
text: 'created',
label: 'created',
group: 'created',
tooltip: 'created',
has_details: true,
details_path: '/gitlab-org/gitlab-ce/-/jobs/63701097',
favicon:
'https://assets.gitlab-static.net/assets/ci_favicons/favicon_status_created-e997aa0b7db73165df8a9d6803932b18d7b7cc37d604d2d96e378fea2dba9c5f.ico',
},
},
{
id: 63701098,
name: 'spinach-mysql 1 2',
started: false,
build_path: '/gitlab-org/gitlab-ce/-/jobs/63701098',
playable: false,
created_at: '2018-04-18T15:16:52.808Z',
updated_at: '2018-04-18T15:16:52.808Z',
status: {
icon: 'status_created',
text: 'created',
label: 'created',
group: 'created',
tooltip: 'created',
has_details: true,
details_path: '/gitlab-org/gitlab-ce/-/jobs/63701098',
favicon:
'https://assets.gitlab-static.net/assets/ci_favicons/favicon_status_created-e997aa0b7db73165df8a9d6803932b18d7b7cc37d604d2d96e378fea2dba9c5f.ico',
},
},
];
this.isLoading = false;
})
.catch(() => {
@ -113,10 +237,11 @@
* target the click event of this component.
*/
stopDropdownClickPropagation() {
$(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'))
.on('click', (e) => {
e.stopPropagation();
});
$(
this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'),
).on('click', e => {
e.stopPropagation();
});
},
closeDropdown() {
@ -168,7 +293,6 @@
>
<li
:class="dropdownClass"
class="js-builds-dropdown-list scrollable-menu"
>
@ -176,8 +300,16 @@
<ul
v-else
v-html="dropdownContent"
>
<li
v-for="job in dropdownContent"
:key="job.id"
>
<job-component
:job="job"
css-class-job-name="mini-pipeline-graph-dropdown-item"
/>
</li>
</ul>
</li>
</ul>