Add initial SystemView.vue

2025-02-17 11:18:57 +01:00
parent c1c53af855
commit 42b4d7ce5f
4 changed files with 111 additions and 3 deletions
@@ -0,0 +1,81 @@
+<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">&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">{{ 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>