fix(ui): IOChaos containerNames field (chaos-mesh#3533)

* fix(ui): IOChaos `containerNames` field Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update CHANGELOG Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>
g1eny0ung · Aug 11, 2022 · 9699d7c · 9699d7c
1 parent c9b0bdf
commit 9699d7c
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,7 +30,7 @@ For more information and how-to, see [RFC: Keep A Changelog](https://github.com/
 
 ### Fixed
 
-- Nothing
+- Fix IOChaos `containerNames` field in UI [#3533](https://github.com/chaos-mesh/chaos-mesh/pull/3533)
 
 ### Security
 
@@ -67,6 +67,8 @@ For more information and how-to, see [RFC: Keep A Changelog](https://github.com/
 
 ### Security
 
+- Nothing
+
 ## [2.2.2] - 2022-07-07
 
 ### Changed

diff --git a/ui/app/src/components/NewExperimentNext/Step2.tsx b/ui/app/src/components/NewExperimentNext/Step2.tsx
@@ -14,30 +14,33 @@
  * limitations under the License.
  *
  */
-
+import CheckIcon from '@mui/icons-material/Check'
+import PublishIcon from '@mui/icons-material/Publish'
+import UndoIcon from '@mui/icons-material/Undo'
 import { Box, Button, Divider, Grid, MenuItem, Typography } from '@mui/material'
 import { Form, Formik } from 'formik'
-import { LabelField, SelectField, TextField } from 'components/FormField'
-import { Fields as ScheduleSpecificFields, data as scheduleSpecificData } from 'components/Schedule/types'
-import basicData, { schema as basicSchema } from './data/basic'
-import { setBasic, setStep2 } from 'slices/experiments'
+import _ from 'lodash'
 import { useEffect, useMemo, useState } from 'react'
-import { useStoreDispatch, useStoreSelector } from 'store'
 
-import CheckIcon from '@mui/icons-material/Check'
-import Mode from 'components/Scope/Mode'
-import MoreOptions from 'components/MoreOptions'
-import Nodes from './form/Nodes'
 import Paper from '@ui/mui-extends/esm/Paper'
-import PublishIcon from '@mui/icons-material/Publish'
-import Scheduler from './form/Scheduler'
-import Scope from 'components/Scope'
 import SkeletonN from '@ui/mui-extends/esm/SkeletonN'
 import Space from '@ui/mui-extends/esm/Space'
-import UndoIcon from '@mui/icons-material/Undo'
-import _ from 'lodash'
+
+import { useStoreDispatch, useStoreSelector } from 'store'
+
+import { setBasic, setStep2 } from 'slices/experiments'
+
+import { LabelField, SelectField, TextField } from 'components/FormField'
+import MoreOptions from 'components/MoreOptions'
+import { Fields as ScheduleSpecificFields, data as scheduleSpecificData } from 'components/Schedule/types'
+import Scope from 'components/Scope'
+import Mode from 'components/Scope/Mode'
 import i18n from 'components/T'
 
+import basicData, { schema as basicSchema } from './data/basic'
+import Nodes from './form/Nodes'
+import Scheduler from './form/Scheduler'
+
 interface Step2Props {
   inWorkflow?: boolean
   inSchedule?: boolean
@@ -184,8 +187,16 @@ const Step2: React.FC<Step2Props> = ({ inWorkflow = false, inSchedule = false })
                           ))}
                         </SelectField>
                       )}
