mirror of
https://github.com/ehang-io/nps.git
synced 2025-09-02 03:16:53 +00:00
redo web UI |web close| client log |system info |p2p |max、ump optimization
This commit is contained in:
刘河
@@ -1,62 +1,92 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<div class="form-group" id="target">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" type="text" name="remark" placeholder="客户端备注">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-md-auto">
|
||||
<div class="ibox float-e-margins">
|
||||
<h3 class="ibox-title">add client</h3>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group" id="remark">
|
||||
<label class="col-sm-2 control-label">remark</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="remark" placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="flow_limit">
|
||||
<label class="control-label">流量限制(单位：M，为空不限制)</label>
|
||||
<input class="form-control" type="text" name="flow_limit" placeholder="为空不限制">
|
||||
<label class="col-sm-2 control-label">flow limitation</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="flow_limit"
|
||||
placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">unit: M</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="rate_limit">
|
||||
<label class="control-label">速度限制(单位：KB，为空不限制)</label>
|
||||
<input class="form-control" type="text" name="rate_limit" placeholder="为空不限制">
|
||||
<label class="control-label col-sm-2">bandwidth limitation</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="rate_limit"
|
||||
placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">unit: KB/S</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="max_conn">
|
||||
<label class="control-label">最大客户端连接数</label>
|
||||
<input class="form-control" type="text" name="max_conn" placeholder="为空不限制">
|
||||
<label class="control-label col-sm-2">maximum number of client connections</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="max_conn"
|
||||
placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="u">
|
||||
<label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" type="text" name="u" placeholder="不填则无需验证">
|
||||
<label class="control-label col-sm-2">web authentication username</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="u" placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">only socks5 , web, HTTP forward proxy </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="p">
|
||||
<label class="control-label">验证密码(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" type="text" name="p" placeholder="不填则无需验证">
|
||||
<label class="control-label col-sm-2">web authentication password </label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="p" placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">only socks5 , web, HTTP forward proxy </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="vkey">
|
||||
<label class="control-label">客户端连接密钥(唯一、不填将会自动生成)</label>
|
||||
<input class="form-control" type="text" name="vkey" placeholder="客户端连接密钥">
|
||||
<label class="control-label col-sm-2">client connection key</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="vkey" placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">unique, non-filling will be generated automatically</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">数据压缩方式</label>
|
||||
<select class="form-control" name="compress">
|
||||
<option value="">不压缩</option>
|
||||
<option value="snappy">snappy</option>
|
||||
</select>
|
||||
<label class="control-label col-sm-2">compress</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control" name="compress">
|
||||
<option value="0">no</option>
|
||||
<option value="1">yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">是否加密传输</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option value="0">不加密</option>
|
||||
<option value="1">加密</option>
|
||||
</select>
|
||||
<label class="control-label col-sm-2">crypt</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control" name="crypt">
|
||||
<option value="0">no</option>
|
||||
<option value="1">yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#add").on("click", function () {
|
||||
|
||||
@@ -1,69 +1,94 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">修改</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-md-auto">
|
||||
<div class="ibox float-e-margins">
|
||||
<h3 class="ibox-title">add client</h3>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<input type="hidden" name="id" value="{{.c.Id}}">
|
||||
<div class="form-group" id="target">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" value="{{.c.Remark}}" type="text" name="remark" placeholder="客户端备注">
|
||||
<div class="form-group" id="remark">
|
||||
<label class="col-sm-2 control-label">remark</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="{{.c.Remark}}" type="text" name="remark" placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="flow_limit">
|
||||
<label class="control-label">流量限制(单位：M，为空不限制)</label>
|
||||
<input class="form-control" value="{{.c.Flow.FlowLimit}}" type="text" name="flow_limit"
|
||||
placeholder="为空不限制">
|
||||
<label class="col-sm-2 control-label">flow limitation</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="{{.c.Flow.FlowLimit}}" type="text" name="flow_limit"
|
||||
placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">unit: M</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="rate_limit">
|
||||
<label class="control-label">速度限制(单位：KB，为空不限制)</label>
|
||||
<input class="form-control" value="{{.c.RateLimit}}" type="text" name="rate_limit"
|
||||
placeholder="为空不限制">
|
||||
<label class="control-label col-sm-2">bandwidth limitation</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="{{.c.RateLimit}}" type="text" name="rate_limit"
|
||||
placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">unit: KB/S</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="max_conn">
|
||||
<label class="control-label">最大客户端连接数</label>
|
||||
<input class="form-control" value="{{.c.MaxConn}}" type="text" name="max_conn"
|
||||
placeholder="为空不限制">
|
||||
<label class="control-label col-sm-2">maximum number of client connections</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="{{.c.MaxConn}}" type="text" name="max_conn"
|
||||
placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="u">
|
||||
<label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" value="{{.c.Cnf.U}}" type="text" name="u"
|
||||
placeholder="不填则无需验证">
|
||||
<label class="control-label col-sm-2">web authentication username</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="{{.c.Cnf.U}}" type="text" name="u" placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">only socks5 , web, HTTP forward proxy </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="p">
|
||||
<label class="control-label">验证密码(仅socks5,web穿透支持)</label>
|
||||
<input class="form-control" value="{{.c.Cnf.P}}" type="text" name="p"
|
||||
placeholder="不填则无需验证">
|
||||
<label class="control-label col-sm-2">web authentication password </label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="{{.c.Cnf.P}}" type="text" name="p" placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">only socks5 , web, HTTP forward proxy </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="vkey">
|
||||
<label class="control-label">客户端连接密钥(唯一、不填将会自动生成)</label>
|
||||
<input class="form-control" value="{{.c.VerifyKey}}" type="text" name="vkey"
|
||||
placeholder="客户端连接密钥">
|
||||
<label class="control-label col-sm-2">client connection key</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="{{.c.VerifyKey}}" type="text" name="vkey" placeholder="empty means to be unrestricted">
|
||||
<span class="help-block m-b-none">unique, non-filling will be generated automatically</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">数据压缩方式(所有模式均支持)</label>
|
||||
<select class="form-control" name="compress">
|
||||
<option {{if eq "" .c.Cnf.Compress}}selected{{end}} value="">不压缩</option>
|
||||
<option {{if eq "snappy" .c.Cnf.Compress}}selected{{end}} value="snappy">snappy压缩</option>
|
||||
</select>
|
||||
<label class="control-label col-sm-2">compress</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control" name="compress">
|
||||
<option {{if eq false .c.Cnf.Compress}}selected{{end}} value="0">no</option>
|
||||
<option {{if eq true .c.Cnf.Compress}}selected{{end}} value="1">yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="compress">
|
||||
<label class="control-label">是否加密传输(所有模式均支持)</label>
|
||||
<select class="form-control" name="crypt">
|
||||
<option {{if eq false .c.Cnf.Crypt}}selected{{end}} value="0">不加密</option>
|
||||
<option {{if eq true .c.Cnf.Crypt}}selected{{end}} value="1">加密</option>
|
||||
</select>
|
||||
<label class="control-label col-sm-2">crypt</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control" name="crypt">
|
||||
<option {{if eq false .c.Cnf.Compress}}selected{{end}} value="0">no</option>
|
||||
<option {{if eq true .c.Cnf.Compress}}selected{{end}} value="1">yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
|
||||
@@ -1,37 +1,42 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<div class="tile-body">
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>验证密钥</th>
|
||||
<th>客户端地址</th>
|
||||
<th>备注</th>
|
||||
<th>压缩方式</th>
|
||||
<th>加密</th>
|
||||
<th>用户名</th>
|
||||
<th>密码</th>
|
||||
<th>状态</th>
|
||||
<th>客户端连接状态</th>
|
||||
<th>出口流量</th>
|
||||
<th>入口流量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>client list</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="table-responsive">
|
||||
<div id="toolbar">
|
||||
<a href="/client/add" class="btn btn-primary dim" type="button">new</i></a>
|
||||
</div>
|
||||
<table id="taskList_table" class="table-striped table-hover"
|
||||
data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<table id="table"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
function del(id) {
|
||||
if (confirm("确定要删除数据吗？")) {
|
||||
if (confirm("Are you sure you want to delete it？？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/del",
|
||||
@@ -47,7 +52,7 @@
|
||||
}
|
||||
|
||||
function start(id) {
|
||||
if (confirm("确定要开始任务吗？")) {
|
||||
if (confirm("Are you sure you want to start it？？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/changestatus",
|
||||
@@ -63,7 +68,7 @@
|
||||
}
|
||||
|
||||
function stop(id) {
|
||||
if (confirm("确定要暂停吗？")) {
|
||||
if (confirm("Are you sure you want to stop it？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/client/changestatus",
|
||||
@@ -71,7 +76,6 @@
|
||||
"id": id, "status": 0
|
||||
},
|
||||
success:
|
||||
|
||||
function (res) {
|
||||
alert(res.msg)
|
||||
if (res.status) {
|
||||
@@ -90,133 +94,121 @@
|
||||
window.location.href = "/client/add"
|
||||
}
|
||||
|
||||
function show_tunnel_list(id) {
|
||||
function tunnel(id) {
|
||||
window.location.href = "/index/all?client_id=" + id
|
||||
}
|
||||
|
||||
function show_host_list(id) {
|
||||
function host(id) {
|
||||
window.location.href = "/index/hostlist?client_id=" + id
|
||||
}
|
||||
|
||||
$(document)
|
||||
|
||||
.ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate
|
||||
}
|
||||
},
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: false,
|
||||
ordering: false,
|
||||
ajax: {
|
||||
url: '/client/list',
|
||||
type: 'POST'
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
{data: 'Id'},
|
||||
{data: 'VerifyKey'},
|
||||
{data: "Addr"},
|
||||
{data: "Remark"},
|
||||
{data: "Addr"},
|
||||
{data: "Addr"},
|
||||
{data: "Addr"},
|
||||
{data: "Remark"},
|
||||
{data: "Status"},
|
||||
{data: "IsConnect"},
|
||||
{data: "Addr"},
|
||||
{data: "Addr"},
|
||||
{data: ""},
|
||||
],
|
||||
bFilter: false,
|
||||
columnDefs: [{
|
||||
targets: -1,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Status == true) {
|
||||
btn = "<button onclick=\"stop('" + row.Id + "')\" class=\"btn btn-secondary btn-sm\" type=\"button\">关闭</button>"
|
||||
} else {
|
||||
btn = "<button onclick=\"start('" + row.Id + "')\" class=\"btn btn-success btn-sm\" type=\"button\">打开</button>"
|
||||
}
|
||||
btn_del = '<button onclick="del(\'' + row.Id + '\')" class="btn btn-danger btn-sm">删除</button> '
|
||||
btn_edit = '<button onclick="edit(\'' + row.Id + '\')" class="btn btn-primary btn-sm">查看编辑</button> '
|
||||
btn_list = '<button onclick="show_tunnel_list(\'' + row.Id + '\')" class="btn btn-info btn-sm">隧道</button> '
|
||||
btn_host = '<button onclick="show_host_list(\'' + row.Id + '\')" class="btn btn-info btn-sm">域名</button> '
|
||||
return '<div class="btn-group" role="group" aria-label="..."> ' + btn + btn_del + btn_edit + btn_host + btn_list + '</div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -5,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == false) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">正常</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -4,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == false) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">未连接</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">已连接</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.InletFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.ExportFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -6,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Cnf.P
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -7,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Cnf.U
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: -8,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Cnf.Crypt == "0") {
|
||||
return "不加密"
|
||||
} else {
|
||||
return "加密"
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: -9,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Cnf.Compress
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
buttons: []
|
||||
});
|
||||
$("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
|
||||
})
|
||||
;
|
||||
/*bootstrap table*/
|
||||
$('#table').bootstrapTable({
|
||||
toolbar: "#toolbar",
|
||||
method: 'post', // 服务器数据的请求方式 get or post
|
||||
url: "/client/list", // 服务器数据的加载地址
|
||||
contentType: "application/x-www-form-urlencoded",
|
||||
striped: true, // 设置为true会有隔行变色效果
|
||||
showHeader: true,
|
||||
showColumns: true,
|
||||
showRefresh: true,
|
||||
pagination: true,//分页
|
||||
sidePagination: 'server',//服务器端分页
|
||||
pageNumber: 1,
|
||||
pageList: [5, 10, 20, 50],//分页步进值
|
||||
detailView: true,
|
||||
smartDisplay: true, // 智能显示 pagination 和 cardview 等
|
||||
detailFormatter: function (index, row, element) {
|
||||
return '<b>max connection num: </b>' + row.MaxConn + `       `
|
||||
+ '<b>now conn num: </b>' + row.NowConn + `       `
|
||||
+ '<b>rate limit: </b>' + row.Flow.FlowLimit + `m       `
|
||||
+ '<b>flow limit: </b>' + row.RateLimit + `kb/s       `
|
||||
+ '<b>export flow: </b>' + change(row.Flow.ExportFlow) + `       `
|
||||
+ '<b>inlet flow: </b>' + change(row.Flow.InletFlow) + `       ` + "<br/><br>"
|
||||
+ '<b>crypt: </b>' + row.Cnf.Crypt + `       `
|
||||
+ '<b>compress: </b>' + row.Cnf.Compress + `       `
|
||||
+ '<b>username: </b>' + row.Cnf.U + `       `
|
||||
+ '<b>password: </b>' + row.Cnf.P + `       ` + "<br/><br>"
|
||||
+ '<b>commond: </b>' + "<code>./npc -server={{.ip}}:{{.p}} -vkey=" + row.VerifyKey + "</code>"
|
||||
},
|
||||
//表格的列
|
||||
columns: [
|
||||
{
|
||||
field: 'Id',//域值
|
||||
title: 'id',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Remark',//域值
|
||||
title: 'remark',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'VerifyKey',//域值
|
||||
title: 'key',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Addr',//域值
|
||||
title: 'client addr',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Status',//域值
|
||||
title: 'setting status',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
if (value) {
|
||||
return '<span class="badge badge-primary">open</span>'
|
||||
} else {
|
||||
return '<span class="badge badge-badge">close</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'IsConnect',//域值
|
||||
title: 'client status',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
if (value) {
|
||||
return '<span class="badge badge-primary">online</span>'
|
||||
} else {
|
||||
return '<span class="badge badge-badge">offline</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'option',//域值
|
||||
title: 'option',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
btn_group = '<div class="btn-group">'
|
||||
btn = `<button onclick="del(` + row.Id + `)" class="btn-danger"><i class="fa fa-trash"></i></button><button onclick="edit(` + row.Id + `)" class="btn-primary"><i class="fa fa-edit"></i></button></div>`
|
||||
if (row.Status) {
|
||||
return btn_group + `<button onclick="stop(` + row.Id + `)" class="btn-warning"><i class="fa fa-close"></i></button>` + btn
|
||||
} else {
|
||||
return btn_group + `<button onclick="start(` + row.Id + `)" class="btn-warning"><i class="fa fa-check"></i></button>` + btn
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'show',//域值
|
||||
title: 'show',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
return `<button onclick="tunnel(` + row.Id + `)" class="btn-info">tunnel</button><button onclick="host(` + row.Id + `)" class="btn-primary">host</button>`
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,60 +1,87 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<div class="col-md-12 col-md-auto">
|
||||
<div class="ibox float-e-margins">
|
||||
<h3 class="ibox-title">add</h3>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="control-label">模式</label>
|
||||
<select class="form-control" name="type" id="type">
|
||||
<option {{if eq "tcpServer" .type}}selected{{end}} value="tcpServer">tcp隧道</option>
|
||||
<option {{if eq "udpServer" .type}}selected{{end}} value="udpServer">udp隧道</option>
|
||||
<option {{if eq "socks5Server" .type}}selected{{end}} value="socks5Server">socks5代理</option>
|
||||
<option {{if eq "httpProxyServer" .type}}selected{{end}} value="httpProxyServer">http代理
|
||||
<option {{if eq "secretServer" .type}}selected{{end}} value="secretServer">私密代理
|
||||
</select>
|
||||
<label class="col-sm-2 control-label">mode </label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control" name="type" id="type">
|
||||
<option {{if eq "tcp" .type}}selected{{end}} value="tcp">tcp</option>
|
||||
<option {{if eq "udp" .type}}selected{{end}} value="udp">udp</option>
|
||||
<option {{if eq "socks5" .type}}selected{{end}} value="socks5">socks5
|
||||
</option>
|
||||
<option {{if eq "httpProxy" .type}}selected{{end}} value="httpProxy">http
|
||||
<option {{if eq "secret" .type}}selected{{end}} value="secret">secret
|
||||
<option {{if eq "p2p" .type}}selected{{end}} value="p2p">p2p
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" type="text" name="remark" placeholder="备注">
|
||||
<label class="col-sm-2 control-label">remark</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="remark"
|
||||
placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="port">
|
||||
<label class="control-label">监听的端口</label>
|
||||
<input class="form-control" type="text" name="port" placeholder="公网服务器对外访问端口，例如8024">
|
||||
<label class="col-sm-2 control-label">port of server</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="port" placeholder="such as 8024">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="target">
|
||||
<label class="control-label">内网目标(ip:端口)</label>
|
||||
<input class="form-control" type="text" name="target" placeholder="内网代理地址，例如10.1.50.203:22">
|
||||
<label class="col-sm-2 control-label">target of Intranet(ip:port)</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="target"
|
||||
placeholder="such as 10.1.50.203:22 ">
|
||||
<span class="help-block m-b-none">can only fill in ports if it is local machine proxy</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="client_id">
|
||||
<label class="control-label">客户端ID</label>
|
||||
<input value="{{.client_id}}" class="form-control" type="text" name="client_id"
|
||||
placeholder="客户端id">
|
||||
<label class="col-sm-2 control-label">id of client</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.client_id}}" class="form-control" type="text" name="client_id"
|
||||
placeholder="id of client">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="password">
|
||||
<label class="control-label">私密模式唯一密钥</label>
|
||||
<input class="form-control" type="text" name="password"
|
||||
placeholder="私密模式唯一密钥">
|
||||
<label class="col-sm-2 control-label">unique identification key</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="password"
|
||||
placeholder="unique identification key">
|
||||
<span class="help-block m-b-none">when p2p or secret</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>添加
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
var arr = []
|
||||
arr["all"] = ["type", "port", "compress", "u", "p", "target"]
|
||||
arr["tcpServer"] = ["type", "port", "target", "compress", "u", "p", "tcp隧道模式，提供一条tcp隧道，适用于ssh、远程桌面等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的目标端口"]
|
||||
arr["udpServer"] = ["type", "port", "target", "compress", "udp隧道模式，提供一条udp隧道，适用于dns、内网dns访问等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的udp目标端口"]
|
||||
arr["socks5Server"] = ["type", "port", "compress", "u", "p", "socks5代理模式，内网socks5代理，配合proxifer，可如同使用vpn一样访问内网设备或资源，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置socks5代理，即访问内网设备或者资源 "]
|
||||
arr["httpProxyServer"] = ["type", "port", "compress", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
|
||||
arr["secretServer"] = ["type", "target", "compress", "password", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
|
||||
arr["all"] = ["type", "port", "compress", "u", "p", "target", "password"]
|
||||
arr["tcp"] = ["type", "port", "target", "compress", "u", "p", "tcp隧道模式，提供一条tcp隧道，适用于ssh、远程桌面等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的目标端口"]
|
||||
arr["udp"] = ["type", "port", "target", "compress", "udp隧道模式，提供一条udp隧道，适用于dns、内网dns访问等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的udp目标端口"]
|
||||
arr["socks5"] = ["type", "port", "compress", "u", "p", "socks5代理模式，内网socks5代理，配合proxifer，可如同使用vpn一样访问内网设备或资源，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置socks5代理，即访问内网设备或者资源 "]
|
||||
arr["httpProxy"] = ["type", "port", "compress", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
|
||||
arr["secret"] = ["type", "target", "compress", "password", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
|
||||
arr["p2p"] = ["type", "compress", "password", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
|
||||
arrClientHide = ["compress", "u", "p", "crypt", "mux"]
|
||||
|
||||
function resetForm() {
|
||||
|
||||
@@ -1,64 +1,89 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">修改</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<div class="col-md-12 col-md-auto">
|
||||
<div class="ibox float-e-margins">
|
||||
<h3 class="ibox-title">编辑</h3>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<input type="hidden" name="id" value="{{.t.Id}}">
|
||||
<div class="form-group">
|
||||
<label class="control-label">模式</label>
|
||||
<select class="form-control" name="type" id="type">
|
||||
<option {{if eq "tcpServer" .t.Mode}}selected{{end}} value="tcpServer">tcp隧道</option>
|
||||
<option {{if eq "udpServer" .t.Mode}}selected{{end}} value="udpServer">udp隧道</option>
|
||||
<option {{if eq "socks5Server" .t.Mode}}selected{{end}} value="socks5Server">socks5代理
|
||||
</option>
|
||||
<option {{if eq "httpProxyServer" .t.Mode}}selected{{end}} value="httpProxyServer">http代理
|
||||
<option {{if eq "secretServer" .t.Mode}}selected{{end}} value="secretServer">私密代理
|
||||
</select>
|
||||
<label class="col-sm-2 control-label">mode </label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control" name="type" id="type">
|
||||
<option {{if eq "tcp" .t.Mode}}selected{{end}} value="tcp">tcp</option>
|
||||
<option {{if eq "udp" .t.Mode}}selected{{end}} value="udp">udp</option>
|
||||
<option {{if eq "socks5" .t.Mode}}selected{{end}} value="socks5">socks5
|
||||
</option>
|
||||
<option {{if eq "httpProxy" .t.Mode}}selected{{end}} value="httpProxy">http
|
||||
<option {{if eq "secret" .t.Mode}}selected{{end}} value="secret">secret
|
||||
<option {{if eq "p2p" .t.Mode}}selected{{end}} value="p2p">p2p
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" value="{{.t.Remark}}" type="text" name="remark" placeholder="备注">
|
||||
<label class="col-sm-2 control-label">remark</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.t.Remark}}" class="form-control" type="text" name="remark"
|
||||
placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="port">
|
||||
<label class="control-label">监听的端口</label>
|
||||
<input class="form-control" value="{{.t.Port}}" type="text" name="port"
|
||||
placeholder="公网服务器对外访问端口，例如8024">
|
||||
<label class="col-sm-2 control-label">port of server</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.t.Port}}" class="form-control" type="text" name="port" placeholder="such as 8024">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="target">
|
||||
<label class="control-label">内网目标(仅tcp、udp隧道模式需填写)</label>
|
||||
<input class="form-control" value="{{.t.Target}}" type="text" name="target"
|
||||
placeholder="内网隧道目标，例如10.1.50.203:22">
|
||||
<label class="col-sm-2 control-label">target of Intranet(ip:port)</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.t.Target}}" class="form-control" type="text" name="target"
|
||||
placeholder="such as 10.1.50.203:22 ">
|
||||
<span class="help-block m-b-none">can only fill in ports if it is local machine proxy</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="client_id">
|
||||
<label class="control-label">客户端ID</label>
|
||||
<input class="form-control" value="{{.t.Client.Id}}" type="text" name="client_id"
|
||||
placeholder="客户端id">
|
||||
<label class="col-sm-2 control-label">id of client</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.t.Client.Id}}" value="{{.client_id}}" class="form-control" type="text" name="client_id"
|
||||
placeholder="id of client">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="password">
|
||||
<label class="control-label">私密模式唯一密钥</label>
|
||||
<input class="form-control" value="{{.t.Password}}" type="text" name="password"
|
||||
placeholder="私密模式唯一密钥">
|
||||
<label class="col-sm-2 control-label">unique identification key</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.t.Password}}" class="form-control" type="text" name="password"
|
||||
placeholder="unique identification key">
|
||||
<span class="help-block m-b-none">when p2p or secret</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
var arr = []
|
||||
arr["all"] = ["type", "port", "compress", "u", "p", "target"]
|
||||
arr["tcpServer"] = ["type", "port", "target", "u", "p", "compress"]
|
||||
arr["udpServer"] = ["type", "port", "target", "compress"]
|
||||
arr["socks5Server"] = ["type", "port", "compress", "u", "p"]
|
||||
arr["httpProxyServer"] = ["type", "port", "compress", "u", "p"]
|
||||
arr["secretServer"] = ["type", "target", "compress", "u", "p","password"]
|
||||
arr["all"] = ["type", "port", "compress", "u", "p", "target","password"]
|
||||
arr["tcp"] = ["type", "port", "target", "u", "p", "compress"]
|
||||
arr["udp"] = ["type", "port", "target", "compress"]
|
||||
arr["socks5"] = ["type", "port", "compress", "u", "p"]
|
||||
arr["httpProxy"] = ["type", "port", "compress", "u", "p"]
|
||||
arr["secret"] = ["type", "target", "compress", "u", "p","password"]
|
||||
arr["p2p"] = ["type", "compress", "u", "p","password"]
|
||||
arrClientHide = ["compress", "u", "p", "crypt", "mux"]
|
||||
|
||||
function resetForm() {
|
||||
|
||||
@@ -1,52 +1,75 @@
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">添加</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<div class="col-md-12 col-md-auto">
|
||||
<div class="ibox float-e-margins">
|
||||
<h3 class="ibox-title">add host</h3>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" type="text" name="remark" placeholder="备注">
|
||||
<label class="col-sm-2 control-label">remark</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="remark" placeholder="remark">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">域名</label>
|
||||
<input class="form-control" type="text" name="host" placeholder="域名">
|
||||
<label class="col-sm-2 control-label">host</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="host" placeholder="such as a.proxy.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">URL路由(可忽略)</label>
|
||||
<input class="form-control" type="text" name="location" placeholder="URL路由">
|
||||
<label class="col-sm-2 control-label">url router</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" name="location"
|
||||
placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">客户端id</label>
|
||||
<input value="{{.client_id}}" class="form-control" type="text" name="client_id"
|
||||
placeholder="客户端id">
|
||||
<label class="col-sm-2 control-label">client id</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.client_id}}" class="form-control" type="text" name="client_id"
|
||||
placeholder="client id">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">内网目标</label>
|
||||
<label class="col-sm-2 control-label">target of Intranet(ip:port)</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea class="form-control" rows="4" type="text" name="target"
|
||||
placeholder="内网隧道目标，例如10.1.50.203:22，如需负载均衡多个地址换行分隔"></textarea>
|
||||
placeholder="such as
|
||||
10.1.50.203:80
|
||||
10.1.50.202:80"></textarea>
|
||||
<span class="help-block m-b-none">Line break if load balancing</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="header">
|
||||
<label class="control-label">header头修改(冒号分隔，多个请换行填写)</label>
|
||||
<label class="col-sm-2 control-label">header modify</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea class="form-control" rows="4" type="text" name="header"
|
||||
placeholder="Cache-Control: no-cache"></textarea>
|
||||
<span class="help-block m-b-none"> Colon separated, multiple lines please fill in</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group" id="hostchange">
|
||||
<label class="control-label">host修改</label>
|
||||
<input class="form-control" value="" type="text" name="hostchange"
|
||||
placeholder="host修改">
|
||||
<label class="col-sm-2 control-label">host modify</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" value="" type="text" name="hostchange"
|
||||
placeholder="host modify">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#add").on("click", function () {
|
||||
|
||||
@@ -1,54 +1,78 @@
|
||||
|
||||
<div class="row tile">
|
||||
<div class="col-md-6 col-md-auto">
|
||||
<div>
|
||||
<h3 class="tile-title">修改</h3>
|
||||
<div class="tile-body">
|
||||
<form>
|
||||
<div class="col-md-12 col-md-auto">
|
||||
<div class="ibox float-e-margins">
|
||||
<h3 class="ibox-title">add host</h3>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<input type="hidden" name="id" value="{{.h.Id}}">
|
||||
<div class="form-group">
|
||||
<label class="control-label">域名</label>
|
||||
<input class="form-control" value="{{.h.Host}}" name="host" placeholder="域名">
|
||||
<label class="col-sm-2 control-label">remark</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.h.Remark}}" class="form-control" type="text" name="remark" placeholder="remark">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">URL路由(可忽略)</label>
|
||||
<input class="form-control" value="{{.h.Location}}" type="text" name="location"
|
||||
placeholder="URL路由">
|
||||
<label class="col-sm-2 control-label">host</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.h.Host}}" class="form-control" type="text" name="host" placeholder="such as a.proxy.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">备注</label>
|
||||
<input class="form-control" value="{{.h.Remark}}" type="text" name="remark" placeholder="备注">
|
||||
<label class="col-sm-2 control-label">url router</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.h.Location}}" class="form-control" type="text" name="location"
|
||||
placeholder="empty means to be unrestricted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">客户端id</label>
|
||||
<input class="form-control" value="{{.h.Client.Id}}" type="text" name="client_id"
|
||||
placeholder="客户端id">
|
||||
<label class="col-sm-2 control-label">client id</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.h.Client.Id}}" class="form-control" type="text" name="client_id"
|
||||
placeholder="client id">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">内网目标</label>
|
||||
<label class="col-sm-2 control-label">target of Intranet(ip:port)</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea class="form-control" rows="4" type="text" name="target"
|
||||
placeholder="内网隧道目标，例如10.1.50.203:22，换行分隔">{{.h.Target}}</textarea>
|
||||
placeholder="such as
|
||||
10.1.50.203:80
|
||||
10.1.50.202:80">{{.h.Target}}</textarea>
|
||||
<span class="help-block m-b-none">Line break if load balancing</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="header">
|
||||
<label class="control-label">header头修改(冒号分隔，多个请换行填写)</label>
|
||||
<label class="col-sm-2 control-label">header modify</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea class="form-control" rows="4" type="text" name="header"
|
||||
placeholder="Cache-Control: no-cache">{{.h.HeaderChange}}</textarea>
|
||||
<span class="help-block m-b-none"> Colon separated, multiple lines please fill in</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group" id="hostchange">
|
||||
<label class="control-label">host修改</label>
|
||||
<input class="form-control" value="{{.h.HostChange}}" type="text" name="hostchange"
|
||||
placeholder="host修改">
|
||||
<label class="col-sm-2 control-label">host modify</label>
|
||||
<div class="col-sm-10">
|
||||
<input value="{{.h.HostChange}}" class="form-control" value="" type="text" name="hostchange"
|
||||
placeholder="host modify">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tile-footer">
|
||||
<button class="btn btn-success" href="#" id="add"><i
|
||||
class="fa fa-fw fa-lg fa-eye"></i>保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$("#add").on("click", function () {
|
||||
|
||||
@@ -1,39 +1,147 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<div class="tile-body">
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>客户端id</th>
|
||||
<th>备注</th>
|
||||
<th>host</th>
|
||||
<th>location</th>
|
||||
<th>内网目标</th>
|
||||
<th>host改写</th>
|
||||
<th>压缩方式</th>
|
||||
<th>加密</th>
|
||||
<th>用户名</th>
|
||||
<th>密码</th>
|
||||
<th>出口流量</th>
|
||||
<th>入口流量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>host list</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="table-responsive">
|
||||
<div id="toolbar">
|
||||
<a href="/index/addhost?vkey={{.task_id}}&client_id={{.client_id}}"
|
||||
class="btn btn-primary dim"
|
||||
type="button">new</a>
|
||||
</div>
|
||||
<table id="taskList_table" class="table-striped table-hover"
|
||||
data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<table id="table"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/*bootstrap table*/
|
||||
$('#table').bootstrapTable({
|
||||
toolbar: "#toolbar",
|
||||
method: 'post', // 服务器数据的请求方式 get or post
|
||||
url: window.location, // 服务器数据的加载地址
|
||||
queryParams: function (params) {
|
||||
return {
|
||||
"offset": params.offset,
|
||||
"limit": params.limit,
|
||||
}
|
||||
},
|
||||
contentType: "application/x-www-form-urlencoded",
|
||||
striped: true, // 设置为true会有隔行变色效果
|
||||
showHeader: true,
|
||||
showColumns: true,
|
||||
showRefresh: true,
|
||||
pagination: true,//分页
|
||||
sidePagination: 'server',//服务器端分页
|
||||
pageNumber: 1,
|
||||
pageList: [5, 10, 20, 50],//分页步进值
|
||||
detailView: true,
|
||||
smartDisplay: true, // 智能显示 pagination 和 cardview 等
|
||||
detailFormatter: function (index, row, element) {
|
||||
return '<b>export flow: </b>' + change(row.Flow.ExportFlow) + `       `
|
||||
+ '<b>inlet flow: </b>' + change(row.Flow.InletFlow) + `       `
|
||||
+ '<b>crypt: </b>' + row.Client.Cnf.Crypt + `       `
|
||||
+ '<b>compress: </b>' + row.Client.Cnf.Compress + `       ` + "<br/><br>"
|
||||
+ '<b>username: </b>' + row.Client.Cnf.U + `       `
|
||||
+ '<b>password: </b>' + row.Client.Cnf.P + `       ` + "<br/><br>"
|
||||
+ '<b>header_change: </b>' + row.HeaderChange + `       `
|
||||
},
|
||||
//表格的列
|
||||
columns: [
|
||||
{
|
||||
field: 'Id',//域值
|
||||
title: 'id',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Id',//域值
|
||||
title: 'client id',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
return row.Client.Id
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'Remark',//域值
|
||||
title: 'remark',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Host',//域值
|
||||
title: 'host',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Target',//域值
|
||||
title: 'target',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Location',//域值
|
||||
title: 'location',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: '',//域值
|
||||
title: 'client status',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
if (row.Client.IsConnect) {
|
||||
return '<span class="badge badge-primary">online</span>'
|
||||
} else {
|
||||
return '<span class="badge badge-badge">offline</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'option',//域值
|
||||
title: 'option',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
btn_group = '<div class="btn-group">'
|
||||
btn = `<button onclick="del(` + row.Id + `)" class="btn-danger"><i class="fa fa-trash"></i></button><button onclick="edit(` + row.Id + `)" class="btn-primary"><i class="fa fa-edit"></i></button></div>`
|
||||
return btn_group + btn
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function del(id) {
|
||||
if (confirm("确定要删除数据吗？")) {
|
||||
if (confirm("Are you sure you want to delete it？？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/delhost",
|
||||
@@ -48,112 +156,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = "/index/addhost?vkey={{.task_id}}&client_id={{.client_id}}"
|
||||
}
|
||||
|
||||
function edit(id) {
|
||||
window.location.href = "/index/edithost?id=" + id
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate
|
||||
}
|
||||
},
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: false,
|
||||
ordering: false,
|
||||
ajax: {
|
||||
url: window.location,
|
||||
type: 'POST'
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
{data: 'Id'},
|
||||
{data: 'Remark'},
|
||||
{data: 'Remark'},
|
||||
{data: 'Host'},
|
||||
{data: 'Location'},
|
||||
{data: 'Target'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'HostChange'},
|
||||
{data: 'Target'},
|
||||
],
|
||||
bFilter: false,
|
||||
columnDefs: [{
|
||||
targets: -1,
|
||||
render: function (data, type, row, meta) {
|
||||
|
||||
return '<div class="btn-group" role="group" aria-label="..."> ' +
|
||||
'<button onclick="del(\'' + row.Id + '\')" type="button" class="btn btn-danger btn-sm">删除</button>' +
|
||||
'<button onclick="edit(\'' + row.Id + '\')" type="button" class="btn btn-primary btn-sm">编辑查看</button> '
|
||||
+ ' </div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Id
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.InletFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.ExportFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -4,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Cnf.P
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -5,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Cnf.U
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: -6,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Client.Cnf.Crypt == "0") {
|
||||
return "不加密"
|
||||
} else {
|
||||
return "加密"
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
targets: -7,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Cnf.Compress
|
||||
}
|
||||
}
|
||||
],
|
||||
buttons: []
|
||||
});
|
||||
$("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
|
||||
})
|
||||
;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,55 +1,451 @@
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small warning coloured-icon"><i class="icon fa fa-html5 fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>客户端连接端口</h4>
|
||||
<p><b>{{.p}}</b></p>
|
||||
{{/*<div class="row">*/}}
|
||||
{{/*<div class="col-md-3">*/}}
|
||||
{{/*<div class="widget-small warning coloured-icon"><i class="icon fa fa-html5 fa-3x"></i>*/}}
|
||||
{{/*<div class="info">*/}}
|
||||
{{/*<h4>客户端连接端口</h4>*/}}
|
||||
{{/*<p><b>{{.p}}</b></p>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*<div class="col-md-3">*/}}
|
||||
{{/*<div class="widget-small danger coloured-icon"><i class="icon fa fa-home fa-3x"></i>*/}}
|
||||
{{/*<div class="info">*/}}
|
||||
{{/*<h4>当前TCP连接总数</h4>*/}}
|
||||
{{/*<p><b>{{.data.tcpCount}}</b></p>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*<div class="col-md-3">*/}}
|
||||
{{/*<div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>*/}}
|
||||
{{/*<div class="info">*/}}
|
||||
{{/*<h4>总客户端数</h4>*/}}
|
||||
{{/*<p><b>{{.data.clientCount}}</b></p>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*<div class="col-md-3">*/}}
|
||||
{{/*<div class="widget-small info coloured-icon"><i class="icon fa fa-user-secret fa-3x"></i>*/}}
|
||||
{{/*<div class="info">*/}}
|
||||
{{/*<h4>在线客户端数</h4>*/}}
|
||||
{{/*<p><b>{{.data.clientOnlineCount}}</b></p>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*<div class="row">*/}}
|
||||
{{/*<div class="col-md-6">*/}}
|
||||
{{/*<div class="tile">*/}}
|
||||
{{/*<h3 class="tile-title">流量</h3>*/}}
|
||||
{{/*<div id="flow" style="width: 600px;height:400px;"></div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*<div class="col-md-6">*/}}
|
||||
{{/*<div class="tile">*/}}
|
||||
{{/*<h3 class="tile-title">代理类型</h3>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
{{/*</div>*/}}
|
||||
|
||||
|
||||
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
{{/*<span class="label label-success pull-right">月</span>*/}}
|
||||
<h5>client connection port</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h1 class="no-margins">{{.p}}</h1>
|
||||
{{/*<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>*/}}
|
||||
{{/*<small>总收入</small>*/}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
{{/*<span class="label label-info pull-right">季</span>*/}}
|
||||
<h5>number of clients</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h1 class="no-margins">{{.data.clientCount}}</h1>
|
||||
{{/*<div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>*/}}
|
||||
{{/*<small>新订单</small>*/}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
{{/*<span class="label label-primary pull-right">今日</span>*/}}
|
||||
<h5>number of online clients</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h1 class="no-margins">{{.data.clientOnlineCount}}</h1>
|
||||
{{/*<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>*/}}
|
||||
{{/*<small>新访客</small>*/}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
{{/*<span class="label label-danger pull-right">低值</span>*/}}
|
||||
<h5>number of tcp connections</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h1 class="no-margins">{{.data.tcpCount}}</h1>
|
||||
{{/*<div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div>*/}}
|
||||
{{/*<small>第一个月</small>*/}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small danger coloured-icon"><i class="icon fa fa-home fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>当前TCP连接总数</h4>
|
||||
<p><b>{{.data.tcpCount}}</b></p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>config information</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content no-padding">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>bridge type</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.bridgeType}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>httpProxyPort</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.httpProxyPort}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>httpsProxyPort</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.httpsProxyPort}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>ipLimit</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.ipLimit}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>flowStoreInterval</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.flowStoreInterval}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>logLevel</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.logLevel}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>p2pPort</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.p2pPort}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>serverIp</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.serverIp}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox-title">
|
||||
<h5>system now</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<span>cpu</span>
|
||||
<small class="pull-right">{{.data.cpu}}%</small>
|
||||
</div>
|
||||
<div class="progress progress-small">
|
||||
<div style="width: {{.data.cpu}}%;" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<span>virtual memory</span>
|
||||
<small class="pull-right">{{.data.virtual_mem}}%</small>
|
||||
</div>
|
||||
<div class="progress progress-small">
|
||||
<div style="width: {{.data.virtual_mem}}%;" class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-content no-padding">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>load</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.load}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>tcp num(establish)</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.tcp}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>udp num(establish)</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong>{{.data.udp}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>out</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong id="send"></strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item ">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<strong>in</strong>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<strong id="recv"></strong>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>总客户端数</h4>
|
||||
<p><b>{{.data.clientCount}}</b></p>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>load</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="load" style="height: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>cpu</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="cpu" style="height: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small info coloured-icon"><i class="icon fa fa-user-secret fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>在线客户端数</h4>
|
||||
<p><b>{{.data.clientOnlineCount}}</b></p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>virtual_mem</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="virtual_mem" style="height: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>connection num</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="conn_num" style="height: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>bandwidth</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="bandwidth" style="height: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>traffic</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="flow" style="height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>types</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="tj" style="height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">流量</h3>
|
||||
<div id="flow" style="width: 600px;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">代理类型</h3>
|
||||
<div id="tj" style="width: 600px;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
option = {
|
||||
title : {
|
||||
x:'center'
|
||||
title: {
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
@@ -60,17 +456,17 @@
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['入口流量', '出口流量']
|
||||
data: ['inlet flow', 'export flow']
|
||||
},
|
||||
series : [
|
||||
series: [
|
||||
{
|
||||
name: '类型 统计',
|
||||
name: 'traffic',
|
||||
type: 'pie',
|
||||
radius : '55%',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data:[
|
||||
{value:{{.data.inletFlowCount}}, name: '入口流量'},
|
||||
{value:{{.data.exportFlowCount}}, name: '出口流量'},
|
||||
data: [
|
||||
{value:{{.data.inletFlowCount}}, name: 'inlet flow'},
|
||||
{value:{{.data.exportFlowCount}}, name: 'export flow'},
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
@@ -83,35 +479,37 @@
|
||||
]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('flow'));
|
||||
myChart.setOption(option);
|
||||
var myChart1 = echarts.init(document.getElementById('flow'));
|
||||
myChart1.setOption(option);
|
||||
|
||||
|
||||
option = {
|
||||
title : {
|
||||
x:'center'
|
||||
title: {
|
||||
x: 'center'
|
||||
},
|
||||
tooltip : {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['tcp隧道数','socks5隧道数','http代理隧道数','udp隧道数','域名解析数']
|
||||
data: ['tcp', 'socks5', 'http', 'udp', 'host', 'secret', 'p2p']
|
||||
},
|
||||
series : [
|
||||
series: [
|
||||
{
|
||||
name: '类型 统计',
|
||||
name: 'types',
|
||||
type: 'pie',
|
||||
radius : '55%',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data:[
|
||||
{value:{{.data.tcpServerCount}}, name:'tcp隧道数'},
|
||||
{value:{{.data.socks5ServerCount}}, name:'socks5隧道数'},
|
||||
{value:{{.data.httpProxyServerCount}}, name:'http隧道数'},
|
||||
{value:{{.data.udpServerCount}}, name:'udp隧道数'},
|
||||
{value:{{.data.hostCount}}, name:'域名解析数'}
|
||||
data: [
|
||||
{value:{{.data.tcpC}}, name: 'tcp'},
|
||||
{value:{{.data.socks5Count}}, name: 'socks5'},
|
||||
{value:{{.data.httpProxyCount}}, name: 'http'},
|
||||
{value:{{.data.udpCount}}, name: 'udp'},
|
||||
{value:{{.data.hostCount}}, name: 'host'},
|
||||
{value:{{.data.secretCount}}, name: 'secret'},
|
||||
{value:{{.data.p2pCount}}, name: 'p2p'},
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
@@ -124,7 +522,294 @@
|
||||
]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('tj'));
|
||||
myChart.setOption(option);
|
||||
var myChart2 = echarts.init(document.getElementById('tj'));
|
||||
myChart2.setOption(option);
|
||||
$(function () {
|
||||
$("#send").html(change({{.data.io_send}}) + "/s")
|
||||
$("#recv").html(change({{.data.io_recv}}) + "/s")
|
||||
})
|
||||
|
||||
|
||||
var dom = document.getElementById("load");
|
||||
var myChart3 = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: 'load'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'load1',
|
||||
type: 'line',
|
||||
stack: 'load1',
|
||||
smooth: true,
|
||||
data: [{{.data.sys1.load1}}, {{.data.sys2.load1}}, {{.data.sys3.load1}}, {{.data.sys4.load1}}, {{.data.sys5.load1}}, {{.data.sys6.load1}}, {{.data.sys7.load1}}, {{.data.sys8.load1}}, {{.data.sys9.load1}}, {{.data.sys10.load1}}],
|
||||
},
|
||||
{
|
||||
name: 'load5',
|
||||
type: 'line',
|
||||
stack: 'load5',
|
||||
smooth: true,
|
||||
data: [{{.data.sys1.load5}}, {{.data.sys2.load5}}, {{.data.sys3.load5}}, {{.data.sys4.load5}}, {{.data.sys5.load5}}, {{.data.sys6.load5}}, {{.data.sys7.load5}}, {{.data.sys8.load5}}, {{.data.sys9.load5}}, {{.data.sys10.load5}}],
|
||||
},
|
||||
{
|
||||
name: 'load15',
|
||||
type: 'line',
|
||||
stack: 'load15',
|
||||
smooth: true,
|
||||
data: [{{.data.sys1.load15}}, {{.data.sys2.load15}}, {{.data.sys3.load15}}, {{.data.sys4.load15}}, {{.data.sys5.load15}}, {{.data.sys6.load15}}, {{.data.sys7.load15}}, {{.data.sys8.load15}}, {{.data.sys9.load15}}, {{.data.sys10.load15}}],
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
myChart3.setOption(option, true);
|
||||
}
|
||||
|
||||
var dom = document.getElementById("cpu");
|
||||
var myChart4 = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: 'cpu'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'cpu',
|
||||
type: 'line',
|
||||
stack: 'cpu',
|
||||
smooth: true,
|
||||
areas: {},
|
||||
data: [{{.data.sys1.cpu}}, {{.data.sys2.cpu}}, {{.data.sys3.cpu}}, {{.data.sys4.cpu}}, {{.data.sys5.cpu}}, {{.data.sys6.cpu}}, {{.data.sys7.cpu}}, {{.data.sys8.cpu}}, {{.data.sys9.cpu}}, {{.data.sys10.cpu}}],
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
myChart4.setOption(option, true);
|
||||
}
|
||||
|
||||
|
||||
var dom = document.getElementById("virtual_mem");
|
||||
var myChart5 = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: 'memory'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'virtual_mem',
|
||||
type: 'line',
|
||||
stack: 'virtual_mem',
|
||||
smooth: true,
|
||||
areas: {},
|
||||
data: [{{.data.sys1.virtual_mem}}, {{.data.sys2.virtual_mem}}, {{.data.sys3.virtual_mem}}, {{.data.sys4.virtual_mem}}, {{.data.sys5.virtual_mem}}, {{.data.sys6.virtual_mem}}, {{.data.sys7.virtual_mem}}, {{.data.sys8.virtual_mem}}, {{.data.sys9.virtual_mem}}, {{.data.sys10.virtual_mem}}],
|
||||
},
|
||||
{
|
||||
name: 'swap_mem',
|
||||
type: 'line',
|
||||
stack: 'swap_mem',
|
||||
smooth: true,
|
||||
areas: {},
|
||||
data: [{{.data.sys1.swap_mem}}, {{.data.sys2.swap_mem}}, {{.data.sys3.swap_mem}}, {{.data.sys4.swap_mem}}, {{.data.sys5.swap_mem}}, {{.data.sys6.swap_mem}}, {{.data.sys7.swap_mem}}, {{.data.sys8.swap_mem}}, {{.data.sys9.swap_mem}}, {{.data.sys10.swap_mem}}],
|
||||
}
|
||||
],
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
myChart5.setOption(option, true);
|
||||
}
|
||||
|
||||
var dom = document.getElementById("conn_num");
|
||||
var myChart6 = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: 'connection num(establish)'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'tcp',
|
||||
type: 'line',
|
||||
stack: 'tcp',
|
||||
smooth: true,
|
||||
areas: {},
|
||||
data: [{{.data.sys1.tcp}}, {{.data.sys2.tcp}}, {{.data.sys3.tcp}}, {{.data.sys4.tcp}}, {{.data.sys5.tcp}}, {{.data.sys6.tcp}}, {{.data.sys7.tcp}}, {{.data.sys8.tcp}}, {{.data.sys9.tcp}}, {{.data.sys10.tcp}}],
|
||||
},
|
||||
{
|
||||
name: 'udp',
|
||||
type: 'line',
|
||||
stack: 'udp',
|
||||
smooth: true,
|
||||
areas: {},
|
||||
data: [{{.data.sys1.udp}}, {{.data.sys2.udp}}, {{.data.sys3.udp}}, {{.data.sys4.udp}}, {{.data.sys5.udp}}, {{.data.sys6.udp}}, {{.data.sys7.udp}}, {{.data.sys8.udp}}, {{.data.sys9.udp}}, {{.data.sys10.udp}}],
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
myChart6.setOption(option, true);
|
||||
}
|
||||
|
||||
var dom = document.getElementById("bandwidth");
|
||||
var myChart7 = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: 'bandwidth'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (a) {
|
||||
return "in:" + change(a[0].data) + "/s<br/>" + "out:" + change(a[1].data) + "/s<br/>" + a[0].axisValue;
|
||||
}
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'in',
|
||||
type: 'line',
|
||||
stack: 'in',
|
||||
smooth: true,
|
||||
areas: {},
|
||||
data: [{{.data.sys1.io_recv}}, {{.data.sys2.io_recv}}, {{.data.sys3.io_recv}}, {{.data.sys4.io_recv}}, {{.data.sys5.io_recv}}, {{.data.sys6.io_recv}}, {{.data.sys7.io_recv}}, {{.data.sys8.io_recv}}, {{.data.sys9.io_recv}}, {{.data.sys10.io_recv}}],
|
||||
},
|
||||
{
|
||||
name: 'out',
|
||||
type: 'line',
|
||||
stack: 'out',
|
||||
smooth: true,
|
||||
areas: {},
|
||||
data: [{{.data.sys1.io_send}}, {{.data.sys2.io_send}}, {{.data.sys3.io_send}}, {{.data.sys4.io_send}}, {{.data.sys5.io_send}}, {{.data.sys6.io_send}}, {{.data.sys7.io_send}}, {{.data.sys8.io_send}}, {{.data.sys9.io_send}}, {{.data.sys10.io_send}}],
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
myChart7.setOption(option, true);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
this.myChart1.resize();
|
||||
this.myChart2.resize();
|
||||
this.myChart3.resize();
|
||||
this.myChart4.resize();
|
||||
this.myChart5.resize();
|
||||
this.myChart6.resize();
|
||||
this.myChart7.resize();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,39 +1,184 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<div class="tile-body">
|
||||
<table class="table table-hover table-bordered" id="sampleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>备注</th>
|
||||
<th>客户端Id</th>
|
||||
<th>监听端口</th>
|
||||
<th>内网目标</th>
|
||||
<th>压缩方式</th>
|
||||
<th>加密传输</th>
|
||||
<th>用户名</th>
|
||||
<th>密码</th>
|
||||
<th>客户端状态</th>
|
||||
<th>设置状态</th>
|
||||
<th>运行状态</th>
|
||||
<th>出口流量</th>
|
||||
<th>入口流量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>{{.name}}</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="table-responsive">
|
||||
<div id="toolbar">
|
||||
<a href="/index/add?type={{.type}}&client_id={{.client_id}}" class="btn btn-primary dim"
|
||||
type="button">new</a>
|
||||
</div>
|
||||
<table id="taskList_table" class="table-striped table-hover"
|
||||
data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<table id="table"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/*bootstrap table*/
|
||||
$('#table').bootstrapTable({
|
||||
toolbar: "#toolbar",
|
||||
method: 'post', // 服务器数据的请求方式 get or post
|
||||
url: "/index/gettunnel", // 服务器数据的加载地址
|
||||
queryParams: function (params) {
|
||||
return {
|
||||
"offset": params.offset,
|
||||
"limit": params.limit,
|
||||
"type":{{.type}},
|
||||
"client_id":{{.client_id}},
|
||||
}
|
||||
},
|
||||
contentType: "application/x-www-form-urlencoded",
|
||||
striped: true, // 设置为true会有隔行变色效果
|
||||
showHeader: true,
|
||||
showColumns: true,
|
||||
showRefresh: true,
|
||||
pagination: true,//分页
|
||||
sidePagination: 'server',//服务器端分页
|
||||
pageNumber: 1,
|
||||
pageList: [5, 10, 20, 50],//分页步进值
|
||||
detailView: true,
|
||||
smartDisplay: true, // 智能显示 pagination 和 cardview 等
|
||||
detailFormatter: function (index, row, element) {
|
||||
return '<b>export flow: </b>' + change(row.Flow.ExportFlow) + `       `
|
||||
+ '<b>inlet flow: </b>' + change(row.Flow.InletFlow) + `       ` + "<br/><br>"
|
||||
+ '<b>crypt: </b>' + row.Client.Cnf.Crypt + `       `
|
||||
+ '<b>compress: </b>' + row.Client.Cnf.Compress + `       `
|
||||
+ '<b>username: </b>' + row.Client.Cnf.U + `       `
|
||||
+ '<b>password: </b>' + row.Client.Cnf.P + `       `
|
||||
},
|
||||
//表格的列
|
||||
columns: [
|
||||
{
|
||||
field: 'Id',//域值
|
||||
title: 'id',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Id',//域值
|
||||
title: 'client id',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
return row.Client.Id
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'Remark',//域值
|
||||
title: 'remark',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Mode',//域值
|
||||
title: 'mode',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Port',//域值
|
||||
title: 'port',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Target',//域值
|
||||
title: 'target',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Password',//域值
|
||||
title: 'secret',//标题
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
},
|
||||
{
|
||||
field: 'Status',//域值
|
||||
title: 'setting',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
if (value) {
|
||||
return '<span class="badge badge-primary">open</span>'
|
||||
} else {
|
||||
return '<span class="badge badge-badge">close</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'RunStatus',//域值
|
||||
title: 'run',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
if (value) {
|
||||
return '<span class="badge badge-primary">open</span>'
|
||||
} else {
|
||||
return '<span class="badge badge-badge">close</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: '',//域值
|
||||
title: 'client',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
if (row.Client.IsConnect) {
|
||||
return '<span class="badge badge-primary">online</span>'
|
||||
} else {
|
||||
return '<span class="badge badge-badge">offline</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'option',//域值
|
||||
title: 'option',//内容
|
||||
visible: true,//false表示不显示
|
||||
sortable: true,//启用排序
|
||||
formatter: function (value, row, index) {
|
||||
btn_group = '<div class="btn-group">'
|
||||
btn = `<button onclick="del(` + row.Id + `)" class="btn-danger"><i class="fa fa-trash"></i></button><button onclick="edit(` + row.Id + `)" class="btn-primary"><i class="fa fa-edit"></i></button></div>`
|
||||
if (row.Status) {
|
||||
return btn_group + `<button onclick="stop(` + row.Id + `)" class="btn-dark"><i class="fa fa-close"></i></button>` + btn
|
||||
} else {
|
||||
return btn_group + `<button onclick="start(` + row.Id + `)" class="btn-outline-primary"><i class="fa fa-check"></i></button>` + btn
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function del(id) {
|
||||
if (confirm("确定要删除数据吗？")) {
|
||||
if (confirm("Are you sure you want to delete it？？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/del",
|
||||
@@ -49,7 +194,7 @@
|
||||
}
|
||||
|
||||
function start(id) {
|
||||
if (confirm("确定要开始任务吗？")) {
|
||||
if (confirm("Are you sure you want to start it？？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/start",
|
||||
@@ -65,7 +210,7 @@
|
||||
}
|
||||
|
||||
function stop(id) {
|
||||
if (confirm("确定要暂停吗？")) {
|
||||
if (confirm("Are you sure you want to stop it？？")) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/index/stop",
|
||||
@@ -84,139 +229,4 @@
|
||||
window.location.href = "/index/edit?id=" + id
|
||||
}
|
||||
|
||||
function add() {
|
||||
window.location.href = "/index/add?type={{.type}}" + "&client_id={{.client_id}}"
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
var table = $('#sampleTable').DataTable({
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate
|
||||
}
|
||||
},
|
||||
dom: 'Bfrtip',
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
autoWidth: false,
|
||||
ordering: false,
|
||||
ajax: {
|
||||
url: '/index/gettunnel?type={{.type}}' + "&client_id=" +{{.client_id}},
|
||||
type: 'POST'
|
||||
},
|
||||
dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
|
||||
columns: [ //这个是显示到界面上的个数据 格式为 {data:'显示的字段名'}
|
||||
{data: 'Id'},
|
||||
{data: 'Remark'},
|
||||
{data: 'ClientId'},
|
||||
{data: 'Port'},
|
||||
{data: 'Target'},
|
||||
{data: 'Compress'},
|
||||
{data: 'Crypt'},
|
||||
{data: 'U'},
|
||||
{data: 'P'},
|
||||
{data: 'ClientStatus'},
|
||||
{data: 'Status'},
|
||||
{data: 'RunStatus'},
|
||||
{data: 'ExportFlow'},
|
||||
{data: 'InletFlow'},
|
||||
{data: "Id"}
|
||||
],
|
||||
bFilter: false,
|
||||
columnDefs: [{
|
||||
targets: -1,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Status == 1) {
|
||||
btn = "<button onclick=\"stop('" + row.Id + "')\" class=\"btn btn-secondary btn-sm\" type=\"button\">关闭</button>"
|
||||
} else {
|
||||
btn = "<button onclick=\"start('" + row.Id + "')\" class=\"btn btn-success btn-sm\" type=\"button\">打开</button>"
|
||||
}
|
||||
btn_edit = '<button onclick="edit(\'' + row.Id + '\')" type="button" class="btn btn-primary btn-sm">查看编辑</button> '
|
||||
return '<div class="btn-group" role="group" aria-label="..."> ' +
|
||||
'<button onclick="del(\'' + row.Id + '\')" type="button" class="btn btn-danger btn-sm">删除</button>' +
|
||||
btn_edit + btn + ' </div>'
|
||||
}
|
||||
}, {
|
||||
targets: 2,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Id
|
||||
}
|
||||
}, {
|
||||
targets: 5,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Cnf.Compress
|
||||
}
|
||||
}, {
|
||||
targets: 7,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Cnf.U
|
||||
}
|
||||
}, {
|
||||
targets: 8,
|
||||
render: function (data, type, row, meta) {
|
||||
return row.Client.Cnf.P
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -4,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == false) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">正常</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -5,
|
||||
render: function (data, type, row, meta) {
|
||||
if (data == false) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">正常</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -9,
|
||||
render: function (data, type, row, meta) {
|
||||
crypt = row.Client.Cnf.Crypt
|
||||
if (crypt == "0") {
|
||||
return "不加密"
|
||||
} else {
|
||||
return "加密"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -6,
|
||||
render: function (data, type, row, meta) {
|
||||
if (row.Client.IsConnect == false) {
|
||||
return "<span class=\"badge badge-pill badge-secondary\">离线</span>"
|
||||
} else {
|
||||
return "<span class=\"badge badge-pill badge-success\">在线</span>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -2,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.InletFlow)
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -3,
|
||||
render: function (data, type, row, meta) {
|
||||
return change(row.Flow.ExportFlow)
|
||||
}
|
||||
}
|
||||
],
|
||||
buttons: []
|
||||
});
|
||||
$("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
|
||||
})
|
||||
;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,41 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="/static/img/favicon.ico">
|
||||
<!-- Main CSS-->
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
|
||||
<!-- Font-icon css-->
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css">
|
||||
<title>nps内网穿透</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="material-half-bg">
|
||||
<div class="cover"></div>
|
||||
</section>
|
||||
<section class="login-content">
|
||||
<div class="logo">
|
||||
<h1></h1>
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<form class="login-form" onsubmit="return false">
|
||||
<h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>内网穿透管理登陆</h3>
|
||||
<div class="form-group">
|
||||
<label class="control-label">密码</label>
|
||||
<input class="form-control" name="psd" type="password" placeholder="" autofocus>
|
||||
</div>
|
||||
<div class="form-group btn-container">
|
||||
<button onclick="login()" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>登陆
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="/static/js/datatables.min.js"></script>
|
||||
<script src="/static/js/main.js"></script>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>nps admin login</title>
|
||||
|
||||
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="/static/css/style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="gray-bg">
|
||||
|
||||
<div class="loginColumns animated fadeInDown">
|
||||
<div class="row">
|
||||
|
||||
|
||||
<div class="col-md-offset-3 col-md-6">
|
||||
<h2 class="font-bold">nps</h2>
|
||||
|
||||
<p>
|
||||
A convenient proxy server
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Using it, it can penetrate the intranet tcp、udp、socks5、http、p2p and so on
|
||||
</p>
|
||||
|
||||
<p>
|
||||
and more?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
goto <a href="//github.com/cnlh/nps">nps</a>
|
||||
</p>
|
||||
<div class="ibox-content">
|
||||
<form class="m-t" onsubmit="return false">
|
||||
<div class="form-group">
|
||||
<input name="username" class="form-control" placeholder="username" required="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input name="password" type="password" class="form-control" placeholder="password" required="">
|
||||
</div>
|
||||
<button onclick="login()" class="btn btn-primary block full-width m-b">login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="/static/js/jquery-2.1.1.js"></script>
|
||||
</html>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Login Page Flipbox control
|
||||
function login() {
|
||||
|
||||
@@ -1,78 +1,117 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="description"
|
||||
content="Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular.">
|
||||
<link rel="shortcut icon" href="/static/img/favicon.ico">
|
||||
<title>nps内网穿透</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Font-icon css-->
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css">
|
||||
<!-- Main CSS-->
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
|
||||
|
||||
<title>nps admin</title>
|
||||
|
||||
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link href="/static/css/style.css" rel="stylesheet">
|
||||
<script src="/static/js/main.js"></script>
|
||||
<!-- Mainly scripts -->
|
||||
<script src="/static/js/jquery-2.1.1.js"></script>
|
||||
<script src="/static/js/bootstrap.min.js"></script>
|
||||
<script src="/static/js/echarts.min.js"></script>
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
|
||||
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script src="/static/js/bootstrap-table.min.js"></script>
|
||||
<!-- Latest compiled and minified Locales -->
|
||||
|
||||
|
||||
</head>
|
||||
<body class="app sidebar-mini rtl">
|
||||
<!-- Navbar-->
|
||||
<header class="app-header">
|
||||
<a class="app-header__logo" href="/"></a>
|
||||
<!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar"
|
||||
aria-label="Hide Sidebar"></a>
|
||||
<ul class="app-nav">
|
||||
<!--Notification Menu-->
|
||||
<!-- User Menu-->
|
||||
<li class="dropdown"><a class="app-nav__item" href="/login/out" data-toggle="dropdown"
|
||||
aria-label="Open Profile Menu"><i class="fa fa-sign-out fa-lg"></i>退出登陆</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<!-- Sidebar menu-->
|
||||
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
|
||||
<aside class="app-sidebar">
|
||||
<div class="app-sidebar__user"><img class="app-sidebar__user-avatar"
|
||||
src="/static/img/48.jpg"
|
||||
alt="User Image">
|
||||
<div>
|
||||
<p class="app-sidebar__user-name">System</p>
|
||||
<p class="app-sidebar__user-designation">欢迎使用</p>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<nav class="navbar-default navbar-static-side" style="position: fixed" role="navigation">
|
||||
<div class="sidebar-collapse">
|
||||
<ul class="nav metismenu" id="side-menu">
|
||||
<li class="nav-header">
|
||||
<div class="dropdown profile-element"> <span>
|
||||
{{/*<img alt="image" class="img-circle" src="/static/img/profile_small.jpg"/>*/}}
|
||||
</span>
|
||||
<a href="#">
|
||||
<span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">admin</strong>
|
||||
</span> <span class="text-muted text-xs block">system </span> </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="logo-element">
|
||||
IN+
|
||||
</div>
|
||||
</li>
|
||||
<li class="{{if eq "index" .menu}}active{{end}}">
|
||||
<a href="/"><i class="fa fa-dashboard"></i> <span class="nav-label">dashboard</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "client" .menu}}active{{end}}">
|
||||
<a href="/client/list"><i class="fa fa-clipboard"></i> <span class="nav-label">client</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "host" .menu}}active{{end}}">
|
||||
<a href="/index/hostlist"><i class="fa fa-paperclip"></i> <span class="nav-label">host</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "tcp" .menu}}active{{end}}">
|
||||
<a href="/index/tcp"><i class="fa fa-line-chart"></i> <span class="nav-label">tcp</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "udp" .menu}}active{{end}}">
|
||||
<a href="/index/udp"><i class="fa fa-server"></i> <span class="nav-label">udp</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "http" .menu}}active{{end}}">
|
||||
<a href="/index/http"><i class="fa fa-html5"></i> <span class="nav-label">http</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "socks5" .menu}}active{{end}}">
|
||||
<a href="/index/socks5"><i class="fa fa-table"></i> <span class="nav-label">socks5</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "secret" .menu}}active{{end}}">
|
||||
<a href="/index/secret"><i class="fa fa-backward"></i> <span class="nav-label">secret</span></a>
|
||||
</li>
|
||||
<li class="{{if eq "p2p" .menu}}active{{end}}">
|
||||
<a href="/index/p2p"><i class="fa fa-dashcube"></i> <span class="nav-label">p2p</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul class="app-menu">
|
||||
<li><a class="app-menu__item {{if eq "index" .menu}}active{{end}}" href="/"><i
|
||||
class="app-menu__icon fa fa-dashboard"></i><span class="app-menu__label">dashboard</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "client" .menu}}active{{end}}" href="/client/list"><i
|
||||
class="app-menu__icon fa fa-dot-circle-o"></i><span class="app-menu__label">客户端管理</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "host" .menu}}active{{end}}" href="/index/hostlist"><i
|
||||
class="app-menu__icon fa fa-lemon-o"></i><span class="app-menu__label">域名代理</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "tcp" .menu}}active{{end}}" href="/index/tcp"><i
|
||||
class="app-menu__icon fa fa-life-buoy"></i><span class="app-menu__label">tcp隧道管理</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "udp" .menu}}active{{end}}" href="/index/udp"><i
|
||||
class="app-menu__icon fa fa-laptop"></i><span class="app-menu__label">udp隧道管理</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "socks5" .menu}}active{{end}}" href="/index/socks5"><i
|
||||
class="app-menu__icon fa fa-lightbulb-o"></i><span class="app-menu__label">socks5代理管理</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "http" .menu}}active{{end}}" href="/index/http"><i
|
||||
class="app-menu__icon fa fa-magic"></i><span class="app-menu__label">http代理管理</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "secret" .menu}}active{{end}}" href="/index/secret"><i
|
||||
class="app-menu__icon fa fa-dashcube"></i><span class="app-menu__label">私密代理管理</span></a></li>
|
||||
<li><a class="app-menu__item {{if eq "help" .menu}}active{{end}}" href="/index/help"><i
|
||||
class="app-menu__icon fa fa-question-circle"></i><span class="app-menu__label">使用说明</span></a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</nav>
|
||||
<div id="page-wrapper" class="gray-bg dashbard-1">
|
||||
<div class="row border-bottom">
|
||||
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav navbar-top-links navbar-right">
|
||||
<li>
|
||||
<span class="m-r-sm text-muted welcome-message">Welcome to use <a href="https://github.com/cnlh/nps">NPS</a></span>
|
||||
</li>
|
||||
|
||||
<script type="text/javascript" src="/static/js/datatables.min.js"></script>
|
||||
<script src="/static/js/main.js"></script>
|
||||
<script src="/static/js/echarts.min.js"></script>
|
||||
<main class="app-content">
|
||||
<div class="app-title">
|
||||
<div>
|
||||
<h1><i class="fa fa-th-list"></i> {{.name}}</h1>
|
||||
<a href="javascript:history.back(-1);"><i class="fa fa-mail-reply"></i>返回</a>
|
||||
<li>
|
||||
<a href="/login/out">
|
||||
<i class="fa fa-sign-out"></i> logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
{{.LayoutContent}}
|
||||
<div class="footer">
|
||||
<div class="pull-right">
|
||||
read more <strong><a href="https://github.com/cnlh/nps">go</a></strong>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Copyright</strong> nps © 2018-2019
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{.LayoutContent}}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user