Browse Source

[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
3.0.0/version-upgrade
calvin 3 years ago committed by GitHub
parent
commit
e130b821f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      dolphinscheduler-ui-next/src/components/modal/index.module.scss
  2. 48
      dolphinscheduler-ui-next/src/components/modal/index.tsx
  3. 23
      dolphinscheduler-ui-next/src/components/modal/types.ts
  4. 4
      dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx
  5. 24
      dolphinscheduler-ui-next/src/views/projects/list/index.tsx
  6. 15
      dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
  7. 76
      dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx
  8. 3
      dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
  9. 22
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
  10. 3
      dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
  11. 1
      dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx

4
dolphinscheduler-ui-next/src/components/modal/index.module.scss

@ -21,3 +21,7 @@
.modal-card {
max-height: 100vh;
}
.header-icon {
padding-right: 5px;
}

48
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: () => (

23
dolphinscheduler-ui-next/src/components/modal/types.ts

@ -0,0 +1,23 @@
/*
* 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.
*/
export interface LinkOption {
text: string
show: boolean
action?: Function
icon?: object
}

4
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'>

24
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
export default list

15
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',

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

3
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),

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

3
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)

1
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'

Loading…
Cancel
Save