setup()

in dolphinscheduler-ui/src/views/projects/workflow/definition/tree/index.tsx [54:251]

• 180 lines of code
• 7 McCabe index (conditional complexity)

  setup() {
    const router: Router = useRouter()
    const { t, locale } = useI18n()
    const options: Ref<Array<SelectMixedOption>> = ref([
      { label: '25', value: 25 },
      { label: '50', value: 50 },
      { label: '75', value: 75 },
      { label: '100', value: 100 }
    ])

    const projectCode = ref(
      Number(router.currentRoute.value.params.projectCode)
    )
    const definitionCode = ref(
      Number(router.currentRoute.value.params.definitionCode)
    )

    const chartData: Ref<Array<IChartDataItem>> = ref([] as IChartDataItem[])
    const taskStateMap = ref()

    const taskTypeNodeOptions: Ref<Array<ITaskTypeNodeOption>> = ref([
      {
        taskType: 'SHELL',
        color: '#646464',
        image: `${import.meta.env.BASE_URL}images/task-icons/shell.png`
      },
      {
        taskType: 'SUB_WORKFLOW',
        color: '#4295DA',
        image: `${import.meta.env.BASE_URL}images/task-icons/sub_workflow.png`
      },
      {
        taskType: 'PROCEDURE',
        color: '#545CC6',
        image: `${import.meta.env.BASE_URL}images/task-icons/procedure.png`
      },
      {
        taskType: 'SQL',
        color: '#8097A0',
        image: `${import.meta.env.BASE_URL}images/task-icons/sql.png`
      },
      {
        taskType: 'SPARK',
        color: '#a16435',
        image: `${import.meta.env.BASE_URL}images/task-icons/spark.png`
      },
      {
        taskType: 'FLINK',
        color: '#d68f5b',
        image: `${import.meta.env.BASE_URL}images/task-icons/flink.png`
      },
      {
        taskType: 'MR',
        color: '#A1A5C9',
        image: `${import.meta.env.BASE_URL}images/task-icons/mr.png`
      },
      {
        taskType: 'PYTHON',
        color: '#60BCD5',
        image: `${import.meta.env.BASE_URL}images/task-icons/python.png`
      },
      {
        taskType: 'DEPENDENT',
        color: '#60BCD5',
        image: `${import.meta.env.BASE_URL}images/task-icons/dependent.png`
      },
      {
        taskType: 'HTTP',
        color: '#7f3903',
        image: `${import.meta.env.BASE_URL}images/task-icons/http.png`
      },
      {
        taskType: 'DATAX',
        color: '#75CC71',
        image: `${import.meta.env.BASE_URL}images/task-icons/datax.png`
      },
      {
        taskType: 'SQOOP',
        color: '#f98b3d',
        image: `${import.meta.env.BASE_URL}images/task-icons/sqoop.png`
      },
      {
        taskType: 'CONDITIONS',
        color: '#b99376',
        image: `${import.meta.env.BASE_URL}images/task-icons/conditions.png`
      },
      {
        taskType: 'SWITCH',
        color: '#ff6f00',
        image: `${import.meta.env.BASE_URL}images/task-icons/switch.png`
      },
      {
        taskType: 'SEATUNNEL',
        color: '#8c8c8f',
        image: `${import.meta.env.BASE_URL}images/task-icons/seatunnel.png`
      },
      {
        taskType: 'DINKY',
        color: '#d69f5b',
        image: `${import.meta.env.BASE_URL}images/task-icons/dinky.png`
      },
      { taskType: 'DAG', color: '#bbdde9' },
      {
        taskType: 'FLINK_STREAM',
        color: '#d68f5b',
        image: `${import.meta.env.BASE_URL}images/task-icons/flink.png`
      }
    ])

    const showTooltip = ref(false)
    const tooltipText = ref('')
    const tooltipProps = reactive({
      x: 0,
      y: 0
    })

    const changeTooltip = (options: any) => {
      tooltipProps.x = options.x
      tooltipProps.y = options.y - 20
    }

    const initTaskStateMap = () => {
      taskStateMap.value = Object.entries(tasksState(t)).map(([key, item]) => ({
        state: key,
        value: item.desc,
        color: item.color
      }))
    }

    const currentInstance = getCurrentInstance()

    const getWorkflowTreeData = async (limit: number) => {
      if (projectCode.value && definitionCode) {
        Tree.reset()

        const res = await viewTree(projectCode.value, definitionCode.value, {
          limit: limit
        })

        const treeData = cloneDeep(res)
        if (!treeData?.children) return

        const recursiveChildren = (children: any) => {
          if (children.length) {
            map(children, (v) => {
              v.uuid = `${uuid('uuid_')}${uuid('') + uuid('')}`
              if (v.children.length) {
                recursiveChildren(v.children)
              }
            })
          }
        }

        recursiveChildren(treeData.children)

        Tree.init({
          data: cloneDeep(treeData),
          limit: limit,
          selfTree: currentInstance,
          taskTypeNodeOptions: taskTypeNodeOptions.value,
          tasksStateObj: tasksState(t)
        })
      }
    }

    const onSelectChange = (value: number) => {
      if (value) {
        getWorkflowTreeData(value)
      }
    }

    const initData = () => {
      initTaskStateMap()
      getWorkflowTreeData(25)
    }

    onMounted(() => {
      initData()
    })

    watch(
      () => locale.value,
      () => {
        initData()
      }
    )

    return {
      chartData,
      options,
      onSelectChange,
      taskTypeNodeOptions,
      showTooltip,
      tooltipText,
      changeTooltip,
      ...toRefs(tooltipProps)
    }
  },