feat: adds MCU last stats (#1358)

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

src/components/widgets/system/McuCard.vue

@@ -10,7 +10,7 @@
         x-small
         text
         class="ms-1 my-1"
-        @click="showMcuConstantsDialog"
+        @click="showMcuInformationDialog"
       >
         <v-icon>$viewHeadline</v-icon>
       </app-btn>
@@ -33,32 +33,32 @@
       </tbody>
     </v-simple-table>
 
-    <mcu-constants-dialog
-      v-if="mcuConstantsDialogOpen"
-      v-model="mcuConstantsDialogOpen"
+    <mcu-information-dialog
+      v-if="mcuInformationDialogOpen"
+      v-model="mcuInformationDialogOpen"
       :mcu="mcu"
     />
   </collapsable-card>
 </template>
 
 <script lang="ts">
-import McuConstantsDialog from './McuConstantsDialog.vue'
+import McuInformationDialog from './McuInformationDialog.vue'
 import type { MCU } from '@/store/printer/types'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component({
   components: {
-    McuConstantsDialog
+    McuInformationDialog
   }
 })
 export default class PrinterStatsCard extends Vue {
   @Prop({ type: Object, required: true })
   readonly mcu!: MCU
 
-  mcuConstantsDialogOpen = false
+  mcuInformationDialogOpen = false
 
-  showMcuConstantsDialog () {
-    this.mcuConstantsDialogOpen = true
+  showMcuInformationDialog () {
+    this.mcuInformationDialogOpen = true
   }
 }
 </script>

src/components/widgets/system/McuInformationDialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.system_info.label.mcu_information', { mcu: mcu.name })"
+    max-width="500"
+    no-actions
+  >
+    <div class="overflow-y-auto">
+      <v-card flat>
+        <v-card-title>{{ $t('app.system_info.label.constants') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr
+              v-for="(value, key) in mcu.mcu_constants"
+              :key="key"
+            >
+              <th>{{ key }}</th>
+              <td>{{ value }}</td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+
+      <v-card flat>
+        <v-card-title>{{ $t('app.system_info.label.last_stats') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr
+              v-for="(value, key) in mcu.last_stats"
+              :key="key"
+            >
+              <th>{{ key }}</th>
+              <td>{{ value }}</td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+    </div>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import type { MCU } from '@/store/printer/types'
+import { Component, Prop, VModel, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class McuInformationDialog extends Vue {
+  @VModel({ type: Boolean })
+    open?: boolean
+
+  @Prop({ type: Object, required: true })
+  readonly mcu!: MCU
+}
+</script>

src/locales/en.yaml

@@ -663,6 +663,7 @@ app:
     label:
       awake_time: awake time
       capacity: Capacity
+      constants: Constants
       cpu_desc: CPU Description
       distribution_codename: Codename
       distribution_like: Distribution Like
@@ -682,6 +683,7 @@ app:
       micro_controller: Micro-Controller
       model: CPU Model
       moonraker_load: Moonraker Load
+      last_stats: Last Stats
       network: Network
       processor_desc: Processor
       product_name: Product Name

src/store/printer/types.ts

@@ -56,16 +56,12 @@ export type StepperType<T = Record<string, any>> = {
 
 export interface MCU {
   name: string;
-  last_stats: MCUData;
+  last_stats: Record<string, string | number>;
   mcu_build_versions: string;
-  mcu_constants: MCUData;
+  mcu_constants: Record<string, string | number>;
   mcu_version: string;
 }
 
-export interface MCUData {
-  [index: string]: string | number;
-}
-
 export type OutputType<T = Record<string, any>> = {
   config: T
   name: string;