feature(web): 增加 Overview 页面
方便总览全局情况，跨页面查看信息多有不便
This commit is contained in:
198
web/components/overview-tab.js
Normal file
198
web/components/overview-tab.js
Normal file
@@ -0,0 +1,198 @@
|
||||
function overviewYarnJob(cluster, search, queue, yarnQueue) {
|
||||
return {
|
||||
className: 'font-mono',
|
||||
type: 'service',
|
||||
api: `\${base}/overview/yarn-job?cluster=${cluster}&search=${search}`,
|
||||
interval: 10000,
|
||||
silentPolling: true,
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
className: 'mr-1 font-bold',
|
||||
tpl: `${cluster}`,
|
||||
},
|
||||
queue === undefined ? {} : {
|
||||
type: 'service',
|
||||
className: 'inline ml-2',
|
||||
api: `\${base}/overview/queue?queue=compaction-queue-${cluster}`,
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '${PADSTART(size, 2)}',
|
||||
}
|
||||
]
|
||||
},
|
||||
overviewYarnCluster(cluster, yarnQueue),
|
||||
'(',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span class="font-bold">${PADSTART(total, 3)}</span>',
|
||||
},
|
||||
',',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span class="font-bold text-cyan-300">${PADSTART(scheduling, 3)}</span>',
|
||||
},
|
||||
',',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span class="font-bold text-success">${PADSTART(running, 3)}</span>',
|
||||
},
|
||||
',',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span class="font-bold text-danger">${PADSTART(failure, 3)}</span>',
|
||||
},
|
||||
')',
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
title: '概览',
|
||||
tab: [
|
||||
{
|
||||
type: 'service',
|
||||
// language=JavaScript
|
||||
dataProvider: 'const timer = setInterval(() => {\n setData({date: new Date().toLocaleString()})\n}, 1000)\nreturn () => {\n clearInterval(timer)\n}',
|
||||
body: [
|
||||
'当前时间：',
|
||||
{
|
||||
type: 'tpl',
|
||||
className: 'font-bold',
|
||||
tpl: '${date}'
|
||||
}
|
||||
]
|
||||
},
|
||||
{type: 'divider'},
|
||||
{
|
||||
type: 'service',
|
||||
api: '${base}/overview',
|
||||
interval: 60000,
|
||||
silentPolling: true,
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '逻辑表：<span class="font-bold mr-1">${table_total}</span>',
|
||||
},
|
||||
'<br>',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: 'Hudi表：<span class="font-bold mr-1">${hudi_total}</span>',
|
||||
},
|
||||
'<br>',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '重点表：<span class="font-bold mr-1">${focus_count}</span>',
|
||||
},
|
||||
'<br>',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '普通表：<span class="font-bold">${normal_count}</span>',
|
||||
},
|
||||
]
|
||||
},
|
||||
{type: 'divider'},
|
||||
overviewYarnJob('b5-sync', 'Sync', undefined, 'default'),
|
||||
{type: 'divider'},
|
||||
{
|
||||
type: 'service',
|
||||
api: `\${base}/overview/queue?queue=compaction-queue-pre`,
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: 'Pre：<span class="font-bold">${size}</span>',
|
||||
}
|
||||
]
|
||||
},
|
||||
'<span class="italic text-gray-500 my-2">集群 压缩队列任务数(集群总资源使用,队列资源使用)(总压缩任务数,调度中任务数,运行中任务数,失败任务数)</span>',
|
||||
overviewYarnJob('b1', 'Compaction', 'compaction-queue-b1', 'datalake'),
|
||||
overviewYarnJob('b5', 'Compaction', 'compaction-queue-b5', 'ten_iap.datalake'),
|
||||
overviewYarnJob('a4', 'Compaction', 'compaction-queue-a4', 'ten_iap.datalake'),
|
||||
{type: 'divider'},
|
||||
{
|
||||
type: 'service',
|
||||
api: '${base}/overview/version',
|
||||
body: [
|
||||
'版本：',
|
||||
{
|
||||
type: 'tpl',
|
||||
className: 'font-bold',
|
||||
tpl: '${version}',
|
||||
},
|
||||
'<br/>',
|
||||
'<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>',
|
||||
},
|
||||
'<br/>',
|
||||
'普通表：',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.normal, 3)},${PADSTART(unSchedule.normal, 3)}</span>',
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user