Single Stat metrics in custom dashboard breaks the page

Summary

Custom dashboards with Single Stat metrics results in a never-ending Waiting for performance data state in the monitor dashboard.

After initial investigation, this seems to be because of the Download to csv action logic specifically for single stat charts (more info in possible fixes below)

Steps to reproduce

  1. Create a project with autodev-ops installed.
  2. Create a custom dashboard with single stat metrics. Here is a sample custom_single_stat_dashboard.yml
    1. This yml file should go in .gitlab/dashboard directory of the repo.
    2. Also, make sure to deploy before proceeding to next step
  3. Navigate to monitor dashboard Operations > Metrics
  4. Select the previously created dashboard in the dashboard dropdown.
  5. Notice that the Waiting for performance data never ends.
  6. Also, notice that there are errors thrown in the browser console.

What is the current bug behavior?

What is the expected correct behavior?

(What you should see instead)

Relevant logs and/or screenshots

Screen_Shot_2019-10-18_at_7.12.04_AM

TypeError: Cannot read property 'reduce' of undefined
    at VueComponent.csvText (dashboard.vue?a25a:270)
    at VueComponent.downloadCsv (dashboard.vue?a25a:276)
    at eval (eval at ../../../node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"tmp/cache/vue-loader","cacheIdentifier":"4b4b08ce-vue-loader-template"}!../../../node_modules/vue-loader/lib/loaders/templateLoader.js?!../../../node_modules/vue-loader/lib/index.js?!./monitoring/components/dashboard.vue?vue&type=template&id=18d7bc24& (pages.projects.envir…etrics.chunk.js:431), <anonymous>:525:53)
    at Proxy.renderList (vue.esm.js?b4aa:2639)
    at eval (eval at ../../../node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"tmp/cache/vue-loader","cacheIdentifier":"4b4b08ce-vue-loader-template"}!../../../node_modules/vue-loader/lib/loaders/templateLoader.js?!../../../node_modules/vue-loader/lib/index.js?!./monitoring/components/dashboard.vue?vue&type=template&id=18d7bc24& (pages.projects.envir…etrics.chunk.js:431), <anonymous>:431:27)
    at Proxy.renderList (vue.esm.js?b4aa:2639)
    at Proxy.render (eval at ../../../node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"tmp/cache/vue-loader","cacheIdentifier":"4b4b08ce-vue-loader-template"}!../../../node_modules/vue-loader/lib/loaders/templateLoader.js?!../../../node_modules/vue-loader/lib/index.js?!./monitoring/components/dashboard.vue?vue&type=template&id=18d7bc24& (pages.projects.envir…etrics.chunk.js:431), <anonymous>:322:17)
    at VueComponent.Vue._render (vue.esm.js?b4aa:3551)
    at VueComponent.updateComponent (vue.esm.js?b4aa:4069)
    at Watcher.get (vue.esm.js?b4aa:4482)
logError	@	vue.esm.js?b4aa:1897
globalHandleError	@	vue.esm.js?b4aa:1888
handleError	@	vue.esm.js?b4aa:1848
Vue._render	@	vue.esm.js?b4aa:3553
updateComponent	@	vue.esm.js?b4aa:4069
get	@	vue.esm.js?b4aa:4482
run	@	vue.esm.js?b4aa:4557
flushSchedulerQueue	@	vue.esm.js?b4aa:4313
eval	@	vue.esm.js?b4aa:1989
flushCallbacks	@	vue.esm.js?b4aa:1915
Promise.then (async)		
timerFunc	@	vue.esm.js?b4aa:1942
nextTick	@	vue.esm.js?b4aa:1999
queueWatcher	@	vue.esm.js?b4aa:4405
update	@	vue.esm.js?b4aa:4547
notify	@	vue.esm.js?b4aa:739
reactiveSetter	@	vue.esm.js?b4aa:1064
proxySetter	@	vue.esm.js?b4aa:4634
setElWidth	@	dashboard.vue?a25a:311
setTimeout (async)		
onSidebarMutation	@	dashboard.vue?a25a:314
attributes (async)		
addClass	@	jquery.js?c53f:8055
toggleClass	@	jquery.js?c53f:8114
toggleCollapsedSidebar	@	contextual_sidebar.js?bc03:83
eval	@	contextual_sidebar.js?bc03:43
dispatch	@	jquery.js?c53f:5237
elemData.handle	@	jquery.js?c53f:5044

Output of checks

(If you are reporting a bug on GitLab.com, write: This bug happens on GitLab.com)

Results of GitLab environment info

Expand for output related to GitLab environment info 
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:env:info)


(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production)

Results of GitLab application Check

Expand for output related to the GitLab application check 
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)


(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)


(we will only investigate if the tests are passing)

Possible fixes

Single stat queryies return value instead of values. Even though we account for that in normalizeQueryResult here https://gitlab.com/gitlab-org/gitlab/blob/bb0bef9a2e1aff72012cabb0a16e51bd6c2db17e/app/assets/javascripts/monitoring/stores/utils.js#L102, the download to csv action does not handle such cases https://gitlab.com/gitlab-org/gitlab/blob/bb0bef9a2e1aff72012cabb0a16e51bd6c2db17e/app/assets/javascripts/monitoring/components/dashboard.vue#L267.

So the fix can go in either download csv action or query result normalizing.

Edited by 🤖 GitLab Bot 🤖