Skip to content

Commit

Permalink
Merge pull request #329 from tbs60/dev_tming
Browse files Browse the repository at this point in the history 
feat: opt statis html,issue: #327
  • Loading branch information
@tming
tming authored Dec 4, 2024
2 parents b65f10a + 9fd6f11 commit fca5b44
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 43 deletions.
31 changes: 31 additions & 0 deletions src/backend/booster/bk_dist/dashboard/static/stats/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,35 @@

.panel.panel-box ul.list-justified>li {
width: 130px !important;
}

.hidden {
display: none;
}

.left-button {
float: left;
}

.right-button {
float: right;
}

.light-red {
color: #FF6666; /* 浅红色 */
}

.light-black {
color: #5b5a5a; /* 浅黑色 */
}

.divider {
height: 2px;
background-color: #A9A9A9; /* 浅黑色 */
margin: 20px 0;
}

.divider-row td {
border-top: 1px solid #A9A9A9; /* 浅黑色 */
padding: 0; /* 移除内边距 */
}
73 changes: 43 additions & 30 deletions src/backend/booster/bk_dist/dashboard/static/stats/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,56 +375,56 @@ <h4>欢迎使用编译加速数据分析</h4>
</ul>
<ul class="list-justified text-center" style="padding-top: 10px;">
<li>
<p class="f15">{{ remote_work_pack_avg_time }}</p>
<p class="f15">{{ remote_work_pack_common_avg_time }}</p>
<p class="text-muted">文件压缩<br>平均耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_pack_longest_time }}</p>
<p class="f15">{{ remote_work_pack_common_longest_time }}</p>
<p class="text-muted">文件压缩<br>最长耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_unpack_avg_time }}</p>
<p class="text-muted">文件解压<br>平均耗时</p>
<p class="f15">{{ remote_work_send_common_avg_time }}</p>
<p class="text-muted">文件分发<br>平均耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_unpack_longest_time }}</p>
<p class="text-muted">文件解压<br>最长耗时</p>
<p class="f15">{{ remote_work_send_common_longest_time }}</p>
<p class="text-muted">文件分发<br>最长耗时</p>
</li>
</ul>
<ul class="list-justified text-center" style="padding-top: 10px;">
<li>
<p class="f15">{{ remote_work_send_avg_time }}</p>
<p class="text-muted">文件分发<br>平均耗时</p>
<p class="f15">{{ remote_work_pack_avg_time }}</p>
<p class="text-muted">命令压缩<br>平均耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_send_longest_time }}</p>
<p class="text-muted">文件分发<br>最长耗时</p>
<p class="f15">{{ remote_work_pack_longest_time }}</p>
<p class="text-muted">命令压缩<br>最长耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_receive_avg_time }}</p>
<p class="text-muted">文件接收<br>平均耗时</p>
<p class="f15">{{ remote_work_send_avg_time }}</p>
<p class="text-muted">命令分发<br>平均耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_receive_longest_time }}</p>
<p class="text-muted">文件接收<br>最长耗时</p>
<p class="f15">{{ remote_work_send_longest_time }}</p>
<p class="text-muted">命令分发<br>最长耗时</p>
</li>
</ul>
<ul class="list-justified text-center" style="padding-top: 10px;">
<li>
<p class="f15">{{ remote_work_pack_common_avg_time }}</p>
<p class="text-muted">公共文件压缩<br>平均耗时</p>
<p class="f15">{{ remote_work_receive_avg_time }}</p>
<p class="text-muted">结果接收<br>平均耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_pack_common_longest_time }}</p>
<p class="text-muted">公共文件压缩<br>最长耗时</p>
<p class="f15">{{ remote_work_receive_longest_time }}</p>
<p class="text-muted">结果接收<br>最长耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_send_common_avg_time }}</p>
<p class="text-muted">公共文件分发<br>平均耗时</p>
<p class="f15">{{ remote_work_unpack_avg_time }}</p>
<p class="text-muted">结果解压<br>平均耗时</p>
</li>
<li>
<p class="f15">{{ remote_work_send_common_longest_time }}</p>
<p class="text-muted">公共文件分发<br>最长耗时</p>
<p class="f15">{{ remote_work_unpack_longest_time }}</p>
<p class="text-muted">结果解压<br>最长耗时</p>
</li>
</ul>
<ul class="list-justified text-center" style="padding-top: 10px;">
Expand Down Expand Up @@ -526,15 +526,28 @@ <h4>欢迎使用编译加速数据分析</h4>
</div>
</div>


<div class="row">
<div class="col-md-12">
<a class="king-btn-demo king-btn king-radius king-primary" onclick="CreateReporter()" title="搜索"
style="float: right">
<i class="fa fa-search btn-icon"></i>下载详细数据
</a>
</div>
<div class="col-md-12">
<button class="left-button king-btn-demo king-btn king-radius king-primary" onclick="CreateReporter()" title="下载详细数据">
<i class="fa fa-search btn-icon"></i>下载详细数据
</button>
<button class="right-button king-btn-demo king-btn king-radius king-primary" onclick="ShowOrHideRemoteErrors()" title="远程错误">
<i class="fa btn-icon"></i>远程错误
</button>
</div>

