37 lines
1.4 KiB
Vue
37 lines
1.4 KiB
Vue
<script setup>
|
|
import { state } from '@/store';
|
|
import moment from 'moment';
|
|
import { computed } from 'vue';
|
|
|
|
const mqttMetrics = computed(() => state.selectedNodeMqttMetrics);
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="bg-gray-200 p-2">
|
|
<div class="font-semibold">MQTT</div>
|
|
<div class="text-sm text-gray-600">Topics this node sent packets to</div>
|
|
</div>
|
|
|
|
<!-- List of MQTT Topics or No Data -->
|
|
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
|
<li v-if="mqttMetrics.length === 0">
|
|
<div class="block flex-1 px-4 py-2">
|
|
<div class="text-sm text-gray-700">No packets seen on MQTT</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li v-else v-for="(mqttMetric, index) in mqttMetrics" :key="`${mqttMetric.mqtt_topic}-${index}`">
|
|
<div class="relative flex items-center">
|
|
<div class="block flex-1 px-4 py-2">
|
|
<div class="truncate">
|
|
<p class="truncate text-sm font-medium text-gray-900">{{ mqttMetric.mqtt_topic }}</p>
|
|
<div class="text-sm text-gray-700">
|
|
Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template> |