GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-15 04:05:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: share filters across logs and traces views in entity details (#7014)

Browse Source
This commit is contained in:
Amlan Kumar Nandy 2025-02-05 18:18:35 +05:30 committed by GitHub
parent 586f5255f0
commit f548afe284
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 137 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx
View File

@ -141,13 +141,9 @@ function ClusterDetails({
[cluster?.meta.k8s_cluster_name], [cluster?.meta.k8s_cluster_name],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logsAndTracesFilters, setLogsAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -161,8 +157,7 @@ function ClusterDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogsAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -217,7 +212,7 @@ function ClusterDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogsAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_CLUSTER_NAME].includes(item.key?.key ?? ''), [QUERY_KEYS.K8S_CLUSTER_NAME].includes(item.key?.key ?? ''),
); );
@ -249,7 +244,7 @@ function ClusterDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogsAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_CLUSTER_NAME].includes(item.key?.key ?? ''), [QUERY_KEYS.K8S_CLUSTER_NAME].includes(item.key?.key ?? ''),
); );
@ -325,8 +320,8 @@ function ClusterDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logsAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logsAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -360,7 +355,7 @@ function ClusterDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logsAndTracesFilters,
}, },
], ],
}, },
@ -524,7 +519,7 @@ function ClusterDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logsAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="clusterLogs" queryKey="clusterLogs"
category={K8sCategory.CLUSTERS} category={K8sCategory.CLUSTERS}
@ -537,9 +532,10 @@ function ClusterDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logsAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="clusterTraces" queryKey="clusterTraces"
queryKeyFilters={[QUERY_KEYS.K8S_CLUSTER_NAME]}
/> />
)} )}
{selectedView === VIEW_TYPES.EVENTS && ( {selectedView === VIEW_TYPES.EVENTS && (

31
frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx
View File

@ -155,13 +155,9 @@ function DaemonSetDetails({
[daemonSet?.meta.k8s_daemonset_name], [daemonSet?.meta.k8s_daemonset_name],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logAndTracesFilters, setLogAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -175,8 +171,7 @@ function DaemonSetDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -231,7 +226,7 @@ function DaemonSetDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_DAEMON_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_DAEMON_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -264,7 +259,7 @@ function DaemonSetDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_DAEMON_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_DAEMON_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -344,8 +339,8 @@ function DaemonSetDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -379,7 +374,7 @@ function DaemonSetDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logAndTracesFilters,
}, },
], ],
}, },
@ -556,7 +551,7 @@ function DaemonSetDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
category={K8sCategory.DAEMONSETS} category={K8sCategory.DAEMONSETS}
queryKey="daemonsetLogs" queryKey="daemonsetLogs"
@ -572,9 +567,13 @@ function DaemonSetDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="daemonsetTraces" queryKey="daemonsetTraces"
queryKeyFilters={[
QUERY_KEYS.K8S_DAEMON_SET_NAME,
QUERY_KEYS.K8S_NAMESPACE_NAME,
]}
/> />
)} )}
{selectedView === VIEW_TYPES.EVENTS && ( {selectedView === VIEW_TYPES.EVENTS && (

31
frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx
View File

@ -157,13 +157,9 @@ function DeploymentDetails({
[deployment?.meta.k8s_deployment_name], [deployment?.meta.k8s_deployment_name],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logAndTracesFilters, setLogAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -177,8 +173,7 @@ function DeploymentDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -233,7 +228,7 @@ function DeploymentDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_DEPLOYMENT_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_DEPLOYMENT_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -271,7 +266,7 @@ function DeploymentDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_DEPLOYMENT_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_DEPLOYMENT_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -355,8 +350,8 @@ function DeploymentDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -390,7 +385,7 @@ function DeploymentDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logAndTracesFilters,
}, },
], ],
}, },
@ -567,7 +562,7 @@ function DeploymentDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKeyFilters={[ queryKeyFilters={[
QUERY_KEYS.K8S_DEPLOYMENT_NAME, QUERY_KEYS.K8S_DEPLOYMENT_NAME,
@ -583,9 +578,13 @@ function DeploymentDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="deploymentTraces" queryKey="deploymentTraces"
queryKeyFilters={[
QUERY_KEYS.K8S_DEPLOYMENT_NAME,
QUERY_KEYS.K8S_NAMESPACE_NAME,
]}
/> />
)} )}
{selectedView === VIEW_TYPES.EVENTS && ( {selectedView === VIEW_TYPES.EVENTS && (

5
frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogsDetailedView.tsx
View File

@ -12,6 +12,7 @@ import { useMemo } from 'react';
import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
import { DataSource } from 'types/common/queryBuilder'; import { DataSource } from 'types/common/queryBuilder';
import { filterOutPrimaryFilters } from '../utils';
import EntityLogs from './EntityLogs'; import EntityLogs from './EntityLogs';
interface Props { interface Props {
@ -58,14 +59,14 @@ function EntityLogsDetailedView({
...currentQuery.builder.queryData[0].aggregateAttribute, ...currentQuery.builder.queryData[0].aggregateAttribute,
}, },
filters: { filters: {
items: [], items: filterOutPrimaryFilters(logFilters.items, queryKeyFilters),
op: 'AND', op: 'AND',
}, },
}, },
], ],
}, },
}), }),
[currentQuery], [currentQuery, logFilters.items, queryKeyFilters],
); );
const query = updatedCurrentQuery?.builder?.queryData[0] || null; const query = updatedCurrentQuery?.builder?.queryData[0] || null;

