[Feature][UI Next] Add project workflow monitor. (#7991)

dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts

@@ -81,7 +81,7 @@ export function useDataList() {
       },
       {
         label: t('menu.project'),
-        key: 'project',
+        key: 'projects',
         icon: renderIcon(ProfileOutlined),
         isShowSide: false,
         children: [

dolphinscheduler-ui-next/src/router/modules/projects.ts

@@ -22,6 +22,10 @@ import utils from '@/utils'
 const modules = import.meta.glob('/src/views/**/**.tsx')
 const components: { [key: string]: Component } = utils.mapping(modules)
 
+console.log('components', components)
+
+console.log(components)
+
 export default {
   path: '/projects',
   name: 'projects',
@@ -38,9 +42,9 @@ export default {
       },
     },
     {
-      path: '/projects/:projectCode/index',
+      path: '/projects/:projectCode/workflow-monitor',
-      name: 'projects-index',
+      name: 'workflow-monitor',
-      component: components['home'],
+      component: components['workflow-monitor'],
       meta: {
         title: '工作流监控',
       },

dolphinscheduler-ui-next/src/views/home/components/definition-card.tsx

@@ -16,7 +16,7 @@
  */
 
 import { defineComponent, PropType } from 'vue'
-import { useProcessDefinition } from './use-process-definition'
+import { useProcessDefinition } from '../use-process-definition'
 import BarChart from '@/components/chart/modules/Bar'
 import Card from '@/components/card'
 

dolphinscheduler-ui-next/src/views/home/components/state-card.tsx

@@ -16,11 +16,11 @@
  */
 
 import { defineComponent, PropType } from 'vue'
-import { useTable } from './use-table'
+import { useTable } from '../use-table'
 import { NDataTable, NDatePicker, NGrid, NGi } from 'naive-ui'
 import PieChart from '@/components/chart/modules/Pie'
 import Card from '@/components/card'
-import type { StateTableData, StateChartData } from './types'
+import type { StateTableData, StateChartData } from '../types'
 
 const props = {
   title: {

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

@@ -21,8 +21,8 @@ import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
 import { useTaskState } from './use-task-state'
 import { useProcessState } from './use-process-state'
-import StateCard from './state-card'
+import StateCard from './components/state-card'
-import DefinitionCard from './definition-card'
+import DefinitionCard from './components/definition-card'
 
 export default defineComponent({
   name: 'home',

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

@@ -22,7 +22,7 @@ import { useForm } from './use-form'
 import { useTranslate } from './use-translate'
 import { useLogin } from './use-login'
 import { useLocalesStore } from '@/store/locales/locales'
-import { useThemeStore } from "@/store/theme/theme";
+import { useThemeStore } from '@/store/theme/theme'
 
 const login = defineComponent({
   name: 'login',

dolphinscheduler-ui-next/src/views/profile/components/info.tsx

@@ -16,8 +16,8 @@
  */
 
 import { defineComponent } from 'vue'
-import { useProfile } from './use-profile'
+import { useProfile } from '../use-profile'
-import styles from './info.module.scss'
+import styles from '../info.module.scss'
 
 const Info = defineComponent({
   name: 'Info',

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

@@ -29,7 +29,7 @@ import { useUserinfo } from './use-userinfo'
 import { useUpdate } from './use-update'
 import Card from '@/components/card'
 import Modal from '@/components/modal'
-import Info from './info'
+import Info from './components/info'
 import utils from '@/utils'
 
 const profile = defineComponent({

dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx

@@ -17,7 +17,7 @@
 
 import { defineComponent, PropType, toRefs, onMounted } from 'vue'
 import { NForm, NFormItem, NInput } from 'naive-ui'
-import { useForm } from './use-form'
+import { useForm } from '../use-form'
 import Modal from '@/components/modal'
 import { createProject, updateProject } from '@/service/modules/projects'
 

dolphinscheduler-ui-next/src/views/project/list/components/table-action.tsx

@@ -85,30 +85,6 @@ const TableAction = defineComponent({
             ),
           }}
         </NTooltip>
-        <NTooltip trigger={'hover'}>
-          {{
-            default: () => t('project.list.edit'),
-            trigger: () => (
-              <NButton
-                size='small'
-                type='info'
-                tag='div'
-                onClick={() =>
-                  handleEditProject(
-                    this.row.code,
-                    this.row.name,
-                    this.row.description
-                  )
-                }
-                circle
-              >
-                <NIcon>
-                  <EditOutlined />
-                </NIcon>
-              </NButton>
-            ),
-          }}
-        </NTooltip>
         <NTooltip trigger={'hover'}>
           {{
             default: () => t('project.list.delete'),

dolphinscheduler-ui-next/src/views/project/list/index.tsx

@@ -29,7 +29,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import styles from './index.module.scss'
 import Card from '@/components/card'
-import ProjectModal from './project-modal'
+import ProjectModal from './components/project-modal'
 
 const list = defineComponent({
   name: 'list',

dolphinscheduler-ui-next/src/views/project/list/use-table.ts

@@ -20,8 +20,10 @@ import { useI18n } from 'vue-i18n'
 import { useAsyncState } from '@vueuse/core'
 import { queryProjectListPaging } from '@/service/modules/projects'
 import { format } from 'date-fns'
-import TableAction from './table-action'
+import { useRouter } from 'vue-router'
+import TableAction from './components/table-action'
 import styles from './index.module.scss'
+import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import type { ProjectRes } from '@/service/modules/projects/types'
 
@@ -34,6 +36,7 @@ export function useTable(
   resetTableData = () => {}
 ) {
   const { t } = useI18n()
+  const router: Router = useRouter()
 
   const columns: TableColumns<any> = [
     { title: '#', key: 'index' },
@@ -45,7 +48,8 @@ export function useTable(
           'a',
           {
             class: styles.links,
-            onClick: () => {},
+            onClick: () =>
+              router.push({ path: `/projects/${row.code}/workflow-monitor` }),
           },
           {
             default: () => {

dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/definition-card.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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 } from 'vue'
+import { useProcessDefinition } from '../use-process-definition'
+import BarChart from '@/components/chart/modules/Bar'
+import Card from '@/components/card'
+
+const props = {
+  title: {
+    type: String as PropType<string>,
+  },
+}
+
+const DefinitionCard = defineComponent({
+  name: 'DefinitionCard',
+  props,
+  setup() {
+    const { getProcessDefinition } = useProcessDefinition()
+    const processDefinition = getProcessDefinition()
+
+    return { processDefinition }
+  },
+  render() {
+    const { title, processDefinition } = this
+
+    return (
+      processDefinition.xAxisData.length > 0 &&
+      processDefinition.seriesData.length > 0 && (
+        <Card title={title}>
+          {{
+            default: () => (
+              <BarChart
+                xAxisData={processDefinition.xAxisData}
+                seriesData={processDefinition.seriesData}
+              />
+            ),
+          }}
+        </Card>
+      )
+    )
+  },
+})
+
+export default DefinitionCard

dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/state-card.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 } from 'vue'
+import { useTable } from '../use-table'
+import { NDataTable, NDatePicker, NGrid, NGi } from 'naive-ui'
+import PieChart from '@/components/chart/modules/Pie'
+import Card from '@/components/card'
+import type { StateTableData, StateChartData } from '../types'
+
+const props = {
+  title: {
+    type: String as PropType<string>,
+  },
+  date: {
+    type: Array as PropType<Array<any>>,
+  },
+  tableData: {
+    type: Array as PropType<Array<StateTableData>>,
+    default: () => [],
+  },
+  chartData: {
+    type: Array as PropType<Array<StateChartData>>,
+    default: () => [],
+  },
+}
+
+const StateCard = defineComponent({
+  name: 'StateCard',
+  props,
+  emits: ['updateDatePickerValue'],
+  setup(props, ctx) {
+    const onUpdateDatePickerValue = (val: any) => {
+      ctx.emit('updateDatePickerValue', val)
+    }
+
+    return { onUpdateDatePickerValue }
+  },
+  render() {
+    const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
+    const { columnsRef } = useTable()
+
+    return (
+      <Card title={title}>
+        {{
+          default: () => (
+            <NGrid x-gap={12} cols={2}>
+              <NGi>{chartData.length > 0 && <PieChart data={chartData} />}</NGi>
+              <NGi>
+                {tableData && (
+                  <NDataTable
+                    columns={columnsRef}
+                    data={tableData}
+                    striped
+                    size={'small'}
+                  />
+                )}
+              </NGi>
+            </NGrid>
+          ),
+          'header-extra': () => (
+            <NDatePicker
+              default-value={date}
+              onUpdateValue={onUpdateDatePickerValue}
+              size='small'
+              type='datetimerange'
+              clearable
+            />
+          ),
+        }}
+      </Card>
+    )
+  },
+})
+
+export default StateCard

dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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, onMounted, ref } from 'vue'
+import { NGrid, NGi } from 'naive-ui'
+import { startOfToday, getTime } from 'date-fns'
+import { useI18n } from 'vue-i18n'
+import { useTaskState } from './use-task-state'
+import { useProcessState } from './use-process-state'
+import StateCard from './components/state-card'
+import DefinitionCard from './components/definition-card'
+
+const workflowMonitor = defineComponent({
+  name: 'workflow-monitor',
+  setup() {
+    const { t } = useI18n()
+    const dateRef = ref([getTime(startOfToday()), Date.now()])
+    const { getTaskState } = useTaskState()
+    const { getProcessState } = useProcessState()
+    let taskStateRef = ref()
+    let processStateRef = ref()
+
+    onMounted(() => {
+      taskStateRef.value = getTaskState(dateRef.value)
+      processStateRef.value = getProcessState(dateRef.value)
+    })
+
+    const handleTaskDate = (val: any) => {
+      taskStateRef.value = getTaskState(val)
+    }
+
+    const handleProcessDate = (val: any) => {
+      processStateRef.value = getProcessState(val)
+    }
+
+    return {
+      t,
+      dateRef,
+      handleTaskDate,
+      handleProcessDate,
+      taskStateRef,
+      processStateRef,
+    }
+  },
+  render() {
+    const { t, dateRef, handleTaskDate, handleProcessDate } = this
+
+    return (
+      <div>
+        <NGrid x-gap={12} cols={2}>
+          <NGi>
+            <StateCard
+              title={t('home.task_state_statistics')}
+              date={dateRef}
+              tableData={this.taskStateRef?.value.table}
+              chartData={this.taskStateRef?.value.chart}
+              onUpdateDatePickerValue={handleTaskDate}
+            />
+          </NGi>
+          <NGi>
+            <StateCard
+              title={t('home.process_state_statistics')}
+              date={dateRef}
+              tableData={this.processStateRef?.value.table}
+              chartData={this.processStateRef?.value.chart}
+              onUpdateDatePickerValue={handleProcessDate}
+            />
+          </NGi>
+        </NGrid>
+        <NGrid cols={1} style='margin-top: 12px;'>
+          <NGi>
+            <DefinitionCard title={t('home.process_definition_statistics')} />
+          </NGi>
+        </NGrid>
+      </div>
+    )
+  },
+})
+
+export default workflowMonitor

dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+interface DefinitionChartData {
+  xAxisData: Array<string>
+  seriesData: Array<number>
+}
+
+interface StateTableData {
+  index: number
+  number: number
+  state: string
+}
+
+interface StateChartData {
+  value: number
+  name: string
+}
+
+interface StateData {
+  table: Array<StateTableData>
+  chart: Array<StateChartData>
+}
+
+export { DefinitionChartData, StateTableData, StateChartData, StateData }

dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-definition.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { useRoute } from 'vue-router'
+import { useAsyncState } from '@vueuse/core'
+import { countDefinitionByUser } from '@/service/modules/projects-analysis'
+import type { ProcessDefinitionRes } from '@/service/modules/projects-analysis/types'
+import type { DefinitionChartData } from './types'
+
+export function useProcessDefinition() {
+  const route = useRoute()
+
+  const getProcessDefinition = () => {
+    const { state } = useAsyncState(
+      countDefinitionByUser({
+        projectCode: Number(route.params.projectCode),
+      }).then((res: ProcessDefinitionRes): DefinitionChartData => {
+        const xAxisData = res.userList.map((item) => item.userName)
+        const seriesData = res.userList.map((item) => item.count)
+
+        return { xAxisData, seriesData }
+      }),
+      { xAxisData: [], seriesData: [] }
+    )
+    return state
+  }
+
+  return { getProcessDefinition }
+}

dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-state.ts

@@ -0,0 +1,59 @@
+/*
+ * 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 { 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'
+
+export function useProcessState() {
+  const route = useRoute()
+
+  const getProcessState = (date: Array<number>) => {
+    const { state } = useAsyncState(
+      countProcessInstanceState({
+        startDate: format(date[0], 'yyyy-MM-dd HH:mm:ss'),
+        endDate: format(date[1], 'yyyy-MM-dd HH:mm:ss'),
+        projectCode: Number(route.params.projectCode),
+      }).then((res: TaskStateRes): StateData => {
+        const table = res.taskCountDtos.map((item, index) => {
+          return {
+            index: index + 1,
+            state: item.taskStateType,
+            number: item.count,
+          }
+        })
+
+        const chart = res.taskCountDtos.map((item) => {
+          return {
+            value: item.count,
+            name: item.taskStateType,
+          }
+        })
+
+        return { table, chart }
+      }),
+      { table: [], chart: [] }
+    )
+
+    return state
+  }
+
+  return { getProcessState }
+}

dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { useI18n } from 'vue-i18n'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
+
+export function useTable() {
+  const { t } = useI18n()
+
+  const columnsRef: TableColumns<any> = [
+    { title: '#', key: 'index' },
+    { title: t('home.number'), key: 'number' },
+    { title: t('home.state'), key: 'state' },
+  ]
+
+  return {
+    columnsRef,
+  }
+}

dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-task-state.ts

@@ -0,0 +1,59 @@
+/*
+ * 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 { useRoute } from 'vue-router'
+import { useAsyncState } from '@vueuse/core'
+import { format } from 'date-fns'
+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 getTaskState = (date: Array<number>) => {
+    const { state } = useAsyncState(
+      countTaskState({
+        startDate: format(date[0], 'yyyy-MM-dd HH:mm:ss'),
+        endDate: format(date[1], 'yyyy-MM-dd HH:mm:ss'),
+        projectCode: Number(route.params.projectCode),
+      }).then((res: TaskStateRes): StateData => {
+        const table = res.taskCountDtos.map((item, index) => {
+          return {
+            index: index + 1,
+            state: item.taskStateType,
+            number: item.count,
+          }
+        })
+
+        const chart = res.taskCountDtos.map((item) => {
+          return {
+            value: item.count,
+            name: item.taskStateType,
+          }
+        })
+
+        return { table, chart }
+      }),
+      { table: [], chart: [] }
+    )
+
+    return state
+  }
+
+  return { getTaskState }
+}