Remove metrics and and settings and correct measurements

frontend/src/components/metric-charts/index.js

@@ -37,24 +37,28 @@ const MetricCharts = ({
     type,
     uuid
   }, index) => {
-    const onSelectChange = (evt) =>
+    const handleSelectChange = (evt) => {};
-      onDurationChange(Number(evt.target.value), uuid);
+      // onDurationChange(Number(evt.target.value), uuid);
+    const handleSettingsClick = (evt) => {};
+    const handleRemoveMetric = (evt) => {};
 
     return (
       <MetricView key={type.id}>
         <MetricHeader>
           <MetricTitle>
-            <FormattedMessage id={`metrics.${type.id}.title`} />
+            {type.name}
+            {/*<FormattedMessage id={`metrics.${type.id}.title`} />*/}
           </MetricTitle>
-          <MetricSelect onChange={onSelectChange} value={String(duration)}>
+          <MetricSelect onChange={handleSelectChange} value={String(duration)}>
             {optionList}
           </MetricSelect>
-          <MetricSettingsButton onClick={onSettingsClick}>
+          <MetricSettingsButton onClick={handleSettingsClick}>
             <FormattedMessage id={'metrics.metric.settings-label'} />
           </MetricSettingsButton>
-          <MetricCloseButton onClick={onRemoveMetric} />
+          <MetricCloseButton onClick={handleRemoveMetric} />
         </MetricHeader>
         <MetricGraph
+          axes
           data={data}
           duration={duration}
           yMax={type.max}

frontend/src/containers/metrics/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import { toggleMonitorView } from '@state/actions';
-import AddMetrics from '@root/components/metric-charts/add-metrics';
+// import AddMetrics from '@root/components/metric-charts/add-metrics';
-import Button from '@ui/components/button';
+// import Button from '@ui/components/button';
-import Column from '@ui/components/column';
+// import Column from '@ui/components/column';
 import MetricCharts from '@root/components/metric-charts';
-import Monitors from './monitors';
+// import Monitors from './monitors';
 import PropTypes from '@root/prop-types';
-import Row from '@ui/components/row';
+// import Row from '@ui/components/row';
 
 const Metrics = ({
   addMetric,
@@ -24,6 +24,15 @@ const Metrics = ({
   const onRemoveMetric = (ev) => null;
 
   return (
+    <MetricCharts
+      datasets={datasets}
+      onDurationChange={metricDurationChange}
+      onRemoveMetric={onRemoveMetric}
+      onSettingsClick={onMonitorsClick}
+    />
+  );
+
+  /*return (
     <div>
       <Row reverse>
         <Column>
@@ -43,7 +52,7 @@ const Metrics = ({
         onAddMetric={addMetric}
       />
     </div>
-  );
+  );*/
 };
 
 Metrics.propTypes = {

frontend/src/index.js

@@ -70,16 +70,26 @@ const getDataset = (twoHourLongDatasets, uuid) => {
     return twoHourLongDatasets.process_cpu_seconds_total;
   }
   if(isDisk(uuid)) {
-    return twoHourLongDatasets.process_heap_bytes;
+    return twoHourLongDatasets.process_heap_bytes.map((sample) =>
+      [
+        sample[0],
+        sample[1]/1024/1024
+      ]
+    );
   }
   if(isMemory(uuid)) {
-    return twoHourLongDatasets.node_memory_heap_used_bytes;
+    return twoHourLongDatasets.node_memory_heap_used_bytes.map((sample) =>
+      [
+        sample[0],
+        sample[1]/1024/1024
+      ]
+    );
   }
 };
 
 const datasets = MockState.metrics.data.datasets.map((dataset, index) => {
 
-  const data = isCrazy(dataset.uuid) ?
+  const data = isCrazy(dataset.uuid) && dataset.uuid !== 'crazy-cpu' ?
     getDataset(leakTwoHourLongDatasets, dataset.uuid) :
     getDataset(normalTwoHourLongDatasets, dataset.uuid);
 

frontend/src/mock-state-testing.json

@@ -75,7 +75,7 @@
         "id": "cpu-wait-time",
         "min": 0,
         "max": 100,
-        "measurement": "%"
+        "measurement": "bytes"
       }, {
         "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
         "name": "Zfs used",
@@ -96,14 +96,14 @@
         "id": "load-average",
         "min": 0,
         "max": 20,
-        "measurement": "kb"
+        "measurement": " Mb"
       }, {
         "uuid": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
         "name": "Memory",
         "id": "mem-agg-usage",
         "min": 0,
         "max": 100,
-        "measurement": "%"
+        "measurement": " Mb"
       }, {
         "uuid": "dca08514-72e5-46ce-ad93-e68b3b0914d4",
         "name": "Memory limit",

frontend/src/state/selectors.js

@@ -232,10 +232,16 @@ const metricByInterval = (data = [], {
 };
 
 // TMP - get min and max for total data - START
-const getMinMax = (data) => {
+const getMinMax = (data, measurement) => {
+  if(measurement === '%') {
+    return {
+      min: 0,
+      max: 100
+    };
+  }
   const values = data.map((d) => Number(d[1]));
-  const min = statistics.min(values);
+  const min = Math.floor(statistics.min(values));
-  const max = statistics.max(values);
+  const max = Math.ceil(statistics.max(values));
 
   return {
     min,
@@ -272,12 +278,13 @@ const datasets = (
 ) =>
   serviceOrInstanceMetrics.map((soim) => {
     const dataset = find(metricsData.datasets, ['uuid', soim.dataset]);
+    const type = find(metricsData.types, ['uuid', soim.type]);
     const dataSubset = getDataSubset(dataset.data, metricsUI, metricOptions);
-    const minMax = getMinMax(dataset.data);
+    const minMax = getMinMax(dataset.data, type.measurement);
     return ({
       ...dataset,
       data: metricByInterval(dataSubset, minMax, metricOptions),
-      type: find(metricsData.types, ['uuid', soim.type]),
+      type: type,
       ...metricsUI[soim.dataset]
     });
   });