Add latest changes from gitlab-org/gitlab@master

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>