2020-03-13 15:44:24 +05:30
< script >
2021-10-27 15:23:28 +05:30
import {
GlFormGroup ,
GlButton ,
GlModal ,
GlToast ,
GlToggle ,
GlLink ,
GlSafeHtmlDirective ,
} from '@gitlab/ui' ;
2021-03-11 19:13:27 +05:30
import Vue from 'vue' ;
2020-03-13 15:44:24 +05:30
import { mapState , mapActions } from 'vuex' ;
2021-10-27 15:23:28 +05:30
import { helpPagePath } from '~/helpers/help_page_helper' ;
2021-03-11 19:13:27 +05:30
import { BV _SHOW _MODAL , BV _HIDE _MODAL } from '~/lib/utils/constants' ;
2020-03-13 15:44:24 +05:30
import { visitUrl , getBaseURL } from '~/lib/utils/url_utility' ;
2021-03-11 19:13:27 +05:30
import { _ _ , s _ _ , sprintf } from '~/locale' ;
2020-03-13 15:44:24 +05:30
Vue . use ( GlToast ) ;
export default {
components : {
GlFormGroup ,
2021-01-03 14:25:43 +05:30
GlButton ,
2020-03-13 15:44:24 +05:30
GlModal ,
GlToggle ,
2021-10-27 15:23:28 +05:30
GlLink ,
} ,
directives : {
SafeHtml : GlSafeHtmlDirective ,
2020-03-13 15:44:24 +05:30
} ,
formLabels : {
2021-10-27 15:23:28 +05:30
createProject : _ _ ( 'Self monitoring' ) ,
2020-03-13 15:44:24 +05:30
} ,
data ( ) {
return {
modalId : 'delete-self-monitor-modal' ,
} ;
} ,
computed : {
... mapState ( 'selfMonitoring' , [
'projectEnabled' ,
'projectCreated' ,
'showAlert' ,
'projectPath' ,
'loading' ,
'alertContent' ,
] ) ,
selfMonitorEnabled : {
get ( ) {
return this . projectEnabled ;
} ,
set ( projectEnabled ) {
this . setSelfMonitor ( projectEnabled ) ;
} ,
} ,
selfMonitorProjectFullUrl ( ) {
return ` ${ getBaseURL ( ) } / ${ this . projectPath } ` ;
} ,
selfMonitoringFormText ( ) {
if ( this . projectCreated ) {
return sprintf (
s _ _ (
2021-10-27 15:23:28 +05:30
'SelfMonitoring|Self monitoring is active. Use the %{projectLinkStart}self monitoring project%{projectLinkEnd} to monitor the health of your instance.' ,
2020-03-13 15:44:24 +05:30
) ,
{
projectLinkStart : ` <a href=" ${ this . selfMonitorProjectFullUrl } "> ` ,
projectLinkEnd : '</a>' ,
} ,
false ,
) ;
}
return s _ _ (
2021-10-27 15:23:28 +05:30
'SelfMonitoring|Activate self monitoring to create a project to use to monitor the health of your instance.' ,
2020-03-13 15:44:24 +05:30
) ;
} ,
2021-10-27 15:23:28 +05:30
helpDocsPath ( ) {
return helpPagePath ( 'administration/monitoring/gitlab_self_monitoring_project/index' ) ;
} ,
2020-03-13 15:44:24 +05:30
} ,
watch : {
selfMonitorEnabled ( ) {
this . saveChangesSelfMonitorProject ( ) ;
} ,
showAlert ( ) {
let toastOptions = {
onComplete : ( ) => {
this . resetAlert ( ) ;
} ,
} ;
if ( this . showAlert ) {
if ( this . alertContent . actionName && this . alertContent . actionName . length > 0 ) {
toastOptions = {
... toastOptions ,
action : {
text : this . alertContent . actionText ,
onClick : ( _ , toastObject ) => {
this [ this . alertContent . actionName ] ( ) ;
2021-09-30 23:02:18 +05:30
toastObject . hide ( ) ;
2020-03-13 15:44:24 +05:30
} ,
} ,
} ;
}
this . $toast . show ( this . alertContent . message , toastOptions ) ;
}
} ,
} ,
methods : {
... mapActions ( 'selfMonitoring' , [
'setSelfMonitor' ,
'createProject' ,
'deleteProject' ,
'resetAlert' ,
] ) ,
hideSelfMonitorModal ( ) {
2021-03-11 19:13:27 +05:30
this . $root . $emit ( BV _HIDE _MODAL , this . modalId ) ;
2020-03-13 15:44:24 +05:30
this . setSelfMonitor ( true ) ;
} ,
showSelfMonitorModal ( ) {
2021-03-11 19:13:27 +05:30
this . $root . $emit ( BV _SHOW _MODAL , this . modalId ) ;
2020-03-13 15:44:24 +05:30
} ,
saveChangesSelfMonitorProject ( ) {
if ( this . projectCreated && ! this . projectEnabled ) {
this . showSelfMonitorModal ( ) ;
} else if ( ! this . projectCreated && ! this . loading ) {
this . createProject ( ) ;
}
} ,
viewSelfMonitorProject ( ) {
visitUrl ( this . selfMonitorProjectFullUrl ) ;
} ,
} ,
} ;
< / script >
< template >
< section class = "settings no-animate js-self-monitoring-settings" >
< div class = "settings-header" >
< h4 class = "js-section-header" >
{ { s _ _ ( 'SelfMonitoring|Self monitoring' ) } }
< / h4 >
2021-01-03 14:25:43 +05:30
< gl-button class = "js-settings-toggle" > { { _ _ ( 'Expand' ) } } < / gl-button >
2020-03-13 15:44:24 +05:30
< p class = "js-section-sub-header" >
2021-10-27 15:23:28 +05:30
{ { s _ _ ( 'SelfMonitoring|Activate or deactivate instance self monitoring.' ) } }
< gl-link :href = "helpDocsPath" > { { _ _ ( 'Learn more.' ) } } < / gl-link >
2020-03-13 15:44:24 +05:30
< / p >
< / div >
< div class = "settings-content" >
< form name = "self-monitoring-form" >
2021-10-27 15:23:28 +05:30
< p ref = "selfMonitoringFormText" v -safe -html = " selfMonitoringFormText " > < / p >
2021-04-17 20:07:23 +05:30
< gl-form-group >
2020-03-13 15:44:24 +05:30
< gl-toggle
v - model = "selfMonitorEnabled"
: is - loading = "loading"
2021-04-17 20:07:23 +05:30
: label = "$options.formLabels.createProject"
2020-03-13 15:44:24 +05:30
/ >
< / gl-form-group >
< / form >
< / div >
< gl-modal
2021-10-27 15:23:28 +05:30
: title = "s__('SelfMonitoring|Deactivate self monitoring?')"
2020-03-13 15:44:24 +05:30
: modal - id = "modalId"
2021-10-27 15:23:28 +05:30
: ok - title = "__('Delete self monitoring project')"
2020-03-13 15:44:24 +05:30
: cancel - title = "__('Cancel')"
ok - variant = "danger"
2021-01-03 14:25:43 +05:30
category = "primary"
2020-03-13 15:44:24 +05:30
@ ok = "deleteProject"
@ cancel = "hideSelfMonitorModal"
>
< div >
{ {
s _ _ (
2021-10-27 15:23:28 +05:30
'SelfMonitoring|Deactivating self monitoring deletes the self monitoring project. Are you sure you want to deactivate self monitoring and delete the project?' ,
2020-03-13 15:44:24 +05:30
)
} }
< / div >
< / gl-modal >
< / section >
< / template >