This is an automated email from the ASF dual-hosted git repository.
songjian 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 e130b82 [Fix-8625][UI-Next][V1.0.0-Alpha] Worked out this issue with
missing buttons of viewing log and history. (#8754)
e130b82 is described below
commit e130b821f42f61ddd0fa4ad0a30d2308ddba85f9
Author: calvin <[email protected]>
AuthorDate: Tue Mar 8 17:52:13 2022 +0800
[Fix-8625][UI-Next][V1.0.0-Alpha] Worked out this issue with missing
buttons of viewing log and history. (#8754)
* fix this issue
* merge from dev
---
.../src/components/modal/index.module.scss | 4 ++
.../src/components/modal/index.tsx | 48 +++++++-------
.../modal/{index.module.scss => types.ts} | 10 +--
.../projects/list/components/project-modal.tsx | 4 +-
.../src/views/projects/list/index.tsx | 24 +++++--
.../src/views/projects/list/use-table.ts | 15 ++++-
.../projects/task/components/node/detail-modal.tsx | 76 +++++++++++++++-------
.../src/views/projects/task/instance/use-table.ts | 3 +-
.../projects/workflow/components/dag/index.tsx | 22 +++++++
.../workflow/definition/timing/use-table.ts | 3 +-
.../projects/workflow/instance/detail/index.tsx | 1 -
11 files changed, 144 insertions(+), 66 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/modal/index.module.scss
b/dolphinscheduler-ui-next/src/components/modal/index.module.scss
index a47563d..6391570 100644
--- a/dolphinscheduler-ui-next/src/components/modal/index.module.scss
+++ b/dolphinscheduler-ui-next/src/components/modal/index.module.scss
@@ -21,3 +21,7 @@
.modal-card {
max-height: 100vh;
}
+
+.header-icon {
+ padding-right: 5px;
+}
diff --git a/dolphinscheduler-ui-next/src/components/modal/index.tsx
b/dolphinscheduler-ui-next/src/components/modal/index.tsx
index 1910d39..9ad83f2 100644
--- a/dolphinscheduler-ui-next/src/components/modal/index.tsx
+++ b/dolphinscheduler-ui-next/src/components/modal/index.tsx
@@ -15,10 +15,11 @@
* limitations under the License.
*/
-import { defineComponent, PropType, renderSlot } from 'vue'
-import { NModal, NCard, NButton, NSpace } from 'naive-ui'
+import { defineComponent, h, PropType, renderSlot, Ref } from 'vue'
+import { NModal, NCard, NButton, NSpace, NIcon } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import styles from './index.module.scss'
+import { LinkOption } from '@/components/modal/types'
const props = {
show: {
@@ -59,11 +60,9 @@ const props = {
type: Boolean as PropType<boolean>,
default: true
},
- linkEventShow: {
- type: Boolean as PropType<boolean>
- },
- linkEventText: {
- type: String as PropType<string>
+ headerLinks: {
+ type: Object as PropType<Ref<Array<LinkOption>>>,
+ default: [] as LinkOption[]
}
}
@@ -82,22 +81,11 @@ const Modal = defineComponent({
ctx.emit('confirm')
}
- const onJumpLink = () => {
- ctx.emit('jumpLink')
- }
-
- return { t, onCancel, onConfirm, onJumpLink }
+ return { t, onCancel, onConfirm }
},
render() {
- const {
- $slots,
- t,
- onCancel,
- onConfirm,
- confirmDisabled,
- confirmLoading,
- onJumpLink
- } = this
+ const { $slots, t, onCancel, onConfirm, confirmDisabled, confirmLoading } =
+ this
return (
<NModal
@@ -115,11 +103,19 @@ const Modal = defineComponent({
default: () => renderSlot($slots, 'default'),
'header-extra': () => (
<NSpace justify='end'>
- {this.linkEventShow && (
- <NButton text onClick={onJumpLink}>
- {this.linkEventText}
- </NButton>
- )}
+ {this.headerLinks.value &&
+ this.headerLinks.value
+ .filter((item: any) => item.show)
+ .map((item: any) => {
+ return (
+ <NButton text onClick={item.action}>
+ {{
+ default: () => item.text,
+ icon: () => item.icon()
+ }}
+ </NButton>
+ )
+ })}
</NSpace>
),
footer: () => (
diff --git a/dolphinscheduler-ui-next/src/components/modal/index.module.scss
b/dolphinscheduler-ui-next/src/components/modal/types.ts
similarity index 89%
copy from dolphinscheduler-ui-next/src/components/modal/index.module.scss
copy to dolphinscheduler-ui-next/src/components/modal/types.ts
index a47563d..59f856f 100644
--- a/dolphinscheduler-ui-next/src/components/modal/index.module.scss
+++ b/dolphinscheduler-ui-next/src/components/modal/types.ts
@@ -15,9 +15,9 @@
* limitations under the License.
*/
-.container {
- width: 600px;
-}
-.modal-card {
- max-height: 100vh;
+export interface LinkOption {
+ text: string
+ show: boolean
+ action?: Function
+ icon?: object
}
diff --git
a/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx
b/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx
index f5b98c0..904e8a9 100644
---
a/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx
+++
b/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx
@@ -89,9 +89,7 @@ const ProjectModal = defineComponent({
show={this.showModalRef}
onConfirm={this.confirmModal}
onCancel={this.cancelModal}
- confirmDisabled={
- !this.model.projectName || !this.model.userName
- }
+ confirmDisabled={!this.model.projectName || !this.model.userName}
>
<NForm rules={this.rules} ref='projectFormRef'>
<NFormItem label={t('project.list.project_name')} path='projectName'>
diff --git a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
index f6b0156..054978d 100644
--- a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
@@ -15,10 +15,17 @@
* limitations under the License.
*/
-
import Card from '@/components/card'
import { SearchOutlined } from '@vicons/antd'
-import { NButton, NCard, NDataTable, NIcon, NInput, NPagination, NSpace } from
'naive-ui'
+import {
+ NButton,
+ NCard,
+ NDataTable,
+ NIcon,
+ NInput,
+ NPagination,
+ NSpace
+} from 'naive-ui'
import { defineComponent, onMounted, ref, toRefs, reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import ProjectModal from './components/project-modal'
@@ -72,7 +79,16 @@ const list = defineComponent({
createColumns(variables)
})
- return { t, ...toRefs(variables), requestData, handleModalChange,
handleSearch, onCancelModal, onConfirmModal, handleChangePageSize }
+ return {
+ t,
+ ...toRefs(variables),
+ requestData,
+ handleModalChange,
+ handleSearch,
+ onCancelModal,
+ onConfirmModal,
+ handleChangePageSize
+ }
},
render() {
const { t } = this
@@ -137,4 +153,4 @@ const list = defineComponent({
}
})
-export default list
\ No newline at end of file
+export default list
diff --git a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
index 28fb489..d414a13 100644
--- a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
@@ -24,7 +24,14 @@ import { deleteProject } from '@/service/modules/projects'
import { format } from 'date-fns'
import { useRouter } from 'vue-router'
import { useMenuStore } from '@/store/menu/menu'
-import { NButton, NEllipsis, NIcon, NPopconfirm, NSpace, NTooltip } from
'naive-ui'
+import {
+ NButton,
+ NEllipsis,
+ NIcon,
+ NPopconfirm,
+ NSpace,
+ NTooltip
+} from 'naive-ui'
import type { Router } from 'vue-router'
import type { ProjectRes } from '@/service/modules/projects/types'
import { DeleteOutlined, EditOutlined } from '@vicons/antd'
@@ -55,7 +62,11 @@ export function useTable() {
const createColumns = (variables: any) => {
variables.columns = [
- { title: '#', key: 'index', render: (row: any, index: number) => index +
1 },
+ {
+ title: '#',
+ key: 'index',
+ render: (row: any, index: number) => index + 1
+ },
{
title: t('project.list.project_name'),
key: 'name',
diff --git
a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx
b/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx
index cfc4286..004a6ca 100644
---
a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx
+++
b/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx
@@ -24,14 +24,17 @@ import {
nextTick,
provide,
computed,
- onMounted
+ h
} from 'vue'
import { useI18n } from 'vue-i18n'
-import { omit } from 'lodash'
import Modal from '@/components/modal'
import Detail from './detail'
import { formatModel } from './format-data'
import type { ITaskData, ITaskType } from './types'
+import { HistoryOutlined, ProfileOutlined } from '@vicons/antd'
+import { NIcon } from 'naive-ui'
+import { Router, useRouter } from 'vue-router'
+import { IWorkflowTaskInstance } from
'@/views/projects/workflow/components/dag/types'
const props = {
show: {
@@ -53,22 +56,26 @@ const props = {
from: {
type: Number as PropType<number>,
default: 0
+ },
+ processInstance: {
+ type: Object as PropType<any>
+ },
+ taskInstance: {
+ type: Object as PropType<IWorkflowTaskInstance>
}
}
const NodeDetailModal = defineComponent({
name: 'NodeDetailModal',
props,
- emits: ['cancel', 'submit'],
+ emits: ['cancel', 'submit', 'viewLog'],
setup(props, { emit }) {
const { t } = useI18n()
+ const router: Router = useRouter()
+ const renderIcon = (icon: any) => {
+ return () => h(NIcon, null, { default: () => h(icon) })
+ }
const detailRef = ref()
- const state = reactive({
- saving: false,
- linkEventShowRef: ref(),
- linkEventTextRef: ref(),
- linkUrlRef: ref()
- })
const onConfirm = async () => {
await detailRef.value.value.validate()
@@ -78,14 +85,36 @@ const NodeDetailModal = defineComponent({
emit('cancel')
}
- const onJumpLink = () => {
- // TODO: onJumpLink
+ const headerLinks = ref([] as any)
+
+ const handleViewLog = () => {
+ if (props.taskInstance) {
+ emit('viewLog', props.taskInstance.id, props.taskInstance.taskType)
+ }
}
- const getLinkEventText = (status: boolean, text: string, url: 'string') =>
{
- state.linkEventShowRef = status
- state.linkEventTextRef = text
- state.linkUrlRef = url
+ const initHeaderLinks = (processInstance: any) => {
+ headerLinks.value = [
+ {
+ text: t('project.node.view_history'),
+ show: true,
+ action: () => {
+ router.push({
+ name: 'task-instance',
+ params: { processInstanceId: processInstance.id }
+ })
+ },
+ icon: renderIcon(HistoryOutlined)
+ },
+ {
+ text: t('project.node.view_log'),
+ show: props.taskInstance ? true : false,
+ action: () => {
+ handleViewLog()
+ },
+ icon: renderIcon(ProfileOutlined)
+ }
+ ]
}
const onTaskTypeChange = (taskType: ITaskType) => {
@@ -103,12 +132,15 @@ const NodeDetailModal = defineComponent({
)
watch(
- () => [props.show, props.data],
- async () => {
- if (!props.show) return
- await nextTick()
- detailRef.value.value.setValues(formatModel(props.data))
+ () => [props.show, props.data],
+ async () => {
+ if (!props.show) return
+ if (props.processInstance) {
+ initHeaderLinks(props.processInstance)
}
+ await nextTick()
+ detailRef.value.value.setValues(formatModel(props.data))
+ }
)
return () => (
@@ -119,9 +151,7 @@ const NodeDetailModal = defineComponent({
confirmLoading={false}
confirmDisabled={props.readonly}
onCancel={onCancel}
- linkEventShow={state.linkEventShowRef}
- linkEventText={state.linkEventTextRef}
- onJumpLink={onJumpLink}
+ headerLinks={headerLinks}
>
<Detail
ref={detailRef}
diff --git
a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
index 927cd87..5481244 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
@@ -38,6 +38,7 @@ export function useTable() {
const { t } = useI18n()
const route = useRoute()
const projectCode = Number(route.params.projectCode)
+ const processInstanceId = Number(route.params.processInstanceId)
const variables = reactive({
columns: [],
@@ -45,7 +46,7 @@ export function useTable() {
page: ref(1),
pageSize: ref(10),
searchVal: ref(null),
- processInstanceId: ref(null),
+ processInstanceId: ref(processInstanceId ? processInstanceId : null),
host: ref(null),
stateType: ref(null),
datePickerRange: ref(null),
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
index 2c70619..76a25c1 100644
---
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
@@ -154,6 +154,20 @@ export default defineComponent({
}
})
+ const currentTaskInstance = ref()
+
+ watch(
+ () => taskModalVisible.value,
+ () => {
+ if (props.instance && taskModalVisible.value) {
+ const taskCode = currTask.value.code
+ currentTaskInstance.value = taskList.value.find(
+ (task: any) => task.taskCode === taskCode
+ )
+ }
+ }
+ )
+
const statusTimerRef = ref()
const { taskList, refreshTaskStatus } = useNodeStatus({ graph })
@@ -209,6 +223,11 @@ export default defineComponent({
saveModelToggle(false)
}
+ const handleViewLog = (taskId: number, taskType: string) => {
+ taskModalVisible.value = false
+ viewLog(taskId, taskType)
+ }
+
watch(
() => props.definition,
() => {
@@ -264,6 +283,9 @@ export default defineComponent({
readonly={props.readonly}
show={taskModalVisible.value}
projectCode={props.projectCode}
+ processInstance={props.instance}
+ taskInstance={currentTaskInstance.value}
+ onViewLog={handleViewLog}
data={currTask.value as any}
onSubmit={taskConfirm}
onCancel={taskCancel}
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
index 9df9e86..6761547 100644
---
a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
@@ -152,7 +152,8 @@ export function useTable() {
NButton,
{
circle: true,
- type: row.releaseState === 'ONLINE' ? 'error' :
'warning',
+ type:
+ row.releaseState === 'ONLINE' ? 'error' : 'warning',
size: 'small',
onClick: () => {
handleReleaseState(row)
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
index bbf19ba..d2c15d3 100644
---
a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
@@ -19,7 +19,6 @@ import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useThemeStore } from '@/store/theme/theme'
import Dag from '../../components/dag'
-// import { queryProcessDefinitionByCode } from
'@/service/modules/process-definition'
import { queryProcessInstanceById } from '@/service/modules/process-instances'
import { WorkflowDefinition } from '../../components/dag/types'
import Styles from './index.module.scss'
