From 4a0e75d4219303be16d5e48c9e79b66bb56d32d1 Mon Sep 17 00:00:00 2001
From: Andrew Cholakian <andrew@andrewvc.com>
Date: Fri, 18 Jan 2019 14:53:27 -0600
Subject: [PATCH] [Uptime] Remove broken stacked chart in monitor detail page.

This chart had no legend and the sum of it was incorrect. We can bring this back later in a form that actually functions.
---
 .../queries/monitor_charts/monitor_charts.tsx | 119 +++++-------------
 1 file changed, 30 insertions(+), 89 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx
index a7dfc0938d66c..b7957f578b20c 100644
--- a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx
+++ b/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx
@@ -112,9 +112,6 @@ export const MonitorCharts = ({
       const durationDomain = avgDurationSeries.concat(areaRttSeries);
       const durationLimits = [0, Math.max(...durationDomain.map(({ y }) => y))];
 
-      // find the greatest y-value for rtt chart
-      const rttLimits = [0, Math.max(...maxRtt.map(({ y }) => y))];
-
       return (
         <Fragment>
           <EuiFlexGroup>
@@ -122,58 +119,38 @@ export const MonitorCharts = ({
               <EuiTitle size="xs">
                 <h4>
                   <FormattedMessage
-                    id="xpack.uptime.monitorCharts.rttBreakdownTitle"
-                    defaultMessage="RTT Breakdown ms"
+                    id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
+                    defaultMessage="Monitor Duration ms"
                     description="The 'ms' is an abbreviation for milliseconds."
                   />
                 </h4>
               </EuiTitle>
-              <EuiPanel>
+              <EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
                 <EuiSeriesChart
-                  stackBy="y"
                   margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
-                  xType={EuiSeriesChartUtils.SCALE.TIME}
                   width={500}
                   height={200}
-                  yDomain={rttLimits}
+                  xType={EuiSeriesChartUtils.SCALE.TIME}
+                  yDomain={durationLimits}
                 >
                   <EuiAreaSeries
                     name={i18n.translate(
-                      'xpack.uptime.monitorCharts.rtt.series.writeRequestLabel',
+                      'xpack.uptime.monitorCharts.monitorDuration.series.durationRangeLabel',
                       {
-                        defaultMessage: 'Write request',
+                        defaultMessage: 'Duration range',
                       }
                     )}
-                    data={rttWriteRequestSeries}
-                    curve="curveBasis"
-                  />
-                  <EuiAreaSeries
-                    name={i18n.translate('xpack.uptime.monitorCharts.rtt.series.validateLabel', {
-                      defaultMessage: 'Validate',
-                    })}
-                    data={rttValidateSeries}
-                    curve="curveBasis"
-                  />
-                  <EuiAreaSeries
-                    name={i18n.translate('xpack.uptime.monitorCharts.rtt.series.contentLabel', {
-                      defaultMessage: 'Content',
-                    })}
-                    data={rttContentSeries}
-                    curve="curveBasis"
-                  />
-                  <EuiAreaSeries
-                    name={i18n.translate('xpack.uptime.monitorCharts.rtt.series.responseLabel', {
-                      defaultMessage: 'Response',
-                    })}
-                    data={rttResponseSeries}
+                    data={areaRttSeries}
                     curve="curveBasis"
                   />
-                  <EuiAreaSeries
-                    name={i18n.translate('xpack.uptime.monitorCharts.rtt.series.tcpLabel', {
-                      defaultMessage: 'Tcp',
-                    })}
-                    data={rttTcpSeries}
-                    curve="curveBasis"
+                  <EuiLineSeries
+                    name={i18n.translate(
+                      'xpack.uptime.monitorCharts.monitorDuration.series.meanDurationLabel',
+                      {
+                        defaultMessage: 'Mean duration',
+                      }
+                    )}
+                    data={avgDurationSeries}
                   />
                 </EuiSeriesChart>
               </EuiPanel>
@@ -182,80 +159,44 @@ export const MonitorCharts = ({
               <EuiTitle size="xs">
                 <h4>
                   <FormattedMessage
-                    id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
-                    defaultMessage="Monitor Duration ms"
-                    description="The 'ms' is an abbreviation for milliseconds."
+                    id="xpack.uptime.monitorCharts.checkStatus.title"
+                    defaultMessage="Check status"
                   />
                 </h4>
               </EuiTitle>
-              <EuiPanel>
+              <EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
                 <EuiSeriesChart
                   margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
                   width={500}
                   height={200}
                   xType={EuiSeriesChartUtils.SCALE.TIME}
-                  yDomain={durationLimits}
+                  stackBy="y"
+                  yDomain={domainLimits}
                 >
                   <EuiAreaSeries
                     name={i18n.translate(
-                      'xpack.uptime.monitorCharts.monitorDuration.series.durationRangeLabel',
+                      'xpack.uptime.monitorCharts.checkStatus.series.upCountLabel',
                       {
-                        defaultMessage: 'Duration range',
+                        defaultMessage: 'Up count',
                       }
                     )}
-                    data={areaRttSeries}
-                    curve="curveBasis"
+                    data={upSeries}
+                    color="green"
                   />
-                  <EuiLineSeries
+                  <EuiAreaSeries
                     name={i18n.translate(
-                      'xpack.uptime.monitorCharts.monitorDuration.series.meanDurationLabel',
+                      'xpack.uptime.monitorCharts.checkStatus.series.downCountLabel',
                       {
-                        defaultMessage: 'Mean duration',
+                        defaultMessage: 'Down count',
                       }
                     )}
-                    data={avgDurationSeries}
+                    data={downSeries}
+                    color="red"
                   />
                 </EuiSeriesChart>
               </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>
-          <EuiSpacer />
-          <EuiTitle size="xs">
-            <h4>
-              <FormattedMessage
-                id="xpack.uptime.monitorCharts.checkStatus.title"
-                defaultMessage="Check status"
-              />
-            </h4>
-          </EuiTitle>
-          <EuiPanel style={{ maxWidth: 520, maxHeight: 220 }}>
-            <EuiSeriesChart
-              margins={{ left: 60, right: 40, top: 10, bottom: 40 }}
-              width={500}
-              height={200}
-              xType={EuiSeriesChartUtils.SCALE.TIME}
-              stackBy="y"
-              yDomain={domainLimits}
-            >
-              <EuiAreaSeries
-                name={i18n.translate('xpack.uptime.monitorCharts.checkStatus.series.upCountLabel', {
-                  defaultMessage: 'Up count',
-                })}
-                data={upSeries}
-                color="green"
-              />
-              <EuiAreaSeries
-                name={i18n.translate(
-                  'xpack.uptime.monitorCharts.checkStatus.series.downCountLabel',
-                  {
-                    defaultMessage: 'Down count',
-                  }
-                )}
-                data={downSeries}
-                color="red"
-              />
-            </EuiSeriesChart>
-          </EuiPanel>
         </Fragment>
       );
     }}