diff --git a/package.json b/package.json
index e4d5bde787..ba9cb6435b 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,8 @@
"whatwg-fetch": "1.0.0"
},
"dependencies": {
+ "@patternfly/react-charts": "4.1.5",
+ "@patternfly/react-tokens": "2.5.5",
"babel-polyfill": "6.26.0",
"@patternfly/react-console": "1.10.22",
"blob-util": "1.2.1",
diff --git a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
index 59708a1f62..9c43f18f29 100644
--- a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
@@ -1,7 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import {
- patternfly,
CardTitle,
CardBody,
UtilizationCard,
@@ -10,9 +9,10 @@ import {
UtilizationCardDetailsDesc,
UtilizationCardDetailsLine1,
UtilizationCardDetailsLine2,
- DonutChart,
- SparklineChart,
} from 'patternfly-react'
+import { ChartGroup, ChartArea, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'
+import DonutChart from './UtilizationCharts/DonutChart'
+
import { msg } from '_/intl'
import style from './style.css'
@@ -48,33 +48,39 @@ const CpuCharts = ({ cpuStats, isRunning, id }) => {
{ history.length === 0 && }
{ history.length > 0 &&
-
+ `${datum.y}%`}
+ labelComponent={}
+ />
+ }
+ >
+ ({ x: i, y: item, name: 'cpu' }))}
+ />
+
}
}
diff --git a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
index e783a3bbff..40b8624e70 100644
--- a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
import {
CardBody,
CardTitle,
- DonutChart,
- UtilizationBar,
UtilizationCard,
UtilizationCardDetails,
UtilizationCardDetailsCount,
@@ -12,6 +10,8 @@ import {
UtilizationCardDetailsLine1,
UtilizationCardDetailsLine2,
} from 'patternfly-react'
+import BarChart from './UtilizationCharts/BarChart'
+import DonutChart from './UtilizationCharts/DonutChart'
import { msg } from '_/intl'
import { round, floor, convertValueMap } from '_/utils'
@@ -19,7 +19,6 @@ import { userFormatOfBytes, isWindows } from '_/helpers'
import style from './style.css'
-import { donutMemoryTooltipContents } from './tooltip-helper'
import NoHistoricData from './NoHistoricData'
import NoLiveData from './NoLiveData'
@@ -27,45 +26,6 @@ const EmptyBlock = () => (
)
-const DiskBar = ({ path, total, used, isVmWindows }) => {
- const { unit, value } =
- convertValueMap(
- 'B',
- {
- total: total,
- used: used,
- })
- const thresholdError = 90
- const thresholdWarning = 70
- const usedInPercent = round(used / total * 100, 0)
- return
-
{ isVmWindows ? path.toUpperCase() : path }
-
-
- {
- diskDetails.map((disk) =>
-
- )
- }
+ {
+ const usedInPercent = round(disk.used / disk.total * 100, 0)
+ return { x: isVmWindows ? disk.path.toUpperCase() : disk.path, y: usedInPercent, total: disk.total, used: disk.used }
+ })
+ }
+ additionalLabel={({ total, used }) => {
+ const { unit, value } =
+ convertValueMap(
+ 'B',
+ {
+ total: total,
+ used: used,
+ })
+ return msg.utilizationCardDiskUsed({
+ used: round(value.used, 0),
+ total: round(value.total, 0),
+ storageUnits: unit,
+ })
+ }}
+ labels={datum => datum ? `${msg.utilizationCardLegendUsed()} ${datum.y}%` : null}
+ thresholdWarning={70}
+ thresholdError={90}
+ />
}
{ isRunning && !hasDiskDetails &&
diff --git a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
index 661bbe6085..7cf55914f6 100644
--- a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
import {
CardBody,
CardTitle,
- DonutChart,
- SparklineChart,
UtilizationCard,
UtilizationCardDetails,
UtilizationCardDetailsCount,
@@ -12,14 +10,14 @@ import {
UtilizationCardDetailsLine1,
UtilizationCardDetailsLine2,
} from 'patternfly-react'
-
+import { ChartGroup, ChartArea, ChartVoronoiContainer, ChartTooltip } from '@patternfly/react-charts'
+import DonutChart from './UtilizationCharts/DonutChart'
import { msg } from '_/intl'
import { round, floor } from '_/utils'
import { userFormatOfBytes } from '_/helpers'
import style from './style.css'
-import { donutMemoryTooltipContents } from './tooltip-helper'
import NoHistoricData from './NoHistoricData'
import NoLiveData from './NoLiveData'
@@ -71,37 +69,39 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
-
-
{ history.length === 0 && }
{ history.length > 0 &&
-
+ `${datum.y}%`}
+ labelComponent={}
+ />
+ }
+ >
+ ({ x: i, y: item, name: 'cpu' }))}
+ />
+
}
}
diff --git a/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js b/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
index 3c985cbd0e..b8327eaa90 100644
--- a/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
@@ -1,7 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import {
- patternfly,
CardTitle,
CardBody,
UtilizationCard,
@@ -10,9 +9,9 @@ import {
UtilizationCardDetailsDesc,
UtilizationCardDetailsLine1,
UtilizationCardDetailsLine2,
- DonutChart,
- SparklineChart,
} from 'patternfly-react'
+import { ChartGroup, ChartArea, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'
+import DonutChart from './UtilizationCharts/DonutChart'
import { msg } from '_/intl'
@@ -55,35 +54,36 @@ const NetworkingCharts = ({ netStats, isRunning, id }) => {
{msg.utilizationCardOf100()}
-
-
{ history.length === 0 && }
{ history.length > 0 &&
-
+ `${datum.y}%`}
+ labelComponent={}
+ />
+ }
+ >
+ ({ x: i, y: item, name: 'cpu' }))} />
+
}
}
diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js
new file mode 100644
index 0000000000..c3a61ccbdf
--- /dev/null
+++ b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { ChartBar, Chart, ChartAxis, ChartTooltip, ChartStack, ChartLabel } from '@patternfly/react-charts'
+
+const CustomLabel = ({ label, text, ...rest }) => {
+ const t = label ? typeof label === 'function' ? label(rest.datum) : label : ''
+ return (
+
+
+
+
+ )
+}
+
+CustomLabel.defaultEvents = ChartTooltip.defaultEvents
+CustomLabel.propTypes = {
+ text: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+ label: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+}
+
+const BarChart = ({ data, additionalLabel, thresholdWarning, thresholdError, ...rest }) => {
+ const availableInPercent = data.map((datum) => ({ x: datum.x, y: 100 - datum.y }))
+ console.log(availableInPercent)
+ return
+
+ thresholdError && d.y >= thresholdError
+ ? '#cc0000'
+ : thresholdWarning && d.y >= thresholdWarning
+ ? '#ec7a08'
+ : '#3f9c35',
+ },
+ }}
+ labelComponent={}
+ data={data}
+ {...rest} />
+ }
+ style={{ parent: { border: '0px' } }}
+ data={availableInPercent}
+ {...rest} />
+
+
+
+}
+
+BarChart.propTypes = {
+ data: PropTypes.array.isRequired,
+ thresholdWarning: PropTypes.number,
+ thresholdError: PropTypes.number,
+ additionalLabel: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+}
+
+export default BarChart
diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
new file mode 100644
index 0000000000..423ab95f5a
--- /dev/null
+++ b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ChartDonut } from '@patternfly/react-charts'
+
+const DonutChart = ({ data, title, subTitle }) => {
+ return (
+ datum.label}
+ subTitle={subTitle}
+ title={title}
+ />
+ )
+}
+
+const datumPropType = PropTypes.shape({
+ x: PropTypes.string,
+ y: PropTypes.number,
+ label: PropTypes.string,
+})
+
+DonutChart.propTypes = {
+ data: PropTypes.arrayOf(datumPropType).isRequired,
+ title: PropTypes.string.isRequired,
+ subTitle: PropTypes.string.isRequired,
+}
+
+export default DonutChart
diff --git a/src/components/VmDetails/cards/UtilizationCard/style.css b/src/components/VmDetails/cards/UtilizationCard/style.css
index 884eb13301..860403f2ea 100644
--- a/src/components/VmDetails/cards/UtilizationCard/style.css
+++ b/src/components/VmDetails/cards/UtilizationCard/style.css
@@ -108,6 +108,10 @@
justify-content: space-around;
}
+.col-charts-box {
+ min-width: 200px;
+}
+
@media (min-width: 1250px) {
.row-charts-box {
flex-wrap: nowrap;
diff --git a/src/components/VmDetails/cards/UtilizationCard/tooltip-helper.js b/src/components/VmDetails/cards/UtilizationCard/tooltip-helper.js
deleted file mode 100644
index 86d5c04726..0000000000
--- a/src/components/VmDetails/cards/UtilizationCard/tooltip-helper.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-import { patternfly } from 'patternfly-react'
-import { userFormatOfBytes } from '_/helpers'
-import { round } from '_/utils'
-
-export function donutMemoryTooltipContents (
- d: Array