chore: scaffold Thresholds UI behind feature flag #438
Conversation
| <ControlledSelect | ||
| options={[]} | ||
| control={control} | ||
| name={`thresholds.${index}.url`} | ||
| /> |
There was a problem hiding this comment.
The URL dropdown is still not functional for now
| <Dialog.Root open={open} onOpenChange={onOpenChange}> | ||
| <Dialog.Content |
There was a problem hiding this comment.
I'm using a dialog for now so I can get the remaining UI working. Any feedback is appreciated here if you think this isn't the best approach.
| @@ -24,7 +24,7 @@ export function DevModeDialog() { | |||
| <Dialog.Description>Control feature toggles</Dialog.Description> | |||
| <Flex direction="column" gap="2" my="4"> | |||
| {Object.entries(features).map(([feature, enabled]) => ( | |||
| <Text as="label" size="2" key="feature"> | |||
| onOpenChange: (open: boolean) => void | ||
| } | ||
|
|
||
| export function ThresholdsDialog({ |
There was a problem hiding this comment.
Thresholds are a part of the k6 script options so I'd expect to see them in the Test options popover. Perhaps we can make it a bit wider to accommodate the thresholds table?
There was a problem hiding this comment.
Example with the popover width set to 640px:
It's tight, so might need a further increase
There was a problem hiding this comment.
I've increased to 800. It looks good now for the Thresholds tab, although we may have to revisit the other tabs as their space/content ratio looks slightly larger IMO. It's all behind a feature flag so we can address it before promoting Thresholds to production when the time comes.
| import { zodResolver } from '@hookform/resolvers/zod' | ||
| import { | ||
| Dialog, | ||
| Table, |
There was a problem hiding this comment.
If you import Table from @/components/Table, it will have the same header cell style as the test variables and load profile ones
| { label: 'Less than', value: '<' }, | ||
| { label: 'Less than or equal to', value: '<=' }, | ||
| { label: 'Greater than', value: '>' }, | ||
| { label: 'Greater than or equal to', value: '>=' }, | ||
| { label: 'Equal to', value: '===' }, | ||
| { label: 'Not equal to', value: '!==' }, |
There was a problem hiding this comment.
Maybe worth discussing with Product, but I think I might be easier to scan <= and >= than Less than or equal to and Greater than or equal to (it will also let us save some precious horizontal space)
There was a problem hiding this comment.
I've used it as you suggested for now just to fit better in the Popover. I'll bring this up to Product in the sync tomorrow.
| import { useCallback, useEffect } from 'react' | ||
| import { useForm, useFieldArray, FormProvider } from 'react-hook-form' | ||
| import { ThresholdRow } from './ThresholdRow' | ||
| import { uniqueId } from 'lodash-es' |
There was a problem hiding this comment.
Nit(because there's one more place that uses this import), but have you considered crypto.randomUUID()?
| Thresholds are global pass/fail criteria that you can configure k6 | ||
| to use, that can act on any result metrics. Read more about | ||
| thresholds in the{' '} |
There was a problem hiding this comment.
To better match the tone in other tabs, this could be updated to:
Define pass/fail criteria for your test metrics. If the performance of the system under test does not meet the conditions, the test finishes with a failed status.
There was a problem hiding this comment.
@going-confetti Thanks for the quick review. I've addressed your suggestions and moved the feature inside the Test Options menu.
cc @Llandy3d as we had a brief chat about this on Slack
| width?: string | ||
| align?: 'start' | 'end' | 'center' |
There was a problem hiding this comment.
New props now that we have more than one Popover with different sizes
| align={isThresholdsEnabled ? 'center' : 'end'} | ||
| width={isThresholdsEnabled ? '800px' : '400px'} |
There was a problem hiding this comment.
Increased the width of the Popover when Thresholds is enabled
Description
This PR scaffolds the UI for the Thresholds feature. The only functionalities implemented in this PR are:
Validation, code generation, and UI polishments will come after, including the list of URLs in the "URL" dropdown.
How to Test
thresholdsfeatureChecklist
npm run lint) and all checks pass.npm test) and all tests pass.Screenshots (if appropriate):
Screen.Recording.2025-01-27.at.7.27.47.AM.mov
Related PR(s)/Issue(s)