"Fossies" - the Fresh Open Source Software Archive

Member "frp-0.36.2/web/frps/src/components/ProxiesTcp.vue" (22 Mar 2021, 3569 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" :name="props.row.name" style="margin-bottom:10px" @click="fetchData2">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 { TcpProxy } from '../utils/proxy.js'
   86   export default {
   87     data() {
   88       return {
   89         proxies: null
   90       }
   91     },
   92     created() {
   93       this.fetchData()
   94     },
   95     watch: {
   96       '$route': 'fetchData'
   97     },
   98     methods: {
   99       formatTrafficIn(row, column) {
  100         return Humanize.fileSize(row.traffic_in)
  101       },
  102       formatTrafficOut(row, column) {
  103         return Humanize.fileSize(row.traffic_out)
  104       },
  105       fetchData() {
  106         fetch('../api/proxy/tcp', {credentials: 'include'})
  107           .then(res => {
  108             return res.json()
  109           }).then(json => {
  110             this.proxies = new Array()
  111             for (let proxyStats of json.proxies) {
  112               this.proxies.push(new TcpProxy(proxyStats))
  113             }
  114           })
  115       }
  116     },
  117     components: {
  118         'my-traffic-chart': Traffic
  119     }
  120   }
  121 </script>
  122 
  123 <style>
  124 </style>