From 4dcc59244a2e6c95c905a0b577680dc76a33b0a8 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Wed, 14 Feb 2024 07:14:22 -0600
Subject: [PATCH] Logs panel: Table UI - Guess string field types (#82397)

* Guess field type for string fields in logs table
---
 .../features/explore/Logs/LogsTable.test.tsx  | 24 ++++++++++++++++++-
 .../app/features/explore/Logs/LogsTable.tsx   |  4 ++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/public/app/features/explore/Logs/LogsTable.test.tsx b/public/app/features/explore/Logs/LogsTable.test.tsx
index 7eb047add6f..b22a2277395 100644
--- a/public/app/features/explore/Logs/LogsTable.test.tsx
+++ b/public/app/features/explore/Logs/LogsTable.test.tsx
@@ -164,7 +164,7 @@ describe('LogsTable', () => {
     });
   });
 
-  it('should not render `tsNs`', async () => {
+  it('should not render `tsNs` column', async () => {
     setup(undefined, getMockLokiFrame());
 
     await waitFor(() => {
@@ -174,6 +174,28 @@ describe('LogsTable', () => {
     });
   });
 
+  it('should render numeric field aligned right', async () => {
+    setup(
+      {
+        columnsWithMeta: {
+          Time: { active: true, percentOfLinesWithLabel: 100, index: 0 },
+          line: { active: true, percentOfLinesWithLabel: 100, index: 1 },
+          tsNs: { active: true, percentOfLinesWithLabel: 100, index: 2 },
+        },
+      },
+      getMockLokiFrame()
+    );
+
+    await waitFor(() => {
+      const columns = screen.queryAllByRole('columnheader', { name: 'tsNs' });
+      expect(columns.length).toBe(1);
+    });
+
+    const cells = screen.queryAllByRole('cell');
+
+    expect(cells[cells.length - 1].style.textAlign).toBe('right');
+  });
+
   it('should not render `labels`', async () => {
     setup();
 
diff --git a/public/app/features/explore/Logs/LogsTable.tsx b/public/app/features/explore/Logs/LogsTable.tsx
index 37ad7591032..23c78fed2bf 100644
--- a/public/app/features/explore/Logs/LogsTable.tsx
+++ b/public/app/features/explore/Logs/LogsTable.tsx
@@ -9,6 +9,7 @@ import {
   DataTransformerConfig,
   Field,
   FieldType,
+  guessFieldTypeForField,
   LogsSortOrder,
   sortDataFrame,
   SplitOpen,
@@ -86,6 +87,9 @@ export function LogsTable(props: Props) {
           // This sets the individual field value as filterable
           filterable: isFieldFilterable(field, logsFrame?.bodyField.name ?? '', logsFrame?.timeField.name ?? ''),
         };
+
+        // If it's a string, then try to guess for a better type for numeric support in viz
+        field.type = field.type === FieldType.string ? guessFieldTypeForField(field) ?? FieldType.string : field.type;
       }
 
       return frameWithOverrides;