Add ability to evict and ban multiple URLs

This commit is contained in:
Angelina Filippova 2020-07-07 23:54:11 +03:00
parent 0b36c5bbb0
commit a2649dbb64
2 changed files with 25 additions and 7 deletions

View file

@ -99,7 +99,10 @@ export default {
evict: 'Evict', evict: 'Evict',
evictedMessage: 'This URL was evicted', evictedMessage: 'This URL was evicted',
actions: 'Actions', actions: 'Actions',
remove: 'Remove from Cachex' remove: 'Remove from Cachex',
evictObjectsHeader: 'Evict object from the MediaProxy cache',
listBannedUrlsHeader: 'List of all banned MediaProxy URLs',
multipleInput: 'You can enter a single URL or several comma separated links'
}, },
documentation: { documentation: {
documentation: 'Documentation', documentation: 'Documentation',

View file

@ -4,17 +4,20 @@
<h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1> <h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
<reboot-button/> <reboot-button/>
</div> </div>
<p class="media-proxy-cache-header">Evict object from the MediaProxy cache</p> <p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
<div class="url-input-container"> <div class="url-input-container">
<el-input <el-input
:placeholder="$t('mediaProxyCache.url')" :placeholder="$t('mediaProxyCache.url')"
v-model="url" v-model="urls"
type="textarea"
autosize
clearable clearable
class="url-input"/> class="url-input"/>
<el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox> <el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
<el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button> <el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
</div> </div>
<p class="media-proxy-cache-header">List of all banned MediaProxy URLs</p> <span class="expl url-input-expl">{{ $t('mediaProxyCache.multipleInput') }}</span>
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.listBannedUrlsHeader') }}</p>
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="bannedUrls" :data="bannedUrls"
@ -48,7 +51,7 @@ export default {
components: { RebootButton }, components: { RebootButton },
data() { data() {
return { return {
url: '', urls: '',
ban: false, ban: false,
selectedUrls: [] selectedUrls: []
} }
@ -71,7 +74,7 @@ export default {
}, },
methods: { methods: {
evictURL() { evictURL() {
const urls = typeof this.url === 'string' ? [this.url] : this.url const urls = this.urls.split(',').map(url => url.trim()).filter(el => el.length > 0)
this.$store.dispatch('PurgeUrls', { urls, ban: this.ban }) this.$store.dispatch('PurgeUrls', { urls, ban: this.ban })
this.url = '' this.url = ''
}, },
@ -90,6 +93,15 @@ export default {
h1 { h1 {
margin: 0; margin: 0;
} }
.expl {
color: #666666;
font-size: 13px;
line-height: 22px;
margin: 5px 0 0 0;
overflow-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
}
.banned-urls-table { .banned-urls-table {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
@ -114,7 +126,10 @@ h1 {
.url-input-container { .url-input-container {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin: 15px 15px; margin: 15px 15px 5px 15px;
}
.url-input-expl {
margin-left: 15px;
} }
@media only screen and (max-width:480px) { @media only screen and (max-width:480px) {