Skip to content

Commit

Permalink
Tweak animation & history tab names
Browse files Browse the repository at this point in the history
  • Loading branch information
@danmindru
danmindru committed Sep 22, 2023
1 parent 3c2daf5 commit eaa92df
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 91 deletions.
26 changes: 10 additions & 16 deletions packages/ui/src/results/ResultHistory/ResultHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,12 @@ export const ResultHistory = ({
<></>
)}

{Object.keys(parallelResultsByIterations).length ? (
{mode !== HISTORY_MODES.CHRONOLOGICAL &&
Object.keys(parallelResultsByIterations).length ? (
<div>
{mode !== HISTORY_MODES.CHRONOLOGICAL ? (
<Typography variant="h6" className="pb-4">
Parallel results
</Typography>
) : (
<></>
)}
<Typography variant="h6" className="pb-4">
Parallel results
</Typography>

<ul className="flex flex-col gap-4">
{Object.keys(parallelResultsByIterations).map((key) => (
Expand Down Expand Up @@ -118,15 +115,12 @@ export const ResultHistory = ({
<></>
)}

{Object.keys(sequentialResultsByIterations).length ? (
{mode !== HISTORY_MODES.CHRONOLOGICAL &&
Object.keys(sequentialResultsByIterations).length ? (
<ul>
{mode !== HISTORY_MODES.CHRONOLOGICAL ? (
<Typography variant="h6" className="pb-4">
Sequence results
</Typography>
) : (
<></>
)}
<Typography variant="h6" className="pb-4">
Sequence results
</Typography>

<div className="flex flex-col gap-4">
{Object.keys(sequentialResultsByIterations).map((key) => (
Expand Down
158 changes: 88 additions & 70 deletions ...i/src/results/ResultHistory/ResultHistoryChronological/ResultHistoryChronologicalItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useState } from 'react';
import clsx from 'clsx';
import { format } from 'date-fns';
import { AnimatePresence, motion } from 'framer-motion';

import { ButtonBase, Tooltip, Typography } from '@mui/material';
import { ClobbrUIResult } from 'models/ClobbrUIResult';
Expand All @@ -24,7 +25,7 @@ export const ResultHistoryChronologicalItem = ({
index: number;
}) => {
const [detailsOpen, setDetailsOpen] = useState(false);
console.log(result.headers);

const config = [
{
value: result.parallel ? 'Parallel' : 'Sequence',
Expand Down Expand Up @@ -172,77 +173,94 @@ export const ResultHistoryChronologicalItem = ({
</div>
</div>

{detailsOpen ? (
<div className="ml-6 flex flex-col gap-1">
<div className="bg-gray-800 border-4 border-solid border-black/5 rounded-md overflow-auto">
<Typography
variant="caption"
className="flex w-full p-2 border-b border-solid border-gray-500/10"
>
Statistics
</Typography>
<ResultStats result={result} />
</div>
<AnimatePresence>
{detailsOpen ? (
<motion.div
initial={{ scaleY: 0.9, translateY: -10, opacity: 0.2 }}
animate={{
translateY: 0,
opacity: 1,
scaleY: 1
}}
exit={{ scaleY: 0.9, translateY: 10, opacity: 0 }}
transition={{
duration: 0.2
}}
className="ml-6 flex flex-col gap-1"
>
<div className="bg-gray-800 border-4 border-solid border-black/5 rounded-md overflow-auto">
<Typography
variant="caption"
className="sticky left-0 flex w-full p-2 border-b border-solid border-gray-500/10"
>
Statistics
</Typography>
<ResultStats result={result} />
</div>

<div className="bg-gray-800 border-4 border-solid border-black/5 rounded-md overflow-auto">
<Typography
variant="caption"
className="flex w-full p-2 border-b border-solid border-gray-500/10"
>
Responses
</Typography>
<ul
className="grid gap-3 p-2"
style={{
gridTemplateColumns: `repeat(${result.iterations}, 52px)`
}}
>
{result.logs.map((log) => (
<li key={log.metas.number} className="inline-flex items-center">
{log.metas.statusOk && log.metas.duration ? (
<ResultHistoryTableItem log={log} />
) : (
<></>
)}

{!log.metas.statusOk ? (
<ResultHistoryTableFailedItem log={log} />
) : (
<></>
)}
</li>
))}
</ul>
</div>
<div className="bg-gray-800 border-4 border-solid border-black/5 rounded-md overflow-auto">
<Typography
variant="caption"
className="sticky left-0 flex w-full p-2 border-b border-solid border-gray-500/10"
>
Responses
</Typography>
<ul
className="grid gap-3 p-2"
style={{
gridTemplateColumns: `repeat(${result.iterations}, 52px)`
}}
>
{result.logs.map((log) => (
<li
key={log.metas.number}
className="inline-flex items-center"
>
{log.metas.statusOk && log.metas.duration ? (
<ResultHistoryTableItem log={log} />
) : (
<></>
)}

<div className="bg-gray-800 border-4 border-solid border-black/5 rounded-md overflow-auto">
<Typography
variant="caption"
className="flex w-full p-2 border-b border-solid border-gray-500/10"
>
Configuration
</Typography>
<ul
key={'stats-list'}
className="grid grid-cols-3 md:flex items-center justify-center gap-4"
>
{config.map(({ label, value }, index) => (
<li
key={index}
className="flex flex-col items-center border-l border-gray-500 border-opacity-20 first:border-0 p-2"
>
<Typography variant="body2">{value}</Typography>
<Typography variant="caption" className="opacity-50">
{label}
</Typography>
</li>
))}
</ul>
</div>
</div>
) : (
<></>
)}
{!log.metas.statusOk ? (
<ResultHistoryTableFailedItem log={log} />
) : (
<></>
)}
</li>
))}
</ul>
</div>

<div className="bg-gray-800 border-4 border-solid border-black/5 rounded-md overflow-auto">
<Typography
variant="caption"
className="sticky left-0 flex w-full p-2 border-b border-solid border-gray-500/10"
>
Configuration
</Typography>
<ul
key={'stats-list'}
className="grid grid-cols-3 md:flex items-center justify-center gap-4"
>
{config.map(({ label, value }, index) => (
<li
key={index}
className="flex flex-col items-center border-l border-gray-500 border-opacity-20 first:border-0 p-2"
>
<Typography variant="body2">{value}</Typography>
<Typography variant="caption" className="opacity-50">
{label}
</Typography>
</li>
))}
</ul>
</div>
</motion.div>
) : (
''
)}
</AnimatePresence>
</div>
);
};
10 changes: 5 additions & 5 deletions packages/ui/src/results/ResultHistory/ResultHistoryToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,21 +152,21 @@ export const ResultHistoryToggle = ({
value={HISTORY_MODES.SUMMARY}
sx={{ textTransform: 'none', padding: '0.25rem 1rem' }}
>
Stats
Key metrics
</ToggleButton>

<ToggleButton
value={HISTORY_MODES.TABLE}
value={HISTORY_MODES.CHART}
sx={{ textTransform: 'none', padding: '0.25rem 1rem' }}
>
Table
Charts
</ToggleButton>

<ToggleButton
value={HISTORY_MODES.CHART}
value={HISTORY_MODES.TABLE}
sx={{ textTransform: 'none', padding: '0.25rem 1rem' }}
>
Chart
Response times
</ToggleButton>
</ToggleButtonGroup>
</Typography>
Expand Down

1 comment on commit eaa92df

@vercel
Copy link

@vercel vercel bot commented on eaa92df Sep 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

clobbr-share – ./

clobbr-share-apihustle.vercel.app
clobbr-share.vercel.app
share.clobbr.app
clobbr-share-git-master-apihustle.vercel.app

Please sign in to comment.