Power and Thermal Specification for RPE - Front end

src/components/Tables/PowerSummaryTable.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { IoMdCloseCircleOutline } from 'react-icons/io';
 import { Tooltip } from 'antd';
 import { PowerCell } from './TableCells';
 import { fixed, color } from '../../utils/common';
 import { State } from '../ComponentsLib';
-
+import { api, PATCH, GET } from '../../utils/serverAPI';
 import '../style/PowerSummaryTable.css';
 
 function PowerSummaryTableToolTip({ title, statusColor }) {
@@ -17,91 +17,271 @@
     </Tooltip>
   );
 }
+
+PowerSummaryTableToolTip.propTypes = {
+  title: PropTypes.string.isRequired,
+  statusColor: PropTypes.string.isRequired,
+};
+
 function PowerSummaryTable({
-  title, data, total, percent,
+  title, data = [], total = 0, percent = 0, deviceId = 'MPW1',
 }) {
-  function getErrors(messages) {
-    if (messages === undefined) return [];
-    const errors = messages.filter((item) => item.filter((inner) => inner.type === 'error').length > 0);
-    return errors;
-  }
-  function getWarning(messages) {
-    if (messages === undefined) return [];
-    const warnings = messages.filter((item) => item.filter((inner) => inner.type === 'warn').length > 0);
-    return warnings;
-  }
-  function buildMessage(messages) {
-    return messages.reduce((sum, item, currentIndex) => {
-      item.forEach((i, index) => sum.push(
-        // eslint-disable-next-line react/no-array-index-key
-        <span key={`${currentIndex}+${index}`}>
-          {i.text}
-          <br />
-        </span>,
-      ));
-      return sum;
-    }, []);
-  }
-  function message(messages) {
-    const errors = getErrors(messages);
-    if (errors.length > 0) {
-      return buildMessage(errors);
+  const [thermalData, setThermalData] = useState({
+    ambientTypical: 25,
+    ambientWorstCase: 50,
+    thetaJa: 10,
+  });
+
+  const [powerData, setPowerData] = useState({
+    powerBudget: 1.0,
+    fpgaScaling: 25,
+    pcScaling: 25,
+  });
+
+  const ambientTypicalRef = useRef(null);
+  const ambientWorstCaseRef = useRef(null);
+  const thetaJaRef = useRef(null);
+  const powerBudgetRef = useRef(null);
+  const fpgaScalingRef = useRef(null);
+  const pcScalingRef = useRef(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const result = await GET(api.consumption('consumption', deviceId));
+        if (result && result.specification) {
+          const { specification } = result;
+          setThermalData({
+            ambientTypical: specification.thermal.ambient.typical,
+            ambientWorstCase: specification.thermal.ambient.worstcase,
+            thetaJa: specification.thermal.theta_ja,
+          });
+          setPowerData({
+            powerBudget: specification.power.budget,
+            fpgaScaling: specification.power.typical_dynamic_scaling.fpga_complex * 100,
+            pcScaling: specification.power.typical_dynamic_scaling.processing_complex * 100,
+          });
+        }
+      } catch (error) {
+        // Log error for debugging purposes
+        console.error('Error fetching data:', error.message);
+      }
+    };
+
+    fetchData();
+  }, [deviceId]);
+
+  const updateBackend = async (updatedData) => {
+    try {
+      await PATCH(api.deviceInfo(deviceId), updatedData);
+    } catch (error) {
+      // Log error for debugging purposes
+      console.error('Error updating backend:', error.message);
     }
-    const warnings = getWarning(messages);
-    if (warnings.length > 0) {
-      return buildMessage(warnings);
+  };
+
+  const handleFieldUpdate = (field, value) => {
+    const updatedThermalData = { ...thermalData };
+    const updatedPowerData = { ...powerData };
+
+    if (field in thermalData) {
+      updatedThermalData[field] = value;
+    } else {
+      updatedPowerData[field] = value;
     }
-    return '';
-  }
-
-  function isError(messages) { return getErrors(messages).length > 0; }
-  function isWarning(messages) { return getWarning(messages).length > 0; }
-  function statusColor(messages) {
-    return color(isError(messages), isWarning(messages));
-  }
+
+    setThermalData(updatedThermalData);
+    setPowerData(updatedPowerData);
+
+    const updatedData = {
+      specification: {
+        thermal: updatedThermalData,
+        power: updatedPowerData,
+      },
+    };
+    updateBackend(updatedData);
+  };
+
+  const enforceNumericInput = (e) => {
+    const { value } = e.target;
+    if (!/^-?\d*\.?\d*%?$/.test(value)) {
+      e.target.value = value.slice(0, -1);
+    }
+  };
+
+  const handleKeyDown = (e, nextFieldRef) => {
+    if (e.key === 'Enter' && nextFieldRef?.current) {
+      nextFieldRef.current.focus();
+    }
+  };
+
+  const getErrors = (messages) => (
+    messages?.filter((item) => item.some((inner) => inner.type === 'error')) || []
+  );
+  const getWarnings = (messages) => (
+    messages?.filter((item) => item.some((inner) => inner.type === 'warn')) || []
+  );
+
+  const buildMessage = (messages) => messages.reduce((acc, item, currentIndex) => {
+    item.forEach((i, index) => acc.push(
+      //   <span key={`${currentIndex}-${index}`}>
+      <span key={i.id || `${currentIndex}-${index}`}>
+        {i.text}
+        <br />
+      </span>,
+    ));
+    return acc;
+  }, []);
+
+  const message = (messages) => {
+    const errors = getErrors(messages);
+    return errors.length > 0 ? buildMessage(errors) : buildMessage(getWarnings(messages));
+  };
+
+  const statusColor = (messages) => color(
+    getErrors(messages).length > 0,
+    getWarnings(messages).length > 0,
+  );
+
   return (
     <div className="pst-container main-border">
-      <div className="no-wrap bold-text-title">{title}</div>
+      {title === 'FPGA Complex and Core Power' && (
+        <div className="thermal-power-specification">
+          <div className="spec-header">Thermal Specification</div>
+          <table className="spec-table">
+            <thead>
+              <tr>
+                <th />
+                <th className="typical-header">Typical</th>
+                <th className="worst-header">Worst-Case</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="ambient-row">
+                <td>Ambient</td>
+                <td className="value-cell">
+                  <input
+                    type="text"
+                    value={thermalData.ambientTypical}
+                    onChange={(e) => handleFieldUpdate('ambientTypical', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={ambientTypicalRef}
+                    onKeyDown={(e) => handleKeyDown(e, ambientWorstCaseRef)}
+                  />
+                  °C
+                </td>
+                <td className="value-cell">
+                  <input
+                    type="text"
+                    value={thermalData.ambientWorstCase}
+                    onChange={(e) => handleFieldUpdate('ambientWorstCase', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={ambientWorstCaseRef}
+                    onKeyDown={(e) => handleKeyDown(e, thetaJaRef)}
+                  />
+                  °C
+                </td>
+              </tr>
+              <tr className="theta-row">
+                <td colSpan="3" className="value-cell">
+                  ΘJA:
+                  <input
+                    type="text"
+                    value={thermalData.thetaJa}
+                    onChange={(e) => handleFieldUpdate('thetaJa', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={thetaJaRef}
+                    onKeyDown={(e) => handleKeyDown(e, powerBudgetRef)}
+                  />
+                  °C/W
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div className="spec-header">Power Specification</div>
+          <table className="power-spec-table">
+            <tbody>
+              <tr>
+                <td>Power Budget</td>
+                <td className="scaling-cell">
+                  <input
+                    type="text"
+                    value={powerData.powerBudget}
+                    onChange={(e) => handleFieldUpdate('powerBudget', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={powerBudgetRef}
+                    onKeyDown={(e) => handleKeyDown(e, fpgaScalingRef)}
+                  />
+                  W
+                </td>
+              </tr>
+              <tr>
+                <td>Typical Dynamic Scaling %</td>
+                <td className="scaling-cell">
+                  FPGA:
+                  <input
+                    type="text"
+                    value={powerData.fpgaScaling}
+                    onChange={(e) => handleFieldUpdate('fpgaScaling', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={fpgaScalingRef}
+                    onKeyDown={(e) => handleKeyDown(e, pcScalingRef)}
+                  />
+                  %
+                </td>
+                <td className="scaling-cell">
+                  PC:
+                  <input
+                    type="text"
+                    value={powerData.pcScaling}
+                    onChange={(e) => handleFieldUpdate('pcScaling', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={pcScalingRef}
+                  />
+                  %
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )}
+      <div className="no-wrap bold-text-title">{title || 'FPGA Complex and Core Power'}</div>
       <div>
         <table className="pst-table">
           <tbody>
-            {
-              data.map((item, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <tr key={index}>
-                  <td className="dot-td"><State messages={item.messages} baseClass="dot" /></td>
-                  <td className="no-wrap">{item.text}</td>
-                  <PowerCell val={item.power} />
-                  <td className="no-wrap" style={{ textAlign: 'right' }}>
-                    {`${fixed(item.percent, 0)} %`}
-                  </td>
-                  <td className="fixed-col">
-                    {
-                      (isError(item.messages) || isWarning(item.messages)) && (
-                        <PowerSummaryTableToolTip
-                          title={message(item.messages)}
-                          statusColor={statusColor(item.messages)}
-                        />
-                      )
-                    }
-                  </td>
-                </tr>
-              ))
-            }
+            {data.map((item) => (
+              <tr key={item.uniqueId}>
+                <td className="dot-td"><State messages={item.messages} baseClass="dot" /></td>
+                <td className="no-wrap">{item.text || 'N/A'}</td>
+                <PowerCell val={item.power || 0} />
+                <td className="no-wrap" style={{ textAlign: 'right' }}>
+                  {`${fixed(item.percent || 0, 0)} %`}
+                </td>
+                <td className="fixed-col">
+                  {(getErrors(item.messages).length > 0
+                  || getWarnings(item.messages).length > 0) && (
+                    <PowerSummaryTableToolTip
+                      title={message(item.messages)}
+                      statusColor={statusColor(item.messages)}
+                    />
+                  )}
+                </td>
+              </tr>
+            ))}
           </tbody>
         </table>
       </div>
       <div className="spacer" />
       <div className="pst-bottom">
         <div className="pst-bottom-progress">
           <label htmlFor="progress-bar">
-            {`${fixed(percent, 0)} %`}
+            {`${fixed(percent || 0, 0)} %`}
           </label>
-          <progress id="progress-bar" value={percent} max={100} />
+          <progress id="progress-bar" value={percent || 0} max={100} />
         </div>
         <div className="pst-bottom-total bold-text-title">
           Total
-          <span className="bold-text-title">{`  ${fixed(total)} W`}</span>
+          <span className="bold-text-title">{`  ${fixed(total || 0)} W`}</span>
         </div>
       </div>
     </div>
@@ -110,11 +290,19 @@
 
 PowerSummaryTable.propTypes = {
   title: PropTypes.string.isRequired,
-  data: PropTypes.oneOfType([
-    PropTypes.array,
-  ]).isRequired,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    uniqueId: PropTypes.string.isRequired,
+    text: PropTypes.string,
+    power: PropTypes.number,
+    percent: PropTypes.number,
+    messages: PropTypes.arrayOf(PropTypes.shape({
+      type: PropTypes.string,
+      text: PropTypes.string,
+    })),
+  })).isRequired,
   total: PropTypes.number.isRequired,
   percent: PropTypes.number.isRequired,
+  deviceId: PropTypes.string.isRequired,
 };
 
 export default PowerSummaryTable;