diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx
index 5977df8730f5..ddb68aa88fb8 100644
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx
@@ -73,6 +73,8 @@ export default function TableRow({
{tableColumns.map((column) => {
if (!column.render) return
Empty | ;
+ if (!column.key) return null;
+
const element: ColumnTypeRender> = column.render(
log[column.key as keyof Record],
log,
@@ -97,6 +99,7 @@ export default function TableRow({
fontSize={fontSize}
columnKey={column.key as string}
onClick={handleShowLogDetails}
+ className={column.key as string}
>
{cloneElement(children, props)}
diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
index 9a75359c8414..91b2508afdae 100644
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
@@ -136,7 +136,7 @@ const InfinityTable = forwardRef(
key={column.key}
fontSize={tableViewProps?.fontSize}
// eslint-disable-next-line react/jsx-props-no-spreading
- {...(isDragColumn && { className: 'dragHandler' })}
+ {...(isDragColumn && { className: `dragHandler ${column.key}` })}
columnKey={column.key as string}
>
{(column.title as string).replace(/^\w/, (c) => c.toUpperCase())}
diff --git a/frontend/src/container/LogsExplorerList/utils.ts b/frontend/src/container/LogsExplorerList/utils.ts
index 90032dfcdbe2..3cb62c39bf80 100644
--- a/frontend/src/container/LogsExplorerList/utils.ts
+++ b/frontend/src/container/LogsExplorerList/utils.ts
@@ -1,4 +1,5 @@
import { TelemetryFieldKey } from 'api/v5/v5';
+import { isEmpty } from 'lodash-es';
import { IField } from 'types/api/logs/fields';
import {
IBuilderQuery,
@@ -8,11 +9,13 @@ import {
export const convertKeysToColumnFields = (
keys: TelemetryFieldKey[],
): IField[] =>
- keys.map((item) => ({
- dataType: item.fieldDataType ?? '',
- name: item.name,
- type: item.fieldContext ?? '',
- }));
+ keys
+ .filter((item) => !isEmpty(item.name))
+ .map((item) => ({
+ dataType: item.fieldDataType ?? '',
+ name: item.name,
+ type: item.fieldContext ?? '',
+ }));
/**
* Determines if a query represents a trace-to-logs navigation
* by checking for the presence of a trace_id filter.
diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
index 9fd41231f0ed..5432ebab2b04 100644
--- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts
+++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
@@ -6,6 +6,7 @@ import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKey
import useDebounce from 'hooks/useDebounce';
import { useNotifications } from 'hooks/useNotifications';
import useUrlQueryData from 'hooks/useUrlQueryData';
+import { has } from 'lodash-es';
import { AllTraceFilterKeyValue } from 'pages/TracesExplorer/Filter/filterUtils';
import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -452,7 +453,9 @@ const useOptionsMenu = ({
() => ({
addColumn: {
isFetching: isSearchedAttributesFetchingV5,
- value: preferences?.columns || defaultOptionsQuery.selectColumns,
+ value:
+ preferences?.columns.filter((item) => has(item, 'name')) ||
+ defaultOptionsQuery.selectColumns.filter((item) => has(item, 'name')),
options: optionsFromAttributeKeys || [],
onFocus: handleFocus,
onBlur: handleBlur,
diff --git a/frontend/src/lib/getChartData.ts b/frontend/src/lib/getChartData.ts
index 3742487366bc..cd0ebcebf857 100644
--- a/frontend/src/lib/getChartData.ts
+++ b/frontend/src/lib/getChartData.ts
@@ -17,9 +17,9 @@ const getChartData = ({
// eslint-disable-next-line sonarjs/cognitive-complexity
} => {
const uniqueTimeLabels = new Set();
- queryData.forEach((data) => {
- data.queryData.forEach((query) => {
- query.values.forEach((value) => {
+ queryData?.forEach((data) => {
+ data.queryData?.forEach((query) => {
+ query.values?.forEach((value) => {
uniqueTimeLabels.add(value[0]);
});
});
@@ -27,8 +27,8 @@ const getChartData = ({
const labels = Array.from(uniqueTimeLabels).sort((a, b) => a - b);
- const response = queryData.map(
- ({ queryData, query: queryG, legend: legendG }) =>
+ const response =
+ queryData?.map(({ queryData, query: queryG, legend: legendG }) =>
queryData.map((e) => {
const { values = [], metric, legend, queryName } = e || {};
const labelNames = getLabelName(
@@ -61,7 +61,7 @@ const getChartData = ({
second: filledDataValues.map((e) => e.second || 0),
};
}),
- );
+ ) || [];
const modifiedData = response
.flat()