feat: enhance NodeLog and BottomPanel components with new methods and…

packages/business/src/components/logs/NodeLog.vue

@@ -836,6 +836,13 @@ onUnmounted(() => {
     overflowObserver.disconnect()
   }
 })
+
+defineExpose({
+  changeItem,
+  changePickerTime(val: number[]) {
+    timeSelect.value?.changeTime?.(val)
+  },
+})
 </script>
 
 <template>

packages/business/src/components/milestone/List.vue

@@ -195,7 +195,9 @@ const wholeItems = computed(() => {
     const begin = dayjs(item.begin).format('HH:mm:ss')
     const end = item.end ? dayjs(item.end).format('HH:mm:ss') : ''
 
-    switch (item?.status) {
+    const status =
+      el.key === 'SNAPSHOT' && item?.status === 'SKIP' ? 'FINISH' : item?.status
+    switch (status) {
       case 'FINISH':
         Object.assign(el, finishOpt)
         switch (el.key) {
@@ -267,7 +269,7 @@ const wholeItems = computed(() => {
       el.dataDesc = ''
     }
 
-    if (item.status === 'ERROR') {
+    if (status === 'ERROR') {
       el.errorMessage = item.errorMessage
       el.errorCode = item.errorCode
       el.stackMessage = item.stackMessage

packages/component/src/TimeSelect.vue

@@ -167,7 +167,7 @@ function getPeriod(value?: string) {
   return items.value.find((item) => item.value === (value || period.value))
 }
 
-defineExpose({ setPeriod, getPeriod, openPicker })
+defineExpose({ setPeriod, getPeriod, openPicker, changeTime })
 </script>
 
 <template>

packages/dag/src/Canvas.vue

@@ -129,6 +129,11 @@ function observeBottomBar() {
 const rightPanelRef =
   useTemplateRef<InstanceType<typeof RightPanel>>('rightPanel')
 const rightPanelWidth = ref(0)
+
+const rightPanelExpanded = computed(() => {
+  return dataflowStore.selectedNode || dataflowStore.showSettings
+})
+
 let rightPanelResizeObserver: ResizeObserver | null = null
 
 function observeRightPanel() {
@@ -143,10 +148,6 @@ function observeRightPanel() {
   rightPanelResizeObserver.observe(el)
 }
 
-const rightPanelExpanded = computed(() => {
-  return dataflowStore.selectedNode || dataflowStore.showSettings
-})
-
 const { layout, fitViewWithOffset } = useLayout({
   nodesPanelExpanded,
   nodesPanelWidth: leftPanelWidth,
@@ -280,11 +281,11 @@ onUnmounted(() => {
 const bottomBarStyle = computed(() => {
   const left =
     leftPanelWidth.value > 0
-      ? `${leftPanelWidth.value + 20}px`
+      ? `${leftPanelWidth.value + PANEL_MARGIN * 2}px`
       : `${PANEL_MARGIN}px`
   const right =
-    rightPanelWidth.value > 0
-      ? `${rightPanelWidth.value + 20}px`
+    rightPanelWidth.value > 0 && rightPanelExpanded.value
+      ? `${rightPanelWidth.value + PANEL_MARGIN}px`
       : `${PANEL_MARGIN}px`
   return { left, right }
 })

packages/dag/src/RecordView.vue

@@ -140,7 +140,7 @@ provide('isSaving', isSaving)
           :log-totals="logTotals"
           :task-record="taskRecord"
           :quota="quota"
-          class="tabs-header__hidden"
+          :tabs="['milestone', 'log']"
           @open-inspect="handleOpenInspect"
           @start="handleStart(false, false)"
         />

packages/dag/src/components/elements/CanvasNode.vue

@@ -123,7 +123,7 @@ const canBeTarget = computed(() => {
           :node="props.data"
           class="canvas-node-handle z-1"
         />
-        <NodeToolbar :node="props.data" />
+        <NodeToolbar v-if="!dataflowStore.stateIsReadonly" :node="props.data" />
         <div
           v-if="props.data.attrs.desc"
           class="text-preline text-break px-3 pb-2 pt-1 text-xs font-color-light"

packages/dag/src/components/monitor/BottomPanel.vue

@@ -4,7 +4,7 @@ import NodeLog from '@tap/business/src/components/logs/NodeLog'
 import MilestoneList from '@tap/business/src/components/milestone/List'
 import RelationList from '@tap/business/src/views/task/relation/List.vue'
 import vResize from '@tap/component/src/directives/resize'
-import { computed, nextTick, onMounted, ref, useAttrs } from 'vue'
+import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useDataflowStore } from '../../stores/dataflow.store'
 import Alert from './components/Alert'
@@ -18,11 +18,33 @@ defineOptions({
   // directives: { resize, focusSelect },
 })
 
+type BottomPanelTab =
+  | 'milestone'
+  | 'log'
+  | 'record'
+  | 'alert'
+  | 'relation'
+  | 'inspect'
+  | 'skipErrorTable'
+
+const defaultTabs: BottomPanelTab[] = [
+  'milestone',
+  'log',
+  'record',
+  'alert',
+  'relation',
+  'inspect',
+  'skipErrorTable',
+]
+
 const props = defineProps<{
   onlyLog?: boolean
   hideLog?: boolean
+  tabs?: BottomPanelTab[]
 }>()
 
+const tabs = computed(() => props.tabs ?? defaultTabs)
+
 const emit = defineEmits<{
   action: [any]
   'load-data': []
@@ -46,11 +68,42 @@ const showAlert = computed(() => {
   return !['SharedCacheMonitor'].includes(route.name as string)
 })
 
+const hasSkipErrorTable = computed(() => {
+  return (
+    attrs.dataflow?.skipErrorEvent?.errorMode === 'SkipTableForMigrateSnapshot'
+  )
+})
+
+const enabledTabs = computed(() => new Set(tabs.value))
+const visibleTabs = computed(() => {
+  return defaultTabs.filter((tab) => {
+    if (!enabledTabs.value.has(tab)) return false
+    if (tab === 'log') return !props.hideLog
+    if (tab === 'alert') return showAlert.value
+    if (tab === 'relation') return !!relationCount.value
+    if (tab === 'inspect') return isDaas && !isCommunity
+    if (tab === 'skipErrorTable') return hasSkipErrorTable.value
+    return true
+  })
+})
+
+function hasTab(tab: BottomPanelTab) {
+  return visibleTabs.value.includes(tab)
+}
+
+function setCurrentTab(tab: string) {
+  if (visibleTabs.value.includes(tab as BottomPanelTab)) {
+    currentTab.value = tab
+    return
+  }
+
+  currentTab.value = visibleTabs.value[0] || tab
+}
+
 onMounted(() => {
-  if (['MigrationMonitorViewer'].includes(route.name as string)) {
-    currentTab.value = 'log'
+  if (route.name === 'MigrationMonitorViewer') {
     const { start, end } = route.query
-    changeTab(currentTab.value, {
+    changeTab('log', {
       start: Number(start),
       end: Number(end),
     })
@@ -63,24 +116,26 @@ function getLogRef() {
 }
 
 function changeAlertTab(tab: string) {
-  currentTab.value = tab
+  setCurrentTab(tab)
 }
 
 function changeTab(tab: string, data: any) {
-  currentTab.value = tab
+  setCurrentTab(tab)
   nextTick(() => {
-    if (tab === 'log') {
-      data.nodeId && getLogRef()?.changeItem(data.nodeId)
+    if (currentTab.value === 'log') {
+      data.nodeId && logRef.value?.changeItem(data.nodeId)
       const t = new Date(data.start).getTime()
       const len = 10 * 1000
       const start = t - len
       const end = data.end ? data.end + len : t + len
-      data.start && getLogRef()?.$refs.timeSelect.changeTime([start, end])
+      data.start && logRef.value?.changePickerTime([start, end])
     }
   })
 }
 
 function getRelationData() {
+  if (!tabs.value.includes('relation')) return
+
   const { id, syncType } = attrs.dataflow || {}
   const { taskRecordId } = route.query || {}
   const filter: any = {
@@ -95,6 +150,10 @@ function getRelationData() {
   })
 }
 
+watch(visibleTabs, () => {
+  setCurrentTab(currentTab.value)
+})
+
 defineExpose({
   changeTab,
   changeAlertTab,
@@ -120,10 +179,13 @@ defineExpose({
       <ElTabs
         key="bottomPanel"
         v-model="currentTab"
+        :default-value="
+          $route.name === 'MigrationMonitorViewer' ? 'log' : defaultTabs[0]
+        "
         style="--el-tabs-padding-left: 1rem; --el-tabs-header-height: 44px"
         class="setting-tabs h-100 flex-1 flex w-100 monitor-bottom-tabs"
       >
-        <ElTabPane name="milestone">
+        <ElTabPane v-if="hasTab('milestone')" name="milestone">
           <template #label>
             <span>
               {{ $t('packages_dag_monitor_bottompanel_renwujindu') }}
@@ -137,7 +199,7 @@ defineExpose({
             :current-tab="currentTab"
           />
         </ElTabPane>
-        <ElTabPane v-if="!hideLog" name="log" class="monitor-log-pane">
+        <ElTabPane v-if="hasTab('log')" name="log" class="monitor-log-pane">
           <template #label>
             <span>
               {{ $t('public_task_log') }}
@@ -152,7 +214,7 @@ defineExpose({
             @action="emit('action', $event)"
           />
         </ElTabPane>
-        <ElTabPane name="record">
+        <ElTabPane v-if="hasTab('record')" name="record">
           <template #label>
             <span>
               {{ $t('packages_dag_monitor_bottompanel_yunxingjilu') }}
@@ -164,7 +226,7 @@ defineExpose({
             :current-tab="currentTab"
           />
         </ElTabPane>
-        <ElTabPane v-if="showAlert" name="alert">
+        <ElTabPane v-if="hasTab('alert')" name="alert">
           <template #label>
             <span>
               {{ $t('packages_dag_monitor_bottompanel_gaojingliebiao') }}
@@ -178,7 +240,7 @@ defineExpose({
             @load-data="emit('load-data')"
           />
         </ElTabPane>
-        <ElTabPane v-if="relationCount" name="relation">
+        <ElTabPane v-if="hasTab('relation')" name="relation">
           <template #label>
             <span>
               {{ $t('packages_dag_monitor_bottompanel_guanlianrenwu') }}
@@ -192,7 +254,7 @@ defineExpose({
             @load-data="emit('load-data')"
           />
         </ElTabPane>
-        <ElTabPane v-if="isDaas && !isCommunity" name="inspect">
+        <ElTabPane v-if="hasTab('inspect')" name="inspect">
           <template #label>
             <span>
               {{ $t('public_validation_record') }}
@@ -207,12 +269,7 @@ defineExpose({
           />
         </ElTabPane>
         <SkipErrorTable
-          v-if="
-            $attrs.dataflow &&
-            $attrs.dataflow.skipErrorEvent &&
-            $attrs.dataflow.skipErrorEvent.errorMode ===
-              'SkipTableForMigrateSnapshot'
-          "
+          v-if="hasTab('skipErrorTable')"
           name="skipErrorTable"
           :current-tab="currentTab"
           v-bind="$attrs"