revert web code (#2215)

web/frps/src/utils/chart.js

@@ -1,215 +1,199 @@
-import Humanize from 'humanize-plus'
-import echarts from 'echarts/lib/echarts'
+import Humanize from "humanize-plus"
+import echarts from "echarts/lib/echarts"
 
-import 'echarts/theme/macarons'
-import 'echarts/lib/chart/bar'
-import 'echarts/lib/chart/pie'
-import 'echarts/lib/component/tooltip'
-import 'echarts/lib/component/title'
+import "echarts/theme/macarons"
+import "echarts/lib/chart/bar"
+import "echarts/lib/chart/pie"
+import "echarts/lib/component/tooltip"
+import "echarts/lib/component/title"
 
 function DrawTrafficChart(elementId, trafficIn, trafficOut) {
-  const myChart = echarts.init(document.getElementById(elementId), 'macarons')
-  myChart.showLoading()
+    let myChart = echarts.init(document.getElementById(elementId), 'macarons');
+    myChart.showLoading()
 
-  const option = {
-    title: {
-      text: 'Network Traffic',
-      subtext: 'today',
-      x: 'center'
-    },
-    tooltip: {
-      trigger: 'item',
-      formatter: function(v) {
-        return Humanize.fileSize(v.data.value) + ' (' + v.percent + '%)'
-      }
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: '55%',
-        center: ['50%', '60%'],
-        data: [
-          {
-            value: trafficIn,
-            name: 'Traffic In'
-          },
-          {
-            value: trafficOut,
-            name: 'Traffic Out'
-          }
-        ],
-        itemStyle: {
-          emphasis: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  }
-  myChart.setOption(option)
-  myChart.hideLoading()
+    let option = {
+        title: {
+            text: 'Network Traffic',
+            subtext: 'today',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: function(v) {
+                return Humanize.fileSize(v.data.value) + " (" + v.percent + "%)"
+            }
+        },
+        series: [{
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [{
+                value: trafficIn,
+                name: 'Traffic In'
+            }, {
+                value: trafficOut,
+                name: 'Traffic Out'
+            }, ],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }]
+    };
+    myChart.setOption(option);
+    myChart.hideLoading()
 }
 
 function DrawProxyChart(elementId, serverInfo) {
-  if (serverInfo.proxy_type_count.tcp == null) {
-    serverInfo.proxy_type_count.tcp = 0
-  }
-  if (serverInfo.proxy_type_count.udp == null) {
-    serverInfo.proxy_type_count.udp = 0
-  }
-  if (serverInfo.proxy_type_count.http == null) {
-    serverInfo.proxy_type_count.http = 0
-  }
-  if (serverInfo.proxy_type_count.https == null) {
-    serverInfo.proxy_type_count.https = 0
-  }
-  if (serverInfo.proxy_type_count.stcp == null) {
-    serverInfo.proxy_type_count.stcp = 0
-  }
-  if (serverInfo.proxy_type_count.xtcp == null) {
-    serverInfo.proxy_type_count.xtcp = 0
-  }
-  const myChart = echarts.init(document.getElementById(elementId), 'macarons')
-  myChart.showLoading()
+    if (serverInfo.proxy_type_count.tcp == null) {
+        serverInfo.proxy_type_count.tcp = 0
+    }
+    if (serverInfo.proxy_type_count.udp == null) {
+        serverInfo.proxy_type_count.udp = 0
+    }
+    if (serverInfo.proxy_type_count.http == null) {
+        serverInfo.proxy_type_count.http = 0
+    }
+    if (serverInfo.proxy_type_count.https == null) {
+        serverInfo.proxy_type_count.https = 0
+    }
+    if (serverInfo.proxy_type_count.stcp == null) {
+        serverInfo.proxy_type_count.stcp = 0
+    }
+    if (serverInfo.proxy_type_count.xtcp == null) {
+        serverInfo.proxy_type_count.xtcp = 0
+    }
+    let myChart = echarts.init(document.getElementById(elementId), 'macarons')
+    myChart.showLoading()
 
-  const option = {
-    title: {
-      text: 'Proxies',
-      subtext: 'now',
-      x: 'center'
-    },
-    tooltip: {
-      trigger: 'item',
-      formatter: function(v) {
-        return v.data.value
-      }
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: '55%',
-        center: ['50%', '60%'],
-        data: [
-          {
-            value: serverInfo.proxy_type_count.tcp,
-            name: 'TCP'
-          },
-          {
-            value: serverInfo.proxy_type_count.udp,
-            name: 'UDP'
-          },
-          {
-            value: serverInfo.proxy_type_count.http,
-            name: 'HTTP'
-          },
-          {
-            value: serverInfo.proxy_type_count.https,
-            name: 'HTTPS'
-          },
-          {
-            value: serverInfo.proxy_type_count.stcp,
-            name: 'STCP'
-          },
-          {
-            value: serverInfo.proxy_type_count.xtcp,
-            name: 'XTCP'
-          }
-        ],
-        itemStyle: {
-          emphasis: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  }
-  myChart.setOption(option)
-  myChart.hideLoading()
+    let option = {
+        title: {
+            text: 'Proxies',
+            subtext: 'now',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: function(v) {
+                return v.data.value
+            }
+        },
+        series: [{
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [{
+                value: serverInfo.proxy_type_count.tcp,
+                name: 'TCP'
+            }, {
+                value: serverInfo.proxy_type_count.udp,
+                name: 'UDP'
+            }, {
+                value: serverInfo.proxy_type_count.http,
+                name: 'HTTP'
+            }, {
+                value: serverInfo.proxy_type_count.https,
+                name: 'HTTPS'
+            }, {
+                value: serverInfo.proxy_type_count.stcp,
+                name: 'STCP'
+            }, {
+                value: serverInfo.proxy_type_count.xtcp,
+                name: 'XTCP'
+            }],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }]
+    };
+    myChart.setOption(option);
+    myChart.hideLoading()
 }
 
 // 7 days
 function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
-  const params = {
-    width: '600px',
-    height: '400px'
-  }
+    let params = {
+        width: '600px',
+        height: '400px'
+    }
 
-  const myChart = echarts.init(document.getElementById(elementId), 'macarons', params)
-  myChart.showLoading()
+    let myChart = echarts.init(document.getElementById(elementId), 'macarons', params);
+    myChart.showLoading()
 
-  trafficInArr = trafficInArr.reverse()
-  trafficOutArr = trafficOutArr.reverse()
-  let now = new Date()
-  now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)
-  const dates = []
-  for (let i = 0; i < 7; i++) {
-    dates.push(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate())
-    now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
-  }
+    trafficInArr = trafficInArr.reverse()
+    trafficOutArr = trafficOutArr.reverse()
+    let now = new Date()
+    now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)
+    let dates = new Array()
+    for (let i = 0; i < 7; i++) {
+        dates.push(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate())
+        now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
+    }
 
-  const option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      },
-      formatter: function(data) {
-        let html = ''
-        if (data.length > 0) {
-          html += data[0].name + '<br/>'
-        }
-        for (const v of data) {
-          const colorEl =
-            '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>'
-          html += colorEl + v.seriesName + ': ' + Humanize.fileSize(v.value) + '<br/>'
-        }
-        return html
-      }
-    },
-    legend: {
-      data: ['Traffic In', 'Traffic Out']
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        data: dates
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        axisLabel: {
-          formatter: function(value) {
-            return Humanize.fileSize(value)
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: 'Traffic In',
-        type: 'bar',
-        data: trafficInArr
-      },
-      {
-        name: 'Traffic Out',
-        type: 'bar',
-        data: trafficOutArr
-      }
-    ]
-  }
-  myChart.setOption(option)
-  myChart.hideLoading()
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: function(data) {
+                let html = ''
+                if (data.length > 0) {
+                    html += data[0].name + '<br/>'
+                }
+                for (let v of data) {
+                    let colorEl = '<span style="display:inline-block;margin-right:5px;' +
+                        'border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>';
+                    html += colorEl + v.seriesName + ': ' + Humanize.fileSize(v.value) + '<br/>'
+                }
+                return html
+            }
+        },
+        legend: {
+            data: ['Traffic In', 'Traffic Out']
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: [{
+            type: 'category',
+            data: dates
+        }],
+        yAxis: [{
+            type: 'value',
+            axisLabel: {
+                formatter: function(value) {
+                    return Humanize.fileSize(value)
+                }
+            }
+        }],
+        series: [{
+            name: 'Traffic In',
+            type: 'bar',
+            data: trafficInArr
+        }, {
+
+            name: 'Traffic Out',
+            type: 'bar',
+            data: trafficOutArr
+        }]
+    };
+    myChart.setOption(option);
+    myChart.hideLoading()
 }
 
