Use badge to show alerts

Converted alert label to gitlab ui
badge. Moved the alert badge next to chart
title

app/assets/javascripts/monitoring/components/charts/time_series.vue

 <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>

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"

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 {

ee/app/assets/javascripts/monitoring/components/alert_widget.vue

 <script>
-import { s__ } from '~/locale';
+import { GlBadge, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
 import createFlash from '~/flash';
+import Icon from '~/vue_shared/components/icon.vue';
 import AlertWidgetForm from './alert_widget_form.vue';
 import AlertsService from '../services/alerts_service';
 import { alertsValidator, queriesValidator } from '../validators';
-import { GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
 
 export default {
   components: {
     AlertWidgetForm,
+    GlBadge,
     GlLoadingIcon,
     GlModal,
+    Icon,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -50,9 +53,14 @@ export default {
   },
   computed: {
     alertSummary() {
-      return Object.keys(this.alertsToManage)
-        .map(this.formatAlertSummary)
-        .join(', ');
+      const alertsToManage = Object.keys(this.alertsToManage);
+      const alertCountMsg = sprintf(s__('PrometheusAlerts|%{count} alerts applied'), {
+        count: alertsToManage.length,
+      });
+
+      return alertsToManage.length > 1
+        ? alertCountMsg
+        : alertsToManage.map(this.formatAlertSummary)[0];
     },
   },
   created() {
@@ -92,6 +100,9 @@ export default {
 
       return `${alertQuery.label} ${alert.operator} ${alert.threshold}`;
     },
+    showModal() {
+      this.$root.$emit('bv::show::modal', this.modalId);
+    },
     hideModal() {
       this.errorMessage = null;
       this.$root.$emit('bv::hide::modal', this.modalId);
@@ -148,11 +159,22 @@ export default {
 </script>
 
 <template>
-  <div class="prometheus-alert-widget dropdown d-flex align-items-center">
-    <span v-if="errorMessage" class="alert-error-message"> {{ errorMessage }} </span>
-    <span v-else class="alert-current-setting text-secondary">
+  <div class="prometheus-alert-widget dropdown flex-grow-2 overflow-hidden">
+    <span v-if="errorMessage" class="alert-error-message">{{ errorMessage }}</span>
+    <span
+      v-else
+      class="alert-current-setting text-secondary cursor-pointer d-flex align-items-end"
+      @click="showModal"
+    >
+      <gl-badge
+        v-if="alertSummary"
+        variant="secondary"
+        class="d-flex-center text-secondary text-truncate"
+      >
+        <icon name="notifications" class="s18 append-right-4" :size="16" />
+        <span class="text-truncate">{{ alertSummary }}</span>
+      </gl-badge>
       <gl-loading-icon v-show="isLoading" :inline="true" />
-      {{ alertSummary }}
     </span>
     <alert-widget-form
       ref="widgetForm"

ee/changelogs/unreleased/12891-use-a-single-badge-to-show-number-of-active-alerts-on-metrics-da.yml

+---
+title: Use a single badge to show number of active alerts on metrics dashboards
+merge_request: 15789
+author:
+type: changed

ee/spec/frontend/monitoring/alert_widget_spec.js

@@ -132,7 +132,7 @@ describe('AlertWidget', () => {
     };
     createComponent(propsWithManyAlerts);
 
-    expect(findCurrentSettings().text()).toEqual('alert-label > 42, alert-label2 = 900');
+    expect(findCurrentSettings().text()).toEqual('2 alerts applied');
   });
 
   it('creates an alert with an appropriate handler', () => {

locale/gitlab.pot

@@ -12641,6 +12641,9 @@ msgstr ""
 msgid "Prometheus listen_address in config/gitlab.yml is not a valid URI"
 msgstr ""
 
+msgid "PrometheusAlerts|%{count} alerts applied"
+msgstr ""
+
 msgid "PrometheusAlerts|Add alert"
 msgstr ""