From 53e17c497d59b9c67b07d01ab7ddba858a2cad99 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 27 Oct 2016 12:02:57 -0600 Subject: [PATCH 1/3] can change class - have mock data - setTimeout --- .../javascripts/polling-pipelines.js.es6 | 61 +++++++++++++++++++ app/views/projects/pipelines/index.html.haml | 6 ++ 2 files changed, 67 insertions(+) create mode 100644 app/assets/javascripts/polling-pipelines.js.es6 diff --git a/app/assets/javascripts/polling-pipelines.js.es6 b/app/assets/javascripts/polling-pipelines.js.es6 new file mode 100644 index 000000000000..6483aab457f5 --- /dev/null +++ b/app/assets/javascripts/polling-pipelines.js.es6 @@ -0,0 +1,61 @@ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.PollingPipelines = class { + constructor(pipelines = false, count = false) { + this.pipelines = pipelines; + this.count = count; + + if (!this.pipelines && !this.count) return; + + this.pipelinesOnDOM = document.querySelectorAll('.commit-link'); + this.DOMPipelineStatuses = []; + + this.storePipelineStatuses(); + this.checkStatusChanges(); + setTimeout(() => this.applyNewStatusChanges(), 3000); + } + + storePipelineStatuses() { + if (this.count) { + this.pipelinesOnDOM.forEach((e) => { + this.DOMPipelineStatuses.push( + e.children[0].childNodes[0].classList[1].split('-')[1] + ); + }); + } + } + + checkStatusChanges() { + const newChanges = this.updatePipelines() + .map((e, i) => { + if (this.pipelines[i].status !== e.status) return 1; + return 0; + }) + .reduce((a, b) => a + b); + + if (newChanges > 0) return true; + return false; + } + + updatePipelines() { + // this is mocking the API for now + // no way to test this until API is built + // using 'mock' data + const apiPipelines = this.pipelines; + apiPipelines[0].status = 'failed'; + // end of 'mock' data + this.pipelines = apiPipelines; + return apiPipelines; + } + + applyNewStatusChanges() { + this.pipelinesOnDOM.forEach((e, i) => { + const newStatus = `ci-status ci-${this.pipelines[i].status}`; + // needs to be explicitly called + // cannot ask `currentDomStatus` to change + e.children[0].childNodes[0].className = newStatus; + }); + } + }; +})(window.gl || (window.gl = {})); diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml index 4bc49072f357..dd6888494252 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/app/views/projects/pipelines/index.html.haml @@ -54,3 +54,9 @@ = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages = paginate @pipelines, theme: 'gitlab' + +:javascript + var pipelines = JSON.parse('#{@pipelines.to_json}'); + var count = JSON.parse('#{@pipelines_count.to_json}'); + + new gl.PollingPipelines(pipelines, count); -- GitLab From 59389b311e40ef3a091809a41341a4dbdd93c413 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 27 Oct 2016 13:23:56 -0600 Subject: [PATCH 2/3] add global runner status object - more mock data for realtime testing --- .../javascripts/polling-pipelines.js.es6 | 12 +++- app/assets/javascripts/runner_statuses.js.es6 | 59 +++++++++++++++++++ 2 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 app/assets/javascripts/runner_statuses.js.es6 diff --git a/app/assets/javascripts/polling-pipelines.js.es6 b/app/assets/javascripts/polling-pipelines.js.es6 index 6483aab457f5..ba2db9de7a42 100644 --- a/app/assets/javascripts/polling-pipelines.js.es6 +++ b/app/assets/javascripts/polling-pipelines.js.es6 @@ -14,6 +14,7 @@ this.storePipelineStatuses(); this.checkStatusChanges(); setTimeout(() => this.applyNewStatusChanges(), 3000); + this.runnerStatuses = new gl.RunnerStatuses(); } storePipelineStatuses() { @@ -44,6 +45,10 @@ // using 'mock' data const apiPipelines = this.pipelines; apiPipelines[0].status = 'failed'; + apiPipelines[1].status = 'passed'; + apiPipelines[2].status = 'created'; + apiPipelines[3].status = 'skipped'; + apiPipelines[4].status = 'pending'; // end of 'mock' data this.pipelines = apiPipelines; return apiPipelines; @@ -51,10 +56,11 @@ applyNewStatusChanges() { this.pipelinesOnDOM.forEach((e, i) => { - const newStatus = `ci-status ci-${this.pipelines[i].status}`; - // needs to be explicitly called - // cannot ask `currentDomStatus` to change + const updatedStatus = this.pipelines[i].status; + const newStatus = `ci-status ci-${updatedStatus}`; e.children[0].childNodes[0].className = newStatus; + e.children[0].childNodes[0].innerHTML = this.runnerStatuses[updatedStatus]; + // debugger }); } }; diff --git a/app/assets/javascripts/runner_statuses.js.es6 b/app/assets/javascripts/runner_statuses.js.es6 new file mode 100644 index 000000000000..b86e69ace34d --- /dev/null +++ b/app/assets/javascripts/runner_statuses.js.es6 @@ -0,0 +1,59 @@ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.RunnerStatuses = class { + constructor() { + return { + running: ` + + + + + + +  running + `, + passed: ` + + + + + + + + passed + `, + failed: ` + + + + + + +  failed + `, + created: ` +  created + `, + skipped: ` + + + + + + +  skipped + `, + pending: ` + + + + + + +  pending + `, + }; + } + }; +})(window.gl || (window.gl = {})); -- GitLab From 4a86883c923d7b7ebe31a2d4cf96925bdf1cf72e Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 27 Oct 2016 13:24:23 -0600 Subject: [PATCH 3/3] underscore for file name --- .../{polling-pipelines.js.es6 => polling_pipelines.js.es6} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename app/assets/javascripts/{polling-pipelines.js.es6 => polling_pipelines.js.es6} (100%) diff --git a/app/assets/javascripts/polling-pipelines.js.es6 b/app/assets/javascripts/polling_pipelines.js.es6 similarity index 100% rename from app/assets/javascripts/polling-pipelines.js.es6 rename to app/assets/javascripts/polling_pipelines.js.es6 -- GitLab