Browse Source
* update * test * add monitor enhance ui * update * update * update doc * fix spotless * update * update * Update dolphinscheduler-api/src/main/java/org/apache/dolphinscheduler/api/controller/DataAnalysisController.java Co-authored-by: Wenjun Ruan <wenjun@apache.org> * Update dolphinscheduler-api/src/main/java/org/apache/dolphinscheduler/api/controller/DataAnalysisController.java Co-authored-by: Wenjun Ruan <wenjun@apache.org> * Update dolphinscheduler-dao/src/main/java/org/apache/dolphinscheduler/dao/mapper/ErrorCommandMapper.java Co-authored-by: Wenjun Ruan <wenjun@apache.org> * Update dolphinscheduler-dao/src/main/resources/org/apache/dolphinscheduler/dao/mapper/ErrorCommandMapper.xml Co-authored-by: Wenjun Ruan <wenjun@apache.org> * Update dolphinscheduler-dao/src/main/java/org/apache/dolphinscheduler/dao/mapper/CommandMapper.java Co-authored-by: Wenjun Ruan <wenjun@apache.org> * Update dolphinscheduler-dao/src/main/resources/org/apache/dolphinscheduler/dao/mapper/ErrorCommandMapper.xml Co-authored-by: Wenjun Ruan <wenjun@apache.org> * update * fix spotless * update --------- Co-authored-by: Wenjun Ruan <wenjun@apache.org>3.2.2-release-bak
旺阳
6 months ago
committed by
GitHub
49 changed files with 1268 additions and 188 deletions
|
After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 222 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 139 KiB |
@ -0,0 +1,43 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
@mixin base { |
||||||
|
font-size: 5vw; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
min-height: 400px; |
||||||
|
} |
||||||
|
|
||||||
|
.card { |
||||||
|
@include base; |
||||||
|
} |
||||||
|
|
||||||
|
.load-average { |
||||||
|
@include base; |
||||||
|
color: var(--n-color-target); |
||||||
|
} |
||||||
|
|
||||||
|
.link-btn { |
||||||
|
color: var(--n-color-target); |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: var(--n-color-target); |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,189 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, onMounted, ref, toRefs } from 'vue' |
||||||
|
import { NGrid, NGi, NCard, NNumberAnimation, NSpace, NTag } from 'naive-ui' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { useServerNode } from './use-server-node' |
||||||
|
import styles from './index.module.scss' |
||||||
|
import Card from '@/components/card' |
||||||
|
import Result from '@/components/result' |
||||||
|
import Gauge from '@/components/chart/modules/Gauge' |
||||||
|
import NodeModal from './node-modal' |
||||||
|
import type { Ref } from 'vue' |
||||||
|
import type { RowData } from 'naive-ui/es/data-table/src/interface' |
||||||
|
import type { AlertNode } from '@/service/modules/monitor/types' |
||||||
|
import { capitalize } from 'lodash' |
||||||
|
|
||||||
|
const alertServer = defineComponent({ |
||||||
|
name: 'alertServer', |
||||||
|
setup() { |
||||||
|
const showModalRef = ref(false) |
||||||
|
const { t } = useI18n() |
||||||
|
const { variables, getTableData } = useServerNode() |
||||||
|
const zkDirectoryRef: Ref<Array<RowData>> = ref([]) |
||||||
|
|
||||||
|
const clickDetails = (zkDirectories: string) => { |
||||||
|
zkDirectoryRef.value = [{ directory: zkDirectories, index: 1 }] |
||||||
|
showModalRef.value = true |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmModal = () => { |
||||||
|
showModalRef.value = false |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getTableData() |
||||||
|
}) |
||||||
|
|
||||||
|
return { |
||||||
|
t, |
||||||
|
...toRefs(variables), |
||||||
|
clickDetails, |
||||||
|
onConfirmModal, |
||||||
|
showModalRef, |
||||||
|
zkDirectoryRef |
||||||
|
} |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { t, clickDetails, onConfirmModal, showModalRef, zkDirectoryRef } = |
||||||
|
this |
||||||
|
|
||||||
|
const renderNodeServerStatusTag = (item: AlertNode) => { |
||||||
|
const serverStatus = JSON.parse(item.resInfo)?.serverStatus |
||||||
|
|
||||||
|
if (!serverStatus) return '' |
||||||
|
|
||||||
|
return ( |
||||||
|
<NTag type={serverStatus === 'NORMAL' ? 'info' : 'warning'}> |
||||||
|
{capitalize(serverStatus)} |
||||||
|
</NTag> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return this.data.length < 1 ? ( |
||||||
|
<Result |
||||||
|
title={t('monitor.alert_server.alert_server_no_data_result_title')} |
||||||
|
description={t('monitor.alert_server.alert_server_no_data_result_desc')} |
||||||
|
status={'info'} |
||||||
|
size={'medium'} |
||||||
|
/> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<NSpace vertical size={25}> |
||||||
|
{this.data.map((item: AlertNode) => { |
||||||
|
return ( |
||||||
|
<NSpace vertical> |
||||||
|
<NCard> |
||||||
|
<NSpace |
||||||
|
justify='space-between' |
||||||
|
style={{ |
||||||
|
'line-height': '28px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<NSpace> |
||||||
|
{renderNodeServerStatusTag(item)} |
||||||
|
|
||||||
|
<span>{`${t('monitor.master.host')}: ${ |
||||||
|
item ? item.host : ' - ' |
||||||
|
}`}</span>
|
||||||
|
<span |
||||||
|
class={styles['link-btn']} |
||||||
|
onClick={() => clickDetails(item.zkDirectory)} |
||||||
|
> |
||||||
|
{t('monitor.master.directory_detail')} |
||||||
|
</span> |
||||||
|
</NSpace> |
||||||
|
<NSpace> |
||||||
|
<span>{`${t('monitor.master.create_time')}: ${ |
||||||
|
item ? item.createTime : ' - ' |
||||||
|
}`}</span>
|
||||||
|
<span>{`${t('monitor.master.last_heartbeat_time')}: ${ |
||||||
|
item ? item.lastHeartbeatTime : ' - ' |
||||||
|
}`}</span>
|
||||||
|
</NSpace> |
||||||
|
</NSpace> |
||||||
|
</NCard> |
||||||
|
<NGrid x-gap='12' cols='4'> |
||||||
|
<NGi> |
||||||
|
<Card title={t('monitor.master.cpu_usage')}> |
||||||
|
<div class={styles.card}> |
||||||
|
{item && ( |
||||||
|
<Gauge |
||||||
|
data={( |
||||||
|
JSON.parse(item.resInfo).cpuUsage * 100 |
||||||
|
).toFixed(2)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
<NGi> |
||||||
|
<Card title={t('monitor.master.memory_usage')}> |
||||||
|
<div class={styles.card}> |
||||||
|
{item && ( |
||||||
|
<Gauge |
||||||
|
data={( |
||||||
|
JSON.parse(item.resInfo).memoryUsage * 100 |
||||||
|
).toFixed(2)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
<NGi> |
||||||
|
<Card title={t('monitor.master.disk_available')}> |
||||||
|
<div class={[styles.card, styles['load-average']]}> |
||||||
|
{item && ( |
||||||
|
<NNumberAnimation |
||||||
|
precision={2} |
||||||
|
from={0} |
||||||
|
to={JSON.parse(item.resInfo).diskAvailable} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
<NGi> |
||||||
|
<Card title={t('monitor.master.load_average')}> |
||||||
|
<div class={[styles.card, styles['load-average']]}> |
||||||
|
{item && ( |
||||||
|
<NNumberAnimation |
||||||
|
precision={2} |
||||||
|
from={0} |
||||||
|
to={JSON.parse(item.resInfo).loadAverage} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
</NGrid> |
||||||
|
</NSpace> |
||||||
|
) |
||||||
|
})} |
||||||
|
</NSpace> |
||||||
|
<NodeModal |
||||||
|
showModal={showModalRef} |
||||||
|
data={zkDirectoryRef} |
||||||
|
onConfirmModal={onConfirmModal} |
||||||
|
></NodeModal> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export default alertServer |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent } from 'vue' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { NDataTable } from 'naive-ui' |
||||||
|
import Modal from '@/components/modal' |
||||||
|
import type { PropType } from 'vue' |
||||||
|
import type { |
||||||
|
RowData, |
||||||
|
TableColumns |
||||||
|
} from 'naive-ui/es/data-table/src/interface' |
||||||
|
|
||||||
|
const props = { |
||||||
|
showModal: { |
||||||
|
type: Boolean as PropType<boolean>, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
data: { |
||||||
|
type: Array as PropType<Array<RowData>>, |
||||||
|
default: () => [] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const NodeModal = defineComponent({ |
||||||
|
props, |
||||||
|
emits: ['confirmModal'], |
||||||
|
setup(props, ctx) { |
||||||
|
const { t } = useI18n() |
||||||
|
const columnsRef: TableColumns<any> = [ |
||||||
|
{ title: '#', key: 'index', render: (row, index) => index + 1 }, |
||||||
|
{ title: t('monitor.master.directory'), key: 'directory' } |
||||||
|
] |
||||||
|
|
||||||
|
const onConfirm = () => { |
||||||
|
ctx.emit('confirmModal') |
||||||
|
} |
||||||
|
|
||||||
|
return { t, columnsRef, onConfirm } |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { t, columnsRef, onConfirm } = this |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
title={t('monitor.master.directory_detail')} |
||||||
|
show={this.showModal} |
||||||
|
cancelShow={false} |
||||||
|
onConfirm={onConfirm} |
||||||
|
> |
||||||
|
{{ |
||||||
|
default: () => ( |
||||||
|
<NDataTable |
||||||
|
columns={columnsRef} |
||||||
|
data={this.data} |
||||||
|
striped |
||||||
|
size={'small'} |
||||||
|
/> |
||||||
|
) |
||||||
|
}} |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export default NodeModal |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { reactive } from 'vue' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import { listMonitorServerNode } from '@/service/modules/monitor' |
||||||
|
import type { AlertNode } from '@/service/modules/monitor/types' |
||||||
|
|
||||||
|
export function useServerNode() { |
||||||
|
const variables = reactive({ |
||||||
|
data: [] |
||||||
|
}) |
||||||
|
const getTableData = () => { |
||||||
|
const { state } = useAsyncState( |
||||||
|
listMonitorServerNode('ALERT_SERVER').then((res: Array<AlertNode>) => { |
||||||
|
variables.data = res as any |
||||||
|
}), |
||||||
|
[] |
||||||
|
) |
||||||
|
|
||||||
|
return state |
||||||
|
} |
||||||
|
return { variables, getTableData } |
||||||
|
} |
||||||
@ -0,0 +1,233 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { |
||||||
|
defineComponent, |
||||||
|
onMounted, |
||||||
|
toRefs, |
||||||
|
watch, |
||||||
|
reactive, |
||||||
|
ref, |
||||||
|
h |
||||||
|
} from 'vue' |
||||||
|
import { NSpace, NDataTable, NPagination } from 'naive-ui' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import Card from '@/components/card' |
||||||
|
import { |
||||||
|
COLUMN_WIDTH_CONFIG, |
||||||
|
calculateTableWidth, |
||||||
|
DefaultTableWidth |
||||||
|
} from '@/common/column-width-config' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import { queryListCommandPaging } from '@/service/modules/projects-analysis' |
||||||
|
|
||||||
|
const ListCommandTable = defineComponent({ |
||||||
|
name: 'list-command-table', |
||||||
|
setup() { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const variables = reactive({ |
||||||
|
columns: [], |
||||||
|
tableWidth: DefaultTableWidth, |
||||||
|
tableData: [], |
||||||
|
page: ref(1), |
||||||
|
pageSize: ref(10), |
||||||
|
userName: ref(null), |
||||||
|
totalPage: ref(1), |
||||||
|
loadingRef: ref(false) |
||||||
|
}) |
||||||
|
|
||||||
|
const createColumns = (variables: any) => { |
||||||
|
variables.columns = [ |
||||||
|
{ |
||||||
|
title: 'ID', |
||||||
|
key: 'id', |
||||||
|
...COLUMN_WIDTH_CONFIG['index'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Command Type', |
||||||
|
key: 'commandType', |
||||||
|
...COLUMN_WIDTH_CONFIG['userName'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Command Param', |
||||||
|
key: 'commandParam', |
||||||
|
...COLUMN_WIDTH_CONFIG['linkName'] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Task Info', |
||||||
|
key: 'id', |
||||||
|
width: 300, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Definition Code：${row.processDefinitionCode} `, |
||||||
|
h('br'), |
||||||
|
`Definition Version：${row.processDefinitionVersion} `, |
||||||
|
h('br'), |
||||||
|
`Instance Id：${row.processInstanceId} `, |
||||||
|
h('br'), |
||||||
|
`Instance Priority：${row.processInstancePriority} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Task Params', |
||||||
|
key: 'id', |
||||||
|
width: 300, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`DryRun：${row.dryRun} `, |
||||||
|
h('br'), |
||||||
|
`Environment Code：${row.environmentCode} `, |
||||||
|
h('br'), |
||||||
|
`Failure Strategy：${row.failureStrategy} `, |
||||||
|
h('br'), |
||||||
|
`Task Depend Type：${row.taskDependType} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Worker Info', |
||||||
|
key: 'id', |
||||||
|
width: 220, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Worker Group：${row.workerGroup} `, |
||||||
|
h('br'), |
||||||
|
`Tenant Code：${row.tenantCode} `, |
||||||
|
h('br'), |
||||||
|
`Test Flag：${row.testFlag} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Warning Info', |
||||||
|
key: 'id', |
||||||
|
width: 200, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Warning Group Id：${row.warningGroupId} `, |
||||||
|
h('br'), |
||||||
|
`Warning Type：${row.warningType} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Executor Id', |
||||||
|
key: 'executorId', |
||||||
|
...COLUMN_WIDTH_CONFIG['type'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Time', |
||||||
|
key: 'startTime', |
||||||
|
width: 280, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Start Time：${row.startTime} `, |
||||||
|
h('br'), |
||||||
|
`Update Time：${row.updateTime} `, |
||||||
|
h('br'), |
||||||
|
`Schedule Time：${row.scheduleTime} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
if (variables.tableWidth) { |
||||||
|
variables.tableWidth = calculateTableWidth(variables.columns) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getTableData = () => { |
||||||
|
if (variables.loadingRef) return |
||||||
|
variables.loadingRef = true |
||||||
|
const data = { |
||||||
|
pageSize: variables.pageSize, |
||||||
|
pageNo: variables.page |
||||||
|
} |
||||||
|
|
||||||
|
const { state } = useAsyncState( |
||||||
|
queryListCommandPaging(data).then((res: any) => { |
||||||
|
variables.totalPage = res.totalPage |
||||||
|
variables.tableData = res.totalList |
||||||
|
variables.loadingRef = false |
||||||
|
}), |
||||||
|
{} |
||||||
|
) |
||||||
|
|
||||||
|
return state |
||||||
|
} |
||||||
|
|
||||||
|
const onUpdatePageSize = () => { |
||||||
|
variables.page = 1 |
||||||
|
getTableData() |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
createColumns(variables) |
||||||
|
getTableData() |
||||||
|
}) |
||||||
|
|
||||||
|
watch(useI18n().locale, () => { |
||||||
|
createColumns(variables) |
||||||
|
}) |
||||||
|
|
||||||
|
return { |
||||||
|
t, |
||||||
|
...toRefs(variables), |
||||||
|
getTableData, |
||||||
|
onUpdatePageSize |
||||||
|
} |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { getTableData, onUpdatePageSize, loadingRef } = this |
||||||
|
|
||||||
|
return ( |
||||||
|
<NSpace vertical> |
||||||
|
<Card> |
||||||
|
<NSpace vertical> |
||||||
|
<NDataTable |
||||||
|
size={'small'} |
||||||
|
loading={loadingRef} |
||||||
|
columns={this.columns} |
||||||
|
scrollX={this.tableWidth} |
||||||
|
data={this.tableData} |
||||||
|
/> |
||||||
|
<NSpace justify='center'> |
||||||
|
<NPagination |
||||||
|
v-model:page={this.page} |
||||||
|
v-model:page-size={this.pageSize} |
||||||
|
page-count={this.totalPage} |
||||||
|
show-size-picker |
||||||
|
page-sizes={[10, 30, 50]} |
||||||
|
show-quick-jumper |
||||||
|
onUpdatePage={getTableData} |
||||||
|
onUpdatePageSize={onUpdatePageSize} |
||||||
|
/> |
||||||
|
</NSpace> |
||||||
|
</NSpace> |
||||||
|
</Card> |
||||||
|
</NSpace> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export default ListCommandTable |
||||||
@ -0,0 +1,237 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { |
||||||
|
defineComponent, |
||||||
|
onMounted, |
||||||
|
toRefs, |
||||||
|
watch, |
||||||
|
reactive, |
||||||
|
ref, |
||||||
|
h |
||||||
|
} from 'vue' |
||||||
|
import { NSpace, NDataTable, NPagination } from 'naive-ui' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import Card from '@/components/card' |
||||||
|
import { |
||||||
|
COLUMN_WIDTH_CONFIG, |
||||||
|
calculateTableWidth, |
||||||
|
DefaultTableWidth |
||||||
|
} from '@/common/column-width-config' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import { queryListErrorCommandPaging } from '@/service/modules/projects-analysis' |
||||||
|
|
||||||
|
const ListErrorCommandTable = defineComponent({ |
||||||
|
name: 'list-error-command-table', |
||||||
|
setup() { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const variables = reactive({ |
||||||
|
columns: [], |
||||||
|
tableWidth: DefaultTableWidth, |
||||||
|
tableData: [], |
||||||
|
page: ref(1), |
||||||
|
pageSize: ref(10), |
||||||
|
userName: ref(null), |
||||||
|
totalPage: ref(1), |
||||||
|
loadingRef: ref(false) |
||||||
|
}) |
||||||
|
|
||||||
|
const createColumns = (variables: any) => { |
||||||
|
variables.columns = [ |
||||||
|
{ |
||||||
|
title: 'ID', |
||||||
|
key: 'id', |
||||||
|
...COLUMN_WIDTH_CONFIG['index'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Command Type', |
||||||
|
key: 'commandType', |
||||||
|
...COLUMN_WIDTH_CONFIG['userName'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Command Param', |
||||||
|
key: 'commandParam', |
||||||
|
...COLUMN_WIDTH_CONFIG['linkName'] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Task Info', |
||||||
|
key: 'id', |
||||||
|
width: 300, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Definition Code：${row.processDefinitionCode} `, |
||||||
|
h('br'), |
||||||
|
`Definition Version：${row.processDefinitionVersion} `, |
||||||
|
h('br'), |
||||||
|
`Instance Id：${row.processInstanceId} `, |
||||||
|
h('br'), |
||||||
|
`Instance Priority：${row.processInstancePriority} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Task Params', |
||||||
|
key: 'id', |
||||||
|
width: 300, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`DryRun：${row.dryRun} `, |
||||||
|
h('br'), |
||||||
|
`Environment Code：${row.environmentCode} `, |
||||||
|
h('br'), |
||||||
|
`Failure Strategy：${row.failureStrategy} `, |
||||||
|
h('br'), |
||||||
|
`Task Depend Type：${row.taskDependType} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Worker Info', |
||||||
|
key: 'id', |
||||||
|
width: 220, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Worker Group：${row.workerGroup} `, |
||||||
|
h('br'), |
||||||
|
`Tenant Code：${row.tenantCode} `, |
||||||
|
h('br'), |
||||||
|
`Test Flag：${row.testFlag} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
title: 'Warning Info', |
||||||
|
key: 'id', |
||||||
|
width: 200, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Warning Group Id：${row.warningGroupId} `, |
||||||
|
h('br'), |
||||||
|
`Warning Type：${row.warningType} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Message', |
||||||
|
key: 'message', |
||||||
|
...COLUMN_WIDTH_CONFIG['linkName'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Executor Id', |
||||||
|
key: 'executorId', |
||||||
|
...COLUMN_WIDTH_CONFIG['type'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Time', |
||||||
|
key: 'startTime', |
||||||
|
width: 280, |
||||||
|
render: (row: any) => { |
||||||
|
return h('div', [ |
||||||
|
`Start Time：${row.startTime || '-'} `, |
||||||
|
h('br'), |
||||||
|
`Update Time：${row.updateTime || '-'} `, |
||||||
|
h('br'), |
||||||
|
`Schedule Time：${row.scheduleTime || '-'} ` |
||||||
|
]) |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
if (variables.tableWidth) { |
||||||
|
variables.tableWidth = calculateTableWidth(variables.columns) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getTableData = () => { |
||||||
|
if (variables.loadingRef) return |
||||||
|
variables.loadingRef = true |
||||||
|
const data = { |
||||||
|
pageSize: variables.pageSize, |
||||||
|
pageNo: variables.page |
||||||
|
} |
||||||
|
|
||||||
|
const { state } = useAsyncState( |
||||||
|
queryListErrorCommandPaging(data).then((res: any) => { |
||||||
|
variables.totalPage = res.totalPage |
||||||
|
variables.tableData = res.totalList |
||||||
|
variables.loadingRef = false |
||||||
|
}), |
||||||
|
{} |
||||||
|
) |
||||||
|
|
||||||
|
return state |
||||||
|
} |
||||||
|
|
||||||
|
const onUpdatePageSize = () => { |
||||||
|
variables.page = 1 |
||||||
|
getTableData() |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
createColumns(variables) |
||||||
|
getTableData() |
||||||
|
}) |
||||||
|
|
||||||
|
watch(useI18n().locale, () => { |
||||||
|
createColumns(variables) |
||||||
|
}) |
||||||
|
|
||||||
|
return { |
||||||
|
t, |
||||||
|
...toRefs(variables), |
||||||
|
getTableData, |
||||||
|
onUpdatePageSize |
||||||
|
} |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { getTableData, onUpdatePageSize, loadingRef } = this |
||||||
|
|
||||||
|
return ( |
||||||
|
<NSpace vertical> |
||||||
|
<Card> |
||||||
|
<NSpace vertical> |
||||||
|
<NDataTable |
||||||
|
loading={loadingRef} |
||||||
|
columns={this.columns} |
||||||
|
scrollX={this.tableWidth} |
||||||
|
data={this.tableData} |
||||||
|
/> |
||||||
|
<NSpace justify='center'> |
||||||
|
<NPagination |
||||||
|
v-model:page={this.page} |
||||||
|
v-model:page-size={this.pageSize} |
||||||
|
page-count={this.totalPage} |
||||||
|
show-size-picker |
||||||
|
page-sizes={[10, 30, 50]} |
||||||
|
show-quick-jumper |
||||||
|
onUpdatePage={getTableData} |
||||||
|
onUpdatePageSize={onUpdatePageSize} |
||||||
|
/> |
||||||
|
</NSpace> |
||||||
|
</NSpace> |
||||||
|
</Card> |
||||||
|
</NSpace> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export default ListErrorCommandTable |
||||||
Loading…
Reference in new issue