feature(web): 增加 a4 集群的监控

web/components/yarn-tab.js

@@ -11,121 +11,7 @@ function yarnTab(cluster, title, queueNames = 'default', searchName = undefined)
                         type: 'tpl',
                         tpl: '<span class="font-bold text-xl">集群资源</span>',
                     },
-                    {
-                        type: 'crud',
-                        api: {
-                            method: 'get',
-                            url: '${base}/yarn/queue_list',
-                            data: {
-                                clusters: `${cluster}`,
-                                names: '${queueName|default:undefined}'
-                            },
-                        },
-                        affixHeader: false,
-                        defaultParams: {
-                            queueName: queueNames,
-                        },
-                        interval: 10000,
-                        syncLocation: false,
-                        silentPolling: true,
-                        headerToolbar: [
-                            "reload",
-                        ],
-                        columns: [
-                            {
-                                name: 'queueName',
-                                label: '队列名称',
-                                width: 130,
-                                type: 'tooltip-wrapper',
-                                body: '${TRUNCATE(queueName, 20)}',
-                                content: '${queueName}',
-                            },
-                            {
-                                label: '当前容量',
-                                type: 'progress',
-                                value: '${ROUND((absoluteUsedCapacity * 100 / absoluteMaxCapacity), 0)}',
-                                stripe: true,
-                                animate: true,
-                                showLabel: false,
-                                map: [
-                                    {
-                                        value: 30,
-                                        color: "#28a745"
-                                    }, {
-                                        value: 90,
-                                        color: "#007bff"
-                                    },
-                                    {
-                                        value: 100,
-                                        color: "#dc3545"
-                                    }
-                                ]
-                            },
-                            {
-                                label: '进度',
-                                width: 35,
-                                align: 'center',
-                                type: 'tpl',
-                                tpl: '${ROUND((absoluteUsedCapacity * 100 / absoluteMaxCapacity), 0)}%',
-                            },
-                            {
-                                type: "operation",
-                                label: "操作",
-                                width: 100,
-                                fixed: 'right',
-                                buttons: [
-                                    {
-                                        label: "详情",
-                                        type: "button",
-                                        level: "link",
-                                        tooltip: '查看队列详情',
-                                        visibleOn: '${!root}',
-                                        actionType: 'dialog',
-                                        dialog: {
-                                            closeOnEsc: true,
-                                            closeOnOutside: true,
-                                            size: 'md',
-                                            close: true,
-                                            title: '队列详情',
-                                            body: {
-                                                type: 'property',
-                                                items: [
-                                                    {label: 'CPU', content: '${resourcesUsed.vCores}'},
-                                                    // 有空看看这个值的单位
-                                                    {label: '内存', content: '${resourcesUsed.memory}', span: 2},
-                                                    {label: '容量(%)', content: '${capacity}'},
-                                                    {label: '最大容量(%)', content: '${maxCapacity}'},
-                                                    {label: '已用容量(%)', content: '${usedCapacity}'},
-                                                    {label: '绝对容量(%)', content: '${absoluteCapacity}'},
-                                                    {label: '绝对最大容量(%)', content: '${absoluteMaxCapacity}'},
-                                                    {label: '绝对已用容量(%)', content: '${absoluteUsedCapacity}'},
-                                                    {label: '应用数量', content: '${numApplications}', span: 3},
-                                                    {label: '最大应用数量', content: '${maxApplications}'},
-                                                    {label: '活跃应用数量', content: '${numActiveApplications}'},
-                                                    {label: '等待应用数量', content: '${numPendingApplications}'},
-                                                    {label: '容器数量', content: '${numContainers}', span: 3},
-                                                    {label: '已分配容器数量', content: '${numApplications}'},
-                                                    {label: '预留容器数量数量', content: '${numApplications}'},
-                                                    {label: '等待容器数量', content: '${numApplications}'},
-                                                ]
-                                            },
-                                            actions: []
-                                        }
-                                    },
-                                    {
-                                        visibleOn: "${webUrl}",
-                                        label: "管理页面",
-                                        type: "action",
-                                        level: "link",
-                                        tooltip: '打开管理页面',
-                                        actionType: 'url',
-                                        url: '${webUrl}',
-                                        blank: true,
-                                    }
-                                ]
-                            }
-                        ]
-                    },
+                    yarnQueueCrud(cluster, queueNames),
                     {
                         type: 'tpl',
                         tpl: '<span class="font-bold text-xl">集群任务</span>',