cloudron-box/dashboard/src/components/app/Storage.vue

<script setup>

import { ref, onMounted, computed } from 'vue';
import { Button, FormGroup, TextInput, SingleSelect } from 'pankow';
import { prettyBinarySize, prettyDate } from 'pankow/utils';
import AppsModel from '../../models/AppsModel.js';
import VolumesModel from '../../models/VolumesModel.js';

const props = defineProps([ 'app' ]);

const appsModel = AppsModel.create();
const volumesModel = VolumesModel.create();

const DEFAULT_VOLUME_ID = '__default__';

const volumes = ref([]);
const moveBusy = ref(false);
const moveError = ref('');
const diskUsage = ref(-1);
const diskUsageDate = ref(0);
const volumeId = ref('');
const volumePrefix = ref('');
const selectedMountType = computed(() => {
  const v = volumes.value.find(v => v.id === volumeId.value);
  return v ? v.mountType : '';
});

const mounts = ref([]);
const mountsBusy = ref(false);
const mountsError = ref('');

async function onSubmitMove() {
   moveBusy.value = true;
   moveError.value = '';

  const data = {
    storageVolumeId: volumeId.value !== DEFAULT_VOLUME_ID ? volumeId.value : null,
    storageVolumePrefix: volumeId.value !== DEFAULT_VOLUME_ID ? volumePrefix.value : null ,
  };

  const [error] = await appsModel.configure(props.app.id, 'storage', data);
  if (error) {
    moveError.value = error.body ? error.body.message : 'Internal error';
    moveBusy.value = false;
    return console.error(error);
  }

  moveBusy.value = false;
}

function onMountAdd() {
  mounts.value.push({
    volume: volumes.value[0],
    readOnly: 'true'
  });
}

function onMountRemove(index) {
  mounts.value.splice(index, 1);
}

async function onSubmitMounts() {
  mountsBusy.value = true;
  mountsError.value = '';

  const data = mounts.value.map((mount) => {
    return {
      volumeId: mount.volumeId,
      readOnly: mount.readOnly === 'true'
    };
  });

  const [error] = await appsModel.configure(props.app.id, 'mounts', { mounts: data });
  if (error) {
    mountsError.value = error.body ? error.body.message : 'Internal error';
    mountsBusy.value = false;
    return console.error(error);
  }

  mountsBusy.value = false;
}

onMounted(async () => {
  const [error, result] = await volumesModel.list();
  if (error) return console.error(error);

  props.app.mounts.forEach(mount => { // { volumeId, readOnly }
    const volume = result.find(v => { return v.id === mount.volumeId; });
    mounts.value.push({ volumeId: volume.id, readOnly: mount.readOnly ? 'true' : 'false' });
  });

  volumes.value = [{
    id: DEFAULT_VOLUME_ID,
    label: 'Default - /home/yellowtent/appsdata/' + props.app.id,
    mountType: '',
  }].concat(result.map(v => {
    return {
      id: v.id,
      label: 'Volume - ' + v.name,
      mountType: v.mountType,
    };
  }));

  volumeId.value = props.app.storageVolumeId || DEFAULT_VOLUME_ID;
  volumePrefix.value = props.app.storageVolumePrefix || '';
});

</script>

<template>
  <div>
    <FormGroup>
      <label>{{ $t('app.storage.appdata.title') }} <sup><a href="https://docs.cloudron.io/apps/#data-directory" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
      <p v-if="diskUsage !== -1" v-html="$t('app.storage.appdata.diskUsage', { size: '<b>' + prettyBinarySize(diskUsage) + '</b>', date: prettyDate(diskUsageDate) })"></p>
      <p v-html="$t('app.storage.appdata.description', { storagePath: ('/home/yellowtent/appsdata/' + app.id) })"></p>

      <form @submit.prevent="onSubmitMove()" autocomplete="off">
        <fieldset :disabled="moveBusy || app.error || app.taskId">
          <input type="submit" style="display: none"/>

          <SingleSelect v-model="volumeId" :options="volumes" option-key="id" option-label="label"/>
          <p class="text-warning" v-if="volumeId !== DEFAULT_VOLUME_ID && selectedMountType === 'mountpoint'" v-html="$t('app.storage.appdata.mountTypeWarning')"></p>

          <FormGroup v-if="volumeId !== DEFAULT_VOLUME_ID">
            <label for="volumePrefixInput">Subdirectory</label>
            <TextInput id="volumePrefixInput" placeholder="Prefix within the Volume" v-model="volumePrefix" />
            <div v-if="moveError">{{ moveError }}</div>
          </FormGroup>
        </fieldset>
      </form>
    </FormGroup>

    <br/>
    <Button @click="onSubmitMove()" :loading="moveBusy" :disabled="moveBusy || app.error || app.taskId" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.storage.appdata.moveAction') }}</Button>

    <hr>

    <FormGroup>
      <label>{{ $t('app.storage.mounts.title') }} <sup><a href="https://docs.cloudron.io/apps/#mounts" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
      <div class="has-error" v-if="mountsError">{{ mountsError }}</div>
      <p v-html="$t('storage.mounts.description')"></p>

      <table class="table table-hover" style="margin-top: 10px;" v-if="mounts.length">
        <thead>
          <tr>
            <th style="width: 40%">{{ $t('app.storage.mounts.volume') }}</th>
            <th class="text-left hidden-xs hidden-sm">{{ $t('app.storage.mounts.permissions.label') }}</th>
            <th style="width: 100px" class="text-right">{{ $t('main.actions') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(mount, index) in mounts" :key="mount">
            <td>
              <SingleSelect v-model="mount.volumeId" :options="volumes" option-key="id" option-label="label"/>
            </td>
            <td class="text-left" style="vertical-align: middle;">
              <select v-model="mount.readOnly">
                <option value="true">{{ $t('app.storage.mounts.permissions.readOnly') }}</option>
                <option value="false">{{ $t('app.storage.mounts.permissions.readWrite') }}</option>
              </select>
            </td>
            <td class="text-right no-wrap" style="vertical-align: middle">
              <Button tool small secondary v-show="mount.volumeId" :href="`/filemanager.html#/home/volume/${mount.volumeId}`" target="_blank" v-tooltip="$t('volumes.openFileManagerActionTooltip')" icon="fa-solid fa-folder"/>
              <Button tool small danger @click="onMountRemove(index)" icon="fa-solid fa-trash-alt" style="margin-left: 6px"/>
            </td>
          </tr>
        </tbody>
      </table>

      <div style="margin-top: 5px;">
        <span v-if="mounts.length === 0">{{ $t('app.storage.mounts.noMounts') }}&nbsp;</span>
        <span class="actionable" @click="onMountAdd()">{{ $t('app.storage.mounts.addMountAction') }}</span>
      </div>
    </FormGroup>

    <br/>
    <Button @click="onSubmitMounts()" :loading="mountsBusy" :disabled="mountsBusy || app.error || app.taskId" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.storage.mounts.saveAction') }}</Button>

  </div>
</template>