cloudron-box/dashboard/src/views/ServicesView.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { computed, reactive, onMounted, ref, useTemplateRef } from 'vue';
import { Button, TableView, ProgressBar, ButtonGroup, FormGroup, Checkbox, Dialog } from 'pankow';
import { prettyBinarySize } from 'pankow/utils';
import { each } from 'async';
import Section from '../components/Section.vue';
import ServicesModel from '../models/ServicesModel.js';
import SystemModel from '../models/SystemModel.js';
import AppsModel from '../models/AppsModel.js';

const appsModel = AppsModel.create();
const servicesModel = ServicesModel.create();
const systemModel = SystemModel.create();

const columns = {
  status: {},
  name: { label: t('services.service'), sort: true },
  memoryPercent: { label: t('services.memoryUsage'), sort: true },
  memoryLimit: { label: t('services.memoryLimit'), sort: true },
  actions: {}
};

const services = reactive({
  box: {
    name: 'cloudron',
    status: 'active',
    memoryUsage: 0,
    memoryLimit: 0,
    config: {}
  }
});

const servicesArray = computed(() => {
  return Object.keys(services).map(s => {
    services[s].id = s;
    return services[s];
  });
});

async function refresh(id) {
  const [error, result] = await servicesModel.get(id);
  if (error) return console.error(error);

  services[id] = result;
  services[id].id = id;
  services[id].name = id.indexOf('redis') === 0 ? id : result.name;
  services[id].config = result.config || {};
  services[id].memoryLimit = result.config.memoryLimit || 0;
  services[id].memoryUsed = result.memoryUsed || 0;
  services[id].memoryPercent = result.memoryPercent || 0;

  if (id.indexOf('redis') === 0) {
    // eslint-disable-next-line no-unused-vars
    const [error, result] = await appsModel.get(id.slice('redis:'.length));
    if (result) services[id].name = 'Redis (' + (result.label || result.fqdn) + ')';
    else services[id].name = 'Redis (unknown app)';
  }

  // we will poll until active
  if (result.status !== 'active') setTimeout(refresh.bind(null, id), 3000);
}

const refreshBusy = ref(false);
async function refreshAll() {
  refreshBusy.value = true;
  const [error, serviceList] = await servicesModel.list();
  if (error) return console.error(error);

  // init with all services
  for (const s of serviceList) {
    if (!services[s]) services[s] = { id: s, name: s, config: {} };
  }

  await each(serviceList, refresh);
  refreshBusy.value = false;
}

async function onRestart(id) {
  services[id].status = 'starting';

  const [error] = await servicesModel.restart(id);
  if (error) return console.error(error);

  // this will poll till active
  await refresh(id);
}

const dialog = useTemplateRef('dialog');
const editService = ref({});
const editError = ref('');
const editBusy = ref(false);
const editMemoryLimit = ref(0);
const editMemoryTicks = ref([]);
const editRecoveryMode = ref(false);

let availableSystemMemory = 4 * 1024 * 1024 * 1024;

async function onEdit(service) {
  editService.value = service;
  editMemoryLimit.value = service.config.memoryLimit;
  editRecoveryMode.value = service.config.recoveryMode;

  editMemoryTicks.value = [];
  // we max system memory and current service memory for the case where the user configured the service on another server with more resources
  const nearest256m = Math.ceil(Math.max(availableSystemMemory, editService.value.config.memoryLimit) / (256*1024*1024)) * 256 * 1024 * 1024;
  const startTick = editService.value.defaultMemoryLimit;

  // code below ensure we atleast have 2 ticks to keep the slider usable
  editMemoryTicks.value.push(startTick); // start tick
  for (let i = startTick * 2; i < nearest256m; i *= 2) editMemoryTicks.value.push(i);
  editMemoryTicks.value.push(nearest256m); // end tick

  dialog.value.open();
}

function onResetToDefaults() {
  editMemoryLimit.value = editService.value.defaultMemoryLimit;
}

async function onEditConfirm() {
  editBusy.value = true;

  const [error] = await servicesModel.update(editService.value.id, parseInt(editMemoryLimit.value), editRecoveryMode.value);
  if (error) {
    console.error(error);
    editError.value = error.body ? error.body.message : 'Internal Error';
    editBusy.value = false;
    return;
  }

  setTimeout(() => refresh(editService.value.id), 2000);
  editBusy.value = false;
  dialog.value.close();
}

