From f8b9d91eb6985927c4fbb0a401bfd53613813653 Mon Sep 17 00:00:00 2001 From: BilwaST Date: Thu, 17 Oct 2024 22:19:01 +0530 Subject: [PATCH] [Improvement] [Seatunnel-web] Add support to provide reason for job failure: UI change (#231) Signed-off-by: Mohammad Arshad --- .../src/common/column-width-config.ts | 4 +- seatunnel-ui/src/locales/en_US/project.ts | 1 + seatunnel-ui/src/locales/en_US/tasks.ts | 3 +- .../src/service/task-instances/types.ts | 1 + .../error-message-highlight.module.scss | 31 ++++++++++++ .../error-message-highlight.tsx | 49 +++++++++++++++++++ .../synchronization-instance/use-sync-task.ts | 28 ++++++++++- 7 files changed, 113 insertions(+), 4 deletions(-) create mode 100644 seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.module.scss create mode 100644 seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.tsx diff --git a/seatunnel-ui/src/common/column-width-config.ts b/seatunnel-ui/src/common/column-width-config.ts index 4a0efdef3..5c71b96f9 100644 --- a/seatunnel-ui/src/common/column-width-config.ts +++ b/seatunnel-ui/src/common/column-width-config.ts @@ -35,10 +35,10 @@ export const COLUMN_WIDTH_CONFIG = { } }, link_name: { - width: 240 + width: 180 }, state: { - width: 120 + width: 80 }, type: { width: 130 diff --git a/seatunnel-ui/src/locales/en_US/project.ts b/seatunnel-ui/src/locales/en_US/project.ts index 18e6c552d..6327cb0f3 100644 --- a/seatunnel-ui/src/locales/en_US/project.ts +++ b/seatunnel-ui/src/locales/en_US/project.ts @@ -1144,6 +1144,7 @@ export default { cancel: 'Cancel', delete: 'Delete', delete_confirm: 'Delete?', + error_message: 'Error' }, menu: { fav: 'Favorites', diff --git a/seatunnel-ui/src/locales/en_US/tasks.ts b/seatunnel-ui/src/locales/en_US/tasks.ts index ac3b7c996..dc333cd43 100644 --- a/seatunnel-ui/src/locales/en_US/tasks.ts +++ b/seatunnel-ui/src/locales/en_US/tasks.ts @@ -40,5 +40,6 @@ export default { kill: 'Kill', operation: 'Operation', view_log: 'View Log', - log: 'Log' + log: 'Log', + view: 'View', } diff --git a/seatunnel-ui/src/service/task-instances/types.ts b/seatunnel-ui/src/service/task-instances/types.ts index 0328e0019..600172b77 100644 --- a/seatunnel-ui/src/service/task-instances/types.ts +++ b/seatunnel-ui/src/service/task-instances/types.ts @@ -105,6 +105,7 @@ interface TotalList { delayTime: number retryInterval: number endTime: string + errorMessage: string } interface TaskInstancesRes { diff --git a/seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.module.scss b/seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.module.scss new file mode 100644 index 000000000..01760b0c5 --- /dev/null +++ b/seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.module.scss @@ -0,0 +1,31 @@ +/* + * 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. + */ + + .errorMessageContainer { + max-height: 400px; + overflow-y: auto; + white-space: pre-wrap; /* Preserver formatting */ + background-color: #f4f4f4; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + font-family: monospace; + text-align: left; + margin: 0 auto; + width: 1000px; + max-width: 100%; + } \ No newline at end of file diff --git a/seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.tsx b/seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.tsx new file mode 100644 index 000000000..c3c380a8e --- /dev/null +++ b/seatunnel-ui/src/views/task/synchronization-instance/error-message-highlight.tsx @@ -0,0 +1,49 @@ +/* + * 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, PropType, h } from 'vue' +import { NText } from 'naive-ui' +import { isBoolean, isNumber, isPlainObject } from 'lodash' +import styles from './error-message-highlight.module.scss' + +const props = { + params: { + type: String as PropType, + default: '' + } +} + +const ErrorMessageHighlight = defineComponent({ + name: 'ErrorMessageHighlight', + props, + render(props: { params: string }) { + return ( + 
+        {syntaxHighlight(props.params)}
+
+ ) + } +}) + +const syntaxHighlight = (message: string) => { + return h('div', { + class: styles.errorMessageContainer, + innerHTML: message + }); +} + +export default ErrorMessageHighlight diff --git a/seatunnel-ui/src/views/task/synchronization-instance/use-sync-task.ts b/seatunnel-ui/src/views/task/synchronization-instance/use-sync-task.ts index f1488a904..f57c6ba35 100644 --- a/seatunnel-ui/src/views/task/synchronization-instance/use-sync-task.ts +++ b/seatunnel-ui/src/views/task/synchronization-instance/use-sync-task.ts @@ -38,7 +38,7 @@ import { import { useRoute, useRouter } from 'vue-router' import { ITaskState } from '@/common/types' import { tasksState } from '@/common/common' -import { NIcon, NSpin, NTooltip } from 'naive-ui' +import { NButton, NIcon, NPopover, NSpin, NTooltip } from 'naive-ui' import { useMessage } from 'naive-ui' import { querySyncTaskInstancePaging, @@ -53,6 +53,7 @@ import { forcedSuccessByIds } from '@/service/sync-task-instance' import { getRemainTime } from '@/utils/time' +import ErrorMessageHighlight from './error-message-highlight' export function useSyncTask(syncTaskType = 'BATCH') { const { t } = useI18n() @@ -77,6 +78,7 @@ export function useSyncTask(syncTaskType = 'BATCH') { limit: ref(1000), taskName: ref(''), executeUser: ref(''), + errorMessage: ref(''), host: ref(''), stateType: null as null | string, syncTaskType, @@ -144,6 +146,30 @@ export function useSyncTask(syncTaskType = 'BATCH') { key: 'jobStatus', ...COLUMN_WIDTH_CONFIG['state'] }, + { + title: t('project.synchronization_instance.error_message'), + key: 'parameter', + ...COLUMN_WIDTH_CONFIG['state'], + render: (row: any) => { + return row.errorMessage + ? h( + NPopover, + { trigger: 'click' }, + { + trigger: () => + h(NButton, { text: true }, { + default: () => t('tasks.view') + }), + default: () => + h(ErrorMessageHighlight, { + params: + row.errorMessage + }) + } + ) + : '--' + } + }, { title: t('project.synchronization_instance.start_time'), key: 'createTime',