[Fix][UI Next][V1.0.0-Alpha] Fix modified the system language, the chart text is not changed to Chinese as expected. (#8682)

dolphinscheduler-ui-next/package.json

@@ -17,7 +17,7 @@
     "echarts": "^5.3.0",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.31.1",
-    "naive-ui": "2.25.1",
+    "naive-ui": "^2.26.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.11",
     "pinia-plugin-persistedstate": "^1.2.2",

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -88,7 +88,22 @@ const home = {
   process_state_statistics: 'Process State Statistics',
   process_definition_statistics: 'Process Definition Statistics',
   number: 'Number',
-  state: 'State'
+  state: 'State',
+  submitted_success: 'SUBMITTED_SUCCESS',
+  running_execution: 'RUNNING_EXECUTION',
+  ready_pause: 'READY_PAUSE',
+  pause: 'PAUSE',
+  ready_stop: 'READY_STOP',
+  stop: 'STOP',
+  failure: 'FAILURE',
+  success: 'SUCCESS',
+  need_fault_tolerance: 'NEED_FAULT_TOLERANCE',
+  kill: 'KILL',
+  waiting_thread: 'WAITING_THREAD',
+  waiting_depend: 'WAITING_DEPEND',
+  delay_execution: 'DELAY_EXECUTION',
+  forced_success: 'FORCED_SUCCESS',
+  serial_wait: 'SERIAL_WAIT'
 }
 
 const password = {

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -88,7 +88,22 @@ const home = {
   process_state_statistics: '流程状态统计',
   process_definition_statistics: '流程定义统计',
   number: '数量',
-  state: '状态'
+  state: '状态',
+  submitted_success: '提交成功',
+  running_execution: '正在运行',
+  ready_pause: '准备暂停',
+  pause: '暂停',
+  ready_stop: '准备停止',
+  stop: '停止',
+  failure: '失败',
+  success: '成功',
+  need_fault_tolerance: '需要容错',
+  kill: 'KILL',
+  waiting_thread: '等待线程',
+  waiting_depend: '等待依赖完成',
+  delay_execution: '延时执行',
+  forced_success: '强制成功',
+  serial_wait: '串行等待'
 }
 
 const password = {
@@ -525,7 +540,7 @@ const project = {
     failure: '失败',
     success: '成功',
     need_fault_tolerance: '需要容错',
-    kill: '已被杀',
+    kill: 'KILL',
     waiting_thread: '等待线程',
     waiting_depend: '等待依赖完成',
     delay_execution: '延时执行',

dolphinscheduler-ui-next/src/views/home/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref, watch } from 'vue'
 import { NGrid, NGi } from 'naive-ui'
 import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
@@ -27,17 +27,17 @@ import DefinitionCard from './components/definition-card'
 export default defineComponent({
   name: 'home',
   setup() {
-    const { t } = useI18n()
+    const { t, locale } = useI18n()
     const dateRef = ref([getTime(startOfToday()), Date.now()])
-    const { getTaskState } = useTaskState()
-    const { getProcessState } = useProcessState()
     const taskStateRef = ref()
     const processStateRef = ref()
+    const { getTaskState } = useTaskState()
+    const { getProcessState } = useProcessState()
 
-    onMounted(() => {
+    const initData = () => {
       taskStateRef.value = getTaskState(dateRef.value)
       processStateRef.value = getProcessState(dateRef.value)
-    })
+    }
 
     const handleTaskDate = (val: any) => {
       taskStateRef.value = getTaskState(val)
@@ -47,6 +47,15 @@ export default defineComponent({
       processStateRef.value = getProcessState(val)
     }
 
+    onMounted(() => {
+      initData()
+    })
+
+    watch(
+      () => locale.value,
+      () => initData()
+    )
+
     return {
       t,
       dateRef,

dolphinscheduler-ui-next/src/views/home/use-process-state.ts

@@ -18,10 +18,14 @@
 import { useAsyncState } from '@vueuse/core'
 import { countProcessInstanceState } from '@/service/modules/projects-analysis'
 import { format } from 'date-fns'
-import { TaskStateRes } from '@/service/modules/projects-analysis/types'
-import { StateData } from './types'
+import { toLower } from 'lodash'
+import { useI18n } from 'vue-i18n'
+import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
+import type { StateData } from './types'
 
 export function useProcessState() {
+  const { t } = useI18n()
+
   const getProcessState = (date: Array<number>) => {
     const { state } = useAsyncState(
       countProcessInstanceState({
@@ -31,7 +35,7 @@ export function useProcessState() {
       }).then((res: TaskStateRes): StateData => {
         const table = res.taskCountDtos.map((item) => {
           return {
-            state: item.taskStateType,
+            state: t('home.' + toLower(item.taskStateType)),
             number: item.count
           }
         })
@@ -39,7 +43,7 @@ export function useProcessState() {
         const chart = res.taskCountDtos.map((item) => {
           return {
             value: item.count,
-            name: item.taskStateType
+            name: t('home.' + toLower(item.taskStateType))
           }
         })
 

dolphinscheduler-ui-next/src/views/home/use-task-state.ts

@@ -17,11 +17,15 @@
 
 import { useAsyncState } from '@vueuse/core'
 import { format } from 'date-fns'
+import { toLower } from 'lodash'
+import { useI18n } from 'vue-i18n'
 import { countTaskState } from '@/service/modules/projects-analysis'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
 
 export function useTaskState() {
+  const { t } = useI18n()
+
   const getTaskState = (date: Array<any>) => {
     const { state } = useAsyncState(
       countTaskState({
@@ -31,7 +35,7 @@ export function useTaskState() {
       }).then((res: TaskStateRes): StateData => {
         const table = res.taskCountDtos.map((item, unused) => {
           return {
-            state: item.taskStateType,
+            state: t('home.' + toLower(item.taskStateType)),
             number: item.count
           }
         })
@@ -39,7 +43,7 @@ export function useTaskState() {
         const chart = res.taskCountDtos.map((item) => {
           return {
             value: item.count,
-            name: item.taskStateType
+            name: t('home.' + toLower(item.taskStateType))
           }
         })
 

dolphinscheduler-ui-next/src/views/projects/overview/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref, watch } from 'vue'
 import { NGrid, NGi } from 'naive-ui'
 import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
@@ -27,17 +27,12 @@ import DefinitionCard from './components/definition-card'
 const workflowMonitor = defineComponent({
   name: 'workflow-monitor',
   setup() {
-    const { t } = useI18n()
+    const { t, locale } = useI18n()
     const dateRef = ref([getTime(startOfToday()), Date.now()])
-    const { getTaskState } = useTaskState()
-    const { getProcessState } = useProcessState()
     const taskStateRef = ref()
     const processStateRef = ref()
-
-    onMounted(() => {
-      taskStateRef.value = getTaskState(dateRef.value)
-      processStateRef.value = getProcessState(dateRef.value)
-    })
+    const { getTaskState } = useTaskState()
+    const { getProcessState } = useProcessState()
 
     const handleTaskDate = (val: any) => {
       taskStateRef.value = getTaskState(val)
@@ -47,6 +42,20 @@ const workflowMonitor = defineComponent({
       processStateRef.value = getProcessState(val)
     }
 
+    const initData = () => {
+      taskStateRef.value = getTaskState(dateRef.value)
+      processStateRef.value = getProcessState(dateRef.value)
+    }
+
+    onMounted(() => {
+      initData()
+    })
+
+    watch(
+      () => locale.value,
+      () => initData()
+    )
+
     return {
       t,
       dateRef,

dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts

@@ -19,11 +19,14 @@ import { useRoute } from 'vue-router'
 import { useAsyncState } from '@vueuse/core'
 import { countProcessInstanceState } from '@/service/modules/projects-analysis'
 import { format } from 'date-fns'
-import { TaskStateRes } from '@/service/modules/projects-analysis/types'
-import { StateData } from './types'
+import { toLower } from 'lodash'
+import { useI18n } from 'vue-i18n'
+import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
+import type { StateData } from './types'
 
 export function useProcessState() {
   const route = useRoute()
+  const { t } = useI18n()
 
   const getProcessState = (date: Array<number>) => {
     const { state } = useAsyncState(
@@ -34,7 +37,7 @@ export function useProcessState() {
       }).then((res: TaskStateRes): StateData => {
         const table = res.taskCountDtos.map((item, unused) => {
           return {
-            state: item.taskStateType,
+            state: t('home.' + toLower(item.taskStateType)),
             number: item.count
           }
         })
@@ -42,7 +45,7 @@ export function useProcessState() {
         const chart = res.taskCountDtos.map((item) => {
           return {
             value: item.count,
-            name: item.taskStateType
+            name: t('home.' + toLower(item.taskStateType))
           }
         })
 

dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts

@@ -18,12 +18,15 @@
 import { useRoute } from 'vue-router'
 import { useAsyncState } from '@vueuse/core'
 import { format } from 'date-fns'
+import { toLower } from 'lodash'
+import { useI18n } from 'vue-i18n'
 import { countTaskState } from '@/service/modules/projects-analysis'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
 
 export function useTaskState() {
   const route = useRoute()
+  const { t } = useI18n()
 
   const getTaskState = (date: Array<number>) => {
     const { state } = useAsyncState(
@@ -34,7 +37,7 @@ export function useTaskState() {
       }).then((res: TaskStateRes): StateData => {
         const table = res.taskCountDtos.map((item, unused) => {
           return {
-            state: item.taskStateType,
+            state: t('home.' + toLower(item.taskStateType)),
             number: item.count
           }
         })
@@ -42,7 +45,7 @@ export function useTaskState() {
         const chart = res.taskCountDtos.map((item) => {
           return {
             value: item.count,
-            name: item.taskStateType
+            name: t('home.' + toLower(item.taskStateType))
           }
         })
 

dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx

@@ -112,10 +112,8 @@ const AlarmInstanceManage = defineComponent({
               <div class={styles['conditions']}>
                 {IS_ADMIN && (
                   <NButton onClick={onCreate} type='primary'>
-                    {
-                      t('security.alarm_instance.create') +
-                      t('security.alarm_instance.alarm_instance')
-                    }
+                    {t('security.alarm_instance.create') +
+                      t('security.alarm_instance.alarm_instance')}
                   </NButton>
                 )}
                 <NSpace