"Fossies" - the Fresh Open Source Software Archive

Member "frp-0.36.2/web/frps/src/components/Overview.vue" (22 Mar 2021, 6287 Bytes) of package /linux/misc/frp-0.36.2.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) vue.js (beta) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 <template>
    2     <div>
    3         <el-row>
    4             <el-col :md="12">
    5                 <div class="source">
    6                     <el-form label-position="left" class="server_info">
    7                         <el-form-item label="Version">
    8                           <span>{{ version }}</span>
    9                         </el-form-item>
   10                         <el-form-item label="BindPort">
   11                           <span>{{ bind_port }}</span>
   12                         </el-form-item>
   13                         <el-form-item label="BindUdpPort">
   14                           <span>{{ bind_udp_port }}</span>
   15                         </el-form-item>
   16                         <el-form-item label="Http Port">
   17                           <span>{{ vhost_http_port }}</span>
   18                         </el-form-item>
   19                         <el-form-item label="Https Port">
   20                           <span>{{ vhost_https_port }}</span>
   21                         </el-form-item>
   22                         <el-form-item label="Subdomain Host">
   23                           <span>{{ subdomain_host }}</span>
   24                         </el-form-item>
   25                         <el-form-item label="Max PoolCount">
   26                           <span>{{ max_pool_count }}</span>
   27                         </el-form-item>
   28                         <el-form-item label="Max Ports Per Client">
   29                           <span>{{ max_ports_per_client }}</span>
   30                         </el-form-item>
   31                         <el-form-item label="HeartBeat Timeout">
   32                           <span>{{ heart_beat_timeout }}</span>
   33                         </el-form-item>
   34                         <el-form-item label="Client Counts">
   35                           <span>{{ client_counts }}</span>
   36                         </el-form-item>
   37                         <el-form-item label="Current Connections">
   38                           <span>{{ cur_conns }}</span>
   39                         </el-form-item>
   40                         <el-form-item label="Proxy Counts">
   41                           <span>{{ proxy_counts }}</span>
   42                         </el-form-item>
   43                     </el-form>
   44                 </div>
   45             </el-col>
   46             <el-col :md="12">
   47                 <div id="traffic" style="width: 400px;height:250px;margin-bottom: 30px;"></div>
   48                 <div id="proxies" style="width: 400px;height:250px;"></div>
   49             </el-col>
   50         </el-row>
   51     </div>
   52 </template>
   53 
   54 <script>
   55     import {DrawTrafficChart, DrawProxyChart} from '../utils/chart.js'
   56     export default {
   57         data() {
   58             return {
   59                 version: '',
   60                 bind_port: '',
   61                 bind_udp_port: '',
   62                 vhost_http_port: '',
   63                 vhost_https_port: '',
   64                 subdomain_host: '',
   65                 max_pool_count: '',
   66                 max_ports_per_client: '',
   67                 heart_beat_timeout: '',
   68                 client_counts: '',
   69                 cur_conns: '',
   70                 proxy_counts: ''
   71             }
   72         },
   73         created() {
   74             this.fetchData()
   75         },
   76         watch: {
   77             '$route': 'fetchData'
   78         },
   79         methods: {
   80             fetchData() {
   81                 fetch('../api/serverinfo', {credentials: 'include'})
   82               .then(res => {
   83                 return res.json()
   84               }).then(json => {
   85                 this.version = json.version
   86                 this.bind_port = json.bind_port
   87                 this.bind_udp_port = json.bind_udp_port
   88                 if (this.bind_udp_port == 0) {
   89                     this.bind_udp_port = "disable"
   90                 }
   91                 this.vhost_http_port = json.vhost_http_port
   92                 if (this.vhost_http_port == 0) {
   93                     this.vhost_http_port = "disable"
   94                 }
   95                 this.vhost_https_port = json.vhost_https_port
   96                 if (this.vhost_https_port == 0) {
   97                     this.vhost_https_port = "disable"
   98                 }
   99                 this.subdomain_host = json.subdomain_host
  100                 this.max_pool_count = json.max_pool_count
  101                 this.max_ports_per_client = json.max_ports_per_client
  102                 if (this.max_ports_per_client == 0) {
  103                     this.max_ports_per_client = "no limit"
  104                 }
  105                 this.heart_beat_timeout = json.heart_beat_timeout
  106                 this.client_counts = json.client_counts
  107                 this.cur_conns = json.cur_conns
  108                 this.proxy_counts = 0
  109                 if (json.proxy_type_count != null) {
  110                     if (json.proxy_type_count.tcp != null) {
  111                         this.proxy_counts += json.proxy_type_count.tcp
  112                     }
  113                     if (json.proxy_type_count.udp != null) {
  114                         this.proxy_counts += json.proxy_type_count.udp
  115                     }
  116                     if (json.proxy_type_count.http != null) {
  117                         this.proxy_counts += json.proxy_type_count.http
  118                     }
  119                     if (json.proxy_type_count.https != null) {
  120                         this.proxy_counts += json.proxy_type_count.https
  121                     }
  122                     if (json.proxy_type_count.stcp != null) {
  123                         this.proxy_counts += json.proxy_type_count.stcp
  124                     }
  125                     if (json.proxy_type_count.xtcp != null) {
  126                         this.proxy_counts += json.proxy_type_count.xtcp
  127                     }
  128                 }
  129                 DrawTrafficChart('traffic', json.total_traffic_in, json.total_traffic_out)
  130                 DrawProxyChart('proxies', json)
  131               }).catch( err => {
  132                   this.$message({
  133                       showClose: true,
  134                       message: 'Get server info from frps failed!',
  135                       type: 'warning'
  136                     })
  137               })
  138             }
  139         }
  140     }
  141 </script>
  142 
  143 <style>
  144 .source {
  145     border: 1px solid #eaeefb;
  146     border-radius: 4px;
  147     transition: .2s;
  148     padding: 24px;
  149 }
  150 
  151 .server_info {
  152     margin-left: 40px;
  153     font-size: 0px;
  154 }
  155 
  156 .server_info label {
  157     width: 150px;
  158     color: #99a9bf;
  159 }
  160 
  161 .server_info .el-form-item {
  162     margin-right: 0;
  163     margin-bottom: 0;
  164     width: 100%;
  165 }
  166 </style>