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

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>',
                    },
                ]
            }
        ]
    }
}