Skip to content

Commit 2770b52

Browse files
travjenkinstravjenkins
authored
Ops Logs virtualization (#948)
* saving off work so far * Saving off work now that the virtualized table is rendering well * Saving off work so far that cleaned up some stuff * Moving buttons to a more "usable" positions Adding padding so the scrolling does not miss the first and last items * Clean up logging and starting work on scrolling * Getting some scrolling to work * Keep the last item viewed on screen as we load older * Fixing html issues * Saving off work for the popper * Tweaking column headers * Getting the expanding working better * Cleaning up code that isn't used * Cleaning up more old code * Keep items open that were opened * More styling and tweaking * Cleaning up unused code * Adding load bars based on what we're fetching Logging to try to figure out how to load older * Sharing some settings Getting scrolling to the bottom working better Saving off work * Injecting a document when we are st the start * Some refactoring * Refactoring and styling a bit * tweaks and styling
1 parent 68bdb14 commit 2770b52

20 files changed

+563
-288
lines changed

‎src/components/shared/Entity/Details/Ops/index.tsx

+45-75
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
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';
52
import { useJournalData } from 'hooks/journals/useJournalData';
63
import useJournalNameForLogs from 'hooks/journals/useJournalNameForLogs';
74
import useGlobalSearchParams, {
85
GlobalSearchParams,
96
} from 'hooks/searchParams/useGlobalSearchParams';
107
import { useEffect, useMemo, useState } from 'react';
118
import { OpsLogFlowDocument } from 'types';
12-
import { MEGABYTE } from 'utils/dataPlane-utils';
139
import Error from 'components/shared/Error';
1410
import { BASE_ERROR } from 'services/supabase';
15-
16-
const maxBytes = Math.round(MEGABYTE / 25);
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';
1714

1815
function Ops() {
16+
const intl = useIntl();
17+
1918
const [fetchingMore, setFetchingMore] = useState(false);
2019
const [olderFinished, setOlderFinished] = useState(false);
2120
const [lastParsed, setLastParsed] = useState<number>(0);
@@ -53,11 +52,25 @@ function Ops() {
5352
if (parsedEnd !== lastParsed) {
5453
if (documents.length > 0) {
5554
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+
5669
setDocs(newDocs);
5770
setFetchingMore(false);
5871
}
5972
}
60-
}, [data?.meta, docs, documents, lastParsed]);
73+
}, [data?.meta, docs, documents, intl, lastParsed]);
6174

