From 8d7175875ac996c53b84fd4a419a9df0c437fc3a Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 18 Apr 2025 14:59:13 +0200
Subject: [PATCH] Port webterminal to composition api and do not clear backlog
 on reconnect

---
 dashboard/src/components/Terminal.vue | 515 +++++++++++++-------------
 1 file changed, 262 insertions(+), 253 deletions(-)

diff --git a/dashboard/src/components/Terminal.vue b/dashboard/src/components/Terminal.vue
index 17cc69bca..0f115f0fa 100644
--- a/dashboard/src/components/Terminal.vue
+++ b/dashboard/src/components/Terminal.vue
@@ -1,5 +1,10 @@
-<script>
+<script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, useTemplateRef, onMounted } from 'vue';
 import { fetcher, Button, ButtonGroup, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
 import '@xterm/xterm/css/xterm.css';
 import { Terminal } from '@xterm/xterm';
@@ -9,268 +14,272 @@ import { API_ORIGIN, ISTATES, RSTATES, HSTATES } from '../constants.js';
 import AppsModel from '../models/AppsModel.js';
 import { createDirectoryModel } from '../models/DirectoryModel.js';
 
-export default {
-  name: 'Terminal',
-  components: {
-    Button,
-    ButtonGroup,
-    Dialog,
-    FileUploader,
-    InputDialog,
-    MainLayout,
-    TopBar
-  },
-  data() {
-    return {
-      accessToken: localStorage.token,
-      appsModel: null,
-      directoryModel: null,
-      fatalError: false,
-      busyRestart: false,
-      connected: false,
-      addons: {},
-      showFilemanager: false,
-      schedulerTasks: [],
-      manifestVersion: '',
-      schedulerMenuModel: [],
-      id: '',
-      name: '',
-      link: '',
-      socket: null,
-      terminal: null,
-      downloadFileDownloadUrl: ''
-    };
-  },
-  methods: {
-    onFatalError(errorMessage) {
-      this.fatalError = errorMessage;
-      this.$refs.fatalErrorDialog.open();
-    },
-    // generic dialog focus handler TODO move to pankow and reuse in filemanger
-    onDialogShow(focusElementId) {
-      setTimeout(() => document.getElementById(focusElementId).focus(), 0);
-    },
-    async onDownload() {
-      this.downloadFileDownloadUrl = '';
+let directoryModel = null;
+const appsModel = AppsModel.create();
+const accessToken = localStorage.token;
+let socket = null;
+let terminal = null;
 
-      const downloadFileName = await this.$refs.inputDialog.prompt({
-        message: this.$t('terminal.downloadAction'),
-        value: '',
-        confirmStyle: 'success',
-        confirmLabel: this.$t('terminal.download.download'),
-        rejectLabel: this.$t('main.dialog.cancel'),
-        modal: false
-      });
+const fatalError = ref(false);
+const busyRestart = ref(false);
+const connected = ref(false);
+const addons = ref({});
+const showFilemanager = ref(false);
+const manifestVersion = ref('');
+const schedulerMenuModel = ref([]);
+const id = ref('');
+const name = ref('');
+const link = ref('');
+const downloadFileDownloadUrl = ref('');
 
-      if (!downloadFileName) return;
+const fatalErrorDialog = useTemplateRef('fatalErrorDialog');
+const inputDialog = useTemplateRef('inputDialog');
+const fileUploader = useTemplateRef('fileUploader');
+const schedulerMenu = useTemplateRef('schedulerMenu');
 
-      try {
-        await fetcher.head(`${API_ORIGIN}/api/v1/apps/${this.id}/download`, {
-          file: downloadFileName,
-          access_token: this.accessToken
-        });
-      } catch (error) {
-        if (error.status === 404) console.error('The requested file does not exist.');
-        else console.error('Failed', error);
+function onFatalError(errorMessage) {
+  fatalError.value = errorMessage;
+  fatalErrorDialog.value.open();
+}
 
-        return;
-      }
+async function onDownload() {
+  downloadFileDownloadUrl.value = '';
 
-      this.downloadFileDownloadUrl = `${API_ORIGIN}/api/v1/apps/${this.id}/download?file=${encodeURIComponent(downloadFileName)}&access_token=${this.accessToken}`;
+  const downloadFileName = await inputDialog.value.prompt({
+    message: t('terminal.downloadAction'),
+    value: '',
+    confirmStyle: 'success',
+    confirmLabel: t('terminal.download.download'),
+    rejectLabel: t('main.dialog.cancel'),
+    modal: false
+  });
 
-      // we have to click the link to make the browser do the download
-      // don't know how to prevent the browsers
-      this.$nextTick(() => {
-        document.getElementById('fileDownloadLink').click();
-      });
-    },
-    onUpload() {
-      this.$refs.fileUploader.onUploadFile('/');
-    },
-    async uploadHandler(targetDir, file, progressHandler) {
-      await this.directoryModel.upload(targetDir, file, progressHandler);
-    },
-    usesAddon(addon) {
-      return !!Object.keys(this.addons).find(function (a) { return a === addon; });
-    },
-    terminalInject(addon, command) {
-      if (!this.socket) return;
+  if (!downloadFileName) return;
 
-      let cmd = '';
-      if (addon === 'mysql') {
-        if (this.manifestVersion === 1) {
-          cmd = 'mysql --user=${MYSQL_USERNAME} --password=${MYSQL_PASSWORD} --host=${MYSQL_HOST} ${MYSQL_DATABASE}';
-        } else {
-          cmd = 'mysql --user=${CLOUDRON_MYSQL_USERNAME} --password=${CLOUDRON_MYSQL_PASSWORD} --host=${CLOUDRON_MYSQL_HOST} ${CLOUDRON_MYSQL_DATABASE}';
-        }
-      } else if (addon === 'postgresql') {
-      if (this.manifestVersion === 1) {
-          cmd = 'PGPASSWORD=${POSTGRESQL_PASSWORD} psql -h ${POSTGRESQL_HOST} -p ${POSTGRESQL_PORT} -U ${POSTGRESQL_USERNAME} -d ${POSTGRESQL_DATABASE}';
-        } else {
-          cmd = 'PGPASSWORD=${CLOUDRON_POSTGRESQL_PASSWORD} psql -h ${CLOUDRON_POSTGRESQL_HOST} -p ${CLOUDRON_POSTGRESQL_PORT} -U ${CLOUDRON_POSTGRESQL_USERNAME} -d ${CLOUDRON_POSTGRESQL_DATABASE}';
-        }
-      } else if (addon === 'mongodb') {
-        if (this.manifestVersion === 1) {
-          cmd = 'mongo -u "${MONGODB_USERNAME}" -p "${MONGODB_PASSWORD}" ${MONGODB_HOST}:${MONGODB_PORT}/${MONGODB_DATABASE}';
-        } else {
-          cmd = 'mongosh -u "${CLOUDRON_MONGODB_USERNAME}" -p "${CLOUDRON_MONGODB_PASSWORD}" ${CLOUDRON_MONGODB_HOST}:${CLOUDRON_MONGODB_PORT}/${CLOUDRON_MONGODB_DATABASE}';
-        }
-      } else if (addon === 'redis') {
-        if (this.manifestVersion === 1) {
-          cmd = 'redis-cli -h "${REDIS_HOST}" -p "${REDIS_PORT}" -a "${REDIS_PASSWORD}"';
-        } else if (this.addons['redis'].noPassword) {
-          cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}"';
-        } else {
-          cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}" -a "${CLOUDRON_REDIS_PASSWORD}" --no-auth-warning';
-        }
-      } else if (addon === 'scheduler' && command) {
-        cmd = command;
-      }
-
-      if (!cmd) return;
-
-      cmd += ' ';
-
-      this.socket.send(cmd);
-      this.terminal.focus();
-    },
-    onSchedulerMenu(event) {
-      this.$refs.schedulerMenu.toggle(event);
-    },
-    async onRestartApp() {
-      const confirmed = await this.$refs.inputDialog.confirm({
-        message: this.$t('filemanager.toolbar.restartApp') + '?',
-        confirmStyle: 'danger',
-        confirmLabel: this.$t('main.dialog.yes'),
-        rejectLabel: this.$t('main.dialog.no')
-      });
-
-      if (!confirmed) return;
-
-      this.busyRestart = true;
-
-      const [error] = await this.appsModel.restart(this.id);
-      if (error) return console.error(error);
-
-      this.busyRestart = false;
-    },
-    async connect(retry = false) {
-      document.getElementsByClassName('pankow-main-layout-body')[0].innerHTML = '';
-
-      let execId;
-      try {
-        const result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${this.id}/exec`, { cmd: [ '/bin/bash' ], tty: true, lang: 'C.UTF-8' }, { access_token: this.accessToken });
-        execId = result.body.id;
-      } catch (error) {
-        console.error('Cannot create socket.', error);
-        return setTimeout(() => this.connect(true), 1000);
-      }
-
-      this.terminal = new Terminal();
-      this.terminal.open(document.getElementsByClassName('pankow-main-layout-body')[0]);
-
-      if (retry) this.terminal.writeln('Reconnecting...');
-      else this.terminal.writeln('Connecting...');
-
-      const fitAddon = new FitAddon();
-      this.terminal.loadAddon(fitAddon);
-      fitAddon.fit();
-
-      // Let the browser handle paste
-      this.terminal.attachCustomKeyEventHandler(function (e) {
-        if (e.key === 'V' && (e.ctrlKey || e.metaKey)) return false;
-      });
-
-      // websocket cannot use relative urls
-      const url = `${API_ORIGIN.replace('https', 'wss')}/api/v1/apps/${this.id}/exec/${execId}/startws?tty=true&rows=${this.terminal.rows}&columns=${this.terminal.cols}&access_token=${this.accessToken}`;
-      this.socket = new WebSocket(url);
-
-      this.terminal.loadAddon(new AttachAddon(this.socket));
-
-      this.socket.addEventListener('open', (event) => {
-        this.connected = true;
-      });
-
-      this.socket.addEventListener('close', (event) => {
-        this.connected = false;
-        console.log('Socket closed. Reconnecting...');
-        return setTimeout(() => this.connect(true), 1000);
-      });
-
-      this.socket.addEventListener('error', (error) => {
-        this.connected = false;
-        console.log('Socket error. Reconnecting...', error);
-        return setTimeout(() => this.connect(true), 1000);
-      });
-
-      this.terminal.focus();
-    }
-  },
-  async mounted() {
-    if (!localStorage.token) {
-      console.error('Set localStorage.token');
-      return;
-    }
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const id = urlParams.get('id');
-
-    if (!id) {
-      console.error('No app id specified');
-      return;
-    }
-
-    this.id = id;
-    this.name = id;
-
-    this.appsModel = AppsModel.create();
-    this.directoryModel = createDirectoryModel(API_ORIGIN, this.accessToken, `apps/${id}`);
-
-    const [error, app] = await this.appsModel.get(this.id);
-    if (error) {
-      console.error(`Failed to get app info for ${this.id}:`, error);
-      return this.onFatalError(`Unknown app ${this.id}. Cannot continue.`);
-    }
-
-    this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
-    this.link = (app.installationState !== ISTATES.INSTALLED || app.health !== HSTATES.HEALTHY || app.runState === RSTATES.STOPPED) ? '' : `https://${app.fqdn}`;
-    this.addons = app.manifest.addons;
-    this.manifestVersion = app.manifest.manifestVersion;
-    this.showFilemanager = !!app.manifest.addons.localstorage;
-
-    this.schedulerMenuModel = !app.manifest.addons.scheduler ? [] : Object.keys(app.manifest.addons.scheduler).map((k) => {
-      return {
-        label: k,
-        action: () => this.terminalInject('scheduler', app.manifest.addons.scheduler[k].command)
-      };
+  try {
+    await fetcher.head(`${API_ORIGIN}/api/v1/apps/${id.value}/download`, {
+      file: downloadFileName,
+      access_token: accessToken
     });
+  } catch (error) {
+    if (error.status === 404) console.error('The requested file does not exist.');
+    else console.error('Failed', error);
 
-    window.document.title = `Terminal - ${this.name}`;
-
-    window.addEventListener('beforeunload', function (e) {
-      e.stopPropagation();
-      e.preventDefault();
-      return false;
-    }, true );
-
-    window.addEventListener('keydown', (event) => {
-      if (event.key === 'C' && (event.ctrlKey || event.metaKey)) { // ctrl shift c
-        event.preventDefault();
-
-        if (!this.terminal) return;
-
-        // execCommand('copy') would copy any selection from the page, so do this only if terminal has a selection
-        if (!this.terminal.getSelection()) return;
-
-        document.execCommand('copy');
-
-        this.terminal.focus();
-      }
-    });
-
-    this.connect();
+    return;
   }
-};
+
+  downloadFileDownloadUrl.value = `${API_ORIGIN}/api/v1/apps/${id.value}/download?file=${encodeURIComponent(downloadFileName)}&access_token=${accessToken}`;
+
+  // we have to click the link to make the browser do the download
+  // don't know how to prevent the browsers
+  setTimeout(() => {
+    document.getElementById('fileDownloadLink').click();
+  }, 100);
+}
+
+function onUpload() {
+  fileUploader.value.onUploadFile('/');
+}
+
+async function uploadHandler(targetDir, file, progressHandler) {
+  await directoryModel.upload(targetDir, file, progressHandler);
+}
+
+function usesAddon(addon) {
+  return !!Object.keys(addons.value).find(function (a) { return a === addon; });
+}
+
+function terminalInject(addon, command) {
+  if (!socket) return;
+
+  let cmd = '';
+  if (addon === 'mysql') {
+    if (manifestVersion.value === 1) {
+      cmd = 'mysql --user=${MYSQL_USERNAME} --password=${MYSQL_PASSWORD} --host=${MYSQL_HOST} ${MYSQL_DATABASE}';
+    } else {
+      cmd = 'mysql --user=${CLOUDRON_MYSQL_USERNAME} --password=${CLOUDRON_MYSQL_PASSWORD} --host=${CLOUDRON_MYSQL_HOST} ${CLOUDRON_MYSQL_DATABASE}';
+    }
+  } else if (addon === 'postgresql') {
+  if (manifestVersion.value === 1) {
+      cmd = 'PGPASSWORD=${POSTGRESQL_PASSWORD} psql -h ${POSTGRESQL_HOST} -p ${POSTGRESQL_PORT} -U ${POSTGRESQL_USERNAME} -d ${POSTGRESQL_DATABASE}';
+    } else {
+      cmd = 'PGPASSWORD=${CLOUDRON_POSTGRESQL_PASSWORD} psql -h ${CLOUDRON_POSTGRESQL_HOST} -p ${CLOUDRON_POSTGRESQL_PORT} -U ${CLOUDRON_POSTGRESQL_USERNAME} -d ${CLOUDRON_POSTGRESQL_DATABASE}';
+    }
+  } else if (addon === 'mongodb') {
+    if (manifestVersion.value === 1) {
+      cmd = 'mongo -u "${MONGODB_USERNAME}" -p "${MONGODB_PASSWORD}" ${MONGODB_HOST}:${MONGODB_PORT}/${MONGODB_DATABASE}';
+    } else {
+      cmd = 'mongosh -u "${CLOUDRON_MONGODB_USERNAME}" -p "${CLOUDRON_MONGODB_PASSWORD}" ${CLOUDRON_MONGODB_HOST}:${CLOUDRON_MONGODB_PORT}/${CLOUDRON_MONGODB_DATABASE}';
+    }
+  } else if (addon === 'redis') {
+    if (manifestVersion.value === 1) {
+      cmd = 'redis-cli -h "${REDIS_HOST}" -p "${REDIS_PORT}" -a "${REDIS_PASSWORD}"';
+    } else if (addons.value['redis'].noPassword) {
+      cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}"';
+    } else {
+      cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}" -a "${CLOUDRON_REDIS_PASSWORD}" --no-auth-warning';
+    }
+  } else if (addon === 'scheduler' && command) {
+    cmd = command;
+  }
+
+  if (!cmd) return;
+
+  cmd += ' ';
+
+  socket.send(cmd);
+  terminal.focus();
+}
+
+function onSchedulerMenu(event) {
+  schedulerMenu.value.toggle(event);
+}
+
+async function onRestartApp() {
+  const confirmed = await inputDialog.value.confirm({
+    message: t('filemanager.toolbar.restartApp') + '?',
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.yes'),
+    rejectLabel: t('main.dialog.no')
+  });
+
+  if (!confirmed) return;
+
+  busyRestart.value = true;
+
+  const [error] = await appsModel.restart(id.value);
+  if (error) return console.error(error);
+
+  busyRestart.value = false;
+}
+
+let fitAddon = null;
+let attachAddon = null;
+
+let connectingTimeout = null;
+
+async function connect(retry = false) {
+  clearTimeout(connectingTimeout);
+
+  let execId;
+  try {
+    const result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${id.value}/exec`, { cmd: [ '/bin/bash' ], tty: true, lang: 'C.UTF-8' }, { access_token: accessToken });
+    execId = result.body.id;
+  } catch (error) {
+    console.error('Cannot create socket.', error);
+    connectingTimeout = setTimeout(() => connect(true), 1000);
+    return;
+  }
+
+  if (retry) terminal.writeln('\nReconnecting...');
+  else terminal.writeln('\nConnecting...');
+
+  fitAddon.fit();
+
+  // websocket cannot use relative urls
+  const url = `${API_ORIGIN.replace('https', 'wss')}/api/v1/apps/${id.value}/exec/${execId}/startws?tty=true&rows=${terminal.rows}&columns=${terminal.cols}&access_token=${accessToken}`;
+  socket = new WebSocket(url);
+
+  if (attachAddon) attachAddon.dispose();
+  attachAddon = new AttachAddon(socket);
+  terminal.loadAddon(attachAddon);
+
+  // eslint-disable-next-line no-unused-vars
+  socket.addEventListener('open', (event) => {
+    connected.value = true;
+    clearTimeout(connectingTimeout);
+  });
+
+  // eslint-disable-next-line no-unused-vars
+  socket.addEventListener('close', (event) => {
+    connected.value = false;
+    console.log('Socket closed. Reconnecting...');
+    connectingTimeout = setTimeout(() => connect(true), 1000);
+  });
+
+  socket.addEventListener('error', (error) => {
+    connected.value = false;
+    console.log('Socket error. Reconnecting...', error);
+    connectingTimeout = setTimeout(() => connect(true), 1000);
+  });
+
+  terminal.focus();
+}
+
+onMounted(async () => {
+  if (!localStorage.token) {
+    console.error('Set localStorage.token');
+    return;
+  }
+
+  const urlParams = new URLSearchParams(window.location.search);
+  id.value = urlParams.get('id');
+
+  if (!id.value) {
+    console.error('No app id specified');
+    return;
+  }
+
+  name.value = id.value;
+
+  directoryModel = createDirectoryModel(API_ORIGIN, accessToken, `apps/${id.value}`);
+
+  const [error, app] = await appsModel.get(id.value);
+  if (error) {
+    console.error(`Failed to get app info for ${id.value}:`, error);
+    return onFatalError(`Unknown app ${id.value}. Cannot continue.`);
+  }
+
+  name.value = `${app.label || app.fqdn} (${app.manifest.title})`;
+  link.value = (app.installationState !== ISTATES.INSTALLED || app.health !== HSTATES.HEALTHY || app.runState === RSTATES.STOPPED) ? '' : `https://${app.fqdn}`;
+  addons.value = app.manifest.addons;
+  manifestVersion.value = app.manifest.manifestVersion;
+  showFilemanager.value = !!app.manifest.addons.localstorage;
+
+  schedulerMenuModel.value = !app.manifest.addons.scheduler ? [] : Object.keys(app.manifest.addons.scheduler).map((k) => {
+    return {
+      label: k,
+      action: () => terminalInject('scheduler', app.manifest.addons.scheduler[k].command)
+    };
+  });
+
+  window.document.title = `Terminal - ${name.value}`;
+
+  window.addEventListener('beforeunload', function (e) {
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  }, true );
+
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'C' && (event.ctrlKey || event.metaKey)) { // ctrl shift c
+      event.preventDefault();
+
+      if (!terminal) return;
+
+      // execCommand('copy') would copy any selection from the page, so do this only if terminal has a selection
+      if (!terminal.getSelection()) return;
+
+      document.execCommand('copy');
+
+      terminal.focus();
+    }
+  });
+
+  terminal = new Terminal();
+  terminal.open(document.getElementsByClassName('pankow-main-layout-body')[0]);
+
+  // Let the browser handle paste
+  terminal.attachCustomKeyEventHandler(function (e) {
+    if (e.key === 'V' && (e.ctrlKey || e.metaKey)) return false;
+  });
+
+  fitAddon = new FitAddon();
+  terminal.loadAddon(fitAddon);
+  fitAddon.fit();
+
+  connect();
+});
 
 </script>