AdguardTeam/AdGuardHome
1
0
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2026-10-12 02:01:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix query log search issue

Browse Source
This commit is contained in:
Ildar Kamalov
2026-06-24 13:09:57 +03:00
parent 29f5fcb62c
commit da5d2db92c
3 changed files with 104 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client_v3/src/components/QueryLog/blocks/DetailModal/DetailModal.module.pcss
+10 -10
View File
@@ -21,7 +21,7 @@
min-height: 0;
padding: 0;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
flex: 0 1 auto;
}
}
@@ -34,7 +34,7 @@
padding-bottom: 16px;
-webkit-overflow-scrolling: touch;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
flex: 0 1 auto;
overflow-y: visible;
overscroll-behavior: auto;
@@ -46,7 +46,7 @@
.section {
padding: 0 32px;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
padding: 0;
}
}
@@ -62,7 +62,7 @@
.sectionTitle {
padding: 16px 0 8px;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
padding: 16px 16px 8px 16px;
}
}
@@ -75,7 +75,7 @@
padding: 8px 0;
font-weight: var(--weight-semi-bold);
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
padding: 8px 16px;
}
}
@@ -117,7 +117,7 @@
position: relative;
z-index: 1;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
flex-shrink: 1;
padding: 16px;
background: transparent;
@@ -149,7 +149,7 @@
position: relative;
z-index: 1;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
padding: 8px 48px 8px 16px;
box-shadow: none;
background: transparent;
@@ -170,7 +170,7 @@
top: 24px;
z-index: 2;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
right: 16px;
top: 16px;
}
@@ -184,7 +184,7 @@
padding: 0;
overflow: hidden;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
display: block;
max-height: none;
padding: 24px 16px;
@@ -199,7 +199,7 @@
min-height: 0;
padding: 0;
@media (min-width: 1024px) and (min-height: 720px) {
@media (min-width: 1024px) and (min-height: 900px) {
display: block;
flex: 0 1 auto;
min-height: auto;
client_v3/src/components/QueryLog/blocks/Header/Header.tsx
+93 -47
View File
@@ -1,4 +1,4 @@
import { createSignal, createMemo, createRenderEffect, onCleanup, Show } from 'solid-js';
import { createSignal, createMemo, createEffect, on, onCleanup, Show } from 'solid-js';
import cn from 'clsx';
import intl from 'panel/common/intl';
@@ -10,11 +10,7 @@ import { Select } from 'panel/common/controls/Select';
import { FaqTooltip } from 'panel/common/ui/FaqTooltip';
import { InlineLoader } from 'panel/common/ui/Loader';
import { IOption } from 'panel/lib/helpers/utils';
import {
QUERY_LOG_REASON_FILTER,
QUERY_LOG_STATUS_FILTER,
DEBOUNCE_FILTER_TIMEOUT,
} from 'panel/helpers/constants';
import { DEBOUNCE_FILTER_TIMEOUT } from 'panel/helpers/constants';
import { useIsMobile } from 'panel/hooks/useIsMobile';
import s from './Header.module.pcss';
@@ -30,46 +26,94 @@ type Props = {
isLoading: boolean;
};
const STATUS_LABEL_KEYS: Record<string, string> = {
all: 'query_log_all_statuses',
processed: 'query_log_processed',
allowed: 'query_log_allowed',
blocked: 'query_log_blocked',
rewritten: 'query_log_rewritten',
};
const STATUS_OPTIONS = [
{
value: 'all',
get label() {
return intl.getMessage('query_log_all_statuses');
},
},
{
value: 'processed',
get label() {
return intl.getMessage('query_log_processed');
},
},
{
value: 'allowed',
get label() {
return intl.getMessage('query_log_allowed');
},
},
{
value: 'blocked',
get label() {
return intl.getMessage('query_log_blocked');
},
},
{
value: 'rewritten',
get label() {
return intl.getMessage('query_log_rewritten');
},
},
];
const REASON_LABEL_KEYS: Record<string, string> = {
all: 'query_log_all_reasons',
FilteredBlackList: 'query_log_blocked_by_filter',
FilteredBlockedService: 'query_log_blocked_services',
FilteredSafeBrowsing: 'query_log_blocked_threats',
FilteredParental: 'query_log_blocked_by_parental_control',
Rewrite: 'dns_rewrites',
FilteredSafeSearch: 'query_log_safe_search',
};
const REASON_OPTIONS = [
{
value: 'all',
get label() {
return intl.getMessage('query_log_all_reasons');
},
},
{
value: 'FilteredBlackList',
get label() {
return intl.getMessage('query_log_blocked_by_filter');
},
},
{
value: 'FilteredBlockedService',
get label() {
return intl.getMessage('query_log_blocked_services');
},
},
{
value: 'FilteredSafeBrowsing',
get label() {
return intl.getMessage('query_log_blocked_threats');
},
},
{
value: 'FilteredParental',
get label() {
return intl.getMessage('query_log_blocked_by_parental_control');
},
},
{
value: 'Rewrite',
get label() {
return intl.getMessage('dns_rewrites');
},
},
{
value: 'FilteredSafeSearch',
get label() {
return intl.getMessage('query_log_safe_search');
},
},
];
export const Header = (props: Props) => {
const [searchValue, setSearchValue] = createSignal('');
const [searchValue, setSearchValue] = createSignal(props.currentSearch);
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
const isMobile = useIsMobile();
const statusOptions = createMemo(() =>
Object.values(QUERY_LOG_STATUS_FILTER).map((filter) => ({
value: filter.QUERY,
label: intl.getMessage(STATUS_LABEL_KEYS[filter.QUERY]),
})),
);
const reasonOptions = createMemo(() =>
Object.values(QUERY_LOG_REASON_FILTER).map((filter) => ({
value: filter.QUERY,
label: intl.getMessage(REASON_LABEL_KEYS[filter.QUERY]),
})),
);
createRenderEffect(() => {
setSearchValue(props.currentSearch);
});
createEffect(on(
() => props.currentSearch,
(value) => setSearchValue(value),
{ defer: true },
));
const handleSearchChange = (e: Event) => {
const value = (e.target as HTMLInputElement).value;
@@ -98,10 +142,12 @@ export const Header = (props: Props) => {
}
});
const selectedStatus = () =>
statusOptions().find((opt) => opt.value === props.currentStatus) || statusOptions()[0];
const selectedReason = () =>
reasonOptions().find((opt) => opt.value === props.currentReason) || reasonOptions()[0];
const selectedStatus = createMemo(
() => STATUS_OPTIONS.find((opt) => opt.value === props.currentStatus) || STATUS_OPTIONS[0],
);
const selectedReason = createMemo(
() => REASON_OPTIONS.find((opt) => opt.value === props.currentReason) || REASON_OPTIONS[0],
);
return (
<div class={s.header}>
@@ -117,7 +163,7 @@ export const Header = (props: Props) => {
class={s.searchField}
placeholder={intl.getMessage('domain_or_client')}
value={searchValue()}
onChange={handleSearchChange}
onInput={handleSearchChange}
size="small"
prefixIcon={<Icon icon="search" class={s.searchIcon} />}
suffixIcon={
@@ -164,7 +210,7 @@ export const Header = (props: Props) => {
<div class={s.filterField} data-testid="query-log-status-filter">
<Select
size="responsive"
options={statusOptions()}
options={STATUS_OPTIONS}
value={selectedStatus()}
optionTestIdPrefix="query-log-status-option"
onChange={(option: IOption<string>) =>
@@ -180,7 +226,7 @@ export const Header = (props: Props) => {
<div class={s.filterField} data-testid="query-log-reason-filter">
<Select
size="responsive"
options={reasonOptions()}
options={REASON_OPTIONS}
value={selectedReason()}
optionTestIdPrefix="query-log-reason-option"
onChange={(option: IOption<string>) =>
client_v3/src/stores/clientForm.ts
+1 -1
View File
@@ -122,6 +122,7 @@ export const buildClientConfig = (form: ClientFormState) => ({
ids: form.ids.filter((id: string) => id.trim() !== ''),
tags: form.tags,
use_global_settings: form.use_global_settings,
use_global_blocked_services: form.use_global_settings,
filtering_enabled: form.filtering_enabled,
safebrowsing_enabled: form.safebrowsing_enabled,
parental_enabled: form.parental_enabled,
@@ -129,7 +130,6 @@ export const buildClientConfig = (form: ClientFormState) => ({
ignore_querylog: form.ignore_querylog,
ignore_statistics: form.ignore_statistics,
blocked_services: form.blocked_services,
use_global_blocked_services: form.use_global_blocked_services,
blocked_services_schedule: form.blocked_services_schedule,
upstreams: form.upstreams
? form.upstreams.split('\n').filter((line: string) => line.trim() !== '')