diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index e704be8b53e5a573d8425bd8b8cbf3412011b564..ad9c600b499c15e92550bf5c11b514822bd9393f 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -46,6 +46,7 @@ export default Vue.component('pipelines-table', {
isLoading: false,
hasError: false,
isMakingRequest: false,
+ updateGraphDropdown: false,
};
},
@@ -130,15 +131,21 @@ export default Vue.component('pipelines-table', {
const pipelines = response.pipelines || response;
this.store.storePipelines(pipelines);
this.isLoading = false;
+ this.updateGraphDropdown = true;
},
errorCallback() {
this.hasError = true;
this.isLoading = false;
+ this.updateGraphDropdown = false;
},
setIsMakingRequest(isMakingRequest) {
this.isMakingRequest = isMakingRequest;
+
+ if (isMakingRequest) {
+ this.updateGraphDropdown = false;
+ }
},
},
@@ -163,7 +170,9 @@ export default Vue.component('pipelines-table', {
v-if="shouldRenderTable">
+ :service="service"
+ :update-graph-dropdown="updateGraphDropdown"
+ />
`,
diff --git a/app/assets/javascripts/pipelines/components/stage.js b/app/assets/javascripts/pipelines/components/stage.js
deleted file mode 100644
index 203485f299047fd03b0b09509753fd4800d27e72..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/pipelines/components/stage.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/* global Flash */
-import StatusIconEntityMap from '../../ci_status_icons';
-
-export default {
- props: {
- stage: {
- type: Object,
- required: true,
- },
- },
-
- data() {
- return {
- builds: '',
- spinner: '',
- };
- },
-
- updated() {
- if (this.builds) {
- this.stopDropdownClickPropagation();
- }
- },
-
- methods: {
- fetchBuilds(e) {
- const ariaExpanded = e.currentTarget.attributes['aria-expanded'];
-
- if (ariaExpanded && (ariaExpanded.textContent === 'true')) return null;
-
- return this.$http.get(this.stage.dropdown_path)
- .then((response) => {
- this.builds = JSON.parse(response.body).html;
- })
- .catch(() => {
- // If dropdown is opened we'll close it.
- if (this.$el.classList.contains('open')) {
- $(this.$refs.dropdown).dropdown('toggle');
- }
-
- const flash = new Flash('Something went wrong on our end.');
- return flash;
- });
- },
-
- /**
- * When the user right clicks or cmd/ctrl + click in the job name
- * the dropdown should not be closed and the link should open in another tab,
- * so we stop propagation of the click event inside the dropdown.
- *
- * Since this component is rendered multiple times per page we need to guarantee we only
- * 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();
- });
- },
- },
- computed: {
- buildsOrSpinner() {
- return this.builds ? this.builds : this.spinner;
- },
- dropdownClass() {
- if (this.builds) return 'js-builds-dropdown-container';
- return 'js-builds-dropdown-loading builds-dropdown-loading';
- },
- buildStatus() {
- return `Build: ${this.stage.status.label}`;
- },
- tooltip() {
- return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
- },
- triggerButtonClass() {
- return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
- },
- svgHTML() {
- return StatusIconEntityMap[this.stage.status.icon];
- },
- },
- template: `
-
-
-
-
- `,
-};
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e485f951a186e4dd88ab5b8142a7cd0531ade03
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -0,0 +1,173 @@
+
+
+
+
+
+
+
+
+
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 93d4818231f76900d1f687b049fd5adeb85dd94d..934bd7deb318de4119c6a1dc88b4b4e646bc431a 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -49,6 +49,7 @@ export default {
isLoading: false,
hasError: false,
isMakingRequest: false,
+ updateGraphDropdown: false,
};
},
@@ -198,15 +199,21 @@ export default {
this.store.storePagination(response.headers);
this.isLoading = false;
+ this.updateGraphDropdown = true;
},
errorCallback() {
this.hasError = true;
this.isLoading = false;
+ this.updateGraphDropdown = false;
},
setIsMakingRequest(isMakingRequest) {
this.isMakingRequest = isMakingRequest;
+
+ if (isMakingRequest) {
+ this.updateGraphDropdown = false;
+ }
},
},
@@ -263,7 +270,9 @@ export default {
+ :service="service"
+ :update-graph-dropdown="updateGraphDropdown"
+ />
([]),
},
service: {
type: Object,
required: true,
},
+
+ updateGraphDropdown: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
components: {
@@ -40,7 +45,9 @@ export default {
v-bind:model="model">
+ :service="service"
+ :update-graph-dropdown="updateGraphDropdown"
+ />
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index 79806bc720468997a0fe726838f72b92c2e82b11..fbae85c85f65592ee76435c9de35ac90e3b56773 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -3,7 +3,7 @@ import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
import PipelinesStatusComponent from '../../pipelines/components/status';
-import PipelinesStageComponent from '../../pipelines/components/stage';
+import PipelinesStageComponent from '../../pipelines/components/stage.vue';
import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
import CommitComponent from './commit';
@@ -24,6 +24,12 @@ export default {
type: Object,
required: true,
},
+
+ updateGraphDropdown: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
components: {
@@ -213,7 +219,10 @@ export default {
-
+
+
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a4fe652b52fa656825dcd2e4d4ce31e6beb8d3ac..9115d26c77960bae46a7b686e2d7f47a4ee87053 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -781,16 +781,11 @@
}
.scrollable-menu {
+ padding: 0;
max-height: 245px;
overflow: auto;
}
- // Loading icon
- .builds-dropdown-loading {
- margin: 0 auto;
- width: 20px;
- }
-
// Action icon on the right
a.ci-action-icon-wrapper {
color: $action-icon-color;
@@ -893,30 +888,29 @@
* Top arrow in the dropdown in the mini pipeline graph
*/
.mini-pipeline-graph-dropdown-menu {
- .arrow-up {
- &::before,
- &::after {
- content: '';
- display: inline-block;
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: -6px;
- left: 2px;
- border-width: 0 5px 6px;
- }
- &::before {
- border-width: 0 5px 5px;
- border-bottom-color: $border-color;
- }
+ &::before,
+ &::after {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ top: -6px;
+ left: 2px;
+ border-width: 0 5px 6px;
+ }
- &::after {
- margin-top: 1px;
- border-bottom-color: $white-light;
- }
+ &::before {
+ border-width: 0 5px 5px;
+ border-bottom-color: $border-color;
+ }
+
+ &::after {
+ margin-top: 1px;
+ border-bottom-color: $white-light;
}
}
diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml
index b0778653d4e67b450afddd4976d2c6810671e83e..07970ad9cba7b16cefb7a5cc53160dffd517c971 100644
--- a/app/views/shared/_mini_pipeline_graph.html.haml
+++ b/app/views/shared/_mini_pipeline_graph.html.haml
@@ -11,8 +11,8 @@
= icon('caret-down')
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
- .arrow-up
- .js-builds-dropdown-list.scrollable-menu
+ %li.js-builds-dropdown-list.scrollable-menu
- .js-builds-dropdown-loading.builds-dropdown-loading.hidden
- %span.fa.fa-spinner.fa-spin
+ %li.js-builds-dropdown-loading.hidden
+ .text-center
+ %i.fa.fa-spinner.fa-spin{ 'aria-hidden': 'true', 'aria-label': 'Loading' }
diff --git a/changelogs/unreleased/31558-job-dropdown.yml b/changelogs/unreleased/31558-job-dropdown.yml
new file mode 100644
index 0000000000000000000000000000000000000000..acd7b2addb604da64c4ee158942c5d7d675f2b0c
--- /dev/null
+++ b/changelogs/unreleased/31558-job-dropdown.yml
@@ -0,0 +1,4 @@
+---
+title: Job dropdown of pipeline mini graph updates in realtime when its opened
+merge_request:
+author:
diff --git a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
index 29370b974af704058253c02a70b356f6e305678c..b532b48a95b23b9d4b6949342380a2036bd41bf6 100644
--- a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
+++ b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
@@ -3,7 +3,7 @@
Dropdown
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
- .js-builds-dropdown-list.scrollable-menu
+ %li.js-builds-dropdown-list.scrollable-menu
- .js-builds-dropdown-loading.builds-dropdown-loading.hidden
- %span.fa.fa-spinner.fa-spin
+ %li.js-builds-dropdown-loading.hidden
+ %span.fa.fa-spinner
diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js
index 2f1154bd9995a5cc89b3436a957ce2367572977a..a4f32a1faed20bc5919abae8b0d7f0440fc20cd8 100644
--- a/spec/javascripts/pipelines/stage_spec.js
+++ b/spec/javascripts/pipelines/stage_spec.js
@@ -1,81 +1,86 @@
import Vue from 'vue';
-import { SUCCESS_SVG } from '~/ci_status_icons';
-import Stage from '~/pipelines/components/stage';
+import stage from '~/pipelines/components/stage.vue';
+
+describe('Pipelines stage component', () => {
+ let StageComponent;
+ let component;
+
+ beforeEach(() => {
+ StageComponent = Vue.extend(stage);
+
+ component = new StageComponent({
+ propsData: {
+ stage: {
+ status: {
+ group: 'success',
+ icon: 'icon_status_success',
+ title: 'success',
+ },
+ dropdown_path: 'foo',
+ },
+ updateDropdown: false,
+ },
+ }).$mount();
+ });
-function minify(string) {
- return string.replace(/\s/g, '');
-}
+ it('should render a dropdown with the status icon', () => {
+ expect(component.$el.getAttribute('class')).toEqual('dropdown');
+ expect(component.$el.querySelector('svg')).toBeDefined();
+ expect(component.$el.querySelector('button').getAttribute('data-toggle')).toEqual('dropdown');
+ });
-describe('Pipelines Stage', () => {
- describe('data', () => {
- let stageReturnValue;
+ describe('with successfull request', () => {
+ const interceptor = (request, next) => {
+ next(request.respondWith(JSON.stringify({ html: 'foo' }), {
+ status: 200,
+ }));
+ };
beforeEach(() => {
- stageReturnValue = Stage.data();
+ Vue.http.interceptors.push(interceptor);
});
- it('should return object with .builds and .spinner', () => {
- expect(stageReturnValue).toEqual({
- builds: '',
- spinner: '',
- });
+ afterEach(() => {
+ Vue.http.interceptors = _.without(
+ Vue.http.interceptors, interceptor,
+ );
});
- });
- describe('computed', () => {
- describe('svgHTML', function () {
- let stage;
- let svgHTML;
+ it('should render the received data', (done) => {
+ component.$el.querySelector('button').click();
- beforeEach(() => {
- stage = { stage: { status: { icon: 'icon_status_success' } } };
-
- svgHTML = Stage.computed.svgHTML.call(stage);
- });
-
- it("should return the correct icon for the stage's status", () => {
- expect(svgHTML).toBe(SUCCESS_SVG);
- });
+ setTimeout(() => {
+ expect(
+ component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
+ ).toEqual('foo');
+ done();
+ }, 0);
});
});
- describe('when mounted', () => {
- let StageComponent;
- let renderedComponent;
- let stage;
+ describe('when request fails', () => {
+ const interceptor = (request, next) => {
+ next(request.respondWith(JSON.stringify({}), {
+ status: 500,
+ }));
+ };
beforeEach(() => {
- stage = { status: { icon: 'icon_status_success' } };
-
- StageComponent = Vue.extend(Stage);
-
- renderedComponent = new StageComponent({
- propsData: {
- stage,
- },
- }).$mount();
+ Vue.http.interceptors.push(interceptor);
});
- it('should render the correct status svg', () => {
- const minifiedComponent = minify(renderedComponent.$el.outerHTML);
- const expectedSVG = minify(SUCCESS_SVG);
-
- expect(minifiedComponent).toContain(expectedSVG);
+ afterEach(() => {
+ Vue.http.interceptors = _.without(
+ Vue.http.interceptors, interceptor,
+ );
});
- });
-
- describe('when request fails', () => {
- it('closes dropdown', () => {
- spyOn($, 'ajax').and.callFake(options => options.error());
- const StageComponent = Vue.extend(Stage);
- const component = new StageComponent({
- propsData: { stage: { status: { icon: 'foo' } } },
- }).$mount();
+ it('should close the dropdown', () => {
+ component.$el.click();
- expect(
- component.$el.classList.contains('open'),
- ).toEqual(false);
+ setTimeout(() => {
+ expect(component.$el.classList.contains('open')).toEqual(false);
+ }, 0);
});
});
});