diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2016-10-19 23:34:16 -0500 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2016-11-21 13:49:18 -0500 |
commit | 6f824b156fcc881aa4f3341a2fef119d43058073 (patch) | |
tree | d6187f0fb4f94f0bd02d53e4a542d3f84a30526a | |
parent | f95d7eddcd2173c97de2b4504675c28969c5a38d (diff) | |
download | gitlab-ce-6f824b156fcc881aa4f3341a2fef119d43058073.tar.gz |
Improve first implementation
4 files changed, 124 insertions, 3 deletions
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js index d618daef524..d7cec96d137 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js @@ -1,2 +1,57 @@ //= require vue //= require_tree . + +$(() => { + + const cycleAnalyticsEl = document.querySelector('#cycle-analytics'); + const cycleAnalyticsStore = gl.cycleAnalytics.CycleAnalyticsStore; + const cycleAnalyticsService = new gl.cycleAnalytics.CycleAnalyticsService({ + requestPath: cycleAnalyticsEl.dataset.requestPath + }) + + gl.cycleAnalyticsApp = new Vue({ + el: '#cycle-analytics', + name: 'CycleAnalytics', + data: cycleAnalyticsStore.state, + created() { + this.fetchCycleAnalyticsData(); + }, + methods: { + handleError(data) { + cycleAnalyticsStore.setErrorState(true); + new Flash('There was an error while fetching cycle analytics data.'); + }, + initDropdown() { + const $dropdown = $('.js-ca-dropdown'); + const $label = $dropdown.find('.dropdown-label'); + + $dropdown.find('li a').off('click').on('click', (e) => { + e.preventDefault(); + const $target = $(e.currentTarget); + const value = $target.data('value'); + + $label.text($target.text().trim()); + this.fetchCycleAnalyticsData({ startDate: value }); + }); + }, + fetchCycleAnalyticsData(options) { + options = options || { startDate: 30 }; + + cycleAnalyticsStore.setLoadingState(true); + + cycleAnalyticsService + .fetchCycleAnalyticsData(options) + .then((response) => { + cycleAnalyticsStore.setCycleAnalyticsData(response); + this.initDropdown(); + }) + .fail(() => { + this.handleError(data); + }) + .always(() => { + cycleAnalyticsStore.setLoadingState(false); + }); + } + } + }); +}); diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6 new file mode 100644 index 00000000000..b043dbfdbfb --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6 @@ -0,0 +1,28 @@ +((global) => { + global.cycleAnalytics = global.cycleAnalytics || {}; + + class CycleAnalyticsService { + constructor(options) { + this.requestPath = options.requestPath; + } + + fetchCycleAnalyticsData(options) { + options = options || { startDate: 30 }; + + return $.ajax({ + url: this.requestPath, + method: 'GET', + dataType: 'json', + contentType: 'application/json', + data: { + cycle_analytics: { + start_date: options.startDate + } + } + }); + } + }; + + global.cycleAnalytics.CycleAnalyticsService = CycleAnalyticsService; + +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 new file mode 100644 index 00000000000..1715097bfb3 --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 @@ -0,0 +1,41 @@ +((global) => { + global.cycleAnalytics = global.cycleAnalytics || {}; + + global.cycleAnalytics.CycleAnalyticsStore = { + state: { + isLoading: true, + hasError: false, + summary: '', + stats: '', + analytics: '' + }, + setCycleAnalyticsData(data) { + this.state = Object.assign(this.state, this.decorateData(data)); + }, + decorateData(data) { + let newData = {}; + + newData.stats = data.stats || []; + newData.summary = data.summary || []; + + newData.summary.forEach((item) => { + item.value = item.value || '-'; + }); + + newData.stats.forEach((item) => { + item.value = item.value || '- - -'; + }); + + newData.analytics = data; + + return newData; + }, + setLoadingState(state) { + this.state.isLoading = state; + }, + setErrorState(state) { + this.state.hasError = state; + } + }; + +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 756a24cc0fc..2867b3d1c28 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -208,9 +208,6 @@ new gl.ProtectedBranchCreate(); new gl.ProtectedBranchEditList(); break; - case 'projects:cycle_analytics:show': - new gl.CycleAnalytics(); - break; } switch (path.first()) { case 'admin': |