7
frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx
View File

@ -26,6 +26,7 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
import { DataSource } from 'types/common/queryBuilder'; import { DataSource } from 'types/common/queryBuilder';
import { import {
filterOutPrimaryFilters,
getEntityTracesQueryPayload, getEntityTracesQueryPayload,
selectedEntityTracesColumns, selectedEntityTracesColumns,
} from '../utils'; } from '../utils';
@ -44,6 +45,7 @@ interface Props {
tracesFilters: IBuilderQuery['filters']; tracesFilters: IBuilderQuery['filters'];
selectedInterval: Time; selectedInterval: Time;
queryKey: string; queryKey: string;
queryKeyFilters: string[];
} }
function EntityTraces({ function EntityTraces({
@ -54,6 +56,7 @@ function EntityTraces({
tracesFilters, tracesFilters,
selectedInterval, selectedInterval,
queryKey, queryKey,
queryKeyFilters,
}: Props): JSX.Element { }: Props): JSX.Element {
const [traces, setTraces] = useState<any[]>([]); const [traces, setTraces] = useState<any[]>([]);
const [offset] = useState<number>(0); const [offset] = useState<number>(0);
@ -73,14 +76,14 @@ function EntityTraces({
...currentQuery.builder.queryData[0].aggregateAttribute, ...currentQuery.builder.queryData[0].aggregateAttribute,
}, },
filters: { filters: {
items: [], items: filterOutPrimaryFilters(tracesFilters.items, queryKeyFilters),
op: 'AND', op: 'AND',
}, },
}, },
], ],
}, },
}), }),
[currentQuery], [currentQuery, queryKeyFilters, tracesFilters.items],
); );
const query = updatedCurrentQuery?.builder?.queryData[0] || null; const query = updatedCurrentQuery?.builder?.queryData[0] || null;

14
frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/utils.tsx
View File

@ -7,7 +7,10 @@ import {
BaseAutocompleteData, BaseAutocompleteData,
DataTypes, DataTypes,
} from 'types/api/queryBuilder/queryAutocompleteResponse'; } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import {
IBuilderQuery,
TagFilterItem,
} from 'types/api/queryBuilder/queryBuilderData';
import { EQueryType } from 'types/common/dashboard'; import { EQueryType } from 'types/common/dashboard';
import { DataSource } from 'types/common/queryBuilder'; import { DataSource } from 'types/common/queryBuilder';
import { nanoToMilli } from 'utils/timeUtils'; import { nanoToMilli } from 'utils/timeUtils';
@ -301,3 +304,12 @@ export const getEntityTracesQueryPayload = (
], ],
}, },
}); });
export const filterOutPrimaryFilters = (
filters: TagFilterItem[],
primaryKeys: string[],
): TagFilterItem[] =>
filters.filter(
(filter) =>
!primaryKeys.includes(filter.key?.key ?? '') && filter.key?.key !== 'id',
);

40
frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx
View File

