web: support to clear offline proxies data on dashboard (#3963)

web/frps/src/components/ProxiesHTTP.vue

@@ -1,5 +1,5 @@
 <template>
-  <ProxyView :proxies="proxies" proxyType="http" />
+  <ProxyView :proxies="proxies" proxyType="http" @refresh="fetchData"/>
 </template>
 
 <script setup lang="ts">
@@ -27,6 +27,7 @@ const fetchData = () => {
           return res.json()
         })
         .then((json) => {
+          proxies.value = []
           for (let proxyStats of json.proxies) {
             proxies.value.push(
               new HTTPProxy(proxyStats, vhostHTTPPort, subdomainHost)

web/frps/src/components/ProxiesHTTPS.vue

@@ -1,5 +1,5 @@
 <template>
-  <ProxyView :proxies="proxies" proxyType="https" />
+  <ProxyView :proxies="proxies" proxyType="https" @refresh="fetchData"/>
 </template>
 
 <script setup lang="ts">
@@ -27,6 +27,7 @@ const fetchData = () => {
           return res.json()
         })
         .then((json) => {
+          proxies.value = []
           for (let proxyStats of json.proxies) {
             proxies.value.push(
               new HTTPSProxy(proxyStats, vhostHTTPSPort, subdomainHost)

web/frps/src/components/ProxiesSTCP.vue

@@ -1,5 +1,5 @@
 <template>
-  <ProxyView :proxies="proxies" proxyType="stcp" />
+  <ProxyView :proxies="proxies" proxyType="stcp" @refresh="fetchData"/>
 </template>
 
 <script setup lang="ts">
@@ -15,6 +15,7 @@ const fetchData = () => {
       return res.json()
     })
     .then((json) => {
+      proxies.value = []
       for (let proxyStats of json.proxies) {
         proxies.value.push(new STCPProxy(proxyStats))
       }

web/frps/src/components/ProxiesSUDP.vue

@@ -1,5 +1,5 @@
 <template>
-  <ProxyView :proxies="proxies" proxyType="sudp" />
+  <ProxyView :proxies="proxies" proxyType="sudp" @refresh="fetchData"/>
 </template>
 
 <script setup lang="ts">
@@ -15,6 +15,7 @@ const fetchData = () => {
       return res.json()
     })
     .then((json) => {
+      proxies.value = []
       for (let proxyStats of json.proxies) {
         proxies.value.push(new SUDPProxy(proxyStats))
       }

web/frps/src/components/ProxiesTCP.vue

@@ -1,5 +1,5 @@
 <template>
-  <ProxyView :proxies="proxies" proxyType="tcp" />
+  <ProxyView :proxies="proxies" proxyType="tcp" @refresh="fetchData" />
 </template>
 
 <script setup lang="ts">
@@ -15,6 +15,7 @@ const fetchData = () => {
       return res.json()
     })
     .then((json) => {
+      proxies.value = []
       for (let proxyStats of json.proxies) {
         proxies.value.push(new TCPProxy(proxyStats))
       }

web/frps/src/components/ProxiesUDP.vue

@@ -1,5 +1,5 @@
 <template>
-  <ProxyView :proxies="proxies" proxyType="udp" />
+  <ProxyView :proxies="proxies" proxyType="udp" @refresh="fetchData"/>
 </template>
 
 <script setup lang="ts">
@@ -15,12 +15,12 @@ const fetchData = () => {
       return res.json()
     })
     .then((json) => {
+      proxies.value = []
       for (let proxyStats of json.proxies) {
         proxies.value.push(new UDPProxy(proxyStats))
       }
     })
 }
-
 fetchData()
 </script>
 

web/frps/src/components/ProxyView.vue

@@ -1,5 +1,28 @@
 <template>
   <div>
+    <el-page-header
+      :icon="null"
+      style="width: 100%; margin-left: 30px; margin-bottom: 20px"
+    >
+      <template #title>
+        <span>{{ proxyType }}</span>
+      </template>
+      <template #content> </template>
+      <template #extra>
+        <div class="flex items-center" style="margin-right: 30px">
+          <el-popconfirm
+            title="Are you sure to clear all data of offline proxies?"
+            @confirm="clearOfflineProxies"
+          >
+            <template #reference>
+              <el-button>ClearOfflineProxies</el-button>
+            </template>
+          </el-popconfirm>
+          <el-button @click="$emit('refresh')">Refresh</el-button>
+        </div>
+      </template>
+    </el-page-header>
+
     <el-table
       :data="proxies"
       :default-sort="{ prop: 'name', order: 'ascending' }"
@@ -67,6 +90,7 @@
 import * as Humanize from 'humanize-plus'
 import type { TableColumnCtx } from 'element-plus'
 import type { BaseProxy } from '../utils/proxy.js'
+import { ElMessage } from 'element-plus'
 import ProxyViewExpand from './ProxyViewExpand.vue'
 
 defineProps<{
@@ -74,6 +98,8 @@ defineProps<{
   proxyType: string
 }>()
 
+const emit = defineEmits(['refresh'])
+
 const formatTrafficIn = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
   return Humanize.fileSize(row.trafficIn)
 }
@@ -81,4 +107,37 @@ const formatTrafficIn = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
 const formatTrafficOut = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
   return Humanize.fileSize(row.trafficOut)
 }
+
+const clearOfflineProxies = () => {
+  fetch('/api/proxies?status=offline', {
+    method: 'DELETE',
+    credentials: 'include',
+  })
+    .then((res) => {
+      if (res.ok) {
+        ElMessage({
+          message: 'Successfully cleared offline proxies',
+          type: 'success',
+        })
+        emit('refresh')
+      } else {
+        ElMessage({
+          message: 'Failed to clear offline proxies: ' + res.status + ' ' + res.statusText,
+          type: 'warning',
+        })
+      }
+    })
+    .catch((err) => {
+      ElMessage({
+        message: 'Failed to clear offline proxies: ' + err.message,
+        type: 'warning',
+      })
+    })
+}
 </script>
+
+<style>
+.el-page-header__title {
+  font-size: 20px;
+}
+</style>

web/frps/src/components/ServerOverview.vue

@@ -17,10 +17,7 @@
             <el-form-item label="KCP Bind Port" v-if="data.kcpBindPort != 0">
               <span>{{ data.kcpBindPort }}</span>
             </el-form-item>
-            <el-form-item
-              label="QUIC Bind Port"
-              v-if="data.quicBindPort != 0"
-            >
+            <el-form-item label="QUIC Bind Port" v-if="data.quicBindPort != 0">
               <span>{{ data.quicBindPort }}</span>
             </el-form-item>
             <el-form-item label="Http Port" v-if="data.vhostHTTPPort != 0">