[Refactor] Terminal output drawer shared component (#2457)

Comfy-Org · Feb 6, 2025 · 78e4161 · 78e4161
1 parent dda9a72
commit 78e4161
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 92 deletions.
diff --git a/src/components/maintenance/TerminalOutputDrawer.vue b/src/components/maintenance/TerminalOutputDrawer.vue
@@ -0,0 +1,61 @@
+<template>
+  <Drawer
+    v-model:visible="terminalVisible"
+    :header
+    position="bottom"
+    style="height: max(50vh, 34rem)"
+  >
+    <BaseTerminal @created="terminalCreated" @unmounted="terminalUnmounted" />
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import { Terminal } from '@xterm/xterm'
+import Drawer from 'primevue/drawer'
+import { Ref, onMounted } from 'vue'
+
+import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
+import { electronAPI } from '@/utils/envUtil'
+
+// Model
+const terminalVisible = defineModel<boolean>({ required: true })
+const props = defineProps<{
+  header: string
+  defaultMessage: string
+}>()
+
+const electron = electronAPI()
+
+/** The actual output of all terminal commands - not rendered */
+const buffer = useTerminalBuffer()
+let xterm: Terminal | null = null
+
+// Created and destroyed with the Drawer - contents copied from hidden buffer
+const terminalCreated = (
+  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  root: Ref<HTMLElement>
+) => {
+  xterm = terminal
+  useAutoSize({ root, autoRows: true, autoCols: true })
+  terminal.write(props.defaultMessage)
+  buffer.copyTo(terminal)
+
+  terminal.options.cursorBlink = false
+  terminal.options.cursorStyle = 'bar'
+  terminal.options.cursorInactiveStyle = 'bar'
+  terminal.options.disableStdin = true
+}
+
+const terminalUnmounted = () => {
+  xterm = null
+}
+
+onMounted(async () => {
+  electron.onLogMessage((message: string) => {
+    buffer.write(message)
+    xterm?.write(message)
+  })
+})
+</script>
diff --git a/src/views/DesktopUpdate.vue b/src/views/DesktopUpdate.vue
@@ -26,34 +26,24 @@
           @click="toggleConsoleDrawer"
         />
 
-        <Drawer
-          v-model:visible="terminalVisible"
+        <TerminalOutputDrawer
+          v-model="terminalVisible"
           :header="t('g.terminal')"
-          position="bottom"
-          style="height: max(50vh, 34rem)"
-        >
-          <BaseTerminal
-            @created="terminalCreated"
-            @unmounted="terminalUnmounted"
-          />
-        </Drawer>
+          :default-message="t('desktopUpdate.terminalDefaultMessage')"
+        />
       </div>
     </div>
     <Toast />
   </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
-import { Terminal } from '@xterm/xterm'
 import Button from 'primevue/button'
-import Drawer from 'primevue/drawer'
 import ProgressSpinner from 'primevue/progressspinner'
 import Toast from 'primevue/toast'
-import { Ref, onMounted, onUnmounted, ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 
-import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
-import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
+import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
 import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
@@ -63,41 +53,10 @@ const electron = electronAPI()
 
 const terminalVisible = ref(false)
 
-/** The actual output of all terminal commands - not rendered */
-const buffer = useTerminalBuffer()
-let xterm: Terminal | null = null
-
-// Created and destroyed with the Drawer - contents copied from hidden buffer
-const terminalCreated = (
-  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
-  root: Ref<HTMLElement>
-) => {
-  xterm = terminal
-  useAutoSize({ root, autoRows: true, autoCols: true })
-  terminal.write(t('desktopUpdate.terminalDefaultMessage'))
-  buffer.copyTo(terminal)
-
-  terminal.options.cursorBlink = false
-  terminal.options.cursorStyle = 'bar'
-  terminal.options.cursorInactiveStyle = 'bar'
-  terminal.options.disableStdin = true
-}
-
-const terminalUnmounted = () => {
-  xterm = null
-}
-
 const toggleConsoleDrawer = () => {
   terminalVisible.value = !terminalVisible.value
 }
 
-onMounted(async () => {
-  electron.onLogMessage((message: string) => {
-    buffer.write(message)
-    xterm?.write(message)
-  })
-})
-
 onUnmounted(() => electron.Validation.dispose())
 </script>
 

diff --git a/src/views/MaintenanceView.vue b/src/views/MaintenanceView.vue
@@ -73,39 +73,29 @@
         </div>
       </div>
 
-      <Drawer
-        v-model:visible="terminalVisible"
+      <TerminalOutputDrawer
+        v-model="terminalVisible"
         :header="t('g.terminal')"
-        position="bottom"
-        style="height: max(50vh, 34rem)"
-      >
-        <BaseTerminal
-          @created="terminalCreated"
-          @unmounted="terminalUnmounted"
-        />
-      </Drawer>
+        :default-message="t('maintenance.terminalDefaultMessage')"
+      />
       <Toast />
     </div>
   </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
-import { Terminal } from '@xterm/xterm'
 import Button from 'primevue/button'
-import Drawer from 'primevue/drawer'
 import SelectButton from 'primevue/selectbutton'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
-import { Ref, computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { watch } from 'vue'
 
-import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
 import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
-import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
+import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
 import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
@@ -147,10 +137,6 @@ const filterOptions = ref([
 /** Filter binding; can be set to show all tasks, or only errors. */
 const filter = ref<MaintenanceFilter>(filterOptions.value[1])
 
-/** The actual output of all terminal commands - not rendered */
-const buffer = useTerminalBuffer()
-let xterm: Terminal | null = null
-
 /** If valid, leave the validation window. */
 const completeValidation = async (alertOnFail = true) => {
   const isValid = await electron.Validation.complete()
@@ -164,26 +150,6 @@ const completeValidation = async (alertOnFail = true) => {
   }
 }
 
-// Created and destroyed with the Drawer - contents copied from hidden buffer
-const terminalCreated = (
-  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
-  root: Ref<HTMLElement>
-) => {
-  xterm = terminal
-  useAutoSize({ root, autoRows: true, autoCols: true })
-  terminal.write(t('maintenance.terminalDefaultMessage'))
-  buffer.copyTo(terminal)
-
-  terminal.options.cursorBlink = false
-  terminal.options.cursorStyle = 'bar'
-  terminal.options.cursorInactiveStyle = 'bar'
-  terminal.options.disableStdin = true
-}
-
-const terminalUnmounted = () => {
-  xterm = null
-}
-
 const toggleConsoleDrawer = () => {
   terminalVisible.value = !terminalVisible.value
 }
@@ -207,11 +173,6 @@ watch(
 onMounted(async () => {
   electron.Validation.onUpdate(processUpdate)
 
-  electron.onLogMessage((message: string) => {
-    buffer.write(message)
-    xterm?.write(message)
-  })
-
   const update = await electron.Validation.getStatus()
   processUpdate(update)
 })