fix(frontend): add no matches message in trace search (#2690)

kubeshop · Jun 9, 2023 · cd7ed6e · cd7ed6e
1 parent aad17b9
commit cd7ed6e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts b/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts
@@ -1,4 +1,5 @@
 import {CloseCircleFilled} from '@ant-design/icons';
+import {Typography} from 'antd';
 import styled from 'styled-components';
 
 export const Container = styled.div`
@@ -52,3 +53,13 @@ export const ClearSearchIcon = styled(CloseCircleFilled)`
   color: ${({theme}) => theme.color.textLight};
   cursor: pointer;
 `;
+
+export const NoMatchesContainer = styled.div`
+  color: ${({theme}) => theme.color.textSecondary};
+  margin-top: 8px;
+  margin-left: 8px;
+`;
+
+export const NoMatchesText = styled(Typography.Text)`
+  color: ${({theme}) => theme.color.textSecondary};
+`;
diff --git a/web/src/components/RunDetailTrace/Search.tsx b/web/src/components/RunDetailTrace/Search.tsx
@@ -1,13 +1,16 @@
-import {Col, Row} from 'antd';
+import {CloseCircleOutlined} from '@ant-design/icons';
+import {Col, Row, Space} from 'antd';
 import {debounce} from 'lodash';
-import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import {useCallback, useMemo, useState} from 'react';
+
+import Editor from 'components/Editor';
+import {SupportedEditors} from 'constants/Editor.constants';
+import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import {useLazyGetSelectedSpansQuery} from 'redux/apis/TraceTest.api';
-import {useAppDispatch} from 'redux/hooks';
+import {useAppDispatch, useAppSelector} from 'redux/hooks';
 import {matchSpans, selectSpan, setSearchText} from 'redux/slices/Trace.slice';
+import TraceSelectors from 'selectors/Trace.selectors';
 import SpanService from 'services/Span.service';
-import Editor from 'components/Editor';
-import {SupportedEditors} from 'constants/Editor.constants';
 import EditorService from 'services/Editor.service';
 import * as S from './RunDetailTrace.styled';
 
@@ -19,6 +22,7 @@ interface IProps {
 const Search = ({runId, testId}: IProps) => {
   const [search, setSearch] = useState('');
   const dispatch = useAppDispatch();
+  const matchedSpans = useAppSelector(TraceSelectors.selectMatchedSpans);
   const {
     run: {trace: {spans = []} = {}},
   } = useTestRun();
@@ -43,7 +47,9 @@ const Search = ({runId, testId}: IProps) => {
       }
 
       dispatch(matchSpans({spanIds}));
-      dispatch(selectSpan({spanId: spanIds[0]}));
+      if (spanIds.length) {
+        dispatch(selectSpan({spanId: spanIds[0]}));
+      }
     },
     [dispatch, getSelectedSpans, runId, spans, testId]
   );
@@ -66,7 +72,15 @@ const Search = ({runId, testId}: IProps) => {
           }}
           value={search}
         />
-        {Boolean(search) && <S.ClearSearchIcon onClick={onClear} />}
+        {!!search && <S.ClearSearchIcon onClick={onClear} />}
+        {!!search && !matchedSpans.length && (
+          <S.NoMatchesContainer>
+            <Space>
+              <CloseCircleOutlined />
+              <S.NoMatchesText>No matches found</S.NoMatchesText>
+            </Space>
+          </S.NoMatchesContainer>
+        )}
       </Col>
     </Row>
   );