fix broken server api and dashboard info (#3662)

web/frps/src/components/ProxiesHTTP.vue

@@ -10,16 +10,16 @@ import ProxyView from './ProxyView.vue'
 let proxies = ref<HTTPProxy[]>([])
 
 const fetchData = () => {
-  let vhost_http_port: number
-  let subdomain_host: string
+  let vhostHTTPPort: number
+  let subdomainHost: string
   fetch('../api/serverinfo', { credentials: 'include' })
     .then((res) => {
       return res.json()
     })
     .then((json) => {
-      vhost_http_port = json.vhost_http_port
-      subdomain_host = json.subdomain_host
-      if (vhost_http_port == null || vhost_http_port == 0) {
+      vhostHTTPPort = json.vhostHTTPPort
+      subdomainHost = json.subdomainHost
+      if (vhostHTTPPort == null || vhostHTTPPort == 0) {
         return
       }
       fetch('../api/proxy/http', { credentials: 'include' })
@@ -29,7 +29,7 @@ const fetchData = () => {
         .then((json) => {
           for (let proxyStats of json.proxies) {
             proxies.value.push(
-              new HTTPProxy(proxyStats, vhost_http_port, subdomain_host)
+              new HTTPProxy(proxyStats, vhostHTTPPort, subdomainHost)
             )
           }
         })

web/frps/src/components/ProxiesHTTPS.vue

@@ -10,16 +10,16 @@ import ProxyView from './ProxyView.vue'
 let proxies = ref<HTTPSProxy[]>([])
 
 const fetchData = () => {
-  let vhost_https_port: number
-  let subdomain_host: string
+  let vhostHTTPSPort: number
+  let subdomainHost: string
   fetch('../api/serverinfo', { credentials: 'include' })
     .then((res) => {
       return res.json()
     })
     .then((json) => {
-      vhost_https_port = json.vhost_https_port
-      subdomain_host = json.subdomain_host
-      if (vhost_https_port == null || vhost_https_port == 0) {
+      vhostHTTPSPort = json.vhostHTTPSPort
+      subdomainHost = json.subdomainHost
+      if (vhostHTTPSPort == null || vhostHTTPSPort == 0) {
         return
       }
       fetch('../api/proxy/https', { credentials: 'include' })
@@ -29,7 +29,7 @@ const fetchData = () => {
         .then((json) => {
           for (let proxyStats of json.proxies) {
             proxies.value.push(
-              new HTTPSProxy(proxyStats, vhost_https_port, subdomain_host)
+              new HTTPSProxy(proxyStats, vhostHTTPSPort, subdomainHost)
             )
           }
         })

web/frps/src/components/ProxyView.vue

@@ -14,7 +14,7 @@
             trigger="click"
           >
             <template #default>
-              <Traffic :proxy_name="props.row.name" />
+              <Traffic :proxyName="props.row.name" />
             </template>
 
             <template #reference>
@@ -37,19 +37,19 @@
       </el-table-column>
       <el-table-column
         label="Traffic In"
-        prop="traffic_in"
+        prop="trafficIn"
         :formatter="formatTrafficIn"
         sortable
       >
       </el-table-column>
       <el-table-column
         label="Traffic Out"
-        prop="traffic_out"
+        prop="trafficOut"
         :formatter="formatTrafficOut"
         sortable
       >
       </el-table-column>
-      <el-table-column label="ClientVersion" prop="client_version" sortable>
+      <el-table-column label="ClientVersion" prop="clientVersion" sortable>
       </el-table-column>
       <el-table-column label="Status" prop="status" sortable>
         <template #default="scope">
@@ -75,10 +75,10 @@ defineProps<{
 }>()
 
 const formatTrafficIn = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
-  return Humanize.fileSize(row.traffic_in)
+  return Humanize.fileSize(row.trafficIn)
 }
 
 const formatTrafficOut = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
-  return Humanize.fileSize(row.traffic_out)
+  return Humanize.fileSize(row.trafficOut)
 }
 </script>

web/frps/src/components/ProxyViewExpand.vue

@@ -12,7 +12,7 @@
       <span>{{ row.type }}</span>
     </el-form-item>
     <el-form-item label="Domains">
-      <span>{{ row.custom_domains }}</span>
+      <span>{{ row.customDomains }}</span>
     </el-form-item>
     <el-form-item label="SubDomain">
       <span>{{ row.subdomain }}</span>
@@ -21,7 +21,7 @@
       <span>{{ row.locations }}</span>
     </el-form-item>
     <el-form-item label="HostRewrite">
-      <span>{{ row.host_header_rewrite }}</span>
+      <span>{{ row.hostHeaderRewrite }}</span>
     </el-form-item>
     <el-form-item label="Encryption">
       <span>{{ row.encryption }}</span>
@@ -30,10 +30,10 @@
       <span>{{ row.compression }}</span>
     </el-form-item>
     <el-form-item label="Last Start">
-      <span>{{ row.last_start_time }}</span>
+      <span>{{ row.lastStartTime }}</span>
     </el-form-item>
     <el-form-item label="Last Close">
-      <span>{{ row.last_close_time }}</span>
+      <span>{{ row.lastCloseTime }}</span>
     </el-form-item>
   </el-form>
 
@@ -54,10 +54,10 @@
       <span>{{ row.compression }}</span>
     </el-form-item>
     <el-form-item label="Last Start">
-      <span>{{ row.last_start_time }}</span>
+      <span>{{ row.lastStartTime }}</span>
     </el-form-item>
     <el-form-item label="Last Close">
-      <span>{{ row.last_close_time }}</span>
+      <span>{{ row.lastCloseTime }}</span>
     </el-form-item>
   </el-form>
 </template>

web/frps/src/components/ServerOverview.vue

@@ -12,58 +12,58 @@
               <span>{{ data.version }}</span>
             </el-form-item>
             <el-form-item label="BindPort">
-              <span>{{ data.bind_port }}</span>
+              <span>{{ data.bindPort }}</span>
             </el-form-item>
-            <el-form-item label="KCP Bind Port" v-if="data.kcp_bind_port != 0">
-              <span>{{ data.kcp_bind_port }}</span>
+            <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.quic_bind_port != 0"
+              v-if="data.quicBindPort != 0"
             >
-              <span>{{ data.quic_bind_port }}</span>
+              <span>{{ data.quicBindPort }}</span>
             </el-form-item>
-            <el-form-item label="Http Port" v-if="data.vhost_http_port != 0">
-              <span>{{ data.vhost_http_port }}</span>
+            <el-form-item label="Http Port" v-if="data.vhostHTTPPort != 0">
+              <span>{{ data.vhostHTTPPort }}</span>
             </el-form-item>
-            <el-form-item label="Https Port" v-if="data.vhost_https_port != 0">
-              <span>{{ data.vhost_https_port }}</span>
+            <el-form-item label="Https Port" v-if="data.vhostHTTPSPort != 0">
+              <span>{{ data.vhostHTTPSPort }}</span>
             </el-form-item>
             <el-form-item
               label="TCPMux HTTPConnect Port"
-              v-if="data.tcpmux_httpconnect_port != 0"
+              v-if="data.tcpmuxHTTPConnectPort != 0"
             >
-              <span>{{ data.tcpmux_httpconnect_port }}</span>
+              <span>{{ data.tcpmuxHTTPConnectPort }}</span>
             </el-form-item>
             <el-form-item
               label="Subdomain Host"
-              v-if="data.subdomain_host != ''"
+              v-if="data.subdomainHost != ''"
             >
-              <LongSpan :content="data.subdomain_host" :length="30"></LongSpan>
+              <LongSpan :content="data.subdomainHost" :length="30"></LongSpan>
             </el-form-item>
             <el-form-item label="Max PoolCount">
-              <span>{{ data.max_pool_count }}</span>
+              <span>{{ data.maxPoolCount }}</span>
             </el-form-item>
             <el-form-item label="Max Ports Per Client">
-              <span>{{ data.max_ports_per_client }}</span>
+              <span>{{ data.maxPortsPerClient }}</span>
             </el-form-item>
-            <el-form-item label="Allow Ports" v-if="data.allow_ports_str != ''">
-              <LongSpan :content="data.allow_ports_str" :length="30"></LongSpan>
+            <el-form-item label="Allow Ports" v-if="data.allowPortsStr != ''">
+              <LongSpan :content="data.allowPortsStr" :length="30"></LongSpan>
             </el-form-item>
-            <el-form-item label="TLS Only" v-if="data.tls_only === true">
-              <span>{{ data.tls_only }}</span>
+            <el-form-item label="TLS Force" v-if="data.tlsForce === true">
+              <span>{{ data.tlsForce }}</span>
             </el-form-item>
             <el-form-item label="HeartBeat Timeout">
-              <span>{{ data.heart_beat_timeout }}</span>
+              <span>{{ data.heartbeatTimeout }}</span>
             </el-form-item>
             <el-form-item label="Client Counts">
-              <span>{{ data.client_counts }}</span>
+              <span>{{ data.clientCounts }}</span>
             </el-form-item>
             <el-form-item label="Current Connections">
-              <span>{{ data.cur_conns }}</span>
+              <span>{{ data.curConns }}</span>
             </el-form-item>
             <el-form-item label="Proxy Counts">
-              <span>{{ data.proxy_counts }}</span>
+              <span>{{ data.proxyCounts }}</span>
             </el-form-item>
           </el-form>
         </div>
@@ -87,21 +87,21 @@ import LongSpan from './LongSpan.vue'
 
 let data = ref({
   version: '',
-  bind_port: 0,
-  kcp_bind_port: 0,
-  quic_bind_port: 0,
-  vhost_http_port: 0,
-  vhost_https_port: 0,
-  tcpmux_httpconnect_port: 0,
-  subdomain_host: '',
-  max_pool_count: 0,
-  max_ports_per_client: '',
-  allow_ports_str: '',
-  tls_only: false,
-  heart_beat_timeout: 0,
-  client_counts: 0,
-  cur_conns: 0,
-  proxy_counts: 0,
+  bindPort: 0,
+  kcpBindPort: 0,
+  quicBindPort: 0,
+  vhostHTTPPort: 0,
+  vhostHTTPSPort: 0,
+  tcpmuxHTTPConnectPort: 0,
+  subdomainHost: '',
+  maxPoolCount: 0,
+  maxPortsPerClient: '',
+  allowPortsStr: '',
+  tlsForce: false,
+  heartbeatTimeout: 0,
+  clientCounts: 0,
+  curConns: 0,
+  proxyCounts: 0,
 })
 
 const fetchData = () => {
@@ -109,50 +109,50 @@ const fetchData = () => {
     .then((res) => res.json())
     .then((json) => {
       data.value.version = json.version
-      data.value.bind_port = json.bind_port
-      data.value.kcp_bind_port = json.kcp_bind_port
-      data.value.quic_bind_port = json.quic_bind_port
-      data.value.vhost_http_port = json.vhost_http_port
-      data.value.vhost_https_port = json.vhost_https_port
-      data.value.tcpmux_httpconnect_port = json.tcpmux_httpconnect_port
-      data.value.subdomain_host = json.subdomain_host
-      data.value.max_pool_count = json.max_pool_count
-      data.value.max_ports_per_client = json.max_ports_per_client
-      if (data.value.max_ports_per_client == '0') {
-        data.value.max_ports_per_client = 'no limit'
+      data.value.bindPort = json.bindPort
+      data.value.kcpBindPort = json.kcpBindPort
+      data.value.quicBindPort = json.quicBindPort
+      data.value.vhostHTTPPort = json.vhostHTTPPort
+      data.value.vhostHTTPSPort = json.vhostHTTPSPort
+      data.value.tcpmuxHTTPConnectPort = json.tcpmuxHTTPConnectPort
+      data.value.subdomainHost = json.subdomainHost
+      data.value.maxPoolCount = json.maxPoolCount
+      data.value.maxPortsPerClient = json.maxPortsPerClient
+      if (data.value.maxPortsPerClient == '0') {
+        data.value.maxPortsPerClient = 'no limit'
       }
-      data.value.allow_ports_str = json.allow_ports_str
-      data.value.tls_only = json.tls_only
-      data.value.heart_beat_timeout = json.heart_beat_timeout
-      data.value.client_counts = json.client_counts
-      data.value.cur_conns = json.cur_conns
-      data.value.proxy_counts = 0
-      if (json.proxy_type_count != null) {
-        if (json.proxy_type_count.tcp != null) {
-          data.value.proxy_counts += json.proxy_type_count.tcp
+      data.value.allowPortsStr = json.allowPortsStr
+      data.value.tlsForce = json.tlsForce
+      data.value.heartbeatTimeout = json.heartbeatTimeout
+      data.value.clientCounts = json.clientCounts
+      data.value.curConns = json.curConns
+      data.value.proxyCounts = 0
+      if (json.proxyTypeCount != null) {
+        if (json.proxyTypeCount.tcp != null) {
+          data.value.proxyCounts += json.proxyTypeCount.tcp
         }
-        if (json.proxy_type_count.udp != null) {
-          data.value.proxy_counts += json.proxy_type_count.udp
+        if (json.proxyTypeCount.udp != null) {
+          data.value.proxyCounts += json.proxyTypeCount.udp
         }
-        if (json.proxy_type_count.http != null) {
-          data.value.proxy_counts += json.proxy_type_count.http
+        if (json.proxyTypeCount.http != null) {
+          data.value.proxyCounts += json.proxyTypeCount.http
         }
-        if (json.proxy_type_count.https != null) {
-          data.value.proxy_counts += json.proxy_type_count.https
+        if (json.proxyTypeCount.https != null) {
+          data.value.proxyCounts += json.proxyTypeCount.https
         }
-        if (json.proxy_type_count.stcp != null) {
-          data.value.proxy_counts += json.proxy_type_count.stcp
+        if (json.proxyTypeCount.stcp != null) {
+          data.value.proxyCounts += json.proxyTypeCount.stcp
         }
-        if (json.proxy_type_count.sudp != null) {
-          data.value.proxy_counts += json.proxy_type_count.sudp
+        if (json.proxyTypeCount.sudp != null) {
+          data.value.proxyCounts += json.proxyTypeCount.sudp
         }
-        if (json.proxy_type_count.xtcp != null) {
-          data.value.proxy_counts += json.proxy_type_count.xtcp
+        if (json.proxyTypeCount.xtcp != null) {
+          data.value.proxyCounts += json.proxyTypeCount.xtcp
         }
       }
 
       // draw chart
-      DrawTrafficChart('traffic', json.total_traffic_in, json.total_traffic_out)
+      DrawTrafficChart('traffic', json.totalTrafficIn, json.totalTrafficOut)
       DrawProxyChart('proxies', json)
     })
     .catch(() => {

web/frps/src/components/Traffic.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="proxy_name" style="width: 600px; height: 400px"></div>
+  <div :id="proxyName" style="width: 600px; height: 400px"></div>
 </template>
 
 <script setup lang="ts">
@@ -7,17 +7,17 @@ import { ElMessage } from 'element-plus'
 import { DrawProxyTrafficChart } from '../utils/chart.js'
 
 const props = defineProps<{
-  proxy_name: string
+  proxyName: string
 }>()
 
 const fetchData = () => {
-  let url = '../api/traffic/' + props.proxy_name
+  let url = '../api/traffic/' + props.proxyName
   fetch(url, { credentials: 'include' })
     .then((res) => {
       return res.json()
     })
     .then((json) => {
-      DrawProxyTrafficChart(props.proxy_name, json.traffic_in, json.traffic_out)
+      DrawProxyTrafficChart(props.proxyName, json.trafficIn, json.trafficOut)
     })
     .catch((err) => {
       ElMessage({