@ -152,13 +152,9 @@ function JobDetails({
[job?.meta.k8s_job_name], [job?.meta.k8s_job_name],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logAndTracesFilters, setLogAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -172,8 +168,7 @@ function JobDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -228,17 +223,16 @@ function JobDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_STATEFUL_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_JOB_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
), ),
); );
const paginationFilter = value.items.find((item) => item.key?.key === 'id'); const paginationFilter = value.items.find((item) => item.key?.key === 'id');
const newFilters = value.items.filter( const newFilters = value.items.filter(
(item) => (item) =>
item.key?.key !== 'id' && item.key?.key !== 'id' && item.key?.key !== QUERY_KEYS.K8S_JOB_NAME,
item.key?.key !== QUERY_KEYS.K8S_STATEFUL_SET_NAME,
); );
logEvent('Infra Monitoring: Jobs list details logs filters applied', { logEvent('Infra Monitoring: Jobs list details logs filters applied', {
@ -261,9 +255,9 @@ function JobDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_STATEFUL_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_JOB_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
), ),
); );
@ -277,7 +271,7 @@ function JobDetails({
items: [ items: [
...primaryFilters, ...primaryFilters,
...value.items.filter( ...value.items.filter(
(item) => item.key?.key !== QUERY_KEYS.K8S_STATEFUL_SET_NAME, (item) => item.key?.key !== QUERY_KEYS.K8S_JOB_NAME,
), ),
].filter((item): item is TagFilterItem => item !== undefined), ].filter((item): item is TagFilterItem => item !== undefined),
}; };
@ -335,8 +329,8 @@ function JobDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -370,7 +364,7 @@ function JobDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logAndTracesFilters,
}, },
], ],
}, },
@ -536,7 +530,7 @@ function JobDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
category={K8sCategory.JOBS} category={K8sCategory.JOBS}
queryKey="jobLogs" queryKey="jobLogs"
@ -552,9 +546,13 @@ function JobDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="jobTraces" queryKey="jobTraces"
queryKeyFilters={[
QUERY_KEYS.K8S_JOB_NAME,
QUERY_KEYS.K8S_NAMESPACE_NAME,
]}
/> />
)} )}
{selectedView === VIEW_TYPES.EVENTS && ( {selectedView === VIEW_TYPES.EVENTS && (

28
frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx
View File

@ -143,13 +143,9 @@ function NamespaceDetails({
[namespace?.namespaceName], [namespace?.namespaceName],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logAndTracesFilters, setLogAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -163,8 +159,7 @@ function NamespaceDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -219,7 +214,7 @@ function NamespaceDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_NAMESPACE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes( [QUERY_KEYS.K8S_NAMESPACE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -251,7 +246,7 @@ function NamespaceDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_NAMESPACE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes( [QUERY_KEYS.K8S_NAMESPACE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -331,8 +326,8 @@ function NamespaceDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -366,7 +361,7 @@ function NamespaceDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logAndTracesFilters,
}, },
], ],
}, },
@ -532,7 +527,7 @@ function NamespaceDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="namespaceLogs" queryKey="namespaceLogs"
category={K8sCategory.NAMESPACES} category={K8sCategory.NAMESPACES}
@ -545,9 +540,10 @@ function NamespaceDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="namespaceTraces" queryKey="namespaceTraces"
queryKeyFilters={[QUERY_KEYS.K8S_NAMESPACE_NAME]}
/> />
)} )}
{selectedView === VIEW_TYPES.EVENTS && ( {selectedView === VIEW_TYPES.EVENTS && (

28
frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx
View File

@ -141,13 +141,9 @@ function NodeDetails({
[node?.meta.k8s_node_name], [node?.meta.k8s_node_name],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logAndTracesFilters, setLogAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -161,8 +157,7 @@ function NodeDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -217,7 +212,7 @@ function NodeDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes( [QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -251,7 +246,7 @@ function NodeDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes( [QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -327,8 +322,8 @@ function NodeDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -362,7 +357,7 @@ function NodeDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logAndTracesFilters,
}, },
], ],
}, },
@ -526,7 +521,7 @@ function NodeDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKeyFilters={[QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME]} queryKeyFilters={[QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME]}
queryKey="nodeLogs" queryKey="nodeLogs"
@ -539,8 +534,9 @@ function NodeDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKeyFilters={[QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME]}
queryKey="nodeTraces" queryKey="nodeTraces"
/> />
)} )}

32
frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodDetails.tsx generated
View File

@ -158,13 +158,9 @@ function PodDetails({
[pod?.meta.k8s_pod_name], [pod?.meta.k8s_pod_name],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logsAndTracesFilters, setLogsAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -178,8 +174,7 @@ function PodDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogsAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -234,7 +229,7 @@ function PodDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogsAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[ [
QUERY_KEYS.K8S_POD_NAME, QUERY_KEYS.K8S_POD_NAME,
@ -270,7 +265,7 @@ function PodDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogsAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[ [
QUERY_KEYS.K8S_POD_NAME, QUERY_KEYS.K8S_POD_NAME,
@ -348,8 +343,8 @@ function PodDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logsAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logsAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -383,7 +378,7 @@ function PodDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logsAndTracesFilters,
}, },
], ],
}, },
@ -564,7 +559,7 @@ function PodDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logsAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKeyFilters={[ queryKeyFilters={[
QUERY_KEYS.K8S_POD_NAME, QUERY_KEYS.K8S_POD_NAME,
@ -581,9 +576,14 @@ function PodDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logsAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="podTraces" queryKey="podTraces"
queryKeyFilters={[
QUERY_KEYS.K8S_POD_NAME,
QUERY_KEYS.K8S_CLUSTER_NAME,
QUERY_KEYS.K8S_NAMESPACE_NAME,
]}
/> />
)} )}

