hudi-service/web/components/overview-tab.js

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',
        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}`,
                interval: 10000,
                silentPolling: true,
                body: [
                    {
                        type: 'tpl',
                        tpl: "${PADSTART(size, 2)}",
                    }
                ]
            },
            {
                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 white-space-pre'>${PADSTART(total, 4)}</span>",
            },
            ',',
            {
                type: 'tpl',
                tpl: "<span class='font-bold text-cyan-300'>${PADSTART(scheduling, 2)}</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 overviewTab() {
    return {
        className: 'white-space-pre',
        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: '湖底表：<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`,
                interval: 10000,
                silentPolling: true,
                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',
                interval: 10000,
                silentPolling: true,
                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>',
                    },
                ]
            }
        ]
    }
}