Commit 577b2579 authored by Mark Florian's avatar Mark Florian

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

Replace notifications icon with warning in monitoring dashboard

See merge request gitlab-org/gitlab!27545
parents e535dcb9 26e8d23e
......@@ -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:
......
......@@ -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" />
......
---
title: Use warning icon for alert widget in monitoring dashboard
merge_request: 27545
author:
type: other
// 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>
`;
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 = {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment