From 43183f269d7e413c97f8188cbf81715cfa1d5fda Mon Sep 17 00:00:00 2001 From: Sayan Mondal Date: Mon, 12 Feb 2024 11:36:05 +0530 Subject: [PATCH 1/3] chore: [CHAOS-3808]: Resilience probe modal toggle reseting to default bugfix --- .../AddProbeModalWizard.tsx | 8 +- .../web/src/controllers/ChaosProbes/types.ts | 2 +- .../UpdateProbeModalWizard.tsx | 25 ++-- chaoscenter/web/src/strings/strings.en.yaml | 5 + chaoscenter/web/src/strings/types.ts | 3 + .../AddProbeModalWizard.module.scss | 4 +- .../AddProbeModalWizard.tsx | 60 ++++----- .../src/views/ChaosProbes/ChaosProbeTable.tsx | 51 +++++--- .../ChaosProbes/ChaosProbesTableMenu.tsx | 21 ++-- .../views/ChaosProbes/UpdateProbeModal.tsx | 2 +- .../ExperimentCreationFaultConfiguration.tsx | 8 +- .../Tabs/Probes/MenuCell.tsx | 117 ++++++++++++++++++ .../Tabs/Probes/Probes.tsx | 40 +++++- 13 files changed, 261 insertions(+), 85 deletions(-) create mode 100644 chaoscenter/web/src/views/ExperimentCreationFaultConfiguration/Tabs/Probes/MenuCell.tsx diff --git a/chaoscenter/web/src/controllers/AddProbeModalWizard/AddProbeModalWizard.tsx b/chaoscenter/web/src/controllers/AddProbeModalWizard/AddProbeModalWizard.tsx index e15846868cc..f5351a9a18a 100644 --- a/chaoscenter/web/src/controllers/AddProbeModalWizard/AddProbeModalWizard.tsx +++ b/chaoscenter/web/src/controllers/AddProbeModalWizard/AddProbeModalWizard.tsx @@ -30,7 +30,7 @@ export default function AddProbeModalWizardController({ { loading: addKubernetesHTTPProbeMutationLoading, error: addKubernetesHTTPProbeMutationError } ] = addKubernetesHTTPProbe({ onCompleted: () => { - refetchProbes(); + refetchProbes?.(); }, onError: err => showError(err.message) }); @@ -40,14 +40,14 @@ export default function AddProbeModalWizardController({ { loading: addKubernetesCMDProbeMutationLoading, error: addKubernetesCMDProbeMutationError } ] = addKubernetesCMDProbe({ onCompleted: () => { - refetchProbes(); + refetchProbes?.(); }, onError: err => showError(err.message) }); const [addK8SProbeMutation, { loading: addK8SProbeMutationLoading, error: addK8SProbeMutationError }] = addK8SProbe({ onCompleted: () => { - refetchProbes(); + refetchProbes?.(); }, onError: err => showError(err.message) }); @@ -55,7 +55,7 @@ export default function AddProbeModalWizardController({ const [addPROMProbeMutation, { loading: addPROMProbeMutationLoading, error: addPROMProbeMutationError }] = addPROMProbe({ onCompleted: () => { - refetchProbes(); + refetchProbes?.(); }, onError: err => showError(err.message) }); diff --git a/chaoscenter/web/src/controllers/ChaosProbes/types.ts b/chaoscenter/web/src/controllers/ChaosProbes/types.ts index 13e9a3d32b4..eeaee6f1506 100644 --- a/chaoscenter/web/src/controllers/ChaosProbes/types.ts +++ b/chaoscenter/web/src/controllers/ChaosProbes/types.ts @@ -9,5 +9,5 @@ export interface ChaosProbesTableProps { } export interface RefetchProbes { - refetchProbes: GqlAPIQueryResponse['refetch']; + refetchProbes?: GqlAPIQueryResponse['refetch']; } diff --git a/chaoscenter/web/src/controllers/UpdateProbeModalWizard/UpdateProbeModalWizard.tsx b/chaoscenter/web/src/controllers/UpdateProbeModalWizard/UpdateProbeModalWizard.tsx index 4eee67e04aa..c98def3ea68 100644 --- a/chaoscenter/web/src/controllers/UpdateProbeModalWizard/UpdateProbeModalWizard.tsx +++ b/chaoscenter/web/src/controllers/UpdateProbeModalWizard/UpdateProbeModalWizard.tsx @@ -5,6 +5,7 @@ import type { RefetchProbes } from '@controllers/ChaosProbes'; import AddProbeModalWizardView from '@views/AddProbeModalWizard'; import type { InfrastructureType } from '@api/entities'; import { getScope } from '@utils'; +import Loader from '@components/Loader'; interface UpdateHubModalWizardControllerProps extends RefetchProbes { hideDarkModal: () => void; @@ -29,7 +30,7 @@ export default function UpdateProbeModalWizardController({ const [updateProbeMutation, { loading: updateProbeLoading, error }] = updateProbe({ onCompleted: data => { showSuccess(data.updateProbe); - refetchProbes(); + refetchProbes?.(); }, onError: err => showError(err.message) }); @@ -45,15 +46,17 @@ export default function UpdateProbeModalWizardController({ const loading = updateProbeLoading || getProbeLoading; return ( - + + + ); } diff --git a/chaoscenter/web/src/strings/strings.en.yaml b/chaoscenter/web/src/strings/strings.en.yaml index 34a027a67c3..7ad016b8cd8 100644 --- a/chaoscenter/web/src/strings/strings.en.yaml +++ b/chaoscenter/web/src/strings/strings.en.yaml @@ -761,6 +761,7 @@ previous: Previous private: Private probeAddedSuccessfully: Probe added successfully, please apply changes before closing probeConfiguration: Probe Configuration +probeDeletedSuccessfully: Probe Deleted Successfully probeDetails: Probe Details probeExecutionPreview: PROBE EXECUTION PREVIEW probeInFault: Probe in fault @@ -886,6 +887,10 @@ registryType: Registry Type remove: Remove removeMember: Remove Member removeMemberConfirmation: Are you sure you want to remove {{username}}? +removeProbeDesc: >- + This action will remove the probe from the manifest. Are you sure you want to + continue? +removeProbeHeading: Remove this probe? repoBranchPlaceholder: Enter repository branch repoURLPlaceholder: Enter repository URL repository: Repository diff --git a/chaoscenter/web/src/strings/types.ts b/chaoscenter/web/src/strings/types.ts index 345a0a3e7bd..19e3cd4f964 100644 --- a/chaoscenter/web/src/strings/types.ts +++ b/chaoscenter/web/src/strings/types.ts @@ -635,6 +635,7 @@ export interface StringsMap { 'private': unknown 'probeAddedSuccessfully': unknown 'probeConfiguration': unknown + 'probeDeletedSuccessfully': unknown 'probeDetails': unknown 'probeExecutionPreview': unknown 'probeInFault': unknown @@ -736,6 +737,8 @@ export interface StringsMap { 'remove': unknown 'removeMember': unknown 'removeMemberConfirmation': PrimitiveObject<'username'> + 'removeProbeDesc': unknown + 'removeProbeHeading': unknown 'repoBranchPlaceholder': unknown 'repoURLPlaceholder': unknown 'repository': unknown diff --git a/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.module.scss b/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.module.scss index 8690adb168a..224fc90f643 100644 --- a/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.module.scss +++ b/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.module.scss @@ -21,7 +21,9 @@ } .probeDetailsInnerContainer { - height: 60vh; + padding: 6px; + height: 516px; + margin-bottom: 1rem; overflow: auto !important; } } diff --git a/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx b/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx index d2a29b1b7a1..71bf1dac917 100644 --- a/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx +++ b/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx @@ -20,7 +20,7 @@ import { noop, omit } from 'lodash-es'; import { Divider } from '@blueprintjs/core'; import { parse } from 'yaml'; import { Icon } from '@harnessio/icons'; -import { getIcon, getScope } from '@utils'; +import { cleanApolloResponse, getIcon, getScope } from '@utils'; import { useStrings } from '@strings'; import NameDescriptionTags from '@components/NameIdDescriptionTags'; import type { @@ -309,19 +309,15 @@ const TunePropertiesStep: React.FC> = props => { interval: Yup.string() .matches(unitsRegex, 'Probe interval should contain values in ns, us, ms, m, s or h only') .required(getString(`probeValidation.interval`)), - attempt: Yup.number(), - probePollingInterval: Yup.string().matches( - unitsRegex, - 'Probe polling interval should contain values in ns, us, ms, m, s or h only' - ), - initialDelay: Yup.string().matches( - unitsRegex, - 'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only' - ), - evaluationTimeout: Yup.string().matches( - unitsRegex, - 'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only' - ) + probePollingInterval: Yup.string() + .matches(unitsRegex, 'Probe polling interval should contain values in ns, us, ms, m, s or h only') + .nullable(), + initialDelay: Yup.string() + .matches(unitsRegex, 'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only') + .nullable(), + evaluationTimeout: Yup.string() + .matches(unitsRegex, 'Probe evaluation timeout should contain values in ns, us, ms, m, s or h only') + .nullable() }; if (props.formData.infrastructureType === InfrastructureType.KUBERNETES) { @@ -359,7 +355,7 @@ const TunePropertiesStep: React.FC> = props => { {formikProps => { return (
- + {getString(`properties`)} @@ -442,8 +438,10 @@ const TuneDetailsStep: React.FC< // TODO: Add monaco editor for source probe in CMD const cmdComparatorType = React.useRef('int'); const promComparatorType = React.useRef('int'); - const source = React.useRef(''); - const [isSourceSelected, setIsSourceSelected] = React.useState(false); + const source = React.useRef(props.formData.kubernetesCMDProperties?.source ?? ''); + const [isSourceSelected, setIsSourceSelected] = React.useState( + props.formData.kubernetesCMDProperties?.source ? true : false + ); const { error, loading, mutation, isEdit, hideDarkModal } = props; const preventDefault = (e: React.DragEvent) => { @@ -925,7 +923,15 @@ const TuneDetailsStep: React.FC< /> - setIsSourceSelected(prev => !prev)} /> + { + setIsSourceSelected(prev => !prev); + (event.target as HTMLInputElement).checked && + window.setTimeout(() => document.getElementById('sourceContainer')?.scrollIntoView(false), 100); + }} + /> {isSourceSelected && ( - +
{ if (mutation.updateProbeMutation && probeDataWithTypename) { - /** - * Will remove deeply nested __typename fields efficiently from the payload - * Apollo Github Issue: https://github.com/apollographql/apollo-feature-requests/issues/6 - * */ - const probeData: Probe = JSON.parse( - JSON.stringify(probeDataWithTypename, (name, val) => { - if (name === '__typename') { - delete val[name]; - } else if (val === null) { - return undefined; - } else { - return val; - } - }) - ); + const probeData = cleanApolloResponse(probeDataWithTypename) as Probe; initialValues = { name: probeData.name, diff --git a/chaoscenter/web/src/views/ChaosProbes/ChaosProbeTable.tsx b/chaoscenter/web/src/views/ChaosProbes/ChaosProbeTable.tsx index 71a247faedd..95909fd3275 100644 --- a/chaoscenter/web/src/views/ChaosProbes/ChaosProbeTable.tsx +++ b/chaoscenter/web/src/views/ChaosProbes/ChaosProbeTable.tsx @@ -9,16 +9,24 @@ import { getIcon, timeDifferenceForDate } from '@utils'; import { useStrings } from '@strings'; import { useRouteWithBaseUrl } from '@hooks'; import CopyButton from '@components/CopyButton'; -import type { Probe } from '@api/entities'; +import type { InfrastructureType, Probe } from '@api/entities'; import type { ChaosProbesTableProps, RefetchProbes } from '@controllers/ChaosProbes'; import { ProbeTabs } from '@models'; import { MenuCell } from './ChaosProbesTableMenu'; +import { UpdateProbeModal } from './UpdateProbeModal'; import css from './ChaosProbes.module.scss'; +export interface EditProbeData { + name: string; + infrastructureType: InfrastructureType; +} + const ChaosProbeTable = ({ content, refetchProbes }: ChaosProbesTableProps & RefetchProbes): React.ReactElement => { const { getString } = useStrings(); const history = useHistory(); const paths = useRouteWithBaseUrl(); + const [editProbe, setEditProbe] = React.useState(); + const columns: Column>[] = React.useMemo(() => { return [ { @@ -116,7 +124,9 @@ const ChaosProbeTable = ({ content, refetchProbes }: ChaosProbesTableProps & Ref { Header: '', id: 'threeDotMenu', - Cell: ({ row }: { row: Row }) => , + Cell: ({ row }: { row: Row }) => ( + + ), disableSortBy: true } ]; @@ -124,19 +134,30 @@ const ChaosProbeTable = ({ content, refetchProbes }: ChaosProbesTableProps & Ref }, []); return ( - > - className={css.table} - columns={columns} - data={content} - sortable - onRowClick={rowDetails => - rowDetails.name && - history.push({ - pathname: paths.toChaosProbe({ probeName: rowDetails.name }), - search: `probeName=${rowDetails.name}&tab=${ProbeTabs.EXECUTION_RESULTS}&infrastructureType=${rowDetails.infrastructureType}` - }) - } - /> + <> + > + className={css.table} + columns={columns} + data={content} + sortable + onRowClick={rowDetails => + rowDetails.name && + history.push({ + pathname: paths.toChaosProbe({ probeName: rowDetails.name }), + search: `probeName=${rowDetails.name}&tab=${ProbeTabs.EXECUTION_RESULTS}&infrastructureType=${rowDetails.infrastructureType}` + }) + } + /> + {editProbe && ( + setEditProbe(undefined)} + probeName={editProbe.name} + infrastructureType={editProbe.infrastructureType} + /> + )} + ); }; diff --git a/chaoscenter/web/src/views/ChaosProbes/ChaosProbesTableMenu.tsx b/chaoscenter/web/src/views/ChaosProbes/ChaosProbesTableMenu.tsx index 41dd2aceee8..99f21af29c4 100644 --- a/chaoscenter/web/src/views/ChaosProbes/ChaosProbesTableMenu.tsx +++ b/chaoscenter/web/src/views/ChaosProbes/ChaosProbesTableMenu.tsx @@ -18,18 +18,22 @@ import type { Probe } from '@api/entities'; import type { RefetchProbes } from '@controllers/ChaosProbes'; import RbacMenuItem from '@components/RbacMenuItem'; import { PermissionGroup } from '@models'; -import { UpdateProbeModal } from './UpdateProbeModal'; +import type { EditProbeData } from './ChaosProbeTable'; interface MenuCellProps extends RefetchProbes { row: Row; + setEditProbe: React.Dispatch>; } -export const MenuCell = ({ row: { original: data }, refetchProbes }: MenuCellProps): React.ReactElement => { +export const MenuCell = ({ + row: { original: data }, + refetchProbes, + setEditProbe +}: MenuCellProps): React.ReactElement => { const scope = getScope(); const { getString } = useStrings(); const { showError } = useToaster(); - const { isOpen: isOpenUpdateProbeModal, open: openUpdateProbeModal, close: closeUpdateProbeModal } = useToggleOpen(); const { isOpen: isOpenDeleteProbeDialog, open: openDeleteProbeDialog, @@ -66,22 +70,15 @@ export const MenuCell = ({ row: { original: data }, refetchProbes }: MenuCellPro return ( -