Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
2a92cd62
Commit
2a92cd62
authored
May 07, 2020
by
Olena Horal-Koretska
Committed by
Phil Hughes
May 07, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Alerts list status tab filter (no BE integration)
parent
6440be5d
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
151 additions
and
4 deletions
+151
-4
app/assets/javascripts/alert_management/components/alert_management_list.vue
...pts/alert_management/components/alert_management_list.vue
+31
-3
app/assets/javascripts/alert_management/constants.js
app/assets/javascripts/alert_management/constants.js
+32
-0
app/assets/stylesheets/pages/alerts_list.scss
app/assets/stylesheets/pages/alerts_list.scss
+10
-0
app/controllers/projects/alert_management_controller.rb
app/controllers/projects/alert_management_controller.rb
+3
-0
locale/gitlab.pot
locale/gitlab.pot
+6
-0
spec/frontend/alert_management/components/alert_management_list_spec.js
...alert_management/components/alert_management_list_spec.js
+69
-1
No files found.
app/assets/javascripts/alert_management/components/alert_management_list.vue
View file @
2a92cd62
...
...
@@ -8,10 +8,15 @@ import {
GlIcon
,
GlNewDropdown
,
GlNewDropdownItem
,
GlTabs
,
GlTab
,
GlBadge
,
}
from
'
@gitlab/ui
'
;
import
{
s__
}
from
'
~/locale
'
;
import
TimeAgo
from
'
~/vue_shared/components/time_ago_tooltip.vue
'
;
import
getAlerts
from
'
../graphql/queries/getAlerts.query.graphql
'
;
import
{
ALERTS_STATUS
,
ALERTS_STATUS_TABS
}
from
'
../constants
'
;
import
glFeatureFlagsMixin
from
'
~/vue_shared/mixins/gl_feature_flags_mixin
'
;
const
tdClass
=
'
table-col d-flex d-md-table-cell align-items-center
'
;
...
...
@@ -59,10 +64,11 @@ export default {
},
],
statuses
:
{
triggered
:
s__
(
'
AlertManagement|Triggered
'
),
acknowledged
:
s__
(
'
AlertManagement|Acknowledged
'
),
resolved
:
s__
(
'
AlertManagement|Resolved
'
),
[
ALERTS_STATUS
.
TRIGGERED
]
:
s__
(
'
AlertManagement|Triggered
'
),
[
ALERTS_STATUS
.
ACKNOWLEDGED
]
:
s__
(
'
AlertManagement|Acknowledged
'
),
[
ALERTS_STATUS
.
RESOLVED
]
:
s__
(
'
AlertManagement|Resolved
'
),
},
statusTabs
:
ALERTS_STATUS_TABS
,
components
:
{
GlEmptyState
,
GlLoadingIcon
,
...
...
@@ -73,7 +79,11 @@ export default {
GlNewDropdown
,
GlNewDropdownItem
,
GlIcon
,
GlTabs
,
GlTab
,
GlBadge
,
},
mixins
:
[
glFeatureFlagsMixin
()],
props
:
{
projectPath
:
{
type
:
String
,
...
...
@@ -102,6 +112,7 @@ export default {
variables
()
{
return
{
projectPath
:
this
.
projectPath
,
status
:
this
.
statusFilter
,
};
},
update
(
data
)
{
...
...
@@ -118,6 +129,7 @@ export default {
errored
:
false
,
isAlertDismissed
:
false
,
isErrorAlertDismissed
:
false
,
statusFilter
:
this
.
$options
.
statusTabs
[
0
].
status
,
};
},
computed
:
{
...
...
@@ -131,6 +143,11 @@ export default {
return
this
.
$apollo
.
queries
.
alerts
.
loading
;
},
},
methods
:
{
filterALertsByStatus
(
tabIndex
)
{
this
.
statusFilter
=
this
.
$options
.
statusTabs
[
tabIndex
].
status
;
},
},
};
</
script
>
...
...
@@ -144,6 +161,17 @@ export default {
{{
$options
.
i18n
.
errorMsg
}}
</gl-alert>
<gl-tabs
v-if=
"glFeatures.alertListStatusFilteringEnabled"
@
input=
"filterALertsByStatus"
>
<gl-tab
v-for=
"tab in $options.statusTabs"
:key=
"tab.status"
>
<template
slot=
"title"
>
<span>
{{
tab
.
title
}}
</span>
<gl-badge
v-if=
"alerts"
size=
"sm"
class=
"gl-tab-counter-badge"
>
{{
alerts
.
length
}}
</gl-badge>
</
template
>
</gl-tab>
</gl-tabs>
<h4
class=
"d-block d-md-none my-3"
>
{{ s__('AlertManagement|Alerts') }}
</h4>
...
...
app/assets/javascripts/alert_management/constants.js
0 → 100644
View file @
2a92cd62
import
{
s__
}
from
'
~/locale
'
;
export
const
ALERTS_STATUS
=
{
OPEN
:
'
open
'
,
TRIGGERED
:
'
triggered
'
,
ACKNOWLEDGED
:
'
acknowledged
'
,
RESOLVED
:
'
resolved
'
,
ALL
:
'
all
'
,
};
export
const
ALERTS_STATUS_TABS
=
[
{
title
:
s__
(
'
AlertManagement|Open
'
),
status
:
ALERTS_STATUS
.
OPEN
,
},
{
title
:
s__
(
'
AlertManagement|Triggered
'
),
status
:
ALERTS_STATUS
.
TRIGGERED
,
},
{
title
:
s__
(
'
AlertManagement|Acknowledged
'
),
status
:
ALERTS_STATUS
.
ACKNOWLEDGED
,
},
{
title
:
s__
(
'
AlertManagement|Resolved
'
),
status
:
ALERTS_STATUS
.
RESOLVED
,
},
{
title
:
s__
(
'
AlertManagement|All alerts
'
),
status
:
ALERTS_STATUS
.
ALL
,
},
];
app/assets/stylesheets/pages/alerts_list.scss
View file @
2a92cd62
...
...
@@ -74,4 +74,14 @@
}
}
}
.gl-tab-nav-item
{
color
:
$gl-gray-600
;
>
.gl-tab-counter-badge
{
color
:
inherit
;
@include
gl-font-sm
;
background-color
:
$white-normal
;
}
}
}
app/controllers/projects/alert_management_controller.rb
View file @
2a92cd62
...
...
@@ -3,6 +3,9 @@
class
Projects::AlertManagementController
<
Projects
::
ApplicationController
before_action
:ensure_list_feature_enabled
,
only: :index
before_action
:ensure_detail_feature_enabled
,
only: :details
before_action
do
push_frontend_feature_flag
(
:alert_list_status_filtering_enabled
)
end
def
index
end
...
...
locale/gitlab.pot
View file @
2a92cd62
...
...
@@ -1712,6 +1712,9 @@ msgstr ""
msgid "AlertManagement|Alerts"
msgstr ""
msgid "AlertManagement|All alerts"
msgstr ""
msgid "AlertManagement|Authorize external service"
msgstr ""
...
...
@@ -1742,6 +1745,9 @@ msgstr ""
msgid "AlertManagement|No alerts to display."
msgstr ""
msgid "AlertManagement|Open"
msgstr ""
msgid "AlertManagement|Overview"
msgstr ""
...
...
spec/frontend/alert_management/components/alert_management_list_spec.js
View file @
2a92cd62
import
{
mount
}
from
'
@vue/test-utils
'
;
import
{
GlEmptyState
,
GlTable
,
GlAlert
,
GlLoadingIcon
,
GlNewDropdown
,
GlIcon
}
from
'
@gitlab/ui
'
;
import
{
GlEmptyState
,
GlTable
,
GlAlert
,
GlLoadingIcon
,
GlNewDropdown
,
GlBadge
,
GlIcon
,
GlTab
,
}
from
'
@gitlab/ui
'
;
import
AlertManagementList
from
'
~/alert_management/components/alert_management_list.vue
'
;
import
{
ALERTS_STATUS_TABS
}
from
'
../../../../app/assets/javascripts/alert_management/constants
'
;
import
mockAlerts
from
'
../mocks/alerts.json
'
;
...
...
@@ -12,6 +22,8 @@ describe('AlertManagementList', () => {
const
findAlert
=
()
=>
wrapper
.
find
(
GlAlert
);
const
findLoader
=
()
=>
wrapper
.
find
(
GlLoadingIcon
);
const
findStatusDropdown
=
()
=>
wrapper
.
find
(
GlNewDropdown
);
const
findStatusFilterTabs
=
()
=>
wrapper
.
findAll
(
GlTab
);
const
findNumberOfAlertsBadge
=
()
=>
wrapper
.
findAll
(
GlBadge
);
function
mountComponent
({
props
=
{
...
...
@@ -20,6 +32,8 @@ describe('AlertManagementList', () => {
},
data
=
{},
loading
=
false
,
alertListStatusFilteringEnabled
=
false
,
stubs
=
{},
}
=
{})
{
wrapper
=
mount
(
AlertManagementList
,
{
propsData
:
{
...
...
@@ -28,6 +42,9 @@ describe('AlertManagementList', () => {
emptyAlertSvgPath
:
'
illustration/path
'
,
...
props
,
},
provide
:
{
glFeatures
:
{
alertListStatusFilteringEnabled
},
},
data
()
{
return
data
;
},
...
...
@@ -40,6 +57,7 @@ describe('AlertManagementList', () => {
},
},
},
stubs
,
});
}
...
...
@@ -59,6 +77,56 @@ describe('AlertManagementList', () => {
});
});
describe
(
'
Status Filter Tabs
'
,
()
=>
{
describe
(
'
alertListStatusFilteringEnabled feature flag enabled
'
,
()
=>
{
beforeEach
(()
=>
{
mountComponent
({
props
:
{
alertManagementEnabled
:
true
,
userCanEnableAlertManagement
:
true
},
data
:
{
alerts
:
mockAlerts
},
loading
:
false
,
alertListStatusFilteringEnabled
:
true
,
stubs
:
{
GlTab
:
true
,
},
});
});
it
(
'
should display filter tabs for all statuses
'
,
()
=>
{
const
tabs
=
findStatusFilterTabs
().
wrappers
;
tabs
.
forEach
((
tab
,
i
)
=>
{
expect
(
tab
.
text
()).
toContain
(
ALERTS_STATUS_TABS
[
i
].
title
);
});
});
it
(
'
should have number of items badge along with status tab
'
,
()
=>
{
expect
(
findNumberOfAlertsBadge
().
length
).
toEqual
(
ALERTS_STATUS_TABS
.
length
);
expect
(
findNumberOfAlertsBadge
()
.
at
(
0
)
.
text
(),
).
toEqual
(
`
${
mockAlerts
.
length
}
`
);
});
});
describe
(
'
alertListStatusFilteringEnabled feature flag disabled
'
,
()
=>
{
beforeEach
(()
=>
{
mountComponent
({
props
:
{
alertManagementEnabled
:
true
,
userCanEnableAlertManagement
:
true
},
data
:
{
alerts
:
mockAlerts
},
loading
:
false
,
alertListStatusFilteringEnabled
:
false
,
stubs
:
{
GlTab
:
true
,
},
});
});
it
(
'
should NOT display tabs
'
,
()
=>
{
expect
(
findStatusFilterTabs
()).
not
.
toExist
();
});
});
});
describe
(
'
Alerts table
'
,
()
=>
{
it
(
'
loading state
'
,
()
=>
{
mountComponent
({
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment