From bdf2bbce3c3d0469de209b5d3f616f5665f3d489 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Tue, 18 Jun 2024 23:35:04 +0530 Subject: [PATCH 1/2] readme - updated the demo app url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b48d8ef7..1aedc2b5 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ For complete Parseable API documentation, refer to [Parseable API workspace on P - + From 29637549c885e31f70a0f7eb5018b6e828c01c99 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Sun, 30 Jun 2024 15:06:37 +0530 Subject: [PATCH 2/2] error views for log table --- src/hooks/useGetLogStreamSchema.ts | 23 ++++++++----- src/hooks/useQueryLogs.ts | 9 +++-- .../Stream/Views/Explore/StaticLogTable.tsx | 3 +- src/pages/Stream/index.tsx | 33 ++++++++++++++++--- 4 files changed, 50 insertions(+), 18 deletions(-) diff --git a/src/hooks/useGetLogStreamSchema.ts b/src/hooks/useGetLogStreamSchema.ts index f07bf688..4ea0ef90 100644 --- a/src/hooks/useGetLogStreamSchema.ts +++ b/src/hooks/useGetLogStreamSchema.ts @@ -6,17 +6,19 @@ import { Field } from '@/@types/parseable/dataType'; import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; import { useLogsStore, logsStoreReducers } from '@/pages/Stream/providers/LogsProvider'; import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/StreamProvider'; +import { AxiosError } from 'axios'; +import _ from 'lodash'; -const {setStreamSchema} = streamStoreReducers; -const {setTableHeaders} = logsStoreReducers; +const { setStreamSchema } = streamStoreReducers; +const { setTableHeaders } = logsStoreReducers; export const useGetLogStreamSchema = () => { const [data, setData] = useMountedState(null); const [error, setError] = useMountedState(null); const [loading, setLoading] = useMountedState(false); const [currentStream] = useAppStore((store) => store.currentStream); - const [, setLogsStore] = useLogsStore(_store => null); - const [, setStreamStore] = useStreamStore(_store => null); + const [, setLogsStore] = useLogsStore((_store) => null); + const [, setStreamStore] = useStreamStore((_store) => null); const getDataSchema = async (stream: string | null = currentStream) => { try { @@ -31,16 +33,19 @@ export const useGetLogStreamSchema = () => { const schema = res.data; setData(schema); - setStreamStore(store => setStreamSchema(store, schema)) - setLogsStore(store => setTableHeaders(store, schema)) + setStreamStore((store) => setStreamSchema(store, schema)); + setLogsStore((store) => setTableHeaders(store, schema)); break; } default: { - setError('Failed to get log schema'); + const errorMessage = res?.data; + setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to fetch schema'); } } - } catch { - setError('Failed to get log schema'); + } catch (e) { + const axiosError = e as AxiosError; + const errorMessage = axiosError?.response?.data; + setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to fetch schema'); } finally { setLoading(false); } diff --git a/src/hooks/useQueryLogs.ts b/src/hooks/useQueryLogs.ts index 2c579088..32ee30ce 100644 --- a/src/hooks/useQueryLogs.ts +++ b/src/hooks/useQueryLogs.ts @@ -8,6 +8,7 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; import { useQueryResult } from './useQueryResult'; import _ from 'lodash'; import { useStreamStore } from '@/pages/Stream/providers/StreamProvider'; +import { AxiosError } from 'axios'; const { setData, setTotalCount } = logsStoreReducers; @@ -40,7 +41,7 @@ export const useQueryLogs = () => { }, }); const [currentStream] = useAppStore((store) => store.currentStream); - const [schema] = useStreamStore(store => store.schema) + const [schema] = useStreamStore((store) => store.schema); const [ { timeRange, @@ -97,8 +98,10 @@ export const useQueryLogs = () => { return setLogsStore((store) => setData(store, [], schema)); } setError('Failed to query log'); - } catch { - setError('Failed to query log'); + } catch (e) { + const axiosError = e as AxiosError; + const errorMessage = axiosError?.response?.data; + setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to query log'); return setLogsStore((store) => setData(store, [], schema)); } finally { setLoading(false); diff --git a/src/pages/Stream/Views/Explore/StaticLogTable.tsx b/src/pages/Stream/Views/Explore/StaticLogTable.tsx index 74d4e301..9ecb9b40 100644 --- a/src/pages/Stream/Views/Explore/StaticLogTable.tsx +++ b/src/pages/Stream/Views/Explore/StaticLogTable.tsx @@ -372,8 +372,7 @@ const LogTable = (props: { schemaLoading: boolean }) => { }, [currentOffset]); const [pageData] = useLogsStore((store) => store.tableOpts.pageData); - const [headers] = useLogsStore((store) => store.tableOpts.headers); - const hasContentLoaded = props.schemaLoading === false && logsLoading === false && headers.length !== 0; + const hasContentLoaded = props.schemaLoading === false && logsLoading === false; const errorMessage = logsError; const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0; const showTable = hasContentLoaded && !hasNoData && !errorMessage; diff --git a/src/pages/Stream/index.tsx b/src/pages/Stream/index.tsx index a3fc176a..bd08ee60 100644 --- a/src/pages/Stream/index.tsx +++ b/src/pages/Stream/index.tsx @@ -1,6 +1,6 @@ import { Box, Stack, rem } from '@mantine/core'; import { useDocumentTitle } from '@mantine/hooks'; -import { FC, useEffect } from 'react'; +import { FC, useCallback, useEffect } from 'react'; import StaticLogTable from './Views/Explore/StaticLogTable'; import LiveLogTable from './Views/LiveTail/LiveLogTable'; import ViewLog from './components/ViewLog'; @@ -15,9 +15,26 @@ import { PRIMARY_HEADER_HEIGHT, SECONDARY_SIDEBAR_WIDTH } from '@/constants/them import PrimaryToolbar from './components/PrimaryToolbar'; import { useParams } from 'react-router-dom'; import { STREAM_VIEWS } from '@/constants/routes'; +import { Text } from '@mantine/core'; +import { RetryBtn } from '@/components/Button/Retry'; const { streamChangeCleanup } = streamStoreReducers; +const SchemaErrorView = (props: { error: string; fetchSchema: () => void }) => { + return ( + + + + {props.error || 'Error'} + + + + + + + ); +}; + const Logs: FC = () => { useDocumentTitle('Parseable | Stream'); const { view } = useParams(); @@ -27,10 +44,14 @@ const Logs: FC = () => { const { getDataSchema, loading, error } = useGetLogStreamSchema(); + const fetchSchema = useCallback(() => { + setStreamStore(streamChangeCleanup); + getDataSchema(); + }, []); + useEffect(() => { if (!_.isEmpty(currentStream)) { - setStreamStore(streamChangeCleanup); - getDataSchema(); + fetchSchema(); } }, [currentStream]); @@ -58,7 +79,11 @@ const Logs: FC = () => { {view === 'explore' && } {view === 'explore' ? ( - + error ? ( + + ) : ( + + ) ) : view === 'live-tail' ? ( ) : (
URLhttps://demo.parseable.iohttps://demo.parseable.com
Username