feature(frontend): improving error messaging for the trace results (#…

…2398)
kubeshop · Apr 17, 2023 · afe6915 · afe6915
1 parent bdd88ff
commit afe6915
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
+`;