addressing review comments

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

plugins/kubernetes-react/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx

@@ -100,18 +100,20 @@ const DeploymentSummary = ({
             >
               <Grid item>
                 <Typography variant="subtitle2">
-                  {t('hpa.minReplicas')} {hpa.spec?.minReplicas ?? '?'} /{' '}
-                  {t('hpa.maxReplicas')} {hpa.spec?.maxReplicas ?? '?'}
+                  {t('hpa.replicasSummary', {
+                    min: hpa.spec?.minReplicas ?? '?',
+                    max: hpa.spec?.maxReplicas ?? '?',
+                  })}
                 </Typography>
               </Grid>
               <Grid item>
                 <Typography variant="subtitle2">
-                  {t('hpa.currentCpuUsage')} {cpuUtil ?? '?'}%
+                  {t('hpa.currentCpuUsageLabel', { value: cpuUtil ?? '?' })}
                 </Typography>
               </Grid>
               <Grid item>
                 <Typography variant="subtitle2">
-                  {t('hpa.targetCpuUsage')} {specCpuUtil ?? '?'}%
+                  {t('hpa.targetCpuUsageLabel', { value: specCpuUtil ?? '?' })}
                 </Typography>
               </Grid>
             </Grid>

plugins/kubernetes-react/src/components/ErrorPanel/ErrorPanel.tsx

@@ -32,7 +32,9 @@ const clustersWithErrorsToErrorMessage = (
     return (
       <div key={i}>
         <Typography variant="body2">
-          {t('errorPanel.clusterLabel')}: {c.cluster.title || c.cluster.name}
+          {t('errorPanel.clusterLabelValue', {
+            cluster: c.cluster.title || c.cluster.name,
+          })}
         </Typography>
         {c.errors.map((e, j) => {
           return (

plugins/kubernetes-react/src/components/ErrorReporting/ErrorReporting.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useMemo } from 'react';
 import {
   ClusterAttributes,
   DetectedError,
@@ -65,35 +66,38 @@ export const ErrorReporting = ({
     })
     .sort(sortBySeverity);
 
-  const columns: TableColumn<Row>[] = [
-    {
-      title: String(t('errorReporting.columns.cluster')),
-      width: '10%',
-      render: (row: Row) => row.cluster.title || row.cluster.name,
-    },
-    {
-      title: String(t('errorReporting.columns.namespace')),
-      width: '10%',
-      render: (row: Row) => row.error.sourceRef.namespace,
-    },
-    {
-      title: String(t('errorReporting.columns.kind')),
-      width: '10%',
-      render: (row: Row) => row.error.sourceRef.kind,
-    },
-    {
-      title: String(t('errorReporting.columns.name')),
-      width: '30%',
-      render: (row: Row) => {
-        return <>{row.error.sourceRef.name} </>;
+  const columns: TableColumn<Row>[] = useMemo(
+    () => [
+      {
+        title: String(t('errorReporting.columns.cluster')),
+        width: '10%',
+        render: (row: Row) => row.cluster.title || row.cluster.name,
       },
-    },
-    {
-      title: String(t('errorReporting.columns.messages')),
-      width: '40%',
-      render: (row: Row) => row.error.message,
-    },
-  ];
+      {
+        title: String(t('errorReporting.columns.namespace')),
+        width: '10%',
+        render: (row: Row) => row.error.sourceRef.namespace,
+      },
+      {
+        title: String(t('errorReporting.columns.kind')),
+        width: '10%',
+        render: (row: Row) => row.error.sourceRef.kind,
+      },
+      {
+        title: String(t('errorReporting.columns.name')),
+        width: '30%',
+        render: (row: Row) => {
+          return <>{row.error.sourceRef.name} </>;
+        },
+      },
+      {
+        title: String(t('errorReporting.columns.messages')),
+        width: '40%',
+        render: (row: Row) => row.error.message,
+      },
+    ],
+    [t],
+  );
 
   return (
     <>

plugins/kubernetes-react/src/translation.ts

@@ -51,6 +51,7 @@ export const kubernetesReactTranslationRef = createTranslationRef({
         'There was a problem retrieving some Kubernetes resources for the entity: {{entityName}}. This could mean that the Error Reporting card is not completely accurate.',
       errorsLabel: 'Errors',
       clusterLabel: 'Cluster',
+      clusterLabelValue: 'Cluster: {{cluster}}',
       fetchError:
         'Error communicating with Kubernetes: {{errorType}}, message: {{message}}',
       resourceError:
@@ -83,8 +84,11 @@ export const kubernetesReactTranslationRef = createTranslationRef({
     hpa: {
       minReplicas: 'min replicas',
       maxReplicas: 'max replicas',
+      replicasSummary: 'min replicas {{min}} / max replicas {{max}}',
       currentCpuUsage: 'current CPU usage:',
+      currentCpuUsageLabel: 'current CPU usage: {{value}}%',
       targetCpuUsage: 'target CPU usage:',
+      targetCpuUsageLabel: 'target CPU usage: {{value}}%',
     },
     pods: {
       pods_one: '{{count}} pod',