fix: logs explorer - should have atleast 1 column, discard empty key columns (#8740)

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -73,6 +73,8 @@ export default function TableRow({
 			{tableColumns.map((column) => {
 				if (!column.render) return <td>Empty</td>;
 
+				if (!column.key) return null;
+
 				const element: ColumnTypeRender<Record<string, unknown>> = column.render(
 					log[column.key as keyof Record<string, unknown>],
 					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)}
 					</TableCellStyled>

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -136,7 +136,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 									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())}

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.

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,

frontend/src/lib/getChartData.ts

@@ -17,9 +17,9 @@ const getChartData = ({
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 } => {
 	const uniqueTimeLabels = new Set<number>();
-	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()