B OpenNebula/one#6347: Fix typo + calculations (#2788)

Fixes a typo in the translation constants where Disk Write IOPS was missing. Also adds a function to the Chartists component that now calculates the delta values for the input data if the derivative=true prop is passed to it.

Signed-off-by: Victor Hansson <vhansson@opennebula.io>

src/fireedge/src/client/components/Charts/Chartist.js

@@ -55,6 +55,21 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }))
 
+const calculateDerivative = (data) =>
+  data
+    .map((point, i, array) => {
+      if (i === array.length - 1) {
+        return null
+      }
+      const nextPoint = array[i + 1]
+
+      return {
+        x: point.x,
+        y: (nextPoint.y - point.y) / ((nextPoint.x - point.x) / 1000),
+      }
+    })
+    .filter((point) => point)
+
 /**
  * Represents a Chartist Graph.
  *
@@ -65,6 +80,7 @@ const useStyles = makeStyles(({ palette, typography }) => ({
  * @param {string} props.x - Chartist X
  * @param {string} props.y - Chartist X
  * @param {Function} props.interpolationY - Chartist interpolation Y
+ * @param {boolean} props.derivative - Display delta values
  * @returns {JSXElementConstructor} Chartist component
  */
 const Chartist = ({
@@ -74,6 +90,7 @@ const Chartist = ({
   x = '',
   y = '',
   interpolationY = (value) => value,
+  derivative = false,
 }) => {
   const classes = useStyles()
 
@@ -93,6 +110,8 @@ const Chartist = ({
       )
     : []
 
+  const processedData = derivative ? calculateDerivative(dataChart) : dataChart
+
   return (
     <Paper variant="outlined" sx={{ height: 'fit-content' }}>
       <List className={classes.box}>
@@ -106,7 +125,7 @@ const Chartist = ({
             </Stack>
           ) : (
             <Chart
-              data={dataChart}
+              data={processedData}
               height={300}
               width={500}
               className={classes.graphStyle}
@@ -132,6 +151,7 @@ Chartist.propTypes = {
   x: PropTypes.string,
   y: PropTypes.string,
   interpolationY: PropTypes.func,
+  derivative: PropTypes.bool,
 }
 
 Chartist.displayName = 'Chartist'

src/fireedge/src/client/components/Tabs/Vm/Network/Graphs.js

@@ -68,6 +68,7 @@ const Graphs = ({ id }) => {
           data={monitoring}
           y="NETRX"
           x="TIMESTAMP"
+          derivative={true}
           interpolationY={interpolationBytesSeg}
         />
       </Grid>
@@ -78,6 +79,7 @@ const Graphs = ({ id }) => {
           data={monitoring}
           y="NETTX"
           x="TIMESTAMP"
+          derivative={true}
           interpolationY={interpolationBytesSeg}
         />
       </Grid>

src/fireedge/src/client/components/Tabs/Vm/Storage/Graphs.js

@@ -65,6 +65,7 @@ const Graphs = ({ id }) => {
           data={monitoring}
           y="DISKRDIOPS"
           x="TIMESTAMP"
+          derivative={true}
           interpolationY={interpolationY}
         />
       </Grid>
@@ -75,6 +76,7 @@ const Graphs = ({ id }) => {
           data={monitoring}
           y="DISKWRIOPS"
           x="TIMESTAMP"
+          derivative={true}
           interpolationY={interpolationY}
         />
       </Grid>

src/fireedge/src/client/constants/translates.js

@@ -1084,7 +1084,7 @@ module.exports = {
   DiskReadBytes: 'Disk read bytes',
   DiskWriteBytes: 'Disk write bytes',
   DiskReadIOPS: 'Disk read IOPS',
-  DiskWriteIOPS: 'Disk write bytes',
+  DiskWriteIOPS: 'Disk write IOPS',
   NetRX: 'Net RX',
   NetTX: 'Net TX',
   NetDownloadSpeed: 'Net download speed',