Replaced PF3 charts with PF4

Fixes: oVirt#1031
bond95 · Jul 17, 2019 · 2ebf4a2 · 2ebf4a2
1 parent 4f249b8
commit 2ebf4a2
Show file tree

Hide file tree

Showing 11 changed files with 2,050 additions and 1,053 deletions.
diff --git 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
@@ -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 }) => {
           </UtilizationCardDetails>
 
           <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',
-              }}
-            />
+            <ChartGroup
+              height={150}
+              width={450}
+              containerComponent={
+                <ChartVoronoiContainer
+                  labels={datum => `${datum.y}%`}
+                  labelComponent={<ChartTooltip style={{ fontSize: 16 }} />}
+                />
+              }
+            >
+              <ChartArea
+                style={{ data: { fill: 'rgb(0, 136, 206)' } }}
+                data={history.map((item, i) => ({ x: i, y: item, name: 'cpu' }))}
+              />
+            </ChartGroup>
           }
         </React.Fragment>
         }

diff --git a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
@@ -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).
@@ -128,31 +88,49 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
             </UtilizationCardDetails>
             { !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
+                  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: 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}
+                />
               </div>
             }
             { isRunning && !hasDiskDetails &&

diff --git a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
@@ -3,23 +3,21 @@ import PropTypes from 'prop-types'
 import {
   CardBody,
   CardTitle,
-  DonutChart,
-  SparklineChart,
   UtilizationCard,
   UtilizationCardDetails,
   UtilizationCardDetailsCount,
   UtilizationCardDetailsDesc,
   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 }) => {
               </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 &&
-            <SparklineChart
-              id={`${id}-line-chart`}
-              data={{
-                columns: [
-                  ['%', ...history],
-                ],
-                type: 'area',
-              }}
-            />
+            <ChartGroup
+              height={150}
+              width={450}
+              containerComponent={
+                <ChartVoronoiContainer
+                  labels={datum => `${datum.y}%`}
+                  labelComponent={<ChartTooltip style={{ fontSize: 16 }} />}
+                />
+              }
+            >
+              <ChartArea
+                style={{ data: { fill: 'rgb(0, 136, 206)' } }}
+                data={history.map((item, i) => ({ x: i, y: item, name: 'cpu' }))}
+              />
+            </ChartGroup>
           }
         </React.Fragment>
         }