kobsio · ricoberger · Aug 9, 2021 · Aug 9, 2021
diff --git 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
@@ -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<string, string> | 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
@@ -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<IChartLegendProps> = ({
               </Button>
             </Td>
             <Td style={{ fontSize: '12px', padding: 0 }} dataLabel="Min">
-              {metric.min} {unit}
+              {roundNumber(metric.min)} {unit}
             </Td>
             <Td style={{ fontSize: '12px', padding: 0 }} dataLabel="Max">
-              {metric.max} {unit}
+              {roundNumber(metric.max)} {unit}
             </Td>
             <Td style={{ fontSize: '12px', padding: 0 }} dataLabel="Avg">
-              {metric.avg} {unit}
+              {roundNumber(metric.avg)} {unit}
             </Td>
             <Td style={{ fontSize: '12px', padding: 0 }} dataLabel="Current">
-              {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}
             </Td>
           </Tr>
         ))}

diff --git 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<IChartWrapperProps> = ({
         </Alert>
       ) : data ? (
         <React.Fragment>
-          <div style={{ height: options.legend === 'table' ? 'calc(100% - 80px)' : '100%' }}>
+          <div
+            style={{
+              height:
+                options.legend === 'table'
+                  ? 'calc(100% - 80px)'
+                  : options.legend === 'table-large'
+                  ? 'calc(100% - 140px)'
+                  : '100%',
+            }}
+          >
             <Chart
               times={times}
               options={options}
@@ -115,6 +124,10 @@ export const ChartWrapper: React.FunctionComponent<IChartWrapperProps> = ({
             <div className="pf-u-mt-md" style={{ height: '60px', overflow: 'scroll' }}>
               <ChartLegend series={data.series} unit={options.unit || ''} selected={selectedSeries} select={select} />
             </div>
+          ) : options.legend === 'table-large' ? (
+            <div className="pf-u-mt-md" style={{ height: '120px', overflow: 'scroll' }}>
+              <ChartLegend series={data.series} unit={options.unit || ''} selected={selectedSeries} select={select} />
+            </div>
           ) : null}
         </React.Fragment>
       ) : null}

diff --git 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<ISpakrlineProps> = ({
       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
@@ -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<ISpakrlineProps> = ({
       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
@@ -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);
+};