82 lines
2.7 KiB
Vue
82 lines
2.7 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
import { ref, onMounted } from 'vue';
|
||
|
|
import { Button } from 'pankow';
|
||
|
|
import { prettyDate, prettyDecimalSize } from 'pankow/utils';
|
||
|
|
import Section from '../components/Section.vue';
|
||
|
|
import SystemModel from '../models/SystemModel.js';
|
||
|
|
import DashboardModel from '../models/DashboardModel.js';
|
||
|
|
|
||
|
|
const systemModel = SystemModel.create();
|
||
|
|
const dashboardModel = DashboardModel.create();
|
||
|
|
|
||
|
|
const config = ref({});
|
||
|
|
const info = ref({});
|
||
|
|
const memory = ref({});
|
||
|
|
const cpus = ref({});
|
||
|
|
|
||
|
|
function onReboot() {
|
||
|
|
systemModel.reboot();
|
||
|
|
}
|
||
|
|
|
||
|
|
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 systemModel.info();
|
||
|
|
if (error) return console.error(error);
|
||
|
|
info.value = result;
|
||
|
|
|
||
|
|
[error, result] = await dashboardModel.getConfig();
|
||
|
|
if (error) return console.error(error);
|
||
|
|
config.value = result;
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<Section :title="$t('system.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">& {{ prettyDecimalSize(memory.swap) }} Swap</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">{{ $t('system.info.uptime') }}</div>
|
||
|
|
<div class="info-value">{{ info.uptimeSecs }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row" ng-show="info.activationTime">
|
||
|
|
<div class="info-label">{{ $t('system.info.activationTime') }}</div>
|
||
|
|
<div class="info-value">{{ prettyDate(info.activationTime) }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</Section>
|
||
|
|
</div>
|
||
|
|
</template>
|