diff --git a/pkg/rest/stats.go b/pkg/rest/stats.go index 915d051..ed75df5 100644 --- a/pkg/rest/stats.go +++ b/pkg/rest/stats.go @@ -256,6 +256,7 @@ func (c *Context) packetLogsHandler(w http.ResponseWriter, r *http.Request) { pos = i } } + search := r.FormValue("search") // get all users users := c.UserStore.ListUsers() userMap := make(map[string]string) @@ -314,7 +315,7 @@ func (c *Context) packetLogsHandler(w http.ResponseWriter, r *http.Request) { } timestamp = timestamp.Add(time.Duration(offset) * time.Minute) if dateEqual(timestamp, date) { - if !filterLogRecord(logTypeFilter, inputSplit[1]) { + if !filterLogRecord(logTypeFilter, inputSplit[1]) && matchesSearch(search, inputSplit) { row := LogRow{ Timestamp: timestamp.Format("2006-01-02 15:04:05"), Data: inputSplit[1:], @@ -415,3 +416,14 @@ func filterLogRecord(logTypeFilter []string, logType string) bool { } return false } +func matchesSearch(search string, data []string) bool { + if search == "" { + return true + } + for _, element := range data { + if strings.Contains(element, search) { + return true + } + } + return false +} diff --git a/webapp/src/Routes/PacketLogs/PacketLogs.tsx b/webapp/src/Routes/PacketLogs/PacketLogs.tsx index 3f9ab1a..8f2b681 100644 --- a/webapp/src/Routes/PacketLogs/PacketLogs.tsx +++ b/webapp/src/Routes/PacketLogs/PacketLogs.tsx @@ -1,9 +1,9 @@ -import { Card, Container, Text, Table, Title, Button, Grid, Select, MultiSelect, Popover, Group} from "@mantine/core"; +import { Card, Container, Text, Table, Title, Button, Grid, Select, MultiSelect, Popover, Group, TextInput, rem, ActionIcon, Highlight} from "@mantine/core"; import { AppSettings } from "../../Constants/Constants"; -import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useInfiniteQuery } from "@tanstack/react-query"; import { useAuthContext } from "../../Auth/Auth"; import { Link, useSearchParams } from "react-router-dom"; -import { TbSettings } from "react-icons/tb"; +import { TbArrowRight, TbSearch, TbSettings } from "react-icons/tb"; import { DatePickerInput } from "@mantine/dates"; import { useEffect, useState } from "react"; import React from "react"; @@ -44,12 +44,14 @@ export function PacketLogs() { const dateParam = currentQueryParameters.get("date") const userParam = currentQueryParameters.get("user") const [logType, setLogType] = useState([]) + const [search, setSearch] = useState("") + const [searchParam, setSearchParam] = useState("") const [logsDate, setLogsDate] = useState(dateParam === null ? new Date() : new Date(dateParam)); const [user, setUser] = useState(userParam === null ? "all" : userParam) const { isPending, fetchNextPage, hasNextPage, error, data } = useInfiniteQuery({ - queryKey: ['packetlogs', user, logsDate, logType], + queryKey: ['packetlogs', user, logsDate, logType, searchParam], queryFn: async ({ pageParam }) => - fetch(AppSettings.url + '/stats/packetlogs/'+(user === undefined || user === "" ? "all" : user)+'/'+(logsDate == undefined ? getDate(new Date()) : getDate(logsDate)) + "?pos="+pageParam+"&offset="+timezoneOffset+"&logtype="+encodeURIComponent(logType.join(",")), { + fetch(AppSettings.url + '/stats/packetlogs/'+(user === undefined || user === "" ? "all" : user)+'/'+(logsDate == undefined ? getDate(new Date()) : getDate(logsDate)) + "?pos="+pageParam+"&offset="+timezoneOffset+"&logtype="+encodeURIComponent(logType.join(","))+"&search="+encodeURIComponent(searchParam), { headers: { "Content-Type": "application/json", "Authorization": "Bearer " + authInfo.token @@ -62,6 +64,12 @@ export function PacketLogs() { getNextPageParam: (lastRequest) => lastRequest.logData.nextPos === -1 ? null : lastRequest.logData.nextPos, }) + const captureEnter = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + setSearchParam(search) + } + } + useEffect(() => { const handleScroll = () => { const { scrollTop, clientHeight, scrollHeight } = @@ -113,7 +121,7 @@ export function PacketLogs() { {row.t} {row.d.map((element, y) => { return ( - {element} + {searchParam === "" ? element : {element}} ) })} @@ -126,7 +134,22 @@ export function PacketLogs() { Packet Logs - + + } + rightSection={ + setSearchParam(search)}> + + + } + onKeyDown={(e) => captureEnter(e)} + onChange={(e) => setSearch(e.currentTarget.value)} + value={search} + /> +