feat: moves MCU info to separate panel (#706)

Signed-off-by: Pedro Lamas <[email protected]>
Co-authored-by: Mathis Mensing <[email protected]>

src/components/widgets/system/McuCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <collapsable-card
+    :title="$t('app.system_info.label.mcu_information', {mcu: mcu.name})"
+    icon="$chip"
+  >
+    <template #menu>
+      <app-btn
+        color=""
+        fab
+        x-small
+        text
+        @click="showMcuConstantsDialog"
+      >
+        <v-icon>$viewHeadline</v-icon>
+      </app-btn>
+    </template>
+
+    <v-simple-table dense>
+      <tbody>
+        <tr>
+          <th>{{ $t('app.system_info.label.micro_controller') }}</th>
+          <td>{{ mcu.mcu_constants.MCU }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.frequency') }}</th>
+          <td>{{ $filters.getReadableFrequencyString(+mcu.mcu_constants.CLOCK_FREQ) }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.version') }}</th>
+          <td>{{ mcu.mcu_version }}</td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+
+    <mcu-constants-dialog
+      v-if="mcuConstantsDialogOpen"
+      v-model="mcuConstantsDialogOpen"
+      :mcu="mcu"
+    />
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import McuConstantsDialog from './McuConstantsDialog.vue'
+import { MCU } from '@/store/printer/types'
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({
+  components: {
+    McuConstantsDialog
+  }
+})
+export default class PrinterStatsCard extends Vue {
+  @Prop({ type: Object, required: true })
+  mcu!: MCU
+
+  mcuConstantsDialogOpen = false
+
+  showMcuConstantsDialog () {
+    this.mcuConstantsDialogOpen = true
+  }
+}
+</script>

src/components/widgets/system/McuConstantsDialog.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-dialog
+    :value="value"
+    :max-width="500"
+    scrollable
+    @input="$emit('input', $event)"
+  >
+    <v-card>
+      <v-card-title class="card-heading py-2">
+        <span class="focus--text">{{ $t('app.system_info.label.mcu_information', {mcu: mcu.name}) }}</span>
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text>
+        <v-simple-table dense>
+          <tbody>
+            <template v-for="constant in constants">
+              <tr :key="constant[0]">
+                <th>{{ constant[0] }}</th>
+                <td>{{ constant[1] }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </v-simple-table>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { MCU } from '@/store/printer/types'
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class McuConstantsDialog extends Vue {
+  @Prop({ type: Boolean, default: false })
+  value!: boolean
+
+  @Prop({ type: Object, required: true })
+  mcu!: MCU
+
+  get constants () {
+    return Object.entries(this.mcu.mcu_constants)
+  }
+}
+</script>

src/components/widgets/system/SystemOverviewCard.vue

@@ -43,13 +43,6 @@
               <th>{{ $t('app.system_info.label.distribution_like') }}</th>
               <td>{{ distribution.like }}</td>
             </tr>
-            <tr
-              v-for="mcu in mcus"
-              :key="mcu.name"
-            >
-              <th>{{ mcu.name }}</th>
-              <td>{{ mcu.mcu_version }}</td>
-            </tr>
           </tbody>
         </v-simple-table>
       </v-col>
@@ -72,10 +65,6 @@ import { Component, Vue } from 'vue-property-decorator'
 
 @Component({})
 export default class PrinterStatsCard extends Vue {
-  get mcus () {
-    return this.$store.getters['printer/getMcus']
-  }
-
   get cpuInfo () {
     const info = this.$store.getters['server/getSystemInfo']
     return info?.cpu_info || {}

src/globals.ts

@@ -117,7 +117,9 @@ import {
   mdiStop,
   mdiPlay,
   mdiFileVideoOutline,
-  mdiBellSleep
+  mdiBellSleep,
+  mdiChip,
+  mdiViewHeadline
 } from '@mdi/js'
 
 /**
@@ -303,7 +305,9 @@ export const Icons = Object.freeze({
   message: mdiMessageTextOutline,
   fullScreen: mdiFullscreen,
   video: mdiFileVideoOutline,
-  snooze: mdiBellSleep
+  snooze: mdiBellSleep,
+  chip: mdiChip,
+  viewHeadline: mdiViewHeadline
 })
 
 export const Waits = Object.freeze({

src/locales/de.yaml

@@ -462,14 +462,17 @@ app:
       distribution_codename: Codename
       distribution_like: Distribution wie
       distribution_name: Distribution
+      frequency: Frequenz
       hardware_desc: Hardwarebeschreibung
       hostname: Hostname
       klipper_load: Klipper-Last
       manufactured: Hergestellt
       manufacturer: Hersteller
       mcu_awake: '{mcu} Zeit im Wachzustand'
       mcu_bandwidth: '{mcu}-Bandbreite'
+      mcu_information: '{mcu}-Informationen'
       mcu_load: '{mcu}-Last'
+      micro_controller: Mikrocontroller
       model: CPU-Modell
       moonraker_load: Moonraker-Last
       processor_desc: Prozessor
@@ -479,6 +482,7 @@ app:
       system_memory: Systemspeicher
       system_utilization: Auslastung
       total_memory: Gesamtspeicherplatz
+      version: Version
   tool:
     btn:
       home_x: X

src/locales/en.yaml

@@ -466,14 +466,17 @@ app:
       distribution_codename: Codename
       distribution_like: Distribution Like
       distribution_name: Distribution
+      frequency: Frequency
       hardware_desc: Hardware Description
       hostname: Hostname
       klipper_load: Klipper Load
       manufactured: Manufactured
       manufacturer: Manufacturer
       mcu_awake: '{mcu} Awake Time'
       mcu_bandwidth: '{mcu} Bandwidth'
+      mcu_information: '{mcu} Information'
       mcu_load: '{mcu} Load'
+      micro_controller: Micro-Controller
       model: CPU Model
       moonraker_load: Moonraker Load
       processor_desc: Processor
@@ -483,6 +486,7 @@ app:
       system_memory: System Memory
       system_utilization: System Utilization
       total_memory: Total Memory
+      version: Version
   tool:
     btn:
       home_x: X

src/plugins/filters.ts

@@ -149,6 +149,19 @@ export const Filters = {
     return weightInG.toFixed(2) + ' g'
   },
 
+  /**
+   * Formats a number representing mm to human readable distance.
+   */
+  getReadableFrequencyString (frequencyInHz: number) {
+    let i = 0
+    const frequencyUnits = [' Hz', ' KHz', ' MHz', ' GHz']
+    while (frequencyInHz >= 1000) {
+      frequencyInHz = frequencyInHz / 1000
+      i++
+    }
+    return frequencyInHz.toFixed() + frequencyUnits[i]
+  },
+
   /**
    * The filesystem sorter. This is copied from vuetify, and modified to ensure our directories
    * are always sorted to the top.

src/store/printer/types.ts

@@ -12,6 +12,7 @@ export interface Extruder {
 }
 
 export interface MCU {
+  name: string;
   last_stats: MCUData;
   mcu_build_versions: string;
   mcu_constants: MCUData;

src/views/System.vue

@@ -9,11 +9,19 @@
     </v-col>
 
     <v-col
-      v-if="hasGraphData"
       cols="12"
       md="6"
     >
-      <system-usage-card />
+      <system-usage-card class="mb-2 mb-sm-4" />
+      <template
+        v-for="mcu in mcus"
+      >
+        <mcu-card
+          :key="mcu.name"
+          :mcu="mcu"
+          class="mb-2 mb-sm-4"
+        />
+      </template>
     </v-col>
   </v-row>
 </template>
@@ -25,6 +33,7 @@ import FileSystem from '@/components/widgets/filesystem/FileSystem.vue'
 import SystemControl from '@/components/common/SystemControl.vue'
 
 import SystemOverviewCard from '@/components/widgets/system/SystemOverviewCard.vue'
+import McuCard from '@/components/widgets/system/McuCard.vue'
 import SystemUsageCard from '@/components/widgets/system/SystemUsageCard.vue'
 import DiskUsageCard from '@/components/widgets/system/DiskUsageCard.vue'
 
@@ -33,28 +42,21 @@ import DiskUsageCard from '@/components/widgets/system/DiskUsageCard.vue'
     FileSystem,
     SystemControl,
     SystemOverviewCard,
+    McuCard,
     SystemUsageCard,
     DiskUsageCard
   }
 })
 export default class Configure extends Mixins(StateMixin) {
-  get hasGraphData () {
-    return (
-      this.$store.state.charts.klipper !== undefined ||
-      this.$store.state.charts.moonraker !== undefined ||
-      this.$store.state.charts.memory !== undefined
-    )
-  }
-
   get breakpoint () {
     if (this.$vuetify.breakpoint.mdAndDown) {
       return 12
     }
     return 6
   }
 
-  get supportsHistory () {
-    return this.$store.getters['server/componentSupport']('history')
+  get mcus () {
+    return this.$store.getters['printer/getMcus']
   }
 }
 </script>