44 lines
2.2 KiB
Vue
44 lines
2.2 KiB
Vue
<script setup>
|
|
const emit = defineEmits(['showTraceRoute']);
|
|
import moment from 'moment';
|
|
import { state } from '@/store.js';
|
|
import { useMapStore } from '@/stores/mapStore';
|
|
const mapData = useMapStore();
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="bg-gray-200 p-2">
|
|
<div class="font-semibold">Trace Routes</div>
|
|
<div class="text-sm text-gray-600">Only 5 most recent are shown</div>
|
|
</div>
|
|
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
|
<template v-if="state.selectedNodeTraceroutes.length > 0">
|
|
<li @click="$emit('showTraceRoute', traceroute)" v-for="traceroute of state.selectedNodeTraceroutes">
|
|
<div class="relative flex items-center">
|
|
<div class="block flex-1 px-4 py-2">
|
|
<div class="relative flex min-w-0 flex-1 items-center">
|
|
<div>
|
|
<p class="text-sm text-gray-900"><span class="font-medium">{{ mapData.findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ mapData.findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
|
|
<div class="text-sm text-gray-700">{{ moment(new Date(traceroute.updated_at)).fromNow() }} - {{ traceroute.route.length }} hops {{ traceroute.channel_id ? `on ${traceroute.channel_id}` : '' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li>
|
|
<div class="relative flex items-center">
|
|
<div class="block flex-1 px-4 py-2">
|
|
<div class="relative flex min-w-0 flex-1 items-center">
|
|
<div class="truncate">
|
|
<div class="text-sm text-gray-700">No traceroutes seen on MQTT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</template> |