mirror of
https://github.com/fatedier/frp.git
synced 2025-05-23 08:08:26 +00:00
92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-table
|
||
|
|
:data="proxies"
|
||
|
|
:default-sort="{ prop: 'name', order: 'ascending' }"
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<el-table-column type="expand">
|
||
|
|
<template #default="props">
|
||
|
|
<el-popover
|
||
|
|
ref="popoverTraffic"
|
||
|
|
:virtual-ref="buttonTraffic"
|
||
|
|
placement="right"
|
||
|
|
width="600"
|
||
|
|
style="margin-left: 0px"
|
||
|
|
trigger="click"
|
||
|
|
virtual-triggering
|
||
|
|
>
|
||
|
|
<Traffic :proxy_name="props.row.name" />
|
||
|
|
</el-popover>
|
||
|
|
|
||
|
|
<el-button
|
||
|
|
ref="buttonTraffic"
|
||
|
|
type="primary"
|
||
|
|
size="large"
|
||
|
|
:name="props.row.name"
|
||
|
|
style="margin-bottom: 10px"
|
||
|
|
v-click-outside="onClickTrafficStats"
|
||
|
|
>Traffic Statistics
|
||
|
|
</el-button>
|
||
|
|
|
||
|
|
<ProxyViewExpand :row="props.row" :proxyType="proxyType" />
|
||
|
|
</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 #default="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>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, unref } from 'vue'
|
||
|
|
import * as Humanize from 'humanize-plus'
|
||
|
|
import type { TableColumnCtx } from 'element-plus'
|
||
|
|
import type { BaseProxy } from '../utils/proxy.js'
|
||
|
|
import ProxyViewExpand from './ProxyViewExpand.vue'
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
proxies: BaseProxy[]
|
||
|
|
proxyType: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const formatTrafficIn = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
|
||
|
|
return Humanize.fileSize(row.traffic_in)
|
||
|
|
}
|
||
|
|
|
||
|
|
const formatTrafficOut = (row: BaseProxy, _: TableColumnCtx<BaseProxy>) => {
|
||
|
|
return Humanize.fileSize(row.traffic_out)
|
||
|
|
}
|
||
|
|
|
||
|
|
const buttonTraffic = ref()
|
||
|
|
const popoverTraffic = ref()
|
||
|
|
|
||
|
|
const onClickTrafficStats = () => {
|
||
|
|
unref(popoverTraffic).popoverTraffic?.delayHide?.()
|
||
|
|
}
|
||
|
|
</script>
|