diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-09 09:06:19 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-09 09:06:19 +0000 |
commit | 3744bcc0d10d24104e39985b6833a0ec51791c0a (patch) | |
tree | ecad3a8435a74bd618acd591762906429f88bfd4 /app/assets/javascripts/monitoring/components/charts/time_series.vue | |
parent | 78adf0c5cc2534908e3f16a9b8abf06509444cf3 (diff) | |
download | gitlab-ce-3744bcc0d10d24104e39985b6833a0ec51791c0a.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/time_series.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/time_series.vue | 22 |
1 files changed, 19 insertions, 3 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 04aced985c8..76fb35aaa78 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -1,6 +1,6 @@ <script> import { s__, __ } from '~/locale'; -import { GlLink, GlButton } from '@gitlab/ui'; +import { GlLink, GlButton, GlTooltip } from '@gitlab/ui'; import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import dateFormat from 'dateformat'; import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils'; @@ -16,6 +16,7 @@ export default { components: { GlAreaChart, GlLineChart, + GlTooltip, GlButton, GlChartSeriesLabel, GlLink, @@ -72,6 +73,7 @@ export default { isDeployment: false, sha: '', }, + showTitleTooltip: false, width: 0, height: chartHeight, svgs: {}, @@ -202,6 +204,12 @@ export default { watch: { containerWidth: 'onResize', }, + mounted() { + const graphTitleEl = this.$refs.graphTitle; + if (graphTitleEl && graphTitleEl.scrollWidth > graphTitleEl.offsetWidth) { + this.showTitleTooltip = true; + } + }, beforeDestroy() { window.removeEventListener('resize', debouncedResize); }, @@ -265,8 +273,16 @@ export default { <template> <div class="prometheus-graph"> <div class="prometheus-graph-header"> - <h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5> - <div class="prometheus-graph-widgets js-graph-widgets"> + <h5 + ref="graphTitle" + class="prometheus-graph-title js-graph-title text-truncate append-right-8" + > + {{ graphData.title }} + </h5> + <gl-tooltip :target="() => $refs.graphTitle" :disabled="!showTitleTooltip"> + {{ graphData.title }} + </gl-tooltip> + <div class="prometheus-graph-widgets js-graph-widgets flex-fill"> <slot></slot> </div> </div> |