forked from AkkomaGang/admin-fe
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 = {
|
||||
state: {
|
||||
description: [],
|
||||
settings: {
|
||||
},
|
||||
settings: {},
|
||||
ignoredIfNotEnabled: ['enabled', 'handler', 'password_authenticator', 'port', 'priv_dir'],
|
||||
loading: true
|
||||
},
|
||||
|
|
@ -20,9 +19,13 @@ const settings = {
|
|||
state.loading = status
|
||||
},
|
||||
SET_SETTINGS: (state, data) => {
|
||||
const newSettings = data.reduce((acc, { key, value }) => {
|
||||
const parsedValue = valueHasTuples(key, value) ? { value } : parseTuples(value, key)
|
||||
acc[key] = { ...acc[key], ...parsedValue }
|
||||
const newSettings = data.reduce((acc, { group, key, value }) => {
|
||||
if (group === 'cors_plug') {
|
||||
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
|
||||
}, state.settings)
|
||||
state.settings = newSettings
|
||||
|
|
|
|||
|
|
@ -1,126 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="http" :model="http" :label-width="labelWidth">
|
||||
<el-form-item label="HTTP settings:"/>
|
||||
<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>
|
||||
<div v-if="!loading">
|
||||
<el-form ref="httpData" :model="httpData" :label-width="labelWidth">
|
||||
<setting :settings-group="http" :data="httpData"/>
|
||||
</el-form>
|
||||
<div class="line"/>
|
||||
<el-form ref="corsPlugMaxAge" :model="corsPlugMaxAge" :label-width="labelWidth">
|
||||
<el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
|
||||
<el-form-item label="Cors plug config:"/>
|
||||
<el-form-item label="Max age (days)">
|
||||
<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>
|
||||
<setting :settings-group="corsPlug" :data="corsPlugData"/>
|
||||
</el-form>
|
||||
<div class="line"/>
|
||||
<el-form ref="httpSecurity" :model="httpSecurity" :label-width="labelWidth">
|
||||
<el-form-item label="HTTP security:"/>
|
||||
<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 ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
|
||||
<setting :settings-group="httpSecurity" :data="httpSecurityData"/>
|
||||
</el-form>
|
||||
<el-form ref="hackneyPools" :model="hackneyPools" :label-width="labelWidth">
|
||||
<div class="line"/>
|
||||
<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>
|
||||
<div class="line"/>
|
||||
<el-form ref="hackneyPoolsData" :model="hackneyPoolsData" :label-width="labelWidth">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
||||
</el-form-item>
|
||||
|
|
@ -131,36 +23,50 @@
|
|||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { mapGetters } from 'vuex'
|
||||
import Setting from './Setting'
|
||||
|
||||
export default {
|
||||
name: 'HTTP',
|
||||
components: { Setting },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'corsPlugCredentials',
|
||||
'corsPlugExpose',
|
||||
'corsPlugHeaders',
|
||||
'corsPlugMaxAge',
|
||||
'corsPlugMethods',
|
||||
'hackneyPools',
|
||||
'http',
|
||||
'httpSecurity',
|
||||
'metricsExporter'
|
||||
'settings'
|
||||
]),
|
||||
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() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '100px' : '210px'
|
||||
return this.isMobile ? '100px' : '240px'
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
}
|
||||
},
|
||||
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() {
|
||||
try {
|
||||
await this.$store.dispatch('SubmitChanges')
|
||||
|
|
|
|||
Loading…
Reference in a new issue