Load first log file
This commit is contained in:
parent
8a8976a45a
commit
a5d15e6dfe
|
@ -4,6 +4,10 @@ import { fetchEnv } from '../utils/env';
|
|||
import { API_URL } from '../pocketbase';
|
||||
import { Collections } from '../@types/pocketbase-types';
|
||||
import useDb from './useDb';
|
||||
import {
|
||||
fetchWithProgress,
|
||||
OnProgress,
|
||||
} from '../utils/http';
|
||||
|
||||
export const CDN_URL = fetchEnv('VITE_CDN_URL');
|
||||
|
||||
|
@ -36,9 +40,17 @@ const useServerStorage = () => {
|
|||
return Pako.inflate(new Uint8Array(await response.arrayBuffer()));
|
||||
};
|
||||
|
||||
const fetchLogFileWithProgress = (recordId: string, filename: string, onProgress?: OnProgress, signal?: AbortSignal) =>
|
||||
fetchWithProgress(
|
||||
buildFileUrl(Collections.Tunes, recordId, filename),
|
||||
onProgress,
|
||||
signal,
|
||||
).then((response) => response);
|
||||
|
||||
return {
|
||||
fetchTuneFile: (recordId: string, filename: string): Promise<ArrayBuffer> => fetchTuneFile(recordId, filename),
|
||||
fetchINIFile: (signature: string): Promise<ArrayBuffer> => fetchINIFile(signature),
|
||||
fetchLogFileWithProgress: (recordId: string, filename: string, onProgress?: OnProgress, signal?: AbortSignal): Promise<ArrayBuffer> => fetchLogFileWithProgress(recordId, filename, onProgress, signal),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@ import {
|
|||
Space,
|
||||
Divider,
|
||||
Badge,
|
||||
Typography,
|
||||
} from 'antd';
|
||||
import {
|
||||
FileTextOutlined,
|
||||
|
@ -30,11 +31,9 @@ import {
|
|||
OutputChannel,
|
||||
Logs as LogsType,
|
||||
DatalogEntry,
|
||||
Tune as TuneType,
|
||||
} from '@hyper-tuner/types';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import MlgParserWorker from '../workers/mlgParser?worker';
|
||||
import { loadLogs } from '../utils/api';
|
||||
import LogCanvas from '../components/Logs/LogCanvas';
|
||||
import store from '../store';
|
||||
import {
|
||||
|
@ -52,6 +51,8 @@ import {
|
|||
} from '../types/state';
|
||||
import Loader from '../components/Loader';
|
||||
import { Colors } from '../utils/colors';
|
||||
import { TunesRecordFull } from '../types/dbData';
|
||||
import useServerStorage from '../hooks/useServerStorage';
|
||||
|
||||
const { Content } = Layout;
|
||||
const { Step } = Steps;
|
||||
|
@ -64,22 +65,21 @@ const badgeStyle = { backgroundColor: Colors.TEXT };
|
|||
|
||||
const mapStateToProps = (state: AppState) => ({
|
||||
ui: state.ui,
|
||||
tune: state.tune,
|
||||
status: state.status,
|
||||
config: state.config,
|
||||
loadedLogs: state.logs,
|
||||
tuneData: state.tuneData,
|
||||
});
|
||||
|
||||
const Logs = ({
|
||||
ui,
|
||||
config,
|
||||
tune,
|
||||
loadedLogs,
|
||||
tuneData,
|
||||
}: {
|
||||
ui: UIState,
|
||||
tune: TuneType,
|
||||
config: Config,
|
||||
loadedLogs: LogsType,
|
||||
tuneData: TunesRecordFull,
|
||||
}) => {
|
||||
const { lg } = useBreakpoint();
|
||||
const { Sider } = Layout;
|
||||
|
@ -94,6 +94,7 @@ const Logs = ({
|
|||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||
const [canvasHeight, setCanvasHeight] = useState(0);
|
||||
const { fetchLogFileWithProgress } = useServerStorage();
|
||||
const calculateCanvasSize = useCallback(() => {
|
||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
||||
|
||||
|
@ -157,8 +158,14 @@ const Logs = ({
|
|||
const controller = new AbortController();
|
||||
const { signal } = controller;
|
||||
const loadData = async () => {
|
||||
const firstLogFile = (tuneData.logFiles || [])[0];
|
||||
|
||||
if (!firstLogFile) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const raw = await loadLogs((percent, total, edge) => {
|
||||
const raw = await fetchLogFileWithProgress(tuneData.id, firstLogFile, (percent, total, edge) => {
|
||||
setProgress(percent);
|
||||
setFileSize(formatBytes(total));
|
||||
setEdgeLocation(edge || edgeUnknown);
|
||||
|
@ -216,6 +223,7 @@ const Logs = ({
|
|||
worker.terminate();
|
||||
window.removeEventListener('resize', calculateCanvasSize);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [calculateCanvasSize, config?.datalog, config?.outputChannels, loadedLogs, ui.sidebarCollapsed]);
|
||||
|
||||
return (
|
||||
|
@ -265,11 +273,15 @@ const Logs = ({
|
|||
),
|
||||
},
|
||||
{
|
||||
label: <><FileTextOutlined /><Badge size="small" style={badgeStyle} count="1" /></>,
|
||||
label: <><FileTextOutlined /><Badge size="small" style={badgeStyle} count={tuneData.logFiles?.length} /></>,
|
||||
key: 'files',
|
||||
children: (
|
||||
<PerfectScrollbar options={{ suppressScrollX: true }}>
|
||||
some_tune.mlg
|
||||
{tuneData.logFiles?.map((fileName) => (
|
||||
<Typography.Paragraph key={fileName}>
|
||||
{fileName}
|
||||
</Typography.Paragraph>
|
||||
))}
|
||||
</PerfectScrollbar>
|
||||
),
|
||||
},
|
||||
|
|
|
@ -6,7 +6,7 @@ import help from '../data/help';
|
|||
import { divider } from '../data/constants';
|
||||
import {
|
||||
fetchWithProgress,
|
||||
onProgress as onProgressType,
|
||||
OnProgress,
|
||||
} from './http';
|
||||
import TuneParser from './tune/TuneParser';
|
||||
import useServerStorage, { CDN_URL } from '../hooks/useServerStorage';
|
||||
|
@ -63,21 +63,21 @@ export const loadTune = async (tuneData: TunesRecordFull | null) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const loadLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
|
||||
export const loadLogs = (onProgress?: OnProgress, signal?: AbortSignal) =>
|
||||
fetchWithProgress(
|
||||
`${CDN_URL}/public/temp/long.mlg.gz`,
|
||||
onProgress,
|
||||
signal,
|
||||
).then((response) => response);
|
||||
|
||||
export const loadCompositeLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
|
||||
export const loadCompositeLogs = (onProgress?: OnProgress, signal?: AbortSignal) =>
|
||||
fetchWithProgress(
|
||||
`${CDN_URL}/public/temp/composite_1.csv.gz`,
|
||||
onProgress,
|
||||
signal,
|
||||
).then((response) => response);
|
||||
|
||||
export const loadToothLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
|
||||
export const loadToothLogs = (onProgress?: OnProgress, signal?: AbortSignal) =>
|
||||
fetchWithProgress(
|
||||
`${CDN_URL}/public/temp/tooth_3.csv.gz`,
|
||||
onProgress,
|
||||
|
|
|
@ -2,9 +2,9 @@ import locations from '../data/edge-locations.json';
|
|||
|
||||
type LocationsType = { [index: string]: string };
|
||||
|
||||
export type onProgress = (percent: number, total: number, edgeLocation: string | null) => void;
|
||||
export type OnProgress = (percent: number, total: number, edgeLocation: string | null) => void;
|
||||
|
||||
export const fetchWithProgress = async (url: string, onProgress?: onProgress, signal?: AbortSignal): Promise<ArrayBuffer> => {
|
||||
export const fetchWithProgress = async (url: string, onProgress?: OnProgress, signal?: AbortSignal): Promise<ArrayBuffer> => {
|
||||
let edgeLocation = null;
|
||||
const response = await fetch(url, { signal });
|
||||
const contentLength = response.headers.get('Content-Length');
|
||||
|
|
Loading…
Reference in New Issue