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 | |
parent | 78adf0c5cc2534908e3f16a9b8abf06509444cf3 (diff) | |
download | gitlab-ce-3744bcc0d10d24104e39985b6833a0ec51791c0a.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
3 files changed, 31 insertions, 9 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> diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index b5ed54a6e25..084f736911f 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -475,7 +475,10 @@ export default { :project-path="projectPath" group-id="monitor-time-series-chart" > - <div class="d-flex align-items-center"> + <div + class="d-flex align-items-center" + :class="alertWidgetAvailable ? 'justify-content-between' : 'justify-content-end'" + > <alert-widget v-if="alertWidgetAvailable && graphData" :modal-id="`alert-modal-${index}-${graphIndex}`" @@ -486,7 +489,7 @@ export default { /> <gl-dropdown v-gl-tooltip - class="mx-2" + class="ml-2 mr-3" toggle-class="btn btn-transparent border-0" :right="true" :no-caret="true" diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss index 72f1b5307ec..245efd91ec8 100644 --- a/app/assets/stylesheets/pages/prometheus.scss +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -39,11 +39,14 @@ align-items: center; justify-content: space-between; margin-bottom: $gl-padding-8; +} - h5 { - font-size: $gl-font-size-large; - margin: 0; - } +.prometheus-graph-title { + font-size: $gl-font-size-large; +} + +.alert-current-setting { + max-width: 240px; } .prometheus-graph-cursor { |