From c1664dde6a34d3a68b2ea6f54d2c6177a79887ae Mon Sep 17 00:00:00 2001
From: dnazarenkoo <134951516+dnazarenkoo@users.noreply.github.com>
Date: Thu, 6 Jul 2023 17:00:00 +0300
Subject: [PATCH] fix: issue #3034, add columns to end of the list (#3035)

* fix: issue #3034, add columns to end of the list

* fix: #3033 replace columns
---
 .../TracesExplorer/ListView/configs.tsx       |  6 ++---
 .../TracesExplorer/ListView/utils.tsx         | 23 ++++++++-----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/src/container/TracesExplorer/ListView/configs.tsx b/frontend/src/container/TracesExplorer/ListView/configs.tsx
index 3b05ed8169..308ca1995e 100644
--- a/frontend/src/container/TracesExplorer/ListView/configs.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/configs.tsx
@@ -1,11 +1,11 @@
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const defaultSelectedColumns: string[] = [
-	'name',
 	'serviceName',
-	'responseStatusCode',
-	'httpMethod',
+	'name',
 	'durationNano',
+	'httpMethod',
+	'responseStatusCode',
 ];
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
diff --git a/frontend/src/container/TracesExplorer/ListView/utils.tsx b/frontend/src/container/TracesExplorer/ListView/utils.tsx
index eb6be9a90d..350ba98a6d 100644
--- a/frontend/src/container/TracesExplorer/ListView/utils.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/utils.tsx
@@ -28,21 +28,18 @@ export const modifyColumns = (
 	columns: ColumnsType<RowData>,
 	selectedColumns: BaseAutocompleteData[],
 ): ColumnsType<RowData> => {
-	const initialColumns = columns.filter(({ key }) => {
-		let isValidColumn = true;
+	const initialColumns = selectedColumns.reduce(
+		(acc, { key: selectedColumnKey }) => {
+			const column = columns.find(({ key }) => selectedColumnKey === key);
 
-		const checkIsExistColumnByKey = (attributeKey: string): boolean =>
-			!selectedColumns.find(({ key }) => key === attributeKey) &&
-			attributeKey === key;
+			if (column) {
+				return [...acc, column];
+			}
 
-		const isSelectedSpanId = checkIsExistColumnByKey('spanID');
-		const isSelectedTraceId = checkIsExistColumnByKey('traceID');
-
-		if (isSelectedSpanId || isSelectedTraceId || key === 'date')
-			isValidColumn = false;
-
-		return isValidColumn;
-	});
+			return acc;
+		},
+		[] as ColumnsType<RowData>,
+	);
 
 	const dateColumn = columns.find(({ key }) => key === 'date');