Commit b0574055 authored by David O'Regan's avatar David O'Regan Committed by Simon Knox

Feat(incidents): add issue state to alerts table

Show the current status of
an linked issue in the
alerts table
parent da42ee6f
...@@ -42,6 +42,7 @@ export default { ...@@ -42,6 +42,7 @@ export default {
"AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear.", "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear.",
), ),
unassigned: __('Unassigned'), unassigned: __('Unassigned'),
closed: __('closed'),
}, },
fields: [ fields: [
{ {
...@@ -75,7 +76,7 @@ export default { ...@@ -75,7 +76,7 @@ export default {
{ {
key: 'issue', key: 'issue',
label: s__('AlertManagement|Incident'), label: s__('AlertManagement|Incident'),
thClass: 'gl-w-12 gl-pointer-events-none', thClass: 'gl-w-15p gl-pointer-events-none',
tdClass, tdClass,
}, },
{ {
...@@ -221,8 +222,11 @@ export default { ...@@ -221,8 +222,11 @@ export default {
hasAssignees(assignees) { hasAssignees(assignees) {
return Boolean(assignees.nodes?.length); return Boolean(assignees.nodes?.length);
}, },
getIssueLink(item) { getIssueMeta({ issue: { iid, state } }) {
return joinPaths('/', this.projectPath, '-', 'issues', item.issueIid); return {
state: state === 'closed' ? `(${this.$options.i18n.closed})` : '',
link: joinPaths('/', this.projectPath, '-', 'issues', iid),
};
}, },
tbodyTrClass(item) { tbodyTrClass(item) {
return { return {
...@@ -343,8 +347,14 @@ export default { ...@@ -343,8 +347,14 @@ export default {
</template> </template>
<template #cell(issue)="{ item }"> <template #cell(issue)="{ item }">
<gl-link v-if="item.issueIid" data-testid="issueField" :href="getIssueLink(item)"> <gl-link
#{{ item.issueIid }} v-if="item.issue"
v-gl-tooltip
:title="item.issue.title"
data-testid="issueField"
:href="getIssueMeta(item).link"
>
#{{ item.issue.iid }} {{ getIssueMeta(item).state }}
</gl-link> </gl-link>
<div v-else data-testid="issueField">{{ s__('AlertManagement|None') }}</div> <div v-else data-testid="issueField">{{ s__('AlertManagement|None') }}</div>
</template> </template>
......
...@@ -5,7 +5,11 @@ fragment AlertListItem on AlertManagementAlert { ...@@ -5,7 +5,11 @@ fragment AlertListItem on AlertManagementAlert {
status status
startedAt startedAt
eventCount eventCount
issueIid issue {
iid
state
title
}
assignees { assignees {
nodes { nodes {
name name
......
...@@ -268,10 +268,10 @@ export default { ...@@ -268,10 +268,10 @@ export default {
</span> </span>
</div> </div>
<gl-button <gl-button
v-if="alert.issueIid" v-if="alert.issue"
class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button" class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button"
data-testid="viewIncidentBtn" data-testid="viewIncidentBtn"
:href="incidentPath(alert.issueIid)" :href="incidentPath(alert.issue.iid)"
category="primary" category="primary"
variant="success" variant="success"
> >
......
...@@ -43,7 +43,8 @@ module Resolvers ...@@ -43,7 +43,8 @@ module Resolvers
def preloads def preloads
{ {
assignees: [:assignees], assignees: [:assignees],
notes: [:ordered_notes, { ordered_notes: [:system_note_metadata, :project, :noteable] }] notes: [:ordered_notes, { ordered_notes: [:system_note_metadata, :project, :noteable] }],
issue: [:issue]
} }
end end
end end
......
...@@ -20,8 +20,14 @@ module Types ...@@ -20,8 +20,14 @@ module Types
field :issue_iid, field :issue_iid,
GraphQL::ID_TYPE, GraphQL::ID_TYPE,
null: true, null: true,
deprecated: { reason: 'Use issue field', milestone: '13.10' },
description: 'Internal ID of the GitLab issue attached to the alert.' description: 'Internal ID of the GitLab issue attached to the alert.'
field :issue,
Types::IssueType,
null: true,
description: 'Issue attached to the alert.'
field :title, field :title,
GraphQL::STRING_TYPE, GraphQL::STRING_TYPE,
null: true, null: true,
......
---
title: 'Incident management: add issue state to alerts table'
merge_request: 55185
author:
type: added
...@@ -427,7 +427,8 @@ Describes an alert from the project's Alert Management. ...@@ -427,7 +427,8 @@ Describes an alert from the project's Alert Management.
| `eventCount` | Int | Number of events of this alert. | | `eventCount` | Int | Number of events of this alert. |
| `hosts` | String! => Array | List of hosts the alert came from. | | `hosts` | String! => Array | List of hosts the alert came from. |
| `iid` | ID! | Internal ID of the alert. | | `iid` | ID! | Internal ID of the alert. |
| `issueIid` | ID | Internal ID of the GitLab issue attached to the alert. | | `issue` | Issue | Issue attached to the alert. |
| `issueIid` **{warning-solid}** | ID | **Deprecated:** Use issue field. Deprecated in 13.10. |
| `metricsDashboardUrl` | String | URL for metrics embed for the alert. | | `metricsDashboardUrl` | String | URL for metrics embed for the alert. |
| `monitoringTool` | String | Monitoring tool the alert came from. | | `monitoringTool` | String | Monitoring tool the alert came from. |
| `notes` | NoteConnection! | All notes on this noteable. | | `notes` | NoteConnection! | All notes on this noteable. |
......
...@@ -35195,6 +35195,9 @@ msgstr "" ...@@ -35195,6 +35195,9 @@ msgstr ""
msgid "ciReport|is loading, errors when loading results" msgid "ciReport|is loading, errors when loading results"
msgstr "" msgstr ""
msgid "closed"
msgstr ""
msgid "closed issue" msgid "closed issue"
msgstr "" msgstr ""
......
...@@ -2,6 +2,8 @@ import { GlTable, GlAlert, GlLoadingIcon, GlDropdown, GlIcon, GlAvatar } from '@ ...@@ -2,6 +2,8 @@ import { GlTable, GlAlert, GlLoadingIcon, GlDropdown, GlIcon, GlAvatar } from '@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import mockAlerts from 'jest/vue_shared/alert_details/mocks/alerts.json'; import mockAlerts from 'jest/vue_shared/alert_details/mocks/alerts.json';
import AlertManagementTable from '~/alert_management/components/alert_management_table.vue'; import AlertManagementTable from '~/alert_management/components/alert_management_table.vue';
import { visitUrl } from '~/lib/utils/url_utility'; import { visitUrl } from '~/lib/utils/url_utility';
...@@ -18,19 +20,18 @@ describe('AlertManagementTable', () => { ...@@ -18,19 +20,18 @@ describe('AlertManagementTable', () => {
let wrapper; let wrapper;
let mock; let mock;
const findAlertsTable = () => wrapper.find(GlTable); const findAlertsTable = () => wrapper.findComponent(GlTable);
const findAlerts = () => wrapper.findAll('table tbody tr'); const findAlerts = () => wrapper.findAll('table tbody tr');
const findAlert = () => wrapper.find(GlAlert); const findAlert = () => wrapper.findComponent(GlAlert);
const findLoader = () => wrapper.find(GlLoadingIcon); const findLoader = () => wrapper.findComponent(GlLoadingIcon);
const findStatusDropdown = () => wrapper.find(GlDropdown); const findStatusDropdown = () => wrapper.findComponent(GlDropdown);
const findDateFields = () => wrapper.findAll(TimeAgo); const findDateFields = () => wrapper.findAllComponents(TimeAgo);
const findSearch = () => wrapper.find(FilteredSearchBar); const findSearch = () => wrapper.findComponent(FilteredSearchBar);
const findSeverityColumnHeader = () => const findSeverityColumnHeader = () => wrapper.findByTestId('alert-management-severity-sort');
wrapper.find('[data-testid="alert-management-severity-sort"]'); const findFirstIDField = () => wrapper.findAllByTestId('idField').at(0);
const findFirstIDField = () => wrapper.findAll('[data-testid="idField"]').at(0); const findAssignees = () => wrapper.findAllByTestId('assigneesField');
const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]'); const findSeverityFields = () => wrapper.findAllByTestId('severityField');
const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]'); const findIssueFields = () => wrapper.findAllByTestId('issueField');
const findIssueFields = () => wrapper.findAll('[data-testid="issueField"]');
const alertsCount = { const alertsCount = {
open: 24, open: 24,
triggered: 20, triggered: 20,
...@@ -40,29 +41,34 @@ describe('AlertManagementTable', () => { ...@@ -40,29 +41,34 @@ describe('AlertManagementTable', () => {
}; };
function mountComponent({ provide = {}, data = {}, loading = false, stubs = {} } = {}) { function mountComponent({ provide = {}, data = {}, loading = false, stubs = {} } = {}) {
wrapper = mount(AlertManagementTable, { wrapper = extendedWrapper(
provide: { mount(AlertManagementTable, {
...defaultProvideValues, provide: {
alertManagementEnabled: true, ...defaultProvideValues,
userCanEnableAlertManagement: true, alertManagementEnabled: true,
...provide, userCanEnableAlertManagement: true,
}, ...provide,
data() { },
return data; data() {
}, return data;
mocks: { },
$apollo: { mocks: {
mutate: jest.fn(), $apollo: {
query: jest.fn(), mutate: jest.fn(),
queries: { query: jest.fn(),
alerts: { queries: {
loading, alerts: {
loading,
},
}, },
}, },
}, },
}, stubs,
stubs, directives: {
}); GlTooltip: createMockDirective(),
},
}),
);
} }
beforeEach(() => { beforeEach(() => {
...@@ -72,7 +78,6 @@ describe('AlertManagementTable', () => { ...@@ -72,7 +78,6 @@ describe('AlertManagementTable', () => {
afterEach(() => { afterEach(() => {
if (wrapper) { if (wrapper) {
wrapper.destroy(); wrapper.destroy();
wrapper = null;
} }
mock.restore(); mock.restore();
}); });
...@@ -241,9 +246,14 @@ describe('AlertManagementTable', () => { ...@@ -241,9 +246,14 @@ describe('AlertManagementTable', () => {
expect(findIssueFields().at(0).text()).toBe('None'); expect(findIssueFields().at(0).text()).toBe('None');
}); });
it('renders a link when one exists', () => { it('renders a link when one exists with the issue state and title tooltip', () => {
expect(findIssueFields().at(1).text()).toBe('#1'); const issueField = findIssueFields().at(1);
expect(findIssueFields().at(1).attributes('href')).toBe('/gitlab-org/gitlab/-/issues/1'); const tooltip = getBinding(issueField.element, 'gl-tooltip');
expect(issueField.text()).toBe(`#1 (closed)`);
expect(issueField.attributes('href')).toBe('/gitlab-org/gitlab/-/issues/1');
expect(issueField.attributes('title')).toBe('My test issue');
expect(tooltip).not.toBe(undefined);
}); });
}); });
......
...@@ -89,7 +89,7 @@ describe('AlertDetails', () => { ...@@ -89,7 +89,7 @@ describe('AlertDetails', () => {
const findIncidentCreationAlert = () => wrapper.findByTestId('incidentCreationError'); const findIncidentCreationAlert = () => wrapper.findByTestId('incidentCreationError');
const findEnvironmentName = () => wrapper.findByTestId('environmentName'); const findEnvironmentName = () => wrapper.findByTestId('environmentName');
const findEnvironmentPath = () => wrapper.findByTestId('environmentPath'); const findEnvironmentPath = () => wrapper.findByTestId('environmentPath');
const findDetailsTable = () => wrapper.find(AlertDetailsTable); const findDetailsTable = () => wrapper.findComponent(AlertDetailsTable);
const findMetricsTab = () => wrapper.findByTestId('metrics'); const findMetricsTab = () => wrapper.findByTestId('metrics');
describe('Alert details', () => { describe('Alert details', () => {
...@@ -192,23 +192,21 @@ describe('AlertDetails', () => { ...@@ -192,23 +192,21 @@ describe('AlertDetails', () => {
describe('Create incident from alert', () => { describe('Create incident from alert', () => {
it('should display "View incident" button that links the incident page when incident exists', () => { it('should display "View incident" button that links the incident page when incident exists', () => {
const issueIid = '3'; const iid = '3';
mountComponent({ mountComponent({
data: { alert: { ...mockAlert, issueIid }, sidebarStatus: false }, data: { alert: { ...mockAlert, issue: { iid } }, sidebarStatus: false },
}); });
expect(findViewIncidentBtn().exists()).toBe(true); expect(findViewIncidentBtn().exists()).toBe(true);
expect(findViewIncidentBtn().attributes('href')).toBe( expect(findViewIncidentBtn().attributes('href')).toBe(joinPaths(projectIssuesPath, iid));
joinPaths(projectIssuesPath, issueIid),
);
expect(findCreateIncidentBtn().exists()).toBe(false); expect(findCreateIncidentBtn().exists()).toBe(false);
}); });
it('should display "Create incident" button when incident doesn\'t exist yet', () => { it('should display "Create incident" button when incident doesn\'t exist yet', () => {
const issueIid = null; const issue = null;
mountComponent({ mountComponent({
mountMethod: mount, mountMethod: mount,
data: { alert: { ...mockAlert, issueIid } }, data: { alert: { ...mockAlert, issue } },
}); });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
"endedAt": "2020-04-17T23:18:14.996Z", "endedAt": "2020-04-17T23:18:14.996Z",
"status": "ACKNOWLEDGED", "status": "ACKNOWLEDGED",
"assignees": { "nodes": [{ "username": "root", "avatarUrl": "/url", "name": "root" }] }, "assignees": { "nodes": [{ "username": "root", "avatarUrl": "/url", "name": "root" }] },
"issueIid": "1", "issue": { "state" : "closed", "iid": "1", "title": "My test issue" },
"notes": { "notes": {
"nodes": [ "nodes": [
{ {
......
...@@ -10,7 +10,8 @@ RSpec.describe GitlabSchema.types['AlertManagementAlert'] do ...@@ -10,7 +10,8 @@ RSpec.describe GitlabSchema.types['AlertManagementAlert'] do
it 'exposes the expected fields' do it 'exposes the expected fields' do
expected_fields = %i[ expected_fields = %i[
iid iid
issue_iid issueIid
issue
title title
description description
severity severity
......
...@@ -20,7 +20,9 @@ RSpec.describe 'Create an alert issue from an alert' do ...@@ -20,7 +20,9 @@ RSpec.describe 'Create an alert issue from an alert' do
errors errors
alert { alert {
iid iid
issueIid issue {
iid
}
} }
issue { issue {
iid iid
...@@ -46,7 +48,7 @@ RSpec.describe 'Create an alert issue from an alert' do ...@@ -46,7 +48,7 @@ RSpec.describe 'Create an alert issue from an alert' do
expect(mutation_response.slice('alert', 'issue')).to eq( expect(mutation_response.slice('alert', 'issue')).to eq(
'alert' => { 'alert' => {
'iid' => alert.iid.to_s, 'iid' => alert.iid.to_s,
'issueIid' => new_issue.iid.to_s 'issue' => { 'iid' => new_issue.iid.to_s }
}, },
'issue' => { 'issue' => {
'iid' => new_issue.iid.to_s, 'iid' => new_issue.iid.to_s,
......
# frozen_string_literal: true
require 'spec_helper'
RSpec.describe 'getting Alert Management Alert Issue' do
include GraphqlHelpers
let_it_be(:project) { create(:project) }
let_it_be(:current_user) { create(:user) }
let(:payload) { {} }
let(:query) { 'avg(metric) > 1.0' }
let(:fields) do
<<~QUERY
nodes {
iid
issue {
iid
state
}
}
QUERY
end
let(:graphql_query) do
graphql_query_for(
'project',
{ 'fullPath' => project.full_path },
query_graphql_field('alertManagementAlerts', {}, fields)
)
end
let(:alerts) { graphql_data.dig('project', 'alertManagementAlerts', 'nodes') }
let(:first_alert) { alerts.first }
before do
project.add_developer(current_user)
end
context 'with gitlab alert' do
before do
create(:alert_management_alert, :with_issue, project: project, payload: payload)
end
it 'includes the correct alert issue payload data' do
post_graphql(graphql_query, current_user: current_user)
expect(first_alert).to include('issue' => { "iid" => "1", "state" => "opened" })
end
end
describe 'performance' do
let(:first_n) { var('Int') }
let(:params) { { first: first_n } }
let(:limited_query) { with_signature([first_n], query) }
context 'with gitlab alert' do
before do
create(:alert_management_alert, :with_issue, project: project, payload: payload)
end
it 'avoids N+1 queries' do
base_count = ActiveRecord::QueryRecorder.new do
post_graphql(limited_query, current_user: current_user, variables: first_n.with(1))
end
expect { post_graphql(limited_query, current_user: current_user) }.not_to exceed_query_limit(base_count)
end
end
end
end
...@@ -7,7 +7,7 @@ RSpec.describe 'getting Alert Management Alerts' do ...@@ -7,7 +7,7 @@ RSpec.describe 'getting Alert Management Alerts' do
let_it_be(:payload) { { 'custom' => { 'alert' => 'payload' }, 'runbook' => 'runbook' } } let_it_be(:payload) { { 'custom' => { 'alert' => 'payload' }, 'runbook' => 'runbook' } }
let_it_be(:project) { create(:project, :repository) } let_it_be(:project) { create(:project, :repository) }
let_it_be(:current_user) { create(:user) } let_it_be(:current_user) { create(:user) }
let_it_be(:resolved_alert) { create(:alert_management_alert, :all_fields, :resolved, project: project, issue: nil, severity: :low).present } let_it_be(:resolved_alert) { create(:alert_management_alert, :all_fields, :resolved, project: project, severity: :low).present }
let_it_be(:triggered_alert) { create(:alert_management_alert, :all_fields, project: project, severity: :critical, payload: payload).present } let_it_be(:triggered_alert) { create(:alert_management_alert, :all_fields, project: project, severity: :critical, payload: payload).present }
let_it_be(:other_project_alert) { create(:alert_management_alert, :all_fields).present } let_it_be(:other_project_alert) { create(:alert_management_alert, :all_fields).present }
...@@ -60,7 +60,6 @@ RSpec.describe 'getting Alert Management Alerts' do ...@@ -60,7 +60,6 @@ RSpec.describe 'getting Alert Management Alerts' do
it 'returns the correct properties of the alerts' do it 'returns the correct properties of the alerts' do
expect(first_alert).to include( expect(first_alert).to include(
'iid' => triggered_alert.iid.to_s, 'iid' => triggered_alert.iid.to_s,
'issueIid' => triggered_alert.issue_iid.to_s,
'title' => triggered_alert.title, 'title' => triggered_alert.title,
'description' => triggered_alert.description, 'description' => triggered_alert.description,
'severity' => triggered_alert.severity.upcase, 'severity' => triggered_alert.severity.upcase,
...@@ -82,7 +81,6 @@ RSpec.describe 'getting Alert Management Alerts' do ...@@ -82,7 +81,6 @@ RSpec.describe 'getting Alert Management Alerts' do
expect(second_alert).to include( expect(second_alert).to include(
'iid' => resolved_alert.iid.to_s, 'iid' => resolved_alert.iid.to_s,
'issueIid' => resolved_alert.issue_iid.to_s,
'status' => 'RESOLVED', 'status' => 'RESOLVED',
'endedAt' => resolved_alert.ended_at.strftime('%Y-%m-%dT%H:%M:%SZ') 'endedAt' => resolved_alert.ended_at.strftime('%Y-%m-%dT%H:%M:%SZ')
) )
......
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