onMounted(async () => {
  await refreshAll();

  const [error, result] = await systemModel.memory();
  if (error) return console.error(error);
  availableSystemMemory = result.memory;
});

</script>

<template>
  <div class="content">
    <Dialog ref="dialog"
      :title="$t('services.configure.title', { name: editService.name })"
      :confirm-busy="editBusy"
      :confirm-label="$t('main.dialog.save')"
      :reject-label="$t('main.dialog.cancel')"
      reject-style="secondary"
      @confirm="onEditConfirm()"
    >
      <p class="has-error text-center" v-show="editError">{{ editError }}</p>

      <FormGroup>
        <label for="memoryLimitInput">{{ $t('services.memoryLimit') }}: {{ prettyBinarySize(editService.memoryLimit) }}</label>
        <input type="range" style="margin: 4px" id="memoryLimitInput" v-model="editMemoryLimit" step="134217728" :min="editMemoryTicks[0]" :max="editMemoryTicks[editMemoryTicks.length-1]" list="memoryLimitTicks" />
        <datalist id="memoryLimitTicks">
          <option v-for="limit in editMemoryTicks" :value="limit" :key="limit"></option>
        </datalist>
      </FormGroup>
      <Button style="float: right;" small @click="onResetToDefaults()">{{ $t('services.configure.resetToDefaults') }}</Button>
      <br/>
      <br/>
      <Checkbox v-model="editRecoveryMode" :label="$t('services.configure.enableRecoveryMode')" />
      <p v-html="$t('services.configure.recoveryModeDescription', { docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-service' })"></p>
    </Dialog>

    <Section :title="$t('services.title')">
      <template #header-buttons>
        <Button @click="refreshAll()" :loading="refreshBusy" :disabled="refreshBusy">{{ $t('services.refresh') }}</Button>
      </template>

      <p>{{ $t('services.description') }}</p>

      <TableView :columns="columns" :model="servicesArray">
        <template #status="slotProps">
          <span v-show="slotProps.status">
            <span v-if="slotProps.status === 'active'">
              <i class="fa fa-circle status-active" v-tooltip="'active'"></i>
            </span>
            <span v-else-if="slotProps.status === 'starting'">
              <i class="fa fa-circle status-starting" v-tooltip="'starting'" v-show="!slotProps.config.recoveryMode"></i>
              <i class="fa fa-circle status-inactive" v-tooltip="'recovery mode'" v-show="slotProps.config.recoveryMode"></i>
            </span>
            <span v-else>
              <i class="fa fa-circle status-error" uib-tooltip="{{ slotProps.status }}"></i>
            </span>
          </span>
          <i class="fa fa-circle-notch fa-spin" v-show="!slotProps.status"></i>
        </template>
        <template #memoryPercent="slotProps">
          <ProgressBar :value="slotProps.memoryPercent" v-show="slotProps.memoryPercent" />
        </template>
        <template #memoryLimit="slotProps">
          <span v-show="slotProps.memoryLimit">{{ prettyBinarySize(slotProps.memoryLimit) }}</span>
        </template>
        <template #actions="slotProps">
          <div class="table-actions">
            <ButtonGroup>
              <Button small tool secondary v-if="slotProps.status !== 'disabled' && slotProps.config.memoryLimit" @click="onEdit(slotProps)" v-tooltip="$t('services.configureActionTooltip')" icon="fa-solid fa fa-pencil-alt"/>
              <Button small tool secondary v-if="slotProps.id !== 'box'" @click="onRestart(slotProps.id)" :loading="slotProps.status === 'starting' && !slotProps.config.recoveryMode" v-tooltip="$t('services.restartActionTooltip')" icon="fa-solid fa-sync-alt"/>
              <Button tool small secondary :href="`/logs.html?id=${slotProps.id}`" target="_blank" v-tooltip="$t('logs.title')" icon="fa-solid fa-file-alt" />
            </ButtonGroup>
          </div>
        </template>
      </TableView>
    </Section>
  </div>
</template>