"Fossies" - the Fresh Open Source Software Archive

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