This commit is contained in:
robin
2026-03-13 14:25:13 +08:00
parent a25a474d6a
commit afbaaa869c
95 changed files with 4591 additions and 2578 deletions

View File

@@ -2272,6 +2272,57 @@ Vue.component("health-check-config-box", {
</div>`
})
Vue.component("httpdns-clusters-selector", {
props: ["vClusters", "vName"],
data: function () {
let inputClusters = this.vClusters
let clusters = []
if (inputClusters != null && inputClusters.length > 0) {
if (inputClusters[0].isChecked !== undefined) {
// 带 isChecked 标志的完整集群列表
clusters = inputClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: c.isChecked}
})
} else {
// 仅包含已选集群,全部标记为选中
clusters = inputClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: true}
})
}
}
// 无 prop 时从根实例读取所有集群(如创建应用页面)
if (clusters.length === 0) {
let rootClusters = this.$root.clusters
if (rootClusters != null && rootClusters.length > 0) {
clusters = rootClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: false}
})
}
}
return {
clusters: clusters,
fieldName: this.vName || "clusterIds"
}
},
methods: {
changeCluster: function (cluster) {
cluster.isChecked = !cluster.isChecked
}
},
template: `<div>
<div v-if="clusters.length > 0">
<checkbox v-for="cluster in clusters" :key="cluster.id" :v-value="cluster.id" :value="cluster.isChecked ? cluster.id : 0" style="margin-right: 1em" @input="changeCluster(cluster)" :name="fieldName">
{{cluster.name}}
</checkbox>
</div>
<span class="grey" v-else>暂无可用集群</span>
</div>`
})
/**
* 菜单项
*/
@@ -11294,10 +11345,18 @@ Vue.component("http-auth-config-box", {
if (authConfig.policyRefs == null) {
authConfig.policyRefs = []
}
return {
return {
authConfig: authConfig
}
},
watch: {
"authConfig.isOn": function () {
this.change()
},
"authConfig.isPrior": function () {
this.change()
}
},
methods: {
isOn: function () {
return (!this.vIsLocation || this.authConfig.isPrior) && this.authConfig.isOn
@@ -11309,18 +11368,17 @@ Vue.component("http-auth-config-box", {
that.authConfig.policyRefs.push(resp.data.policyRef)
that.change()
},
height: "28em"
height: "32em"
})
},
update: function (index, policyId) {
let that = this
teaweb.popup("/servers/server/settings/access/updatePopup?policyId=" + policyId, {
callback: function (resp) {
callback: function () {
teaweb.success("保存成功", function () {
teaweb.reload()
})
},
height: "28em"
height: "32em"
})
},
remove: function (index) {
@@ -11341,14 +11399,15 @@ Vue.component("http-auth-config-box", {
return "URL鉴权C"
case "typeD":
return "URL鉴权D"
case "typeE":
return "URL鉴权E"
}
return ""
},
change: function () {
let that = this
setTimeout(function () {
// 延时通知,是为了让表单有机会变更数据
that.$emit("change", this.authConfig)
that.$emit("change", that.authConfig)
}, 100)
}
},
@@ -11369,7 +11428,6 @@ Vue.component("http-auth-config-box", {
</tbody>
</table>
<div class="margin"></div>
<!-- 鉴权方式 -->
<div v-show="isOn()">
<h4>鉴权方式</h4>
<table class="ui table selectable celled" v-show="authConfig.policyRefs.length > 0">
@@ -11385,9 +11443,7 @@ Vue.component("http-auth-config-box", {
<tbody v-for="(ref, index) in authConfig.policyRefs" :key="ref.authPolicyId">
<tr>
<td>{{ref.authPolicy.name}}</td>
<td>
{{methodName(ref.authPolicy.type)}}
</td>
<td>{{methodName(ref.authPolicy.type)}}</td>
<td>
<span v-if="ref.authPolicy.type == 'basicAuth'">{{ref.authPolicy.params.users.length}}个用户</span>
<span v-if="ref.authPolicy.type == 'subRequest'">
@@ -11398,7 +11454,7 @@ Vue.component("http-auth-config-box", {
<span v-if="ref.authPolicy.type == 'typeB'">有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeC'">有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeD'">{{ref.authPolicy.params.signParamName}}/{{ref.authPolicy.params.timestampParamName}}/有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeE'">路径模式/有效期{{ref.authPolicy.params.life}}秒</span>
<div v-if="(ref.authPolicy.params.exts != null && ref.authPolicy.params.exts.length > 0) || (ref.authPolicy.params.domains != null && ref.authPolicy.params.domains.length > 0)">
<grey-label v-if="ref.authPolicy.params.exts != null" v-for="ext in ref.authPolicy.params.exts">扩展名:{{ext}}</grey-label>
<grey-label v-if="ref.authPolicy.params.domains != null" v-for="domain in ref.authPolicy.params.domains">域名:{{domain}}</grey-label>
@@ -11420,6 +11476,7 @@ Vue.component("http-auth-config-box", {
</div>`
})
Vue.component("http-cache-config-box", {
props: ["v-cache-config", "v-is-location", "v-is-group", "v-cache-policy", "v-web-id"],
data: function () {

View File

@@ -2272,6 +2272,57 @@ Vue.component("health-check-config-box", {
</div>`
})
Vue.component("httpdns-clusters-selector", {
props: ["vClusters", "vName"],
data: function () {
let inputClusters = this.vClusters
let clusters = []
if (inputClusters != null && inputClusters.length > 0) {
if (inputClusters[0].isChecked !== undefined) {
// 带 isChecked 标志的完整集群列表
clusters = inputClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: c.isChecked}
})
} else {
// 仅包含已选集群,全部标记为选中
clusters = inputClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: true}
})
}
}
// 无 prop 时从根实例读取所有集群(如创建应用页面)
if (clusters.length === 0) {
let rootClusters = this.$root.clusters
if (rootClusters != null && rootClusters.length > 0) {
clusters = rootClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: false}
})
}
}
return {
clusters: clusters,
fieldName: this.vName || "clusterIds"
}
},
methods: {
changeCluster: function (cluster) {
cluster.isChecked = !cluster.isChecked
}
},
template: `<div>
<div v-if="clusters.length > 0">
<checkbox v-for="cluster in clusters" :key="cluster.id" :v-value="cluster.id" :value="cluster.isChecked ? cluster.id : 0" style="margin-right: 1em" @input="changeCluster(cluster)" :name="fieldName">
{{cluster.name}}
</checkbox>
</div>
<span class="grey" v-else>暂无可用集群</span>
</div>`
})
/**
* 菜单项
*/
@@ -11294,10 +11345,18 @@ Vue.component("http-auth-config-box", {
if (authConfig.policyRefs == null) {
authConfig.policyRefs = []
}
return {
return {
authConfig: authConfig
}
},
watch: {
"authConfig.isOn": function () {
this.change()
},
"authConfig.isPrior": function () {
this.change()
}
},
methods: {
isOn: function () {
return (!this.vIsLocation || this.authConfig.isPrior) && this.authConfig.isOn
@@ -11309,18 +11368,17 @@ Vue.component("http-auth-config-box", {
that.authConfig.policyRefs.push(resp.data.policyRef)
that.change()
},
height: "28em"
height: "32em"
})
},
update: function (index, policyId) {
let that = this
teaweb.popup("/servers/server/settings/access/updatePopup?policyId=" + policyId, {
callback: function (resp) {
callback: function () {
teaweb.success("保存成功", function () {
teaweb.reload()
})
},
height: "28em"
height: "32em"
})
},
remove: function (index) {
@@ -11341,14 +11399,15 @@ Vue.component("http-auth-config-box", {
return "URL鉴权C"
case "typeD":
return "URL鉴权D"
case "typeE":
return "URL鉴权E"
}
return ""
},
change: function () {
let that = this
setTimeout(function () {
// 延时通知,是为了让表单有机会变更数据
that.$emit("change", this.authConfig)
that.$emit("change", that.authConfig)
}, 100)
}
},
@@ -11369,7 +11428,6 @@ Vue.component("http-auth-config-box", {
</tbody>
</table>
<div class="margin"></div>
<!-- 鉴权方式 -->
<div v-show="isOn()">
<h4>鉴权方式</h4>
<table class="ui table selectable celled" v-show="authConfig.policyRefs.length > 0">
@@ -11385,9 +11443,7 @@ Vue.component("http-auth-config-box", {
<tbody v-for="(ref, index) in authConfig.policyRefs" :key="ref.authPolicyId">
<tr>
<td>{{ref.authPolicy.name}}</td>
<td>
{{methodName(ref.authPolicy.type)}}
</td>
<td>{{methodName(ref.authPolicy.type)}}</td>
<td>
<span v-if="ref.authPolicy.type == 'basicAuth'">{{ref.authPolicy.params.users.length}}个用户</span>
<span v-if="ref.authPolicy.type == 'subRequest'">
@@ -11398,7 +11454,7 @@ Vue.component("http-auth-config-box", {
<span v-if="ref.authPolicy.type == 'typeB'">有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeC'">有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeD'">{{ref.authPolicy.params.signParamName}}/{{ref.authPolicy.params.timestampParamName}}/有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeE'">路径模式/有效期{{ref.authPolicy.params.life}}秒</span>
<div v-if="(ref.authPolicy.params.exts != null && ref.authPolicy.params.exts.length > 0) || (ref.authPolicy.params.domains != null && ref.authPolicy.params.domains.length > 0)">
<grey-label v-if="ref.authPolicy.params.exts != null" v-for="ext in ref.authPolicy.params.exts">扩展名:{{ext}}</grey-label>
<grey-label v-if="ref.authPolicy.params.domains != null" v-for="domain in ref.authPolicy.params.domains">域名:{{domain}}</grey-label>
@@ -11420,6 +11476,7 @@ Vue.component("http-auth-config-box", {
</div>`
})
Vue.component("http-cache-config-box", {
props: ["v-cache-config", "v-is-location", "v-is-group", "v-cache-policy", "v-web-id"],
data: function () {

View File

@@ -0,0 +1,49 @@
Vue.component("httpdns-clusters-selector", {
props: ["vClusters", "vName"],
data: function () {
let inputClusters = this.vClusters
let clusters = []
if (inputClusters != null && inputClusters.length > 0) {
if (inputClusters[0].isChecked !== undefined) {
// 带 isChecked 标志的完整集群列表
clusters = inputClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: c.isChecked}
})
} else {
// 仅包含已选集群,全部标记为选中
clusters = inputClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: true}
})
}
}
// 无 prop 时从根实例读取所有集群(如创建应用页面)
if (clusters.length === 0) {
let rootClusters = this.$root.clusters
if (rootClusters != null && rootClusters.length > 0) {
clusters = rootClusters.map(function (c) {
return {id: c.id, name: c.name, isChecked: false}
})
}
}
return {
clusters: clusters,
fieldName: this.vName || "clusterIds"
}
},
methods: {
changeCluster: function (cluster) {
cluster.isChecked = !cluster.isChecked
}
},
template: `<div>
<div v-if="clusters.length > 0">
<checkbox v-for="cluster in clusters" :key="cluster.id" :v-value="cluster.id" :value="cluster.isChecked ? cluster.id : 0" style="margin-right: 1em" @input="changeCluster(cluster)" :name="fieldName">
{{cluster.name}}
</checkbox>
</div>
<span class="grey" v-else>暂无可用集群</span>
</div>`
})

