[Improvement] [Seatunnel-web] Add support to provide reason for job f…

…ailure: UI change (#231)

Signed-off-by: Mohammad Arshad <[email protected]>

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

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',

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',
 }

seatunnel-ui/src/service/task-instances/types.ts

@@ -105,6 +105,7 @@ interface TotalList {
   delayTime: number
   retryInterval: number
   endTime: string
+  errorMessage: string
 }
 
 interface TaskInstancesRes {

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%;
+ }

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<string>,
+    default: ''
+  }
+}
+
+const ErrorMessageHighlight = defineComponent({
+  name: 'ErrorMessageHighlight',
+  props,
+  render(props: { params: string }) {
+    return (
+      <pre class={styles['json-highlight']}>
+        {syntaxHighlight(props.params)}
+      </pre>
+    )
+  }
+})
+
+const syntaxHighlight = (message: string) => {
+   return h('div', {
+       class: styles.errorMessageContainer,
+       innerHTML: message
+   });
+}
+
+export default ErrorMessageHighlight

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',