webapp: added system overview

webapp/src/components/NavBar.vue

@@ -30,6 +30,7 @@
               Info
             </a>
             <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
+              <li><router-link class="dropdown-item" to="/info/system">System</router-link></li>
               <li><router-link class="dropdown-item" to="/info/network">Network</router-link></li>
             </ul>
           </li>

webapp/src/components/SystemInfoView.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>System Info</h1>
+    </div>
+    <div class="bg-light p-5 rounded">
+      <FirmwareInfo />
+      <HardwareInfo />
+      <MemoryInfo />
+    </div>
+  </div>
+</template>
+
+<script>
+import HardwareInfo from "@/components/partials/HardwareInfo.vue";
+import FirmwareInfo from "@/components/partials/FirmwareInfo.vue";
+import MemoryInfo from "@/components/partials/MemoryInfo.vue";
+
+export default {
+  components: {
+    HardwareInfo,
+    FirmwareInfo,
+    MemoryInfo,
+  },
+};
+</script>

webapp/src/components/partials/FirmwareInfo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="card">
+    <div class="card-header text-white bg-primary">
+      Firmware Information
+    </div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table class="table table-hover table-condensed">
+          <tbody>
+            <tr>
+              <th>Hostname</th>
+              <td>{{ systemDataList.hostname }}</td>
+            </tr>
+            <tr>
+              <th>SDK Version</th>
+              <td>{{ systemDataList.sdkversion }}</td>
+            </tr>
+            <tr>
+              <th>Firmware Version</th>
+              <td>{{ systemDataList.firmware_version }}</td>
+            </tr>
+            <tr>
+              <th>Reset Reason CPU 0</th>
+              <td>{{ systemDataList.resetreason_0 }}</td>
+            </tr>
+            <tr>
+              <th>Reset Reason CPU 1</th>
+              <td>{{ systemDataList.resetreason_1 }}</td>
+            </tr>
+            <tr>
+              <th>Config save count</th>
+              <td>{{ systemDataList.cfgsavecount }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      systemDataList: [],
+    };
+  },
+  created() {
+    this.getSystemInfo();
+  },
+  methods: {
+    getSystemInfo() {
+      fetch("/api/system/status")
+        .then((response) => response.json())
+        .then((data) => (this.systemDataList = data));
+    },
+  },
+};
+</script>

webapp/src/components/partials/FsInfo.vue

@@ -0,0 +1,40 @@
+<template>
+  <tr>
+    <th>{{ name }}</th>
+    <td>
+      <div class="progress">
+        <div
+          class="progress-bar"
+          role="progressbar"
+          :style="{ width: this.getPercent() + '%' }"
+          v-bind:aria-valuenow="this.getPercent()"
+          aria-valuemin="0"
+          aria-valuemax="100"
+        >
+          {{ this.getPercent() }}%
+        </div>
+      </div>
+    </td>
+    <td class="rightCell">
+      {{ Math.round((total - used) / 1024) }}
+      KByte
+    </td>
+    <td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
+    <td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
+  </tr>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String,
+    total: Number,
+    used: Number,
+  },
+  methods: {
+    getPercent() {
+      return Math.round((this.used / this.total) * 100);
+    },
+  },
+};
+</script>

webapp/src/components/partials/HardwareInfo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="card">
+    <div class="card-header text-white bg-primary">
+      Hardware Information
+    </div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table class="table table-hover table-condensed">
+          <tbody>
+            <tr>
+              <th>Chip Model</th>
+              <td>{{ systemDataList.chipmodel }}</td>
+            </tr>
+            <tr>
+              <th>Chip Revision</th>
+              <td>{{ systemDataList.chiprevision }}</td>
+            </tr>
+            <tr>
+              <th>Chip Cores</th>
+              <td>{{ systemDataList.chipcores }}</td>
+            </tr>
+            <tr>
+              <th>CPU Frequency</th>
+              <td>{{ systemDataList.cpufreq }} MHz</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      systemDataList: [],
+    };
+  },
+  created() {
+    this.getSystemInfo();
+  },
+  methods: {
+    getSystemInfo() {
+      fetch("/api/system/status")
+        .then((response) => response.json())
+        .then((data) => (this.systemDataList = data));
+    },
+  },
+};
+</script>

webapp/src/components/partials/MemoryInfo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="card">
+    <div class="card-header text-white bg-primary">Memory Information</div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table class="table table-hover table-condensed">
+          <thead>
+            <tr>
+              <th>Type</th>
+              <th>Usage</th>
+              <th class="rightCell">Free</th>
+              <th class="rightCell">Used</th>
+              <th class="rightCell">Size</th>
+            </tr>
+          </thead>
+          <tbody>
+              <FsInfo name="Heap" :total="systemDataList.heap_total" :used="systemDataList.heap_used" />
+              <FsInfo name="LittleFs" :total="systemDataList.littlefs_total" :used="systemDataList.littlefs_used" />
+              <FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FsInfo from "@/components/partials/FsInfo.vue";
+
+export default {
+  components: {
+    FsInfo,
+  },
+  data() {
+    return {
+      systemDataList: [],
+    };
+  },
+  created() {
+    this.getSystemInfo();
+  },
+  methods: {
+    getSystemInfo() {
+      fetch("/api/system/status")
+        .then((response) => response.json())
+        .then((data) => (this.systemDataList = data));
+    },
+  },
+};
+</script>

webapp/src/router/index.js

@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from 'vue-router';
 import HomeView from '@/components/HomeView'
 import AboutView from '@/components/AboutView'
 import NetworkInfoView from '@/components/NetworkInfoView'
+import SystemInfoView from '@/components/SystemInfoView'
 
 const routes = [
     {
@@ -18,6 +19,11 @@ const routes = [
         path: '/info/network',
         name: 'Network',
         component: NetworkInfoView
+    },
+    {
+        path: '/info/system',
+        name: 'System',
+        component: SystemInfoView
     }
 ];