@ -3,12 +3,24 @@
: description = "t('settings', `It's important for the security and performance of your instance that everything is configured correctly. To help you with that we are doing some automatic checks. Please see the linked documentation for more information.`)" >
< div v -for = " ( checks , category ) in results "
: key = "category"
class = "card" >
< div class = "card__header" >
class = "check-c ard" >
< div class = "check-c ard__header" @click ="toggleCollapse(category)" >
< h3 > { { category } } < / h3 >
< Check v -if = " stats [ category ] .successes = = = stats [ category ] .total "
: size = "20"
: fill - color = "'var(--color-success)'" / >
< Check v -else -if = " stats [ category ] .errors > 0 "
: size = "20"
: fill - color = "'var(--color-error)'" / >
< Check v -else -if = " stats [ category ] .warnings > 0 "
: size = "20"
: fill - color = "'var(--color-warning)'" / >
< span >
{ { stats [ category ] . successes } } / { { stats [ category ] . total } }
< / span >
< / div >
< div class = "card__body" >
< div v-for ="(check, name) in checks" :key="name" class="check" >
< div class = "card__body" v-if ="!collapsed[category]" >
< div v-for ="(check, name) in checks" :key="name" class="row- check" :class="['row-check__' + check.severity] " >
< template v-if ="check.severity === 'success'" >
< Check :size ="20" :fill-color ="'var(--color-success)'" / >
< / template >
@ -34,15 +46,33 @@ export default {
data ( ) {
return {
results : [ ] ,
collapsed : { } ,
stats : { } ,
}
} ,
mounted ( ) {
this . loadSetupChecks ( )
} ,
methods : {
toggleCollapse ( category ) {
this . collapsed [ category ] = ! this . collapsed [ category ]
} ,
async loadSetupChecks ( ) {
const { data } = await axios . get ( generateUrl ( '/settings/setupcheck' ) )
console . debug ( data )
const collapsed = { }
const stats = { }
for ( const [ category , checks ] of Object . entries ( data ) ) {
const values = Object . values ( checks )
stats [ category ] = {
total : values . length ,
successes : values . filter ( ( check ) => check . severity === 'success' ) . length ,
warnings : values . filter ( ( check ) => check . severity === 'warning' ) . length ,
errors : values . filter ( ( check ) => check . severity === 'errors' ) . length ,
}
collapsed [ category ] = stats [ category ] . errors > 0
}
this . collapsed = collapsed
this . stats = stats
this . results = data
} ,
} ,
@ -50,15 +80,41 @@ export default {
< / script >
< style lang = "scss" scoped >
. card {
box - shadow : 0 4 px 8 px 0 rgba ( var ( -- color - box - shadow - rgb ) , 0.4 ) ;
. check - c ard {
border : 1 px solid var ( -- color - border ) ;
border - radius : var ( -- border - radius ) ;
& _ _body , & _ _header {
padding : 4 px 8 px ;
}
. check {
& _ _header {
padding : 0.5 rem 1 rem ;
display : flex ;
align - items : center ;
h3 {
margin : 0 ;
}
. material - design - icon {
margin - left : auto ;
margin - right : 0.5 rem ;
}
}
}
. row - check {
color : var ( -- color - text - light ) ;
background - color : var ( -- note - background ) ;
box - shadow : rgba ( 43 , 42 , 51 , 0.05 ) 0 1 px 2 px 0 ;
margin : 0 ;
padding : 0.5 rem 1 rem ;
display : flex ;
align - items : center ;
& _ _success {
-- note - background : rgba ( var ( -- color - success - rgb ) , 0.2 ) ;
-- note - theme : var ( -- color - success ) ;
}
& _ _error {
-- note - background : rgba ( var ( -- color - error - rgb ) , 0.2 ) ;
-- note - theme : var ( -- color - error ) ;
}
& _ _warning {
-- note - background : rgba ( var ( -- color - warning - rgb ) , 0.2 ) ;
-- note - theme : var ( -- color - warning ) ;
}
}
< / style >