248 lines
11 KiB
Vue
248 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<el-form ref="loggerBackends" :model="loggerBackends" :label-width="labelWidth">
|
||
<el-form-item label="Backends">
|
||
<el-select :value="loggerBackendsValue" multiple @change="updateloggerBackends($event, 'backends', 'value')">
|
||
<el-option
|
||
v-for="(item, index) in loggerBackendsOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"/>
|
||
</el-select>
|
||
<p class="expl">List of instances to remove medias from</p>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="line"/>
|
||
<el-form ref="consoleLogger" :model="consoleLogger" :label-width="labelWidth">
|
||
<el-form-item label="Console logger:"/>
|
||
<el-form-item label="Level">
|
||
<el-select :value="consoleLogger.level" @change="updateSetting($event, 'console', 'level')">
|
||
<el-option value=":debug" label=":debug - for debug-related messages"/>
|
||
<el-option value=":info" label=":info - for information of any kind"/>
|
||
<el-option value=":warn" label=":warn - for warnings"/>
|
||
<el-option value=":error" label=":error - for errors"/>
|
||
</el-select>
|
||
<p class="expl">The level to be logged by this backend. Note that messages are filtered by the general
|
||
<span class="code">:level</span> configuration for the <span class="code">:logger</span> application first.</p>
|
||
</el-form-item>
|
||
<el-form-item label="Format">
|
||
<el-input :value="consoleLogger.format" @input="updateSetting($event, 'console', 'format')"/>
|
||
<p class="expl">The format message used to print logs. </p>
|
||
</el-form-item>
|
||
<el-form-item label="Metadata">
|
||
<el-select :value="consoleLogger.metadata || []" multiple filterable allow-create @change="updateSetting($event, 'console', 'metadata')">
|
||
<el-option value=":all"/>
|
||
<el-option value=":request_id"/>
|
||
<el-option value=":line"/>
|
||
<el-option value=":user_id"/>
|
||
<el-option value=":application"/>
|
||
<el-option value=":function"/>
|
||
<el-option value=":file"/>
|
||
<el-option value=":pid"/>
|
||
<el-option value=":crash_reason"/>
|
||
<el-option value=":initial_call"/>
|
||
<el-option value=":registered_name"/>
|
||
<el-option value=":none"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="Device">
|
||
<el-input :value="consoleLogger.device" @input="updateSetting($event, 'console', 'device')"/>
|
||
<p class="expl">The device to log error messages to. Defaults to <span class="code">:user</span>
|
||
but can be changed to something else such as <span class="code">:standard_error</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Max buffer">
|
||
<el-input-number :value="consoleLogger.max_buffer" :step="1" :min="0" size="large" @change="updateSetting($event, 'console', 'max_buffer')"/>
|
||
<p class="expl">Maximum events to buffer while waiting for a confirmation from the IO device (default: 32). Once the buffer is full, the backend will block until a confirmation is received.</p>
|
||
</el-form-item>
|
||
<el-form-item label="Colors:"/>
|
||
<el-form-item label="Enabled">
|
||
<el-switch :value="consoleLogger.colors.enabled" @change="processNestedData($event, 'console', 'colors', 'enabled')"/>
|
||
</el-form-item>
|
||
<el-form-item label="Debug message">
|
||
<el-input :value="consoleLogger.colors.debug" @input="processNestedData($event, 'console', 'colors', 'debug')"/>
|
||
<p class="expl">Defaults to: <span class="code">:cyan</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Info message">
|
||
<el-input :value="consoleLogger.colors.info" @input="processNestedData($event, 'console', 'colors', 'info')"/>
|
||
<p class="expl">Defaults to: <span class="code">:normal</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Warn message">
|
||
<el-input :value="consoleLogger.colors.warn" @input="processNestedData($event, 'console', 'colors', 'warn')"/>
|
||
<p class="expl">Defaults to: <span class="code">:yellow</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Error message">
|
||
<el-input :value="consoleLogger.colors.error" @input="processNestedData($event, 'console', 'colors', 'error')"/>
|
||
<p class="expl">Defaults to: <span class="code">:red</span></p>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="line"/>
|
||
<el-form ref="exsyslogger" :model="exsyslogger" :label-width="labelWidth">
|
||
<el-form-item label="ExSyslogger:"/>
|
||
<el-form-item label="Level">
|
||
<el-select :value="exsyslogger.level" @change="updateSetting($event, 'ex_syslogger', 'level')">
|
||
<el-option value=":debug" label=":debug - for debug-related messages"/>
|
||
<el-option value=":info" label=":info - for information of any kind"/>
|
||
<el-option value=":warn" label=":warn - for warnings"/>
|
||
<el-option value=":error" label=":error - for errors"/>
|
||
</el-select>
|
||
<p class="expl">Logging level. It defaults to <span class="code">:info.</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Format">
|
||
<el-input :value="exsyslogger.format" @input="updateSetting($event, 'ex_syslogger', 'format')"/>
|
||
<p class="expl">The format message used to print logs.</p>
|
||
</el-form-item>
|
||
<el-form-item label="Formatter">
|
||
<el-input :value="exsyslogger.formatter" @input="updateSetting($event, 'ex_syslogger', 'formatter')"/>
|
||
<p class="expl">Formatter that will be used to format the log. It default to <span class="code">Logger.Formatter</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Metadata">
|
||
<el-select :value="exsyslogger.metadata || []" multiple filterable allow-create @change="updateSetting($event, 'ex_syslogger', 'metadata')">
|
||
<el-option value=":all"/>
|
||
<el-option value=":request_id"/>
|
||
<el-option value=":line"/>
|
||
<el-option value=":user_id"/>
|
||
<el-option value=":application"/>
|
||
<el-option value=":function"/>
|
||
<el-option value=":file"/>
|
||
<el-option value=":pid"/>
|
||
<el-option value=":crash_reason"/>
|
||
<el-option value=":initial_call"/>
|
||
<el-option value=":registered_name"/>
|
||
<el-option value=":none"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="Ident">
|
||
<el-input :value="exsyslogger.ident" @input="updateSetting($event, 'ex_syslogger', 'ident')"/>
|
||
<p class="expl">A string that’s prepended to every message, and is typically set to the app name. It defaults to <span class="code">Elixir</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Facility">
|
||
<el-input :value="exsyslogger.facility" @input="updateSetting($event, 'ex_syslogger', 'facility')"/>
|
||
<p class="expl">Syslog facility to be used. It defaults to <span class="code">:local0</span></p>
|
||
</el-form-item>
|
||
<el-form-item label="Options">
|
||
<el-select :value="exsyslogger.option || []" multiple @change="updateSetting($event, 'ex_syslogger', 'option')">
|
||
<el-option value=":pid"/>
|
||
<el-option value=":cons"/>
|
||
<el-option value=":odelay"/>
|
||
<el-option value=":ndelay"/>
|
||
<el-option value=":perror"/>
|
||
</el-select>
|
||
<p class="expl">Syslog option to be used. It defaults to <span class="code">:ndelay.</span></p>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="line"/>
|
||
<el-form ref="webhookUrl" :model="webhookUrl" :label-width="labelWidth">
|
||
<el-form-item label="Quack logger:"/>
|
||
<el-form-item label="Webhook URL">
|
||
<el-input :value="webhookUrl.value" @input="updateSetting($event, 'webhook_url', 'value')"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-form ref="level" :model="level" :label-width="labelWidth">
|
||
<el-form-item label="Level">
|
||
<el-select :value="level.value" @change="updateSetting($event, 'level', 'value')">
|
||
<el-option value=":debug" label=":debug - for debug-related messages"/>
|
||
<el-option value=":info" label=":info - for information of any kind"/>
|
||
<el-option value=":warn" label=":warn - for warnings"/>
|
||
<el-option value=":error" label=":error - for errors"/>
|
||
</el-select>
|
||
<p class="expl">Logging level. It defaults to <span class="code">:info.</span></p>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-form ref="meta" :model="meta" :label-width="labelWidth">
|
||
<el-form-item label="Metadata">
|
||
<el-select :value="meta.value || []" multiple filterable allow-create @change="updateSetting($event, 'meta', 'value')">
|
||
<el-option value=":all"/>
|
||
<el-option value=":module"/>
|
||
<el-option value=":function"/>
|
||
<el-option value=":file"/>
|
||
<el-option value=":application"/>
|
||
<el-option value=":line"/>
|
||
<el-option value=":pid"/>
|
||
<el-option value=":crash_reason"/>
|
||
<el-option value=":initial_call"/>
|
||
<el-option value=":registered_name"/>
|
||
<el-option value=":none"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
import i18n from '@/lang'
|
||
import { options } from './options'
|
||
|
||
export default {
|
||
name: 'Logger',
|
||
computed: {
|
||
...mapGetters([
|
||
'consoleConfig',
|
||
'exsysloggerConfig',
|
||
'levelConfig',
|
||
'loggerBackendsConfig',
|
||
'metaConfig',
|
||
'webhookUrlConfig'
|
||
]),
|
||
consoleLogger() {
|
||
return this.consoleConfig
|
||
},
|
||
exsyslogger() {
|
||
return this.exsysloggerConfig
|
||
},
|
||
level() {
|
||
return this.levelConfig
|
||
},
|
||
loggerBackends() {
|
||
return this.loggerBackendsConfig
|
||
},
|
||
loggerBackendsValue() {
|
||
return this.loggerBackends.value ? this.loggerBackends.value.map(el => JSON.stringify(el)) : []
|
||
},
|
||
loggerBackendsOptions() {
|
||
return options.loggerBackendsOptions
|
||
},
|
||
meta() {
|
||
return this.metaConfig
|
||
},
|
||
isMobile() {
|
||
return this.$store.state.app.device === 'mobile'
|
||
},
|
||
labelWidth() {
|
||
return this.isMobile ? '100px' : '210px'
|
||
},
|
||
webhookUrl() {
|
||
return this.webhookUrlConfig
|
||
}
|
||
},
|
||
methods: {
|
||
processNestedData(value, tab, section, input) {
|
||
const updatedValue = { ...this.$store.state.settings.settings[tab][section], ...{ [input]: value }}
|
||
this.updateSetting(updatedValue, tab, section)
|
||
},
|
||
updateloggerBackends(value, tab, input) {
|
||
const parseValue = value.map(el => JSON.parse(el))
|
||
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: parseValue }})
|
||
},
|
||
updateSetting(value, tab, input) {
|
||
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
|
||
},
|
||
onSubmit() {
|
||
this.$store.dispatch('SubmitChanges')
|
||
this.$message({
|
||
type: 'success',
|
||
message: i18n.t('settings.success')
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style rel='stylesheet/scss' lang='scss'>
|
||
@import '../styles/main';
|
||
@include settings
|
||
</style>
|