Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Improvement-16947][UI] Task instance log details should always stay at the bottom #16947

Open
wants to merge 9 commits into
base: dev
Choose a base branch
from
+42 −4
Open

[Improvement-16947][UI] Task instance log details should always stay at the bottom #16947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
47a5837
[Improvement-16947][UI] Task instance log details should always stay …
imizao Jan 7, 2025
7a75c90
[Improvement-16947][UI] Added a button to toggle auto scrolling
imizao Jan 13, 2025
8d2a857
Merge branch 'dev' into imizao-003
SbloodyS Jan 21, 2025
598bdf9
[Improvement-16947][UI] Fixed the NITs
imizao Jan 22, 2025
374ccde
Update dolphinscheduler-ui/src/locales/en_US/project.ts
imizao Jan 22, 2025
3e6553f
Update dolphinscheduler-ui/src/locales/zh_CN/project.ts
imizao Jan 22, 2025
c3748fd
Merge branch 'dev' into imizao-003
SbloodyS Jan 23, 2025
200d6dc
[Improvement-16947][UI] Fixed the NITs
imizao Jan 23, 2025
e6cad12
[Improvement-16947][UI] Move auto-scroll button to the far left
imizao Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 38 additions & 4 deletions dolphinscheduler-ui/src/components/log-modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,20 @@ import {
reactive,
toRefs,
onMounted,
onUnmounted
onUnmounted,
nextTick,
watchEffect
} from 'vue'
import { useI18n } from 'vue-i18n'
import { NIcon, NLog } from 'naive-ui'
import type { LogInst } from 'naive-ui'
import Modal from '../modal'
import {
DownloadOutlined,
FullscreenExitOutlined,
FullscreenOutlined,
SyncOutlined
SyncOutlined,
ProfileOutlined
} from '@vicons/antd'
import screenfull from 'screenfull'

Expand Down Expand Up @@ -67,8 +71,12 @@ export default defineComponent({
const { t } = useI18n()

const variables = reactive({
isFullscreen: false
isFullscreen: false,
autoScrollToBottom: true // New state variable
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we set to autoScrollToBottom to true by default. We should increase batch query log line num to 100000. This can significantly reduce the number of requests and improve the user experience.

dolphinscheduler/dolphinscheduler-ui/src/views/projects/task/instance/batch-task.tsx

Line 128 in 352b47b

variables.limit += 1000

dolphinscheduler/dolphinscheduler-ui/src/views/projects/task/instance/stream-task.tsx

Line 115 in 352b47b

variables.limit = 1000

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestion! In normal cases, a limit of 1000 is sufficient for most scenarios. The GIF I provided was an exceptional example to demonstrate the auto-scroll-to-bottom functionality, but it doesn't reflect the typical usage. Therefore, I believe keeping the limit at 1000 is appropriate for now. If we encounter performance issues or higher demand in the future, we can revisit this setting.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the production environment, 1000 is not enough for automatic refresh. It will cause great performance pressure on both frontend and backend. And we should avoid repeated execution and set a delay for it.

})

const logInstRef = ref<LogInst | null>(null)


const change = () => {
variables.isFullscreen = screenfull.isFullscreen
Expand All @@ -94,13 +102,26 @@ export default defineComponent({
const downloadLogs = () => {
ctx.emit('downloadLogs', props.row)
}

const toggleAutoScroll = () => {
variables.autoScrollToBottom = !variables.autoScrollToBottom
}

// Listen for changes in logRef and scroll to the bottom if autoScrollToBottom is enabled
watchEffect(() => {
if (props.logRef && variables.autoScrollToBottom) {
nextTick(() => {
logInstRef.value?.scrollTo({ position: 'bottom', slient: true })
})
}
})

onMounted(() => {
screenfull.on('change', change)
})

onUnmounted(() => {
screenfull.on('change', change)
screenfull.off('change', change)
})

return {
Expand All @@ -110,6 +131,8 @@ export default defineComponent({
refreshLogs,
downloadLogs,
handleFullScreen,
toggleAutoScroll,
logInstRef,
...toRefs(variables)
}
},
Expand All @@ -121,6 +144,8 @@ export default defineComponent({
downloadLogs,
isFullscreen,
handleFullScreen,
toggleAutoScroll,
autoScrollToBottom,
showDownloadLog
} = this
return (
Expand All @@ -132,6 +157,14 @@ export default defineComponent({
onConfirm={this.confirmModal}
style={{ width: '60%' }}
headerLinks={ref([
{
text: autoScrollToBottom
? t('project.task.disable_log_auto_scroll')
: t('project.task.enable_log_auto_scroll'),
show: true,
action: toggleAutoScroll,
icon: renderIcon(ProfileOutlined)
},
{
text: t('project.workflow.download_log'),
show: showDownloadLog,
Expand All @@ -157,6 +190,7 @@ export default defineComponent({
])}
>
<NLog
ref="logInstRef"
rows={30}
log={this.logRef}
loading={this.logLoadingRef}
Expand Down
2 changes: 2 additions & 0 deletions dolphinscheduler-ui/src/locales/en_US/project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,8 @@ export default {
operating_environment: 'Operating Environment',
cancel_full_screen: 'Cancel full screen',
enter_full_screen: 'Enter full screen',
enter_log_auto_scroll: 'Enable log auto scroll',
cancel_log_auto_scroll: 'Disable log auto scroll',
current_task_settings: 'Current task settings',
online: 'Online',
offline: 'Offline',
Expand Down
2 changes: 2 additions & 0 deletions dolphinscheduler-ui/src/locales/zh_CN/project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,8 @@ export default {
operating_environment: '运行环境',
cancel_full_screen: '取消全屏',
enter_full_screen: '全屏',
enter_log_auto_scroll: '启动日志自动刷新',
cancel_log_auto_scroll: '取消日志自动刷新',
current_task_settings: '当前任务设置',
online: '已上线',
offline: '已下线',
Expand Down
Loading