Commit fd972f9f authored by Filipa Lacerda's avatar Filipa Lacerda

Render json endpoint

parent 6ef83d06
...@@ -82,7 +82,8 @@ export default { ...@@ -82,7 +82,8 @@ export default {
data-toggle="dropdown" data-toggle="dropdown"
data-container="body" data-container="body"
class="dropdown-menu-toggle build-content" class="dropdown-menu-toggle build-content"
:title="tooltipText"> :title="tooltipText"
>
<job-name-component <job-name-component
:name="job.name" :name="job.name"
...@@ -99,10 +100,10 @@ export default { ...@@ -99,10 +100,10 @@ export default {
<ul> <ul>
<li <li
v-for="(item, i) in job.jobs" v-for="(item, i) in job.jobs"
:key="i"> :key="i"
>
<job-component <job-component
:job="item" :job="item"
:is-dropdown="true"
css-class-job-name="mini-pipeline-graph-dropdown-item" css-class-job-name="mini-pipeline-graph-dropdown-item"
/> />
</li> </li>
......
...@@ -48,12 +48,6 @@ export default { ...@@ -48,12 +48,6 @@ export default {
required: false, required: false,
default: '', default: '',
}, },
isDropdown: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { computed: {
......
<script> <script>
/** /**
* Renders each stage of the pipeline mini graph. * Renders each stage of the pipeline mini graph.
* *
...@@ -19,12 +18,14 @@ ...@@ -19,12 +18,14 @@
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
import LoadingIcon from '../../vue_shared/components/loading_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'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
LoadingIcon, LoadingIcon,
Icon, Icon,
JobComponent,
}, },
directives: { directives: {
...@@ -53,7 +54,9 @@ ...@@ -53,7 +54,9 @@
computed: { computed: {
dropdownClass() { 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() { triggerButtonClass() {
...@@ -67,9 +70,7 @@ ...@@ -67,9 +70,7 @@
watch: { watch: {
updateDropdown() { updateDropdown() {
if (this.updateDropdown && if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
this.isDropdownOpen() &&
!this.isLoading) {
this.fetchJobs(); this.fetchJobs();
} }
}, },
...@@ -91,9 +92,132 @@ ...@@ -91,9 +92,132 @@
}, },
fetchJobs() { fetchJobs() {
axios.get(this.stage.dropdown_path) axios
.get(this.stage.dropdown_path)
.then(({ data }) => { .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; this.isLoading = false;
}) })
.catch(() => { .catch(() => {
...@@ -113,8 +237,9 @@ ...@@ -113,8 +237,9 @@
* target the click event of this component. * target the click event of this component.
*/ */
stopDropdownClickPropagation() { stopDropdownClickPropagation() {
$(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')) $(
.on('click', (e) => { this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'),
).on('click', e => {
e.stopPropagation(); e.stopPropagation();
}); });
}, },
...@@ -168,7 +293,6 @@ ...@@ -168,7 +293,6 @@
> >
<li <li
:class="dropdownClass"
class="js-builds-dropdown-list scrollable-menu" class="js-builds-dropdown-list scrollable-menu"
> >
...@@ -176,8 +300,16 @@ ...@@ -176,8 +300,16 @@
<ul <ul
v-else 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> </ul>
</li> </li>
</ul> </ul>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment