function color(number) {
    let color = 'text-success'
    if (number > 30) {
        color = 'text-primary'
    }
    if (number > 90) {
        color = 'text-danger'
    }
    return color
}

function versionDetailDialog(variable, target) {
    return {
        disabledOn: `${variable} === 0`,
        type: 'action',
        label: '详情',
        level: 'link',
        size: 'sm',
        actionType: 'dialog',
        dialog: {
            title: '详情',
            actions: [],
            size: 'md',
            closeOnEsc: false,
            closeOnOutside: false,
            body: [
                {
                    type: 'service',
                    api: {
                        method: 'get',
                        url: '${base}/overview/version_detail',
                        data: {
                            target: `${target}`,
                            version: '${version}',
                        }
                    },
                    body: [
                        {
                            type: "table",
                            source: "${items}",
                            affixHeader: false,
                            columns: [
                                {
                                    label: 'Flink job id',
                                    fixed: 'left',
                                    type: 'wrapper',
                                    size: 'none',
                                    body: [
                                        {
                                            type: 'tpl',
                                            tpl: '${id}',
                                        },
                                        {
                                            type: 'action',
                                            level: 'link',
                                            label: '',
                                            icon: 'fa fa-copy',
                                            size: 'xs',
                                            actionType: 'copy',
                                            content: '${id}',
                                            tooltip: '复制 ID',
                                        }
                                    ],
                                },
                                {
                                    label: '别名',
                                    type: 'wrapper',
                                    fixed: 'left',
                                    size: 'none',
                                    className: 'nowrap',
                                    body: [
                                        {
                                            type: 'tpl',
                                            tpl: '${alias}',
                                        },
                                        {
                                            type: 'action',
                                            level: 'link',
                                            label: '',
                                            icon: 'fa fa-copy',
                                            size: 'xs',
                                            actionType: 'copy',
                                            content: '${alias}',
                                            tooltip: '复制别名',
                                        },
                                    ],
                                },
                            ]
                        }
                    ]
                }
            ]
        }
    }
}

function tableDetailDialog(variable, targetList) {
    return {
        disabledOn: `${variable} === 0`,
        type: 'action',
        label: '详情',
        level: 'link',
        size: 'sm',
        actionType: 'dialog',
        dialog: {
            title: '详情',
            size: 'md',
            ...readOnlyDialogOptions(),
            body: [
                {
                    type: "table",
                    source: `\${${targetList}}`,
                    affixHeader: false,
                    columns: [
                        {
                            label: 'Flink job id',
                            fixed: 'left',
                            type: 'wrapper',
                            size: 'none',
                            body: [
                                {
                                    type: 'tpl',
                                    tpl: '${id}',
                                },
                                {
                                    type: 'action',
                                    level: 'link',
                                    label: '',
                                    icon: 'fa fa-copy',
                                    size: 'xs',
                                    actionType: 'copy',
                                    content: '${id}',
                                    tooltip: '复制 ID',
                                }
                            ],
                        },
                        {
                            label: '别名',
                            type: 'wrapper',
                            fixed: 'left',
                            size: 'none',
                            className: 'nowrap',
                            body: [
                                {
                                    type: 'tpl',
                                    tpl: '${alias}',
                                },
                                {
                                    type: 'action',
                                    level: 'link',
                                    label: '',
                                    icon: 'fa fa-copy',
                                    size: 'xs',
                                    actionType: 'copy',
                                    content: '${alias}',
                                    tooltip: '复制别名',
                                },
                            ],
                        },
                    ]
                }
            ]
        }
    }
}

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: `\${PADSTART('${cluster}', 3)}`,
            },
            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 text-cyan-300'>${PADSTART(scheduling, 2)}</span>",
            },
            ',',
            {
                type: 'tpl',
                tpl: '<span class="font-bold text-success">${PADSTART(running, 3)}</span>',
            },
            ')',
        ]
    }
}

