internal(Load Zones): Ability to add load zones (#518)

Author: cristianoventura

package-lock.json

@@ -85,6 +85,7 @@
     "allotment": "^1.20.2",
     "chokidar": "^4.0.3",
     "constrained-editor-plugin": "^1.3.0",
+    "country-flag-icons": "^1.5.18",
     "electron-log": "^5.2.0",
     "electron-squirrel-startup": "^1.0.1",
     "find-process": "^1.4.7",

package.json

@@ -27,7 +27,7 @@ export const AvailableLoadZonesSchema = z.enum([
 export const LoadZoneItemSchema = z.object({
   id: z.string(),
   loadZone: AvailableLoadZonesSchema,
-  percent: z.number().int().min(1).max(100),
+  percent: z.number().int().min(1, { message: 'Invalid percentage' }).max(100),
 })
 
 export const LoadZoneSchema = z.object({

src/schemas/generator/v1/loadZone.ts

@@ -37,7 +37,7 @@ export const useGeneratorStore = create<GeneratorStore>()(
     ...createScriptDataSlice(set, ...rest),
     setGeneratorFile: (
       {
-        options: { thinkTime, loadProfile, thresholds },
+        options: { thinkTime, loadProfile, thresholds, cloud },
         testData: { variables, files },
         recordingPath,
         rules,
@@ -52,6 +52,7 @@ export const useGeneratorStore = create<GeneratorStore>()(
         // options
         state.sleepType = thinkTime.sleepType
         state.timing = thinkTime.timing
+        state.loadZones = cloud.loadZones
         state.thresholds = thresholds
         state.executor = loadProfile.executor
         switch (loadProfile.executor) {

src/store/generator/useGeneratorStore.ts

@@ -17,6 +17,7 @@ import {
   ThresholdStatisticSchema,
 } from '@/schemas/generator'
 import {
+  AvailableLoadZonesSchema,
   LoadZoneItemSchema,
   LoadZoneSchema,
 } from '@/schemas/generator/v1/loadZone'
@@ -42,5 +43,6 @@ export type ThresholdStatstic = z.infer<typeof ThresholdStatisticSchema>
 
 export type LoadZoneData = z.infer<typeof LoadZoneSchema>
 export type LoadZoneItem = z.infer<typeof LoadZoneItemSchema>
+export type AvailableLoadZones = z.infer<typeof AvailableLoadZonesSchema>
 
 export type TestOptions = z.infer<typeof TestOptionsSchema>

src/types/testOptions.ts

@@ -0,0 +1,69 @@
+import { FieldGroup, ControlledSelect } from '@/components/Form'
+import { Table } from '@/components/Table'
+import { LoadZoneData } from '@/types/testOptions'
+import {
+  FieldArrayWithId,
+  UseFieldArrayRemove,
+  useFormContext,
+} from 'react-hook-form'
+import { IconButton, TextField } from '@radix-ui/themes'
+import { TrashIcon } from '@radix-ui/react-icons'
+import { LOAD_ZONES_REGIONS_OPTIONS } from './LoadZones.utils'
+
+type LoadZoneRowProps = {
+  index: number
+  field: FieldArrayWithId<LoadZoneData, 'loadZones', 'id'>
+  remove: UseFieldArrayRemove
+}
+
+export function LoadZoneRow({ field, index, remove }: LoadZoneRowProps) {
+  const {
+    register,
+    formState: { errors },
+    control,
+    watch,
+  } = useFormContext<LoadZoneData>()
+
+  const { distribution, loadZones } = watch()
+
+  // Disable load zone options that are already in use
+  const getLoadZoneOptions = () => {
+    return LOAD_ZONES_REGIONS_OPTIONS.map((option) => ({
+      ...option,
+      disabled: loadZones.some(
+        (zone, i) => zone.loadZone === option.value && i !== index
+      ),
+    }))
+  }
+
+  return (
+    <Table.Row key={field.id}>
+      <Table.Cell>
+        <FieldGroup errors={errors} name={`loadZones.${index}.loadZone`} mb="0">
+          <ControlledSelect
+            control={control}
+            name={`loadZones.${index}.loadZone`}
+            options={getLoadZoneOptions()}
+          />
+        </FieldGroup>
+      </Table.Cell>
+      <Table.Cell>
+        <FieldGroup errors={errors} name={`loadZones.${index}.percent`} mb="0">
+          <TextField.Root
+            type="number"
+            placeholder="value"
+            disabled={distribution === 'even'}
+            {...register(`loadZones.${index}.percent`, { valueAsNumber: true })}
+          >
+            <TextField.Slot side="right">%</TextField.Slot>
+          </TextField.Root>
+        </FieldGroup>
+      </Table.Cell>
+      <Table.Cell>
+        <IconButton onClick={() => remove(index)}>
+          <TrashIcon width="18" height="18" />
+        </IconButton>
+      </Table.Cell>
+    </Table.Row>
+  )
+}

src/views/Generator/TestOptions/LoadZones/LoadZoneRow.tsx

@@ -3,26 +3,55 @@ import { LoadZoneSchema } from '@/schemas/generator/v1/loadZone'
 import { useGeneratorStore } from '@/store/generator/useGeneratorStore'
 import { LoadZoneData } from '@/types/testOptions'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Text, Link as RadixLink, Button } from '@radix-ui/themes'
+import {
+  Text,
+  Link as RadixLink,
+  Button,
+  Switch,
+  Flex,
+  Callout,
+  Tooltip,
+} from '@radix-ui/themes'
 import { useCallback, useEffect } from 'react'
-import { FormProvider, useForm } from 'react-hook-form'
+import {
+  FormProvider,
+  useForm,
+  useFieldArray,
+  useFormContext,
+} from 'react-hook-form'
+import { LoadZoneRow } from './LoadZoneRow'
+import { FieldGroup } from '@/components/Form'
+import {
+  findUnusedLoadZone,
+  getRemainingPercentage,
+  LOAD_ZONES_REGIONS_OPTIONS,
+} from './LoadZones.utils'
+import { Cross1Icon } from '@radix-ui/react-icons'
 
 export function LoadZones() {
-  const { distribution, loadZones } = useGeneratorStore(
-    (store) => store.loadZones
-  )
+  const loadZones = useGeneratorStore((store) => store.loadZones)
   const setLoadZones = useGeneratorStore((store) => store.setLoadZones)
 
   const formMethods = useForm<LoadZoneData>({
     resolver: zodResolver(LoadZoneSchema),
     shouldFocusError: false,
-    defaultValues: {
-      distribution,
-      loadZones,
-    },
+    defaultValues: loadZones,
+  })
+
+  const {
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    formState: { errors },
+  } = formMethods
+
+  const { append, remove, fields } = useFieldArray<LoadZoneData>({
+    control,
+    name: 'loadZones',
   })
 
-  const { handleSubmit, watch } = formMethods
+  const { distribution, loadZones: usedLoadZones } = watch()
 
   const handleOpenDocs = (event: React.MouseEvent) => {
     event.preventDefault()
@@ -31,8 +60,14 @@ export function LoadZones() {
     )
   }
 
-  function handleAddLoadZone() {
-    // TODO: Implement
+  function handleAddLoadZone(event: React.MouseEvent) {
+    event.preventDefault()
+
+    append({
+      id: crypto.randomUUID(),
+      loadZone: findUnusedLoadZone(usedLoadZones),
+      percent: getRemainingPercentage(usedLoadZones),
+    })
   }
 
   const onSubmit = useCallback(
@@ -48,6 +83,20 @@ export function LoadZones() {
     return () => subscription.unsubscribe()
   }, [watch, handleSubmit, onSubmit])
 
+  // evenly distribute load zones if distribution is set to "even"
+  useEffect(() => {
+    if (distribution !== 'even') return
+
+    const basePercent = Math.floor(100 / fields.length)
+    const remainder = 100 % fields.length
+
+    fields.forEach((_, index) => {
+      // ensure only integers are used
+      const percent = index < remainder ? basePercent + 1 : basePercent
+      setValue(`loadZones.${index}.percent`, percent)
+    })
+  }, [distribution, fields, setValue])
+
   return (
     <FormProvider {...formMethods}>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -59,6 +108,25 @@ export function LoadZones() {
           </RadixLink>
           .
         </Text>
+
+        <FieldGroup name="distribution" label="Distribution" errors={errors}>
+          <Text size="2">
+            <Flex gap="2" align="center">
+              Even
+              <Switch
+                name="distribution"
+                checked={distribution === 'manual'}
+                onCheckedChange={(checked) => {
+                  setValue('distribution', checked ? 'manual' : 'even')
+                }}
+              />
+              Manual
+            </Flex>
+          </Text>
+        </FieldGroup>
+
+        {errors.loadZones?.root && <LoadZonePercentageError />}
+
         <Table.Root size="1" variant="surface" layout="fixed">
           <Table.Header>
             <Table.Row>
@@ -73,11 +141,31 @@ export function LoadZones() {
           </Table.Header>
 
           <Table.Body>
+            {fields.map((field, index) => (
+              <LoadZoneRow
+                key={field.id}
+                field={field}
+                index={index}
+                remove={remove}
+              />
+            ))}
+
             <Table.Row>
               <Table.RowHeaderCell colSpan={7} justify="center">
-                <Button variant="ghost" onClick={handleAddLoadZone}>
-                  Add new load zone
-                </Button>
+                <Tooltip
+                  content="All available load zones are already in use"
+                  hidden={fields.length !== LOAD_ZONES_REGIONS_OPTIONS.length}
+                >
+                  <Button
+                    variant="ghost"
+                    onClick={handleAddLoadZone}
+                    disabled={
+                      fields.length === LOAD_ZONES_REGIONS_OPTIONS.length
+                    }
+                  >
+                    Add new load zone
+                  </Button>
+                </Tooltip>
               </Table.RowHeaderCell>
             </Table.Row>
           </Table.Body>
@@ -86,3 +174,19 @@ export function LoadZones() {
     </FormProvider>
   )
 }
+
+function LoadZonePercentageError() {
+  const {
+    formState: { errors },
+  } = useFormContext<LoadZoneData>()
+
+  return (
+    <Callout.Root variant="soft" color="tomato" mb="3">
+      <Callout.Icon>
+        <Cross1Icon />
+      </Callout.Icon>
+
+      <Callout.Text>{errors.loadZones?.root?.message}</Callout.Text>
+    </Callout.Root>
+  )
+}