Merge branch 'alerts-dropdown-to-modal-part-2' into 'master'

Alerts dropdown to modal EE2

Closes gitlab-ce#63197

See merge request gitlab-org/gitlab-ee!14858

app/assets/javascripts/monitoring/components/dashboard.vue

 <script>
-import { GlButton, GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui';
+import {
+  GlButton,
+  GlDropdown,
+  GlDropdownItem,
+  GlModal,
+  GlModalDirective,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import _ from 'underscore';
 import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
@@ -30,7 +37,8 @@ export default {
     GlModal,
   },
   directives: {
-    GlModalDirective,
+    GlModal: GlModalDirective,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     externalDashboardUrl: {
@@ -328,7 +336,7 @@ export default {
       <div class="d-flex">
         <div v-if="addingMetricsAvailable">
           <gl-button
-            v-gl-modal-directive="$options.addMetric.modalId"
+            v-gl-modal="$options.addMetric.modalId"
             class="js-add-metric-button text-success border-success"
             >{{ $options.addMetric.title }}</gl-button
           >
@@ -395,14 +403,35 @@ export default {
             :project-path="projectPath"
             group-id="monitor-area-chart"
           >
-            <alert-widget
-              v-if="alertWidgetAvailable && graphData"
-              :alerts-endpoint="alertsEndpoint"
-              :relevant-queries="graphData.queries"
-              :alerts-to-manage="getGraphAlerts(graphData.queries)"
-              :modal-id="`alert-modal-${index}-${graphIndex}`"
-              @setAlerts="setAlerts"
-            />
+            <div class="d-flex align-items-center">
+              <alert-widget
+                v-if="alertWidgetAvailable && graphData"
+                :modal-id="`alert-modal-${index}-${graphIndex}`"
+                :alerts-endpoint="alertsEndpoint"
+                :relevant-queries="graphData.queries"
+                :alerts-to-manage="getGraphAlerts(graphData.queries)"
+                @setAlerts="setAlerts"
+              />
+              <gl-dropdown
+                v-if="alertWidgetAvailable"
+                v-gl-tooltip
+                class="mx-2"
+                toggle-class="btn btn-transparent border-0"
+                :right="true"
+                :no-caret="true"
+                :title="__('More actions')"
+              >
+                <template slot="button-content">
+                  <icon name="ellipsis_v" class="text-secondary" />
+                </template>
+                <gl-dropdown-item
+                  v-if="alertWidgetAvailable"
+                  v-gl-modal="`alert-modal-${index}-${graphIndex}`"
+                >
+                  {{ __('Alerts') }}
+                </gl-dropdown-item>
+              </gl-dropdown>
+            </div>
           </monitor-area-chart>
         </template>
       </graph-group>

app/assets/javascripts/monitoring/components/panel_type.vue

 <script>
 import { mapState } from 'vuex';
 import _ from 'underscore';
+import { GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui';
 import MonitorAreaChart from './charts/area.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import MonitorEmptyChart from './charts/empty_chart.vue';
@@ -10,6 +11,12 @@ export default {
     MonitorAreaChart,
     MonitorSingleStatChart,
     MonitorEmptyChart,
+    GlDropdown,
+    GlDropdownItem,
+    GlModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
   },
   props: {
     graphData: {
@@ -64,14 +71,32 @@ export default {
     :container-width="dashboardWidth"
     group-id="monitor-area-chart"
   >
-    <alert-widget
-      v-if="alertWidgetAvailable"
-      :alerts-endpoint="alertsEndpoint"
-      :relevant-queries="graphData.queries"
-      :alerts-to-manage="getGraphAlerts(graphData.queries)"
-      :modal-id="`alert-modal-${index}`"
-      @setAlerts="setAlerts"
-    />
+    <div class="d-flex align-items-center">
+      <alert-widget
+        v-if="alertWidgetAvailable && graphData"
+        :modal-id="`alert-modal-${index}`"
+        :alerts-endpoint="alertsEndpoint"
+        :relevant-queries="graphData.queries"
+        :alerts-to-manage="getGraphAlerts(graphData.queries)"
+        @setAlerts="setAlerts"
+      />
+      <gl-dropdown
+        v-if="alertWidgetAvailable"
+        v-gl-tooltip
+        class="mx-2"
+        toggle-class="btn btn-transparent border-0"
+        :right="true"
+        :no-caret="true"
+        :title="__('More actions')"
+      >
+        <template slot="button-content">
+          <icon name="ellipsis_v" class="text-secondary" />
+        </template>
+        <gl-dropdown-item v-if="alertWidgetAvailable" v-gl-modal="`alert-modal-${index}`">
+          {{ __('Alerts') }}
+        </gl-dropdown-item>
+      </gl-dropdown>
+    </div>
   </monitor-area-chart>
   <monitor-empty-chart v-else :graph-title="graphData.title" />
 </template>

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

 <script>
 import { s__ } 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';
@@ -9,7 +8,6 @@ import { GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
     AlertWidgetForm,
     GlLoadingIcon,
     GlModal,
@@ -56,17 +54,6 @@ export default {
         .map(this.formatAlertSummary)
         .join(', ');
     },
-    alertIcon() {
-      return this.hasAlerts ? 'notifications' : 'notifications-off';
-    },
-    alertStatus() {
-      return this.hasAlerts
-        ? s__('PrometheusAlerts|Alert set')
-        : s__('PrometheusAlerts|No alert set');
-    },
-    hasAlerts() {
-      return Boolean(Object.keys(this.alertsToManage).length);
-    },
     formDisabled() {
       return Boolean(this.errorMessage || this.isLoading);
     },
@@ -176,16 +163,6 @@ export default {
       <gl-loading-icon v-show="isLoading" :inline="true" />
       {{ alertSummary }}
     </span>
-    <button
-      ref="dropdownMenuToggle"
-      v-gl-modal="modalId"
-      :aria-label="alertStatus"
-      class="btn btn-sm mx-2 alert-dropdown-button"
-      type="button"
-    >
-      <icon :name="alertIcon" :size="16" aria-hidden="true" />
-    </button>
-
     <alert-widget-form
       ref="widgetForm"
       :disabled="formDisabled"

ee/spec/javascripts/monitoring/components/dashboard_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import Dashboard from 'ee/monitoring/components/dashboard.vue';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
@@ -51,9 +51,29 @@ describe('Dashboard', () => {
         });
       });
 
-      it('shows alert widget', done => {
+      it('shows alert widget and dropdown item', done => {
         setTimeout(() => {
           expect(vm.find(AlertWidget).exists()).toBe(true);
+          expect(
+            vm
+              .findAll(GlDropdownItem)
+              .filter(i => i.text() === 'Alerts')
+              .exists(),
+          ).toBe(true);
+
+          done();
+        });
+      });
+
+      it('shows More actions dropdown on chart', done => {
+        setTimeout(() => {
+          expect(
+            vm
+              .findAll(GlDropdown)
+              .filter(d => d.attributes('data-original-title') === 'More actions')
+              .exists(),
+          ).toBe(true);
+
           done();
         });
       });
@@ -75,6 +95,26 @@ describe('Dashboard', () => {
       it('does not show alert widget', done => {
         setTimeout(() => {
           expect(vm.find(AlertWidget).exists()).toBe(false);
+          expect(
+            vm
+              .findAll(GlDropdownItem)
+              .filter(i => i.text() === 'Alerts')
+              .exists(),
+          ).toBe(false);
+
+          done();
+        });
+      });
+
+      it('hides More actions dropdown on chart', done => {
+        setTimeout(() => {
+          expect(
+            vm
+              .findAll(GlDropdown)
+              .filter(d => d.attributes('data-original-title') === 'More actions')
+              .exists(),
+          ).toBe(false);
+
           done();
         });
       });

locale/gitlab.pot

@@ -9277,6 +9277,9 @@ msgstr ""
 msgid "More Slack commands"
 msgstr ""
 
+msgid "More actions"
+msgstr ""
+
 msgid "More info"
 msgstr ""
 
@@ -11438,9 +11441,6 @@ msgstr ""
 msgid "PrometheusAlerts|Add alert"
 msgstr ""
 
-msgid "PrometheusAlerts|Alert set"
-msgstr ""
-
 msgid "PrometheusAlerts|Edit alert"
 msgstr ""
 
@@ -11456,9 +11456,6 @@ msgstr ""
 msgid "PrometheusAlerts|Error saving alert"
 msgstr ""
 
-msgid "PrometheusAlerts|No alert set"
-msgstr ""
-
 msgid "PrometheusAlerts|Operator"
 msgstr ""