From afe6915e28a7414db20f012a59517d0dd772f977 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Mon, 17 Apr 2023 13:21:06 -0600
Subject: [PATCH] feature(frontend): improving error messaging for the trace
 results (#2398)

---
 server/executor/trace_poller.go               |  2 +-
 .../RunEvents/RunEventDataStore.tsx           | 19 ++++++++++++++-----
 .../components/RunEvents/RunEvents.styled.ts  |  7 +++++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/server/executor/trace_poller.go b/server/executor/trace_poller.go
index 73b8791d58..b44620d43a 100644
--- a/server/executor/trace_poller.go
+++ b/server/executor/trace_poller.go
@@ -216,7 +216,7 @@ func (tp tracePoller) handleTraceDBError(job PollingRequest, err error) (bool, s
 	reason := ""
 
 	if errors.Is(err, connection.ErrTraceNotFound) {
-		reason = "Timed out without finding trace"
+		reason = fmt.Sprintf("Timed out without finding trace, trace id \"%s\"", run.TraceID.String())
 
 		err = fmt.Errorf("timed out waiting for traces after %s", pp.Timeout)
 		fmt.Println("[TracePoller] Timed-out", err)
diff --git a/web/src/components/RunEvents/RunEventDataStore.tsx b/web/src/components/RunEvents/RunEventDataStore.tsx
index 6efa815b29..4db904b792 100644
--- a/web/src/components/RunEvents/RunEventDataStore.tsx
+++ b/web/src/components/RunEvents/RunEventDataStore.tsx
@@ -1,4 +1,5 @@
 import {Typography} from 'antd';
+import {Link} from 'react-router-dom';
 import TestConnectionNotification from 'components/TestConnectionNotification/TestConnectionNotification';
 import {IPropsEvent} from './RunEvent';
 import * as S from './RunEvents.styled';
@@ -10,11 +11,19 @@ const RunEventDataStore = ({event}: IPropsEvent) => (
     <Typography.Text>{event.description}</Typography.Text>
     {!!event.dataStoreConnection && (
       <S.Content>
-        <Typography.Title level={3}>
-          {event.dataStoreConnection?.allPassed
-            ? 'Data store configuration is valid.'
-            : 'Data store configuration is not valid.'}
-        </Typography.Title>
+        {event.dataStoreConnection?.allPassed ? (
+          <Typography.Title level={3}>Data store configuration is valid.</Typography.Title>
+        ) : (
+          <S.InvalidDataStoreContainer>
+            <Typography.Title level={3} style={{margin: 0}}>
+              Data store configuration is not valid.
+            </Typography.Title>
+            <Typography.Text>
+              You can go to the <Link to="/settings">settings page</Link> to fix it.
+            </Typography.Text>
+          </S.InvalidDataStoreContainer>
+        )}
+
         <TestConnectionNotification result={event.dataStoreConnection} />
       </S.Content>
     )}
diff --git a/web/src/components/RunEvents/RunEvents.styled.ts b/web/src/components/RunEvents/RunEvents.styled.ts
index 997decae6c..4c616ec3de 100644
--- a/web/src/components/RunEvents/RunEvents.styled.ts
+++ b/web/src/components/RunEvents/RunEvents.styled.ts
@@ -88,3 +88,10 @@ export const LoadingIcon = styled(LoadingOutlined)`
 export const Paragraph = styled(Typography.Paragraph)`
   text-align: center;
 `;
+
+export const InvalidDataStoreContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 5px;
+`;