F #5928: Graphs (#2276)

(cherry picked from commit a06b82293f54728ebe0c3df495cb4a0bbc4fee47)
2025-03-21 14:50:08 +03:00 · 2022-09-12 11:40:36 +02:00 · 2022-09-12 11:40:36 +02:00 · eed01ac0b0
commit eed01ac0b0
parent 69759b30cc
8 changed files with 844 additions and 603 deletions
--- a/src/fireedge/package-lock.json
+++ b/src/fireedge/package-lock.json
--- a/src/fireedge/package.json
+++ b/src/fireedge/package.json
@ -52,6 +52,8 @@
    "@babel/plugin-proposal-optional-chaining": "7.14.5",
    "@babel/preset-env": "7.15.8",
    "@babel/preset-react": "7.16.0",
+    "@devexpress/dx-react-chart": "3.0.5",
+    "@devexpress/dx-react-chart-material-ui": "3.0.5",
    "@emotion/react": "11.6.0",
    "@emotion/styled": "11.6.0",
    "@hookform/resolvers": "2.8.2",
@ -69,13 +71,13 @@
    "babel-loader": "8.2.1",
    "babel-plugin-module-resolver": "4.0.0",
    "btoa": "1.2.1",
-    "chartist": "0.10.1",
    "clsx": "1.1.1",
    "compression": "1.7.4",
    "copy-webpack-plugin": "9.0.1",
    "core-js": "3.18.1",
    "cors": "2.8.5",
    "css-loader": "6.2.0",
+    "d3-scale": "3.3.0",
    "dagre": "0.8.5",
    "dompurify": "2.2.6",
    "express": "4.17.1",
@ -109,7 +111,6 @@
    "qrcode": "1.4.4",
    "react": "17.0.2",
    "react-beautiful-dnd": "13.1.0",
-    "react-chartist": "0.14.4",
    "react-dom": "17.0.2",
    "react-flow-renderer": "9.6.0",
    "react-hook-form": "7.18.1",
