core: frontend: Add health_monitor

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

Author: patrickelectric

core/frontend/src/components/disk/DiskTreemap.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <apexchart
+      type="treemap"
+      height="420"
+      :options="chartOptions"
+      :series="series"
+      @dataPointSelection="onSelect"
+    />
+    <div
+      v-if="!loading && (!root || root.children.length === 0)"
+      class="text-caption mt-2 grey--text text--darken-1"
+    >
+      No entries to display for this path.
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ApexOptions } from 'apexcharts'
+import Vue, { PropType } from 'vue'
+
+import { DiskNode } from '@/types/disk'
+
+interface TreemapDatum {
+  x: string
+  y: number
+  path: string
+  is_dir: boolean
+  size_bytes: number
+}
+
+export default Vue.extend({
+  props: {
+    root: {
+      type: Object as PropType<DiskNode | null>,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    series(): { data: TreemapDatum[] }[] {
+      if (!this.root) {
+        return [{ data: [] }]
+      }
+
+      const children = this.root.children || []
+      return [{
+        data: children.map((child) => ({
+          x: child.name || '/',
+          y: Math.max(child.size_bytes, 1),
+          path: child.path,
+          is_dir: child.is_dir,
+          size_bytes: child.size_bytes,
+        })),
+      }]
+    },
+    chartOptions(): ApexOptions {
+      return {
+        chart: {
+          toolbar: {
+            show: false,
+          },
+        },
+        legend: {
+          show: false,
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: (_: any, opts: any) => {
+            const datum = opts.w.config.series[0].data as TreemapDatum[][opts.dataPointIndex]
+            return `${datum.x}\n${this.formatBytes(datum.size_bytes)}`
+          },
+          style: {
+            fontSize: '12px',
+          },
+        },
+        tooltip: {
+          y: {
+            formatter: (value: number, opts: any) => {
+              const datum = opts.w.config.series[0].data as TreemapDatum[][opts.dataPointIndex]
+              return `${this.formatBytes(value)} (${datum.path})`
+            },
+          },
+        },
+        colors: ['#42a5f5', '#26c6da', '#7e57c2', '#66bb6a', '#ffa726', '#ef5350'],
+      }
+    },
+  },
+  methods: {
+    onSelect(_event: MouseEvent, chartContext: any, config: any): void {
+      const data = chartContext?.w?.config?.series?.[0]?.data as TreemapDatum[] | undefined
+      if (!data || !data[config.dataPointIndex]) {
+        return
+      }
+      const datum = data[config.dataPointIndex]
+      this.$emit('select', datum.path, datum.is_dir)
+    },
+    formatBytes(bytes: number): string {
+      if (bytes <= 0 || Number.isNaN(bytes)) {
+        return '0 B'
+      }
+      const units = ['B', 'KB', 'MB', 'GB', 'TB']
+      const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+      const value = bytes / 1024 ** exponent
+      return `${value.toFixed(value >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`
+    },
+  },
+})
+</script>
+
+<style scoped>
+.apexcharts-canvas {
+  max-height: 430px;
+}
+</style>
+
+
+

core/frontend/src/menus.ts

@@ -50,6 +50,13 @@ const menus = [
     advanced: true,
     text: 'Visualize disk usage and delete files/folders.',
   },
+  {
+    title: 'Health Monitor',
+    icon: 'mdi-heart-pulse',
+    route: '/tools/health-monitor',
+    advanced: false,
+    text: 'Monitor system and vehicle health warnings.',
+  },
   {
     title: 'Log Browser',
     icon: 'mdi-math-log',

core/frontend/src/router/index.ts

@@ -48,6 +48,11 @@ const routes: Array<RouteConfig> = [
     name: 'Disk',
     component: defineAsyncComponent(() => import('../views/Disk.vue')),
   },
+  {
+    path: '/tools/health-monitor',
+    name: 'Health Monitor',
+    component: defineAsyncComponent(() => import('../views/HealthMonitor.vue')),
+  },
   {
     path: '/tools/web-terminal',
     name: 'Terminal',

core/frontend/src/store/health_monitor.ts

@@ -0,0 +1,90 @@
+import {
+  Action, Module, Mutation, VuexModule, getModule,
+} from 'vuex-module-decorators'
+
+import store from '@/store'
+import { HealthHistory, HealthSummary } from '@/types/health-monitor'
+import back_axios, { isBackendOffline } from '@/utils/api'
+
+@Module({ dynamic: true, store, name: 'health_monitor' })
+class HealthMonitorStore extends VuexModule {
+  API_URL = '/health-monitor/v1.0/health'
+
+  summary: HealthSummary | null = null
+
+  history: HealthHistory | null = null
+
+  loading = false
+
+  error: string | null = null
+
+  @Mutation
+  setSummary(value: HealthSummary | null): void {
+    this.summary = value
+  }
+
+  @Mutation
+  setHistory(value: HealthHistory | null): void {
+    this.history = value
+  }
+
+  @Mutation
+  setLoading(value: boolean): void {
+    this.loading = value
+  }
+
+  @Mutation
+  setError(message: string | null): void {
+    this.error = message
+  }
+
+  @Action
+  async fetchSummary(): Promise<void> {
+    this.setLoading(true)
+    this.setError(null)
+
+    await back_axios({
+      method: 'get',
+      url: `${this.API_URL}/summary`,
+      timeout: 10000,
+    })
+      .then((response) => {
+        this.setSummary(response.data as HealthSummary)
+      })
+      .catch((error) => {
+        this.setSummary(null)
+        if (isBackendOffline(error)) {
+          return
+        }
+        this.setError(`Failed to fetch health summary: ${error.message}`)
+      })
+      .finally(() => {
+        this.setLoading(false)
+      })
+  }
+
+  @Action
+  async fetchHistory(limit = 200): Promise<void> {
+    await back_axios({
+      method: 'get',
+      url: `${this.API_URL}/history`,
+      params: { limit },
+      timeout: 10000,
+    })
+      .then((response) => {
+        this.setHistory(response.data as HealthHistory)
+      })
+      .catch((error) => {
+        this.setHistory(null)
+        if (isBackendOffline(error)) {
+          return
+        }
+        this.setError(`Failed to fetch health history: ${error.message}`)
+      })
+  }
+}
+
+const health_monitor = getModule(HealthMonitorStore)
+
+export { HealthMonitorStore }
+export default health_monitor

core/frontend/src/types/frontend_services.ts

@@ -119,6 +119,13 @@ export const kraken_service: Service = {
   version: '0.1.0',
 }
 
+export const health_monitor_service: Service = {
+  name: 'Health Monitor',
+  description: 'Service to monitor system and vehicle health warnings.',
+  company: 'Blue Robotics',
+  version: '0.1.0',
+}
+
 export const parameters_service: Service = {
   name: 'Parameters service',
   description: 'Service to manage vehicle Parameters',

core/frontend/src/types/health-monitor.ts

@@ -0,0 +1,28 @@
+export type HealthSeverity = 'info' | 'warn' | 'error' | 'critical'
+export type HealthSource = 'system' | 'vehicle' | 'extension' | 'network'
+export type HealthEventType = 'problem_detected' | 'problem_resolved' | 'problem_updated'
+
+export interface HealthProblem {
+  id: string
+  severity: HealthSeverity
+  title: string
+  details: string
+  source: HealthSource
+  timestamp: number
+  metadata?: Record<string, unknown>
+  first_seen_ms?: number
+  last_seen_ms?: number
+}
+
+export interface HealthEvent extends HealthProblem {
+  type: HealthEventType
+}
+
+export interface HealthSummary {
+  active: HealthProblem[]
+  updated_at: number
+}
+
+export interface HealthHistory {
+  events: HealthEvent[]
+}