1- import { Box , Button , Stack } from '@mui/material' ;
2- import KeyValueList from 'components/shared/KeyValueList' ;
3- import UnderDev from 'components/shared/UnderDev' ;
4- import LogsTable from 'components/tables/Logs' ;
1+ import { Box , Stack } from '@mui/material' ;
52import { useJournalData } from 'hooks/journals/useJournalData' ;
63import useJournalNameForLogs from 'hooks/journals/useJournalNameForLogs' ;
74import useGlobalSearchParams , {
85 GlobalSearchParams ,
96} from 'hooks/searchParams/useGlobalSearchParams' ;
107import { useEffect , useMemo , useState } from 'react' ;
118import { OpsLogFlowDocument } from 'types' ;
12- import { MEGABYTE } from 'utils/dataPlane-utils' ;
13-
14- const maxBytes = Math . round ( MEGABYTE / 25 ) ;
9+ import Error from 'components/shared/Error' ;
10+ import { BASE_ERROR } from 'services/supabase' ;
11+ import LogsTable from 'components/tables/Logs' ;
12+ import { maxBytes , START_OF_LOGS_UUID } from 'components/tables/Logs/shared' ;
13+ import { useIntl } from 'react-intl' ;
1514
1615function Ops ( ) {
16+ const intl = useIntl ( ) ;
17+
1718 const [ fetchingMore , setFetchingMore ] = useState ( false ) ;
1819 const [ olderFinished , setOlderFinished ] = useState ( false ) ;
1920 const [ lastParsed , setLastParsed ] = useState < number > ( 0 ) ;
@@ -24,9 +25,13 @@ function Ops() {
2425
2526 // TODO (typing)
2627 // need to handle typing
27- const { data, loading, refresh } = useJournalData ( name , collectionName , {
28- maxBytes,
29- } ) ;
28+ const { data, error, loading, refresh } = useJournalData (
29+ name ,
30+ collectionName ,
31+ {
32+ maxBytes,
33+ }
34+ ) ;
3035
3136 const documents = useMemo (
3237 ( ) => ( data ?. documents ?? [ ] ) as OpsLogFlowDocument [ ] ,
@@ -47,11 +52,25 @@ function Ops() {
4752 if ( parsedEnd !== lastParsed ) {
4853 if ( documents . length > 0 ) {
4954 const newDocs = [ ...documents , ...docs ] ;
55+
56+ if ( parsedEnd === 0 ) {
57+ newDocs . unshift ( {
58+ _meta : {
59+ uuid : START_OF_LOGS_UUID ,
60+ } ,
61+ level : 'info' ,
62+ message : intl . formatMessage ( {
63+ id : 'ops.logsTable.allOldLogsLoaded' ,
64+ } ) ,
65+ ts : '' ,
66+ } ) ;
67+ }
68+
5069 setDocs ( newDocs ) ;
5170 setFetchingMore ( false ) ;
5271 }
5372 }
54- } , [ data ?. meta , docs , documents , lastParsed ] ) ;
73+ } , [ data ?. meta , docs , documents , intl , lastParsed ] ) ;
5574
5675 useEffect ( ( ) => {
5776 // Get the mete data out of the response
@@ -65,82 +84,49 @@ function Ops() {
6584 // Keep track of where we last read data from so we can keep stepping backwards through the file
6685 setLastParsed ( parsedEnd ?? 0 ) ;
6786
68- // If we have hit 0 then we now we hit the start of the data are nothing older is available
87+ // If we have hit 0 then we now we hit the start of the data any nothing older is available
6988 if ( parsedEnd === 0 ) {
7089 setOlderFinished ( true ) ;
7190 }
7291 } , [ data ?. meta ] ) ;
7392
7493 return (
7594 < Box >
76- < UnderDev />
7795 < Box >
78- < KeyValueList
79- sectionTitle = "Debugging Values"
80- data = { [
81- { title : 'Documents' , val : docs . length } ,
82- { title : 'Last Byte Parsed' , val : lastParsed } ,
83- ] }
84- />
85-
86- < Stack spacing = { 2 } direction = "row" >
87- < Button
88- disabled = { loading || fetchingMore || olderFinished }
89- onClick = { ( ) => {
90- setFetchingMore ( true ) ;
91- refresh ( {
92- offset : 0 ,
93- endOffset : lastParsed ,
94- } ) ;
95- } }
96- >
97- Load Older
98- </ Button >
99-
100- < Button
101- disabled = { loading || fetchingMore }
102- onClick = { ( ) => {
103- setFetchingMore ( true ) ;
104- refresh ( ) ;
105- } }
106- >
107- Load Newer
108- </ Button >
109- </ Stack >
110-
11196 < Stack spacing = { 2 } >
112- { /* <JournalAlerts
113- journalData={journalData}
114- notFoundTitleMessage={
115- <FormattedMessage
116- id="ops.journals.notFound.message"
117- values={{
118- entityType,
119- }}
120- />
121- }
122- />*/ }
123-
124- < LogsTable
125- documents = { docs }
126- loading = { fetchingMore || loading }
127- fetchNewer = { ( ) => {
128- console . log ( 'fetcher latest logs' ) ;
129-
130- // setLoading(true);
131- // setTimeout(() => setLoading(false), 2500);
132- } }
133- fetchOlder = {
134- olderFinished
135- ? undefined
136- : ( ) => {
137- console . log ( 'fetch older logs' ) ;
138-
139- // setLoading(true);
140- // setTimeout(() => setLoading(false), 2500);
141- }
142- }
143- />
97+ { error ? (
98+ < Error
99+ error = { {
100+ ...BASE_ERROR ,
101+ message : error . message ,
102+ } }
103+ condensed
104+ />
105+ ) : null }
106+
107+ < Box >
108+ < LogsTable
109+ documents = { docs }
110+ loading = { fetchingMore || loading }
111+ fetchNewer = { ( ) => {
112+ setFetchingMore ( true ) ;
113+ refresh ( ) ;
114+ } }
115+ fetchOlder = {
116+ olderFinished
117+ ? undefined
118+ : ( ) => {
119+ console . log ( 'fetch older logs' ) ;
120+
121+ setFetchingMore ( true ) ;
122+ refresh ( {
123+ offset : 0 ,
124+ endOffset : lastParsed ,
125+ } ) ;
126+ }
127+ }
128+ />
129+ </ Box >
144130 </ Stack >
145131 </ Box >
146132 </ Box >
0 commit comments