"Fossies" - the Fresh Open Source Software Archive

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