INFRA-3746 | Abhishek | Add changes for diagnostics in golang services

src/coreform/baseform/DefaultDiagnosticStep.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useDispatch } from 'react-redux';
 
@@ -9,6 +9,7 @@ import { setCurrentStep, setDiagnosticType } from '../../slices/diagnosticSlice'
 import CpuIcon from '../assets/images/CpuIcon.svg';
 import { DiagnosticType } from './utils';
 import { useFormikContext } from 'formik';
+import { Alert } from '@material-ui/lab';
 interface Button {
   id: DiagnosticType;
   icon: React.ReactNode;
@@ -43,10 +44,17 @@ const DefaultDiagnosticStep: React.FC = (): React.JSX.Element => {
   const dispatch = useDispatch();
 
   const { values }: { values: any } = useFormikContext();
+  const [isMetricsPortConfigured, setIsMetricsPortConfigured] = useState<boolean>(false);
   const allowedButtons = buttons.filter(b =>
     languageFeatureMap[values.metadata?.language].includes(b.id),
   );
-  console.log(allowedButtons);
+
+  useEffect(() => {
+    let metricsPort = values?.deployment?.exposedPorts.filter(port => port.name == 'metrics');
+    if (metricsPort.length !== 0) {
+      setIsMetricsPortConfigured(true);
+    }
+  });
 
   const handleDiagnosticSelection = (
     e: React.MouseEvent<HTMLButtonElement>,
@@ -56,18 +64,36 @@ const DefaultDiagnosticStep: React.FC = (): React.JSX.Element => {
     dispatch(setCurrentStep(1));
   };
 
+  const DiagnosticFeatures = () => {
+    return (
+      <>
+        <Typography variant="body1">Please choose one of the following options:</Typography>
+        <Grid container spacing={4} justifyContent="center">
+          {allowedButtons.map(button => (
+            <Grid item key={button.id}>
+              <IconButton onClick={e => handleDiagnosticSelection(e, button.id)} color="primary">
+                {button.icon}
+                <Typography variant="subtitle1">{button.label}</Typography>
+              </IconButton>
+            </Grid>
+          ))}
+        </Grid>
+      </>
+    );
+  };
+
   return (
     <>
-      <Typography variant="body1">Please choose one of the following options:</Typography>
-      <Grid container spacing={2} justifyContent="center" style={{ marginTop: '16px' }}>
-        {allowedButtons.map(button => (
-          <Grid item key={button.id}>
-            <IconButton onClick={e => handleDiagnosticSelection(e, button.id)} color="primary">
-              {button.icon}
-              <Typography variant="subtitle1">{button.label}</Typography>
-            </IconButton>
-          </Grid>
-        ))}
+      <Grid container spacing={2} style={{ marginTop: '16px' }}>
+        {!isMetricsPortConfigured && values?.metadata?.language === 'Golang' ? (
+          <Alert severity={'warning'}>
+            {
+              'Metrics port is needed for diagnostics in Golang services. Please configure metrics port to check for diagnostics.'
+            }
+          </Alert>
+        ) : (
+          <DiagnosticFeatures />
+        )}
       </Grid>
     </>
   );