feat: add main page links to probes

jsdelivr · Aug 27, 2024 · 13e8c86 · 13e8c86
1 parent 00b3f3c
commit 13e8c86
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 52 deletions.
diff --git a/components/ProbeHeader.vue b/components/ProbeHeader.vue
diff --git a/pages/index.vue b/pages/index.vue
@@ -85,16 +85,15 @@
  <div class="p-6">
  <div v-if="adoptedProbes.length" class="probes-wrapper flex overflow-hidden max-sm:flex-col">
  <div v-for="probe in adoptedProbes" :key="probe.id" class="probe box-content min-w-60 py-2">
- <!-- TODO: P1: clicking the name here should bring me to /probes, with the correct probe expanded and scrolled down to (if needed) -->
- <!-- TODO: P2: a somewhat related bonus to the above - it would be nice if expanding probe details at /probes resulted in URL change -->
- <ProbeHeader
- class="mb-6"
- :name="probe.name || probe.city"
- :ip="probe.ip"
- :status="probe.status"
- :hardware-device="!!probe.hardwareDevice"
- ip-css="text-[13px]"
- />
+ <div class="mb-6 grid grid-cols-[auto_1fr] grid-rows-[auto_auto] gap-x-3">
+ <BigIcon class="col-span-1 row-span-2" :name="probe.hardwareDevice ? 'gp' : 'docker'" border :status="probe.status"/>
+ <div
+ class="col-start-2 col-end-3 flex items-center font-bold"
+ >
+ <NuxtLink class="hover:underline" :to="`/probes/${probe.id}`">{{ probe.name || probe.city }}</NuxtLink>
+ </div>
+ <p class="col-start-2 col-end-3 row-start-2 row-end-3 text-[13px] text-bluegray-400">{{ probe.ip }}</p>
+ </div>
  <div>
  <div class="mb-2 flex items-center text-nowrap">
  <span class="mr-6 font-semibold">Location:</span>

diff --git a/pages/probes.vue b/pages/probes.vue
@@ -26,14 +26,11 @@
  </template>
  <Column header="Name" class="w-1/4" body-class="!p-0">
  <template #body="slotProps">
- <ProbeHeader
- :name="slotProps.data.name || slotProps.data.city"
- :ip="slotProps.data.ip"
- :status="slotProps.data.status"
- :hardware-device="!!slotProps.data.hardwareDevice"
- ip-css="text-bluegray-900 dark:text-bluegray-400"
- class="px-2 py-3"
- />
+ <div class="grid grid-cols-[auto_1fr] grid-rows-[auto_auto] gap-x-3 px-2 py-3">
+ <BigIcon class="col-span-1 row-span-2" :name="slotProps.data.hardwareDevice ? 'gp' : 'docker'" border :status="slotProps.data.status"/>
+ <p class="col-start-2 col-end-3 flex items-center font-bold">{{ slotProps.data.name || slotProps.data.city }}</p>
+ <p class="col-start-2 col-end-3 row-start-2 row-end-3 text-[13px] text-bluegray-900 dark:text-bluegray-400">{{ slotProps.data.ip }}</p>
+ </div>
  </template>
  </Column>
  <Column header="Location" class="w-1/4" body-class="!p-0">

diff --git a/pages/probes/[id].vue b/pages/probes/[id].vue
@@ -8,7 +8,7 @@
  :draggable="false"
  header="Probe details"
  content-class="!p-0"
- @after-hide="router.back"
+ @after-hide="navigateTo('/probes')"
  >
  <div class="relative border-t">
  <div id="gp-map" class="h-44"/>
@@ -197,7 +197,6 @@
  import { sendErrorToast, sendToast } from '~/utils/send-toast';
 
  const { $directus } = useNuxtApp();
- const router = useRouter();
 
  const props = defineProps({
  probe: {