cloudron-box/frontend/src/components/Terminal.vue

<template>
  <MainLayout :gap="false">
    <template #dialogs>
      <Dialog v-model:visible="fatalError" modal header="Error" :closable="false" :closeOnEscape="false">
        <p>{{ fatalError }}</p>
      </Dialog>

      <Dialog v-model:visible="downloadFileDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('downloadFileDialogNameInput')">
        <template #header>
          <label class="dialog-header" for="downloadFileDialogNameInput">{{ $t('terminal.downloadAction') }}</label>
        </template>
        <template #default>
          <form @submit="onDownloadFileDialogSubmit" @submit.prevent>
            <p :v-show="downloadFileDialog.error">{{ downloadFileDialog.error }}</p>
            <label for="downloadFileDialogNameInput">{{ $t('terminal.download.filePath') }}</label>
            <InputText class="dialog-single-input" :class="{ 'p-invalid': downloadFileDialog.error }" id="downloadFileDialogNameInput" v-model="downloadFileDialog.name" :disabled="downloadFileDialog.busy" required/>
            <Button class="dialog-single-input-submit" type="submit" :label="$t('terminal.download.download')" :loading="downloadFileDialog.busy" :disabled="downloadFileDialog.busy || !downloadFileDialog.name"/>
          </form>
          <a id="fileDownloadLink" :href="downloadFileDialog.downloadUrl" target="_blank"></a>
        </template>
      </Dialog>
    </template>
    <template #header>
      <TopBar class="navbar">
        <template #left>
          <span class="title">{{ name }}</span>
        </template>
        <template #right>
          <!-- Scheduler/cron tasks -->
          <Button severity="success" :label="$t('terminal.scheduler')" v-show="usesAddon('scheduler')" icon="pi pi-angle-down" iconPos="right" @click="onSchedulerMenu" aria-haspopup="true" aria-controls="schedulerMenu" style="margin-right: 5px" />
          <Menu ref="schedulerMenu" id="schedulerMenu" :model="schedulerMenuModel" :popup="true" />

          <!-- addon actions -->
          <Button severity="success" style="margin-right: 5px;" @click="terminalInject('mysql')" v-show="usesAddon('mysql')" :disabled="!connected" label="MySQL"/>
          <Button severity="success" style="margin-right: 5px;" @click="terminalInject('postgresql')" v-show="usesAddon('postgresql')" :disabled="!connected" label="Postgres"/>
          <Button severity="success" style="margin-right: 5px;" @click="terminalInject('mongodb')" v-show="usesAddon('mongodb')" :disabled="!connected" label="MongoDB"/>
          <Button severity="success" style="margin-right: 5px;" @click="terminalInject('redis')" v-show="usesAddon('redis')" :disabled="!connected" label="Redis"/>

          <!-- upload/download actions -->
          <Button severity="primary" style="margin-right: 5px;" :disabled="!connected" @click="onUpload" icon="pi pi-upload" :label="$t('terminal.uploadToTmp')"/>
          <Button severity="primary" style="margin-right: 5px;" :disabled="!connected" @click="onDownload" icon="pi pi-download" :label="$t('terminal.downloadAction')"/>

          <a style="margin-right: 5px;" :href="'/frontend/logs.html?appId=' + id" target="_blank"><Button severity="secondary" icon="pi pi-align-left" :label="$t('logs.title')" /></a>
          <a style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank"><Button severity="secondary" type="button" icon="pi pi-folder" :label="$t('filemanager.title')" /></a>
          <Button severity="secondary" type="button" :label="$t('filemanager.toolbar.restartApp')" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart"/>
        </template>
      </TopBar>
    </template>
    <template #body>
      <div id="terminal"></div>
    </template>
    <template #footer>
      <FileUploader
        ref="fileUploader"
        :upload-handler="uploadHandler"
        :tr="$t"
      />
    </template>
  </MainLayout>
</template>

<script>

import superagent from 'superagent';

import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import Menu from 'primevue/menu';
import ProgressSpinner from 'primevue/progressspinner';

import { TopBar, MainLayout, FileUploader } from 'pankow';

import 'xterm/css/xterm.css';
import { Terminal } from 'xterm';
import { AttachAddon } from 'xterm-addon-attach';
import { FitAddon } from 'xterm-addon-fit';

import { create } from '../models/AppModel.js';

const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : window.location.origin;

