Configure HTTP settings with data from API description
This commit is contained in:
Angelina Filippova
parent
755cfd8f44
commit
a9453448b5
2 changed files with 48 additions and 139 deletions
|
|
@ -4,8 +4,7 @@ import { filterIgnored, parseTuples, valueHasTuples, wrapConfig } from './normal
|
||||||
const settings = {
|
const settings = {
|
||||||
state: {
|
state: {
|
||||||
description: [],
|
description: [],
|
||||||
settings: {
|
settings: {},
|
||||||
},
|
|
||||||
ignoredIfNotEnabled: ['enabled', 'handler', 'password_authenticator', 'port', 'priv_dir'],
|
ignoredIfNotEnabled: ['enabled', 'handler', 'password_authenticator', 'port', 'priv_dir'],
|
||||||
loading: true
|
loading: true
|
||||||
},
|
},
|
||||||
|
|
@ -20,9 +19,13 @@ const settings = {
|
||||||
state.loading = status
|
state.loading = status
|
||||||
},
|
},
|
||||||
SET_SETTINGS: (state, data) => {
|
SET_SETTINGS: (state, data) => {
|
||||||
const newSettings = data.reduce((acc, { key, value }) => {
|
const newSettings = data.reduce((acc, { group, key, value }) => {
|
||||||
const parsedValue = valueHasTuples(key, value) ? { value } : parseTuples(value, key)
|
if (group === 'cors_plug') {
|
||||||
acc[key] = { ...acc[key], ...parsedValue }
|
acc[':cors_plug'] = { ...acc[':cors_plug'], [key]: value }
|
||||||
|
} else {
|
||||||
|
const parsedValue = valueHasTuples(key, value) ? { value } : parseTuples(value, key)
|
||||||
|
acc[key] = { ...acc[key], ...parsedValue }
|
||||||
|
}
|
||||||
return acc
|
return acc
|
||||||
}, state.settings)
|
}, state.settings)
|
||||||
state.settings = newSettings
|
state.settings = newSettings
|
||||||
|
|
|
||||||
|
|
@ -1,126 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div v-if="!loading">
|
||||||
<el-form ref="http" :model="http" :label-width="labelWidth">
|
<el-form ref="httpData" :model="httpData" :label-width="labelWidth">
|
||||||
<el-form-item label="HTTP settings:"/>
|
<setting :settings-group="http" :data="httpData"/>
|
||||||
<el-form-item label="Proxy url">
|
|
||||||
<el-input :value="http.proxy_url" @input="updateSetting($event, 'http', 'proxy_url')"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Send user agent">
|
|
||||||
<el-switch :value="http.send_user_agent" @change="updateSetting($event, 'http', 'send_user_agent')"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Adapter:"/>
|
|
||||||
<el-form-item label="Versions">
|
|
||||||
<el-select :value="http.adapter.versions || []" multiple filterable allow-create @change="processNestedData($event, 'http', 'adapter', 'versions')">
|
|
||||||
<el-option value=":tlsv1"/>
|
|
||||||
<el-option value=":'tlsv1.1'"/>
|
|
||||||
<el-option value=":'tlsv1.2'"/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="line"/>
|
<el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
|
||||||
<el-form ref="corsPlugMaxAge" :model="corsPlugMaxAge" :label-width="labelWidth">
|
|
||||||
<el-form-item label="Cors plug config:"/>
|
<el-form-item label="Cors plug config:"/>
|
||||||
<el-form-item label="Max age (days)">
|
<setting :settings-group="corsPlug" :data="corsPlugData"/>
|
||||||
<el-input-number :value="corsPlugMaxAge.value / 86400" :step="1" :min="0" size="large" @change="updateSetting($event * 86400, 'max_age', 'value')"/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-form ref="corsPlugMethods" :model="corsPlugMethods" :label-width="labelWidth">
|
|
||||||
<el-form-item label="Methods">
|
|
||||||
<el-select :value="corsPlugMethods.value || []" multiple filterable allow-create @change="updateSetting($event, 'methods', 'value')">
|
|
||||||
<el-option value="POST"/>
|
|
||||||
<el-option value="PUT"/>
|
|
||||||
<el-option value="DELETE"/>
|
|
||||||
<el-option value="GET"/>
|
|
||||||
<el-option value="PATCH"/>
|
|
||||||
<el-option value="OPTIONS"/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-form ref="corsPlugExpose" :model="corsPlugExpose" :label-width="labelWidth">
|
|
||||||
<el-form-item label="Expose">
|
|
||||||
<el-select :value="corsPlugExpose.value || []" multiple filterable allow-create @change="updateSetting($event, 'expose', 'value')">
|
|
||||||
<el-option value="Link"/>
|
|
||||||
<el-option value="X-RateLimit-Reset"/>
|
|
||||||
<el-option value="X-RateLimit-Limit"/>
|
|
||||||
<el-option value="X-RateLimit-Remaining"/>
|
|
||||||
<el-option value="X-Request-Id"/>
|
|
||||||
<el-option value="Idempotency-Key"/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-form ref="corsPlugCredentials" :model="corsPlugCredentials" :label-width="labelWidth">
|
|
||||||
<el-form-item label="Credentials">
|
|
||||||
<el-switch :value="corsPlugCredentials.value" @change="updateSetting($event, 'credentials', 'value')"/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-form ref="corsPlugHeaders" :model="corsPlugHeaders" :label-width="labelWidth">
|
|
||||||
<el-form-item label="Headers">
|
|
||||||
<el-select :value="corsPlugHeaders.value || []" multiple filterable allow-create @change="updateSetting($event, 'headers', 'value')">
|
|
||||||
<el-option value="Authorization"/>
|
|
||||||
<el-option value="Content-Type"/>
|
|
||||||
<el-option value="Idempotency-Key"/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="line"/>
|
<div class="line"/>
|
||||||
<el-form ref="httpSecurity" :model="httpSecurity" :label-width="labelWidth">
|
<el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
|
||||||
<el-form-item label="HTTP security:"/>
|
<setting :settings-group="httpSecurity" :data="httpSecurityData"/>
|
||||||
<el-form-item label="Security policy">
|
|
||||||
<el-switch :value="httpSecurity.enabled" @change="updateSetting($event, 'http_security', 'enabled')"/>
|
|
||||||
<p class="expl">Whether the managed content security policy is enabled</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="STS">
|
|
||||||
<el-switch :value="httpSecurity.sts" @change="updateSetting($event, 'http_security', 'sts')"/>
|
|
||||||
<p class="expl">Whether to additionally send a <span class="code">Strict-Transport-Security header</span></p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="STS max age (days)">
|
|
||||||
<el-input-number :value="httpSecurity.sts_max_age / 86400" :step="1" :min="0" size="large" @change="updateSetting($event * 86400, 'http_security', 'sts_max_age')"/>
|
|
||||||
<p class="expl">The maximum age for the <span class="code">Strict-Transport-Security</span> header if sent</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="CT max age (days)">
|
|
||||||
<el-input-number :value="httpSecurity.ct_max_age / 86400" :step="1" :min="0" size="large" @change="updateSetting($event * 86400, 'http_security', 'ct_max_age')"/>
|
|
||||||
<p class="expl">The maximum age for the <span class="code">Expect-CT</span> header if sent</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Referrer policy">
|
|
||||||
<el-select :value="httpSecurity.referrer_policy" clearable @change="updateSetting($event, 'http_security', 'referrer_policy')">
|
|
||||||
<el-option label="same-origin" value="same-origin"/>
|
|
||||||
<el-option label="no-referrer" value="no-referrer"/>
|
|
||||||
</el-select>
|
|
||||||
<p class="expl">The referrer policy to use</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Report URI">
|
|
||||||
<el-input :value="httpSecurity.report_uri" @input="updateSetting($event, 'http_security', 'report_uri')"/>
|
|
||||||
<p class="expl">Adds the specified url to <span class="code">report-uri</span> and <span class="code">report-to</span> group in CSP header</p>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-form ref="hackneyPools" :model="hackneyPools" :label-width="labelWidth">
|
<div class="line"/>
|
||||||
<div class="line"/>
|
<el-form ref="hackneyPoolsData" :model="hackneyPoolsData" :label-width="labelWidth">
|
||||||
<el-form-item label="Hackney pools:"/>
|
|
||||||
<el-form-item label="Federation:"/>
|
|
||||||
<el-form-item label="Max connections">
|
|
||||||
<el-input-number :value="hackneyPools.federation.max_connections" :step="1" :min="0" size="large" @change="processNestedData($event, 'hackney_pools', 'federation', 'max_connections')"/>
|
|
||||||
<p class="expl">You may want this pool <span class="code">max_connections</span> to be at least equal to the number of federator jobs + retry queue jobs.</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Timeout (s)">
|
|
||||||
<el-input-number :value="hackneyPools.federation.timeout / 1000" :step="10" :min="0" size="large" @change="processNestedData($event * 1000, 'hackney_pools', 'federation', 'timeout')"/>
|
|
||||||
<p class="expl">For the federation jobs</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Media:"/>
|
|
||||||
<el-form-item label="Max connections">
|
|
||||||
<el-input-number :value="hackneyPools.media.max_connections" :step="1" :min="0" size="large" @change="processNestedData($event, 'hackney_pools', 'media', 'max_connections')"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Timeout (s)">
|
|
||||||
<el-input-number :value="hackneyPools.media.timeout / 1000" :step="10" :min="0" size="large" @change="processNestedData($event * 1000, 'hackney_pools', 'media', 'timeout')"/>
|
|
||||||
<p class="expl">For rich media, media proxy</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Upload:"/>
|
|
||||||
<el-form-item label="Max connections">
|
|
||||||
<el-input-number :value="hackneyPools.upload.max_connections" :step="1" :min="0" size="large" @change="processNestedData($event, 'hackney_pools', 'upload', 'max_connections')"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Timeout (s)">
|
|
||||||
<el-input-number :value="hackneyPools.upload.timeout / 1000" :step="10" :min="0" size="large" @change="processNestedData($event * 1000, 'hackney_pools', 'upload', 'timeout')"/>
|
|
||||||
<p class="expl">For uploaded media (if using a remote uploader and <span class="code">proxy_remote: true</span>)</p>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -131,36 +23,50 @@
|
||||||
<script>
|
<script>
|
||||||
import i18n from '@/lang'
|
import i18n from '@/lang'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
|
import Setting from './Setting'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'HTTP',
|
name: 'HTTP',
|
||||||
|
components: { Setting },
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters([
|
...mapGetters([
|
||||||
'corsPlugCredentials',
|
'settings'
|
||||||
'corsPlugExpose',
|
|
||||||
'corsPlugHeaders',
|
|
||||||
'corsPlugMaxAge',
|
|
||||||
'corsPlugMethods',
|
|
||||||
'hackneyPools',
|
|
||||||
'http',
|
|
||||||
'httpSecurity',
|
|
||||||
'metricsExporter'
|
|
||||||
]),
|
]),
|
||||||
|
corsPlug() {
|
||||||
|
return this.settings.description.find(setting => setting.group === ':cors_plug')
|
||||||
|
},
|
||||||
|
corsPlugData() {
|
||||||
|
return this.settings.settings[':cors_plug']
|
||||||
|
},
|
||||||
|
hackneyPools() {
|
||||||
|
return this.settings.description.find(setting => setting.key === ':hackney_pools')
|
||||||
|
},
|
||||||
|
hackneyPoolsData() {
|
||||||
|
return this.settings.settings[':hackney_pools']
|
||||||
|
},
|
||||||
|
http() {
|
||||||
|
return this.settings.description.find(setting => setting.key === ':http')
|
||||||
|
},
|
||||||
|
httpData() {
|
||||||
|
return this.settings.settings[':http']
|
||||||
|
},
|
||||||
|
httpSecurity() {
|
||||||
|
return this.settings.description.find(setting => setting.key === ':http_security')
|
||||||
|
},
|
||||||
|
httpSecurityData() {
|
||||||
|
return this.settings.settings[':http_security']
|
||||||
|
},
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '210px'
|
return this.isMobile ? '100px' : '240px'
|
||||||
|
},
|
||||||
|
loading() {
|
||||||
|
return this.settings.loading
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
processNestedData(value, tab, inputName, childName) {
|
|
||||||
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
|
|
||||||
this.updateSetting(updatedValue, tab, inputName)
|
|
||||||
},
|
|
||||||
updateSetting(value, tab, input) {
|
|
||||||
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
|
|
||||||
},
|
|
||||||
async onSubmit() {
|
async onSubmit() {
|
||||||
try {
|
try {
|
||||||
await this.$store.dispatch('SubmitChanges')
|
await this.$store.dispatch('SubmitChanges')
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue