[release-4.8] Bug 1972788: Convert probe data values from string to number type

frontend/packages/dev-console/locales/en/devconsole.json

@@ -188,7 +188,7 @@
   "Edit health checks": "Edit health checks",
   "Add health checks": "Add health checks",
   "Learn more": "Learn more",
-  "Health checks for": "Health checks for",
+  "Health checks for &nbsp;<1></1>": "Health checks for &nbsp;<1></1>",
   "Container": "Container",
   "Container not found": "Container not found",
   "Readiness probe": "Readiness probe",

frontend/packages/dev-console/src/components/health-checks/AddHealthChecks.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import Helmet from 'react-helmet';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import { FormikProps, FormikValues } from 'formik';
 import { Form, Button } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
@@ -10,7 +10,6 @@ import {
   history,
   PageHeading,
   ResourceLink,
-  ResourceIcon,
   openshiftHelpBase,
 } from '@console/internal/components/utils';
 import { ContainerModel } from '@console/internal/models';
@@ -92,19 +91,21 @@ const AddHealthChecks: React.FC<FormikProps<FormikValues> & AddHealthChecksProps
           </>
         }
       />
-      <div className="odc-add-health-checks__body">
-        <p>
-          {t('devconsole~Health checks for')} &nbsp;
-          <ResourceLink
-            kind={referenceFor(resource)}
-            name={name}
-            namespace={namespace}
-            title={name}
-            inline
-          />
-        </p>
-        <Form onSubmit={!viewOnly ? handleSubmit : undefined}>
-          <div>
+      <Form onSubmit={!viewOnly ? handleSubmit : undefined}>
+        <div className="odc-add-health-checks__body">
+          <p>
+            <Trans t={t} ns="devconsole">
+              Health checks for &nbsp;
+              <ResourceLink
+                kind={referenceFor(resource)}
+                name={name}
+                namespace={namespace}
+                title={name}
+                inline
+              />
+            </Trans>
+          </p>
+          <p>
             {t('devconsole~Container')} &nbsp;
             {_.size(containers) > 1 ? (
               <ContainerDropdown
@@ -113,24 +114,27 @@ const AddHealthChecks: React.FC<FormikProps<FormikValues> & AddHealthChecksProps
                 onChange={handleSelectContainer}
               />
             ) : (
-              <>
-                <ResourceIcon kind={ContainerModel.kind} />
-                {containers[0].name}
-              </>
+              <ResourceLink
+                kind={ContainerModel.kind}
+                name={containers[0].name}
+                linkTo={false}
+                inline
+              />
             )}
-          </div>
+          </p>
+          <br />
           <HealthChecks resourceType={getResourcesType(resource)} />
-          <FormFooter
-            handleReset={handleReset}
-            errorMessage={status && status?.errors?.json?.message}
-            isSubmitting={isSubmitting}
-            submitLabel={healthCheckAdded ? t('devconsole~Save') : t('devconsole~Add')}
-            disableSubmit={isFormClean || !dirty || !_.isEmpty(errors) || isSubmitting}
-            resetLabel={t('devconsole~Cancel')}
-            hideSubmit={viewOnly}
-          />
-        </Form>
-      </div>
+        </div>
+        <FormFooter
+          handleReset={handleReset}
+          errorMessage={status && status?.errors?.json?.message}
+          isSubmitting={isSubmitting}
+          submitLabel={healthCheckAdded ? t('devconsole~Save') : t('devconsole~Add')}
+          disableSubmit={isFormClean || !dirty || !_.isEmpty(errors) || isSubmitting}
+          resetLabel={t('devconsole~Cancel')}
+          hideSubmit={viewOnly}
+        />
+      </Form>
     </HealthCheckContext.Provider>
   );
 };

frontend/packages/dev-console/src/components/health-checks/__tests__/create-health-checks-probe-data.ts

@@ -94,3 +94,44 @@ export const enabledProbeData = {
     timeoutSeconds: 1,
   },
 };
+
+export const healthChecksFormInputData = {
+  healthChecks: {
+    readinessProbe: {
+      showForm: false,
+      enabled: true,
+      modified: false,
+      data: {
+        failureThreshold: '3',
+        requestType: RequestType.HTTPGET,
+        httpGet: {
+          scheme: 'HTTPS',
+          path: '/tmp/healthy',
+          port: 8080,
+          httpHeaders: [{ name: 'custom-header', value: 'value' }],
+        },
+        tcpSocket: {
+          port: 8080,
+        },
+        exec: { command: [''] },
+        initialDelaySeconds: '0',
+        periodSeconds: '10',
+        timeoutSeconds: '1',
+        successThreshold: '1',
+      },
+    },
+    livenessProbe: healthChecksDefaultValues,
+    startupProbe: {
+      showForm: false,
+      enabled: true,
+      modified: false,
+      data: {
+        ...healthChecksDefaultValues.data,
+        requestType: RequestType.TCPSocket,
+        tcpSocket: {
+          port: 8081,
+        },
+      },
+    },
+  },
+};

frontend/packages/dev-console/src/components/health-checks/create-health-checks-probe-utils.ts

@@ -6,8 +6,8 @@ import { healthChecksDefaultValues } from './health-checks-probe-utils';
 
 export const constructProbeData = (data: HealthCheckProbeData, resourceType?: Resources) => {
   const probeData = {
-    ...(data.failureThreshold && { failureThreshold: data.failureThreshold }),
-    ...(data.successThreshold && { successThreshold: data.successThreshold }),
+    ...(data.failureThreshold && { failureThreshold: _.toInteger(data.failureThreshold) }),
+    ...(data.successThreshold && { successThreshold: _.toInteger(data.successThreshold) }),
     ...(data.requestType === RequestType.ContainerCommand && {
       exec: data.exec,
     }),
@@ -26,10 +26,10 @@ export const constructProbeData = (data: HealthCheckProbeData, resourceType?: Re
       },
     }),
     ...(data.initialDelaySeconds && {
-      initialDelaySeconds: data.initialDelaySeconds,
+      initialDelaySeconds: _.toInteger(data.initialDelaySeconds),
     }),
-    ...(data.periodSeconds && { periodSeconds: data.periodSeconds }),
-    ...(data.timeoutSeconds && { timeoutSeconds: data.timeoutSeconds }),
+    ...(data.periodSeconds && { periodSeconds: _.toInteger(data.periodSeconds) }),
+    ...(data.timeoutSeconds && { timeoutSeconds: _.toInteger(data.timeoutSeconds) }),
   };
   return probeData;
 };

frontend/packages/dev-console/src/components/health-checks/health-checks-types.ts

@@ -13,7 +13,7 @@ export enum RequestType {
 }
 
 export interface HealthCheckProbeData {
-  failureThreshold: number;
+  failureThreshold: number | string;
   requestType?: string;
   httpGet?: {
     scheme: string;
@@ -25,10 +25,10 @@ export interface HealthCheckProbeData {
     port: number;
   };
   exec?: { command?: string[] };
-  initialDelaySeconds: number;
-  periodSeconds: number;
-  timeoutSeconds: number;
-  successThreshold: number;
+  initialDelaySeconds: number | string;
+  periodSeconds: number | string;
+  timeoutSeconds: number | string;
+  successThreshold: number | string;
 }
 
 export interface HealthCheckProbe {