Skip to content

Commit 694b348

Browse files
tianxiu2b2ttianxiu2b2t
committed
chore: 优化代码结构，修复漏缺的数据库查询
1 parent 3672ab7 commit 694b348

File tree

17 files changed

+801
-905
lines changed

17 files changed

+801
-905
lines changed

‎assets/ipdb.ipdb‎

2.79 MB
Binary file not shown.

‎assets/js/index.js‎

Lines changed: 150 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ class Channel {
199199
total: 0,
200200
current: 0,
201201
};
202-
this.timeout = 10000
202+
this.timeout = 20000
203203
this._event_source_init()
204204
if (!this.support_websocket) return;
205205
this._ws_init();
@@ -258,7 +258,7 @@ class Channel {
258258
}, 5000)
259259
}
260260

261-
async _ws_send(event, data) {
261+
async _ws_send(event, data, options) {
262262
if (!this._ws_initizalized) return this._http_send(event, data);
263263
return new Promise(async (resolve, reject) => {
264264
var echo_id = (await ObjectID.create()).toString();
@@ -268,14 +268,16 @@ class Channel {
268268
data,
269269
echo_id
270270
}))
271-
this._ws_timeouts[echo_id] = setTimeout(() => {
272-
delete this._ws_callbacks[echo_id];
273-
reject("timeout")
274-
}, this.timeout)
271+
if (options.timeout) {
272+
this._ws_timeouts[echo_id] = setTimeout(() => {
273+
delete this._ws_callbacks[echo_id];
274+
reject("timeout")
275+
}, options.timeout)
276+
}
275277
})
276278
}
277279

278-
async _http_send(event, data) {
280+
async _http_send(event, data, options) {
279281
return new Promise((resolve, reject) => {
280282
var pushed = false;
281283
var loaded = 0;
@@ -311,16 +313,26 @@ class Channel {
311313
event,
312314
data: data
313315
}))
314-
var timer = setTimeout(() => {
315-
xhr.abort();
316-
reject("timeout")
317-
}, this.timeout)
316+
if (options.timeout) {
317+
var timer = setTimeout(() => {
318+
xhr.abort();
319+
reject("timeout")
320+
}, options.timeout)
321+
}
318322
})
319323
}
320324

