diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-09-23 12:54:23 +0000 |
---|---|---|
committer | Ruben Davila <rdavila84@gmail.com> | 2016-09-23 15:42:23 -0500 |
commit | c534dcc52972437e310fe3f639e54e9ada6400cc (patch) | |
tree | dd2268c3b9ac6b16f78514bc81138a157a7ed566 | |
parent | 1907ea41cb39b7e78e12949e301bcbc825564b99 (diff) | |
download | gitlab-ce-c534dcc52972437e310fe3f639e54e9ada6400cc.tar.gz |
Merge branch 'cycle-analytics-js-improvements' into 'master'
Fix Cycle Analytics landing widget state and improve state management in Vue.
## What does this MR do?
- Fixes Cycle Analytics help widget show/hide issue
- Addresses initial MR feedback with improving Vue state management logic
- Fixes cookie path of the help widget so when you close a help widget in a repo it won't be visible for other repos.
## Are there points in the code the reviewer needs to double check?
- Should we move `gl.cycleAnalyticsModel` to a new file.
## Why was this MR needed?
- Addresses feedbacks of [initial MR](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/5986) and fixes #22483
## Screenshots (if relevant)
## Does this MR meet the acceptance criteria?
- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] API support added
- Tests
- [x] Added for this feature/bug
- [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)
## What are the relevant issue numbers?
Fixes #22483
See merge request !6492
-rw-r--r-- | app/assets/javascripts/cycle-analytics.js.es6 | 33 | ||||
-rw-r--r-- | app/views/projects/cycle_analytics/show.html.haml | 4 |
2 files changed, 19 insertions, 18 deletions
diff --git a/app/assets/javascripts/cycle-analytics.js.es6 b/app/assets/javascripts/cycle-analytics.js.es6 index afaed7c4f60..cd9886ba58d 100644 --- a/app/assets/javascripts/cycle-analytics.js.es6 +++ b/app/assets/javascripts/cycle-analytics.js.es6 @@ -1,17 +1,22 @@ ((global) => { const COOKIE_NAME = 'cycle_analytics_help_dismissed'; + const store = gl.cycleAnalyticsStore = { + isLoading: true, + hasError: false, + isHelpDismissed: $.cookie(COOKIE_NAME), + analytics: {} + }; gl.CycleAnalytics = class CycleAnalytics { constructor() { const that = this; - this.isHelpDismissed = $.cookie(COOKIE_NAME); this.vue = new Vue({ el: '#cycle-analytics', name: 'CycleAnalytics', created: this.fetchData(), - data: this.decorateData({ isLoading: true }), + data: store, methods: { dismissLanding() { that.dismissLanding(); @@ -21,6 +26,7 @@ } fetchData(options) { + store.isLoading = true; options = options || { startDate: 30 }; $.ajax({ @@ -30,22 +36,20 @@ contentType: 'application/json', data: { start_date: options.startDate } }).done((data) => { - this.vue.$data = this.decorateData(data); + this.decorateData(data); this.initDropdown(); }) .error((data) => { this.handleError(data); }) .always(() => { - this.vue.isLoading = false; + store.isLoading = false; }) } decorateData(data) { data.summary = data.summary || []; data.stats = data.stats || []; - data.isHelpDismissed = this.isHelpDismissed; - data.isLoading = data.isLoading || false; data.summary.forEach((item) => { item.value = item.value || '-'; @@ -53,23 +57,21 @@ data.stats.forEach((item) => { item.value = item.value || '- - -'; - }) + }); - return data; + store.analytics = data; } handleError(data) { - this.vue.$data = { - hasError: true, - isHelpDismissed: this.isHelpDismissed - }; - + store.hasError = true; new Flash('There was an error while fetching cycle analytics data.', 'alert'); } dismissLanding() { - this.vue.isHelpDismissed = true; - $.cookie(COOKIE_NAME, true); + store.isHelpDismissed = true; + $.cookie(COOKIE_NAME, true, { + path: gon.relative_url_root || '/' + }); } initDropdown() { @@ -82,7 +84,6 @@ const value = $target.data('value'); $label.text($target.text().trim()); - this.vue.isLoading = true; this.fetchData({ startDate: value }); }) } diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 6a748690c79..7f346df8797 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -27,7 +27,7 @@ .content-block .container-fluid .row - .col-sm-3.col-xs-12.column{"v-for" => "item in summary"} + .col-sm-3.col-xs-12.column{"v-for" => "item in analytics.summary"} %h3.header {{item.value}} %p.text {{item.title}} @@ -46,7 +46,7 @@ .bordered-box %ul.content-list - %li{"v-for" => "item in stats"} + %li{"v-for" => "item in analytics.stats"} .container-fluid .row .col-xs-8.title-col |