export default {
  name: 'Terminal',
  components: {
    Button,
    Dialog,
    FileUploader,
    InputText,
    MainLayout,
    Menu,
    ProgressSpinner,
    TopBar
  },
  data() {
    return {
      accessToken: localStorage.token,
      apiOrigin: API_ORIGIN || '',
      appModel: null,
      fatalError: '',
      busyRestart: false,
      connected: false,
      addons: {},
      schedulerTasks: [],
      manifestVersion: '',
      schedulerMenuModel: [],
      id: '',
      name: '',
      socket: null,
      terminal: null,
      downloadFileDialog: {
        busy: false,
        name: '',
        error: '',
        downloadUrl: '',
        visible: false,
      }
    };
  },
  methods: {
    // generic dialog focus handler TODO move to pankow and reuse in filemanger
    onDialogShow(focusElementId) {
      setTimeout(() => document.getElementById(focusElementId).focus(), 0);
    },
    onDownload() {
      this.downloadFileDialog.busy = false;
      this.downloadFileDialog.name = '';
      this.downloadFileDialog.error = '';
      this.downloadFileDialog.downloadUrl = '';
      this.downloadFileDialog.visible = true;
    },
    async onDownloadFileDialogSubmit() {
      this.downloadFileDialog.busy = true;

      try {
        const result = await superagent.head(`${this.apiOrigin}/api/v1/apps/${this.id}/download`).query({
          file: this.downloadFileDialog.name,
          access_token: this.accessToken
        });
      } catch (error) {
        this.downloadFileDialog.busy = false;

        if (error.status === 404) this.downloadFileDialog.error = 'The requested file does not exist.';
        else console.error('Failed', error);

        return;
      }

      this.downloadFileDialog.downloadUrl = `${this.apiOrigin}/api/v1/apps/${this.id}/download?file=${encodeURIComponent(this.downloadFileDialog.name)}&access_token=${this.accessToken}`;

      // we have to click the link to make the browser do the download
      // don't know how to prevent the browsers
      document.getElementById('fileDownloadLink').click();

      this.downloadFileDialog.visible = false;
    },
    onUpload() {
      this.$refs.fileUploader.onUploadFile('/tmp');
    },
    async uploadHandler(targetDir, file, progressHandler) {
      await superagent.post(`${this.apiOrigin}/api/v1/apps/${this.id}/upload`)
        .query({ access_token: this.accessToken, file: `${targetDir}/${file.name}` })
        .attach('file', file)
        .on('progress', progressHandler);
    },
    usesAddon(addon) {
      return !!Object.keys(this.addons).find(function (a) { return a === addon; });
    },
    terminalInject(addon, command) {
      if (!this.socket) 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 {
          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() {
      if (this.type !== 'app') return;

      this.busyRestart = true;

      await this.appModel.restart();

      this.busyRestart = false;
    },
    async connect(retry = false) {
      document.getElementsByClassName('cloudron-layout-body')[0].innerHTML = '';

      let execId;
      try {
        const result = await superagent.post(`${this.apiOrigin}/api/v1/apps/${this.id}/exec`).query({ access_token: this.accessToken }).send({ cmd: [ '/bin/bash' ], tty: true, lang: 'C.UTF-8' });
        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('cloudron-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 = `${this.apiOrigin.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.appModel = create(this.apiOrigin, this.accessToken, this.id);

    try {
      const app = await this.appModel.get();
      this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
      this.addons = app.manifest.addons;
      this.manifestVersion = app.manifest.manifestVersion;

      this.schedulerMenuModel = !app.manifest.addons.scheduler ? [] : Object.keys(app.manifest.addons.scheduler).map((k) => {
        return {
          label: () => k,
          command: () => this.terminalInject('scheduler', app.manifest.addons.scheduler[k].command)
        };
      });
    } catch (e) {
      console.error(`Failed to get app info for ${this.id}:`, e);
      this.fatalError = `Unknown app ${this.id}. Cannot continue.`;
      return;
    }

    window.document.title = `Terminal - ${this.name}`;

    this.connect();
  }
};

</script>

<style>

body {
  background-color: black;
}

.title {
  font-size: 20px;
}

.cloudron-top {
  background-color: black;
  color: white;
  margin-bottom: 0 !important;
  padding: 5px 10px;
}

</style>

<style scoped>

.dialog-header {
  font-weight: 600;
  font-size: 1.25rem;
}

.dialog-single-input {
  display: block;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 1.5rem;
}

.dialog-single-input-submit {
  margin-top: 5px;
}

</style>