fix(front): admin channel detail fetch button

front/src/components/federation/FetchButton.vue

@@ -9,6 +9,8 @@ import { useI18n } from 'vue-i18n'
 
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Loader from '~/components/ui/Loader.vue'
 
 
 const { t } = useI18n()
@@ -43,14 +45,14 @@ const fetch = async () => {
   data.value = undefined
 
   try {
-    const response = await axios.post(props.url)
+    const response = await axios.get(props.url)
     data.value = response.data
     startPolling()
   } catch (error) {
     errors.value = (error as BackendError).backendErrors
+  } finally {
+    isLoading.value = false
   }
-
-  isLoading.value = false
 }
 
 const poll = async () => {
@@ -104,9 +106,9 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
               {{ t('components.federation.FetchButton.description.skipped') }}
             </p>
           </div>
-          <div
+          <Alert
             v-else-if="data.status === 'finished'"
-            class="ui success message"
+            green
           >
             <h4 class="header">
               {{ t('components.federation.FetchButton.header.success') }}
@@ -114,10 +116,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
             <p>
               {{ t('components.federation.FetchButton.description.success') }}
             </p>
-          </div>
+          </Alert>
-          <div
+          <Alert
             v-else-if="data.status === 'errored'"
-            class="ui error message"
+            red
           >
             <h4 class="header">
               {{ t('components.federation.FetchButton.header.failure') }}
@@ -168,28 +170,14 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
                 </tr>
               </tbody>
             </table>
-          </div>
+          </Alert>
         </template>
-        <div
+        <Loader
-          v-else-if="isLoading"
+          v-else-if="isLoading || isPolling"
-          class="ui active inverted dimmer"
+        />
-        >
+        <Alert
-          <div class="ui text loader">
-            {{ t('components.federation.FetchButton.loader.fetchRequest') }}
-          </div>
-        </div>
-        <div
-          v-else-if="isPolling"
-          class="ui active inverted dimmer"
-        >
-          <div class="ui text loader">
-            {{ t('components.federation.FetchButton.loader.awaitingResult') }}
-          </div>
-        </div>
-        <div
           v-if="errors.length > 0"
-          role="alert"
+          red
-          class="ui negative message"
         >
           <h4 class="header">
             {{ t('components.federation.FetchButton.header.saveFailure') }}
@@ -202,11 +190,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
               {{ error }}
             </li>
           </ul>
-        </div>
+        </Alert>
-        <div
+        <Alert
           v-else-if="data && data.status === 'pending' && pollsCount >= MAX_POLLS"
-          role="alert"
+          yellow
-          class="ui warning message"
         >
           <h4 class="header">
             {{ t('components.federation.FetchButton.header.pending') }}
@@ -214,16 +201,17 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           <p>
             {{ t('components.federation.FetchButton.description.pending') }}
           </p>
-        </div>
+        </Alert>
       </div>
-      <div class="actions">
+      <template #actions>
         <Button
           v-if="data && data.status === 'finished'"
+          primary
           @click.prevent="showModal = false; emit('refresh')"
         >
           {{ t('components.federation.FetchButton.button.reload') }}
         </Button>
-      </div>
+      </template>
     </Modal>
   </Button>
 </template>

front/src/views/admin/ChannelDetail.vue

@@ -146,7 +146,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
       <fetch-button
         v-if="!channel?.actor?.is_local"
         class="basic item"
-        :url="`channels/${channel?.uuid}/fetches/`"
+        :url="`federation/fetches/${channel?.id}/`"
         @refresh="fetchData"
       >
         <i class="refresh icon" />&nbsp;