31
frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails.tsx
View File

@ -158,13 +158,9 @@ function StatefulSetDetails({
[statefulSet?.meta.k8s_statefulset_name], [statefulSet?.meta.k8s_statefulset_name],
); );
const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>( const [logAndTracesFilters, setLogAndTracesFilters] = useState<
initialFilters, IBuilderQuery['filters']
); >(initialFilters);
const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
initialFilters,
);
const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>( const [eventsFilters, setEventsFilters] = useState<IBuilderQuery['filters']>(
initialEventsFilters, initialEventsFilters,
@ -178,8 +174,7 @@ function StatefulSetDetails({
}, []); }, []);
useEffect(() => { useEffect(() => {
setLogFilters(initialFilters); setLogAndTracesFilters(initialFilters);
setTracesFilters(initialFilters);
setEventsFilters(initialEventsFilters); setEventsFilters(initialEventsFilters);
}, [initialFilters, initialEventsFilters]); }, [initialFilters, initialEventsFilters]);
@ -234,7 +229,7 @@ function StatefulSetDetails({
const handleChangeLogFilters = useCallback( const handleChangeLogFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setLogFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_STATEFUL_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_STATEFUL_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -270,7 +265,7 @@ function StatefulSetDetails({
const handleChangeTracesFilters = useCallback( const handleChangeTracesFilters = useCallback(
(value: IBuilderQuery['filters']) => { (value: IBuilderQuery['filters']) => {
setTracesFilters((prevFilters) => { setLogAndTracesFilters((prevFilters) => {
const primaryFilters = prevFilters.items.filter((item) => const primaryFilters = prevFilters.items.filter((item) =>
[QUERY_KEYS.K8S_STATEFUL_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes( [QUERY_KEYS.K8S_STATEFUL_SET_NAME, QUERY_KEYS.K8S_NAMESPACE_NAME].includes(
item.key?.key ?? '', item.key?.key ?? '',
@ -350,8 +345,8 @@ function StatefulSetDetails({
if (selectedView === VIEW_TYPES.LOGS) { if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = { const filtersWithoutPagination = {
...logFilters, ...logAndTracesFilters,
items: logFilters.items.filter((item) => item.key?.key !== 'id'), items: logAndTracesFilters.items.filter((item) => item.key?.key !== 'id'),
}; };
const compositeQuery = { const compositeQuery = {
@ -385,7 +380,7 @@ function StatefulSetDetails({
{ {
...initialQueryBuilderFormValuesMap.traces, ...initialQueryBuilderFormValuesMap.traces,
aggregateOperator: TracesAggregatorOperator.NOOP, aggregateOperator: TracesAggregatorOperator.NOOP,
filters: tracesFilters, filters: logAndTracesFilters,
}, },
], ],
}, },
@ -551,7 +546,7 @@ function StatefulSetDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeLogFilters={handleChangeLogFilters} handleChangeLogFilters={handleChangeLogFilters}
logFilters={logFilters} logFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="statefulsetLogs" queryKey="statefulsetLogs"
category={K8sCategory.STATEFULSETS} category={K8sCategory.STATEFULSETS}
@ -567,9 +562,13 @@ function StatefulSetDetails({
isModalTimeSelection={isModalTimeSelection} isModalTimeSelection={isModalTimeSelection}
handleTimeChange={handleTimeChange} handleTimeChange={handleTimeChange}
handleChangeTracesFilters={handleChangeTracesFilters} handleChangeTracesFilters={handleChangeTracesFilters}
tracesFilters={tracesFilters} tracesFilters={logAndTracesFilters}
selectedInterval={selectedInterval} selectedInterval={selectedInterval}
queryKey="statefulsetTraces" queryKey="statefulsetTraces"
queryKeyFilters={[
QUERY_KEYS.K8S_STATEFUL_SET_NAME,
QUERY_KEYS.K8S_NAMESPACE_NAME,
]}
/> />
)} )}
{selectedView === VIEW_TYPES.EVENTS && ( {selectedView === VIEW_TYPES.EVENTS && (