Copy

<script setup lang="ts">
import EventTable from "components/EventTable/EventTable.vue";
import LiveUpdateButton from "components/LiveUpdateButton.vue";
import { useLogEntries } from "composables/useLogEntries";
import { useQuerySync } from "composables/useQuerySync";
import { useFilterStore } from "src/store";
import { formatLocalNumber } from "utils/formatting";

const filterStore = useFilterStore();

useQuerySync(filterStore.state, {
  remote_addr: { array: true, comma: true },
  dst_port: { array: true, comma: true },
  event: { array: true, comma: true },
  time_start: {},
  time_end: {},
  type: { array: true },
  order_direction: {},
  offset: { number: true },
  limit: { number: true },
  domain: { array: true, comma: true },
  fqdn: { array: true, comma: true },
  asn: { array: true, comma: true },
  country: { array: true, comma: true },
  city: { array: true, comma: true },
  json_fields: { dynamicPrefix: "f:" },
});

const {
  entries,
  total,
  loading,
  connectionStatus,

  connect,
  disconnect,
} = useLogEntries();

function toggleConnection() {
  if (connectionStatus.value === "open") {
    disconnect();
  } else {
    connect();
  }
}
</script>

<template>
  <div class="page-container">
    <EventTable
      :events="entries"
      :total-events="total"
      :loading="loading"
      :filter-actions="filterStore"
    >
      <template #header-right>
        <span class="stat-label">{{ formatLocalNumber(total) }} entries</span>
        <LiveUpdateButton
          :st="connectionStatus"
          @toggleConnection="toggleConnection"
        />
      </template>

      <template #empty-state> No events found. </template>
    </EventTable>
  </div>
</template>