You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by zh...@apache.org on 2022/01/04 03:30:13 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next] Add process state statistics. (#7781)
This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 427ee5e [Feature][UI Next] Add process state statistics. (#7781)
427ee5e is described below
commit 427ee5edafbac43b4ff2c4669c7904f848843e56
Author: songjianet <17...@qq.com>
AuthorDate: Tue Jan 4 11:30:05 2022 +0800
[Feature][UI Next] Add process state statistics. (#7781)
---
.../src/components/chart/modules/Pie.tsx | 3 +-
dolphinscheduler-ui-next/src/views/home/index.tsx | 32 +++++++++++-------
.../src/views/home/use-process-state.ts | 38 ++++++++++++++++++++++
3 files changed, 61 insertions(+), 12 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
index 57d8478..02448d6 100644
--- a/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
+++ b/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
@@ -51,7 +51,8 @@ const PieChart = defineComponent({
series: [
{
type: 'pie',
- radius: ['40%', '70%'],
+ radius: ['35%', '60%'],
+ center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
show: false,
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx b/dolphinscheduler-ui-next/src/views/home/index.tsx
index 23839d9..1e39be3 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@@ -15,19 +15,12 @@
* limitations under the License.
*/
-import {
- defineComponent,
- Ref,
- onMounted,
- ref,
- toRefs,
- reactive,
- isReactive,
-} from 'vue'
+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 './state-card'
import DefinitionCard from './definition-card'
@@ -37,20 +30,34 @@ export default defineComponent({
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)
}
- return { t, dateRef, handleTaskDate, taskStateRef }
+ const handleProcessDate = (val: any) => {
+ processStateRef.value = getProcessState(val)
+ }
+
+ return {
+ t,
+ dateRef,
+ handleTaskDate,
+ handleProcessDate,
+ taskStateRef,
+ processStateRef,
+ }
},
render() {
- const { t, dateRef, handleTaskDate } = this
+ const { t, dateRef, handleTaskDate, handleProcessDate } = this
return (
<div>
@@ -68,6 +75,9 @@ export default defineComponent({
<StateCard
title={t('home.process_state_statistics')}
date={dateRef}
+ tableData={this.processStateRef?.value.table}
+ chartData={this.processStateRef?.value.chart}
+ onUpdateDatePickerValue={handleProcessDate}
/>
</NGi>
</NGrid>
diff --git a/dolphinscheduler-ui-next/src/views/home/use-process-state.ts b/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
index c2e00d8..9243af1 100644
--- a/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
+++ b/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
@@ -16,3 +16,41 @@
*/
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 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: 0,
+ }).then((res: TaskStateRes): StateData => {
+ const table = res.taskCountDtos.map((item, index) => {
+ return {
+ id: 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 }
+}