diff options
| -rw-r--r-- | app/assets/javascripts/monitoring/components/charts/area.vue | 36 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 5 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/monitor.scss | 5 | ||||
| -rw-r--r-- | changelogs/unreleased/52258-labels-with-long-names-overflow-on-metrics-dashboard.yml | 5 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | spec/javascripts/monitoring/charts/area_spec.js | 16 | ||||
| -rw-r--r-- | yarn.lock | 8 |
7 files changed, 54 insertions, 23 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue index eb2ab3e135e..afe8d87a8d6 100644 --- a/app/assets/javascripts/monitoring/components/charts/area.vue +++ b/app/assets/javascripts/monitoring/components/charts/area.vue @@ -1,5 +1,5 @@ <script> -import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import dateFormat from 'dateformat'; import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; @@ -12,6 +12,7 @@ let debouncedResize; export default { components: { GlAreaChart, + GlChartSeriesLabel, Icon, }, inheritAttrs: false, @@ -137,6 +138,9 @@ export default { return timestamp < acc || acc === null ? timestamp : acc; }, null); }, + isMultiSeries() { + return this.tooltip.content.length > 1; + }, recentDeployments() { return this.deploymentData.reduce((acc, deployment) => { if (deployment.created_at >= this.earliestDatapoint) { @@ -197,7 +201,7 @@ export default { ); this.tooltip.sha = deploy.sha.substring(0, 8); } else { - const { seriesName } = seriesData; + const { seriesName, color } = seriesData; // seriesData.value contains the chart's [x, y] value pair // seriesData.value[1] is threfore the chart y value const value = seriesData.value[1].toFixed(3); @@ -205,6 +209,7 @@ export default { this.tooltip.content.push({ name: seriesName, value, + color, }); } }); @@ -246,24 +251,33 @@ export default { :height="height" @updated="onChartUpdated" > - <template slot="tooltipTitle"> - <div v-if="tooltip.isDeployment"> + <template v-if="tooltip.isDeployment"> + <template slot="tooltipTitle"> {{ __('Deployed') }} - </div> - {{ tooltip.title }} - </template> - <template slot="tooltipContent"> - <div v-if="tooltip.isDeployment" class="d-flex align-items-center"> + </template> + <div slot="tooltipContent" class="d-flex align-items-center"> <icon name="commit" class="mr-2" /> {{ tooltip.sha }} </div> - <template v-else> + </template> + <template v-else> + <template slot="tooltipTitle"> + <div class="text-nowrap"> + {{ tooltip.title }} + </div> + </template> + <template slot="tooltipContent"> <div v-for="(content, key) in tooltip.content" :key="key" class="d-flex justify-content-between" > - {{ content.name }} {{ content.value }} + <gl-chart-series-label :color="isMultiSeries ? content.color : ''"> + {{ content.name }} + </gl-chart-series-label> + <div class="prepend-left-32"> + {{ content.value }} + </div> </div> </template> </template> diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 072d4147a8b..da1f196afdb 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -662,6 +662,11 @@ $feature-toggle-text-color: #fff; $feature-toggle-color-enabled: #4a8bee; /* + * Monitor Charts + */ +$chart-tooltip-max-width: 512px; + +/* Stat Graph */ $stat-graph-common-bg: #f3f3f3; diff --git a/app/assets/stylesheets/pages/monitor.scss b/app/assets/stylesheets/pages/monitor.scss new file mode 100644 index 00000000000..25ff5abd774 --- /dev/null +++ b/app/assets/stylesheets/pages/monitor.scss @@ -0,0 +1,5 @@ +.chart-tooltip > .popover { + min-width: 0; + width: max-content; + max-width: $chart-tooltip-max-width; +} diff --git a/changelogs/unreleased/52258-labels-with-long-names-overflow-on-metrics-dashboard.yml b/changelogs/unreleased/52258-labels-with-long-names-overflow-on-metrics-dashboard.yml new file mode 100644 index 00000000000..5dd25d0ffc1 --- /dev/null +++ b/changelogs/unreleased/52258-labels-with-long-names-overflow-on-metrics-dashboard.yml @@ -0,0 +1,5 @@ +--- +title: Fix long label overflow on metrics dashboard +merge_request: 26775 +author: +type: fixed diff --git a/package.json b/package.json index ac8f6bd0db5..54962834e71 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@babel/preset-env": "^7.3.1", "@gitlab/csslab": "^1.9.0", "@gitlab/svgs": "^1.58.0", - "@gitlab/ui": "^3.0.1", + "@gitlab/ui": "^3.1.0", "apollo-cache-inmemory": "^1.5.1", "apollo-client": "^2.5.1", "apollo-upload-client": "^10.0.0", diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js index 4ff519ae0e7..41a6c04efb9 100644 --- a/spec/javascripts/monitoring/charts/area_spec.js +++ b/spec/javascripts/monitoring/charts/area_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper'; import Area from '~/monitoring/components/charts/area.vue'; import MonitoringStore from '~/monitoring/stores/monitoring_store'; @@ -121,13 +121,15 @@ describe('Area component', () => { }); it('formats tooltip content', () => { - expect(areaChart.vm.tooltip.content).toEqual([{ name: 'Core Usage', value: '5.556' }]); + const name = 'Core Usage'; + const value = '5.556'; + const seriesLabel = areaChart.find(GlChartSeriesLabel); + + expect(seriesLabel.vm.color).toBe(''); + expect(shallowWrapperContainsSlotText(seriesLabel, 'default', name)).toBe(true); + expect(areaChart.vm.tooltip.content).toEqual([{ name, value, color: undefined }]); expect( - shallowWrapperContainsSlotText( - areaChart.find(GlAreaChart), - 'tooltipContent', - 'Core Usage 5.556', - ), + shallowWrapperContainsSlotText(areaChart.find(GlAreaChart), 'tooltipContent', value), ).toBe(true); }); }); diff --git a/yarn.lock b/yarn.lock index 80f25897670..b0ce4d49562 100644 --- a/yarn.lock +++ b/yarn.lock @@ -663,10 +663,10 @@ resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.58.0.tgz#bb05263ff2eb7ca09a25cd14d0b1a932d2ea9c2f" integrity sha512-RlWSjjBT4lMIFuNC1ziCO1nws9zqZtxCjhrqK2DxDDTgp2W0At9M/BFkHp8RHyMCrO3g1fHTrLPUgzr5oR3Epg== -"@gitlab/ui@^3.0.1": - version "3.0.2" - resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.0.2.tgz#29a17699751261657487b939c651c0f93264df2a" - integrity sha512-JZhcS5cDxtpxopTc55UWvUbZAwKvxygYHT9I01QmUtKgaKIJlnjBj8zkcg1xHazX7raSjjtjqfDEla39a+luuQ== +"@gitlab/ui@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.1.0.tgz#718fce208c14dc539859715a03978922c5b003b5" + integrity sha512-xCz8uCeP/4pzuQSoqfrFLeB0lfVHpvQ08r8/CkhSoDTpv34AXvmaxbv1PR8lIadRi43KuPTN639zHHKC2Z0b1g== dependencies: "@babel/standalone" "^7.0.0" bootstrap-vue "^2.0.0-rc.11" |