Move SystemInfo section into the metrics view

dashboard/src/views/MetricsView.vue

@@ -1,5 +1,6 @@
 <script setup>
 
+import SystemInfo from '../components/SystemInfo.vue';
 import SystemMetrics from '../components/SystemMetrics.vue';
 import DiskUsage from '../components/DiskUsage.vue';
 
@@ -7,6 +8,7 @@ import DiskUsage from '../components/DiskUsage.vue';
 
 <template>
   <div class="content">
+    <SystemInfo/>
     <SystemMetrics/>
     <DiskUsage />
   </div>

dashboard/src/views/SystemView.vue

@@ -4,9 +4,8 @@ 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 { ref, onMounted } from 'vue';
+import { SingleSelect } from 'pankow';
 import moment from 'moment-timezone';
 import SettingsItem from '../components/SettingsItem.vue';
 import Section from '../components/Section.vue';
@@ -51,28 +50,6 @@ async function onLanguageChange(value) {
   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);
@@ -120,45 +97,6 @@ onMounted(async () => {
 
 <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>