Add initial SystemView.vue

dashboard/src/Index.vue

@@ -13,6 +13,7 @@ import ProfileView from './views/ProfileView.vue';
 import ServicesView from './views/ServicesView.vue';
 import SettingsView from './views/SettingsView.vue';
 import SupportView from './views/SupportView.vue';
+import SystemView from './views/SystemView.vue';
 import UserDirectoryView from './views/UserDirectoryView.vue';
 import UsersView from './views/UsersView.vue';
 import VolumesView from './views/VolumesView.vue';
@@ -29,6 +30,7 @@ const VIEWS = {
   SERVICES: 'services',
   SETTINGS: 'settings',
   SUPPORT: 'support',
+  SYSTEM: 'system',
   USER_DIRECTORY: 'user-directory',
   USERS: 'users',
   VOLUMES: 'volumes',
@@ -61,6 +63,8 @@ function onHashChange() {
     view.value = VIEWS.SETTINGS;
   } else if (v === VIEWS.SUPPORT) {
     view.value = VIEWS.SUPPORT;
+  } else if (v === VIEWS.SYSTEM) {
+    view.value = VIEWS.SYSTEM;
   } else if (v === VIEWS.USER_DIRECTORY) {
     view.value = VIEWS.USER_DIRECTORY;
   } else if (v === VIEWS.USERS) {
@@ -102,6 +106,7 @@ onMounted(async () => {
     <ServicesView v-else-if="view === VIEWS.SERVICES" />
     <SettingsView v-else-if="view === VIEWS.SETTINGS" />
     <SupportView v-else-if="view === VIEWS.SUPPORT" />
+    <SystemView v-else-if="view === VIEWS.SYSTEM" />
     <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
     <UsersView v-else-if="view === VIEWS.USERS" />
     <VolumesView v-else-if="view === VIEWS.VOLUMES" />

dashboard/src/models/SystemModel.js

@@ -26,7 +26,7 @@ function create() {
       }
 
       if (error || result.status !== 200) return [error || result];
-      return [null, result.body];
+      return [null, result.body.cpus];
     },
     async blockDevices() {
       let error, result;
@@ -39,6 +39,28 @@ function create() {
       if (error || result.status !== 200) return [error || result];
       return [null, result.body.devices];
     },
+    async info() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/system/info`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.info];
+    },
+    async reboot() {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/system/reboot`, {}, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 202) return [error || result];
+      return [null];
+    },
   };
 }
 

dashboard/src/views/SystemView.vue

@@ -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>