Commit 4067da0b authored by David O'Regan's avatar David O'Regan Committed by Natalia Tepluhina

Add severity icon for list view

parent c752700b
......@@ -5,6 +5,7 @@ import {
GlLoadingIcon,
GlTable,
GlAlert,
GlIcon,
GlNewDropdown,
GlNewDropdownItem,
} from '@gitlab/ui';
......@@ -64,6 +65,7 @@ export default {
TimeAgo,
GlNewDropdown,
GlNewDropdownItem,
GlIcon,
},
props: {
projectPath: {
......@@ -144,6 +146,18 @@ export default {
fixed
stacked="md"
>
<template #cell(severity)="{ item }">
<div class="d-inline-flex align-items-center justify-content-between">
<gl-icon
class="mr-2"
:size="12"
:name="`severity-${item.severity.toLowerCase()}`"
:class="`icon-${item.severity.toLowerCase()}`"
/>
{{ item.severity }}
</div>
</template>
<template #cell(startedAt)="{ item }">
<time-ago :time="item.startedAt" />
</template>
......
.alert-management-list {
.icon-critical {
color: $red-800;
}
.icon-high {
color: $red-600;
}
.icon-medium {
color: $orange-400;
}
.icon-low {
color: $orange-300;
}
.icon-info {
color: $blue-400;
}
.icon-unknown {
color: $gray-400;
}
// these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
table {
color: $gray-700;
......
---
title: Add severity icons for alert management
merge_request: 30472
author:
type: changed
import { mount } from '@vue/test-utils';
import { GlEmptyState, GlTable, GlAlert, GlLoadingIcon, GlNewDropdown } from '@gitlab/ui';
import { GlEmptyState, GlTable, GlAlert, GlLoadingIcon, GlNewDropdown, GlIcon } from '@gitlab/ui';
import AlertManagementList from '~/alert_management/components/alert_management_list.vue';
import mockAlerts from '../mocks/alerts.json';
......@@ -113,5 +113,22 @@ describe('AlertManagementList', () => {
});
expect(findStatusDropdown().exists()).toBe(true);
});
it('shows correct severity icons', () => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: mockAlerts, errored: false },
loading: false,
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlTable).exists()).toBe(true);
expect(
findAlertsTable()
.find(GlIcon)
.classes('icon-critical'),
).toBe(true);
});
});
});
});
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