feat: Adds network and virtualization info

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

src/components/widgets/system/SystemOverviewCard.vue

@@ -49,6 +49,14 @@
               <th>{{ $t('app.system_info.label.distribution_codename') }}</th>
               <td>{{ distribution.codename }}</td>
             </tr>
+            <tr v-if="network">
+              <th>{{ $t('app.system_info.label.network') }}</th>
+              <td>{{ network }}</td>
+            </tr>
+            <tr v-if="virtualization.virt_type && virtualization.virt_type !== 'none'">
+              <th>{{ $t('app.system_info.label.virtualization') }}</th>
+              <td>{{ virtualization.virt_type }} ({{ virtualization.virt_identifier }})</td>
+            </tr>
           </tbody>
         </v-simple-table>
       </v-col>
@@ -58,52 +66,45 @@
         </v-card-text>
       </v-col>
     </v-row>
-
-    <!-- <pre>{{ services }}</pre> -->
-    <!-- <pre>{{ sdInfo }}</pre> -->
-    <!-- <pre>{{ distribution }}</pre> -->
-    <!-- <pre>{{ printerInfo }}</pre> -->
   </collapsable-card>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { SystemInfo, CpuInfo, DistroInfo, Virtualization } from '@/store/server/types'
 
 @Component({})
 export default class PrinterStatsCard extends Vue {
-  get cpuInfo () {
-    const info = this.$store.getters['server/getSystemInfo']
-    return info?.cpu_info || {}
+  get systemInfo (): SystemInfo | null {
+    return this.$store.getters['server/getSystemInfo']
   }
 
-  get sdInfo () {
-    const info = this.$store.getters['server/getSystemInfo']
-    return info?.sd_info || {}
+  get cpuInfo () {
+    return this.systemInfo?.cpu_info || {} as CpuInfo
   }
 
   get distribution () {
-    const info = this.$store.getters['server/getSystemInfo']
-    return info?.distribution || {}
+    return this.systemInfo?.distribution || {} as DistroInfo
   }
 
-  get services () {
-    const info = this.$store.getters['server/getSystemInfo']
-    return info?.available_services || []
+  get virtualization () {
+    return this.systemInfo?.virtualization || {} as Virtualization
   }
 
-  get printerInfo () {
-    return this.$store.state.printer.printer.info
-  }
+  get network () {
+    return Object.entries(this.systemInfo?.network || {})
+      .map(([key, entry]) => {
+        const ipAddresses = entry.ip_addresses?.filter(x => x.family === 'ipv4') || entry.ip_addresses?.filter(x => x.family === 'ipv6')
 
-  get fileSystemUsedPercent () {
-    // (250 / 500) * 100
-    const total = this.fileSystemUsage.total
-    const used = this.fileSystemUsage.used
-    return Math.floor((used / total) * 100).toFixed()
+        return ipAddresses
+          ? `${key} (${ipAddresses.map(x => x.address).join(', ')})`
+          : key
+      })
+      .join(', ')
   }
 
-  get fileSystemUsage () {
-    return this.$store.getters['files/getUsage']
+  get printerInfo () {
+    return this.$store.state.printer.printer.info
   }
 }
 </script>

src/locales/en.yaml

@@ -603,6 +603,7 @@ app:
       micro_controller: Micro-Controller
       model: CPU Model
       moonraker_load: Moonraker Load
+      network: Network
       processor_desc: Processor
       product_name: Product Name
       serial_number: Serial Number
@@ -612,6 +613,7 @@ app:
       total_memory: Total Memory
       operating_system: Operating System
       version: Version
+      virtualization: Virtualization
   tool:
     btn:
       home_x: X

src/store/server/types.ts

@@ -124,7 +124,7 @@ export interface NetworkState {
 
 export interface NetworkInterface {
   mac_address?: string;
-  ip_addresses?: NetworkIpAddress;
+  ip_addresses?: NetworkIpAddress[];
 }
 
 export interface NetworkIpAddress {