forked from AkkomaGang/admin-fe
Merge branch 'feature/mediaproxy-cache-pagination-and-search' into 'develop'
Mediaproxy cache pagination and search See merge request pleroma/admin-fe!155
This commit is contained in:
commit
eb2b2b2e90
5 changed files with 85 additions and 18 deletions
|
@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||||
- Ability to configure S3 settings on Upload tab, Pleroma.Web.ApiSpec.CastAndValidate and :modules settings on Other tab, Pools, Connections pools and Hackney pools settings on Job Queue tab, :restrict_unauthenticated settings on Authentication tab, :favicons and :welcome settings on Instance tab, :frontends settings on Frontend tab
|
- Ability to configure S3 settings on Upload tab, Pleroma.Web.ApiSpec.CastAndValidate and :modules settings on Other tab, Pools, Connections pools and Hackney pools settings on Job Queue tab, :restrict_unauthenticated settings on Authentication tab, :favicons and :welcome settings on Instance tab, :frontends settings on Frontend tab
|
||||||
- Show number of open reports in Sidebar Menu
|
- Show number of open reports in Sidebar Menu
|
||||||
- Add confirmation message when deleting a user
|
- Add confirmation message when deleting a user
|
||||||
|
- Add new MediaProxy Cache with ability to evict and ban objects from the MediaProxy cache
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
|
|
||||||
|
@ -43,6 +44,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||||
- Send `true` and `false` as booleans if they are values of single selects on the Settings page
|
- Send `true` and `false` as booleans if they are values of single selects on the Settings page
|
||||||
- Fix sorting users on Users page if there is an acount with missing nickname or ID
|
- Fix sorting users on Users page if there is an acount with missing nickname or ID
|
||||||
- Add new type of settings: `['string', 'image']`. Render Image upload Input depending on the type of setting, not its key
|
- Add new type of settings: `['string', 'image']`. Render Image upload Input depending on the type of setting, not its key
|
||||||
|
- Fix display `Pending` tag and filter by Pending Approval status
|
||||||
|
|
||||||
## [2.0.3] - 2020-04-29
|
## [2.0.3] - 2020-04-29
|
||||||
|
|
||||||
|
|
|
@ -2,10 +2,10 @@ import request from '@/utils/request'
|
||||||
import { getToken } from '@/utils/auth'
|
import { getToken } from '@/utils/auth'
|
||||||
import { baseName } from './utils'
|
import { baseName } from './utils'
|
||||||
|
|
||||||
export async function listBannedUrls(page, authHost, token) {
|
export async function listBannedUrls(page, pageSize, authHost, token) {
|
||||||
return await request({
|
return await request({
|
||||||
baseURL: baseName(authHost),
|
baseURL: baseName(authHost),
|
||||||
url: `/api/pleroma/admin/media_proxy_caches?page=${page}`,
|
url: `/api/pleroma/admin/media_proxy_caches?page=${page}&page_size=${pageSize}`,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
headers: authHeaders(token)
|
headers: authHeaders(token)
|
||||||
})
|
})
|
||||||
|
@ -31,4 +31,13 @@ export async function removeBannedUrls(urls, authHost, token) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function searchBannedUrls(query, page, pageSize, authHost, token) {
|
||||||
|
return await request({
|
||||||
|
baseURL: baseName(authHost),
|
||||||
|
url: `/api/pleroma/admin/media_proxy_caches?query=${query}&page=${page}&page_size=${pageSize}`,
|
||||||
|
method: 'get',
|
||||||
|
headers: authHeaders(token)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}
|
const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}
|
||||||
|
|
|
@ -1,20 +1,21 @@
|
||||||
import { listBannedUrls, purgeUrls, removeBannedUrls } from '@/api/mediaProxyCache'
|
import { listBannedUrls, purgeUrls, removeBannedUrls, searchBannedUrls } from '@/api/mediaProxyCache'
|
||||||
import { Message } from 'element-ui'
|
import { Message } from 'element-ui'
|
||||||
import i18n from '@/lang'
|
import i18n from '@/lang'
|
||||||
|
|
||||||
const mediaProxyCache = {
|
const mediaProxyCache = {
|
||||||
state: {
|
state: {
|
||||||
bannedUrls: [],
|
bannedUrls: [],
|
||||||
bannedUrlsCount: 0,
|
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
loading: false
|
loading: false,
|
||||||
|
pageSize: 50,
|
||||||
|
totalUrlsCount: 0
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SET_BANNED_URLS: (state, urls) => {
|
SET_BANNED_URLS: (state, urls) => {
|
||||||
state.bannedUrls = urls.map(el => { return { url: el } })
|
state.bannedUrls = urls.map(el => { return { url: el } })
|
||||||
},
|
},
|
||||||
SET_BANNED_URLS_COUNT: (state, count) => {
|
SET_TOTAL_URLS_COUNT: (state, count) => {
|
||||||
state.bannedUrlsCount = count
|
state.totalUrlsCount = count
|
||||||
},
|
},
|
||||||
SET_LOADING: (state, status) => {
|
SET_LOADING: (state, status) => {
|
||||||
state.loading = status
|
state.loading = status
|
||||||
|
@ -24,11 +25,11 @@ const mediaProxyCache = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
async ListBannedUrls({ commit, getters }, page) {
|
async ListBannedUrls({ commit, getters, state }, { page }) {
|
||||||
commit('SET_LOADING', true)
|
commit('SET_LOADING', true)
|
||||||
const response = await listBannedUrls(page, getters.authHost, getters.token)
|
const response = await listBannedUrls(page, state.pageSize, getters.authHost, getters.token)
|
||||||
commit('SET_BANNED_URLS', response.data.urls)
|
commit('SET_BANNED_URLS', response.data.urls)
|
||||||
// commit('SET_BANNED_URLS_COUNT', count)
|
commit('SET_TOTAL_URLS_COUNT', response.data.count)
|
||||||
commit('SET_PAGE', page)
|
commit('SET_PAGE', page)
|
||||||
commit('SET_LOADING', false)
|
commit('SET_LOADING', false)
|
||||||
},
|
},
|
||||||
|
@ -40,12 +41,27 @@ const mediaProxyCache = {
|
||||||
duration: 5 * 1000
|
duration: 5 * 1000
|
||||||
})
|
})
|
||||||
if (ban) {
|
if (ban) {
|
||||||
dispatch('ListBannedUrls', state.currentPage)
|
dispatch('ListBannedUrls', { page: state.currentPage })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async RemoveBannedUrls({ dispatch, getters, state }, urls) {
|
async RemoveBannedUrls({ dispatch, getters, state }, urls) {
|
||||||
await removeBannedUrls(urls, getters.authHost, getters.token)
|
await removeBannedUrls(urls, getters.authHost, getters.token)
|
||||||
dispatch('ListBannedUrls', state.currentPage)
|
dispatch('ListBannedUrls', { page: state.currentPage })
|
||||||
|
},
|
||||||
|
async SearchUrls({ commit, dispatch, getters, state }, { query, page }) {
|
||||||
|
if (query.length === 0) {
|
||||||
|
commit('SET_SEARCH_QUERY', query)
|
||||||
|
dispatch('ListBannedUrls', { page })
|
||||||
|
} else {
|
||||||
|
commit('SET_LOADING', true)
|
||||||
|
commit('SET_SEARCH_QUERY', query)
|
||||||
|
|
||||||
|
const response = await searchBannedUrls(query, page, state.pageSize, getters.authHost, getters.token)
|
||||||
|
commit('SET_BANNED_URLS', response.data.urls)
|
||||||
|
commit('SET_TOTAL_URLS_COUNT', response.data.count)
|
||||||
|
commit('SET_PAGE', page)
|
||||||
|
commit('SET_LOADING', false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -49,7 +49,7 @@
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>{{ $t('invites.tokenCreated') }}</span>
|
<span>{{ $t('invites.tokenCreated') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<el-form label-width="80px" class="new-token-card">
|
<el-form label-width="85px" class="new-token-card">
|
||||||
<el-form-item :label="$t('invites.inviteLink')">
|
<el-form-item :label="$t('invites.inviteLink')">
|
||||||
<el-link :href="inviteLink" :underline="false" target="_blank">
|
<el-link :href="inviteLink" :underline="false" target="_blank">
|
||||||
{{ inviteLink }}
|
{{ inviteLink }}
|
||||||
|
@ -186,7 +186,7 @@ export default {
|
||||||
'authHost'
|
'authHost'
|
||||||
]),
|
]),
|
||||||
getLabelWidth() {
|
getLabelWidth() {
|
||||||
return this.isDesktop ? '100px' : '80px'
|
return this.isDesktop ? '100px' : '85px'
|
||||||
},
|
},
|
||||||
inviteLink() {
|
inviteLink() {
|
||||||
return `${baseName(this.authHost)}/registration/${this.newToken.token}`
|
return `${baseName(this.authHost)}/registration/${this.newToken.token}`
|
||||||
|
|
|
@ -27,9 +27,16 @@
|
||||||
type="selection"
|
type="selection"
|
||||||
align="center"
|
align="center"
|
||||||
width="55"/>
|
width="55"/>
|
||||||
<el-table-column
|
<el-table-column :min-width="isDesktop ? 320 : 120" prop="url">
|
||||||
:min-width="isDesktop ? 320 : 120"
|
<template slot="header" slot-scope="scope">
|
||||||
prop="url"/>
|
<el-input
|
||||||
|
:placeholder="$t('users.search')"
|
||||||
|
v-model="search"
|
||||||
|
size="mini"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
@input="handleDebounceSearchInput"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column>
|
<el-table-column>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<el-button
|
<el-button
|
||||||
|
@ -46,10 +53,21 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<div v-if="!loading" class="pagination">
|
||||||
|
<el-pagination
|
||||||
|
:total="urlsCount"
|
||||||
|
:current-page="currentPage"
|
||||||
|
:page-size="pageSize"
|
||||||
|
hide-on-single-page
|
||||||
|
layout="prev, pager, next"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import debounce from 'lodash.debounce'
|
||||||
import RebootButton from '@/components/RebootButton'
|
import RebootButton from '@/components/RebootButton'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -59,6 +77,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
urls: '',
|
urls: '',
|
||||||
ban: false,
|
ban: false,
|
||||||
|
search: '',
|
||||||
selectedUrls: []
|
selectedUrls: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -66,20 +85,34 @@ export default {
|
||||||
bannedUrls() {
|
bannedUrls() {
|
||||||
return this.$store.state.mediaProxyCache.bannedUrls
|
return this.$store.state.mediaProxyCache.bannedUrls
|
||||||
},
|
},
|
||||||
|
currentPage() {
|
||||||
|
return this.$store.state.mediaProxyCache.currentPage
|
||||||
|
},
|
||||||
isDesktop() {
|
isDesktop() {
|
||||||
return this.$store.state.app.device === 'desktop'
|
return this.$store.state.app.device === 'desktop'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.$store.state.mediaProxyCache.loading
|
return this.$store.state.mediaProxyCache.loading
|
||||||
},
|
},
|
||||||
|
pageSize() {
|
||||||
|
return this.$store.state.mediaProxyCache.pageSize
|
||||||
|
},
|
||||||
removeSelectedDisabled() {
|
removeSelectedDisabled() {
|
||||||
return this.selectedUrls.length === 0
|
return this.selectedUrls.length === 0
|
||||||
|
},
|
||||||
|
urlsCount() {
|
||||||
|
return this.$store.state.mediaProxyCache.totalUrlsCount
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.handleDebounceSearchInput = debounce((query) => {
|
||||||
|
this.$store.dispatch('SearchUrls', { query, page: 1 })
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch('GetNodeInfo')
|
this.$store.dispatch('GetNodeInfo')
|
||||||
this.$store.dispatch('NeedReboot')
|
this.$store.dispatch('NeedReboot')
|
||||||
this.$store.dispatch('ListBannedUrls', 1)
|
this.$store.dispatch('ListBannedUrls', { page: 1 })
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
evictURL() {
|
evictURL() {
|
||||||
|
@ -87,6 +120,9 @@ export default {
|
||||||
this.$store.dispatch('PurgeUrls', { urls, ban: this.ban })
|
this.$store.dispatch('PurgeUrls', { urls, ban: this.ban })
|
||||||
this.urls = ''
|
this.urls = ''
|
||||||
},
|
},
|
||||||
|
handlePageChange(page) {
|
||||||
|
this.$store.dispatch('ListBannedUrls', { page })
|
||||||
|
},
|
||||||
handleSelectionChange(value) {
|
handleSelectionChange(value) {
|
||||||
this.$data.selectedUrls = value
|
this.$data.selectedUrls = value
|
||||||
},
|
},
|
||||||
|
@ -133,6 +169,10 @@ h1 {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 10px 15px;
|
margin: 10px 15px;
|
||||||
}
|
}
|
||||||
|
.pagination {
|
||||||
|
margin: 25px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
.remove-url-button {
|
.remove-url-button {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue