From f5b2b710ed798b620961cee787cfc84540bec80c Mon Sep 17 00:00:00 2001
From: John Mazzitelli <mazz@redhat.com>
Date: Fri, 13 Apr 2018 21:18:10 -0400
Subject: [PATCH] KIALI-529 refactor table and pie chart in summary

---
 .../SummaryPanel/ErrorRatePieChart.tsx        | 38 ++++++++------
 .../SummaryPanel/InOutRateTable.tsx           | 52 ++++++++++++++-----
 src/components/SummaryPanel/RateTable.tsx     | 28 +++++++---
 3 files changed, 82 insertions(+), 36 deletions(-)

diff --git a/src/components/SummaryPanel/ErrorRatePieChart.tsx b/src/components/SummaryPanel/ErrorRatePieChart.tsx
index 6a36d6888d..2ff1918e0f 100644
--- a/src/components/SummaryPanel/ErrorRatePieChart.tsx
+++ b/src/components/SummaryPanel/ErrorRatePieChart.tsx
@@ -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;
@@ -11,11 +14,14 @@ 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) {
@@ -23,23 +29,25 @@ export default class ErrorRatePieChart extends React.Component<ErrorRatePieChart
   }
 
   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
-  };
 }
diff --git a/src/components/SummaryPanel/InOutRateTable.tsx b/src/components/SummaryPanel/InOutRateTable.tsx
index 417182d47e..27a19b0c53 100644
--- a/src/components/SummaryPanel/InOutRateTable.tsx
+++ b/src/components/SummaryPanel/InOutRateTable.tsx
@@ -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>
@@ -27,9 +49,7 @@ 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>
@@ -37,29 +57,35 @@ export default class InOutRateTable extends React.Component<InOutRateTablePropTy
             <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>
diff --git a/src/components/SummaryPanel/RateTable.tsx b/src/components/SummaryPanel/RateTable.tsx
index d90e5c0f72..c5d7980f71 100644
--- a/src/components/SummaryPanel/RateTable.tsx
+++ b/src/components/SummaryPanel/RateTable.tsx
@@ -11,8 +11,19 @@ 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>
@@ -20,23 +31,24 @@ export default class RateTable extends React.Component<RateTablePropType, {}> {
           <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>
     );
   }