feature(web): 移除 web 页面到本地路径
This commit is contained in:
68
web/components/cloud-tab.js
Normal file
68
web/components/cloud-tab.js
Normal file
@@ -0,0 +1,68 @@
|
||||
function time(field) {
|
||||
return {
|
||||
type: 'tpl',
|
||||
tpl: `\${IF(${field}, DATETOSTR(${field}, 'YYYY-MM-DD HH:mm:ss'), undefined)}`
|
||||
}
|
||||
}
|
||||
|
||||
function cloudCrud(title, path) {
|
||||
return {
|
||||
type: 'crud',
|
||||
title: title,
|
||||
api: `\${base}${path}`,
|
||||
interval: 2000,
|
||||
syncLocation: false,
|
||||
silentPolling: true,
|
||||
headerToolbar: ['reload'],
|
||||
loadDataOnce: true,
|
||||
affixHeader: false,
|
||||
perPage: 100,
|
||||
columns: [
|
||||
{name: 'name', label: '名称'},
|
||||
{
|
||||
name: 'status',
|
||||
label: '状态',
|
||||
align: 'center',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
name: 'serviceUpTime',
|
||||
label: '启动时间',
|
||||
...time('serviceUpTime'),
|
||||
align: 'center',
|
||||
width: 140,
|
||||
},
|
||||
{name: 'url', label: '地址', width: 200},
|
||||
{name: 'serviceId', label: '服务', width: 180, fixed: 'right'},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function cloudTab() {
|
||||
return {
|
||||
title: 'Cloud',
|
||||
tab: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'none',
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
label: 'Eureka',
|
||||
actionType: 'url',
|
||||
url: 'http://132.122.116.142:35670',
|
||||
blank: true,
|
||||
}
|
||||
],
|
||||
},
|
||||
{type: 'divider'},
|
||||
/*{
|
||||
type: 'service',
|
||||
silentPolling: true,
|
||||
schemaApi: 'get:${base}/cloud/deploy_plan',
|
||||
},*/
|
||||
cloudCrud('服务列表', '/cloud/list'),
|
||||
cloudCrud('服务列表 (IP)', '/cloud/list_ip'),
|
||||
],
|
||||
}
|
||||
}
|
||||
1189
web/components/common.js
Normal file
1189
web/components/common.js
Normal file
File diff suppressed because it is too large
Load Diff
29
web/components/log-tab.js
Normal file
29
web/components/log-tab.js
Normal file
@@ -0,0 +1,29 @@
|
||||
function logTab() {
|
||||
return {
|
||||
title: '运行中',
|
||||
tab: [
|
||||
{
|
||||
type: 'service',
|
||||
api: {
|
||||
method: 'GET',
|
||||
url: '${base}/log/query_compaction_log',
|
||||
data: {
|
||||
flink_job_id: '1646351885991305217',
|
||||
alias: 'dz_mb_sys_login_log',
|
||||
}
|
||||
},
|
||||
body: [
|
||||
{
|
||||
disabled: true,
|
||||
type: 'editor',
|
||||
name: 'detail',
|
||||
label: '压缩日志',
|
||||
options: {
|
||||
wordWrap: 'on',
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
79
web/components/queue-tab.js
Normal file
79
web/components/queue-tab.js
Normal file
@@ -0,0 +1,79 @@
|
||||
function queueCrud(name) {
|
||||
return {
|
||||
type: 'crud',
|
||||
title: name,
|
||||
api: `\${base}/queue/all?name=${name}`,
|
||||
interval: 10000,
|
||||
syncLocation: false,
|
||||
silentPolling: true,
|
||||
loadDataOnce: true,
|
||||
affixHeader: false,
|
||||
perPage: 5,
|
||||
stopAutoRefreshWhenModalIsOpen: true,
|
||||
resizable: false,
|
||||
headerToolbar: [
|
||||
"reload",
|
||||
'filter-toggler',
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "共 <span class='text-primary font-bold'>${total|default:0}</span> 个任务"
|
||||
},
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager'],
|
||||
maxButtons: 8,
|
||||
showPageInput: false,
|
||||
}
|
||||
],
|
||||
footerToolbar: [],
|
||||
columns: [
|
||||
{
|
||||
name: 'data.flinkJobId',
|
||||
label: '任务 ID',
|
||||
width: 170,
|
||||
...copyField('data.flinkJobId')
|
||||
},
|
||||
{
|
||||
name: 'data.alias',
|
||||
label: '别名',
|
||||
...copyField('data.alias')
|
||||
},
|
||||
{
|
||||
name: 'data.batch',
|
||||
label: '批次',
|
||||
width: 100,
|
||||
type: 'tpl',
|
||||
tpl: '<span class="label label-warning">${data.batch}</span>'
|
||||
},
|
||||
{
|
||||
name: 'priority',
|
||||
label: '优先级',
|
||||
width: 60,
|
||||
type: 'tpl',
|
||||
tpl: '<span class="label bg-info">${priority}</span>'
|
||||
},
|
||||
{
|
||||
name: 'data.comment',
|
||||
label: '备注',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
name: 'createTime',
|
||||
label: '任务提交时间',
|
||||
...time('createTime'),
|
||||
width: 140,
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function queueTab() {
|
||||
return {
|
||||
title: '压缩队列',
|
||||
tab: [
|
||||
queueCrud('compaction-queue-pre'),
|
||||
queueCrud('compaction-queue-b1'),
|
||||
queueCrud('compaction-queue-b5'),
|
||||
],
|
||||
}
|
||||
}
|
||||
57
web/components/running-tab.js
Normal file
57
web/components/running-tab.js
Normal file
@@ -0,0 +1,57 @@
|
||||
function runningTable(name) {
|
||||
return {
|
||||
type: 'table',
|
||||
title: `${name}`,
|
||||
itemAction: {
|
||||
type: 'button',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: 'Path',
|
||||
body: '${path}',
|
||||
actions: [],
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{name: 'label', label: '名称'},
|
||||
{
|
||||
name: 'createTime',
|
||||
label: '创建时间',
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('createTime', 'createTimeFromNow', undefined, false),
|
||||
align: 'center',
|
||||
width: 70,
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function runningTab() {
|
||||
return {
|
||||
title: '运行中',
|
||||
tab: [
|
||||
{
|
||||
type: 'grid',
|
||||
columns: [
|
||||
{
|
||||
body: [
|
||||
{
|
||||
type: 'service',
|
||||
api: '${base}/running/sync',
|
||||
body: runningTable('同步')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
body: [
|
||||
{
|
||||
type: 'service',
|
||||
api: '${base}/running/compaction',
|
||||
body: runningTable('压缩')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
250
web/components/table-tab.js
Normal file
250
web/components/table-tab.js
Normal file
@@ -0,0 +1,250 @@
|
||||
function tableTab() {
|
||||
return {
|
||||
title: `表任务`,
|
||||
tab: [
|
||||
{
|
||||
id: 'table-service',
|
||||
type: 'service',
|
||||
data: {},
|
||||
body: [
|
||||
{
|
||||
type: 'crud',
|
||||
api: {
|
||||
method: 'get',
|
||||
url: `\${base}/table/list`,
|
||||
data: {
|
||||
page: '${page|default:undefined}',
|
||||
count: '${perPage|default:undefined}',
|
||||
order: '${orderBy|default:undefined}',
|
||||
direction: '${orderDir|default:undefined}',
|
||||
search_flink_job_id: '${flinkJobId|default:undefined}',
|
||||
search_alias: '${alias|default:undefined}',
|
||||
filter_run_mode: '${run_mode|default:undefined}',
|
||||
filter_compaction_status: '${compaction_status|default:undefined}'
|
||||
}
|
||||
},
|
||||
syncLocation: false,
|
||||
// interval: 10000,
|
||||
silentPolling: true,
|
||||
filter: {
|
||||
mode: 'inline',
|
||||
title: '表筛选',
|
||||
body: [
|
||||
{
|
||||
type: 'group',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'flinkJobId',
|
||||
label: 'Flink job id',
|
||||
clearable: true,
|
||||
placeholder: '通过 ID 搜索',
|
||||
size: 'md'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'alias',
|
||||
label: '名称',
|
||||
clearable: true,
|
||||
placeholder: '通过别名搜索',
|
||||
size: 'md'
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
level: "primary",
|
||||
label: "查询",
|
||||
},
|
||||
{
|
||||
type: "reset",
|
||||
label: "重置",
|
||||
},
|
||||
]
|
||||
},
|
||||
filterTogglable: true,
|
||||
filterDefaultVisible: true,
|
||||
stopAutoRefreshWhenModalIsOpen: true,
|
||||
resizable: false,
|
||||
perPage: 20,
|
||||
headerToolbar: [
|
||||
"reload",
|
||||
'filter-toggler',
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
showPageInput: false,
|
||||
},
|
||||
],
|
||||
footerToolbar: [
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
showPageInput: false,
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
label: 'Flink job id',
|
||||
width: 170,
|
||||
fixed: 'left', type: 'wrapper',
|
||||
size: 'none',
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
level: 'link',
|
||||
label: '${flinkJobId}',
|
||||
size: 'xs',
|
||||
actionType: 'dialog',
|
||||
tooltip: '查看详情',
|
||||
dialog: flinkJobDialog(),
|
||||
},
|
||||
{
|
||||
type: 'action',
|
||||
level: 'link',
|
||||
label: '',
|
||||
icon: 'fa fa-copy',
|
||||
size: 'xs',
|
||||
actionType: 'copy',
|
||||
content: '${flinkJobId}',
|
||||
tooltip: '复制 ID',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '别名',
|
||||
type: 'wrapper',
|
||||
fixed: 'left',
|
||||
size: 'none',
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
level: 'link',
|
||||
label: '${tableMeta.alias}',
|
||||
size: 'xs',
|
||||
actionType: 'dialog',
|
||||
tooltip: '查看详情',
|
||||
dialog: tableMetaDialog(),
|
||||
},
|
||||
{
|
||||
type: 'action',
|
||||
level: 'link',
|
||||
label: '',
|
||||
icon: 'fa fa-copy',
|
||||
size: 'xs',
|
||||
actionType: 'copy',
|
||||
content: '${tableMeta.alias}',
|
||||
tooltip: '复制别名',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'run_mode',
|
||||
label: '表类型',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
...mappingField('flinkJob.runMode', runModeMapping),
|
||||
filterable: filterableField(runModeMapping, true)
|
||||
},
|
||||
{
|
||||
name: 'syncRunning',
|
||||
label: '同步运行状态',
|
||||
align: 'center',
|
||||
...mappingField('syncRunning', tableRunningStateMapping),
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_start_time',
|
||||
label: '同步启动时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourceStartTime', 'syncState.sourceStartTimeFromNow', '未启动'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_checkpoint_time',
|
||||
label: '同步心跳时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourceCheckpointTime', 'syncState.sourceCheckpointTimeFromNow', '未启动'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_publish_time',
|
||||
label: '源端发布时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourcePublishTime', 'syncState.sourcePublishTimeFromNow', '无增量'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_operation_time',
|
||||
label: '源端业务时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourceOperationTime', 'syncState.sourceOperationTimeFromNow', '无增量'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'compactionRunning',
|
||||
label: '压缩运行状态',
|
||||
align: 'center',
|
||||
...mappingField('compactionRunning', tableRunningStateMapping),
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
{
|
||||
name: 'compaction_status',
|
||||
label: '压缩状态',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
...mappingField('syncState.compactionStatus', compactionStatusMapping),
|
||||
className: 'bg-cyan-50',
|
||||
/*filterable: {
|
||||
multiple: true,
|
||||
options: [
|
||||
{label: '调度', value: 'SCHEDULE'},
|
||||
{label: '开始', value: 'START'},
|
||||
{label: '完成', value: 'FINISH'},
|
||||
{label: '失败', value: 'FAIL'},
|
||||
]
|
||||
}*/
|
||||
},
|
||||
{
|
||||
name: 'compaction_start_time',
|
||||
label: '压缩启动时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.compactionStartTime', 'syncState.compactionStartTimeFromNow'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
{
|
||||
name: 'compaction_finish_time',
|
||||
label: '压缩完成时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.compactionFinishTime', 'syncState.compactionFinishTimeFromNow'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
236
web/components/yarn-tab.js
Normal file
236
web/components/yarn-tab.js
Normal file
@@ -0,0 +1,236 @@
|
||||
function yarnTab(cluster, title, queueNames = 'default', searchName = undefined) {
|
||||
return {
|
||||
title: `${title} 集群`,
|
||||
tab: [
|
||||
{
|
||||
id: `${cluster}-yarn-service`,
|
||||
name: `${cluster}-yarn-service`,
|
||||
type: 'service',
|
||||
body: [
|
||||
{
|
||||
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,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span class="font-bold text-xl">集群任务</span>',
|
||||
// className: 'mb-2 block',
|
||||
},
|
||||
{
|
||||
type: 'crud',
|
||||
api: {
|
||||
method: 'get',
|
||||
url: '${base}/yarn/job_list',
|
||||
data: {
|
||||
clusters: `${cluster}`,
|
||||
page: '${page|default:undefined}',
|
||||
count: '${perPage|default:undefined}',
|
||||
order: '${orderBy|default:undefined}',
|
||||
direction: '${orderDir|default:undefined}',
|
||||
filter_state: '${state|default:undefined}',
|
||||
filter_final_status: '${finalStatus|default:undefined}',
|
||||
search_id: '${id|default:undefined}',
|
||||
search_name: '${name|default:undefined}',
|
||||
}
|
||||
},
|
||||
defaultParams: {
|
||||
name: searchName
|
||||
},
|
||||
interval: 10000,
|
||||
affixHeader: false,
|
||||
syncLocation: false,
|
||||
silentPolling: true,
|
||||
itemBadge: {
|
||||
text: 'Hudi',
|
||||
mode: 'ribbon',
|
||||
position: 'top-left',
|
||||
level: 'info',
|
||||
visibleOn: 'this.hudiApplication'
|
||||
},
|
||||
filter: {
|
||||
mode: 'inline',
|
||||
title: '任务筛选',
|
||||
body: [
|
||||
{
|
||||
type: 'group',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
clearable: true,
|
||||
placeholder: '通过 ID 搜索',
|
||||
size: 'md'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'name',
|
||||
label: '名称',
|
||||
clearable: true,
|
||||
placeholder: '通过名称搜索',
|
||||
size: 'md'
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
level: "primary",
|
||||
label: "查询",
|
||||
},
|
||||
{
|
||||
type: "reset",
|
||||
label: "重置",
|
||||
},
|
||||
]
|
||||
},
|
||||
filterTogglable: true,
|
||||
filterDefaultVisible: false,
|
||||
stopAutoRefreshWhenModalIsOpen: true,
|
||||
resizable: false,
|
||||
perPage: 20,
|
||||
headerToolbar: [
|
||||
"reload",
|
||||
'filter-toggler',
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "共 <span class='text-primary font-bold'>${total|default:0}</span> 个任务，其中 <span class='text-success font-bold'>${running|default:0}</span> 个任务运行中，<span class='text-danger font-bold'>${unRunning|default:0}</span> 个任务处于非运行状态"
|
||||
},
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
showPageInput: false,
|
||||
}
|
||||
],
|
||||
footerToolbar: [
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
showPageInput: false,
|
||||
}
|
||||
],
|
||||
columns: yarnCrudColumns(),
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user