From b6b6978bcce23a9e0a06c99cda4854498dc01fed Mon Sep 17 00:00:00 2001 From: Trevor McMaster Date: Tue, 26 Nov 2024 12:24:12 -0700 Subject: [PATCH 1/4] Fixed the bug with multiple results files and switching between - The null pointer throws on redraw. All the calculations and freeing of memory must be done within a setState block while the data is static --- controller/components/TestResults/index.tsx | 67 ++++++++++++------- .../src/components/TestResults/index.tsx | 42 +++++++----- 2 files changed, 67 insertions(+), 42 deletions(-) diff --git a/controller/components/TestResults/index.tsx b/controller/components/TestResults/index.tsx index 8aa6254b..da9e9346 100644 --- a/controller/components/TestResults/index.tsx +++ b/controller/components/TestResults/index.tsx @@ -69,12 +69,17 @@ export interface TestResultProps { export interface TestResultState { defaultMessage: string; + /** Filters the results Data by a tag equalling this value. I.e. 'method', 'url', '_id' */ summaryTagFilter: string; + /** Filters the results Data by a summaryTagFilter's value containing this value */ summaryTagValueFilter: string; resultsPath: string | undefined; resultsText: string | undefined; + /** All endpoints from the results file */ resultsData: ParsedFileEntry[] | undefined; + /** Filtered list based on the values from summaryTagFilter and summaryTagValueFilter */ filteredData: ParsedFileEntry[] | undefined; + /** Overall merged stats from all filteredData */ summaryData: ParsedFileEntry | undefined; minMaxTime: MinMaxTime | undefined; error: string | undefined; @@ -115,7 +120,6 @@ const minMaxTime = (testResults: any) => { let startTime2 = Infinity; let endTime2 = -Infinity; - for (const [_, dataPoints] of testResults) { for (const point of dataPoints) { if (point.startTime) { @@ -183,6 +187,7 @@ const freeHistograms = (resultsData: ParsedFileEntry[] | undefined, summaryData: } } } + log("freeHistograms finished", LogLevel.DEBUG, { resultsData: resultsData?.length || -1, summaryData: summaryData !== undefined ? 1 : 0 }); }; const mergeAllDataPoints = (...dataPoints: DataPoint[]): DataPoint[] => { @@ -211,7 +216,7 @@ const getFilteredEndpoints = ({ }): ParsedFileEntry[] | undefined => { if (!summaryTagFilter) { log("getFilteredEndpoints no filter", LogLevel.DEBUG, { summaryTagFilter }); - return resultsData; + return undefined; } if (resultsData && resultsData.length > 0) { const filteredEntries: ParsedFileEntry[] = []; @@ -314,8 +319,6 @@ export const TestResults = ({ testData }: TestResultProps) => { .map((s) => JSON.parse(s)); const model = await import("./model"); let resultsData: ParsedFileEntry[]; - // Free the old ones - freeHistograms(state.resultsData, state.summaryData); const testStartKeys = ["test", "bin", "bucketSize"]; const isOnlyTestStart: boolean = results.length === 1 && Object.keys(results[0]).length === testStartKeys.length @@ -328,22 +331,28 @@ export const TestResults = ({ testData }: TestResultProps) => { // new stats format resultsData = model.processNewJson(results); } + setState((oldState: TestResultState) => { + // Free the old ones + freeHistograms(oldState.resultsData, oldState.summaryData); + const startEndTime: MinMaxTime = minMaxTime(resultsData); - const { summaryTagFilter, summaryTagValueFilter } = state; - const filteredData = getFilteredEndpoints({ resultsData: state.resultsData, summaryTagFilter, summaryTagValueFilter }); + const { summaryTagFilter, summaryTagValueFilter } = oldState; + const filteredData = getFilteredEndpoints({ resultsData, summaryTagFilter, summaryTagValueFilter }); const summaryData = getSummaryData({ filteredData: filteredData || resultsData, summaryTagFilter, summaryTagValueFilter }); log("updateResultsData", LogLevel.DEBUG, { filteredData: filteredData?.length, resultsData: resultsData?.length, summaryData }); - updateState({ + return { + ...oldState, resultsData, filteredData, resultsText, summaryData, error: undefined, minMaxTime: startEndTime + }; }); } catch (error) { - log("Error Fetching Data: " + state.resultsPath, LogLevel.ERROR, error); + log("Error Fetching Data: " + s3ResultPath, LogLevel.ERROR, error); updateState({ error: formatError(error) }); @@ -361,17 +370,20 @@ export const TestResults = ({ testData }: TestResultProps) => { if (event.target.selectedIndex !== 0) { await fetchData(event.target.value); } else { - // Free the old data - freeHistograms(state.resultsData, state.summaryData); - updateState({ - defaultMessage: defaultMessage(), - resultsPath: undefined, - resultsData: undefined, - filteredData: undefined, - resultsText: undefined, - summaryData: undefined, - error: undefined, - minMaxTime: undefined + setState((oldState: TestResultState) => { + // Free the old data + freeHistograms(oldState.resultsData, oldState.summaryData); + return { + ...oldState, + defaultMessage: defaultMessage(), + resultsPath: undefined, + resultsData: undefined, + filteredData: undefined, + resultsText: undefined, + summaryData: undefined, + error: undefined, + minMaxTime: undefined + }; }); } }; @@ -404,13 +416,16 @@ export const TestResults = ({ testData }: TestResultProps) => { } log("filteredData changed", LogLevel.DEBUG, { oldFilteredData, filteredData }); - // Free the old data (only the summary) - freeHistograms(undefined, state.summaryData); - const summaryData = getSummaryData({ filteredData: filteredData || state.resultsData, summaryTagFilter, summaryTagValueFilter }); - updateState({ - [stateName]: newValue, - filteredData, - summaryData + setState((oldState: TestResultState) => { + // Free the old data (only the summary) + freeHistograms(undefined, oldState.summaryData); + const summaryData = getSummaryData({ filteredData: filteredData || oldState.resultsData, summaryTagFilter, summaryTagValueFilter }); + return { + ...oldState, + [stateName]: newValue, + filteredData, + summaryData + }; }); }; diff --git a/guide/results-viewer-react/src/components/TestResults/index.tsx b/guide/results-viewer-react/src/components/TestResults/index.tsx index 2a913ffb..7e00c280 100644 --- a/guide/results-viewer-react/src/components/TestResults/index.tsx +++ b/guide/results-viewer-react/src/components/TestResults/index.tsx @@ -155,6 +155,7 @@ const minMaxTime = (testResults: any) => { const startTime3: Date = new Date(startTime2); const endTime3: Date = new Date(endTime2); + const includeDateWithStart = startTime3.toLocaleDateString() === endTime3.toLocaleDateString(); testTimes.startTime = dateToString(startTime3, includeDateWithStart); testTimes.endTime = dateToString(endTime3, false); @@ -196,6 +197,7 @@ const freeHistograms = (resultsData: ParsedFileEntry[] | undefined, summaryData: } } } + log("freeHistograms finished", LogLevel.DEBUG, { resultsData: resultsData?.length || -1, summaryData: summaryData !== undefined ? 1 : 0 }); }; const mergeAllDataPoints = (...dataPoints: DataPoint[]): DataPoint[] => { @@ -224,7 +226,7 @@ const getFilteredEndpoints = ({ }): ParsedFileEntry[] | undefined => { if (!summaryTagFilter) { log("getFilteredEndpoints no filter", LogLevel.DEBUG, { summaryTagFilter }); - return resultsData; + return undefined; } if (resultsData && resultsData.length > 0) { const filteredEntries: ParsedFileEntry[] = []; @@ -300,19 +302,17 @@ export const TestResults = ({ resultsText }: TestResultProps) => { const updateState = (newState: Partial) => setState((oldState: TestResultState) => ({ ...oldState, ...newState })); - const updateResultsData = async (resultsPath: string): Promise => { + const updateResultsData = async (text: string): Promise => { updateState({ defaultMessage: "Results Loading..." }); try { // if there are multiple jsons (new format), split them up and parse them separately - const results = resultsPath.replace(/}{/g, "}\n{") + const results = text.replace(/}{/g, "}\n{") .split("\n") .map((s) => JSON.parse(s)); const model = await import("./model"); let resultsData: ParsedFileEntry[]; - // Free the old ones - freeHistograms(state.resultsData, state.summaryData); const testStartKeys = ["test", "bin", "bucketSize"]; const isOnlyTestStart: boolean = results.length === 1 && Object.keys(results[0]).length === testStartKeys.length @@ -325,19 +325,25 @@ export const TestResults = ({ resultsText }: TestResultProps) => { // new stats format resultsData = model.processNewJson(results); } + setState((oldState: TestResultState) => { + // Free the old ones + freeHistograms(oldState.resultsData, oldState.summaryData); + const startEndTime: MinMaxTime = minMaxTime(resultsData); - const { summaryTagFilter, summaryTagValueFilter } = state; - const filteredData = getFilteredEndpoints({ resultsData: state.resultsData, summaryTagFilter, summaryTagValueFilter }); + const { summaryTagFilter, summaryTagValueFilter } = oldState; + const filteredData = getFilteredEndpoints({ resultsData, summaryTagFilter, summaryTagValueFilter }); const summaryData = getSummaryData({ filteredData: filteredData || resultsData, summaryTagFilter, summaryTagValueFilter }); log("updateResultsData", LogLevel.DEBUG, { filteredData: filteredData?.length, resultsData: resultsData?.length, summaryData }); - updateState({ + return { + ...oldState, defaultMessage, resultsData, filteredData, summaryData, error: undefined, minMaxTime: startEndTime + }; }); } catch (error) { log("Error parsing Data", LogLevel.ERROR, error); @@ -376,13 +382,16 @@ export const TestResults = ({ resultsText }: TestResultProps) => { } log("filteredData changed", LogLevel.DEBUG, { oldFilteredData, filteredData }); - // Free the old data (only the summary) - freeHistograms(undefined, state.summaryData); - const summaryData = getSummaryData({ filteredData, summaryTagFilter, summaryTagValueFilter }); - updateState({ - [stateName]: newValue, - filteredData, - summaryData + setState((oldState: TestResultState) => { + // Free the old data (only the summary) + freeHistograms(undefined, oldState.summaryData); + const summaryData = getSummaryData({ filteredData: filteredData || oldState.resultsData, summaryTagFilter, summaryTagValueFilter }); + return { + ...oldState, + [stateName]: newValue, + filteredData, + summaryData + }; }); }; @@ -437,7 +446,7 @@ export const TestResults = ({ resultsText }: TestResultProps) => { })} ) : ( -

{state.defaultMessage}

+

{state.defaultMessage}

)} ); @@ -577,6 +586,7 @@ const Endpoint = ({ bucketId, dataPoints }: EndpointProps) => {
    {Object.entries(bucketId).map(([key, value], idx) => { + if (key !== "method" && key !== "url") { return (
  • From a8574f3ec2992f56d20492ff2a89e84be9e1767b Mon Sep 17 00:00:00 2001 From: Trevor McMaster Date: Tue, 26 Nov 2024 12:28:28 -0700 Subject: [PATCH 2/4] Updated eslint to include storybook --- controller/.storybook/main.ts | 20 ++++++++++---------- controller/.storybook/preview.js | 4 ++-- controller/.storybook/tsconfig.json | 2 ++ controller/test/singleTestResult.js | 2 +- eslint.config.mjs | 5 ++--- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/controller/.storybook/main.ts b/controller/.storybook/main.ts index 7400b6d4..e224693c 100644 --- a/controller/.storybook/main.ts +++ b/controller/.storybook/main.ts @@ -20,22 +20,22 @@ const config: StorybookConfig = { propFilter: prop => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true } }, - webpackFinal: (config: Configuration) => { - if (!config.resolve) { config.resolve = {}; } - config.resolve.fallback = { - ...(config.resolve.fallback || {}), + webpackFinal: (webpackConfig: Configuration) => { + if (!webpackConfig.resolve) { webpackConfig.resolve = {}; } + webpackConfig.resolve.fallback = { + ...(webpackConfig.resolve.fallback || {}), "fs": false, "util": false, "path": false, "assert": false, - "crypto": false, + "crypto": false }; - if (!config.experiments) { config.experiments = {}; } - config.experiments.asyncWebAssembly = true; - if (!config.output) { config.output = {}; } + if (!webpackConfig.experiments) { webpackConfig.experiments = {}; } + webpackConfig.experiments.asyncWebAssembly = true; + if (!webpackConfig.output) { webpackConfig.output = {}; } // config.output.publicPath = "/"; - config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm'; - return config; + webpackConfig.output.webassemblyModuleFilename = "static/wasm/[modulehash].wasm"; + return webpackConfig; }, framework: { name: "@storybook/nextjs", diff --git a/controller/.storybook/preview.js b/controller/.storybook/preview.js index b8840744..f43ce9a6 100644 --- a/controller/.storybook/preview.js +++ b/controller/.storybook/preview.js @@ -5,8 +5,8 @@ import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtim /** @type { import('@storybook/react').Preview } */ const preview = { nextRouter: { - Provider: RouterContext.Provider, - }, + Provider: RouterContext.Provider + } // Can't get this to work // https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/ // nextjs: { diff --git a/controller/.storybook/tsconfig.json b/controller/.storybook/tsconfig.json index 0ef833af..1859a57e 100644 --- a/controller/.storybook/tsconfig.json +++ b/controller/.storybook/tsconfig.json @@ -17,6 +17,8 @@ "jsx": "react" }, "include": [ + "./*.ts", + "./*.js", "../types/**/*.ts", "../components/**/*.ts", "../components/**/*.tsx" diff --git a/controller/test/singleTestResult.js b/controller/test/singleTestResult.js index c0d5bfa4..a514a1fc 100644 --- a/controller/test/singleTestResult.js +++ b/controller/test/singleTestResult.js @@ -199,4 +199,4 @@ export const testJsonResponse = [ } ] ] -] \ No newline at end of file +]; \ No newline at end of file diff --git a/eslint.config.mjs b/eslint.config.mjs index bcd1ad44..a4ef1c01 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -25,8 +25,6 @@ export default [{ "common/lib", "controller/lib", "controller/storybook-static", - "controller/.storybook", - "controller/**/**.js", "controller/next-env.d.ts", "eslint.config.mjs" ], @@ -50,7 +48,8 @@ export default [{ "./common/tsconfig.json", "./agent/tsconfig.json", "./controller/tsconfig.json", - "./controller/tsconfig.test.json" + "./controller/tsconfig.test.json", + "./controller/.storybook/tsconfig.json", ], }, }, From ed4f3654e164449e12c62811b8784ca519de4a85 Mon Sep 17 00:00:00 2001 From: Trevor McMaster Date: Tue, 26 Nov 2024 12:30:13 -0700 Subject: [PATCH 3/4] Updated eslint to include storybook --- controller/.storybook/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/controller/.storybook/tsconfig.json b/controller/.storybook/tsconfig.json index 1859a57e..148c7cf5 100644 --- a/controller/.storybook/tsconfig.json +++ b/controller/.storybook/tsconfig.json @@ -18,7 +18,6 @@ }, "include": [ "./*.ts", - "./*.js", "../types/**/*.ts", "../components/**/*.ts", "../components/**/*.tsx" From 747d288bff2d7afbe8b4799364180b242bd4e01c Mon Sep 17 00:00:00 2001 From: Trevor McMaster Date: Tue, 26 Nov 2024 12:37:46 -0700 Subject: [PATCH 4/4] Fixed eslint files --- controller/.storybook/tsconfig.json | 1 + eslint.config.mjs | 1 + 2 files changed, 2 insertions(+) diff --git a/controller/.storybook/tsconfig.json b/controller/.storybook/tsconfig.json index 148c7cf5..1859a57e 100644 --- a/controller/.storybook/tsconfig.json +++ b/controller/.storybook/tsconfig.json @@ -18,6 +18,7 @@ }, "include": [ "./*.ts", + "./*.js", "../types/**/*.ts", "../components/**/*.ts", "../components/**/*.tsx" diff --git a/eslint.config.mjs b/eslint.config.mjs index a4ef1c01..b1cd3949 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -25,6 +25,7 @@ export default [{ "common/lib", "controller/lib", "controller/storybook-static", + "controller/test/**.js", "controller/next-env.d.ts", "eslint.config.mjs" ],