Skip to content
This repository has been archived by the owner on Apr 11, 2023. It is now read-only.

Commit

Permalink
KIALI-529 refactor table and pie chart in summary
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmazzitelli
jmazzitelli committed Apr 18, 2018
1 parent a43f402 commit f5b2b71
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 36 deletions.
38 changes: 23 additions & 15 deletions src/components/SummaryPanel/ErrorRatePieChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import * as React from 'react';
import { PieChart } from 'patternfly-react';

type ErrorRatePieChartPropType = {
percentError: number;
percent2xx: number;
percent3xx: number;
percent4xx: number;
percent5xx: number;
width?: number;
height?: number;
showLegend?: boolean;
Expand All @@ -11,35 +14,40 @@ type ErrorRatePieChartPropType = {

export default class ErrorRatePieChart extends React.Component<ErrorRatePieChartPropType> {
static defaultProps: ErrorRatePieChartPropType = {
percentError: 0,
width: 200,
height: 80,
percent2xx: 0,
percent3xx: 0,
percent4xx: 0,
percent5xx: 0,
width: 230,
height: 110,
showLegend: true,
legendPos: 'right'
legendPos: 'bottom'
};

constructor(props: ErrorRatePieChartPropType) {
super(props);
}

render() {
const successRate: number = 100 - this.props.percentError;
return (
<PieChart
className="pie-chart-pf"
size={{ width: this.props.width, height: this.props.height }}
data={{
colors: { '% Success': '#0088ce', '% Fail': '#cc0000' }, // pf-blue, pf-red-100
columns: [['% Success', successRate], ['% Fail', this.props.percentError]],
type: 'pie'
colors: {
'%OK': '#0088ce', // pf-blue-400
'%3xx': '#92d400', // pf-light-green-400
'%4xx': '#ec7a08', // pf-orange-400
'%5xx': '#8b0000' // pf-red-300
},
columns: [
['%OK', this.props.percent2xx + 50],
['%3xx', this.props.percent3xx + 40],
['%4xx', this.props.percent4xx + 20],
['%5xx', this.props.percent5xx + 10]
]
}}
tooltip={{ contents: () => this.tooltipFn }}
legend={{ show: this.props.showLegend, position: this.props.legendPos }}
/>
);
}

tooltipFn = () => {
// TBD
};
}
52 changes: 39 additions & 13 deletions src/components/SummaryPanel/InOutRateTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,32 @@ type InOutRateTablePropType = {

export default class InOutRateTable extends React.Component<InOutRateTablePropType, {}> {
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 pie charts
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 (
<div>
<strong>{this.props.title}</strong>
Expand All @@ -27,39 +49,43 @@ export default class InOutRateTable extends React.Component<InOutRateTablePropTy
<tr>
<th />
<th>Total</th>
<th>3xx</th>
<th>4xx</th>
<th>5xx</th>
<th>%Success</th>
<th>%Error</th>
</tr>
</thead>
<tbody>
<tr>
<td>In</td>
<td>{this.props.inRate.toFixed(2)}</td>
<td>{this.props.inRate3xx.toFixed(2)}</td>
<td>{this.props.inRate4xx.toFixed(2)}</td>
<td>{this.props.inRate5xx.toFixed(2)}</td>
<td>{percentInSuccess.toFixed(2)}</td>
<td>{percentInErr.toFixed(2)}</td>
</tr>
<tr>
<td>Out</td>
<td>{this.props.outRate.toFixed(2)}</td>
<td>{this.props.outRate3xx.toFixed(2)}</td>
<td>{this.props.outRate4xx.toFixed(2)}</td>
<td>{this.props.outRate5xx.toFixed(2)}</td>
<td>{percentOutSuccess.toFixed(2)}</td>
<td>{percentOutErr.toFixed(2)}</td>
</tr>
<tr>
<td>In</td>
<td colSpan={5}>
<ErrorRatePieChart percentError={percentInErr} width={150} height={80} />
<ErrorRatePieChart
percent2xx={percent2xxIn}
percent3xx={percent3xxIn}
percent4xx={percent4xxIn}
percent5xx={percent5xxIn}
/>
</td>
</tr>
<tr>
<td>Out</td>
<td colSpan={5}>
<ErrorRatePieChart percentError={percentOutErr} width={150} height={80} />
<ErrorRatePieChart
percent2xx={percent2xxOut}
percent3xx={percent3xxOut}
percent4xx={percent4xxOut}
percent5xx={percent5xxOut}
/>
</td>
</tr>
</tbody>
Expand Down
28 changes: 20 additions & 8 deletions src/components/SummaryPanel/RateTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,44 @@ type RateTablePropType = {

export default class RateTable extends React.Component<RateTablePropType, {}> {
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 pie chart
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 (
<div>
<strong>{this.props.title}</strong>
<table className="table">
<thead>
<tr>
<th>Total</th>
<th>3xx</th>
<th>4xx</th>
<th>5xx</th>
<th>%Success</th>
<th>%Error</th>
</tr>
</thead>
<tbody>
<tr>
<td>{this.props.rate.toFixed(2)}</td>
<td>{this.props.rate3xx.toFixed(2)}</td>
<td>{this.props.rate4xx.toFixed(2)}</td>
<td>{this.props.rate5xx.toFixed(2)}</td>
<td>{successErr.toFixed(2)}</td>
<td>{percentErr.toFixed(2)}</td>
</tr>
</tbody>
</table>
<ErrorRatePieChart percentError={percentErr} />
<ErrorRatePieChart
percent2xx={percent2xx}
percent3xx={percent3xx}
percent4xx={percent4xx}
percent5xx={percent5xx}
/>
</div>
);
}
Expand Down

0 comments on commit f5b2b71

Please sign in to comment.