Merge branch 'monitoring-dashboard-replace-alerts-icon' into 'master'

Replace notifications icon with warning in monitoring dashboard

See merge request gitlab-org/gitlab!27545

doc/user/project/integrations/prometheus.md

@@ -589,7 +589,7 @@ When viewing a custom dashboard of a project, you can view the original
 
 From each of the panels in the dashboard, you can access the context menu by clicking the **{ellipsis_v}** **More actions** dropdown box above the upper right corner of the panel to take actions related to the chart's data.
 
-![Context Menu](img/panel_context_menu_v12_8.png)
+![Context Menu](img/panel_context_menu_v12_10.png)
 
 The options are:
 

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

@@ -159,9 +159,12 @@ export default {
 
 <template>
   <div class="prometheus-alert-widget dropdown flex-grow-2 overflow-hidden">
-    <span v-if="errorMessage" class="alert-error-message">{{ errorMessage }}</span>
+    <span v-if="errorMessage" ref="alertErrorMessage" class="alert-error-message">{{
+      errorMessage
+    }}</span>
     <span
       v-else
+      ref="alertCurrentSetting"
       class="alert-current-setting text-secondary cursor-pointer d-flex align-items-end"
       @click="showModal"
     >
@@ -170,7 +173,7 @@ export default {
         variant="secondary"
         class="d-flex-center text-secondary text-truncate"
       >
-        <icon name="notifications" class="s18 append-right-4" :size="16" />
+        <icon name="warning" class="s18 append-right-4" :size="16" />
         <span class="text-truncate">{{ alertSummary }}</span>
       </gl-badge>
       <gl-loading-icon v-show="isLoading" :inline="true" />

ee/changelogs/unreleased/monitoring-dashboard-replace-alerts-icon.yml

+---
+title: Use warning icon for alert widget in monitoring dashboard
+merge_request: 27545
+author:
+type: other

ee/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertWidget displays a warning icon and matches snapshopt 1`] = `
+<gl-badge-stub
+  class="d-flex-center text-secondary text-truncate"
+  variant="secondary"
+>
+  <icon-stub
+    class="s18 append-right-4"
+    name="warning"
+    size="16"
+  />
+   
+  <span
+    class="text-truncate"
+  >
+    alert-label &gt; 42
+  </span>
+</gl-badge-stub>
+`;

ee/spec/frontend/monitoring/alert_widget_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import AlertWidget from 'ee/monitoring/components/alert_widget.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
@@ -57,8 +57,9 @@ describe('AlertWidget', () => {
     });
   };
   const findWidgetForm = () => wrapper.find({ ref: 'widgetForm' });
-  const findAlertErrorMessage = () => wrapper.find('.alert-error-message');
-  const findCurrentSettings = () => wrapper.find('.alert-current-setting');
+  const findAlertErrorMessage = () => wrapper.find({ ref: 'alertErrorMessage' });
+  const findCurrentSettings = () => wrapper.find({ ref: 'alertCurrentSetting' });
+  const findBadge = () => wrapper.find(GlBadge);
 
   afterEach(() => {
     wrapper.destroy();
@@ -107,6 +108,13 @@ describe('AlertWidget', () => {
     expect(wrapper.text()).toContain('alert-label > 42');
   });
 
+  it('displays a warning icon and matches snapshopt', () => {
+    mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 });
+    createComponent(propsWithAlertData);
+
+    expect(findBadge().element).toMatchSnapshot();
+  });
+
   it('displays a combined alert summary when there are multiple alerts', () => {
     mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 });
     const propsWithManyAlerts = {