shopdb-flask/plugins/endpoints/frontend/views/EndpointsList.vue

<template>
  <div>
    <div class="page-header">
      <h2>Fleet</h2>
    </div>

    <!-- Filters -->
    <div class="filters">
      <input
        v-model="search"
        type="text"
        class="form-control"
        placeholder="Search endpoints..."
        @input="debouncedSearch"
      />
    </div>

    <div class="card">
      <div v-if="loading" class="loading">Loading...</div>

      <template v-else>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Hostname</th>
                <th>Logged-in User</th>
                <th>Uptime</th>
                <th>CPU</th>
                <th>Memory</th>
                <th>Last Reported</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in endpoints"
                :key="item.assetid"
                class="clickable-row"
                :class="{ disabled: !item.computerid }"
                @click="openPc(item)"
              >
                <td>{{ item.hostname || '-' }}</td>
                <td>{{ item.loggedinuser || '-' }}</td>
                <td>{{ item.uptimedisplay || '-' }}</td>
                <td>{{ formatPercent(item.cpupercent) }}</td>
                <td>{{ formatPercent(item.memorypercent) }}</td>
                <td>{{ formatTime(item.lastreportedat) }}</td>
              </tr>
              <tr v-if="endpoints.length === 0">
                <td colspan="6" style="text-align: center; color: var(--text-light);">
                  No endpoints found
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Pagination -->
        <PaginationBar
          :page="page"
          :totalPages="totalPages"
          :perPage="perPage"
          @update:page="goToPage"
          @update:perPage="changePerPage"
        />
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { endpointsApi } from '@/api'
import PaginationBar from '@/components/PaginationBar.vue'
import { useListQuery } from '@/composables/listQuery'

const router = useRouter()
const endpoints = ref([])
const loading = ref(true)
const { page, search, setPage, setSearch } = useListQuery({ onChange: loadEndpoints })
const totalPages = ref(1)
const perPage = ref(20)

let searchTimeout = null

onMounted(() => {
  loadEndpoints()
})

async function loadEndpoints() {
  loading.value = true
  try {
    const params = {
      page: page.value,
      perpage: perPage.value
    }
    if (search.value) params.search = search.value

    const response = await endpointsApi.list(params)
    endpoints.value = response.data.data || []
    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
  } catch (error) {
    console.error('Error loading endpoints:', error)
  } finally {
    loading.value = false
  }
}

// Interoperate with PC Details instead of a bespoke detail page: a row only
// navigates when it resolved to a computerid.
function openPc(item) {
  if (item.computerid) {
    router.push(`/pcs/${item.computerid}`)
  }
}

function formatPercent(value) {
  if (value === null || value === undefined) return '-'
  return `${Math.round(value)}%`
}

function formatTime(value) {
  if (!value) return '-'
  return new Date(value).toLocaleString()
}

function debouncedSearch() {
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    setSearch(search.value)
    loadEndpoints()
  }, 300)
}

function goToPage(p) {
  setPage(p)
  loadEndpoints()
}

function changePerPage(newPerPage) {
  perPage.value = newPerPage
  setPage(1)
  loadEndpoints()
}
</script>

<style scoped>
.clickable-row.disabled {
  cursor: default;
  opacity: 0.6;
}
</style>