diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c2a2c924..d739f6468 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan ### Changed - [#106](https://github.com/kobsio/kobs/pull/106): :warning: *Breaking change:* :warning: Change Prometheus sparkline chart to allow the usage of labels. +- [#107](https://github.com/kobsio/kobs/pull/107): Add new option for Prometheus chart legend and change formatting of values. ## [v0.5.0](https://github.com/kobsio/kobs/releases/tag/v0.5.0) (2021-08-03) diff --git a/docs/plugins/prometheus.md b/docs/plugins/prometheus.md index 78f30ddc7..13ebc0787 100644 --- a/docs/plugins/prometheus.md +++ b/docs/plugins/prometheus.md @@ -15,7 +15,7 @@ The following options can be used for a panel with the Prometheus plugin: | type | string | The type of the chart. Must be `sparkline`, `line`, `area` or `table`. | Yes | | unit | string | An optional unit for the y axis of the chart. | No | | stacked | boolean | When this is `true` all time series in the chart will be stacked. | No | -| legend | string | The type which should be used for the legend. Currently only `table` is supported as legend. If the value is not set, no legend will be shown. | No | +| legend | string | The type which should be used for the legend. Currently only `table` and `table-large` is supported as legend. If the value is not set, no legend will be shown. | No | | mappings | map | Specify value mappings for your data. **Note:** The value must be provided as string (e.g. `"1": "Green"`). | No | | queries | [[]Query](#query) | A list of queries, which are used to get the data for the chart. | Yes | | columns | [[]Column](#column) | A list of columns, which **must** be provided, when the type of the chart is `table` | No | diff --git a/plugins/prometheus/src/components/panel/ChartLegend.tsx b/plugins/prometheus/src/components/panel/ChartLegend.tsx index 41a685955..5ce20771e 100644 --- a/plugins/prometheus/src/components/panel/ChartLegend.tsx +++ b/plugins/prometheus/src/components/panel/ChartLegend.tsx @@ -5,6 +5,7 @@ import React from 'react'; import { Serie } from '@nivo/line'; import { getColor } from '../../utils/colors'; +import { roundNumber } from '../../utils/helpers'; interface IChartLegendProps { series: Serie[]; @@ -55,16 +56,19 @@ const ChartLegend: React.FunctionComponent = ({ - {metric.min} {unit} + {roundNumber(metric.min)} {unit} - {metric.max} {unit} + {roundNumber(metric.max)} {unit} - {metric.avg} {unit} + {roundNumber(metric.avg)} {unit} - {metric.data[metric.data.length - 1].y} {unit} + {metric.data[metric.data.length - 1].y + ? roundNumber(metric.data[metric.data.length - 1].y as number) + : metric.data[metric.data.length - 1].y}{' '} + {unit} ))} diff --git a/plugins/prometheus/src/components/panel/ChartWrapper.tsx b/plugins/prometheus/src/components/panel/ChartWrapper.tsx index 1fcead6c5..9c1ece960 100644 --- a/plugins/prometheus/src/components/panel/ChartWrapper.tsx +++ b/plugins/prometheus/src/components/panel/ChartWrapper.tsx @@ -103,7 +103,16 @@ export const ChartWrapper: React.FunctionComponent = ({ ) : data ? ( -
+
= ({
+ ) : options.legend === 'table-large' ? ( +
+ +
) : null} ) : null} diff --git a/plugins/prometheus/src/components/panel/Sparkline.tsx b/plugins/prometheus/src/components/panel/Sparkline.tsx index e19885c00..6427880ce 100644 --- a/plugins/prometheus/src/components/panel/Sparkline.tsx +++ b/plugins/prometheus/src/components/panel/Sparkline.tsx @@ -5,7 +5,7 @@ import { ResponsiveLineCanvas } from '@nivo/line'; import { IPanelOptions, ISeries } from '../../utils/interfaces'; import { IPluginTimes, PluginCard } from '@kobsio/plugin-core'; -import { convertMetrics, getMappingValue } from '../../utils/helpers'; +import { convertMetrics, getMappingValue, roundNumber } from '../../utils/helpers'; import Actions from './Actions'; import { COLOR_SCALE } from '../../utils/colors'; @@ -81,7 +81,9 @@ export const Spakrline: React.FunctionComponent = ({ label = data.series[0].data[data.series[0].data.length - 1].y === null ? 'N/A' - : `${data.series[0].data[data.series[0].data.length - 1].y} ${options.unit ? options.unit : ''}`; + : `${roundNumber(data.series[0].data[data.series[0].data.length - 1].y as number)} ${ + options.unit ? options.unit : '' + }`; } } diff --git a/plugins/prometheus/src/components/preview/Sparkline.tsx b/plugins/prometheus/src/components/preview/Sparkline.tsx index 2ee41c746..db3c05094 100644 --- a/plugins/prometheus/src/components/preview/Sparkline.tsx +++ b/plugins/prometheus/src/components/preview/Sparkline.tsx @@ -4,7 +4,7 @@ import { ResponsiveLineCanvas } from '@nivo/line'; import { useQuery } from 'react-query'; import { IPanelOptions, ISeries } from '../../utils/interfaces'; -import { convertMetrics, getMappingValue } from '../../utils/helpers'; +import { convertMetrics, getMappingValue, roundNumber } from '../../utils/helpers'; import { COLOR_SCALE } from '../../utils/colors'; import { IPluginTimes } from '@kobsio/plugin-core'; @@ -74,7 +74,9 @@ export const Spakrline: React.FunctionComponent = ({ label = data.series[0].data[data.series[0].data.length - 1].y === null ? 'N/A' - : `${data.series[0].data[data.series[0].data.length - 1].y} ${options.unit ? options.unit : ''}`; + : `${roundNumber(data.series[0].data[data.series[0].data.length - 1].y as number)} ${ + options.unit ? options.unit : '' + }`; } } diff --git a/plugins/prometheus/src/utils/helpers.ts b/plugins/prometheus/src/utils/helpers.ts index 76f2253a0..f6aabb0f8 100644 --- a/plugins/prometheus/src/utils/helpers.ts +++ b/plugins/prometheus/src/utils/helpers.ts @@ -74,3 +74,9 @@ export const getMappingValue = (value: DatumValue | null | undefined, mappings: return mappings[value.toString()]; }; + +// roundNumber rounds the given number to a specify number of decimals. The default number of decimals is 4 but can be +// overwritten by the user. +export const roundNumber = (value: number, dec = 4): number => { + return Math.round(value * Math.pow(10, dec)) / Math.pow(10, dec); +};