<div id="divider_before_table" class="divider col-md-12 display hidden"></div>

<table id="remote_error_table" class="col-md-12 display hidden" style="width:100%;border-collapse: separate; border-spacing: 10px;">
<thead>
<tr class="panel-heading">
<th class="light-red">远程机器</th>
<th class="light-red">错误信息</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

</div>
</div>
<textarea id="js-copytextarea" style="visibility: hidden"></textarea>
Expand Down
114 changes: 101 additions & 13 deletions src/backend/booster/bk_dist/dashboard/static/stats/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,8 @@ function fetchStatsData(id) {
setTimeout(initWaitingChart_instant, 0, "#waiting_chart_instant")
setTimeout(initProcessTimeChart, 0, "#process_chart")
setTimeout(initCommandTimeChart, 0, "#command_chart")
// setTimeout(initRemoteErrorTable, 0, "#remote_error_table")
HideRemoteErrors()
hideLoading()
},
function (e) {
Expand Down Expand Up @@ -1175,11 +1177,22 @@ function initConcurrencyChart(target) {
}
let localPostData = calculate_concurrency(localPostList)

// 用最后的结束时间，模拟未执行完的任务的结束时间
let max_leave_time = 0
for (let i = 0; i < vue.jobs_data.length; i++) {
if (vue.jobs_data[i].leave_time > max_leave_time) {
max_leave_time = vue.jobs_data[i].leave_time
}
}
let localTotalList = []
for (let i = 0; i < vue.jobs_data.length; i++) {
localTotalList.push([vue.jobs_data[i].enter_time, vue.jobs_data[i].leave_time])
if (vue.jobs_data[i].leave_time > 0 ) {
localTotalList.push([vue.jobs_data[i].enter_time, vue.jobs_data[i].leave_time])
} else {
localTotalList.push([vue.jobs_data[i].enter_time, max_leave_time])
}
}
let localTotalData = calculate_concurrency(localTotalList)
let localTotalData = calculate_concurrency_instant(localTotalList)

let categories = []
let delta = (vue.work_data.end_time - vue.work_data.start_time) / line_scale
Expand All @@ -1201,7 +1214,7 @@ function initConcurrencyChart(target) {
size: marker_size
}
}, {
"name": "分发文件",
"name": "命令分发",
"data": sendData,
"color": color_set[1],
"markers": {
Expand Down Expand Up @@ -1229,7 +1242,7 @@ function initConcurrencyChart(target) {
size: marker_size
}
}, {
"name": "接收文件",
"name": "结果接收",
"data": receiveData,
"color": color_set[5],
"markers": {
Expand All @@ -1250,7 +1263,7 @@ function initConcurrencyChart(target) {
size: marker_size
}
}, {
"name": "分发公共文件",
"name": "文件分发",
"data": publicPrepareData,
"color": color_set[8],
"markers": {
Expand Down Expand Up @@ -1305,9 +1318,20 @@ function initConcurrencyChartInstant(target) {
}
let localPostData = calculate_concurrency_instant(localPostList)

// 用最后的结束时间，模拟未执行完的任务的结束时间
let max_leave_time = 0
for (let i = 0; i < vue.jobs_data.length; i++) {
if (vue.jobs_data[i].leave_time > max_leave_time) {
max_leave_time = vue.jobs_data[i].leave_time
}
}
let localTotalList = []
for (let i = 0; i < vue.jobs_data.length; i++) {
localTotalList.push([vue.jobs_data[i].enter_time, vue.jobs_data[i].leave_time])
if (vue.jobs_data[i].leave_time > 0 ) {
localTotalList.push([vue.jobs_data[i].enter_time, vue.jobs_data[i].leave_time])
} else {
localTotalList.push([vue.jobs_data[i].enter_time, max_leave_time])
}
}
let localTotalData = calculate_concurrency_instant(localTotalList)

Expand All @@ -1331,7 +1355,7 @@ function initConcurrencyChartInstant(target) {
size: marker_size
}
}, {
"name": "分发文件",
"name": "命令分发",
"data": sendData,
"color": color_set[1],
"markers": {
Expand Down Expand Up @@ -1359,7 +1383,7 @@ function initConcurrencyChartInstant(target) {
size: marker_size
}
}, {
"name": "接收文件",
"name": "结果接收",
"data": receiveData,
"color": color_set[5],
"markers": {
Expand All @@ -1385,6 +1409,7 @@ function initConcurrencyChartInstant(target) {
});
}

/*
function initConcurrencyChartInstant(target) {
let lockList = []
for (let i = 0; i < vue.jobs_data.length; i++) {
Expand Down Expand Up @@ -1428,9 +1453,20 @@ function initConcurrencyChartInstant(target) {
}
let localPostData = calculate_concurrency_instant(localPostList)
// 用最后的结束时间，模拟未执行完的任务的结束时间
let max_leave_time = 0
for (let i = 0; i < vue.jobs_data.length; i++) {
if (vue.jobs_data[i].leave_time > max_leave_time) {
max_leave_time = vue.jobs_data[i].leave_time
}
}
let localTotalList = []
for (let i = 0; i < vue.jobs_data.length; i++) {
localTotalList.push([vue.jobs_data[i].enter_time, vue.jobs_data[i].leave_time])
if (vue.jobs_data[i].leave_time > 0 ) {
localTotalList.push([vue.jobs_data[i].enter_time, vue.jobs_data[i].leave_time])
} else {
localTotalList.push([vue.jobs_data[i].enter_time, max_leave_time])
}
}
let localTotalData = calculate_concurrency_instant(localTotalList)
Expand All @@ -1454,7 +1490,7 @@ function initConcurrencyChartInstant(target) {
size: marker_size
}
}, {
"name": "分发文件",
"name": "命令分发",
"data": sendData,
"color": color_set[1],
"markers": {
Expand Down Expand Up @@ -1482,7 +1518,7 @@ function initConcurrencyChartInstant(target) {
size: marker_size
}
}, {
"name": "接收文件",
"name": "结果接收",
"data": receiveData,
"color": color_set[5],
"markers": {
Expand All @@ -1507,6 +1543,7 @@ function initConcurrencyChartInstant(target) {
}
});
}
*/

function initSumChart(target) {
let processList = []
Expand Down Expand Up @@ -2100,6 +2137,32 @@ function initCommandTimeChart(target) {
});
}

function initRemoteErrorTable() {
$('#remote_error_table tbody').empty();
let isFirst = true;
for (let i = 0; i < vue.jobs_data.length; i++) {
let item = vue.jobs_data[i]
if (item.remote_error_message.length > 0) {
if (!isFirst) {
// 添加一个分割行
var row = '<tr class="divider-row"><td colspan="2"></td></tr>' +
'<tr class="light-black">' +
'<td>' + item.remote_worker + '</td>' +
'<td>' + item.remote_error_message + '</td>' +
'</tr>';
$('#remote_error_table tbody').append(row);
} else {
isFirst = false;
var row = '<tr class="light-black">' +
'<td>' + item.remote_worker + '</td>' +
'<td>' + item.remote_error_message + '</td>' +
'</tr>';
$('#remote_error_table tbody').append(row);
}
}
}
}

function getTD(content) {
return '<td>' + content + '</td>'
}
Expand Down Expand Up @@ -2154,7 +2217,8 @@ function CreateReporter() {
data += getTD(item.remote_work_start_time > 0 && !item.remote_work_success)
data += getTD(!item.pre_work_success && item.local_work_success)
data += getTD(!item.pre_work_success && !item.local_work_success)
data += getTD(item.remote_work_start_time > 0 && !item.post_work_success && item.local_work_success)
// data += getTD(item.remote_work_start_time > 0 && !item.post_work_success && item.local_work_success)
data += getTD(!item.post_work_success && item.local_work_success)
data += getTD(item.remote_work_start_time > 0 && !item.post_work_success && !item.local_work_success)
data += getTD((item.leave_time - item.enter_time) / 1e9)
data += getTD((item.pre_work_end_time - item.pre_work_start_time) / 1e9)
Expand All @@ -2176,6 +2240,29 @@ function CreateReporter() {
dl.click()
}

function HideRemoteErrors() {
var table = $('#remote_error_table');
var divider = $('#divider_before_table');
if (table.hasClass('hidden')) {
} else {
divider.addClass('hidden');
table.addClass('hidden');
}
}

function ShowOrHideRemoteErrors() {
var table = $('#remote_error_table');
var divider = $('#divider_before_table');
if (table.hasClass('hidden')) {
divider.removeClass('hidden');
table.removeClass('hidden');
initRemoteErrorTable();
} else {
divider.addClass('hidden');
table.addClass('hidden');
}
}

function setCookie(name, value, days) {
let expires = "";
if (days) {
Expand Down Expand Up @@ -2376,7 +2463,8 @@ function shareDetailLink() {
function fast_re() {
for (let i=0; i<vue.jobs_data.length; i++) {
let data = vue.jobs_data[i];
if (data.remote_work_start_time > 0 && (!data.remote_work_success || !data.post_work_success)) {
//if (data.remote_work_start_time > 0 && (!data.remote_work_success || !data.post_work_success)) {
if (!data.remote_work_success || !data.post_work_success) {
console.log(data.origin_args.join(" "))
console.log(data.remote_error_message)
}
Expand Down

0 comments on commit fca5b44

Please sign in to comment.