321-
async send(event, data) {
322-
if (this.support_websocket) return this._ws_send(event, data);
323-
return this._http_send(event, data);
325+
async send(event, data, options = {
326+
"timeout": this.timeout
327+
}) {
328+
options = {
329+
...{
330+
"timeout": this.timeout
331+
},
332+
...options
333+
}
334+
if (this.support_websocket) return this._ws_send(event, data, options);
335+
return this._http_send(event, data, options);
324336
}
325337

326338
get support_websocket() {
@@ -344,9 +356,7 @@ class SwitchElement extends Element {
344356
".switch-container": `
345357
position: relative;
346358
display: inline-block;
347-
flex: 1 1 auto;
348359
white-space: nowrap;
349-
width: 100%;
350360
`,
351361
".switch-main": {
352362
"display": "flex",
@@ -537,42 +547,44 @@ class FlexElement extends Element {
537547
handler = (child) => container_width
538548
heightHandler = (child) => container_height
539549
} else {
540-
handler = (child) => this._render_calc_child_width(this.children.length, this.children.indexOf(child), container_width)
550+
handler = (child) => this._render_calc_child_value(this.children.length, this.children.indexOf(child), container_width)
541551
heightHandler = (child) => calcElementHeight(child)
542552
}
543553
for (const child of this.children) {
544554
var res = handler(child);
545555
child.style("width", `${res}px`)
546556
if (this.$autoheight) {
547-
child.style("height", `${heightHandler(child)}px`)
557+
requestAnimationFrame(() => {
558+
child.style("height", `${heightHandler(child)}px`)
559+
})
548560
}
549561
child.origin.getBoundingClientRect()
550562
}
551563
}
552-
_render_calc_child_width(total_child, index, container_width) {
564+
_render_calc_child_value(total_child, index, container_value) {
553565
const child = this.$child;
554566
if (child.length == 1) {
555567
var val = child[0];
556568
// if val is number
557569
if (typeof val === "number") {
558-
return container_width / val;
570+
return container_value / val;
559571
}
560572
if (val.endsWith("%")) {
561-
return parseFloat(val.slice(0, -1)) / 100.0 * container_width / total_child;
573+
return parseFloat(val.slice(0, -1)) / 100.0 * container_value / total_child;
562574
}
563575
return 0;
564576
}
565577
// first check if all child is number, or all child is percent
566578
const is_number = child.every(e => typeof e === "number");
567579
const is_percent = child.every(e => typeof e === "string" && e.endsWith("%"));
568580
if (is_number) {
569-
return child[index >= child.length ? child.length - 1 : index] / total_child * container_width;
581+
return child[index >= child.length ? child.length - 1 : index] / total_child * container_value;
570582
}
571583
if (is_percent) {
572584
var total = child.reduce((a, b) => a + parseFloat(b.slice(0, -1)), 0);
573-
return parseFloat(child[index >= child.length ? child.length - 1 : index].slice(0, -1)) / total * container_width;
585+
return parseFloat(child[index >= child.length ? child.length - 1 : index].slice(0, -1)) / total * container_value;
574586
}
575-
console.error(child, " is not a valid width value");
587+
console.error(child, " is not a valid value value");
576588
return 0;
577589
}
578590
child(...values) {
@@ -748,7 +760,7 @@ $i18n.addLanguageTable("zh_CN", {
748760
"switch.dashboard.storage.webdav": "WebDAV [%path% (%url%)]",
749761
"unit.hour": "%value% 时",
750762
"unit.day": "%value% 天",
751-
"dashboard.title.qps": "5 分钟请求数",
763+
"dashboard.title.qps": "实时 QPS",
752764
"switch.dashboard.cluster.:all:": "所有节点",
753765
"dashboard.title.storage.today": "今日请求存储",
754766
"dashboard.title.storage.30days": "30 天请求存储",
@@ -989,6 +1001,12 @@ $style.addAll({
9891001
"border-radius": "8px",
9901002
"width": "100%",
9911003
"transition": "width 0.5s ease-in-out"
1004+
},
1005+
".map-container": {
1006+
"min-height": "445.5px"
1007+
},
1008+
".echart": {
1009+
"margin-top": "8px"
9921010
}
9931011
})
9941012
class Tools {
@@ -1054,7 +1072,6 @@ class Tools {
10541072
label[key].i18n(params[key + "_i18n"])
10551073
var title = ref({}, {
10561074
handler: (args) => {
1057-
console.log(args)
10581075
label[key].aria_label(args.object.value)
10591076
}
10601077
})
@@ -1357,6 +1374,40 @@ async function load() {
13571374

13581375
})
13591376
})();
1377+
1378+
const create_qps = (
1379+
type = "basic",
1380+
parentElement = null,
1381+
leftElement = null
1382+
) => {
1383+
return Tools.createPanel(({ pre, panel }) => {
1384+
var instance = Tools.createEchartElement(({
1385+
echart, base
1386+
}) => {
1387+
base.classes("echart").style("min-height", "172px")
1388+
$dashboard_locals[`${type}_qps_echart`] = {
1389+
echart, base
1390+
};
1391+
})
1392+
panel.classes("label-text").append(
1393+
createElement("div").classes("title").append(
1394+
createElement("p").i18n("dashboard.title.qps"),
1395+
),
1396+
instance
1397+
)
1398+
var observer = new ResizeObserver(() => {
1399+
var width = calcElementWidth(parentElement)
1400+
if (width < 1280) {
1401+
pre.style("height", `auto`)
1402+
} else {
1403+
pre.style("height", `${calcElementHeight(leftElement) / (type == "basic" ? 1 : 2)}px`)
1404+
panel.style("height", "100%")
1405+
}
1406+
$dashboard_locals[`${type}_qps_echart`].echart.resize()
1407+
})
1408+
observer.observe(leftElement.origin)
1409+
})
1410+
}
13601411
// basic
13611412
(() => {
13621413
const basic = $dashboard_locals.basic;
@@ -1487,36 +1538,7 @@ async function load() {
14871538
$dashboard_locals.system_info
14881539
)
14891540
const section = Tools.createFlexElement().child('70%', '30%').minWidth(1280)
1490-
$dashboard_locals.basic_qps = Tools.createPanel(({ pre, panel }) => {
1491-
var instance = Tools.createEchartElement(({
1492-
echart, base
1493-
}) => {
1494-
base.style("min-height", "180px")
1495-
$dashboard_locals.basic_qps_echart = {
1496-
echart, base
1497-
};
1498-
})
1499-
panel.append(
1500-
createElement("div").classes("title").append(
1501-
createElement("div").append(
1502-
createElement("p").i18n("dashboard.title.qps"),
1503-
// ...
1504-
)
1505-
),
1506-
instance
1507-
)
1508-
var observer = new ResizeObserver(() => {
1509-
var width = calcElementWidth(section)
1510-
if (width < 1280) {
1511-
pre.style("height", `auto`)
1512-
} else {
1513-
pre.style("height", `${calcElementHeight(info_collection)}px`)
1514-
panel.style("height", "100%")
1515-
}
1516-
$dashboard_locals.basic_qps_echart.echart.resize()
1517-
})
1518-
observer.observe(info_collection.origin)
1519-
})
1541+
$dashboard_locals.basic_qps = create_qps("basic", section, info_collection)
15201542

15211543
// storage
15221544

@@ -1753,6 +1775,57 @@ async function load() {
17531775
statistics
17541776
)
17551777
})();
1778+
1779+
// pro
1780+
(() => {
1781+
const advanced = $dashboard_locals.advanced;
1782+
1783+
const req_section = Tools.createFlexElement().child('75%', '25%').minWidth(1280)//.autoHeight(true);
1784+
const req_map = Tools.createPanel(({
1785+
panel
1786+
}) => {
1787+
var section = (new SwitchElement()).addButtons(
1788+
"req_map.world",
1789+
"req_map.china"
1790+
)
1791+
var map_container = createElement("div")
1792+
var map_rank = createElement("div")
1793+
panel.classes("label-text").append(
1794+
createElement("p").classes("title", "flex-between").append(
1795+
createElement("p").i18n(`dashboard.title.req_map`),
1796+
section
1797+
),
1798+
Tools.createFlexElement().append(
1799+
map_container,
1800+
map_rank
1801+
).child("70%", "30%").classes("map-container")
1802+
)
1803+
})
1804+
$dashboard_locals.advanced_qps = create_qps("advanced", req_section, req_map)
1805+
$dashboard_locals.advanced_ip_access = Tools.createPanel(({ panel }) => {
1806+
var instance = Tools.createEchartElement((e) => {
1807+
})
1808+
panel.classes("label-text").append(
1809+
createElement("p").classes("title").i18n("dashboard.title.ip_access"),
1810+
instance
1811+
)
1812+
instance.style("min-height", "180px")
1813+
var observer = new ResizeObserver(() => {
1814+
})
1815+
observer.observe(panel.origin)
1816+
})
1817+
1818+
advanced.push(
1819+
req_section.append(
1820+
req_map,
1821+
createElement("div").append(
1822+
$dashboard_locals.advanced_qps,
1823+
$dashboard_locals.advanced_ip_access
1824+
)
1825+
)
1826+
)
1827+
})();
1828+
17561829
const init_echarts = () => {
17571830
var option = {
17581831
tooltip: {
@@ -1811,7 +1884,8 @@ async function load() {
18111884
]
18121885
}
18131886
const instances = [
1814-
$dashboard_locals.basic_qps_echart
1887+
$dashboard_locals.basic_qps_echart,
1888+
$dashboard_locals.advanced_qps_echart
18151889
]
18161890
for (let qps of instances) {
18171891
qps.base.setOption(option)
@@ -1846,22 +1920,27 @@ async function load() {
18461920
}
18471921
// share
18481922
(() => {
1849-
const instances = [
1850-
$dashboard_locals.basic_qps_echart
1851-
]
1923+
const config = {
1924+
"basic": 35,
1925+
"advanced": 35
1926+
}
18521927
$dashboard_locals.qps_data = ref({}, {
18531928
timeout: 20,
18541929
handler: (object) => {
1855-
var resp = object.object.resp;
1856-
var option = {
1857-
color: $style.getThemeValue("echarts-color-0"),
1858-
xAxis: {
1859-
data: Object.keys(resp)
1860-
},
1861-
series: [{ name: 'QPS', data: Object.values(resp) }]
1862-
}
1863-
for (let instance of instances) {
1864-
instance.base.setOption(option)
1930+
for (let [key, count] of Object.entries(config)) {
1931+
const instance = $dashboard_locals[`${key}_qps_echart`]
1932+
var resp = object.object.resp;
1933+
var length = Object.keys(resp).length;
1934+
var keys = Object.keys(resp).slice(length - count);
1935+
var values = Object.values(resp).slice(length - count);
1936+
var option = {
1937+
color: $style.getThemeValue("echarts-color-0"),
1938+
xAxis: {
1939+
data: keys
1940+
},
1941+
series: [{ name: 'QPS', data: values}]
1942+
}
1943+
instance.echart.setOption(option)
18651944
}
18661945
}
18671946
})
@@ -2017,7 +2096,7 @@ async function load() {
20172096
if ($dashboard_locals.qps_data.resp)
20182097
$dashboard_locals.qps_data.resp = $dashboard_locals.qps_data.resp;
20192098
})
2020-
}).select(0)
2099+
}).select(1)
20212100
)
20222101
}
20232102
$main.append(

0 commit comments

Comments
 (0)