Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replaced PF3 charts with PF4 #1048

Merged
merged 8 commits into from
Sep 10, 2019
Merged

Replaced PF3 charts with PF4 #1048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
682b437
Replaced PF3 charts with PF4
bond95 Jun 13, 2019
9afda46
Moved History charts to AreaChart component, change color of donuts a…
bond95 Jul 1, 2019
887bd8c
Updated victory version, to fix tooltip bug
bond95 Jul 1, 2019
ffba495
Updated jest transform configuration to fix CI
bond95 Jul 1, 2019
9f9ba2a
Removed console log
bond95 Jul 8, 2019
efeb210
Made BarChart more responsive for bigger labels, updated version of @…
bond95 Jul 9, 2019
d90ed4d
Updated patternfly@react-charts, made title and subTitle for donut ch…
bond95 Jul 17, 2019
e8e8b3a
Updated dependency version of ovirt-engine-nodejs-modules
bond95 Sep 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ovirt-web-ui.spec.in
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ BuildArch: noarch
BuildRequires: ovirt-engine-nodejs = 8.11.4
BuildRequires: ovirt-engine-yarn = 1.7.0

BuildRequires: ovirt-engine-nodejs-modules >= 1.8.16
BuildRequires: ovirt-engine-nodejs-modules >= 2.0.1

