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()