feat: Added edit Probe button in probe details tab (#4606)

Signed-off-by: Hrishav <[email protected]> Co-authored-by: Saranya Jena <[email protected]>
litmuschaos · May 15, 2024 · 1124ea8 · 1124ea8
1 parent 9b91eb7
commit 1124ea8
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 35 deletions.
diff --git a/chaoscenter/web/src/controllers/ChaosProbe/ChaosProbe.tsx b/chaoscenter/web/src/controllers/ChaosProbe/ChaosProbe.tsx
@@ -10,7 +10,11 @@ export default function ChaosProbeController(): React.ReactElement {
   const { probeName } = useParams<{ probeName: string }>();
   const { showError } = useToaster();
 
-  const { data, loading } = getProbe({
+  const {
+    data,
+    loading,
+    refetch: refetchProbe
+  } = getProbe({
     ...scope,
     probeName: probeName,
     options: {
@@ -20,5 +24,5 @@ export default function ChaosProbeController(): React.ReactElement {
 
   const probeData = data?.getProbe;
 
-  return <ChaosProbeView loading={loading} probeData={probeData} />;
+  return <ChaosProbeView loading={loading} probeData={probeData} refetchProbes={refetchProbe} />;
 }
diff --git a/chaoscenter/web/src/controllers/ChaosProbe/types.ts b/chaoscenter/web/src/controllers/ChaosProbe/types.ts
@@ -0,0 +1,6 @@
+import { GetProbeRequest, GetProbeResponse } from '@api/core';
+import { GqlAPIQueryResponse } from '@api/types';
+
+export interface RefetchGetProbes {
+  refetchProbes?: GqlAPIQueryResponse<GetProbeResponse, GetProbeRequest>['refetch'];
+}
diff --git a/chaoscenter/web/src/controllers/UpdateProbeModalWizard/UpdateProbeModalWizard.tsx b/chaoscenter/web/src/controllers/UpdateProbeModalWizard/UpdateProbeModalWizard.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
 import { useToaster } from '@harnessio/uicore';
-import { getProbeAllProperties, updateProbe, validateUniqueProbe } from '@api/core';
+import { getProbeAllProperties, GetProbeRequest, GetProbeResponse, updateProbe, validateUniqueProbe } from '@api/core';
 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';
+import { GqlAPIQueryResponse } from '@api/types';
 
-interface UpdateHubModalWizardControllerProps extends RefetchProbes {
+interface UpdateHubModalWizardControllerProps {
   hideDarkModal: () => void;
   probeName: string;
   infrastructureType: InfrastructureType | undefined;
+  refetchProbes?: GqlAPIQueryResponse<GetProbeResponse, GetProbeRequest>['refetch'] | RefetchProbes['refetchProbes'];
 }
 
 export default function UpdateProbeModalWizardController({

diff --git a/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx b/chaoscenter/web/src/views/AddProbeModalWizard/AddProbeModalWizard.tsx
@@ -370,11 +370,6 @@ const TunePropertiesStep: React.FC<StepProps<StepData>> = props => {
                   inputGroup={{ type: 'string' }}
                   label={getString(`interval`)}
                 />
-                <FormInput.Text
-                  name={`${getType()}.retry`}
-                  inputGroup={{ type: 'number' }}
-                  label={getString(`retry`)}
-                />
                 <FormInput.Text
                   name={`${getType()}.attempt`}
                   inputGroup={{ type: 'number' }}

diff --git a/chaoscenter/web/src/views/ChaosProbe/ChaosProbe.tsx b/chaoscenter/web/src/views/ChaosProbe/ChaosProbe.tsx
@@ -11,6 +11,7 @@ import Loader from '@components/Loader';
 import ChaosProbeConfigurationController from '@controllers/ChaosProbeConfiguration';
 import ChaosProbeExecutionHistoryController from '@controllers/ChaosProbeExecutionHistory';
 import { ProbeTabs } from '@models';
+import { RefetchGetProbes } from '@controllers/ChaosProbe/types';
 import ChaosProbeHeader from './ChaosProbeHeader';
 import css from './ChaosProbe.module.scss';
 
@@ -19,7 +20,11 @@ interface ChaosProbeViewProps {
   probeData: Probe | undefined;
 }
 
-function ChaosProbeView({ loading, probeData }: ChaosProbeViewProps): React.ReactElement {
+function ChaosProbeView({
+  loading,
+  probeData,
+  refetchProbes
+}: ChaosProbeViewProps & RefetchGetProbes): React.ReactElement {
   const { getString } = useStrings();
   const paths = useRouteWithBaseUrl();
   const searchParams = useSearchParams();
@@ -80,10 +85,12 @@ function ChaosProbeView({ loading, probeData }: ChaosProbeViewProps): React.Reac
           probeData={{
             name: probeName,
             type: probeData.type,
-            description: probeData.description ?? ''
+            description: probeData.description ?? '',
+            infrastructureType: probeData.infrastructureType
           }}
           createdAt={probeData.createdAt ?? ''}
           updatedAt={probeData.updatedAt ?? ''}
+          refetchProbes={refetchProbes}
         >
           <Layout.Vertical width={'100%'} background={Color.PRIMARY_BG} height="calc(100vh - 80px)">
             <Page.SubHeader className={css.subHeader}>{subHeader}</Page.SubHeader>

diff --git a/chaoscenter/web/src/views/ChaosProbe/ChaosProbeHeader.tsx b/chaoscenter/web/src/views/ChaosProbe/ChaosProbeHeader.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
-import { Container, Heading, Layout, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, Container, Heading, Layout, Text } from '@harnessio/uicore';
 import { Color, FontVariation } from '@harnessio/design-system';
 import { Icon } from '@harnessio/icons';
 import type { DefaultLayoutTemplateProps } from '@components/DefaultLayout/DefaultLayout';
 import { useStrings } from '@strings';
 import { getDetailedTime, getIcon } from '@utils';
-import type { ProbeType } from '@api/entities';
+import type { InfrastructureType, ProbeType } from '@api/entities';
 import LitmusBreadCrumbs from '@components/LitmusBreadCrumbs';
 import MainNav from '@components/MainNav';
 import SideNav from '@components/SideNav';
+import { UpdateProbeModal } from '@views/ChaosProbes/UpdateProbeModal';
+import { RefetchGetProbes } from '@controllers/ChaosProbe/types';
 import css from './ChaosProbe.module.scss';
 
 interface ChaosProbeHeaderProps extends DefaultLayoutTemplateProps {
@@ -17,9 +19,11 @@ interface ChaosProbeHeaderProps extends DefaultLayoutTemplateProps {
     name: string;
     description: string;
     type: ProbeType;
+    infrastructureType: InfrastructureType;
   };
   updatedAt: string;
   createdAt: string | undefined;
+  refetchProbes: RefetchGetProbes['refetchProbes'];
 }
 
 function HeaderToolbar({
@@ -45,9 +49,11 @@ export default function ChaosProbeHeader({
   updatedAt,
   createdAt,
   breadcrumbs,
-  children
+  children,
+  refetchProbes
 }: React.PropsWithChildren<ChaosProbeHeaderProps>): React.ReactElement {
   const { getString } = useStrings();
+  const [isEditProbeOpen, setEditProbeOpen] = React.useState<boolean>(false);
 
   return (
     <Layout.Horizontal>
@@ -87,9 +93,24 @@ export default function ChaosProbeHeader({
               </Layout.Vertical>
             </Layout.Horizontal>
             {/* Details of creation, updation and editing */}
-            <HeaderToolbar createdAt={createdAt} updatedAt={updatedAt} />
+            <Layout.Horizontal spacing={'medium'}>
+              <HeaderToolbar createdAt={createdAt} updatedAt={updatedAt} />
+              <Button
+                text={getString('editProbe')}
+                variation={ButtonVariation.SECONDARY}
+                icon="Edit"
+                onClick={() => setEditProbeOpen(true)}
+              />
+            </Layout.Horizontal>
           </Layout.Horizontal>
         </Container>
+        <UpdateProbeModal
+          refetchProbes={refetchProbes}
+          isOpen={isEditProbeOpen}
+          hideDarkModal={() => setEditProbeOpen(false)}
+          probeName={probeData.name}
+          infrastructureType={probeData.infrastructureType}
+        />
         {children}
       </Container>
     </Layout.Horizontal>

diff --git a/chaoscenter/web/src/views/ChaosProbeConfiguration/ChaosProbeConfiguration.module.scss b/chaoscenter/web/src/views/ChaosProbeConfiguration/ChaosProbeConfiguration.module.scss
@@ -31,7 +31,7 @@
   div[class*='TableV2--cells'],
   div[class*='TableV2--header'] {
     display: grid !important;
-    grid-template-columns: repeat(8, minmax(100px, 1fr));
+    grid-template-columns: repeat(7, minmax(100px, 1fr));
   }
 }
 

diff --git a/chaoscenter/web/src/views/ChaosProbeConfiguration/ProbeProperties/CMD/CMDRunProperties.tsx b/chaoscenter/web/src/views/ChaosProbeConfiguration/ProbeProperties/CMD/CMDRunProperties.tsx
@@ -21,7 +21,6 @@ function CMDRunProperties({ kubernetesCMDProperties, columns }: CMDRunProperties
       ? [
           {
             probeTimeout: kubernetesCMDProperties?.probeTimeout,
-            retry: kubernetesCMDProperties?.retry,
             attempt: kubernetesCMDProperties?.attempt as number,
             interval: kubernetesCMDProperties?.interval,
             probePollingInterval: kubernetesCMDProperties?.probePollingInterval,

diff --git a/chaoscenter/web/src/views/ChaosProbeConfiguration/ProbeProperties/HTTP/HTTPRunProperties.tsx b/chaoscenter/web/src/views/ChaosProbeConfiguration/ProbeProperties/HTTP/HTTPRunProperties.tsx
@@ -21,7 +21,6 @@ function HTTPRunProperties({ kubernetesHTTPProperties, columns }: HTTPRunPropert
       ? [
           {
             probeTimeout: kubernetesHTTPProperties?.probeTimeout,
-            retry: kubernetesHTTPProperties?.retry,
             attempt: kubernetesHTTPProperties?.attempt as number,
             interval: kubernetesHTTPProperties?.interval,
             probePollingInterval: kubernetesHTTPProperties?.probePollingInterval,

diff --git a/chaoscenter/web/src/views/ChaosProbeConfiguration/ProbeProperties/ProbeProperties.tsx b/chaoscenter/web/src/views/ChaosProbeConfiguration/ProbeProperties/ProbeProperties.tsx
@@ -38,11 +38,6 @@ function ProbeProperties({
         accessor: 'probeTimeout',
         Cell: (props: Cell<KubernetesProbeTableType>) => checkAndReturn(props.value)
       },
-      {
-        Header: `${getString('retry')}`.toLocaleUpperCase(),
-        accessor: 'retry',
-        Cell: (props: Cell<KubernetesProbeTableType>) => checkAndReturn(props.value)
-      },
       {
         Header: `${getString('attempt')}`.toLocaleUpperCase(),
         accessor: 'attempt',

diff --git a/chaoscenter/web/src/views/ChaosProbes/UpdateProbeModal.tsx b/chaoscenter/web/src/views/ChaosProbes/UpdateProbeModal.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { Dialog, IDialogProps } from '@blueprintjs/core';
-import type { RefetchProbes } from '@controllers/ChaosProbes';
 import UpdateProbeModalWizardController from '@controllers/UpdateProbeModalWizard';
 import type { InfrastructureType } from '@api/entities';
+import { GqlAPIQueryResponse } from '@api/types';
+import { GetProbeRequest, GetProbeResponse } from '@api/core';
+import type { RefetchProbes } from '@controllers/ChaosProbes';
 import css from './ChaosProbes.module.scss';
 
 interface UpdateProbeModalProps {
   isOpen: boolean;
   hideDarkModal: () => void;
   probeName: string;
   infrastructureType: InfrastructureType | undefined;
+  refetchProbes?: GqlAPIQueryResponse<GetProbeResponse, GetProbeRequest>['refetch'] | RefetchProbes['refetchProbes'];
 }
 
 export const UpdateProbeModal = ({
@@ -18,7 +21,7 @@ export const UpdateProbeModal = ({
   probeName,
   infrastructureType,
   hideDarkModal
-}: RefetchProbes & UpdateProbeModalProps): React.ReactElement => {
+}: UpdateProbeModalProps): React.ReactElement => {
   const modalPropsDark: Omit<IDialogProps, 'isOpen'> = {
     isCloseButtonShown: true,
     style: {

diff --git a/...xperimentCreationFaultConfiguration/Tabs/Probes/AddProbeStepWizard/AddProbeStepWizard.tsx b/...xperimentCreationFaultConfiguration/Tabs/Probes/AddProbeStepWizard/AddProbeStepWizard.tsx
@@ -1,3 +1,4 @@
+// TODO: Unused, to be removed
 import React from 'react';
 import { Button, ButtonVariation, Dialog, StepWizard } from '@harnessio/uicore';
 import { Icon } from '@harnessio/icons';
@@ -51,7 +52,6 @@ export const ProbeStepWizard = ({
     runProperties: {
       probeTimeout: undefined,
       interval: undefined,
-      retry: undefined,
       probePollingInterval: undefined,
       initialDelay: undefined,
       stopOnFailure: undefined,

diff --git a/...perimentCreationFaultConfiguration/Tabs/Probes/AddProbeStepWizard/ProbePropertiesStep.tsx b/...perimentCreationFaultConfiguration/Tabs/Probes/AddProbeStepWizard/ProbePropertiesStep.tsx
@@ -1,3 +1,4 @@
+// TODO: Unused, to be removed
 import React from 'react';
 import * as Yup from 'yup';
 import { FontVariation, Color } from '@harnessio/design-system';
@@ -31,7 +32,6 @@ export const ProbePropertiesStep: React.FC<StepProps<StepData>> = props => {
           ? '1000ms'
           : '5s',
         interval: formData.runProperties?.interval ?? '2s',
-        retry: formData.runProperties?.retry ?? 1,
         probePollingInterval: formData.runProperties?.probePollingInterval ?? '2s',
         initialDelay: formData.runProperties?.initialDelay ?? '3s',
         stopOnFailure: formData.runProperties?.stopOnFailure ?? false,
@@ -46,7 +46,6 @@ export const ProbePropertiesStep: React.FC<StepProps<StepData>> = props => {
       }}
       validationSchema={Yup.object().shape({
         probeTimeout: getValidation('Timeout'),
-        retry: getValidation('Retry'),
         interval: getValidation('Interval'),
         probePollingInterval: getValidation('Polling Interval'),
         initialDelay: getValidation('Initial Delay'),
@@ -70,13 +69,6 @@ export const ProbePropertiesStep: React.FC<StepProps<StepData>> = props => {
                       placeholder={String(formData.runProperties?.probeTimeout)}
                       tooltipProps={{ dataTooltipId: 'chaos_probe_timeout' }}
                     />
-                    <FormInput.Text
-                      inputGroup={{ type: 'number' }}
-                      name="retry"
-                      label="Retry (times)"
-                      placeholder={String(formData.runProperties?.retry)}
-                      tooltipProps={{ dataTooltipId: 'chaos_probe_retry' }}
-                    />
                     <FormInput.Text
                       inputGroup={{ type: 'number' }}
                       name="interval"