From d9623437f19e6fd5367492609d47699bf5ccb289 Mon Sep 17 00:00:00 2001
From: JUDIT GRESKOVITS <juditgreskovits@gmail.com>
Date: Tue, 24 Jan 2017 17:57:57 +0000
Subject: [PATCH] Fix chopped off data for twelve hours

---
 ui/src/components/metric/graph.js |  3 ++-
 ui/src/components/metric/story.js | 26 ++++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/metric/graph.js b/ui/src/components/metric/graph.js
index 0be2cc5c..fd58b795 100644
--- a/ui/src/components/metric/graph.js
+++ b/ui/src/components/metric/graph.js
@@ -121,7 +121,8 @@ class Graph extends React.Component {
     // remove leading data before first time on scale x
     let dataWithTime = [];
     if(data && data.length) {
-      const totalData = data.slice(data.length - 1 - duration/10);
+      const sliceIndex = data.length - 1 - duration/10;
+      const totalData = sliceIndex < 0 ? data : data.slice(sliceIndex);
       // adjust time of first data, if there's less data than would fill the chart
       const start = moment(before)
         .add(duration - (totalData.length-1)*10, 'minutes');
diff --git a/ui/src/components/metric/story.js b/ui/src/components/metric/story.js
index fd38a2c7..62b2b27d 100644
--- a/ui/src/components/metric/story.js
+++ b/ui/src/components/metric/story.js
@@ -80,7 +80,7 @@ storiesOf('Metric', module)
       <MetricView>
         <MetricHeader>
           <MetricTitle>Aggregated CPU usage</MetricTitle>
-          <MetricSelect onChange={onMetricSelect} value={twoDays}>
+          <MetricSelect onChange={onMetricSelect} value={twelveHours}>
             <option value={sixHours}>6 hours</option>
             <option value={twelveHours}>12 hours</option>
             <option value={oneDay}>24 hours</option>
@@ -93,11 +93,33 @@ storiesOf('Metric', module)
         </MetricHeader>
         <MetricGraph
           data={kbMetricData}
-          duration={oneDay}
+          duration={twelveHours}
           yMax={2.0}
           yMeasurement='kb'
           yMin={1.55}
         />
       </MetricView>
+      <MetricView>
+        <MetricHeader>
+          <MetricTitle>Aggregated CPU usage</MetricTitle>
+          <MetricSelect onChange={onMetricSelect} value={oneDay}>
+            <option value={sixHours}>6 hours</option>
+            <option value={twelveHours}>12 hours</option>
+            <option value={oneDay}>24 hours</option>
+            <option value={twoDays}>Two days</option>
+          </MetricSelect>
+          <MetricSettingsButton onClick={onButtonClick}>
+            Settings
+          </MetricSettingsButton>
+          <MetricCloseButton onClick={onButtonClick} />
+        </MetricHeader>
+        <MetricGraph
+          data={percentageMetricData}
+          duration={oneDay}
+          yMax={100}
+          yMeasurement='%'
+          yMin={0}
+        />
+      </MetricView>
     </Base>
   ));