--- a/src/fireedge/src/client/components/Charts/Chartist.js
+++ b/src/fireedge/src/client/components/Charts/Chartist.js
@ -15,10 +15,8 @@
 * ------------------------------------------------------------------------- */
 import { JSXElementConstructor, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import 'chartist/dist/chartist.min.css'

 import {
-  Grid,
  CircularProgress,
  Stack,
  Paper,
@ -26,20 +24,21 @@ import {
  ListItem,
  Typography,
 } from '@mui/material'
-import ChartistGraph from 'react-chartist'
-import { FixedScaleAxis } from 'chartist'
+import {
+  Chart,
+  ArgumentAxis,
+  ValueAxis,
+  LineSeries,
+  ZoomAndPan,
+} from '@devexpress/dx-react-chart-material-ui'
+import { scaleTime } from 'd3-scale'
+import { ArgumentScale, ValueScale } from '@devexpress/dx-react-chart'
 import makeStyles from '@mui/styles/makeStyles'

 const useStyles = makeStyles(({ palette, typography }) => ({
  graphStyle: {
-    '& .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut':
-      { stroke: palette.secondary.main, strokeWidth: '1px' },
-    '& .ct-grid': {
-      stroke: 'rgba(150,150,150,.1)',
-      strokeDasharray: '1px',
-    },
    '&': {
-      width: '100%',
+      width: '100% !important',
    },
  },
  box: {
@ -49,6 +48,11 @@ const useStyles = makeStyles(({ palette, typography }) => ({
    fontWeight: typography.fontWeightBold,
    borderBottom: `1px solid ${palette.divider}`,
  },
+  center: {
+    fontWeight: typography.fontWeightBold,
+    borderBottom: `1px solid ${palette.divider}`,
+    justifyContent: 'center',
+  },
 }))

 /**
@ -56,87 +60,68 @@ const useStyles = makeStyles(({ palette, typography }) => ({
 *
 * @param {object} props - Props
 * @param {object[]} props.data - Chart data
- * @param {Function} props.interpolationX - Chartist interpolation X
- * @param {Function} props.interpolationY - Chartist interpolation Y
 * @param {string} props.name - Chartist name
 * @param {string} props.filter - Chartist filter
 * @param {string} props.x - Chartist X
 * @param {string} props.y - Chartist X
+ * @param {Function} props.interpolationY - Chartist interpolation Y
 * @returns {JSXElementConstructor} Chartist component
 */
 const Chartist = ({
  data = [],
-  interpolationX,
-  interpolationY,
  name = '',
  filter = [],
  x = '',
  y = '',
+  interpolationY = (value) => value,
 }) => {
  const classes = useStyles()

-  const chartOptions = {
-    fullWidth: true,
-    reverseData: true,
-    low: 0,
-    scaleMinSpace: 10,
-    axisX: {
-      type: FixedScaleAxis,
-      divisor: 10,
-    },
-    axisY: {
-      offset: 70,
-    },
-  }
-
-  const dataChart = {
-    name,
-  }
-
-  typeof interpolationX === 'function' &&
-    (chartOptions.axisX.labelInterpolationFnc = interpolationX)
-
-  typeof interpolationY === 'function' &&
-    (chartOptions.axisY.labelInterpolationFnc = interpolationY)
-
-  filter?.length &&
-    (dataChart.data = useMemo(
-      () =>
-        data
-          ?.filter((point) =>
-            Object.keys(point).find((key) => filter.includes(key))
-          )
-          .map((point) => ({
-            x: +point[x],
-            y: +point[y],
-          })),
-      [data]
-    ))
+  const dataChart = filter?.length
+    ? useMemo(
+        () =>
+          data
+            ?.filter(
+              (point) =>
+                !!Object.keys(point).find((key) => filter.includes(key))
+            )
+            .map((point, i) => ({
+              x: x === 'TIMESTAMP' ? new Date(+point[x] * 1000) : +point[x],
+              y: Math.round(+point[y]),
+            })),
+        [data]
+      )
+    : []

  return (
-    <Grid item xs={12} sm={6}>
-      {!data?.length ? (
-        <Stack direction="row" justifyContent="center" alignItems="center">
-          <CircularProgress color="secondary" />
-        </Stack>
-      ) : (
-        <Paper variant="outlined" sx={{ height: 'fit-content' }}>
-          <List className={classes.box}>
-            <ListItem className={classes.title}>
-              <Typography noWrap>{name}</Typography>
-            </ListItem>
-            <ListItem className={classes.title}>
-              <ChartistGraph
-                className={classes.graphStyle}
-                data={{ series: [dataChart] }}
-                options={chartOptions}
-                type="Line"
-              />
-            </ListItem>
-          </List>
-        </Paper>
-      )}
-    </Grid>
+    <Paper variant="outlined" sx={{ height: 'fit-content' }}>
+      <List className={classes.box}>
+        <ListItem className={classes.title}>
+          <Typography noWrap>{name}</Typography>
+        </ListItem>
+        <ListItem className={classes.center}>
+          {!data?.length ? (
+            <Stack direction="row" justifyContent="center" alignItems="center">
+              <CircularProgress color="secondary" />
+            </Stack>
+          ) : (
+            <Chart
+              data={dataChart}
+              height={300}
+              width={500}
+              className={classes.graphStyle}
+            >
+              <ArgumentScale factory={scaleTime} />
+              <ArgumentAxis showLine={true} />
+              <ValueScale />
+              <ValueAxis showLine={true} tickFormat={() => interpolationY} />
+              <LineSeries name={name} valueField="y" argumentField="x" />
+              <ZoomAndPan />
+            </Chart>
+          )}
+        </ListItem>
+      </List>
+    </Paper>
  )
 }

@ -160,7 +145,6 @@ Chartist.propTypes = {
  ),
  x: PropTypes.string,
  y: PropTypes.string,
-  interpolationX: PropTypes.func,
  interpolationY: PropTypes.func,
 }

--- a/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js
@ -14,10 +14,7 @@
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
 import { ReactElement } from 'react'
-import { Grid } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import PropTypes from 'prop-types'
-import { DateTime } from 'luxon'

 import { useGetMonitoringQuery } from 'client/features/OneApi/vm'
 import { Chartist } from 'client/components/Charts'
@ -25,14 +22,6 @@ import { Tr } from 'client/components/HOC'
 import { prettyBytes } from 'client/utils'
 import { T } from 'client/constants'

-const useStyles = makeStyles({
-  container: {
-    gridColumn: '1 / -1',
-  },
-})
-
-const interpolationX = (value) => DateTime.fromMillis(value).toFormat('HH:mm')
-
 /**
 * Render Graphs Capacity.
 *
@ -41,19 +30,18 @@ const interpolationX = (value) => DateTime.fromMillis(value).toFormat('HH:mm')
 * @returns {ReactElement} Capacity Graphs.
 */
 const Graphs = ({ id }) => {
-  const classes = useStyles()
  const { data: monitoring = [] } = useGetMonitoringQuery(id)

  return (
-    <Grid container spacing={1} className={classes.container}>
+    <>
      <Chartist
        name={Tr(T.RealCpu)}
        filter={['CPU']}
        data={monitoring}
        y="CPU"
        x="TIMESTAMP"
-        interpolationX={interpolationX}
      />
+
      <Chartist
        name={Tr(T.RealMemory)}
        filter={['MEMORY']}
@ -61,9 +49,8 @@ const Graphs = ({ id }) => {
        y="MEMORY"
        x="TIMESTAMP"
        interpolationY={(value) => prettyBytes(value)}
-        interpolationX={interpolationX}
      />
-    </Grid>
+    </>
  )
 }

--- a/src/fireedge/src/client/components/Tabs/Vm/Info/index.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Info/index.js
@ -31,7 +31,7 @@ import {
 } from 'client/components/Tabs/Common'
 import Information from 'client/components/Tabs/Vm/Info/information'
 import Capacity from 'client/components/Tabs/Vm/Info/capacity'
-import Graphs from 'client/components/Tabs/Vm/Info/graphs'
+import Graphs from 'client/components/Tabs/Vm/Info/Graphs'
 import { SubmitButton } from 'client/components/FormControl'

 import { Tr, Translate } from 'client/components/HOC'
--- a/src/fireedge/src/client/components/Tabs/Vm/Network/Graphs.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Network/Graphs.js
@ -16,17 +16,14 @@
 import { ReactElement } from 'react'
 import { Grid } from '@mui/material'
 import PropTypes from 'prop-types'
-import { DateTime } from 'luxon'

 import { useGetMonitoringQuery } from 'client/features/OneApi/vm'
 import { Chartist } from 'client/components/Charts'
 import { Tr } from 'client/components/HOC'
 import { T } from 'client/constants'

-const interpolationHour = (value) =>
-  DateTime.fromMillis(value).toFormat('HH:mm')
 const interpolationBytesSeg = (value) => `${value}B/s`
-const interpolationY = (value) => `${value}B`
+const interpolationBytes = (value) => `${value}B`

 /**
 * Render Graphs Capacity.
@ -40,42 +37,46 @@ const Graphs = ({ id }) => {

  return (
    <Grid container spacing={1}>
-      <Chartist
-        name={Tr(T.NetRX)}
-        filter={['NETRX']}
-        data={monitoring}
-        y="NETRX"
-        x="TIMESTAMP"
-        interpolationX={interpolationHour}
-        interpolationY={interpolationY}
-      />
-      <Chartist
-        name={Tr(T.NetTX)}
-        filter={['NETTX']}
-        data={monitoring}
-        y="NETTX"
-        x="TIMESTAMP"
-        interpolationY={interpolationY}
-        interpolationX={interpolationHour}
-      />
-      <Chartist
-        name={Tr(T.NetDownloadSpeed)}
-        filter={['NETRX']}
-        data={monitoring}
-        y="NETRX"
-        x="TIMESTAMP"
-        interpolationX={interpolationHour}
-        interpolationY={interpolationBytesSeg}
-      />
-      <Chartist
-        name={Tr(T.NetUploadSpeed)}
-        filter={['NETTX']}
-        data={monitoring}
-        y="NETTX"
-        x="TIMESTAMP"
-        interpolationX={interpolationHour}
-        interpolationY={interpolationBytesSeg}
-      />
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.NetRX)}
+          filter={['NETRX']}
+          data={monitoring}
+          y="NETRX"
+          x="TIMESTAMP"
+          interpolationY={interpolationBytes}
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.NetTX)}
+          filter={['NETTX']}
+          data={monitoring}
+          y="NETTX"
+          x="TIMESTAMP"
+          interpolationY={interpolationBytes}
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.NetDownloadSpeed)}
+          filter={['NETRX']}
+          data={monitoring}
+          y="NETRX"
+          x="TIMESTAMP"
+          interpolationY={interpolationBytesSeg}
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.NetUploadSpeed)}
+          filter={['NETTX']}
+          data={monitoring}
+          y="NETTX"
+          x="TIMESTAMP"
+          interpolationY={interpolationBytesSeg}
+        />
+      </Grid>
    </Grid>
  )
 }
--- a/src/fireedge/src/client/components/Tabs/Vm/Storage/Graphs.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Storage/Graphs.js
@ -16,7 +16,6 @@
 import { ReactElement } from 'react'
 import { Grid } from '@mui/material'
 import PropTypes from 'prop-types'
-import { DateTime } from 'luxon'

 import { useGetMonitoringQuery } from 'client/features/OneApi/vm'
 import { Chartist } from 'client/components/Charts'
@ -24,10 +23,8 @@ import { Tr } from 'client/components/HOC'
 import { prettyBytes } from 'client/utils'
 import { T } from 'client/constants'

-const interpolationHour = (value) =>
-  DateTime.fromMillis(value).toFormat('HH:mm')
 const interpolationBytes = (value) => prettyBytes(value)
-const interpolationY = (value) => (+value * 100).toFixed() / 100
+const interpolationY = (value) => value / 1000

 /**
 * Render Graphs Capacity.
@ -41,42 +38,46 @@ const Graphs = ({ id }) => {

  return (
    <Grid container spacing={1}>
-      <Chartist
-        name={Tr(T.DiskReadBytes)}
-        filter={['DISKRDBYTES']}
-        data={monitoring}
-        y="DISKRDBYTES"
-        x="TIMESTAMP"
-        interpolationX={interpolationHour}
-        interpolationY={interpolationBytes}
-      />
-      <Chartist
-        name={Tr(T.DiskWriteBytes)}
-        filter={['DISKWRBYTES']}
-        data={monitoring}
-        y="CDISKWRBYTES"
-        x="TIMESTAMP"
-        interpolationX={interpolationHour}
-        interpolationY={interpolationY}
-      />
-      <Chartist
-        name={Tr(T.DiskReadIOPS)}
-        filter={['DISKRDIOPS']}
-        data={monitoring}
-        y="DISKRDIOPS"
-        x="TIMESTAMP"
-        interpolationX={interpolationHour}
-        interpolationY={(value) => value / 1000}
-      />
-      <Chartist
-        name={Tr(T.DiskWriteIOPS)}
-        filter={['DISKWRIOPS']}
-        data={monitoring}
-        y="DISKWRIOPS"
-        x="TIMESTAMP"
-        interpolationX={interpolationHour}
-        interpolationY={interpolationY}
-      />
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.DiskReadBytes)}
+          filter={['DISKRDBYTES']}
+          data={monitoring}
+          y="DISKRDBYTES"
+          x="TIMESTAMP"
+          interpolationY={interpolationBytes}
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.DiskWriteBytes)}
+          filter={['DISKWRBYTES']}
+          data={monitoring}
+          y="DISKWRBYTES"
+          x="TIMESTAMP"
+          interpolationY={interpolationBytes}
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.DiskReadIOPS)}
+          filter={['DISKRDIOPS']}
+          data={monitoring}
+          y="DISKRDIOPS"
+          x="TIMESTAMP"
+          interpolationY={interpolationY}
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <Chartist
+          name={Tr(T.DiskWriteIOPS)}
+          filter={['DISKWRIOPS']}
+          data={monitoring}
+          y="DISKWRIOPS"
+          x="TIMESTAMP"
+          interpolationY={interpolationY}
+        />
+      </Grid>
    </Grid>
  )
 }
--- a/src/sunstone/public/app/tabs/vms-tab/panels/storage.js
+++ b/src/sunstone/public/app/tabs/vms-tab/panels/storage.js
@ -125,7 +125,7 @@ define(function(require) {
              </div>\
              <div class="medium-6 columns">\
                <div class="row">\
-                  <span>' + Locale.tr("Disk write bytes") + '</span3>\
+                  <span>' + Locale.tr("Disk write bytes") + '</span>\
                </div>\
                <div class="row">\
                  <div class="large-12 columns centered graph" id="vm_st_dwb_graph" style="height: 100px;">\