exchange chart in nodes with linechart, remove title, fix crosshair, make it smaller to fit

client/src/components/nodeCpuChart.tsx

@@ -4,14 +4,23 @@ import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {parseCpu, TO_ONE_CPU} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeCpuChart({items, metrics}: {items?: Node[], metrics?: _.Dictionary<Metrics>}) {
     const totals = getNodeCpuTotals(items, metrics);
+    const query = {
+        queryString: 'instance:node_cpu:ratio',
+        title: 'Node CPU Usage',
+    };
 
     return (
         <div className='charts_item'>
             {totals ? (
-                <Chart used={totals.used} available={totals.available} />
+                // <Chart used={totals.used} available={totals.available} />
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
+                />
             ) : (
                 <LoadingChart />
             )}

client/src/components/nodeRamChart.tsx

@@ -4,6 +4,7 @@ import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {parseRam, parseUnitsOfRam} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeRamChart({items, metrics}: {items?: Node[], metrics?: _.Dictionary<Metrics>}) {
     const totals = getNodeRamTotals(items, metrics);
@@ -11,16 +12,25 @@ export default function NodeRamChart({items, metrics}: {items?: Node[], metrics?
     const used = parseUnitsOfRam(totals && totals.used, available && available.unit);
     const decimals = used && used.value > 10 ? 1 : 2;
 
+    const query = {
+        queryString: 'instance:node_memory_utilisation:ratio',
+        title: 'Node Memory Usage',
+    };
+
     return (
         <div className='charts_item'>
             {totals ? (
-                <Chart
-                    decimals={decimals}
-                    used={used && used.value}
-                    usedSuffix={used && used.unit}
-                    available={available && available.value}
-                    availableSuffix={available && available.unit}
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
                 />
+                // <Chart
+                //     decimals={decimals}
+                //     used={used && used.value}
+                //     usedSuffix={used && used.unit}
+                //     available={available && available.value}
+                //     availableSuffix={available && available.unit}
+                // />
             ) : (
                 <LoadingChart />
             )}

client/src/views/prometheusgraph.tsx

@@ -67,17 +67,17 @@ export default class PrometheusGraph extends Base<Props, State> {
     render() {
         if (!this.state || !this.state.data) {
             return <div>
-                <span style={{fontWeight: 'bold'}}>{this.props.title}</span>
+                {/* <span style={{fontWeight: 'bold'}}>{this.props.title}</span> */}
                 <div>Pending...</div>
             </div>;
         }
         return this.state.data
             && <div>
-                <div style={{fontWeight: 'bold'}}>{this.props.title}</div>
+                {/* <div style={{fontWeight: 'bold'}}>{this.props.title}</div> */}
                 <XYPlot
                     yPadding={60}
-                    width={600}
-                    height={600}
+                    width={150}
+                    height={150}
                     xType="time"
                     onMouseLeave={this.onMouseLeave}>
                     <AreaSeries
@@ -93,21 +93,27 @@ export default class PrometheusGraph extends Base<Props, State> {
                     />
                     <Crosshair
                         values={this.state.crosshairValues}
+                        itemsFormat={
+                            d => [
+                                {title: 'Time', value: new Date(d[0].x * 1000).toLocaleTimeString()},
+                                {title: 'Percent', value: `${(d[0].y * 100).toFixed(2)}%`},
+                            ]
+                        }
                         className={'test-class-name'}
                     />
                     <XAxis
                         tickFormat={function tickFormat(d) {
                             const date = new Date(d * 1000);
-                            return date.toLocaleTimeString();
+                            return date.toLocaleTimeString().slice(0, -6);
                         }}
-                        tickLabelAngle={30}
-                        tickTotal={5}
+                        tickPadding={5}
+                        tickTotal={3}
                     />
                     <YAxis
                         tickFormat={function tickFormet(d) {
                             return `${(d * 100).toFixed(2)}%`;
                         }}
-                        tickLabelAngle={30}
+                        tickLabelAngle={0}
                         tickPadding={-5}
                     />
                 </XYPlot>