%description
This package provides the VM Portal for %{product}.
Expand Down
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@
"whatwg-fetch": "1.0.0"
},
"dependencies": {
"@patternfly/react-charts": "4.4.17",
"@patternfly/react-console": "1.10.22",
"@patternfly/react-tokens": "2.6.9",
"babel-polyfill": "6.26.0",
"blob-util": "1.2.1",
"bootstrap": "3.4.1",
Expand Down Expand Up @@ -103,7 +105,8 @@
"react-router-navigation-prompt": "1.6.3",
"react-test-renderer": "16.8.6",
"redux": "4.0.0",
"redux-saga": "0.16.0"
"redux-saga": "0.16.0",
"victory": "32.3.1"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this still needed with the newer version of @patternfly/react-charts? Maybe just a refresh of yarn.lock will allow removing the explicit dependency. That would be nice since we're not using it directly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to leave it as it is, beacuse react-charts still use old version ^32.2.3, which one still has bug in AreaChart.

},
"resolutions": {
"redux": "4.0.0",
Expand Down Expand Up @@ -141,7 +144,7 @@
"_/(.*)$": "<rootDir>/src/$1"
},
"transform": {
".*": "<rootDir>/config/jest/transform.js"
".+\\.(jsx?)$": "<rootDir>/config/jest/transform.js"
},
"setupFiles": [
"<rootDir>/config/polyfills.js",
Expand Down
45 changes: 21 additions & 24 deletions src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import {
patternfly,
CardTitle,
CardBody,
UtilizationCard,
Expand All @@ -10,9 +9,10 @@ import {
UtilizationCardDetailsDesc,
UtilizationCardDetailsLine1,
UtilizationCardDetailsLine2,
DonutChart,
SparklineChart,
} from 'patternfly-react'
import DonutChart from './UtilizationCharts/DonutChart'
import AreaChart from './UtilizationCharts/AreaChart'

import { msg } from '_/intl'

import style from './style.css'
Expand Down Expand Up @@ -49,31 +49,28 @@ const CpuCharts = ({ cpuStats, isRunning, id }) => {

<DonutChart
id={`${id}-donut-chart`}
data={{
columns: [
[msg.utilizationCardLegendUsedP(), cpuUsed],
[msg.utilizationCardLegendAvailableP(), cpuAvailable],
],
order: null,
}}
title={{
primary: `${cpuUsed}`, // NOTE: String else 0 is truthy false and doesn't render proper
secondary: msg.utilizationCardLegendUsedP(),
}}
tooltip={{
show: true,
contents: patternfly.pfDonutTooltipContents,
}}
data={[
{
x: msg.utilizationCardLegendUsedP(),
y: cpuUsed,
label: `${msg.utilizationCardLegendUsed()} - ${cpuUsed}%`,
},
{
x: msg.utilizationCardLegendAvailableP(),
y: cpuAvailable,
label: `${msg.utilizationCardAvailable()} - ${cpuAvailable}%`,
},
]}
subTitle={msg.utilizationCardLegendUsedP()}
title={`${cpuUsed}`}
/>

{ history.length === 0 && <NoHistoricData id={`${id}-no-historic-data`} /> }
{ history.length > 0 &&
<SparklineChart
id={`${id}-line-chart`}
data={{
columns: [['%', ...history]],
type: 'area',
}}
<AreaChart
id={`${id}-history-chart`}
data={history.map((item, i) => ({ x: i, y: item }))}
labels={datum => `${datum.y}%`}
/>
}
</React.Fragment>
Expand Down
100 changes: 37 additions & 63 deletions src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,29 @@ import PropTypes from 'prop-types'
import {
CardBody,
CardTitle,
DonutChart,
UtilizationBar,
UtilizationCard,
UtilizationCardDetails,
UtilizationCardDetailsCount,
UtilizationCardDetailsDesc,
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'
import { userFormatOfBytes, isWindows } from '_/helpers'

import style from './style.css'

import { donutMemoryTooltipContents } from './tooltip-helper'
import NoHistoricData from './NoHistoricData'
import NoLiveData from './NoLiveData'

const EmptyBlock = () => (
<div className={style['no-history-chart']} />
)

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 <div className={style['disk-fs-box']}>
<div className={style['disk-fs-name']}>{ isVmWindows ? path.toUpperCase() : path }</div>
<div className={style['disk-fs-bar']}>
<UtilizationBar
now={usedInPercent}
thresholdWarning={thresholdWarning}
thresholdError={thresholdError}
/>
<div
className={style['disk-fs-used']}
dangerouslySetInnerHTML={{
__html: msg.utilizationCardDiskUsed({
used: round(value.used, 0),
total: round(value.total, 0),
storageUnits: unit,
}),
}}
/>
</div>
</div>
}
DiskBar.propTypes = {
path: PropTypes.string.isRequired,
total: PropTypes.number.isRequired,
used: PropTypes.number.isRequired,
isVmWindows: PropTypes.bool,
}

/*
* Disks, but intended to be in terms of guest agent reported data (file system viewpoint),
* not in terms of storage allocation (infrastructure viewpoint - like dashboard/webadmin).
Expand Down Expand Up @@ -129,34 +89,48 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
{ !hasDiskDetails &&
<DonutChart
id={`${id}-donut-chart`}
data={{
columns: [
[msg.utilizationCardAllocated(), actualSize],
[msg.utilizationCardUnallocated(), provisionedSize - actualSize],
],
order: null,
}}
title={{
primary: `${round(usedFormated.number, 0)}`,
secondary: msg.utilizationCardUnitAllocated({ storageUnit: usedFormated.suffix }),
}}
tooltip={{
show: true,
contents: donutMemoryTooltipContents,
}}
data={[
{
x: msg.utilizationCardAllocated(),
y: actualSize,
label: `${msg.utilizationCardLegendUsed()} - ${usedFormated.rounded} ${usedFormated.suffix}`,
},
{
x: msg.utilizationCardUnallocated(),
y: provisionedSize - actualSize,
label: `${msg.utilizationCardLegendAvailable()} - ${availableFormated.rounded} ${availableFormated.suffix}`,
},
]}
subTitle={msg.utilizationCardUnitAllocated({ storageUnit: usedFormated.suffix })}
title={`${round(usedFormated.number, 0)}`}
/>
}
{ isRunning && hasDiskDetails &&
<div className={style['disk-fs-list']}>
{
diskDetails.map((disk) =>
<DiskBar key={disk.path} path={disk.path} total={disk.total} used={disk.used} isVmWindows={isVmWindows} />
)
}
<BarChart
id={`${id}-bar-chart`}
data={
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, 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}
/>
</div>
}
{ isRunning && !hasDiskDetails &&
<NoHistoricData message={msg.utilizationCardNoGuestAgent()} />
<NoHistoricData id={`${id}-no-historic-data`} message={msg.utilizationCardNoGuestAgent()} />
}
{/*
Disks don't have historic data but stub the space so the card stretches like the others,
Expand Down
51 changes: 21 additions & 30 deletions src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,21 @@ import PropTypes from 'prop-types'
import {
CardBody,
CardTitle,
DonutChart,
SparklineChart,
UtilizationCard,
UtilizationCardDetails,
UtilizationCardDetailsCount,
UtilizationCardDetailsDesc,
UtilizationCardDetailsLine1,
UtilizationCardDetailsLine2,
} from 'patternfly-react'

import DonutChart from './UtilizationCharts/DonutChart'
import AreaChart from './UtilizationCharts/AreaChart'
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'

Expand Down Expand Up @@ -71,36 +69,29 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
</UtilizationCardDetailsLine2>
</UtilizationCardDetailsDesc>
</UtilizationCardDetails>

<DonutChart
id={`${id}-donut-chart`}
data={{
columns: [
[msg.utilizationCardLegendUsed(), used],
[msg.utilizationCardLegendAvailable(), available],
],
order: null,
}}
title={{
primary: `${usedFormated.rounded}`,
secondary: msg.utilizationCardUnitUsed({ storageUnit: usedFormated.suffix }),
}}
tooltip={{
show: true,
contents: donutMemoryTooltipContents,
}}
data={[
{
x: msg.utilizationCardLegendUsed(),
y: used,
label: `${msg.utilizationCardLegendUsed()} - ${usedFormated.rounded} ${usedFormated.suffix}`,
},
{
x: msg.utilizationCardLegendAvailable(),
y: available,
label: `${msg.utilizationCardLegendAvailable()} - ${availableFormated.rounded} ${availableFormated.suffix}`,
},
]}
subTitle={msg.utilizationCardUnitUsed({ storageUnit: usedFormated.suffix })}
title={`${usedFormated.rounded}`}
/>

{ history.length === 0 && <NoHistoricData /> }
{ history.length === 0 && <NoHistoricData id={`${id}-no-historic-data`} /> }
{ history.length > 0 &&
<SparklineChart
id={`${id}-line-chart`}
data={{
columns: [
['%', ...history],
],
type: 'area',
}}
<AreaChart
id={`${id}-history-chart`}
data={history.map((item, i) => ({ x: i + 1, y: item, name: 'memory' }))}
labels={datum => `${datum.y}%`}
/>
}
</React.Fragment>
Expand Down
Loading