diff --git a/.gitignore b/.gitignore index 8207f92..a8bf7b0 100755 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .DS_Store TODO **/node_modules -**/build \ No newline at end of file +**/build +.idea/** \ No newline at end of file diff --git a/client/src/components/podRamChart.tsx b/client/src/components/podRamChart.tsx index 18b23cc..f9fe6f7 100644 --- a/client/src/components/podRamChart.tsx +++ b/client/src/components/podRamChart.tsx @@ -1,23 +1,29 @@ import _ from 'lodash'; import React from 'react'; -import Chart from './chart'; import LoadingChart from './loadingChart'; import {parseRam, TO_GB} from '../utils/unitHelpers'; import {Pod, Metrics} from '../utils/types'; +import PrometheusGraph from '../views/prometheusgraph'; export default function RamChart({items, metrics}: {items?: Pod[], metrics?: _.Dictionary}) { const totals = getPodRamTotals(items, metrics); - const decimals = totals && totals.used > 10 ? 1 : 2; + + const query = { + queryString: `sum(kube_pod_container_resource_requests{unit="byte"}/${TO_GB})`, + title: 'Pod Memory Usage', + yAxisMin: 0, + yAxisUnit: 'GiB', + }; + return (
{totals ? ( - ) : ( diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx index 4de2353..3d4539d 100644 --- a/client/src/views/prometheusgraph.tsx +++ b/client/src/views/prometheusgraph.tsx @@ -9,6 +9,8 @@ const BASE_HTTP_URL = 'http://localhost:4654/prom'; type Props = { queryString: string; title: string; + yAxisMin?: number; + yAxisUnit?: string; } type State = { @@ -64,6 +66,32 @@ export default class PrometheusGraph extends Base { }); } + getYDomain = () => { + if (this.props.yAxisUnit) { + // Taken from https://github.com/uber/react-vis/issues/609#issuecomment-330066354 + const {yMin, yMax} = this.state.data.reduce((acc, row) => ({ + yMax: Math.max(acc.yMax, row.y), + yMin: Math.min(acc.yMin, row.y), + }), {yMin: Infinity, yMax: -Infinity}); + return (typeof (this.props.yAxisMin) === 'number' ? [this.props.yAxisMin, yMax] : [yMin, yMax]); + } + return [0, 1]; + }; + + getYTickFormat = () => { + if (this.props.yAxisUnit) { + return (d: number) => `${d} ${this.props.yAxisUnit}`; + } + return (d: number) => `${(d * 100).toFixed(0)}%`; + } + + getItemsFormat = () => { + if (this.props.yAxisUnit) { + return (d: { y: number; }[]) => [{title: this.props.yAxisUnit, value: d[0].y}]; + } + return (d: { y: number; }[]) => [{title: 'Percent', value: `${(d[0].y * 100).toFixed(2)}%`}]; + } + render() { if (!this.state || !this.state.data) { return
@@ -79,7 +107,7 @@ export default class PrometheusGraph extends Base { width={150} height={150} xType="time" - yDomain={[0, 1]} + yDomain={this.getYDomain()} onMouseLeave={this.onMouseLeave}> { titleFormat={ d => ({title: 'Time', value: new Date(d[0].x * 1000).toLocaleTimeString()}) } - itemsFormat={ - d => [ - {title: 'Percent', value: `${(d[0].y * 100).toFixed(2)}%`}, - ] - } + itemsFormat={this.getItemsFormat()} className={'test-class-name'} /> { tickTotal={3} />