KIALI-529 refactor table and use bar chart instead of pie chart in su…

…mmary panel

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');

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<InOutRateChartPropType> {
+  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 (
+      <StackedBarChart
+        size={{ height: this.props.height }}
+        legend={{ show: this.props.showLegend, position: this.props.legendPos }}
+        grid={{
+          x: {
+            show: false
+          },
+          y: {
+            show: true
+          }
+        }}
+        axis={{
+          rotated: true,
+          x: {
+            categories: ['In', 'Out'],
+            type: 'category'
+          },
+          y: {
+            show: true,
+            inner: false,
+            label: {
+              text: '%',
+              position: 'inner-right'
+            },
+            min: 0,
+            max: 100,
+            tick: {
+              values: [0, 25, 50, 75, 100]
+            },
+            padding: {
+              top: 20,
+              bottom: 0
+            }
+          }
+        }}
+        data={{
+          groups: [['OK', '3xx', '4xx', '5xx']],
+          columns: [
+            ['OK', this.props.percent2xxIn, this.props.percent2xxOut],
+            ['3xx', this.props.percent3xxIn, this.props.percent3xxOut],
+            ['4xx', this.props.percent4xxIn, this.props.percent4xxOut],
+            ['5xx', this.props.percent5xxIn, this.props.percent5xxOut]
+          ],
+          // order: 'asc',
+          colors: {
+            OK: '#3f9c35', // pf-green-400
+            '3xx': '#0088ce', // pf-blue-400
+            '4xx': '#ec7a08', // pf-orange-400
+            '5xx': '#cc0000' // pf-red-100
+          }
+        }}
+      />
+    );
+  }
+}

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<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 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 (
       <div>
         <strong>{this.props.title}</strong>
@@ -27,39 +49,39 @@ 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>
+          </tbody>
+        </table>
+        <table className="table">
+          <tbody>
             <tr>
-              <td>In</td>
-              <td colSpan={5}>
-                <ErrorRatePieChart percentError={percentInErr} width={150} height={80} />
-              </td>
-            </tr>
-            <tr>
-              <td>Out</td>
-              <td colSpan={5}>
-                <ErrorRatePieChart percentError={percentOutErr} width={150} height={80} />
+              <td>
+                <InOutRateChart
+                  percent2xxIn={percent2xxIn}
+                  percent3xxIn={percent3xxIn}
+                  percent4xxIn={percent4xxIn}
+                  percent5xxIn={percent5xxIn}
+                  percent2xxOut={percent2xxOut}
+                  percent3xxOut={percent3xxOut}
+                  percent4xxOut={percent4xxOut}
+                  percent5xxOut={percent5xxOut}
+                />
               </td>
             </tr>
           </tbody>

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<RateChartPropType> {
+  static defaultProps: RateChartPropType = {
+    percent2xx: 0,
+    percent3xx: 0,
+    percent4xx: 0,
+    percent5xx: 0,
+    height: 100,
+    showLegend: true,
+    legendPos: 'bottom'
+  };
+
+  constructor(props: RateChartPropType) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <StackedBarChart
+        size={{ height: this.props.height }}
+        legend={{ show: this.props.showLegend, position: this.props.legendPos }}
+        grid={{
+          x: {
+            show: false
+          },
+          y: {
+            show: true
+          }
+        }}
+        axis={{
+          rotated: true,
+          x: {
+            categories: [''],
+            type: 'category'
+          },
+          y: {
+            show: true,
+            inner: false,
+            label: {
+              text: '%',
+              position: 'inner-right'
+            },
+            min: 0,
+            max: 100,
+            tick: {
+              values: [0, 25, 50, 75, 100]
+            },
+            padding: {
+              top: 20,
+              bottom: 0
+            }
+          }
+        }}
+        data={{
+          groups: [['OK', '3xx', '4xx', '5xx']],
+          columns: [
+            ['OK', this.props.percent2xx],
+            ['3xx', this.props.percent3xx],
+            ['4xx', this.props.percent4xx],
+            ['5xx', this.props.percent5xx]
+          ],
+          // order: 'asc',
+          colors: {
+            OK: '#3f9c35', // pf-green-400
+            '3xx': '#0088ce', // pf-blue-400
+            '4xx': '#ec7a08', // pf-orange-400
+            '5xx': '#cc0000' // pf-red-100
+          }
+        }}
+      />
+    );
+  }
+}

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,32 +11,39 @@ 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 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 (
       <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} />
+        <RateChart percent2xx={percent2xx} percent3xx={percent3xx} percent4xx={percent4xx} percent5xx={percent5xx} />
       </div>
     );
   }