Fix multiple test results bug

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",

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: {

controller/.storybook/tsconfig.json

@@ -17,6 +17,8 @@
     "jsx": "react"
   },
   "include": [
+    "./*.ts",
+    "./*.js",
     "../types/**/*.ts",
     "../components/**/*.ts",
     "../components/**/*.tsx"

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
+      };
     });
   };
 

controller/test/singleTestResult.js

@@ -199,4 +199,4 @@ export const testJsonResponse = [
       }
     ]
   ]
-]
+];

eslint.config.mjs

@@ -25,8 +25,7 @@ export default [{
     "common/lib",
     "controller/lib",
     "controller/storybook-static",
-    "controller/.storybook",
-    "controller/**/**.js",
+    "controller/test/**.js",
     "controller/next-env.d.ts",
     "eslint.config.mjs"
   ],
@@ -50,7 +49,8 @@ export default [{
         "./common/tsconfig.json",
         "./agent/tsconfig.json",
         "./controller/tsconfig.json",
-        "./controller/tsconfig.test.json"
+        "./controller/tsconfig.test.json",
+        "./controller/.storybook/tsconfig.json",
       ],
     },
   },

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<TestResultState>) =>
     setState((oldState: TestResultState) => ({ ...oldState, ...newState }));
 
-  const updateResultsData = async (resultsPath: string): Promise<void> => {
+  const updateResultsData = async (text: string): Promise<void> => {
     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) => {
           })}
         </TIMETAKEN>
       ) : (
-        <p>{state.defaultMessage}</p>
+        <h4>{state.defaultMessage}</h4>
       )}
     </React.Fragment>
   );
@@ -577,6 +586,7 @@ const Endpoint = ({ bucketId, dataPoints }: EndpointProps) => {
         </H3>
         <UL>
           {Object.entries(bucketId).map(([key, value], idx) => {
+
             if (key !== "method" && key !== "url") {
               return (
                 <li key={idx}>