Fix chopped off data for twelve hours

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

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