114 lines
3.8 KiB
Vue
114 lines
3.8 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, useTemplateRef, onMounted } from 'vue';
|
|
import { Button, InputDialog } from 'pankow';
|
|
import { prettyDecimalSize, sleep } from 'pankow/utils';
|
|
import moment from 'moment-timezone';
|
|
import Section from '../components/Section.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({});
|
|
|
|
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);
|
|
|
|
[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>
|
|
<Section :title="$t('system.title')">
|
|
<InputDialog ref="inputDialog"/>
|
|
|
|
<template #header-buttons>
|
|
<Button plain href="/logs.html?id=box" target="_blank">{{ $t('main.action.logs') }}</Button>
|
|
<Button plain @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">& {{ 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>
|
|
</template>
|