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

<script setup>

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

import { ref, useTemplateRef, onMounted } from 'vue';
import { Button, InputDialog, SingleSelect } from 'pankow';
import { prettyDecimalSize, sleep } from 'pankow/utils';
import moment from 'moment-timezone';
import SettingsItem from '../components/SettingsItem.vue';
import Section from '../components/Section.vue';
import SystemUpdate from '../components/SystemUpdate.vue';
import PrivateRegistry from '../components/PrivateRegistry.vue';
import CloudronModel from '../models/CloudronModel.js';
import DashboardModel from '../models/DashboardModel.js';
import SystemModel from '../models/SystemModel.js';

const systemModel = SystemModel.create();
const dashboardModel = DashboardModel.create();
const cloudronModel = CloudronModel.create();

const config = ref({});
const info = ref({});
const uptime = ref('');
const activeSince = ref('');
const memory = ref({});
const cpus = ref({});

// Timezone
const allTimezones = moment.tz.names().map(t => { return { id: t }; });
const timeZone = ref('');
const currentTimeZone = ref('');

async function onTimeZoneChange(value) {
  const [error] = await cloudronModel.setTimeZone(value);
  if (error) return console.error(error);

  currentTimeZone.value = value;
}

// Language
const allLanguages = ref([]);
const language = ref('');
const currentLanguage = ref('');

async function onLanguageChange(value) {
  const [error] = await cloudronModel.setLanguage(value);
  if (error) return console.error(error);

  currentLanguage.value = value;
}

const inputDialog = useTemplateRef('inputDialog');
async function onReboot() {
  const confirmed = await inputDialog.value.confirm({
    title: t('main.rebootDialog.title'),
    message: t('main.rebootDialog.description'),
    confirmLabel: t('main.rebootDialog.rebootAction'),
    confirmStyle: 'danger',
    rejectLabel: t('main.dialog.cancel'),
  });

  if (!confirmed) return;

  await systemModel.reboot();

  // now poll until the backend does not respond anymore to trigger the unreachable overlay
  while (true) {
    const [error] = await dashboardModel.config();
    if (error) break;
    await sleep(1000);
  }
}

onMounted(async () => {
  let [error, result] = await systemModel.memory();
  if (error) return console.error(error);
  memory.value = result;

  [error, result] = await systemModel.cpus();
  if (error) return console.error(error);
  cpus.value = result;

  [error, result] = await cloudronModel.getTimeZone();
  if (error) return console.error(error);

  timeZone.value = result;
  currentTimeZone.value = result;

  [error, result] = await cloudronModel.languages();
  if (error) return console.error(error);

  allLanguages.value = result.map(l => {
    return {
      id: l,
      display: t(`lang.${l}`)
    };
  });

  [error, result] = await cloudronModel.getLanguage();
  if (error) return console.error(error);

  language.value = result;
  currentLanguage.value = result;

  [error, result] = await systemModel.info();
  if (error) return console.error(error);
  info.value = result;

  uptime.value = moment.duration(info.value.uptimeSecs, 'seconds').locale(navigator.language).humanize();
  activeSince.value = info.value.activationTime ? moment(info.value.activationTime).fromNow() : 'unknown';

  [error, result] = await dashboardModel.config();
  if (error) return console.error(error);
  config.value = result;
});

</script>

<template>
  <div class="content">
    <InputDialog ref="inputDialog"/>

    <Section :title="$t('settings.title')">
      <template #header-buttons>
        <Button href="/logs.html?id=box" target="_blank">{{ $t('main.action.logs') }}</Button>
        <Button @click="onReboot()">{{ $t('main.action.reboot') }}</Button>
      </template>

      <div class="info-row">
        <div class="info-label">{{ $t('system.info.platformVersion') }}</div>
        <div class="info-value">v{{ config.version }} ({{ config.ubuntuVersion }})</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.vendor') }}</div>
        <div class="info-value">{{ info.sysVendor }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.product') }}</div>
        <div class="info-value">{{ info.productName }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">CPU</div>
        <div class="info-value">{{ cpus.length ? `${cpus.length} Core "${cpus[0].model}"` : '' }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.memory') }}</div>
        <div class="info-value">{{ prettyDecimalSize(memory.memory) }} RAM <span v-show="memory.swap">&amp; {{ prettyDecimalSize(memory.swap) }} Swap</span></div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.uptime') }}</div>
        <div class="info-value">{{ uptime }}</div>
      </div>
      <div class="info-row" ng-show="info.activationTime">
        <div class="info-label">{{ $t('system.info.activationTime') }}</div>
        <div class="info-value">{{ activeSince }}</div>
      </div>

    </Section>

    <Section :title="$t('system.locale.title')" :padding="false">
      <SettingsItem wrap>
        <FormGroup>
          <label>{{ $t('settings.timezone.title') }}</label>
          <div v-html="$t('settings.timezone.description', { timeZone })"></div>
        </FormGroup>
        <div style="display: flex; gap: 6px; align-items: center;">
          <SingleSelect style="min-width: 160px" v-model="timeZone" :searchThreshold="10" :options="allTimezones" option-key="id" option-label="id" @select="onTimeZoneChange" />
        </div>
      </SettingsItem>

      <SettingsItem wrap>
        <FormGroup>
          <label>{{ $t('settings.language.title') }}</label>
          <div>{{ $t('settings.language.description') }}</div>
        </FormGroup>
        <div style="display: flex; gap: 6px; align-items: center;">
          <SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" @select="onLanguageChange" />
        </div>
      </SettingsItem>
    </Section>

    <SystemUpdate />
    <PrivateRegistry />
  </div>
</template>