-                      <LabelField name="metadata.labels" label={i18n('k8s.labels')} />
-                      <LabelField name="metadata.annotations" label={i18n('k8s.annotations')} />
+                      <LabelField
+                        name="metadata.labels"
+                        label={i18n('k8s.labels')}
+                        helperText={i18n('common.isKVHelperText')}
+                      />
+                      <LabelField
+                        name="metadata.annotations"
+                        label={i18n('k8s.annotations')}
+                        helperText={i18n('common.isKVHelperText')}
+                      />
                     </MoreOptions>
                     {!inWorkflow && (
                       <>

diff --git a/ui/app/src/components/NewExperimentNext/data/types.ts b/ui/app/src/components/NewExperimentNext/data/types.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  *
  */
-
 import * as Yup from 'yup'
 
 import { ExperimentKind } from 'components/NewExperiment/types'
@@ -47,6 +46,14 @@ export interface Definition {
   spec?: Spec
 }
 
+const containerNames = {
+  field: 'label' as FieldType,
+  label: 'Container names',
+  value: [],
+  helperText:
+    "Optional. Type and end with Enter to generate the container names. If it's empty, the first container will be injected.",
+}
+
 const awsCommon: Spec = {
   secretName: {
     field: 'text',
@@ -75,13 +82,7 @@ const dnsCommon: Spec = {
     value: [],
     helperText: 'Specify the DNS patterns. For example, type google.com and then press TAB to add it.',
   },
-  containerNames: {
-    field: 'label',
-    label: 'Affected container names',
-    value: [],
-    helperText:
-      "Optional. Type string and end with a TAB to generate the container names. If it's empty, the first container will be injected",
-  },
+  containerNames,
 }
 
 const gcpCommon: Spec = {
@@ -124,12 +125,7 @@ const ioCommon: Spec = {
     value: '',
     helperText: "Optional. The path of files for injecting. If it's empty, the action will inject into all files.",
   },
-  containerName: {
-    field: 'text',
-    label: 'Container name',
-    value: '',
-    helperText: 'Optional. The target container to inject in',
-  },
+  containerNames,
   percent: {
     field: 'number',
     label: 'Percent',
@@ -280,7 +276,7 @@ const networkCommon: Spec = {
     field: 'label',
     label: 'External targets',
     value: [],
-    helperText: 'Type string and end with a TAB to generate the network targets outside k8s',
+    helperText: 'Type and end with Enter to generate the network targets outside k8s',
   },
   target: undefined as any,
 }
@@ -377,7 +373,7 @@ const data: Record<Kind, Definition> = {
             field: 'label',
             label: 'Device names',
             value: [],
-            helperText: 'Type string and end with a TAB to generate the device names',
+            helperText: 'Type and end with Enter to generate the device names',
           },
         },
       },
@@ -711,12 +707,7 @@ const data: Record<Kind, Definition> = {
         key: 'container-kill',
         spec: {
           action: 'container-kill' as any,
-          containerNames: {
-            field: 'label',
-            label: 'Container names',
-            value: [],
-            helperText: 'Type string and end with a TAB to generate the container names.',
-          },
+          containerNames,
         },
       },
     ],
@@ -754,15 +745,9 @@ const data: Record<Kind, Definition> = {
         label: 'Clock ids',
         value: [],
         helperText:
-          "Optional. Type string and end with a TAB to generate the clock ids. If it's empty, it will be set to ['CLOCK_REALTIME']",
-      },
-      containerNames: {
-        field: 'label',
-        label: 'Affected container names',
-        value: [],
-        helperText:
-          "Optional. Type string and end with a TAB to generate the container names. If it's empty, the first container will be injected",
+          "Optional. Type and end with Enter to generate the clock ids. If it's empty, it will be set to ['CLOCK_REALTIME']",
       },
+      containerNames,
     },
   },
   JVMChaos: {

diff --git a/ui/app/src/components/NewExperimentNext/form/Kernel.tsx b/ui/app/src/components/NewExperimentNext/form/Kernel.tsx
@@ -14,18 +14,21 @@
  * limitations under the License.
  *
  */
+import AddCircleIcon from '@mui/icons-material/AddCircle'
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'
 import { Box, IconButton, InputAdornment, MenuItem, Typography } from '@mui/material'
 import { Form, Formik } from 'formik'
-import { LabelField, SelectField, Submit, TextField } from 'components/FormField'
 import { useEffect, useState } from 'react'
 
-import AddCircleIcon from '@mui/icons-material/AddCircle'
 import Paper from '@ui/mui-extends/esm/Paper'
-import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'
 import Space from '@ui/mui-extends/esm/Space'
-import typesData from '../data/types'
+
 import { useStoreSelector } from 'store'
 
+import { LabelField, SelectField, Submit, TextField } from 'components/FormField'
+
+import typesData from '../data/types'
+
 interface KernelProps {
   onSubmit: (values: Record<string, any>) => void
 }
@@ -113,7 +116,7 @@ const Kernel: React.FC<KernelProps> = ({ onSubmit }) => {
               <LabelField
                 name="failKernRequest.headers"
                 label="Headers"
-                helperText="Type string and end with a space to generate the appropriate kernel headers"
+                helperText="Type and end with Enter to generate the appropriate kernel headers"
               />
               <TextField
                 type="number"

diff --git a/ui/app/src/components/NewExperimentNext/form/Stress.tsx b/ui/app/src/components/NewExperimentNext/form/Stress.tsx
@@ -14,16 +14,19 @@
  * limitations under the License.
  *
  */
+import { Typography } from '@mui/material'
 import { Form, Formik, getIn } from 'formik'
-import { LabelField, Submit, TextField } from 'components/FormField'
 import { useEffect, useState } from 'react'
 
-import MoreOptions from 'components/MoreOptions'
 import Space from '@ui/mui-extends/esm/Space'
-import { Typography } from '@mui/material'
-import typesData from '../data/types'
+
 import { useStoreSelector } from 'store'
 
+import { LabelField, Submit, TextField } from 'components/FormField'
+import MoreOptions from 'components/MoreOptions'
+
+import typesData from '../data/types'
+
 const validate = (values: any) => {
   let errors = {}
 
@@ -86,7 +89,7 @@ const Stress: React.FC<StressProps> = ({ onSubmit }) => {
             <LabelField
               name="stressors.cpu.options"
               label="Options of CPU stressors"
-              helperText="Type string and end with a space to generate the stress-ng options"
+              helperText="Type and end with Enter to generate the stress-ng options."
             />
 
             <Typography>Memory</Typography>
@@ -104,20 +107,20 @@ const Stress: React.FC<StressProps> = ({ onSubmit }) => {
             <LabelField
               name="stressors.memory.options"
               label="Options of Memory stressors"
-              helperText="Type string and end with a space to generate the stress-ng options"
+              helperText="Type and end with Enter to generate the stress-ng options."
             />
           </Space>
 
           <MoreOptions>
             <TextField
               name="stressngStressors"
               label="Options of stress-ng"
-              helperText="The options of stress-ng, treated as a string"
+              helperText="The options of stress-ng, treated as a string."
             />
             <LabelField
               name="containerNames"
-              label="Container Name"
-              helperText="Optional. Type string and end with a space to generate the container names. If it's empty, the first container will be injected"
+              label="Container names"
+              helperText="Optional. Type and end with Enter to generate the container names. If it's empty, the first container will be injected."
             />
           </MoreOptions>
 

diff --git a/ui/app/src/i18n/en.json b/ui/app/src/i18n/en.json
@@ -335,7 +335,7 @@
     "durationHelper": "Supported formats of the duration are: ms / s / m / h.",
     "edit": "Edit",
     "ip": "IP address",
-    "isKVHelperText": "Type key:value and end with Enter to generate a key/value pair",
+    "isKVHelperText": "Type key:value and end with Enter to generate a key/value pair.",
     "logout": "Logout",
     "logoutDesc": "You need to re-enter the token after logging out",
     "multiOptions": "Support mutiple options",
@@ -396,6 +396,6 @@
   },
   "physic": {
     "address": "Address",
-    "addressHelper": "Type and end with Enter to add one or more chaosd addresses"
+    "addressHelper": "Type and end with Enter to add one or more chaosd addresses."
   }
 }
diff --git a/ui/app/src/i18n/zh.json b/ui/app/src/i18n/zh.json
@@ -335,7 +335,7 @@
     "durationHelper": "持续时间支持的格式有：ms / s / m / h。",
     "edit": "修改",
     "ip": "IP 地址",
-    "isKVHelperText": "键入 key:value 并以 TAB 结尾来创建一个键值对",
+    "isKVHelperText": "键入 key:value 并以回车结束来创建一个键值对。",
     "logout": "登出",
     "logoutDesc": "登出后需要重新输入令牌",
     "multiOptions": "支持多选",