Browse Source

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

3.0.0/version-upgrade
songjianet 3 years ago committed by GitHub
parent
commit
651f4ad2c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
  2. 10
      dolphinscheduler-ui-next/src/router/modules/projects.ts
  3. 2
      dolphinscheduler-ui-next/src/views/home/components/definition-card.tsx
  4. 4
      dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
  5. 4
      dolphinscheduler-ui-next/src/views/home/index.tsx
  6. 2
      dolphinscheduler-ui-next/src/views/login/index.tsx
  7. 4
      dolphinscheduler-ui-next/src/views/profile/components/info.tsx
  8. 2
      dolphinscheduler-ui-next/src/views/profile/index.tsx
  9. 2
      dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
  10. 24
      dolphinscheduler-ui-next/src/views/project/list/components/table-action.tsx
  11. 2
      dolphinscheduler-ui-next/src/views/project/list/index.tsx
  12. 8
      dolphinscheduler-ui-next/src/views/project/list/use-table.ts
  13. 59
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/definition-card.tsx
  14. 90
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/state-card.tsx
  15. 94
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx
  16. 39
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts
  17. 43
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-definition.ts
  18. 59
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-state.ts
  19. 33
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts
  20. 59
      dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-task-state.ts

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

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

10
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 modules = import.meta.glob('/src/views/**/**.tsx')
const components: { [key: string]: Component } = utils.mapping(modules) const components: { [key: string]: Component } = utils.mapping(modules)
console.log('components', components)
console.log(components)
export default { export default {
path: '/projects', path: '/projects',
name: '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: { meta: {
title: '工作流监控', title: '工作流监控',
}, },

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

@ -16,7 +16,7 @@
*/ */
import { defineComponent, PropType } from 'vue' 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 BarChart from '@/components/chart/modules/Bar'
import Card from '@/components/card' import Card from '@/components/card'

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

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

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

@ -21,8 +21,8 @@ import { startOfToday, getTime } from 'date-fns'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useTaskState } from './use-task-state' import { useTaskState } from './use-task-state'
import { useProcessState } from './use-process-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({ export default defineComponent({
name: 'home', name: 'home',

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

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

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

@ -16,8 +16,8 @@
*/ */
import { defineComponent } from 'vue' 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({ const Info = defineComponent({
name: 'Info', name: 'Info',

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

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

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

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

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

@ -85,30 +85,6 @@ const TableAction = defineComponent({
), ),
}} }}
</NTooltip> </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'}> <NTooltip trigger={'hover'}>
{{ {{
default: () => t('project.list.delete'), default: () => t('project.list.delete'),

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

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

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

59
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

90
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

94
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

39
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 }

43
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 }
}

59
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 }
}

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

59
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 }
}
Loading…
Cancel
Save