Merge branch 'feature/mediaproxy-cache-pagination-and-search' into 'develop'

Mediaproxy cache pagination and search

See merge request pleroma/admin-fe!155

CHANGELOG.md

@@ -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
 - Show number of open reports in Sidebar Menu
 - Add confirmation message when deleting a user
+- Add new MediaProxy Cache with ability to evict and ban objects from the MediaProxy cache
 
 ### 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
 - 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
+- Fix display `Pending` tag and filter by Pending Approval status
 
 ## [2.0.3] - 2020-04-29
 

src/api/mediaProxyCache.js

@@ -2,10 +2,10 @@ import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
 import { baseName } from './utils'
 
-export async function listBannedUrls(page, authHost, token) {
+export async function listBannedUrls(page, pageSize, authHost, token) {
   return await request({
     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',
     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()}` } : {}

src/store/modules/mediaProxyCache.js

@@ -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 i18n from '@/lang'
 
 const mediaProxyCache = {
   state: {
     bannedUrls: [],
-    bannedUrlsCount: 0,
     currentPage: 1,
-    loading: false
+    loading: false,
+    pageSize: 50,
+    totalUrlsCount: 0
   },
   mutations: {
     SET_BANNED_URLS: (state, urls) => {
       state.bannedUrls = urls.map(el => { return { url: el } })
     },
-    SET_BANNED_URLS_COUNT: (state, count) => {
-      state.bannedUrlsCount = count
+    SET_TOTAL_URLS_COUNT: (state, count) => {
+      state.totalUrlsCount = count
     },
     SET_LOADING: (state, status) => {
       state.loading = status
@@ -24,11 +25,11 @@ const mediaProxyCache = {
     }
   },
   actions: {
-    async ListBannedUrls({ commit, getters }, page) {
+    async ListBannedUrls({ commit, getters, state }, { page }) {
       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_COUNT', count)
+      commit('SET_TOTAL_URLS_COUNT', response.data.count)
       commit('SET_PAGE', page)
       commit('SET_LOADING', false)
     },
@@ -40,12 +41,27 @@ const mediaProxyCache = {
         duration: 5 * 1000
       })
       if (ban) {
-        dispatch('ListBannedUrls', state.currentPage)
+        dispatch('ListBannedUrls', { page: state.currentPage })
       }
     },
     async RemoveBannedUrls({ dispatch, getters, state }, urls) {
       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)
+      }
     }
   }
 }

src/views/invites/index.vue

@@ -49,7 +49,7 @@
         <div slot="header" class="clearfix">
           <span>{{ $t('invites.tokenCreated') }}</span>
         </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-link :href="inviteLink" :underline="false" target="_blank">
               {{ inviteLink }}
@@ -186,7 +186,7 @@ export default {
       'authHost'
     ]),
     getLabelWidth() {
-      return this.isDesktop ? '100px' : '80px'
+      return this.isDesktop ? '100px' : '85px'
     },
     inviteLink() {
       return `${baseName(this.authHost)}/registration/${this.newToken.token}`

src/views/mediaProxyCache/index.vue

@@ -27,9 +27,16 @@
         type="selection"
         align="center"
         width="55"/>
-      <el-table-column
-        :min-width="isDesktop ? 320 : 120"
-        prop="url"/>
+      <el-table-column :min-width="isDesktop ? 320 : 120" prop="url">
+        <template slot="header" slot-scope="scope">
+          <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>
         <template slot="header">
           <el-button
@@ -46,10 +53,21 @@
         </template>
       </el-table-column>
     </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>
 </template>
 
 <script>
+import debounce from 'lodash.debounce'
 import RebootButton from '@/components/RebootButton'
 
 export default {
@@ -59,6 +77,7 @@ export default {
     return {
       urls: '',
       ban: false,
+      search: '',
       selectedUrls: []
     }
   },
@@ -66,20 +85,34 @@ export default {
     bannedUrls() {
       return this.$store.state.mediaProxyCache.bannedUrls
     },
+    currentPage() {
+      return this.$store.state.mediaProxyCache.currentPage
+    },
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
     loading() {
       return this.$store.state.mediaProxyCache.loading
     },
+    pageSize() {
+      return this.$store.state.mediaProxyCache.pageSize
+    },
     removeSelectedDisabled() {
       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() {
     this.$store.dispatch('GetNodeInfo')
     this.$store.dispatch('NeedReboot')
-    this.$store.dispatch('ListBannedUrls', 1)
+    this.$store.dispatch('ListBannedUrls', { page: 1 })
   },
   methods: {
     evictURL() {
@@ -87,6 +120,9 @@ export default {
       this.$store.dispatch('PurgeUrls', { urls, ban: this.ban })
       this.urls = ''
     },
+    handlePageChange(page) {
+      this.$store.dispatch('ListBannedUrls', { page })
+    },
     handleSelectionChange(value) {
       this.$data.selectedUrls = value
     },
@@ -133,6 +169,10 @@ h1 {
   justify-content: space-between;
   margin: 10px 15px;
 }
+.pagination {
+  margin: 25px 0;
+  text-align: center;
+}
 .remove-url-button {
   width: 150px;
 }