function overviewTab() {
    return {
        className: 'white-space-pre',
        title: '概览',
        icon: 'fa fa-circle-info',
        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'},
            '<span class="italic text-gray-500 my-2">表数量 (重点表数量, 普通表数量)</span>',
            {
                type: 'service',
                api: '${base}/overview',
                interval: 60000,
                silentPolling: true,
                body: [
                    {
                        type: 'tpl',
                        tpl: '逻辑表：<span class="font-bold mr-1 font-mono">${PADSTART(table_count, 4)} (<span class="text-primary">${PADSTART(table_focus_count, 4)}</span>, ${PADSTART(table_count - table_focus_count, 4)})</span>',
                    },
                    '<br>',
                    {
                        type: 'tpl',
                        tpl: '湖底表：<span class="font-bold mr-1 font-mono">${PADSTART(hudi_count, 4)} (<span class="text-primary">${PADSTART(hudi_focus_count, 4)}</span>, ${PADSTART(hudi_count - hudi_focus_count, 4)})</span>',
                    },
                    '<br>',
                    {
                        type: 'tpl',
                        tpl: '嗨福表：<span class="font-bold mr-1 font-mono">${PADSTART(hive_count, 4)} (<span class="text-primary">${PADSTART(hive_focus_count, 4)}</span>, ${PADSTART(hive_count - hive_focus_count, 4)})</span>',
                    },
                ]
            },
            {type: 'divider'},
            {
                type: 'service',
                api: '${base}/overview/sync_running_status',
                interval: 10000,
                silentPolling: true,
                body: [
                    {
                        type: 'tpl',
                        tpl: '任务数<span class="font-bold m-2 font-mono">${totalJob}</span>'
                    },
                    {
                        className: 'mx-2',
                        type: 'tpl',
                        tpl: '运行中<span class="font-bold m-2 font-mono">${PADSTART(runningJob, 3)}</span>'
                    },
                    {
                        type: 'tpl',
                        tpl: '已停止<span class="font-bold m-2 font-mono text-danger">${PADSTART(unRunningJob, 3)}</span>'
                    },
                    tableDetailDialog('unRunningJob', 'unRunningJobList'),
                    '<br/>',
                    {
                        type: 'tpl',
                        tpl: '总表数<span class="font-bold m-2 font-mono">${totalTable}</span>'
                    },
                    {
                        className: 'mx-2',
                        type: 'tpl',
                        tpl: '运行中<span class="font-bold m-2 font-mono">${PADSTART(runningTable, 3)}</span>'
                    },
                    {
                        type: 'tpl',
                        tpl: '已停止<span class="font-bold m-2 font-mono text-danger">${PADSTART(unRunningTable, 3)}</span>'
                    },
                    tableDetailDialog('unRunningTable', 'unRunningTableList'),
                ]
            },
            {type: 'divider'},
            '<span class="italic text-gray-500 my-2">集群 (集群总资源使用,队列资源使用)(调度中任务数,运行中任务数)</span>',
            overviewYarnJob(commonInfo.clusters.sync_names(), 'Sync', undefined, 'default'),
            {type: 'divider'},
            {
                className: 'my-2',
                type: 'service',
                api: `\${base}/overview/queue?queue=compaction-queue-pre`,
                interval: 10000,
                silentPolling: true,
                body: [
                    {
                        type: 'tpl',
                        tpl: '预调度队列：<span class="font-bold">${size}</span>',
                    }
                ]
            },
            '<span class="italic text-gray-500 my-2">集群 压缩队列任务数(集群总资源使用,队列资源使用)(调度中任务数,运行中任务数)</span>',
            ...Object.keys(commonInfo.clusters.compaction).map(name => overviewYarnJob(name, 'Compaction', `compaction-queue-${name}`, commonInfo.clusters.compaction[name])),
            {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)}</span>',
                    },
                    versionDetailDialog('unReceive.focus', 'unReceive_focus'),
                    ',',
                    {
                        type: 'tpl',
                        tpl: '<span class="font-bold font-mono">${PADSTART(unSchedule.focus, 3)}</span>',
                    },
                    versionDetailDialog('unSchedule.focus', 'unScheduled_focus'),
                    '<br/>',
                    '普通表：',
                    {
                        type: 'tpl',
                        tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.normal, 3)}</span>',
                    },
                    versionDetailDialog('unReceive.normal', 'unReceive_normal'),
                    ',',
                    {
                        type: 'tpl',
                        tpl: '<span class="font-bold font-mono">${PADSTART(unSchedule.normal, 3)}</span>',
                    },
                    versionDetailDialog('unSchedule.normal', 'unScheduled_normal'),
                ]
            },
            {type: 'divider'},
            {
                type: 'service',
                api: '${base}/overview/schedule_jobs',
                interval: 60000,
                silentPolling: true,
                body: [
                    '调度策略',
                    {
                        type: 'each',
                        name: 'items',
                        items: {
                            type: 'tpl',
                            tpl: '<div class="font-mono"><span class="font-bold">${trigger}</span> <span class="text-gray-500">(${job})</span></div>'
                        }
                    }
                ]
            },
            /*{type: 'divider'},
            {
                type: 'service',
                api: '${base}/overview/schedule_times',
                interval: 60000,
                silentPolling: true,
                body: [
                    '调度时间点',
                    {
                        type: 'each',
                        name: 'items',
                        className: 'grid',
                        items: {
                            type: 'tag',
                            color: '${color}',
                            label: '${DATETOSTR(TIMESTAMP(time, \'x\'), \'HH:mm:ss\')}'
                        }
                    }
                ]
            }*/
        ]
    }
}