"Fossies" - the Fresh Open Source Software Archive

Member "frp-0.36.2/web/frps/src/components/ProxiesUdp.vue" (22 Mar 2021, 3529 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="Addr">
   25               <span>{{ props.row.addr }}</span>
   26             </el-form-item>
   27             <el-form-item label="Encryption">
   28               <span>{{ props.row.encryption }}</span>
   29             </el-form-item>
   30             <el-form-item label="Compression">
   31               <span>{{ props.row.compression }}</span>
   32             </el-form-item>
   33             <el-form-item label="Last Start">
   34               <span>{{ props.row.last_start_time }}</span>
   35             </el-form-item>
   36             <el-form-item label="Last Close">
   37               <span>{{ props.row.last_close_time }}</span>
   38             </el-form-item>
   39         </el-form>
   40     </template>
   41     </el-table-column>
   42     <el-table-column
   43       label="Name"
   44       prop="name"
   45       sortable>
   46     </el-table-column>
   47     <el-table-column
   48       label="Port"
   49       prop="port"
   50       sortable>
   51     </el-table-column>
   52     <el-table-column
   53       label="Connections"
   54       prop="conns"
   55       sortable>
   56     </el-table-column>
   57     <el-table-column
   58       label="Traffic In"
   59       prop="traffic_in"
   60       :formatter="formatTrafficIn"
   61       sortable>
   62     </el-table-column>
   63     <el-table-column
   64       label="Traffic Out"
   65       prop="traffic_out"
   66       :formatter="formatTrafficOut"
   67       sortable>
   68     </el-table-column>
   69     <el-table-column
   70       label="status"
   71       prop="status"
   72       sortable>
   73       <template slot-scope="scope">
   74         <el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag>
   75         <el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
   76       </template>
   77     </el-table-column>
   78   </el-table>
   79 </div>
   80 </template>
   81 
   82 <script>
   83   import Humanize from 'humanize-plus';
   84   import Traffic from './Traffic.vue'
   85   import {
   86     UdpProxy
   87   } from '../utils/proxy.js'
   88   export default {
   89     data() {
   90       return {
   91         proxies: null
   92       }
   93     },
   94     created() {
   95       this.fetchData()
   96     },
   97     watch: {
   98       '$route': 'fetchData'
   99     },
  100     methods: {
  101       formatTrafficIn(row, column) {
  102         return Humanize.fileSize(row.traffic_in)
  103       },
  104       formatTrafficOut(row, column) {
  105         return Humanize.fileSize(row.traffic_out)
  106       },
  107       fetchData() {
  108         fetch('../api/proxy/udp', {credentials: 'include'})
  109           .then(res => {
  110             return res.json()
  111           }).then(json => {
  112             this.proxies = new Array()
  113             for (let proxyStats of json.proxies) {
  114               this.proxies.push(new UdpProxy(proxyStats))
  115             }
  116           })
  117       }
  118     },
  119     components: {
  120         'my-traffic-chart': Traffic
  121     }
  122   }
  123 </script>
  124 
  125 <style>
  126 </style>