Skip to content

Commit 6c549a6

Browse files
tianxiu2b2ttianxiu2b2t
committed
fix: 修了点面板
1 parent efd7c49 commit 6c549a6

File tree

2 files changed

+142
-75
lines changed

2 files changed

+142
-75
lines changed

‎assets/js/common.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,9 +350,10 @@ class Style {
350350
this._sheet_render()
351351
}
352352
applyTheme(name) {
353+
var before = this._current_theme;
353354
this._current_theme = name || Object.keys(this._themes)[0];
354355
this.render();
355-
window.dispatchEvent(new CustomEvent("theme-changed", {detail: this._current_theme}));
356+
if (before == null || before != this._current_theme) window.dispatchEvent(new CustomEvent("theme-changed", {detail: this._current_theme}));
356357
}
357358
getThemeValue(key) {
358359
return (this._themes[this._current_theme] || {})[key];

‎assets/js/index.js‎

Lines changed: 140 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,13 @@ class SwitchElement extends Element {
351351
})
352352
this.index = null;
353353
this._render_next_index = null;
354+
this.observer = new ResizeObserver(() => {
355+
this.select(this.index)
356+
})
357+
this.observer.observe(this.origin)
358+
window.addEventListener("langChange", () => {
359+
this.select(this.index);
360+
})
354361
}
355362
addButtons(...button) {
356363
this._buttons.push(...button);
@@ -522,13 +529,22 @@ class TemplateEchartElement extends Element {
522529
}
523530
setOption(option) {
524531
this.instance.setOption(option)
525-
if ('tooltip' in option && 'formatter' in option['tooltip']) return this
526-
this.setOption({
527-
tooltip: {
532+
var options = {}
533+
if (!('tooltip' in option && 'formatter' in option['tooltip'])) {
534+
options.tooltip = {
528535
...option['tooltip'],
529536
formatter: (params) => this._e_templates(params)
530537
}
531-
})
538+
}
539+
if ('yAxis' in option && !('axisLabel' in option['yAxis'])) {
540+
options.yAxis = {
541+
...option['yAxis'],
542+
axisLabel: {
543+
formatter: (params) => this.formatter(params)
544+
}
545+
}
546+
}
547+
this.instance.setOption(options)
532548
return this
533549
}
534550
setType(type) {
@@ -579,7 +595,15 @@ $i18n.addLanguageTable("zh_CN", {
579595
"switch.dashboard.storage.:all:": "所有存储",
580596
"switch.dashboard.storage.alist": "Alist [%path% (%url%)]",
581597
"switch.dashboard.storage.local": "本地存储 [%path%]",
582-
"switch.dashboard.storage.webdav": "WebDAV [%path% (%url%)]"
598+
"switch.dashboard.storage.webdav": "WebDAV [%path% (%url%)]",
599+
"unit.hour": "%value% 时",
600+
"unit.day": "%value% 天",
601+
"dashboard.title.storage.today.hits": "今日下载数",
602+
"dashboard.title.storage.today.bytes": "今日下载量",
603+
"dashboard.title.storage.30days.hits": "30 天下载数",
604+
"dashboard.title.storage.30days.bytes": "30 天下载量",
605+
"dashboard.value.storage.hits": "下载数",
606+
"dashboard.value.storage.bytes": "下载量",
583607

584608
})
585609
$style.setTheme("light", {
@@ -602,6 +626,11 @@ $style.setTheme("light", {
602626
"panel-color": "rgb(255, 255, 255)",
603627
"title-color": "rgba(0, 0, 0, 0.5)",
604628
"value-color": "rgba(0, 0, 0, 0.7)",
629+
"echarts-color-0": "#0FC6C2",//"#246de6",
630+
"echarts-color-1": "#6199FE",
631+
"echarts-color-2": "#FFD268",
632+
"echarts-color-3": "#FF5576",
633+
"echarts-color-4": "#89DFE2"
605634
})
606635
$style.setTheme("dark", {
607636
"main-color-r": "244",
@@ -622,6 +651,11 @@ $style.setTheme("dark", {
622651
"panel-color": "rgb(35, 35, 35)",
623652
"title-color": "rgba(255, 255, 255, 0.5);",
624653
"value-color": "rgb(255, 255, 255);",
654+
"echarts-color-0": "#F1D6BF",
655+
"echarts-color-1": "#FFA552",
656+
"echarts-color-2": "#F16575",
657+
"echarts-color-3": "#65B8FF",
658+
"echarts-color-4": "#FF8859"
625659
})
626660
$style.addAll({
627661
"*": {
@@ -834,7 +868,7 @@ class Tools {
834868
}
835869
static formatSimpleNumber(number) {
836870
// convert number to belike: 100,000, if 100000.0, we are 100,000.0
837-
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
871+
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ", ")
838872
}
839873
static _BYTES = {
840874
"iB": 1,
@@ -1120,37 +1154,53 @@ async function load() {
11201154
// storage
11211155

11221156
$dashboard_locals.storage_switch = new SwitchElement().addButtons("switch.dashboard.storage.:all:").addEventListener("change", (event) => {
1123-
}).select(0)
1157+
})
1158+
$dashboard_locals.cluster_switch = new SwitchElement().addButtons("switch.dashboard.cluster.:all:").addEventListener("change", (event) => {
1159+
})
11241160
$dashboard_locals.storage_echarts = {}
1125-
$dashboard_locals.storage_data = ref({}, {
1126-
timeout: 100,
1161+
$dashboard_locals.statistics_data = ref({}, {
1162+
timeout: 20,
11271163
handler: (object) => {
11281164
object = object.object;
11291165
var current = object.current || "total"
11301166
var data = object[current] || {}
1131-
for (const [key, value] of Object.entries({
1132-
"today_hits": data.hourly_hits,
1133-
"today_bytes": data.hourly_bytes,
1134-
"days_hits": data.daily_hits,
1135-
"days_bytes": data.daily_bytes
1167+
for (const [key, values] of Object.entries({
1168+
"today_hits": [
1169+
data.hourly_hits, (n) => $i18n.t("unit.hour", { value: n }), Tools.formatSimpleNumber, $i18n.t("dashboard.value.storage.hits")
1170+
],
1171+
"today_bytes": [
1172+
data.hourly_bytes, (n) => $i18n.t("unit.hour", { value: n }), Tools.formatBytes, $i18n.t("dashboard.value.storage.bytes")
1173+
],
1174+
"days_hits": [
1175+
data.daily_hits, (n) => n, Tools.formatSimpleNumber, $i18n.t("dashboard.value.storage.hits")
1176+
],
1177+
"days_bytes": [
1178+
data.daily_bytes, (n) => n, Tools.formatBytes, $i18n.t("dashboard.value.storage.bytes")
1179+
]
11361180
})) {
1181+
const [value, key_unit, value_formatter, i18n] = values;
1182+
if (!value) continue;
11371183
var option = {
11381184
color: [
1139-
$style.getThemeValue("main-color"),
1185+
$style.getThemeValue("echarts-color-0"),
11401186
],
11411187
xAxis: {
1142-
data: Object.keys(value),
1188+
data: Object.keys(value).map(
1189+
key_unit
1190+
),
11431191
},
11441192
yAxis: {
11451193
max: Math.max(10, ...Object.values(value)),
11461194
},
11471195
series: [{
1196+
name: i18n,
11481197
data: Object.values(value),
11491198
type: 'line',
11501199
smooth: true,
11511200
}]
11521201
}
1153-
$dashboard_locals.storage_echarts[key].echart.setOption(option)
1202+
$dashboard_locals.storage_echarts[key].base.setFormatter(value_formatter)
1203+
$dashboard_locals.storage_echarts[key].base.setOption(option)
11541204
}
11551205
}
11561206
})
@@ -1244,64 +1294,15 @@ async function load() {
12441294
})
12451295
storage_observer.observe($dashboard_locals.storage_info.origin)
12461296

1247-
$dashboard_locals.storage_info_task = Tools.runTask(setInterval, async () => {
1248-
var hourly = await $channel.send("storage_statistics_hourly")
1249-
var daily = await $channel.send("storage_statistics_daily")
1250-
// remove "None"
1251-
delete hourly["None"]
1252-
delete daily["None"]
1253-
var storage = {
1254-
1255-
}
1256-
//console.log(hourly, daily)
1257-
for (const [key, data] of Object.entries({
1258-
"hits": {
1259-
"daily": Object.entries(daily),
1260-
"hourly": Object.entries(hourly)
1261-
},
1262-
"bytes": {
1263-
"daily": Object.entries(daily),
1264-
"hourly": Object.entries(hourly)
1265-
}
1266-
})) {
1267-
for (const [time, values] of Object.entries(data)) {
1268-
for (const [storage_id, value] of values) {
1269-
if (!storage[storage_id]) storage[storage_id] = {}
1270-
var key_time = `${time}_${key}`
1271-
if (!storage[storage_id][key_time]) storage[storage_id][key_time] = {}
1272-
for (const val of value) {
1273-
var v = storage[storage_id][key_time][val._] || 0;
1274-
storage[storage_id][key_time][val._] = v + val[key]
1275-
}
1276-
}
1277-
}
1278-
}
1279-
var total = {
1280-
hourly_bytes: {},
1281-
daily_bytes: {},
1282-
hourly_hits: {},
1283-
daily_hits: {}
1284-
}
1285-
for (const data of Object.values(storage)) {
1286-
for (const [key, values] of Object.entries(data)) {
1287-
for (const [time, value] of Object.entries(values)) {
1288-
var v = total[key][time] || 0;
1289-
total[key][time] = v + value
1290-
}
1291-
}
1292-
}
1293-
$dashboard_locals.storage_data.total = total;
1294-
$dashboard_locals.storage_data.storages = storage;
1295-
}, 60000)
1296-
12971297
// push all elements
12981298
basic.push(
12991299
section.append(
13001300
info_collection,
13011301
$dashboard_locals.basic_qps
13021302
),
13031303
createElement("div").classes("pre-switch-container").append(
1304-
$dashboard_locals.storage_switch
1304+
$dashboard_locals.storage_switch.select(0),
1305+
$dashboard_locals.cluster_switch.select(0)
13051306
),
13061307
$dashboard_locals.storage_info
13071308
)
@@ -1378,9 +1379,9 @@ async function load() {
13781379
"today_bytes"
13791380
]) {
13801381
var option = {
1381-
color: [
1382+
/*color: [
13821383
$style.getThemeValue("echarts-color-0"),
1383-
],
1384+
],*/
13841385
tooltip: {
13851386
trigger: 'axis'
13861387
},
@@ -1410,10 +1411,11 @@ async function load() {
14101411
$dashboard_locals.basic_qps_echart
14111412
]
14121413
$dashboard_locals.qps_data = ref({}, {
1414+
timeout: 20,
14131415
handler: (object) => {
14141416
var resp = object.object.resp;
14151417
var option = {
1416-
color: $style.getThemeValue("main-color"),
1418+
color: $style.getThemeValue("echarts-color-0"),
14171419
xAxis: {
14181420
data: Object.keys(resp)
14191421
},
@@ -1429,7 +1431,8 @@ async function load() {
14291431
$dashboard_locals.qps_data.resp = resp;
14301432
}, 5000)
14311433
window.addEventListener("theme-changed", () => {
1432-
$dashboard_locals.qps_data.resp = qps_data.resp;
1434+
$dashboard_locals.qps_data.resp = $dashboard_locals.qps_data.resp;
1435+
$dashboard_locals.statistics_data.refresh = true;
14331436
})
14341437
})();
14351438

@@ -1461,6 +1464,68 @@ async function load() {
14611464
$dashboard_locals.container.append(
14621465
...$dashboard_locals.basic
14631466
)
1467+
clearInterval($dashboard_locals.storage_info_task)
1468+
$dashboard_locals.storage_info_task = Tools.runTask(setInterval, async () => {
1469+
var hourly = await $channel.send("storage_statistics_hourly")
1470+
var daily = await $channel.send("storage_statistics_daily")
1471+
// remove "None"
1472+
delete hourly["None"]
1473+
delete daily["None"]
1474+
var storage = {
1475+
1476+
}
1477+
//console.log(hourly, daily)
1478+
for (const [key, data] of Object.entries({
1479+
"hits": {
1480+
"daily": Object.entries(daily),
1481+
"hourly": Object.entries(hourly)
1482+
},
1483+
"bytes": {
1484+
"daily": Object.entries(daily),
1485+
"hourly": Object.entries(hourly)
1486+
}
1487+
})) {
1488+
for (const [time, values] of Object.entries(data)) {
1489+
for (const [storage_id, value] of values) {
1490+
if (!storage[storage_id]) storage[storage_id] = {}
1491+
var key_time = `${time}_${key}`
1492+
if (!storage[storage_id][key_time]) storage[storage_id][key_time] = {}
1493+
for (const val of value) {
1494+
var v = storage[storage_id][key_time][val._] || 0;
1495+
storage[storage_id][key_time][val._] = v + val[key]
1496+
}
1497+
if (time == "hourly") {
1498+
for (let i = 0; i < 24; i++) {
1499+
if (storage[storage_id][key_time][i]) continue
1500+
storage[storage_id][key_time][i] = 0
1501+
}
1502+
storage[storage_id][key_time] = Object.fromEntries(
1503+
Object.keys(storage[storage_id][key_time]).sort((a, b) => parseInt(a) - parseInt(b)).map(v => [v, storage[storage_id][key_time][v]])
1504+
)
1505+
} else {
1506+
var server_time = $dashboard_locals.info.runtime
1507+
console.log(server_time)
1508+
}
1509+
}
1510+
}
1511+
}
1512+
var total = {
1513+
hourly_bytes: {},
1514+
daily_bytes: {},
1515+
hourly_hits: {},
1516+
daily_hits: {}
1517+
}
1518+
for (const data of Object.values(storage)) {
1519+
for (const [key, values] of Object.entries(data)) {
1520+
for (const [time, value] of Object.entries(values)) {
1521+
var v = total[key][time] || 0;
1522+
total[key][time] = v + value
1523+
}
1524+
}
1525+
}
1526+
$dashboard_locals.statistics_data.total = total;
1527+
$dashboard_locals.statistics_data.storages = storage;
1528+
}, 1000)
14641529
clearInterval($dashboard_locals.basic_task_file_info)
14651530
$dashboard_locals.basic_task_file_info = Tools.runTask(setInterval, async () => {
14661531
var hourly = await $channel.send("cluster_statistics_hourly")
@@ -1476,7 +1541,6 @@ async function load() {
14761541
})) {
14771542
rdata[key] = Object.values(val[1]).map((obj) => obj.reduce((a, b) => a + b[val[0]], 0)).reduce((a, b) => a + b, 0)
14781543
}
1479-
console.log(rdata, hourly)
14801544
// first hits
14811545
for (const {
14821546
handler, obj, data
@@ -1529,7 +1593,7 @@ async function load() {
15291593
requestAnimationFrame(() => {
15301594
if ($dashboard_locals.qps_data.resp)
15311595
$dashboard_locals.qps_data.resp = $dashboard_locals.qps_data.resp;
1532-
$dashboard_locals.storage_data.refresh = true;
1596+
$dashboard_locals.statistics_data.refresh = true;
15331597
})
15341598
}).select(0)
15351599
)
@@ -1555,8 +1619,10 @@ async function load() {
15551619
if (!$dashboard_locals) return;
15561620
clearInterval($dashboard_locals.basic_task_file_info)
15571621
clearInterval($dashboard_locals.basic_task_system_info)
1622+
clearInterval($dashboard_locals.storage_info_task)
15581623
if (!all) return;
15591624
clearInterval($dashboard_locals.info_runtime_task)
1625+
clearInterval($dashboard_locals.qps_task)
15601626
}
15611627

15621628
$router.before_handler(() => {

0 commit comments

Comments
 (0)