lanyuanxiaoyao/hudi-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): 优化页面显示和信息获取

Browse Source
This commit is contained in:
兰缘小妖
2023-06-13 00:57:04 +08:00
parent 48c18ce7e3
commit c1a9e5b24b
1 changed files with 64 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
web/components/overview-tab.js
View File

@@ -1,3 +1,14 @@
function color(number) {
let color = 'text-success'
if (number > 30) {
color = 'text-primary'
}
if (number > 90) {
color = 'text-danger'
}
return color
}
function overviewYarnJob(cluster, search, queue, yarnQueue) {
return {
className: 'font-mono',
@@ -15,23 +26,65 @@ function overviewYarnJob(cluster, search, queue, yarnQueue) {
type: 'service',
className: 'inline ml-2',
api: `\${base}/overview/queue?queue=compaction-queue-${cluster}`,
interval: 10000,
silentPolling: true,
body: [
{
type: 'tpl',
tpl: '${PADSTART(size, 2)}',
tpl: "${PADSTART(size, 2)}",
}
]
},
overviewYarnCluster(cluster, yarnQueue),
{
type: 'service',
className: 'inline',
api: {
method: 'get',
url: `\${base}/overview/yarn-cluster`,
data: {
cluster: cluster,
queue: yarnQueue,
},
adaptor: function (payload, response) {
let rootUsed = (payload['data']['root']['usedCapacity'] * 100 / payload['data']['root']['capacity']).toFixed(0)
let targetUsed = (payload['data']['target']['absoluteUsedCapacity'] * 100 / payload['data']['target']['absoluteMaxCapacity']).toFixed(0)
return {
...payload,
data: {
...payload.data,
rootUsed: rootUsed,
rootUsedColor: color(rootUsed),
targetUsed: targetUsed,
targetUsedColor: color(targetUsed),
}
}
}
},
interval: 10000,
silentPolling: true,
body: [
'(',
{
type: 'tpl',
tpl: '<span class="font-bold ${rootUsedColor}">${PADSTART(ROUND(rootUsed), 3)}%</span>',
},
',',
{
type: 'tpl',
tpl: '<span class="font-bold ${targetUsedColor}">${PADSTART(ROUND(targetUsed), 3)}%</span>',
},
')'
],
},
'(',
{
type: 'tpl',
tpl: '<span class="font-bold">${PADSTART(total, 3)}</span>',
tpl: "<span class='font-bold white-space-pre'>${PADSTART(total, 4)}</span>",
},
',',
{
type: 'tpl',
tpl: '<span class="font-bold text-cyan-300">${PADSTART(scheduling, 3)}</span>',
tpl: "<span class='font-bold text-cyan-300'>${PADSTART(scheduling, 2)}</span>",
},
',',
{
@@ -48,64 +101,9 @@ function overviewYarnJob(cluster, search, queue, yarnQueue) {
}
}
function color(number) {
let color = 'text-success'
if (number > 30) {
color = 'text-primary'
}
if (number > 80) {
color = 'text-danger'
}
return color
}
function overviewYarnCluster(cluster, queue) {
return {
type: 'service',
className: 'inline',
api: {
method: 'get',
url: `\${base}/overview/yarn-cluster`,
data: {
cluster: cluster,
queue: queue,
},
adaptor: function (payload, response) {
let rootUsed = (payload['data']['root']['usedCapacity'] * 100 / payload['data']['root']['capacity']).toFixed(0)
let targetUsed = (payload['data']['target']['absoluteUsedCapacity'] * 100 / payload['data']['target']['absoluteMaxCapacity']).toFixed(0)
return {
...payload,
data: {
...payload.data,
rootUsed: rootUsed,
rootUsedColor: color(rootUsed),
targetUsed: targetUsed,
targetUsedColor: color(targetUsed),
}
}
}
},
interval: 10000,
silentPolling: true,
body: [
'(',
{
type: 'tpl',
className: 'font-bold',
tpl: '<span class="font-bold ${rootUsedColor}">${PADSTART(ROUND(rootUsed), 3)}%</span>',
},
',',
{
type: 'tpl',
tpl: '<span class="font-bold ${targetUsedColor}">${PADSTART(ROUND(targetUsed), 3)}%</span>',
},
')'
],
}
}
function overviewTab() {
return {
className: 'white-space-pre',
title: '概览',
tab: [
{
@@ -135,7 +133,7 @@ function overviewTab() {
'<br>',
{
type: 'tpl',
tpl: 'Hudi表：<span class="font-bold mr-1">${hudi_total}</span>',
tpl: '湖底表：<span class="font-bold mr-1">${hudi_total}</span>',
},
'<br>',
{
@@ -172,6 +170,8 @@ function overviewTab() {
{
type: 'service',
api: '${base}/overview/version',
interval: 10000,
silentPolling: true,
body: [
'版本：',
{
@@ -180,18 +180,18 @@ function overviewTab() {
tpl: '${version}',
},
'<br/>',
'<span class="italic text-gray-500 my-2">未接收,未跨天</span>',
'<span class="italic text-gray-500 my-2">未接收, 未跨天</span>',
'<br/>',
'重点表：',
{
type: 'tpl',
tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.focus, 3)},${PADSTART(unSchedule.focus, 3)}</span>',
tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.focus, 3)}, ${PADSTART(unSchedule.focus, 3)}</span>',
},
'<br/>',
'普通表：',
{
type: 'tpl',
tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.normal, 3)},${PADSTART(unSchedule.normal, 3)}</span>',
tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.normal, 3)}, ${PADSTART(unSchedule.normal, 3)}</span>',
},
]
}