Add chronological history

packages/ui/src/models/ClobbrUIResult.ts

@@ -1,3 +1,4 @@
+import { ClobbrUIHeaderItem } from 'models/ClobbrUIHeaderItem';
 import { ClobbrLogItem } from '@clobbr/api/src/models/ClobbrLog';
 
 export interface ClobbrUIResult {
@@ -6,6 +7,17 @@ export interface ClobbrUIResult {
   endDate?: string;
   resultDurations: Array<number>;
   logs: Array<ClobbrLogItem>;
+
+  // Config
   parallel: boolean;
   iterations: number;
+  headers?: Array<ClobbrUIHeaderItem>;
+  headerInputMode?: string;
+  headerShellCmd?: string;
+  headerNodeScriptData?: {
+    text?: string;
+    valid: boolean;
+  };
+  data?: { [key: string]: any };
+  timeout: number;
 }

packages/ui/src/results/ResultHistory/ResultHistory.tsx

@@ -7,6 +7,7 @@ import { Typography } from '@mui/material';
 import { ResultHistoryTable } from './ResultHistoryTable/ResultHistoryTable';
 import { ResultHistoryStats } from './ResultHistoryStats/ResultHistoryStats';
 import { ResultHistoryChart } from './ResultHistoryChart/ResultHistoryChart';
+import { ResultHistoryChronological } from './ResultHistoryChronological/ResultHistoryChronological';
 
 import {
   EResultHistoryMode,
@@ -61,11 +62,21 @@ export const ResultHistory = ({
     <GlobalStore.Consumer>
       {({ search }) => (
         <div className="flex flex-col gap-12">
+          {mode === HISTORY_MODES.CHRONOLOGICAL ? (
+            <ResultHistoryChronological maximumResults={20} results={results} />
+          ) : (
+            <></>
+          )}
+
           {Object.keys(parallelResultsByIterations).length ? (
             <div>
-              <Typography variant="h6" className="pb-4">
-                Parallel results
-              </Typography>
+              {mode !== HISTORY_MODES.CHRONOLOGICAL ? (
+                <Typography variant="h6" className="pb-4">
+                  Parallel results
+                </Typography>
+              ) : (
+                <></>
+              )}
 
               <ul className="flex flex-col gap-4">
                 {Object.keys(parallelResultsByIterations).map((key) => (
@@ -109,9 +120,13 @@ export const ResultHistory = ({
 
           {Object.keys(sequentialResultsByIterations).length ? (
             <ul>
-              <Typography variant="h6" className="pb-4">
-                Sequence results
-              </Typography>
+              {mode !== HISTORY_MODES.CHRONOLOGICAL ? (
+                <Typography variant="h6" className="pb-4">
+                  Sequence results
+                </Typography>
+              ) : (
+                <></>
+              )}
 
               <div className="flex flex-col gap-4">
                 {Object.keys(sequentialResultsByIterations).map((key) => (

packages/ui/src/results/ResultHistory/ResultHistoryChart/ResultHistoryChart.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import clsx from 'clsx';
 import { format } from 'date-fns';
 
@@ -6,7 +7,6 @@ import { Ping } from 'shared/components/Ping/Ping';
 import { GenericChart } from './GenericChart';
 
 import { ClobbrUIResult } from 'models/ClobbrUIResult';
-import { useState } from 'react';
 
 export const ResultHistoryChart = ({
   results,

packages/ui/src/results/ResultHistory/ResultHistoryChronological/ResultHistoryChronological.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import clsx from 'clsx';
+
+import { ClobbrUIResult } from 'models/ClobbrUIResult';
+
+import { ButtonBase } from '@mui/material';
+
+import { getResultStats } from 'results/ResultStats/ResultStats';
+import { orderBy } from 'lodash-es';
+import { ResultHistoryChronologicalItem } from './ResultHistoryChronologicalItem';
+
+export const ResultHistoryChronological = ({
+  results,
+  maximumResults
+}: {
+  results: Array<ClobbrUIResult>;
+  maximumResults: number;
+}) => {
+  const [numberOfResultsToShow, setNumberOfResultsToShow] =
+    useState(maximumResults);
+
+  const resultsToShow = orderBy(results, 'startDate', 'desc').slice(
+    0,
+    numberOfResultsToShow
+  );
+  const someResultsNotShown = results.length > resultsToShow.length;
+
+  const showMoreResults = () => {
+    setNumberOfResultsToShow(numberOfResultsToShow + 10);
+  };
+
+  const chronologicalResultsWithStats = resultsToShow.map((result) => {
+    const successfulLogs = result.logs.filter((log) => !log.failed);
+
+    return {
+      result,
+      successPct: (successfulLogs.length * 100) / result.iterations,
+      stats: getResultStats(result) || []
+    };
+  });
+
+  return (
+    <div>
+      <div className={clsx('relative flex flex-col gap-4')}>
+        {chronologicalResultsWithStats.map(({ result, successPct }, index) => {
+          return (
+            <ResultHistoryChronologicalItem
+              key={result.id}
+              index={index}
+              result={result}
+              successPct={successPct}
+            />
+          );
+        })}
+      </div>
+
+      {someResultsNotShown ? (
+        <div className="w-full bg-white/20 dark:bg-black/20 hover:bg-gray-200/40 hover:dark:bg-black/40 transition-all flex justify-center rounded-md">
+          <ButtonBase
+            onClick={showMoreResults}
+            className="text-xs w-full !p-1.5"
+          >
+            Show more
+          </ButtonBase>
+        </div>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};