-export { DrawTrafficChart, DrawProxyChart, DrawProxyTrafficChart }
+export {
+    DrawTrafficChart,
+    DrawProxyChart,
+    DrawProxyTrafficChart
+}

web/frps/src/utils/fetch.js

@@ -1,20 +0,0 @@
-import { Message } from 'element-ui'
-
-export default function(api, init = {}) {
-  return new Promise(resolve => {
-    fetch(`/api/${api}`, Object.assign({ credentials: 'include' }, init))
-      .then(res => {
-        if (res.status < 200 || res.status >= 300) {
-          Message.warning('Get server info from frps failed!')
-          resolve()
-          return
-        }
-
-        resolve(res ? res.json() : undefined)
-      })
-      .catch(err => {
-        this.$message.error(err.message)
-        resolve()
-      })
-  })
-}

web/frps/src/utils/proxy.js

@@ -1,97 +1,97 @@
 class BaseProxy {
-  constructor(proxyStats) {
-    this.name = proxyStats.name
-    if (proxyStats.conf != null) {
-      this.encryption = proxyStats.conf.use_encryption
-      this.compression = proxyStats.conf.use_compression
-    } else {
-      this.encryption = ''
-      this.compression = ''
+    constructor(proxyStats) {
+        this.name = proxyStats.name
+        if (proxyStats.conf != null) {
+            this.encryption = proxyStats.conf.use_encryption
+            this.compression = proxyStats.conf.use_compression
+        } else {
+            this.encryption = ""
+            this.compression = ""
+        }
+        this.conns = proxyStats.cur_conns
+        this.traffic_in = proxyStats.today_traffic_in
+        this.traffic_out = proxyStats.today_traffic_out
+        this.last_start_time = proxyStats.last_start_time
+        this.last_close_time = proxyStats.last_close_time
+        this.status = proxyStats.status
     }
-    this.conns = proxyStats.cur_conns
-    this.traffic_in = proxyStats.today_traffic_in
-    this.traffic_out = proxyStats.today_traffic_out
-    this.last_start_time = proxyStats.last_start_time
-    this.last_close_time = proxyStats.last_close_time
-    this.status = proxyStats.status
-  }
 }
 
 class TcpProxy extends BaseProxy {
-  constructor(proxyStats) {
-    super(proxyStats)
-    this.type = 'tcp'
-    if (proxyStats.conf != null) {
-      this.addr = ':' + proxyStats.conf.remote_port
-      this.port = proxyStats.conf.remote_port
-    } else {
-      this.addr = ''
-      this.port = ''
+    constructor(proxyStats) {
+        super(proxyStats)
+        this.type = "tcp"
+        if (proxyStats.conf != null) {
+            this.addr = ":" + proxyStats.conf.remote_port
+            this.port = proxyStats.conf.remote_port
+        } else {
+            this.addr = ""
+            this.port = ""
+        }
     }
-  }
 }
 
 class UdpProxy extends BaseProxy {
-  constructor(proxyStats) {
-    super(proxyStats)
-    this.type = 'udp'
-    if (proxyStats.conf != null) {
-      this.addr = ':' + proxyStats.conf.remote_port
-      this.port = proxyStats.conf.remote_port
-    } else {
-      this.addr = ''
-      this.port = ''
+    constructor(proxyStats) {
+        super(proxyStats)
+        this.type = "udp"
+        if (proxyStats.conf != null) {
+            this.addr = ":" + proxyStats.conf.remote_port
+            this.port = proxyStats.conf.remote_port
+        } else {
+            this.addr = ""
+            this.port = ""
+        }
     }
-  }
 }
 
 class HttpProxy extends BaseProxy {
-  constructor(proxyStats, port, subdomain_host) {
-    super(proxyStats)
-    this.type = 'http'
-    this.port = port
-    if (proxyStats.conf != null) {
-      this.custom_domains = proxyStats.conf.custom_domains
-      this.host_header_rewrite = proxyStats.conf.host_header_rewrite
-      this.locations = proxyStats.conf.locations
-      if (proxyStats.conf.sub_domain !== '') {
-        this.subdomain = proxyStats.conf.sub_domain + '.' + subdomain_host
-      } else {
-        this.subdomain = ''
-      }
-    } else {
-      this.custom_domains = ''
-      this.host_header_rewrite = ''
-      this.subdomain = ''
-      this.locations = ''
+    constructor(proxyStats, port, subdomain_host) {
+        super(proxyStats)
+        this.type = "http"
+        this.port = port
+        if (proxyStats.conf != null) {
+            this.custom_domains = proxyStats.conf.custom_domains
+            this.host_header_rewrite = proxyStats.conf.host_header_rewrite
+            this.locations = proxyStats.conf.locations
+            if (proxyStats.conf.sub_domain != "") {
+                this.subdomain = proxyStats.conf.sub_domain + "." + subdomain_host
+            } else {
+                this.subdomain = ""
+            }
+        } else {
+            this.custom_domains = ""
+            this.host_header_rewrite = ""
+            this.subdomain = ""
+            this.locations = ""
+        }
     }
-  }
 }
 
 class HttpsProxy extends BaseProxy {
-  constructor(proxyStats, port, subdomain_host) {
-    super(proxyStats)
-    this.type = 'https'
-    this.port = port
-    if (proxyStats.conf != null) {
-      this.custom_domains = proxyStats.conf.custom_domains
-      if (proxyStats.conf.sub_domain !== '') {
-        this.subdomain = proxyStats.conf.sub_domain + '.' + subdomain_host
-      } else {
-        this.subdomain = ''
-      }
-    } else {
-      this.custom_domains = ''
-      this.subdomain = ''
+    constructor(proxyStats, port, subdomain_host) {
+        super(proxyStats)
+        this.type = "https"
+        this.port = port
+        if (proxyStats.conf != null) {
+            this.custom_domains = proxyStats.conf.custom_domains
+            if (proxyStats.conf.sub_domain != "") {
+                this.subdomain = proxyStats.conf.sub_domain + "." + subdomain_host
+            } else {
+                this.subdomain = ""
+            }
+        } else {
+            this.custom_domains = ""
+            this.subdomain = ""
+        }
     }
-  }
 }
 
 class StcpProxy extends BaseProxy {
-  constructor(proxyStats) {
-    super(proxyStats)
-    this.type = 'stcp'
-  }
+    constructor(proxyStats) {
+        super(proxyStats)
+        this.type = "stcp"
+    }
 }
 
-export { BaseProxy, TcpProxy, UdpProxy, HttpProxy, HttpsProxy, StcpProxy }
+export {BaseProxy, TcpProxy, UdpProxy, HttpProxy, HttpsProxy, StcpProxy}