From 21e7df63995fef72b01150f15c270721108f31a9 Mon Sep 17 00:00:00 2001 From: John Mazzitelli Date: Fri, 13 Apr 2018 21:18:10 -0400 Subject: [PATCH] KIALI-529 refactor table and use bar chart instead of pie chart in summary panel --- src/app/__tests__/App.test.tsx | 1 - .../SummaryPanel/ErrorRatePieChart.tsx | 45 --------- .../SummaryPanel/InOutRateChart.tsx | 93 +++++++++++++++++++ .../SummaryPanel/InOutRateTable.tsx | 64 ++++++++----- src/components/SummaryPanel/RateChart.tsx | 85 +++++++++++++++++ src/components/SummaryPanel/RateTable.tsx | 25 +++-- 6 files changed, 237 insertions(+), 76 deletions(-) delete mode 100644 src/components/SummaryPanel/ErrorRatePieChart.tsx create mode 100644 src/components/SummaryPanel/InOutRateChart.tsx create mode 100644 src/components/SummaryPanel/RateChart.tsx diff --git a/src/app/__tests__/App.test.tsx b/src/app/__tests__/App.test.tsx index 36784b7542..28e0431f3e 100644 --- a/src/app/__tests__/App.test.tsx +++ b/src/app/__tests__/App.test.tsx @@ -26,7 +26,6 @@ process.env.REACT_APP_GIT_HASH = '89323'; // TODO: properly handle SVG and D3 in the following 2 components jest.mock('../../components/Badge/Badge'); jest.mock('../../components/SummaryPanel/RpsChart'); -jest.mock('../../components/SummaryPanel/ErrorRatePieChart'); it('renders full App without crashing', () => { const div = document.createElement('div'); diff --git a/src/components/SummaryPanel/ErrorRatePieChart.tsx b/src/components/SummaryPanel/ErrorRatePieChart.tsx deleted file mode 100644 index 6a36d6888d..0000000000 --- a/src/components/SummaryPanel/ErrorRatePieChart.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { PieChart } from 'patternfly-react'; - -type ErrorRatePieChartPropType = { - percentError: number; - width?: number; - height?: number; - showLegend?: boolean; - legendPos?: string; // e.g. right, left -}; - -export default class ErrorRatePieChart extends React.Component { - static defaultProps: ErrorRatePieChartPropType = { - percentError: 0, - width: 200, - height: 80, - showLegend: true, - legendPos: 'right' - }; - - constructor(props: ErrorRatePieChartPropType) { - super(props); - } - - render() { - const successRate: number = 100 - this.props.percentError; - return ( - this.tooltipFn }} - legend={{ show: this.props.showLegend, position: this.props.legendPos }} - /> - ); - } - - tooltipFn = () => { - // TBD - }; -} diff --git a/src/components/SummaryPanel/InOutRateChart.tsx b/src/components/SummaryPanel/InOutRateChart.tsx new file mode 100644 index 0000000000..e150e396de --- /dev/null +++ b/src/components/SummaryPanel/InOutRateChart.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import { StackedBarChart } from 'patternfly-react'; + +type InOutRateChartPropType = { + percent2xxIn: number; + percent3xxIn: number; + percent4xxIn: number; + percent5xxIn: number; + percent2xxOut: number; + percent3xxOut: number; + percent4xxOut: number; + percent5xxOut: number; + height?: number; + showLegend?: boolean; + legendPos?: string; // e.g. right, left +}; + +export default class InOutRateChart extends React.Component { + static defaultProps: InOutRateChartPropType = { + percent2xxIn: 0, + percent3xxIn: 0, + percent4xxIn: 0, + percent5xxIn: 0, + percent2xxOut: 0, + percent3xxOut: 0, + percent4xxOut: 0, + percent5xxOut: 0, + height: 150, + showLegend: true, + legendPos: 'bottom' + }; + + constructor(props: InOutRateChartPropType) { + super(props); + } + + render() { + return ( + + ); + } +} diff --git a/src/components/SummaryPanel/InOutRateTable.tsx b/src/components/SummaryPanel/InOutRateTable.tsx index 417182d47e..23783a9924 100644 --- a/src/components/SummaryPanel/InOutRateTable.tsx +++ b/src/components/SummaryPanel/InOutRateTable.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import ErrorRatePieChart from './ErrorRatePieChart'; +import InOutRateChart from './InOutRateChart'; type InOutRateTablePropType = { title: string; @@ -15,10 +15,32 @@ type InOutRateTablePropType = { export default class InOutRateTable extends React.Component { render() { + // for the table const inErrRate: number = this.props.inRate4xx + this.props.inRate5xx; const outErrRate: number = this.props.outRate4xx + this.props.outRate5xx; - const percentInErr = this.props.inRate === 0 ? 0 : inErrRate / this.props.inRate * 100; - const percentOutErr = this.props.outRate === 0 ? 0 : outErrRate / this.props.outRate * 100; + const percentInErr: number = this.props.inRate === 0 ? 0 : inErrRate / this.props.inRate * 100; + const percentOutErr: number = this.props.outRate === 0 ? 0 : outErrRate / this.props.outRate * 100; + const percentInSuccess: number = 100 - percentInErr; + const percentOutSuccess: number = 100 - percentOutErr; + + // for the graphs + const rate2xxIn: number = + this.props.inRate === 0 + ? 0 + : this.props.inRate - this.props.inRate3xx - this.props.inRate4xx - this.props.inRate5xx; + const rate2xxOut: number = + this.props.outRate === 0 + ? 0 + : this.props.outRate - this.props.outRate3xx - this.props.outRate4xx - this.props.outRate5xx; + const percent2xxIn: number = this.props.inRate === 0 ? 0 : rate2xxIn / this.props.inRate * 100; + const percent3xxIn: number = this.props.inRate === 0 ? 0 : this.props.inRate3xx / this.props.inRate * 100; + const percent4xxIn: number = this.props.inRate === 0 ? 0 : this.props.inRate4xx / this.props.inRate * 100; + const percent5xxIn: number = this.props.inRate === 0 ? 0 : this.props.inRate5xx / this.props.inRate * 100; + const percent2xxOut: number = this.props.outRate === 0 ? 0 : rate2xxOut / this.props.outRate * 100; + const percent3xxOut: number = this.props.outRate === 0 ? 0 : this.props.outRate3xx / this.props.outRate * 100; + const percent4xxOut: number = this.props.outRate === 0 ? 0 : this.props.outRate4xx / this.props.outRate * 100; + const percent5xxOut: number = this.props.outRate === 0 ? 0 : this.props.outRate5xx / this.props.outRate * 100; + return (
{this.props.title} @@ -27,9 +49,7 @@ export default class InOutRateTable extends React.Component Total - 3xx - 4xx - 5xx + %Success %Error @@ -37,29 +57,31 @@ export default class InOutRateTable extends React.Component In {this.props.inRate.toFixed(2)} - {this.props.inRate3xx.toFixed(2)} - {this.props.inRate4xx.toFixed(2)} - {this.props.inRate5xx.toFixed(2)} + {percentInSuccess.toFixed(2)} {percentInErr.toFixed(2)} Out {this.props.outRate.toFixed(2)} - {this.props.outRate3xx.toFixed(2)} - {this.props.outRate4xx.toFixed(2)} - {this.props.outRate5xx.toFixed(2)} + {percentOutSuccess.toFixed(2)} {percentOutErr.toFixed(2)} + + + + - - - - - - diff --git a/src/components/SummaryPanel/RateChart.tsx b/src/components/SummaryPanel/RateChart.tsx new file mode 100644 index 0000000000..f182b52a78 --- /dev/null +++ b/src/components/SummaryPanel/RateChart.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import { StackedBarChart } from 'patternfly-react'; + +type RateChartPropType = { + percent2xx: number; + percent3xx: number; + percent4xx: number; + percent5xx: number; + height?: number; + showLegend?: boolean; + legendPos?: string; // e.g. right, left +}; + +export default class RateChart extends React.Component { + static defaultProps: RateChartPropType = { + percent2xx: 0, + percent3xx: 0, + percent4xx: 0, + percent5xx: 0, + height: 100, + showLegend: true, + legendPos: 'bottom' + }; + + constructor(props: RateChartPropType) { + super(props); + } + + render() { + return ( + + ); + } +} diff --git a/src/components/SummaryPanel/RateTable.tsx b/src/components/SummaryPanel/RateTable.tsx index d90e5c0f72..0be4c64ddc 100644 --- a/src/components/SummaryPanel/RateTable.tsx +++ b/src/components/SummaryPanel/RateTable.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import ErrorRatePieChart from './ErrorRatePieChart'; +import RateChart from './RateChart'; type RateTablePropType = { title: string; @@ -11,8 +11,19 @@ type RateTablePropType = { export default class RateTable extends React.Component { render() { + // for the table const errRate: number = this.props.rate4xx + this.props.rate5xx; - const percentErr = this.props.rate === 0 ? 0 : errRate / this.props.rate * 100; + const percentErr: number = this.props.rate === 0 ? 0 : errRate / this.props.rate * 100; + const successErr: number = 100 - percentErr; + + // for the graph + const rate2xx: number = + this.props.rate === 0 ? 0 : this.props.rate - this.props.rate3xx - this.props.rate4xx - this.props.rate5xx; + const percent2xx: number = this.props.rate === 0 ? 0 : rate2xx / this.props.rate * 100; + const percent3xx: number = this.props.rate === 0 ? 0 : this.props.rate3xx / this.props.rate * 100; + const percent4xx: number = this.props.rate === 0 ? 0 : this.props.rate4xx / this.props.rate * 100; + const percent5xx: number = this.props.rate === 0 ? 0 : this.props.rate5xx / this.props.rate * 100; + return (
{this.props.title} @@ -20,23 +31,19 @@ export default class RateTable extends React.Component {
- - - + - - - +
In - -
Out - + +
Total3xx4xx5xx%Success %Error
{this.props.rate.toFixed(2)}{this.props.rate3xx.toFixed(2)}{this.props.rate4xx.toFixed(2)}{this.props.rate5xx.toFixed(2)}{successErr.toFixed(2)} {percentErr.toFixed(2)}
- +
); }