Skip to content

Commit de7c99f

Browse files
tianxiu2b2ttianxiu2b2t
committed
chore: 更新面板
1 parent 4aaab0d commit de7c99f

File tree

6 files changed

+323
-176
lines changed

6 files changed

+323
-176
lines changed

‎assets/js/common.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -847,12 +847,14 @@ function parseJWT(token) {
847847
return null
848848
}
849849
}
850-
function ref(object, params) {
850+
function ref(object, params = {}) {
851851
var handler = params.handler || function () { };
852852
var timeout = params.timeout || 0
853853
var task = null;
854+
var old_object;
854855
return new Proxy(object, {
855856
set(target, key, value) {
857+
if (old_object == null) old_object = Object.assign({}, object)
856858
target[key] = value
857859
if (timeout > 0) {
858860
if (task) {
@@ -862,15 +864,18 @@ function ref(object, params) {
862864
handler({
863865
key,
864866
value,
865-
object
867+
object,
868+
before: old_object
866869
})
867870
task = null
871+
old_object = null;
868872
}, timeout)
869873
} else {
870874
handler({
871875
key,
872876
value,
873-
object
877+
object,
878+
before: old_object
874879
})
875880
}
876881
return true

‎assets/js/index.js‎

Lines changed: 155 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -450,13 +450,18 @@ class SwitchElement extends Element {
450450
this.$bar.style("left", `${left}px`).style("width", `${width}px`);
451451
if (oldindex == this.index) return this;
452452
this.origin.dispatchEvent(new CustomEvent("change", {
453-
detail: {
454-
index: index,
455-
button: this.$buttons[index]
456-
}
453+
detail: this.current
457454
}))
458455
return this;
459456
}
457+
458+
get current() {
459+
return {
460+
index: this.index,
461+
instanceButton: this.$buttons[this.index],
462+
button: this._buttons[this.index]
463+
}
464+
}
460465
}
461466

462467
class FlexElement extends Element {
@@ -551,7 +556,9 @@ class TemplateEchartElement extends Element {
551556
constructor() {
552557
super("div")
553558
this.instance = echarts.init(this.origin)
554-
this.formatter = this._format_number_unit
559+
this.formatters = [
560+
this._format_number_unit,
561+
]
555562
this.type = EchartType.DATA
556563
this.setOption({
557564
stateAnimation: {
@@ -564,8 +571,11 @@ class TemplateEchartElement extends Element {
564571
}
565572
})
566573
}
567-
setFormatter(formatter) {
568-
this.formatter = formatter || this._format_number_unit
574+
setFormatter(formatter, index = 0) {
575+
if (index >= this.formatters.length) {
576+
this.formatters.push(formatter)
577+
}
578+
this.formatters[index] = formatter
569579
return this
570580
}
571581
setOption(option) {
@@ -605,11 +615,11 @@ class TemplateEchartElement extends Element {
605615
return this
606616
}
607617
_e_templates(params) {
608-
const value_formatter = this.formatter
609618
const data_label = this.type == EchartType.LABEL
610619
const templates = `<div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;">` + (data_label ? '' : `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:{color};"></span>`) + `<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">{name}</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">{value}</span><div style="clear:both"></div></div><div style="clear:both"></div></div>`
611620
var template = ''
612621
for (const data of (Array.isArray(params) ? params : [params])) {
622+
let value_formatter = this.formatters[data.seriesIndex] || this.formatters[0]
613623
let value = isNaN(data.value) ? 0 : data.value
614624
template += templates.replace("{color}", data.color).replace("{name}", `${data.seriesName}${data_label ? `(${data.data.label})` : ""}`).replace("{value}", value_formatter ? value_formatter(value) : value)
615625
}
@@ -640,7 +650,13 @@ $i18n.addLanguageTable("zh_CN", {
640650
"unit.hour": "%value% 时",
641651
"unit.day": "%value% 天",
642652
"dashboard.title.qps": "5 分钟请求数",
643-
"switch.dashboard.cluster.:all:": "所有节点"
653+
"switch.dashboard.cluster.:all:": "所有节点",
654+
"dashboard.title.storage.today": "今日请求存储",
655+
"dashboard.title.storage.30days": "30 天请求存储",
656+
"dashboard.title.cluster.today": "今日请求节点",
657+
"dashboard.title.cluster.30days": "30 天请求节点",
658+
"dashboard.value.unit.bytes": "请求量",
659+
"dashboard.value.unit.hits": "请求数"
644660

645661
})
646662
$style.setTheme("light", {
@@ -1200,10 +1216,112 @@ async function load() {
12001216
$dashboard_locals.cluster_switch = new SwitchElement().addButtons("switch.dashboard.cluster.:all:").addEventListener("change", (event) => {
12011217
})
12021218
$dashboard_locals.storage_echarts = {}
1219+
$dashboard_locals.statistics_keys = ref({
1220+
clusters: [],
1221+
storages: []
1222+
}, {
1223+
timeout: 50,
1224+
async handler(obj) {
1225+
console.log(obj)
1226+
}
1227+
})
1228+
const get_keys = (data) => {
1229+
var res = [];
1230+
for (var key of Object.keys(data)) {
1231+
if (key == ":all:") continue
1232+
res.push(key)
1233+
}
1234+
return res
1235+
}
12031236
$dashboard_locals.storage_data = ref({}, {
12041237
timeout: 50,
12051238
handler(obj) {
1206-
console.log(obj)
1239+
$dashboard_locals.statistics_keys.clusters = get_keys(obj.object.cluster)
1240+
$dashboard_locals.statistics_keys.storages = get_keys(obj.object.storage)
1241+
1242+
const storage_key = $dashboard_locals.storage_switch.current.button.split(".").reverse()[0]
1243+
const cluster_key = $dashboard_locals.cluster_switch.current.button.split(".").reverse()[0]
1244+
1245+
const data = {
1246+
cluster: obj.object.cluster[cluster_key],
1247+
storage: obj.object.storage[storage_key]
1248+
}
1249+
const mappings = {
1250+
"hourly": "today",
1251+
"daily": "30days"
1252+
}
1253+
const mappings_unit = {
1254+
"hourly": (n) => $i18n.t("unit.hour", { value: n }),
1255+
"daily": (n) => $i18n.t("unit.day", { value: n })
1256+
}
1257+
const mappings_formatter = {
1258+
"hits": Tools.formatSimpleNumber,
1259+
"bytes": Tools.formatBytes
1260+
}
1261+
for (const [key, value] of Object.entries(data)) {
1262+
for (const [time, response] of Object.entries(value)) {
1263+
const instance = $dashboard_locals.storage_echarts[`${key}_${mappings[time]}`]
1264+
var resp = response
1265+
if (time == "hourly") {
1266+
for (let i = 0; i < 24; i++) {
1267+
if (resp[i]) continue
1268+
resp[i] = null
1269+
}
1270+
resp = Object.fromEntries(
1271+
Object.keys(resp).sort((a, b) => parseInt(a) - parseInt(b)).map(v => [v, resp[v]])
1272+
)
1273+
} else {
1274+
var server_time = $dashboard_locals.info_runtime
1275+
var datetime = server_time.current_time - server_time.diff / 1000.0 + (+new Date() - server_time.resp_timestamp) / 1000.0;
1276+
const previous = (datetime + (datetime % (24 * 3600)) - 86400 * 30);
1277+
const res = {}
1278+
for (let i = 0; i < 30; i++) {
1279+
var d = Tools.formatDate(new Date((previous + i * 86400) * 1000.0))
1280+
if (resp[d]) res[d] = resp[d]
1281+
else res[d] = null
1282+
}
1283+
resp = res
1284+
}
1285+
console.log(resp)
1286+
var option = {
1287+
color: [
1288+
$style.getThemeValue("echarts-color-0"),
1289+
$style.getThemeValue("echarts-color-1"),
1290+
],
1291+
xAxis: {
1292+
data: Object.keys(resp).map(
1293+
mappings_unit[time]
1294+
)
1295+
},
1296+
yAxis: [
1297+
{
1298+
name: $i18n.t("dashboard.value.unit.bytes"),
1299+
type: 'value',
1300+
max: Math.max(10, ...Object.values(resp).map(v => v?.bytes)),
1301+
},
1302+
{
1303+
name: $i18n.t("dashboard.value.unit.hits"),
1304+
type: 'value',
1305+
max: Math.max(10, ...Object.values(resp).map(v => v?.hits)),
1306+
},
1307+
],
1308+
series: [{
1309+
name: $i18n.t("dashboard.value.unit.bytes"),
1310+
data: Object.values(resp).map(v => v?.bytes),
1311+
type: 'line',
1312+
smooth: true,
1313+
}, {
1314+
name: $i18n.t("dashboard.value.unit.hits"),
1315+
data: Object.values(resp).map(v => v?.hits),
1316+
type: 'line',
1317+
smooth: true,
1318+
}]
1319+
}
1320+
instance.base.setFormatter(mappings_formatter.bytes, 0)
1321+
instance.base.setFormatter(mappings_formatter.hits, 1)
1322+
instance.base.setOption(option)
1323+
}
1324+
}
12071325
}
12081326
})
12091327
$dashboard_locals.storages_info = Tools.createFlexElement().append(
@@ -1372,38 +1490,33 @@ async function load() {
13721490
qps.echart.setOption(option)
13731491
}
13741492

1375-
// for (const instance of [
1376-
// "days_hits",
1377-
// "days_bytes",
1378-
// "today_hits",
1379-
// "today_bytes"
1380-
// ]) {
1381-
// var option = {
1382-
// /*color: [
1383-
// $style.getThemeValue("echarts-color-0"),
1384-
// ],*/
1385-
// tooltip: {
1386-
// trigger: 'axis'
1387-
// },
1388-
// grid: {
1389-
// left: '3%',
1390-
// right: '4%',
1391-
// bottom: '3%',
1392-
// top: '20%',
1393-
// containLabel: true
1394-
// },
1395-
// xAxis: {
1396-
// type: 'category',
1397-
// },
1398-
// yAxis: {
1399-
// type: 'value',
1400-
// min: 1,
1401-
// max: 10
1402-
// },
1403-
// series: []
1404-
// };
1405-
// $dashboard_locals.storage_echarts[instance].echart.setOption(option)
1406-
// }
1493+
for (const instance of Object.values($dashboard_locals.storage_echarts)) {
1494+
var option = {
1495+
color: [
1496+
$style.getThemeValue("echarts-color-0"),
1497+
],
1498+
tooltip: {
1499+
trigger: 'axis'
1500+
},
1501+
grid: {
1502+
left: '5%',
1503+
right: '4%',
1504+
bottom: '3%',
1505+
top: '20%',
1506+
containLabel: true
1507+
},
1508+
xAxis: {
1509+
type: 'category',
1510+
},
1511+
yAxis: {
1512+
type: 'value',
1513+
min: 1,
1514+
max: 10
1515+
},
1516+
series: []
1517+
};
1518+
instance.echart.setOption(option)
1519+
}
14071520
}
14081521
// share
14091522
(() => {
@@ -1556,11 +1669,6 @@ async function load() {
15561669
$dashboard_locals.system_info_cpu.value = resp.cpu.toFixed(1) + "%"
15571670
$dashboard_locals.system_info_cpu_load.value = resp.loads.toFixed(1) + "%"
15581671
}, 1000)
1559-
$channel.send("storage_keys").then((resp) => {
1560-
$dashboard_locals.storage_switch.addButtons(
1561-
...resp.map((val) => "switch.dashboard.storage." + val.data.type)
1562-
)
1563-
})
15641672

15651673
} else {
15661674
$dashboard_locals.container.append(

‎core/config.py‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,28 @@
55
import os
66

77
defaults = {
8-
"advanced.lang": "zh_cn",
9-
"advanced.debug": False,
10-
"advanced.sync_interval": 600,
11-
"advanced.base_url": "https://openbmclapi.bangbang93.com",
12-
"advanced.dashboard_rank_clusters_url": "https://bd.bangbang93.com/openbmclapi/metric/rank",
13-
"advanced.threads": 128,
14-
"advanced.ssl_dir": ".ssl",
15-
"advanced.host": "",
16-
"advanced.ssl_cert": "",
17-
"advanced.ssl_key": "",
18-
"advanced.check_sign": True,
19-
"advanced.check_type": "size",
20-
"advanced.auto_sync_assets": True,
21-
"advanced.github_token": "",
22-
"advanced.measure_storage": False,
8+
"advanced": {
9+
"lang": "zh_cn",
10+
"debug": False,
11+
"sync_interval": 600,
12+
"base_url": "https://openbmclapi.bangbang93.com",
13+
"dashboard_rank_clusters_url": "https://bd.bangbang93.com/openbmclapi/metric/rank",
14+
"threads": 128,
15+
"ssl_dir": ".ssl",
16+
"host": "",
17+
"ssl_cert": "",
18+
"ssl_key": "",
19+
"check_sign": True,
20+
"check_type": "size",
21+
"auto_sync_assets": True,
22+
"github_token": "",
23+
"measure_storage": False,
24+
},
2325
"web": {
2426
"port": -1,
2527
"public_port": 6543,
26-
"x_forwarded_for": 0
28+
"x_forwarded_for": 0,
29+
"backlog": 1024
2730
},
2831
"clusters": [
2932
{
@@ -42,9 +45,6 @@
4245
"type": "sqlite",
4346
"url": "./database.db"
4447
},
45-
"tunnel": {
46-
"type": "none",
47-
}
4848
}
4949

5050

@@ -167,6 +167,13 @@ def measure_storage(self) -> bool:
167167
@property
168168
def rank_clusters_url(self):
169169
return Config.get("advanced.dashboard_rank_clusters_url") or "https://bd.bangbang93.com/openbmclapi/metric/rank"
170+
171+
@property
172+
def backlog(self):
173+
backlog = Config.get("web.backlog", 0)
174+
if not isinstance(backlog, int):
175+
backlog = 100
176+
return min(backlog, 100)
170177

171178
const = Const()
172179

0 commit comments

Comments
 (0)