6275
useEffect(() => {
6376
// Get the mete data out of the response
@@ -71,62 +84,16 @@ function Ops() {
7184
// Keep track of where we last read data from so we can keep stepping backwards through the file
7285
setLastParsed(parsedEnd ?? 0);
7386

74-
// 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
7588
if (parsedEnd === 0) {
7689
setOlderFinished(true);
7790
}
7891
}, [data?.meta]);
7992

8093
return (
8194
<Box>
82-
<UnderDev />
8395
<Box>
84-
<KeyValueList
85-
sectionTitle="Debugging Values"
86-
data={[
87-
{ title: 'Documents', val: docs.length },
88-
{ title: 'Last Byte Parsed', val: lastParsed },
89-
]}
90-
/>
91-
92-
<Stack spacing={2} direction="row">
93-
<Button
94-
disabled={loading || fetchingMore || olderFinished}
95-
onClick={() => {
96-
setFetchingMore(true);
97-
refresh({
98-
offset: 0,
99-
endOffset: lastParsed,
100-
});
101-
}}
102-
>
103-
Load Older
104-
</Button>
105-
106-
<Button
107-
disabled={loading || fetchingMore}
108-
onClick={() => {
109-
setFetchingMore(true);
110-
refresh();
111-
}}
112-
>
113-
Load Newer
114-
</Button>
115-
</Stack>
116-
11796
<Stack spacing={2}>
118-
{/* <JournalAlerts
119-
journalData={journalData}
120-
notFoundTitleMessage={
121-
<FormattedMessage
122-
id="ops.journals.notFound.message"
123-
values={{
124-
entityType,
125-
}}
126-
/>
127-
}
128-
/>*/}
129-
13097
{error ? (
13198
<Error
13299
error={{
@@ -137,26 +104,29 @@ function Ops() {
137104
/>
138105
) : null}
139106

140-
<LogsTable
141-
documents={docs}
142-
loading={fetchingMore || loading}
143-
fetchNewer={() => {
144-
console.log('fetcher latest logs');
145-
146-
// setLoading(true);
147-
// setTimeout(() => setLoading(false), 2500);
148-
}}
149-
fetchOlder={
150-
olderFinished
151-
? undefined
152-
: () => {
153-
console.log('fetch older logs');
154-
155-
// setLoading(true);
156-
// setTimeout(() => setLoading(false), 2500);
157-
}
158-
}
159-
/>
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>
160130
</Stack>
161131
</Box>
162132
</Box>

‎src/components/shared/Entity/Shard/TableFooter.tsx

+7-13
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
SxProps,
3-
TableFooter,
4-
TablePagination,
5-
TableRow,
6-
Theme,
7-
useTheme,
8-
} from '@mui/material';
1+
import { TableFooter, TablePagination, TableRow } from '@mui/material';
92
import { semiTransparentBackground } from 'context/Theme';
103
import { useShardDetail_readDictionary } from 'stores/ShardDetail/hooks';
114
import { ShardEntityTypes } from 'stores/ShardDetail/types';
@@ -25,16 +18,17 @@ function InformationTableFooter({
2518
taskTypes,
2619
taskName,
2720
}: Props) {
28-
const theme = useTheme();
29-
const tableHeaderFooterSx: SxProps<Theme> = {
30-
bgcolor: semiTransparentBackground[theme.palette.mode],
31-
};
3221
const dictionaryVals = useShardDetail_readDictionary(taskName, taskTypes);
3322
const count = dictionaryVals.allShards.length;
3423

3524
return (
3625
<TableFooter>
37-
<TableRow sx={{ ...tableHeaderFooterSx }}>
26+
<TableRow
27+
sx={{
28+
bgcolor: (theme) =>
29+
semiTransparentBackground[theme.palette.mode],
30+
}}
31+
>
3832
{count > 0 ? (
3933
<TablePagination
4034
count={count}

‎src/components/tables/EntityTable/TableBody.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ interface Props {
1616
tableState: TableState;
1717
loading: boolean;
1818
rows: any;
19+
CustomBody?: any;
20+
enableDivRendering?: boolean;
1921
}
2022

2123
function EntityTableBody({
@@ -24,20 +26,29 @@ function EntityTableBody({
2426
noExistingDataContentIds,
2527
rows,
2628
tableState,
29+
CustomBody,
30+
enableDivRendering,
2731
}: Props) {
2832
const columnKeys = useMemo(() => {
2933
return getColumnKeyList(columns);
3034
}, [columns]);
3135

36+
if (rows && CustomBody) {
37+
return <CustomBody />;
38+
}
39+
3240
return (
33-
<TableBody>
41+
<TableBody component={enableDivRendering ? 'div' : 'thead'}>
3442
{rows ? (
3543
rows
3644
) : loading ? (
3745
<TableLoadingRows columnKeys={columnKeys} />
3846
) : (
39-
<TableRow>
40-
<TableCell colSpan={columnKeys.length}>
47+
<TableRow component={enableDivRendering ? 'div' : 'tr'}>
48+
<TableCell
49+
colSpan={columnKeys.length}
50+
component={enableDivRendering ? 'div' : 'td'}
51+
>
4152
<Box
4253
sx={{
4354
p: 2,

‎src/components/tables/EntityTable/TableHeader.tsx

+19-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { TableCell, TableHead, TableRow, TableSortLabel } from '@mui/material';
1+
import {
2+
Box,
3+
TableCell,
4+
TableHead,
5+
TableRow,
6+
TableSortLabel,
7+
} from '@mui/material';
28
import { getStickyTableCell } from 'context/Theme';
39
import { ArrowDown } from 'iconoir-react';
410
import { FormattedMessage } from 'react-intl';
@@ -14,11 +20,13 @@ interface Props {
1420
selectData?: any;
1521
selectableTableStoreName?: SelectTableStoreNames;
1622
sortDirection?: SortDirection;
23+
enableDivRendering?: boolean;
1724
}
1825

1926
function EntityTableHeader({
2027
columns,
2128
columnToSort,
29+
enableDivRendering,
2230
headerClick,
2331
hide,
2432
selectData,
@@ -28,8 +36,9 @@ function EntityTableHeader({
2836
const enableSort = Boolean(columnToSort && headerClick && sortDirection);
2937

3038
return (
31-
<TableHead>
39+
<TableHead component={enableDivRendering ? 'div' : 'thead'}>
3240
<TableRow
41+
component={enableDivRendering ? Box : TableRow}
3342
sx={{
3443
background: (theme) => theme.palette.background.default,
3544
}}
@@ -59,6 +68,13 @@ function EntityTableHeader({
5968
};
6069
}
6170

71+
if (column.display) {
72+
tableCellSX = {
73+
...tableCellSX,
74+
display: column.display,
75+
};
76+
}
77+
6278
if (column.renderHeader && selectableTableStoreName) {
6379
return column.renderHeader(
6480
index,
@@ -68,6 +84,7 @@ function EntityTableHeader({
6884

6985
return (
7086
<TableCell
87+
component={enableDivRendering ? 'div' : 'td'}
7188
key={`${column.field}-${index}`}
7289
align={column.align}
7390
sortDirection={

0 commit comments

Comments
 (0)