View File

@@ -12,10 +12,18 @@ Vue.component("http-auth-config-box", {
if (authConfig.policyRefs == null) {
authConfig.policyRefs = []
}
return {
return {
authConfig: authConfig
}
},
watch: {
"authConfig.isOn": function () {
this.change()
},
"authConfig.isPrior": function () {
this.change()
}
},
methods: {
isOn: function () {
return (!this.vIsLocation || this.authConfig.isPrior) && this.authConfig.isOn
@@ -27,18 +35,17 @@ Vue.component("http-auth-config-box", {
that.authConfig.policyRefs.push(resp.data.policyRef)
that.change()
},
height: "28em"
height: "32em"
})
},
update: function (index, policyId) {
let that = this
teaweb.popup("/servers/server/settings/access/updatePopup?policyId=" + policyId, {
callback: function (resp) {
callback: function () {
teaweb.success("保存成功", function () {
teaweb.reload()
})
},
height: "28em"
height: "32em"
})
},
remove: function (index) {
@@ -59,14 +66,15 @@ Vue.component("http-auth-config-box", {
return "URL鉴权C"
case "typeD":
return "URL鉴权D"
case "typeE":
return "URL鉴权E"
}
return ""
},
change: function () {
let that = this
setTimeout(function () {
// 延时通知,是为了让表单有机会变更数据
that.$emit("change", this.authConfig)
that.$emit("change", that.authConfig)
}, 100)
}
},
@@ -87,7 +95,6 @@ Vue.component("http-auth-config-box", {
</tbody>
</table>
<div class="margin"></div>
<!-- 鉴权方式 -->
<div v-show="isOn()">
<h4>鉴权方式</h4>
<table class="ui table selectable celled" v-show="authConfig.policyRefs.length > 0">
@@ -103,9 +110,7 @@ Vue.component("http-auth-config-box", {
<tbody v-for="(ref, index) in authConfig.policyRefs" :key="ref.authPolicyId">
<tr>
<td>{{ref.authPolicy.name}}</td>
<td>
{{methodName(ref.authPolicy.type)}}
</td>
<td>{{methodName(ref.authPolicy.type)}}</td>
<td>
<span v-if="ref.authPolicy.type == 'basicAuth'">{{ref.authPolicy.params.users.length}}个用户</span>
<span v-if="ref.authPolicy.type == 'subRequest'">
@@ -116,7 +121,7 @@ Vue.component("http-auth-config-box", {
<span v-if="ref.authPolicy.type == 'typeB'">有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeC'">有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeD'">{{ref.authPolicy.params.signParamName}}/{{ref.authPolicy.params.timestampParamName}}/有效期{{ref.authPolicy.params.life}}秒</span>
<span v-if="ref.authPolicy.type == 'typeE'">路径模式/有效期{{ref.authPolicy.params.life}}秒</span>
<div v-if="(ref.authPolicy.params.exts != null && ref.authPolicy.params.exts.length > 0) || (ref.authPolicy.params.domains != null && ref.authPolicy.params.domains.length > 0)">
<grey-label v-if="ref.authPolicy.params.exts != null" v-for="ext in ref.authPolicy.params.exts">扩展名:{{ext}}</grey-label>
<grey-label v-if="ref.authPolicy.params.domains != null" v-for="domain in ref.authPolicy.params.domains">域名:{{domain}}</grey-label>
@@ -136,4 +141,4 @@ Vue.component("http-auth-config-box", {
</div>
<div class="margin"></div>
</div>`
})
})

View File

@@ -37,7 +37,7 @@
</script>
<script type="text/javascript" src="/js/config/brand.js"></script>
<script type="text/javascript" src="/_/@default/@layout.js"></script>
<script type="text/javascript" src="/js/components.js"></script>
<script type="text/javascript" src="/js/components.js?v={$ .teaVersion}"></script>
<script type="text/javascript" src="/js/utils.min.js"></script>
<script type="text/javascript" src="/js/sweetalert2/dist/sweetalert2.all.min.js" async></script>
<script type="text/javascript" src="/js/date.tea.js"></script>

View File

@@ -1,32 +0,0 @@
{$layout}
{$template "../menu"}
{$template "/left_menu_with_menu"}
<div class="right-box with-menu">
<div class="margin"></div>
<warning-message>此功能为试验功能,目前只能做一些简单的网络数据包统计。</warning-message>
<form class="ui form" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="clusterId" :value="clusterId"/>
<table class="ui table definition selectable">
<tr>
<td class="title">启用数据包统计</td>
<td>
<select class="ui dropdown auto-width" name="status" v-model="policy.status">
<option value="auto">自动</option>
<option value="on">启用</option>
<option value="off">停用</option>
</select>
<p class="comment" v-if="policy.status == 'auto'">自动根据服务器硬件配置决定是否启用,避免影响性能。</p>
<p class="comment" v-if="policy.status == 'on'">强制启用如果节点服务器配置较低可能会严重影响性能建议仅在8线程以上CPU节点服务器上选择强制启用。</p>
<p class="comment" v-if="policy.status == 'off'">完全关闭此功能。</p>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -1,3 +0,0 @@
Tea.context(function () {
this.success = NotifyReloadSuccess("保存成功")
})

View File

@@ -6,6 +6,7 @@
<span v-if="countTodayAttacks > 0" :class="{red: countTodayAttacks != countTodayAttacksRead}">({{countTodayAttacksFormat}})</span>
</menu-item>
<menu-item href="/dashboard/boards/dns" code="dns">{{LANG('admin_dashboard@ui_dns')}}</menu-item>
<menu-item href="/dashboard/boards/httpdns" code="httpdns">HTTPDNS</menu-item>
<menu-item href="/dashboard/boards/user" code="user">{{LANG('admin_dashboard@ui_user')}}</menu-item>
<menu-item href="/dashboard/boards/events" code="event">{{LANG('admin_dashboard@ui_events')}}<span :class="{red: countEvents > 0}">({{countEvents}})</span></menu-item>
</first-menu>
</first-menu>

View File

@@ -0,0 +1,8 @@
.ui.message .icon {
position: absolute;
right: 1em;
top: 1.8em;
}
.chart-box {
height: 14em;
}

View File

@@ -0,0 +1,67 @@
{$layout}
{$template "menu"}
{$template "/echarts"}
<div style="margin-top: 0.8em" v-if="isLoading">
<div class="ui message loading">
<div class="ui active inline loader small"></div> &nbsp; 数据加载中...
</div>
</div>
<div v-show="!isLoading">
<columns-grid>
<div class="ui column">
<h4>应用<link-icon href="/httpdns/apps"></link-icon></h4>
<div class="value"><span>{{board.countApps}}</span></div>
</div>
<div class="ui column">
<h4>域名<link-icon href="/httpdns/apps"></link-icon></h4>
<div class="value"><span>{{board.countDomains}}</span></div>
</div>
<div class="ui column">
<h4>集群<link-icon href="/httpdns/clusters"></link-icon></h4>
<div class="value"><span>{{board.countClusters}}</span></div>
</div>
<div class="ui column">
<h4>节点<link-icon href="/httpdns/clusters"></link-icon></h4>
<div class="value"><span>{{board.countNodes}}</span>
<span v-if="board.countOfflineNodes > 0" style="font-size: 1em">
/ <a href="/httpdns/clusters"><span class="red" style="font-size: 1em">{{board.countOfflineNodes}}离线</span></a>
</span>
<span v-else style="font-size: 1em"></span>
</div>
</div>
</columns-grid>
<chart-columns-grid>
<div class="ui column">
<div class="ui menu text blue">
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时请求趋势</a>
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天请求趋势</a>
</div>
<div class="ui divider"></div>
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
</div>
<div class="ui column">
<h4>应用请求排行 <span>24小时</span></h4>
<div class="ui divider"></div>
<div class="chart-box" id="top-apps-chart"></div>
</div>
<div class="ui column">
<h4>域名请求排行 <span>24小时</span></h4>
<div class="ui divider"></div>
<div class="chart-box" id="top-domains-chart"></div>
</div>
<div class="ui column">
<h4>节点访问排行 <span>24小时</span></h4>
<div class="ui divider"></div>
<div class="chart-box" id="top-nodes-chart"></div>
</div>
</chart-columns-grid>
</div>

View File

@@ -0,0 +1,192 @@
Tea.context(function () {
this.isLoading = true
this.$delay(function () {
this.$post("$")
.success(function (resp) {
for (let k in resp.data) {
this[k] = resp.data[k]
}
this.$delay(function () {
this.reloadHourlyTrafficChart()
this.reloadTopAppsChart()
this.reloadTopDomainsChart()
this.reloadTopNodesChart()
})
this.isLoading = false
})
})
this.trafficTab = "hourly"
this.selectTrafficTab = function (tab) {
this.trafficTab = tab
if (tab == "hourly") {
this.$delay(function () {
this.reloadHourlyTrafficChart()
})
} else if (tab == "daily") {
this.$delay(function () {
this.reloadDailyTrafficChart()
})
}
}
this.reloadHourlyTrafficChart = function () {
let stats = this.hourlyStats
if (stats == null || stats.length == 0) {
return
}
this.reloadTrafficChart("hourly-traffic-chart", stats, function (args) {
return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
})
}
this.reloadDailyTrafficChart = function () {
let stats = this.dailyStats
if (stats == null || stats.length == 0) {
return
}
this.reloadTrafficChart("daily-traffic-chart", stats, function (args) {
return stats[args.dataIndex].day + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
})
}
this.reloadTrafficChart = function (chartId, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.countAxis(stats, function (v) {
return v.countRequests
})
let chart = teaweb.initChart(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
if (v.hour != null) {
return v.hour
}
return v.day
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 10,
right: 20,
bottom: 20
},
series: [
{
name: "请求数",
type: "line",
data: stats.map(function (v) {
return v.countRequests / axis.divider
}),
itemStyle: {
color: teaweb.DefaultChartColor
},
areaStyle: {
color: teaweb.DefaultChartColor
},
smooth: true
}
],
animation: true
}
chart.setOption(option)
chart.resize()
}
this.reloadTopAppsChart = function () {
if (this.topAppStats == null || this.topAppStats.length == 0) {
return
}
let axis = teaweb.countAxis(this.topAppStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-apps-chart",
name: "应用",
values: this.topAppStats,
x: function (v) {
return v.appName
},
tooltip: function (args, stats) {
return stats[args.dataIndex].appName + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
},
value: function (v) {
return v.countRequests / axis.divider
},
axis: axis
})
}
this.reloadTopDomainsChart = function () {
if (this.topDomainStats == null || this.topDomainStats.length == 0) {
return
}
let axis = teaweb.countAxis(this.topDomainStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-domains-chart",
name: "域名",
values: this.topDomainStats,
x: function (v) {
return v.domainName
},
tooltip: function (args, stats) {
return stats[args.dataIndex].domainName + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
},
value: function (v) {
return v.countRequests / axis.divider
},
axis: axis
})
}
this.reloadTopNodesChart = function () {
if (this.topNodeStats == null || this.topNodeStats.length == 0) {
return
}
let axis = teaweb.countAxis(this.topNodeStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-nodes-chart",
name: "节点",
values: this.topNodeStats,
x: function (v) {
return v.nodeName
},
tooltip: function (args, stats) {
return stats[args.dataIndex].nodeName + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
},
value: function (v) {
return v.countRequests / axis.divider
},
axis: axis,
click: function (args, stats) {
window.location = "/httpdns/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + stats[args.dataIndex].clusterId
}
})
}
})

View File

@@ -53,8 +53,9 @@
<!-- 升级提醒 -->
<div class="ui icon message error" v-if="!isLoading && nodeUpgradeInfo.count > 0">
<i class="icon warning circle"></i>
<a href="/clusters">
升级提醒:有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本,系统正在尝试自动升级,请耐心等待...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
<a href="/clusters" v-if="autoUpgrade">升级提醒:有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本,系统正在尝试自动升级,请耐心等待...</a>
<a href="/settings/upgrade" v-else>升级提醒:有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本,请到系统设置-升级设置页面自行升级...</a>
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && userNodeUpgradeInfo.count > 0 && teaIsPlus">
<i class="icon warning circle"></i>
@@ -73,7 +74,15 @@
<div class="ui icon message error" v-if="!isLoading && nsNodeUpgradeInfo.count > 0 && teaIsPlus">
<i class="icon warning circle"></i>
<a href="/ns/clusters">升级提醒:有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本,系统正在尝试自动升级,请耐心等待...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
<a href="/ns/clusters" v-if="autoUpgrade">升级提醒:有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本,系统正在尝试自动升级,请耐心等待...</a>
<a href="/settings/upgrade" v-else>升级提醒:有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本,请到系统设置-升级设置页面自行升级...</a>
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && httpdnsNodeUpgradeInfo.count > 0 && teaIsPlus">
<i class="icon warning circle"></i>
<a href="/httpdns/clusters" v-if="autoUpgrade">升级提醒:有 {{httpdnsNodeUpgradeInfo.count}} 个HTTPDNS节点需要升级到 v{{httpdnsNodeUpgradeInfo.version}} 版本,系统正在尝试自动升级,请耐心等待...</a>
<a href="/settings/upgrade" v-else>升级提醒:有 {{httpdnsNodeUpgradeInfo.count}} 个HTTPDNS节点需要升级到 v{{httpdnsNodeUpgradeInfo.version}} 版本,请到系统设置-升级设置页面自行升级...</a>
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && reportNodeUpgradeInfo.count > 0 && teaIsPlus">
<i class="icon warning circle"></i>

View File

@@ -33,7 +33,9 @@
<!-- 边缘节点升级提醒 -->
<div class="ui icon message error" v-if="!isLoading && nodeUpgradeInfo.count > 0">
<i class="icon warning circle"></i>
<a href="/clusters">升级提醒:有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本,系统正在尝试自动升级,请耐心等待...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
<a href="/clusters" v-if="autoUpgrade">升级提醒:有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本,系统正在尝试自动升级,请耐心等待...</a>
<a href="/settings/upgrade" v-else>升级提醒:有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本,请到系统设置-升级设置页面自行升级...</a>
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<!-- API节点升级提醒 -->

View File

@@ -1,6 +1,9 @@
Tea.context(function () {
this.isOn = true
this.syncDefaultClusterEnabled = function () {
}
this.success = function (resp) {
let clusterId = 0
if (resp != null && resp.data != null && typeof resp.data.clusterId != "undefined") {

View File

@@ -0,0 +1,8 @@
.ui.message .icon {
position: absolute;
right: 1em;
top: 1.8em;
}
.chart-box {
height: 14em;
}

View File

@@ -0,0 +1,62 @@
{$layout}
{$template "/echarts"}
<div style="margin-top: 0.8em" v-if="isLoading">
<div class="ui message loading">
<div class="ui active inline loader small"></div> &nbsp; 数据加载中...
</div>
</div>
<div v-show="!isLoading">
<div class="ui four columns grid counter-chart">
<div class="ui column">
<h4>应用<link-icon href="/httpdns/apps"></link-icon></h4>
<div class="value"><span>{{board.countApps}}</span></div>
</div>
<div class="ui column">
<h4>域名<link-icon href="/httpdns/apps"></link-icon></h4>
<div class="value"><span>{{board.countDomains}}</span></div>
</div>
<div class="ui column">
<h4>集群<link-icon href="/httpdns/clusters"></link-icon></h4>
<div class="value"><span>{{board.countClusters}}</span></div>
</div>
<div class="ui column with-border">
<h4>节点<link-icon href="/httpdns/clusters"></link-icon></h4>
<div class="value"><span>{{board.countNodes}}</span>
<span v-if="board.countOfflineNodes > 0" class="red" style="font-size: 1em">{{board.countOfflineNodes}}离线</span>
<span v-else style="font-size: 1em"></span>
</div>
</div>
</div>
<div class="ui four columns grid chart-grid" style="margin-top: 1em">
<div class="ui column">
<div class="ui menu text blue small">
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时请求趋势</a>
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天请求趋势</a>
</div>
<div class="ui divider"></div>
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
</div>
<div class="ui column">
<h4>应用请求排行 <span>24小时</span></h4>
<div class="ui divider"></div>
<div class="chart-box" id="top-apps-chart"></div>
</div>
<div class="ui column">
<h4>域名请求排行 <span>24小时</span></h4>
<div class="ui divider"></div>
<div class="chart-box" id="top-domains-chart"></div>
</div>
<div class="ui column">
<h4>节点访问排行 <span>24小时</span></h4>
<div class="ui divider"></div>
<div class="chart-box" id="top-nodes-chart"></div>
</div>
</div>
</div>

View File

@@ -0,0 +1,191 @@
Tea.context(function () {
this.isLoading = true
this.$delay(function () {
this.$post("$")
.success(function (resp) {
for (let k in resp.data) {
this[k] = resp.data[k]
}
this.$delay(function () {
this.reloadHourlyTrafficChart()
this.reloadTopAppsChart()
this.reloadTopDomainsChart()
this.reloadTopNodesChart()
})
this.isLoading = false
})
})
this.trafficTab = "hourly"
this.selectTrafficTab = function (tab) {
this.trafficTab = tab
if (tab == "hourly") {
this.$delay(function () {
this.reloadHourlyTrafficChart()
})
} else if (tab == "daily") {
this.$delay(function () {
this.reloadDailyTrafficChart()
})
}
}
this.reloadHourlyTrafficChart = function () {
let stats = this.hourlyStats
if (stats == null || stats.length == 0) {
return
}
this.reloadTrafficChart("hourly-traffic-chart", stats, function (args) {
return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
})
}
this.reloadDailyTrafficChart = function () {
let stats = this.dailyStats
if (stats == null || stats.length == 0) {
return
}
this.reloadTrafficChart("daily-traffic-chart", stats, function (args) {
return stats[args.dataIndex].day + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
})
}
this.reloadTrafficChart = function (chartId, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.countAxis(stats, function (v) {
return v.countRequests
})
let chart = teaweb.initChart(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
if (v.hour != null) {
return v.hour
}
return v.day
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 10,
right: 20,
bottom: 20
},
series: [
{
name: "请求数",
type: "line",
data: stats.map(function (v) {
return v.countRequests / axis.divider
}),
itemStyle: {
color: teaweb.DefaultChartColor
},
areaStyle: {
color: teaweb.DefaultChartColor
},
smooth: true
}
],
animation: true
}
chart.setOption(option)
chart.resize()
}
this.reloadTopAppsChart = function () {
if (this.topAppStats == null || this.topAppStats.length == 0) {
return
}
let axis = teaweb.countAxis(this.topAppStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-apps-chart",
name: "应用",
values: this.topAppStats,
x: function (v) {
return v.appName
},
tooltip: function (args, stats) {
return stats[args.dataIndex].appName + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
},
value: function (v) {
return v.countRequests / axis.divider
},
axis: axis
})
}
this.reloadTopDomainsChart = function () {
if (this.topDomainStats == null || this.topDomainStats.length == 0) {
return
}
let axis = teaweb.countAxis(this.topDomainStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-domains-chart",
name: "域名",
values: this.topDomainStats,
x: function (v) {
return v.domainName
},
tooltip: function (args, stats) {
return stats[args.dataIndex].domainName + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
},
value: function (v) {
return v.countRequests / axis.divider
},
axis: axis
})
}
this.reloadTopNodesChart = function () {
if (this.topNodeStats == null || this.topNodeStats.length == 0) {
return
}
let axis = teaweb.countAxis(this.topNodeStats, function (v) {
return v.countRequests
})
teaweb.renderBarChart({
id: "top-nodes-chart",
name: "节点",
values: this.topNodeStats,
x: function (v) {
return v.nodeName
},
tooltip: function (args, stats) {
return stats[args.dataIndex].nodeName + "<br/>请求数:" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
},
value: function (v) {
return v.countRequests / axis.divider
},
axis: axis,
click: function (args, stats) {
window.location = "/httpdns/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + stats[args.dataIndex].clusterId
}
})
}
})

View File

@@ -124,6 +124,27 @@
</tr>
</tbody>
<!-- TypeE -->
<tbody v-show="type == 'typeE'">
<tr>
<td>鉴权密钥 *</td>
<td>
<input type="text" maxlength="40" name="typeESecret" v-model="typeESecret" autocomplete="off"/>
<p class="comment">只能包含字母、数字长度不超过40。<a href="" @click.prevent="generateTypeESecret()">[随机生成]</a></p>
</td>
</tr>
<tr>
<td>有效时间</td>
<td>
<div class="ui input right labeled">
<input type="text" maxlength="8" name="typeELife" value="30" style="width: 7em"/>
<span class="ui label"></span>
</div>
<p class="comment">URL 格式:<code-label>/hash/timestamp/path</code-label>;签名算法:<code-label>md5(secret + uri + timestamp)</code-label>timestamp 为十六进制 Unix 秒数。</p>
</td>
</tr>
</tbody>
<!-- BasicAuth -->
<tbody v-show="type == 'basicAuth'">
<tr>
@@ -138,7 +159,7 @@
</td>
</tr>
<tr v-show="moreBasicAuthOptionsVisible">
<td>认证领域名<em>Realm</em></td>
<td>认证领域名 <em>(Realm)</em></td>
<td>
<input type="text" name="basicAuthRealm" value="" maxlength="100"/>
</td>
@@ -147,7 +168,7 @@
<td>字符集</td>
<td>
<input type="text" name="basicAuthCharset" style="width: 6em" maxlength="50"/>
<p class="comment">类似于<code-label>UTF-8</code-label></p>
<p class="comment">类似于 <code-label>UTF-8</code-label></p>
</td>
</tr>
</tbody>
@@ -186,7 +207,7 @@
<td>限定文件扩展名</td>
<td>
<values-box name="exts"></values-box>
<p class="comment">如果不为空,则表示只有这些扩展名的文件才需要鉴权;扩展名需要包含点符号.,比如<code-label>.png</code-label></p>
<p class="comment">如果不为空,则表示只有这些扩展名的文件才需要鉴权;扩展名需要包含点符号,比如 <code-label>.png</code-label></p>
</td>
</tr>
<tr>
@@ -200,4 +221,4 @@
</table>
<submit-btn></submit-btn>
</form>
</form>

View File

@@ -84,6 +84,18 @@ Tea.context(function () {
this.authDescription = this.authDescription.replace("t=", this.typeDTimestampParamName + "=")
}
/**
* TypeE
*/
this.typeESecret = ""
this.generateTypeESecret = function () {
this.$post(".random")
.success(function (resp) {
this.typeESecret = resp.data.random
})
}
/**
* 基本认证
*/
@@ -97,4 +109,4 @@ Tea.context(function () {
* 子请求
*/
this.subRequestFollowRequest = 1
})
})

View File

@@ -122,6 +122,27 @@
</tr>
</tbody>
<!-- TypeE -->
<tbody v-show="type == 'typeE'">
<tr>
<td>鉴权密钥 *</td>
<td>
<input type="text" maxlength="40" name="typeESecret" v-model="typeESecret" autocomplete="off"/>
<p class="comment">只能包含字母、数字长度不超过40。<a href="" @click.prevent="generateTypeESecret()">[随机生成]</a></p>
</td>
</tr>
<tr>
<td>有效时间</td>
<td>
<div class="ui input right labeled">
<input type="text" maxlength="8" name="typeELife" value="30" style="width: 7em" v-model="policy.params.life"/>
<span class="ui label"></span>
</div>
<p class="comment">URL 格式:<code-label>/hash/timestamp/path</code-label>;签名算法:<code-label>md5(secret + uri + timestamp)</code-label>timestamp 为十六进制 Unix 秒数。</p>
</td>
</tr>
</tbody>
<!-- BasicAuth -->
<tbody v-show="type == 'basicAuth'">
<tr>
@@ -136,7 +157,7 @@
</td>
</tr>
<tr v-show="moreBasicAuthOptionsVisible">
<td>认证领域名<em>Realm</em></td>
<td>认证领域名 <em>(Realm)</em></td>
<td>
<input type="text" name="basicAuthRealm" value="" maxlength="100" v-model="policy.params.realm"/>
</td>
@@ -145,7 +166,7 @@
<td>字符集</td>
<td>
<input type="text" name="basicAuthCharset" style="width: 6em" v-model="policy.params.charset" maxlength="50"/>
<p class="comment">类似于<code-label>utf-8</code-label></p>
<p class="comment">类似于 <code-label>utf-8</code-label></p>
</td>
</tr>
</tbody>
@@ -185,7 +206,7 @@
<td>限定文件扩展名</td>
<td>
<values-box name="exts" :v-values="policy.params.exts"></values-box>
<p class="comment">如果不为空,则表示只有这些扩展名的文件才需要鉴权;扩展名需要包含点符号.,比如<code-label>.png</code-label></p>
<p class="comment">如果不为空,则表示只有这些扩展名的文件才需要鉴权;扩展名需要包含点符号,比如 <code-label>.png</code-label></p>
</td>
</tr>
<tr>
@@ -203,4 +224,4 @@
</table>
<submit-btn></submit-btn>
</form>
</form>

View File

@@ -115,6 +115,22 @@ Tea.context(function () {
this.authDescription = this.authDescription.replace("t=", this.typeDTimestampParamName + "=")
}
/**
* TypeE
*/
this.typeESecret = ""
if (this.policy.type == "typeE") {
this.typeESecret = this.policy.params.secret
}
this.generateTypeESecret = function () {
this.$post(".random")
.success(function (resp) {
this.typeESecret = resp.data.random
})
}
/**
* 基本鉴权
*/
@@ -128,4 +144,4 @@ Tea.context(function () {
* 子请求
*/
this.subRequestFollowRequest = (this.policy.params.method != null && this.policy.params.method.length > 0) ? 0 : 1
})
})