feat: adds diagnostics watches support

src/components/widgets/diagnostics/DiagnosticsCardConfigDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <app-dialog
     v-model="open"
-    :title="(config.id !== '') ? $t('app.general.title.edit_chart') : $t('app.general.title.add_chart')"
+    :title="dialogTitle"
     max-width="800"
   >
     <v-card-text>
@@ -79,8 +79,9 @@
 import { Component, Prop, VModel, Mixins } from 'vue-property-decorator'
 import type { DiagnosticsCardConfig } from '@/store/diagnostics/types'
 import CardConfigStep from './config/CardConfigStep.vue'
-import AxesConfigStep from './config/AxesConfigStep.vue'
-import MetricsConfigStep from './config/MetricsConfigStep.vue'
+import ChartAxisConfigStep from './config/ChartAxisConfigStep.vue'
+import ChartMetricsConfigStep from './config/ChartMetricsConfigStep.vue'
+import WatchMetricsConfigStep from './config/WatchMetricsConfigStep.vue'
 import BrowserMixin from '@/mixins/browser'
 
 @Component({})
@@ -92,11 +93,59 @@ export default class DiagnosticsCardConfigDialog extends Mixins(BrowserMixin) {
   readonly config!: DiagnosticsCardConfig
 
   currentStep = 1
-  steps = [
-    { name: this.$t('app.setting.label.card'), component: CardConfigStep },
-    { name: this.$t('app.setting.label.axes'), component: AxesConfigStep },
-    { name: this.$t('app.setting.label.metrics'), component: MetricsConfigStep }
-  ]
+
+  get dialogTitle (): string {
+    const isNew = this.config.id === ''
+
+    switch (this.config.type) {
+      case 'chart':
+        return isNew
+          ? this.$t('app.general.title.add_chart').toString()
+          : this.$t('app.general.title.edit_chart').toString()
+
+      case 'watches':
+        return isNew
+          ? this.$t('app.general.title.add_watch_panel').toString()
+          : this.$t('app.general.title.edit_watch_panel').toString()
+
+      default:
+        return ''
+    }
+  }
+
+  get steps () {
+    const cardStep = {
+      name: this.$t('app.setting.label.card').toString(),
+      component: CardConfigStep
+    }
+
+    switch (this.config.type) {
+      case 'chart':
+        return [
+          cardStep,
+          {
+            name: this.$t('app.setting.label.axes').toString(),
+            component: ChartAxisConfigStep
+          },
+          {
+            name: this.$t('app.setting.label.metrics').toString(),
+            component: ChartMetricsConfigStep
+          }
+        ]
+
+      case 'watches':
+        return [
+          cardStep,
+          {
+            name: this.$t('app.setting.label.watch_metrics').toString(),
+            component: WatchMetricsConfigStep
+          }
+        ]
+
+      default:
+        return []
+    }
+  }
 
   handleSave () {
     this.$emit('save', this.config)

src/components/widgets/diagnostics/DiagnosticsCard.vue → src/components/widgets/diagnostics/DiagnosticsChartCard.vue

@@ -9,6 +9,7 @@
       <app-btn-collapse-group>
         <app-btn
           small
+          class="me-1 my-1"
           @click="$emit('edit', config)"
         >
           <v-icon
@@ -34,7 +35,7 @@
 
 <script lang="ts">
 import { Component, Prop, Mixins } from 'vue-property-decorator'
-import type { DiagnosticsCardConfig } from '@/store/diagnostics/types'
+import type { DiagnosticsChartConfig } from '@/store/diagnostics/types'
 import type { EChartsOption, LineSeriesOption } from 'echarts'
 import BrowserMixin from '@/mixins/browser'
 
@@ -44,9 +45,9 @@ type LineSeriesOptionExtended = LineSeriesOption & {
 }
 
 @Component({})
-export default class DiagnosticsCard extends Mixins(BrowserMixin) {
+export default class DiagnosticsChartCard extends Mixins(BrowserMixin) {
   @Prop({ type: Object, required: true })
-  readonly config!: DiagnosticsCardConfig
+  readonly config!: DiagnosticsChartConfig
 
   get chartData () {
     return this.$typedState.charts.diagnostics || []

src/components/widgets/diagnostics/DiagnosticsWatchCard.vue

@@ -0,0 +1,89 @@
+<template>
+  <collapsable-card
+    :title="config.title"
+    :icon="`$${config.icon}`"
+    draggable
+    :layout-path="`diagnostics.${config.id}`"
+  >
+    <template #menu>
+      <app-btn-collapse-group>
+        <app-btn
+          small
+          class="me-1 my-1"
+          @click="$emit('edit', config)"
+        >
+          <v-icon
+            small
+            left
+          >
+            $edit
+          </v-icon>
+          {{ $t('app.general.title.edit_watch_panel') }}
+        </app-btn>
+      </app-btn-collapse-group>
+    </template>
+
+    <v-simple-table dense>
+      <thead>
+        <tr>
+          <th>{{ $t('app.setting.label.name') }}</th>
+          <th>{{ $t('app.setting.label.collector') }}</th>
+          <th>{{ $t('app.setting.label.value') }}</th>
+          <th>{{ $t('app.setting.label.type') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(metric, i) in config.metrics"
+          :key="i"
+        >
+          <td>{{ metric.name }}</td>
+          <td>
+            <code
+              class="text-truncate d-inline-block"
+              style="max-width: 300px; vertical-align: middle;"
+              :title="metric.collector"
+            >{{ metric.collector }}</code>
+          </td>
+          <td><code>{{ formatValue(watchValues[metric.collector]) }}</code></td>
+          <td><code>{{ valueType(watchValues[metric.collector]) }}</code></td>
+        </tr>
+        <tr v-if="config.metrics.length === 0">
+          <td
+            colspan="4"
+            class="text-center text--disabled"
+          >
+            {{ $t('app.general.label.no_watch_metrics') }}
+          </td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import type { DiagnosticsWatchesConfig } from '@/store/diagnostics/types'
+
+@Component({})
+export default class DiagnosticsWatchCard extends Vue {
+  @Prop({ type: Object, required: true })
+  readonly config!: DiagnosticsWatchesConfig
+
+  get watchValues (): Record<string, unknown> {
+    return this.$typedState.diagnostics.watchValues
+  }
+
+  formatValue (value: unknown): string {
+    if (value === undefined || value === null) return '-'
+    if (typeof value === 'number') return String(Math.round(value * 1000) / 1000)
+    return String(value)
+  }
+
+  valueType (value: unknown): string {
+    if (value === null) return 'null'
+    if (Array.isArray(value)) return `array(${value.length})`
+    return typeof value
+  }
+}
+</script>

src/components/widgets/diagnostics/config/CardConfigStep.vue

@@ -44,22 +44,24 @@
       </v-select>
     </app-setting>
 
-    <v-divider />
+    <template v-if="config.type !== 'watches'">
+      <v-divider />
 
-    <app-setting :title="$t('app.setting.label.height')">
-      <v-text-field
-        v-model="config.height"
-        filled
-        dense
-        single-line
-        hide-details="auto"
-        suffix="px"
-        :rules="[
-          $rules.required,
-          $rules.numberGreaterThanOrEqual(1)
-        ]"
-      />
-    </app-setting>
+      <app-setting :title="$t('app.setting.label.height')">
+        <v-text-field
+          v-model="height"
+          filled
+          dense
+          single-line
+          hide-details="auto"
+          suffix="px"
+          :rules="[
+            $rules.required,
+            $rules.numberGreaterThanOrEqual(1)
+          ]"
+        />
+      </app-setting>
+    </template>
   </div>
 </template>
 
@@ -73,6 +75,16 @@ export default class CardConfigStep extends Vue {
   @Prop({ type: Object, required: true })
   readonly config!: DiagnosticsCardConfig
 
+  get height (): number {
+    return this.config.type === 'chart' ? this.config.height : 0
+  }
+
+  set height (value: number) {
+    if (this.config.type === 'chart') {
+      this.config.height = value
+    }
+  }
+
   get icons () {
     const icons = Object.keys(Icons)
     return icons.sort().map(icon => ({ text: icon, value: icon }))

src/components/widgets/diagnostics/config/AxesConfigStep.vue → src/components/widgets/diagnostics/config/ChartAxisConfigStep.vue

@@ -99,12 +99,12 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import type { DiagnosticsCardConfig } from '@/store/diagnostics/types'
+import type { DiagnosticsChartConfig } from '@/store/diagnostics/types'
 
 @Component({})
-export default class AxesConfigStep extends Vue {
+export default class ChartAxisConfigStep extends Vue {
   @Prop({ type: Object, required: true })
-  readonly config!: DiagnosticsCardConfig
+  readonly config!: DiagnosticsChartConfig
 
   currentStep = 1
   steps = [this.$t('app.setting.label.left_y'), this.$t('app.setting.label.right_y')]

src/components/widgets/diagnostics/config/MetricsConfigStep.vue → src/components/widgets/diagnostics/config/ChartMetricsConfigStep.vue

@@ -157,18 +157,18 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import type { DiagnosticsCardConfig } from '@/store/diagnostics/types'
+import type { DiagnosticsChartConfig } from '@/store/diagnostics/types'
 import MetricsCollectorConfig from './MetricsCollectorConfig.vue'
-import { defaultState } from '@/store/layout/state'
+import { defaultDiagnosticsChartConfig } from '@/store/layout/state'
 
 @Component({
   components: {
     MetricsCollectorConfig
   }
 })
-export default class MetricsConfigStep extends Vue {
+export default class ChartMetricsConfigStep extends Vue {
   @Prop({ type: Object, required: true })
-  readonly config!: DiagnosticsCardConfig
+  readonly config!: DiagnosticsChartConfig
 
   currentStep = 1
   steps = [this.$t('app.setting.label.left_y'), this.$t('app.setting.label.right_y')]
@@ -180,7 +180,7 @@ export default class MetricsConfigStep extends Vue {
   ]
 
   addMetric (axis: number) {
-    const defaultCard = defaultState().layouts.diagnostics.container1[0] as DiagnosticsCardConfig
+    const defaultCard = defaultDiagnosticsChartConfig()
     const defaultMetric = defaultCard.axes[0].metrics[0]
 
     this.config.axes[axis].metrics.push(defaultMetric)