refactor(web): 更换client代码的目录
This commit is contained in:
v-zhangjc9
256
service-web/client/src/pages/Table.tsx
Normal file
256
service-web/client/src/pages/Table.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
import {
|
||||
aliasTextInput,
|
||||
amisRender,
|
||||
commonInfo,
|
||||
compactionStatusMapping,
|
||||
crudCommonOptions,
|
||||
filterableField,
|
||||
flinkJobDialog,
|
||||
flinkJobIdTextInput,
|
||||
hudiTableTypeMapping,
|
||||
mappingField,
|
||||
paginationCommonOptions,
|
||||
runModeMapping,
|
||||
tableMetaDialog,
|
||||
tableRunningStateMapping,
|
||||
timeAndFrom,
|
||||
} from '../util/amis.ts'
|
||||
|
||||
function Table() {
|
||||
return (
|
||||
<div className="hudi-table bg-white">
|
||||
{amisRender(
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'none',
|
||||
body: [
|
||||
{
|
||||
id: 'table-service',
|
||||
type: 'service',
|
||||
data: {},
|
||||
body: [
|
||||
{
|
||||
type: 'crud',
|
||||
api: {
|
||||
method: 'get',
|
||||
url: `${commonInfo.baseUrl}/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_hudi_table_type: '${tableMeta\\.hudi\\.targetTableType|default:undefined}',
|
||||
filter_run_mode: '${flinkJob\\.runMode|default:undefined}',
|
||||
filter_compaction_status: '${syncState\\.compactionStatus|default:undefined}',
|
||||
},
|
||||
},
|
||||
...crudCommonOptions(),
|
||||
// interval: 10000,
|
||||
filter: {
|
||||
title: '表筛选',
|
||||
body: [
|
||||
{
|
||||
type: 'group',
|
||||
body: [
|
||||
{
|
||||
...flinkJobIdTextInput('58d0da94-1b3c-4234-948d-482ae3425e70'),
|
||||
size: 'lg',
|
||||
},
|
||||
{
|
||||
...aliasTextInput('58d0da94-1b3c-4234-948d-482ae3425e70'),
|
||||
size: 'lg',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
type: 'submit',
|
||||
level: 'primary',
|
||||
label: '查询',
|
||||
},
|
||||
{
|
||||
type: 'reset',
|
||||
label: '重置',
|
||||
},
|
||||
],
|
||||
},
|
||||
filterTogglable: true,
|
||||
filterDefaultVisible: true,
|
||||
perPage: 20,
|
||||
headerToolbar: [
|
||||
'reload',
|
||||
'filter-toggler',
|
||||
paginationCommonOptions(),
|
||||
],
|
||||
footerToolbar: [
|
||||
paginationCommonOptions(),
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
label: 'Flink job id',
|
||||
width: 195,
|
||||
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',
|
||||
className: 'nowrap',
|
||||
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: 'tableMeta.hudi.targetTableType',
|
||||
label: '表类型',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
...mappingField('tableMeta.hudi.targetTableType', hudiTableTypeMapping),
|
||||
filterable: filterableField(hudiTableTypeMapping, true),
|
||||
},
|
||||
{
|
||||
name: 'flinkJob.runMode',
|
||||
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',
|
||||
width: 75,
|
||||
},
|
||||
{
|
||||
name: 'source_start_time',
|
||||
label: '同步启动时间',
|
||||
...timeAndFrom('syncState.sourceStartTime', 'syncState.sourceStartTimeFromNow', '未启动'),
|
||||
sortable: true,
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_receive_time',
|
||||
label: '同步接收时间',
|
||||
...timeAndFrom('syncState.sourceReceiveTime', 'syncState.sourceReceiveTimeFromNow', '无数据'),
|
||||
sortable: true,
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_checkpoint_time',
|
||||
label: '同步心跳时间',
|
||||
...timeAndFrom('syncState.sourceCheckpointTime', 'syncState.sourceCheckpointTimeFromNow', '未启动'),
|
||||
sortable: true,
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_publish_time',
|
||||
label: '源端发布时间',
|
||||
...timeAndFrom('syncState.sourcePublishTime', 'syncState.sourcePublishTimeFromNow', '无增量'),
|
||||
sortable: true,
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_operation_time',
|
||||
label: '源端业务时间',
|
||||
...timeAndFrom('syncState.sourceOperationTime', 'syncState.sourceOperationTimeFromNow', '无增量'),
|
||||
sortable: true,
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'compactionRunning',
|
||||
label: '压缩运行状态',
|
||||
align: 'center',
|
||||
...mappingField('compactionRunning', tableRunningStateMapping),
|
||||
className: 'bg-cyan-50',
|
||||
width: 75,
|
||||
},
|
||||
{
|
||||
name: 'syncState.compactionStatus',
|
||||
label: '压缩状态',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
...mappingField('syncState.compactionStatus', compactionStatusMapping),
|
||||
filterable: filterableField(compactionStatusMapping, true),
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
{
|
||||
name: 'compaction_start_time',
|
||||
label: '压缩启动时间',
|
||||
...timeAndFrom('syncState.compactionStartTime', 'syncState.compactionStartTimeFromNow'),
|
||||
sortable: true,
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
{
|
||||
name: 'compaction_latest_operation_time',
|
||||
label: '压缩业务时间',
|
||||
...timeAndFrom('syncState.compactionLatestOperationTime', 'syncState.compactionLatestOperationTimeFromNow', '无'),
|
||||
sortable: true,
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
{
|
||||
name: 'compaction_finish_time',
|
||||
label: '压缩完成时间',
|
||||
...timeAndFrom('syncState.compactionFinishTime', 'syncState.compactionFinishTimeFromNow'),
|
||||
sortable: true,
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Table
|
||||
Reference in New Issue
Block a user