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

2 years ago · bf0cc6a5e8
11 changed files with 815 additions and 2050 deletions
--- a/dolphinscheduler-ui-next/package.json
+++ b/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",
--- a/dolphinscheduler-ui-next/pnpm-lock.yaml
+++ b/dolphinscheduler-ui-next/pnpm-lock.yaml
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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 = {
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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: '延时执行',
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/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,
--- a/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
+++ b/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))
          }
        })

--- a/dolphinscheduler-ui-next/src/views/home/use-task-state.ts
+++ b/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))
          }
        })

--- a/dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
+++ b/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,
--- a/dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts
+++ b/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))
          }
        })

--- a/dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts
+++ b/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))
          }
        })

--- a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx
+++ b/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