feat: adds Kalico non_critical_disconnected support

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

Author: pedrolamas

src/components/widgets/system/McuCard.vue

@@ -1,6 +1,6 @@
 <template>
   <collapsable-card
-    :title="$t('app.system_info.label.mcu_information', {mcu: mcu.name})"
+    :title="$t('app.system_info.label.mcu_information', {mcu: mcu.prettyName})"
     icon="$chip"
   >
     <template #menu>
@@ -28,6 +28,32 @@
           <th>{{ $t('app.system_info.label.version') }}</th>
           <td>{{ mcu.mcu_version }}</td>
         </tr>
+        <tr v-if="mcu.app">
+          <th>{{ $t('app.system_info.label.application') }}</th>
+          <td>{{ mcu.app }}</td>
+        </tr>
+        <tr v-if="mcu.non_critical_disconnected != null">
+          <th>{{ $t('app.system_info.label.non_critical_connection') }}</th>
+          <td>
+            <v-chip
+              :color="mcu.non_critical_disconnected ? 'error' : 'success'"
+              small
+              label
+            >
+              <v-icon
+                small
+                left
+              >
+                {{ mcu.non_critical_disconnected ? '$blankCircle' : '$markedCircle' }}
+              </v-icon>
+              {{
+                mcu.non_critical_disconnected
+                  ? $t('app.system_info.label.disconnected')
+                  : $t('app.system_info.label.connected')
+              }}
+            </v-chip>
+          </td>
+        </tr>
       </tbody>
     </v-simple-table>
 

src/components/widgets/system/McuLoadChart.vue

@@ -12,12 +12,12 @@
 
     <div class="chart-label-wrapper">
       <div class="chart-label">
-        <span>{{ $t('app.system_info.label.mcu_load', { mcu: mcu.toUpperCase() }) }}</span>
+        <span>{{ $t('app.system_info.label.mcu_load', { mcu: mcu.prettyName }) }}</span>
         <span v-if="chartData.length">{{ chartData[chartData.length - 1].load }}%</span>
       </div>
 
       <div class="chart-label">
-        <span>{{ $t('app.system_info.label.mcu_awake', { mcu: mcu.toUpperCase() }) }}</span>
+        <span>{{ $t('app.system_info.label.mcu_awake', { mcu: mcu.prettyName }) }}</span>
         <span v-if="chartData.length">{{ chartData[chartData.length - 1].awake }}%</span>
       </div>
 
@@ -31,16 +31,17 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import type { MCU } from '@/store/printer/types'
 
 @Component({})
 export default class McuLoadChart extends Vue {
   ready = false
 
-  @Prop({ type: String, required: true })
-  readonly mcu!: string
+  @Prop({ type: Object, required: true })
+  readonly mcu!: MCU
 
   get chartData () {
-    return this.$store.state.charts[this.mcu] || []
+    return this.$store.state.charts[this.mcu.name] || []
   }
 
   get options () {

src/components/widgets/system/SystemUsageCard.vue

@@ -14,7 +14,7 @@
         >
           <mcu-load-chart
             :key="i"
-            :mcu="mcu.name"
+            :mcu="mcu"
           />
         </template>
       </v-row>

src/locales/en.yaml

@@ -701,11 +701,14 @@ app:
       no_connection: No moonraker connection. Please check moonraker status and / or refresh.
   system_info:
     label:
+      application: Application
       awake_time: awake time
       capacity: Capacity
+      connected: Connected
       constants: Constants
       cpu_desc: CPU Description
       devices: Devices
+      disconnected: Disconnected
       distribution_codename: Codename
       distribution_like: Distribution Like
       distribution_name: Distribution
@@ -726,6 +729,7 @@ app:
       moonraker_load: Moonraker Load
       last_stats: Last Stats
       network: Network
+      non_critical_connection: Non-critical connection
       processor_desc: Processor
       product_name: Product Name
       serial_number: Serial Number

src/store/printer/getters.ts

@@ -286,17 +286,17 @@ export const getters: GetterTree<PrinterState, RootState> = {
   /**
    * Return MCU's and their state
    */
-  getMcus: (state) => {
-    const mcus: MCU[] = []
-    Object.keys(state.printer)
+  getMcus: (state, getters) => {
+    const mcus = Object.keys(state.printer)
       .filter(key => key.startsWith('mcu'))
       .sort()
-      .forEach(key => {
-        mcus.push({
-          name: key,
-          ...state.printer[key]
-        })
-      })
+      .map((key): MCU => ({
+        name: key,
+        prettyName: Vue.$filters.prettyCase(key),
+        ...state.printer[key],
+        config: getters.getPrinterSettings(key)
+      }))
+
     return mcus
   },
 

src/store/printer/types.ts

@@ -75,10 +75,14 @@ export type StepperType<T = Record<string, any>> = {
 
 export interface MCU {
   name: string;
+  prettyName: string;
   last_stats?: Record<string, string | number>;
   mcu_build_versions?: string;
   mcu_constants?: Record<string, string | number>;
   mcu_version?: string;
+  app?: string;
+  non_critical_disconnected?: boolean;
+  config: Record<string, any>;
 }
 
 export type OutputType<T = Record<string, any>> = {