Fetch media proxy settings and render form if it's enabled

src/store/modules/mediaProxyCache.js

@@ -1,4 +1,5 @@
 import { listBannedUrls, purgeUrls, removeBannedUrls, searchBannedUrls } from '@/api/mediaProxyCache'
+import { fetchSettings } from '@/api/settings'
 import { Message } from 'element-ui'
 import i18n from '@/lang'
 
@@ -7,10 +8,14 @@ const mediaProxyCache = {
     bannedUrls: [],
     currentPage: 1,
     loading: false,
+    mediaProxyEnabled: false,
     pageSize: 50,
     totalUrlsCount: 0
   },
   mutations: {
+    MEDIA_PROXY_ENABLED: (state, enabled) => {
+      state.mediaProxyEnabled = enabled
+    },
     SET_BANNED_URLS: (state, urls) => {
       state.bannedUrls = urls.map(el => { return { url: el } })
     },
@@ -25,6 +30,17 @@ const mediaProxyCache = {
     }
   },
   actions: {
+    async FetchMediaProxySetting({ commit, getters }) {
+      const { data } = await fetchSettings(getters.authHost, getters.token)
+      const mediaProxySettings = data.configs.find(el => el.key === ':media_proxy')
+        ? data.configs.find(el => el.key === ':media_proxy').value
+        : []
+      const mediaProxyEnabled = mediaProxySettings.find(el => el.tuple[0] === ':enabled')
+        ? mediaProxySettings.find(el => el.tuple[0] === ':enabled').tuple[1]
+        : false
+
+      commit('MEDIA_PROXY_ENABLED', mediaProxyEnabled)
+    },
     async ListBannedUrls({ commit, getters, state }, { page }) {
       commit('SET_LOADING', true)
       const response = await listBannedUrls(page, state.pageSize, getters.authHost, getters.token)

src/views/mediaProxyCache/index.vue

@@ -1,67 +1,69 @@
 <template>
   <div class="media-proxy-cache-container">
-    <div class="media-proxy-cache-header-container">
-      <h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
-      <reboot-button/>
-    </div>
-    <p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
-    <div class="url-input-container">
-      <el-input
-        :placeholder="$t('mediaProxyCache.url')"
-        v-model="urls"
-        type="textarea"
-        autosize
-        clearable
-        class="url-input"/>
-      <el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
-      <el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
-    </div>
-    <span class="expl url-input-expl">{{ $t('mediaProxyCache.multipleInput') }}</span>
-    <p class="media-proxy-cache-header">{{ $t('mediaProxyCache.listBannedUrlsHeader') }}</p>
-    <el-table
-      v-loading="loading"
-      :data="bannedUrls"
-      class="banned-urls-table"
-      @selection-change="handleSelectionChange">>
-      <el-table-column
-        type="selection"
-        align="center"
-        width="55"/>
-      <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
-            :disabled="removeSelectedDisabled"
-            size="mini"
-            class="remove-url-button"
-            @click="removeSelected()">{{ $t('mediaProxyCache.removeSelected') }}</el-button>
-        </template>
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            class="remove-url-button"
-            @click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
-        </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 v-if="mediaProxyEnabled">
+      <div class="media-proxy-cache-header-container">
+        <h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
+        <reboot-button/>
+      </div>
+      <p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
+      <div class="url-input-container">
+        <el-input
+          :placeholder="$t('mediaProxyCache.url')"
+          v-model="urls"
+          type="textarea"
+          autosize
+          clearable
+          class="url-input"/>
+        <el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
+        <el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
+      </div>
+      <span class="expl url-input-expl">{{ $t('mediaProxyCache.multipleInput') }}</span>
+      <p class="media-proxy-cache-header">{{ $t('mediaProxyCache.listBannedUrlsHeader') }}</p>
+      <el-table
+        v-loading="loading"
+        :data="bannedUrls"
+        class="banned-urls-table"
+        @selection-change="handleSelectionChange">>
+        <el-table-column
+          type="selection"
+          align="center"
+          width="55"/>
+        <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
+              :disabled="removeSelectedDisabled"
+              size="mini"
+              class="remove-url-button"
+              @click="removeSelected()">{{ $t('mediaProxyCache.removeSelected') }}</el-button>
+          </template>
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              class="remove-url-button"
+              @click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
+          </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>
   </div>
 </template>
@@ -94,6 +96,9 @@ export default {
     loading() {
       return this.$store.state.mediaProxyCache.loading
     },
+    mediaProxyEnabled() {
+      return this.$store.state.mediaProxyCache.mediaProxyEnabled
+    },
     pageSize() {
       return this.$store.state.mediaProxyCache.pageSize
     },
@@ -112,6 +117,7 @@ export default {
   mounted() {
     this.$store.dispatch('GetNodeInfo')
     this.$store.dispatch('NeedReboot')
+    this.$store.dispatch('FetchMediaProxySetting')
     this.$store.dispatch('ListBannedUrls', { page: 1 })
   },
   methods: {