2021-01-03 14:25:43 +05:30
< script >
2021-01-29 00:20:46 +05:30
import {
GlButtonGroup ,
GlButton ,
GlIcon ,
GlLoadingIcon ,
GlModal ,
GlModalDirective ,
GlTable ,
GlTooltipDirective ,
GlSprintf ,
} from '@gitlab/ui' ;
2021-01-03 14:25:43 +05:30
import { s _ _ , _ _ } from '~/locale' ;
import Tracking from '~/tracking' ;
2021-01-29 00:20:46 +05:30
import {
trackAlertIntegrationsViewsOptions ,
integrationToDeleteDefault ,
typeSet ,
} from '../constants' ;
import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql' ;
2021-01-03 14:25:43 +05:30
export const i18n = {
title : s _ _ ( 'AlertsIntegrations|Current integrations' ) ,
emptyState : s _ _ ( 'AlertsIntegrations|No integrations have been added yet' ) ,
status : {
enabled : {
name : _ _ ( 'Enabled' ) ,
tooltip : s _ _ ( 'AlertsIntegrations|Alerts will be created through this integration' ) ,
} ,
disabled : {
name : _ _ ( 'Disabled' ) ,
tooltip : s _ _ ( 'AlertsIntegrations|Alerts will not be created through this integration' ) ,
} ,
} ,
} ;
const bodyTrClass =
'gl-border-1 gl-border-t-solid gl-border-b-solid gl-border-gray-100 gl-hover-cursor-pointer gl-hover-bg-blue-50 gl-hover-border-blue-200' ;
export default {
i18n ,
2021-01-29 00:20:46 +05:30
typeSet ,
2021-01-03 14:25:43 +05:30
components : {
2021-01-29 00:20:46 +05:30
GlButtonGroup ,
GlButton ,
2021-01-03 14:25:43 +05:30
GlIcon ,
2021-01-29 00:20:46 +05:30
GlLoadingIcon ,
GlModal ,
GlTable ,
GlSprintf ,
2021-01-03 14:25:43 +05:30
} ,
directives : {
GlTooltip : GlTooltipDirective ,
2021-01-29 00:20:46 +05:30
GlModal : GlModalDirective ,
2021-01-03 14:25:43 +05:30
} ,
props : {
integrations : {
type : Array ,
required : false ,
default : ( ) => [ ] ,
} ,
2021-01-29 00:20:46 +05:30
loading : {
type : Boolean ,
required : false ,
default : false ,
} ,
2021-01-03 14:25:43 +05:30
} ,
fields : [
{
2021-01-29 00:20:46 +05:30
key : 'active' ,
2021-01-03 14:25:43 +05:30
label : _ _ ( 'Status' ) ,
} ,
{
key : 'name' ,
label : s _ _ ( 'AlertsIntegrations|Integration Name' ) ,
} ,
{
key : 'type' ,
label : _ _ ( 'Type' ) ,
} ,
2021-01-29 00:20:46 +05:30
{
key : 'actions' ,
thClass : ` gl-text-center ` ,
tdClass : ` gl-text-center ` ,
label : _ _ ( 'Actions' ) ,
} ,
2021-01-03 14:25:43 +05:30
] ,
2021-01-29 00:20:46 +05:30
apollo : {
currentIntegration : {
query : getCurrentIntegrationQuery ,
2021-01-03 14:25:43 +05:30
} ,
} ,
2021-01-29 00:20:46 +05:30
data ( ) {
return {
integrationToDelete : integrationToDeleteDefault ,
currentIntegration : null ,
} ;
} ,
2021-01-03 14:25:43 +05:30
mounted ( ) {
2021-01-29 00:20:46 +05:30
const callback = entries => {
const isVisible = entries . some ( entry => entry . isIntersecting ) ;
if ( isVisible ) {
this . trackPageViews ( ) ;
this . observer . disconnect ( ) ;
}
} ;
this . observer = new IntersectionObserver ( callback ) ;
this . observer . observe ( this . $el ) ;
2021-01-03 14:25:43 +05:30
} ,
methods : {
2021-01-29 00:20:46 +05:30
tbodyTrClass ( item ) {
return {
[ bodyTrClass ] : this . integrations . length ,
'gl-bg-blue-50' : ( item !== null && item . id ) === this . currentIntegration ? . id ,
} ;
} ,
2021-01-03 14:25:43 +05:30
trackPageViews ( ) {
2021-01-29 00:20:46 +05:30
const { category , action } = trackAlertIntegrationsViewsOptions ;
2021-01-03 14:25:43 +05:30
Tracking . event ( category , action ) ;
} ,
2021-01-29 00:20:46 +05:30
setIntegrationToDelete ( { name , id } ) {
this . integrationToDelete . id = id ;
this . integrationToDelete . name = name ;
} ,
deleteIntegration ( ) {
this . $emit ( 'delete-integration' , { id : this . integrationToDelete . id } ) ;
this . integrationToDelete = { ... integrationToDeleteDefault } ;
} ,
2021-01-03 14:25:43 +05:30
} ,
} ;
< / script >
< template >
< div class = "incident-management-list" >
< h5 class = "gl-font-lg" > { { $options . i18n . title } } < / h5 >
< gl -table
2021-01-29 00:20:46 +05:30
class = "integration-list"
2021-01-03 14:25:43 +05:30
: items = "integrations"
: fields = "$options.fields"
2021-01-29 00:20:46 +05:30
: busy = "loading"
2021-01-03 14:25:43 +05:30
stacked = "md"
: tbody - tr - class = "tbodyTrClass"
show - empty
>
2021-01-29 00:20:46 +05:30
< template # cell ( active ) = " { item } " >
< span v-if ="item.active" data-testid="integration-activated-status" >
2021-01-03 14:25:43 +05:30
< gl -icon
v - gl - tooltip
name = "check-circle-filled"
: size = "16"
class = "gl-text-green-500 gl-hover-cursor-pointer gl-mr-3"
: title = "$options.i18n.status.enabled.tooltip"
/ >
{ { $options . i18n . status . enabled . name } }
< / span >
< span v -else data -testid = " integration -activated -status " >
< gl -icon
v - gl - tooltip
name = "warning-solid"
: size = "16"
class = "gl-text-red-600 gl-hover-cursor-pointer gl-mr-3"
: title = "$options.i18n.status.disabled.tooltip"
/ >
{ { $options . i18n . status . disabled . name } }
< / span >
< / template >
2021-01-29 00:20:46 +05:30
< template # cell ( actions ) = " { item } " >
2021-02-22 17:27:13 +05:30
< gl -button -group class = "gl-ml-3" >
2021-01-29 00:20:46 +05:30
< gl -button icon = "pencil" @ click = "$emit('edit-integration', { id: item.id })" / >
< gl -button
v - gl - modal . deleteIntegration
: disabled = "item.type === $options.typeSet.prometheus"
icon = "remove"
@ click = "setIntegrationToDelete(item)"
/ >
< / g l - b u t t o n - g r o u p >
< / template >
< template # table -busy >
< gl -loading -icon size = "lg" color = "dark" class = "mt-3" / >
< / template >
< template # empty >
< div
class = "gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3 gl-px-5"
>
< p class = "gl-text-gray-400 gl-py-3 gl-my-3" > { { $options . i18n . emptyState } } < / p >
< / div >
< / template >
2021-01-03 14:25:43 +05:30
< / g l - t a b l e >
2021-01-29 00:20:46 +05:30
< gl -modal
modal - id = "deleteIntegration"
: title = "s__('AlertSettings|Delete integration')"
: ok - title = "s__('AlertSettings|Delete integration')"
ok - variant = "danger"
@ ok = "deleteIntegration"
>
< gl -sprintf
: message = "
s _ _ (
'AlertsIntegrations|You have opted to delete the %{integrationName} integration. Do you want to proceed? It means you will no longer receive alerts from this endpoint in your alert list, and this action cannot be undone.' ,
)
"
>
< template # integrationName > { { integrationToDelete . name } } < / template >
< / g l - s p r i n t f >
< / g l - m o d a l >
2021-01-03 14:25:43 +05:30
< / div >
< / template >