"Fossies" - the Fresh Open Source Software Archive

Member "frp-0.36.2/web/frps/src/components/ProxiesHttps.vue" (22 Mar 2021, 4233 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-table :data="proxies" :default-sort="{prop: 'name', order: 'ascending'}" style="width: 100%">
    4       <el-table-column type="expand">
    5         <template slot-scope="props">
    6           <el-popover
    7             ref="popover4"
    8             placement="right"
    9             width="600"
   10           style="margin-left:0px"
   11             trigger="click">
   12             <my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
   13           </el-popover>
   14   
   15           <el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom:10px">Traffic Statistics</el-button>
   16   
   17           <el-form label-position="left" inline class="demo-table-expand">
   18             <el-form-item label="Name">
   19               <span>{{ props.row.name }}</span>
   20             </el-form-item>
   21             <el-form-item label="Type">
   22               <span>{{ props.row.type }}</span>
   23             </el-form-item>
   24             <el-form-item label="Domains">
   25               <span>{{ props.row.custom_domains }}</span>
   26             </el-form-item>
   27             <el-form-item label="SubDomain">
   28               <span>{{ props.row.subdomain }}</span>
   29             </el-form-item>
   30             <el-form-item label="Encryption">
   31               <span>{{ props.row.encryption }}</span>
   32             </el-form-item>
   33             <el-form-item label="Compression">
   34               <span>{{ props.row.compression }}</span>
   35             </el-form-item>
   36             <el-form-item label="Last Start">
   37               <span>{{ props.row.last_start_time }}</span>
   38             </el-form-item>
   39             <el-form-item label="Last Close">
   40               <span>{{ props.row.last_close_time }}</span>
   41             </el-form-item>
   42         </el-form>
   43     </template>
   44     </el-table-column>
   45     <el-table-column
   46       label="Name"
   47       prop="name"
   48       sortable>
   49     </el-table-column>
   50     <el-table-column
   51       label="Port"
   52       prop="port"
   53       sortable>
   54     </el-table-column>
   55     <el-table-column
   56       label="Connections"
   57       prop="conns"
   58       sortable>
   59     </el-table-column>
   60     <el-table-column
   61       label="Traffic In"
   62       prop="traffic_in"
   63       :formatter="formatTrafficIn"
   64       sortable>
   65     </el-table-column>
   66     <el-table-column
   67       label="Traffic Out"
   68       prop="traffic_out"
   69       :formatter="formatTrafficOut"
   70       sortable>
   71     </el-table-column>
   72     <el-table-column
   73       label="status"
   74       prop="status"
   75       sortable>
   76       <template slot-scope="scope">
   77         <el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag>
   78         <el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
   79       </template>
   80     </el-table-column>
   81 </el-table>
   82 
   83 </div>
   84 </template>
   85 
   86 <script>
   87   import Humanize from 'humanize-plus';
   88   import Traffic from './Traffic.vue'
   89   import {
   90     HttpsProxy
   91   } from '../utils/proxy.js'
   92   export default {
   93     data() {
   94       return {
   95         proxies: null,
   96         vhost_https_port: '',
   97         subdomain_host: ''
   98       }
   99     },
  100     created() {
  101       this.fetchData()
  102     },
  103     watch: {
  104       '$route': 'fetchData'
  105     },
  106     methods: {
  107       formatTrafficIn(row, column) {
  108         return Humanize.fileSize(row.traffic_in)
  109       },
  110       formatTrafficOut(row, column) {
  111         return Humanize.fileSize(row.traffic_out)
  112       },
  113       fetchData() {
  114         fetch('../api/serverinfo', {credentials: 'include'})
  115           .then(res => {
  116             return res.json()
  117           }).then(json => {
  118             this.vhost_https_port = json.vhost_https_port
  119             this.subdomain_host = json.subdomain_host
  120             if (this.vhost_https_port == null || this.vhost_https_port == 0) {
  121               return
  122             } else {
  123               fetch('../api/proxy/https', {credentials: 'include'})
  124                 .then(res => {
  125                   return res.json()
  126                 }).then(json => {
  127                   this.proxies = new Array()
  128                   for (let proxyStats of json.proxies) {
  129                     this.proxies.push(new HttpsProxy(proxyStats, this.vhost_https_port, this.subdomain_host))
  130                   }
  131                 })
  132             }
  133           })
  134       }
  135     },
  136     components: {
  137         'my-traffic-chart': Traffic
  138     }
  139   }
  140 </script>
  141 
  142 <style>
  143 </style>