XiaoMo/frp
1
0
Fork 0
mirror of https://github.com/fatedier/frp.git synced 2026-01-11 22:23:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

revert web code (#2215)

Browse Source
This commit is contained in:
fatedier
2021-01-25 16:04:33 +08:00
committed by GitHub
parent b26080589b
commit ecb6ed9258
53 changed files with 9003 additions and 21790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
web/frps/src/components/Overview.vue
View File

@@ -1,160 +1,166 @@
<template>
<div>
<el-row>
<el-col :md="12">
<div class="source">
<el-form label-position="left" class="server_info">
<el-form-item label="Version">
<span>{{ version }}</span>
</el-form-item>
<el-form-item label="BindPort">
<span>{{ bind_port }}</span>
</el-form-item>
<el-form-item label="BindUdpPort">
<span>{{ bind_udp_port }}</span>
</el-form-item>
<el-form-item label="Http Port">
<span>{{ vhost_http_port }}</span>
</el-form-item>
<el-form-item label="Https Port">
<span>{{ vhost_https_port }}</span>
</el-form-item>
<el-form-item label="Subdomain Host">
<span>{{ subdomain_host }}</span>
</el-form-item>
<el-form-item label="Max PoolCount">
<span>{{ max_pool_count }}</span>
</el-form-item>
<el-form-item label="Max Ports Per Client">
<span>{{ max_ports_per_client }}</span>
</el-form-item>
<el-form-item label="HeartBeat Timeout">
<span>{{ heart_beat_timeout }}</span>
</el-form-item>
<el-form-item label="Client Counts">
<span>{{ client_counts }}</span>
</el-form-item>
<el-form-item label="Current Connections">
<span>{{ cur_conns }}</span>
</el-form-item>
<el-form-item label="Proxy Counts">
<span>{{ proxy_counts }}</span>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :md="12">
<div id="traffic" style="width: 400px; height: 250px; margin-bottom: 30px" />
<div id="proxies" style="width: 400px; height: 250px" />
</el-col>
</el-row>
</div>
<div>
<el-row>
<el-col :md="12">
<div class="source">
<el-form label-position="left" class="server_info">
<el-form-item label="Version">
<span>{{ version }}</span>
</el-form-item>
<el-form-item label="BindPort">
<span>{{ bind_port }}</span>
</el-form-item>
<el-form-item label="BindUdpPort">
<span>{{ bind_udp_port }}</span>
</el-form-item>
<el-form-item label="Http Port">
<span>{{ vhost_http_port }}</span>
</el-form-item>
<el-form-item label="Https Port">
<span>{{ vhost_https_port }}</span>
</el-form-item>
<el-form-item label="Subdomain Host">
<span>{{ subdomain_host }}</span>
</el-form-item>
<el-form-item label="Max PoolCount">
<span>{{ max_pool_count }}</span>
</el-form-item>
<el-form-item label="Max Ports Per Client">
<span>{{ max_ports_per_client }}</span>
</el-form-item>
<el-form-item label="HeartBeat Timeout">
<span>{{ heart_beat_timeout }}</span>
</el-form-item>
<el-form-item label="Client Counts">
<span>{{ client_counts }}</span>
</el-form-item>
<el-form-item label="Current Connections">
<span>{{ cur_conns }}</span>
</el-form-item>
<el-form-item label="Proxy Counts">
<span>{{ proxy_counts }}</span>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :md="12">
<div id="traffic" style="width: 400px;height:250px;margin-bottom: 30px;"></div>
<div id="proxies" style="width: 400px;height:250px;"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import { DrawTrafficChart, DrawProxyChart } from '../utils/chart.js'
export default {
data() {
return {
version: '',
bind_port: '',
bind_udp_port: '',
vhost_http_port: '',
vhost_https_port: '',
subdomain_host: '',
max_pool_count: '',
max_ports_per_client: '',
heart_beat_timeout: '',
client_counts: '',
cur_conns: '',
proxy_counts: ''
import {DrawTrafficChart, DrawProxyChart} from '../utils/chart.js'
export default {
data() {
return {
version: '',
bind_port: '',
bind_udp_port: '',
vhost_http_port: '',
vhost_https_port: '',
subdomain_host: '',
max_pool_count: '',
max_ports_per_client: '',
heart_beat_timeout: '',
client_counts: '',
cur_conns: '',
proxy_counts: ''
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
fetchData() {
fetch('/api/serverinfo', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.version = json.version
this.bind_port = json.bind_port
this.bind_udp_port = json.bind_udp_port
if (this.bind_udp_port == 0) {
this.bind_udp_port = "disable"
}
this.vhost_http_port = json.vhost_http_port
if (this.vhost_http_port == 0) {
this.vhost_http_port = "disable"
}
this.vhost_https_port = json.vhost_https_port
if (this.vhost_https_port == 0) {
this.vhost_https_port = "disable"
}
this.subdomain_host = json.subdomain_host
this.max_pool_count = json.max_pool_count
this.max_ports_per_client = json.max_ports_per_client
if (this.max_ports_per_client == 0) {
this.max_ports_per_client = "no limit"
}
this.heart_beat_timeout = json.heart_beat_timeout
this.client_counts = json.client_counts
this.cur_conns = json.cur_conns
this.proxy_counts = 0
if (json.proxy_type_count != null) {
if (json.proxy_type_count.tcp != null) {
this.proxy_counts += json.proxy_type_count.tcp
}
if (json.proxy_type_count.udp != null) {
this.proxy_counts += json.proxy_type_count.udp
}
if (json.proxy_type_count.http != null) {
this.proxy_counts += json.proxy_type_count.http
}
if (json.proxy_type_count.https != null) {
this.proxy_counts += json.proxy_type_count.https
}
if (json.proxy_type_count.stcp != null) {
this.proxy_counts += json.proxy_type_count.stcp
}
if (json.proxy_type_count.xtcp != null) {
this.proxy_counts += json.proxy_type_count.xtcp
}
}
DrawTrafficChart('traffic', json.total_traffic_in, json.total_traffic_out)
DrawProxyChart('proxies', json)
}).catch( err => {
this.$message({
showClose: true,
message: 'Get server info from frps failed!',
type: 'warning'
})
})
}
}
}
},
computed: {
serverInfo() {
return this.$store.state.serverInfo
}
},
mounted() {
this.initData()
},
methods: {
initData() {
console.log(!!this.serverInfo, this.serverInfo)
if (!this.serverInfo) return
this.version = this.serverInfo.version
this.bind_port = this.serverInfo.bind_port
this.bind_udp_port = this.serverInfo.bind_udp_port
if (this.bind_udp_port === 0) {
this.bind_udp_port = 'disable'
}
this.vhost_http_port = this.serverInfo.vhost_http_port
if (this.vhost_http_port === 0) {
this.vhost_http_port = 'disable'
}
this.vhost_https_port = this.serverInfo.vhost_https_port
if (this.vhost_https_port === 0) {
this.vhost_https_port = 'disable'
}
this.subdomain_host = this.serverInfo.subdomain_host
this.max_pool_count = this.serverInfo.max_pool_count
this.max_ports_per_client = this.serverInfo.max_ports_per_client
if (this.max_ports_per_client === 0) {
this.max_ports_per_client = 'no limit'
}
this.heart_beat_timeout = this.serverInfo.heart_beat_timeout
this.client_counts = this.serverInfo.client_counts
this.cur_conns = this.serverInfo.cur_conns
this.proxy_counts = 0
if (this.serverInfo.proxy_type_count != null) {
if (this.serverInfo.proxy_type_count.tcp != null) {
this.proxy_counts += this.serverInfo.proxy_type_count.tcp
}
if (this.serverInfo.proxy_type_count.udp != null) {
this.proxy_counts += this.serverInfo.proxy_type_count.udp
}
if (this.serverInfo.proxy_type_count.http != null) {
this.proxy_counts += this.serverInfo.proxy_type_count.http
}
if (this.serverInfo.proxy_type_count.https != null) {
this.proxy_counts += this.serverInfo.proxy_type_count.https
}
if (this.serverInfo.proxy_type_count.stcp != null) {
this.proxy_counts += this.serverInfo.proxy_type_count.stcp
}
if (this.serverInfo.proxy_type_count.xtcp != null) {
this.proxy_counts += this.serverInfo.proxy_type_count.xtcp
}
}
DrawTrafficChart('traffic', this.serverInfo.total_traffic_in, this.serverInfo.total_traffic_out)
DrawProxyChart('proxies', this.serverInfo)
}
}
}
</script>
<style>
.source {
border: 1px solid #eaeefb;
border-radius: 4px;
transition: 0.2s;
padding: 24px;
border: 1px solid #eaeefb;
border-radius: 4px;
transition: .2s;
padding: 24px;
}
.server_info {
margin-left: 40px;
font-size: 0px;
margin-left: 40px;
font-size: 0px;
}
.server_info label {
width: 150px;
color: #99a9bf;
width: 150px;
color: #99a9bf;
}
.server_info .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 100%;
margin-right: 0;
margin-bottom: 0;
width: 100%;
}
</style>

169
web/frps/src/components/ProxiesHttp.vue
View File

@@ -1,14 +1,19 @@
<template>
<div>
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table :data="proxies" :default-sort="{prop: 'name', order: 'ascending'}" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
<my-traffic-chart :proxy-name="props.row.name" />
<el-popover
ref="popover4"
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom:10px">Traffic Statistics</el-button>
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="Name">
<span>{{ props.row.name }}</span>
@@ -40,68 +45,104 @@
<el-form-item label="Last Close">
<span>{{ props.row.last_close_time }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="Name" prop="name" sortable />
<el-table-column label="Port" prop="port" sortable />
<el-table-column label="Connections" prop="conns" sortable />
<el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
<el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column label="status" prop="status" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
</template>
</el-table-column>
<el-table-column
label="Name"
prop="name"
sortable>
</el-table-column>
<el-table-column
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue'
import { HttpProxy } from '../utils/proxy.js'
export default {
components: {
'my-traffic-chart': Traffic
},
data() {
return {
proxies: [],
vhost_http_port: '',
subdomain_host: ''
}
},
computed: {
serverInfo() {
return this.$store.state.serverInfo
}
},
mounted() {
this.initData()
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
async initData() {
if (!this.serverInfo) return
this.vhost_http_port = this.serverInfo.vhost_http_port
this.subdomain_host = this.serverInfo.subdomain_host
if (this.vhost_http_port == null || this.vhost_http_port === 0) return
const json = await this.$fetch('proxy/http')
if (!json) return
this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new HttpProxy(proxyStats, this.vhost_http_port, this.subdomain_host))
import Humanize from 'humanize-plus';
import Traffic from './Traffic.vue'
import {
HttpProxy
} from '../utils/proxy.js'
export default {
data() {
return {
proxies: null,
vhost_http_port: "",
subdomain_host: ""
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
fetchData() {
fetch('/api/serverinfo', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.vhost_http_port = json.vhost_http_port
this.subdomain_host = json.subdomain_host
if (this.vhost_http_port == null || this.vhost_http_port == 0) {
return
} else {
fetch('/api/proxy/http', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.proxies = new Array()
for (let proxyStats of json.proxies) {
this.proxies.push(new HttpProxy(proxyStats, this.vhost_http_port, this.subdomain_host))
}
})
}
})
}
},
components: {
'my-traffic-chart': Traffic
}
}
}
</script>
<style>
</style>

171
web/frps/src/components/ProxiesHttps.vue
View File

@@ -1,14 +1,19 @@
<template>
<div>
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table :data="proxies" :default-sort="{prop: 'name', order: 'ascending'}" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
<my-traffic-chart :proxy-name="props.row.name" />
<el-popover
ref="popover4"
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom:10px">Traffic Statistics</el-button>
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="Name">
<span>{{ props.row.name }}</span>
@@ -34,69 +39,105 @@
<el-form-item label="Last Close">
<span>{{ props.row.last_close_time }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="Name" prop="name" sortable />
<el-table-column label="Port" prop="port" sortable />
<el-table-column label="Connections" prop="conns" sortable />
<el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
<el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column label="status" prop="status" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
</template>
</el-table-column>
<el-table-column
label="Name"
prop="name"
sortable>
</el-table-column>
<el-table-column
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue'
import { HttpsProxy } from '../utils/proxy.js'
export default {
components: {
'my-traffic-chart': Traffic
},
data() {
return {
proxies: [],
vhost_https_port: '',
subdomain_host: ''
}
},
computed: {
serverInfo() {
return this.$store.state.serverInfo
}
},
mounted() {
this.initData()
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
async initData() {
if (!this.serverInfo) return
this.vhost_https_port = this.serverInfo.vhost_https_port
this.subdomain_host = this.serverInfo.subdomain_host
if (this.vhost_https_port == null || this.vhost_https_port === 0) return
const json = await this.$fetch('proxy/https')
if (!json) return
this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new HttpsProxy(proxyStats, this.vhost_https_port, this.subdomain_host))
import Humanize from 'humanize-plus';
import Traffic from './Traffic.vue'
import {
HttpsProxy
} from '../utils/proxy.js'
export default {
data() {
return {
proxies: null,
vhost_https_port: '',
subdomain_host: ''
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
fetchData() {
fetch('/api/serverinfo', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.vhost_https_port = json.vhost_https_port
this.subdomain_host = json.subdomain_host
if (this.vhost_https_port == null || this.vhost_https_port == 0) {
return
} else {
fetch('/api/proxy/https', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.proxies = new Array()
for (let proxyStats of json.proxies) {
this.proxies.push(new HttpsProxy(proxyStats, this.vhost_https_port, this.subdomain_host))
}
})
}
})
}
},
components: {
'my-traffic-chart': Traffic
}
}
}
</script>
<style>
</style>

133
web/frps/src/components/ProxiesStcp.vue
View File

@@ -1,16 +1,19 @@
<template>
<div>
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table :data="proxies" :default-sort="{prop: 'name', order: 'ascending'}" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
<my-traffic-chart :proxy-name="props.row.name" />
<el-popover
ref="popover4"
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover>
<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>
<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>
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="Name">
<span>{{ props.row.name }}</span>
@@ -30,57 +33,83 @@
<el-form-item label="Last Close">
<span>{{ props.row.last_close_time }}</span>
</el-form-item>
</el-form>
</el-form>
</template>
</el-table-column>
<el-table-column label="Name" prop="name" sortable />
<el-table-column label="Connections" prop="conns" sortable />
<el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
<el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column label="status" prop="status" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</el-table-column>
<el-table-column
label="Name"
prop="name"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue'
import { StcpProxy } from '../utils/proxy.js'
export default {
components: {
'my-traffic-chart': Traffic
},
data() {
return {
proxies: []
}
},
mounted() {
this.initData()
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
async initData() {
const json = await this.$fetch('proxy/stcp')
if (!json) return
this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new StcpProxy(proxyStats))
import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue'
import { StcpProxy } from '../utils/proxy.js'
export default {
data() {
return {
proxies: null
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
fetchData() {
fetch('/api/proxy/stcp', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.proxies = new Array()
for (let proxyStats of json.proxies) {
this.proxies.push(new StcpProxy(proxyStats))
}
})
}
},
components: {
'my-traffic-chart': Traffic
}
}
}
</script>
<style>

139
web/frps/src/components/ProxiesTcp.vue
View File

@@ -1,16 +1,19 @@
<template>
<div>
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table :data="proxies" :default-sort="{prop: 'name', order: 'ascending'}" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-popover placement="right" width="600" style="margin-left: 0px" trigger="click">
<my-traffic-chart :proxy-name="props.row.name" />
<el-button slot="reference" type="primary" size="small" icon="view" :name="props.row.name" style="margin-bottom: 10px">
Traffic Statistics
</el-button>
<el-popover
ref="popover4"
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover>
<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>
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="Name">
<span>{{ props.row.name }}</span>
@@ -33,58 +36,88 @@
<el-form-item label="Last Close">
<span>{{ props.row.last_close_time }}</span>
</el-form-item>
</el-form>
</el-form>
</template>
</el-table-column>
<el-table-column label="Name" prop="name" sortable />
<el-table-column label="Port" prop="port" sortable />
<el-table-column label="Connections" prop="conns" sortable />
<el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
<el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column label="status" prop="status" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</el-table-column>
<el-table-column
label="Name"
prop="name"
sortable>
</el-table-column>
<el-table-column
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue'
import { TcpProxy } from '../utils/proxy.js'
export default {
components: {
'my-traffic-chart': Traffic
},
data() {
return {
proxies: []
}
},
mounted() {
this.initData()
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
async initData() {
const json = await this.$fetch('proxy/tcp')
if (!json) return
this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new TcpProxy(proxyStats))
import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue'
import { TcpProxy } from '../utils/proxy.js'
export default {
data() {
return {
proxies: null
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
fetchData() {
fetch('/api/proxy/tcp', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.proxies = new Array()
for (let proxyStats of json.proxies) {
this.proxies.push(new TcpProxy(proxyStats))
}
})
}
},
components: {
'my-traffic-chart': Traffic
}
}
}
</script>
<style>

143
web/frps/src/components/ProxiesUdp.vue
View File

@@ -1,14 +1,19 @@
<template>
<div>
<el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
<el-table :data="proxies" :default-sort="{prop: 'name', order: 'ascending'}" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
<my-traffic-chart :proxy-name="props.row.name" />
<el-popover
ref="popover4"
placement="right"
width="600"
style="margin-left:0px"
trigger="click">
<my-traffic-chart :proxy_name="props.row.name"></my-traffic-chart>
</el-popover>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom: 10px">Traffic Statistics</el-button>
<el-button v-popover:popover4 type="primary" size="small" icon="view" style="margin-bottom:10px">Traffic Statistics</el-button>
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="Name">
<span>{{ props.row.name }}</span>
@@ -31,57 +36,91 @@
<el-form-item label="Last Close">
<span>{{ props.row.last_close_time }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="Name" prop="name" sortable />
<el-table-column label="Port" prop="port" sortable />
<el-table-column label="Connections" prop="conns" sortable />
<el-table-column label="Traffic In" prop="traffic_in" :formatter="formatTrafficIn" sortable />
<el-table-column label="Traffic Out" prop="traffic_out" :formatter="formatTrafficOut" sortable />
<el-table-column label="status" prop="status" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 'online'" type="success">{{ scope.row.status }}</el-tag>
<el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
</template>
</el-table-column>
<el-table-column
label="Name"
prop="name"
sortable>
</el-table-column>
<el-table-column
label="Port"
prop="port"
sortable>
</el-table-column>
<el-table-column
label="Connections"
prop="conns"
sortable>
</el-table-column>
<el-table-column
label="Traffic In"
prop="traffic_in"
:formatter="formatTrafficIn"
sortable>
</el-table-column>
<el-table-column
label="Traffic Out"
prop="traffic_out"
:formatter="formatTrafficOut"
sortable>
</el-table-column>
<el-table-column
label="status"
prop="status"
sortable>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'online'">{{ scope.row.status }}</el-tag>
<el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Humanize from 'humanize-plus'
import Traffic from './Traffic.vue'
import { UdpProxy } from '../utils/proxy.js'
export default {
components: {
'my-traffic-chart': Traffic
},
data() {
return {
proxies: []
}
},
mounted() {
this.initData()
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
async initData() {
const json = await this.$fetch('proxy/udp')
if (!json) return
this.proxies = []
for (const proxyStats of json.proxies) {
this.proxies.push(new UdpProxy(proxyStats))
import Humanize from 'humanize-plus';
import Traffic from './Traffic.vue'
import {
UdpProxy
} from '../utils/proxy.js'
export default {
data() {
return {
proxies: null
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
formatTrafficIn(row, column) {
return Humanize.fileSize(row.traffic_in)
},
formatTrafficOut(row, column) {
return Humanize.fileSize(row.traffic_out)
},
fetchData() {
fetch('/api/proxy/udp', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.proxies = new Array()
for (let proxyStats of json.proxies) {
this.proxies.push(new UdpProxy(proxyStats))
}
})
}
},
components: {
'my-traffic-chart': Traffic
}
}
}
</script>
<style>
</style>

46
web/frps/src/components/Traffic.vue
View File

@@ -1,26 +1,36 @@
<template>
<div :id="proxyName" style="width: 600px; height: 400px" />
<div :id="proxy_name" style="width: 600px;height:400px;"></div>
</template>
<script>
import { DrawProxyTrafficChart } from '../utils/chart.js'
import {DrawProxyTrafficChart} from '../utils/chart.js'
export default {
props: {
proxyName: {
type: String,
required: true
props: ['proxy_name'],
created() {
this.fetchData()
},
//watch: {
//'$route': 'fetchData'
//},
methods: {
fetchData() {
let url = '/api/traffic/' + this.proxy_name
fetch(url, {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
DrawProxyTrafficChart(this.proxy_name, json.traffic_in, json.traffic_out)
}).catch( err => {
this.$message({
showClose: true,
message: 'Get server info from frps failed!' + err,
type: 'warning'
})
})
}
}
},
mounted() {
this.initData()
},
methods: {
async initData() {
const json = await this.$fetch(`traffic/${this.proxyName}`)
if (!json) return
DrawProxyTrafficChart(this.proxyName, json.traffic_in, json.traffic_out)
}
}
}
</script>
<style>
</style>