[dashboards] Add special variables for dashboards

CHANGELOG.md

@@ -29,6 +29,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#217](https://github.com/kobsio/kobs/pull/217): [azure] Use resource groups to get a list of container instances.
 - [#225](https://github.com/kobsio/kobs/pull/225): [core] :warning: _Breaking change:_ :warning: Change options handling accross all plugins and re-add `time` property.
 - [#229](https://github.com/kobsio/kobs/pull/229): [opsgenie] Allow users to overwrite the selected time range in a dashboard for an Opsgenie panel via the new `interval` property.
+- [#230](https://github.com/kobsio/kobs/pull/230): [dashboards] Add special variables `__timeStart` and `__timeEnd` for dashboards.
 
 ## [v0.7.0](https://github.com/kobsio/kobs/releases/tag/v0.7.0) (2021-11-19)
 

docs/resources/dashboards.md

@@ -45,6 +45,14 @@ Variables can be used to select between different values in the dashboard. To us
 | hide | boolean | Hide the variable in the UI. | No |
 | plugin | [Variable Plugin](#variable-plugin) | The plugin, which should be used to get the values for the variable. | Yes |
 
+!!! note
+    Dashboards are also supporting some special variables, which always can be used and must not be defined by a users. These variables are:
+
+    - `__timeStart`: The start time of the selected time range in seconds.
+    - `__timeEnd`: The end time of the selected time range in seconds.
+
+    These variables can then be used via `{{ .__timeStart }}` and `{{ .__timeEnd }}` in the dashboard.
+
 ### Variable Plugin
 
 | Field | Type | Description | Required |

plugins/dashboards/src/components/dashboards/Dashboard.tsx

@@ -108,7 +108,7 @@ const Dashboard: React.FunctionComponent<IDashboardProps> = ({
               const response = await fetch(`/api/plugins/prometheus/variable/${tmpVariables[i].plugin.name}`, {
                 body: JSON.stringify({
                   label: tmpVariables[i].plugin.options.label,
-                  query: interpolate(tmpVariables[i].plugin.options.query, tmpVariables),
+                  query: interpolate(tmpVariables[i].plugin.options.query, tmpVariables, times),
                   timeEnd: times.timeEnd,
                   timeStart: times.timeStart,
                   type: tmpVariables[i].plugin.options.type,
@@ -152,7 +152,7 @@ const Dashboard: React.FunctionComponent<IDashboardProps> = ({
   // We do not use the dashboard.rows array directly to render the dashboard. Instead we are replacing all the variables
   // in the dashboard first with users selected values. For that we have to convert the array to a string first so that
   // we can replace the variables in the string and then we have to convert it back to an array,
-  const rows: IRow[] = data ? JSON.parse(interpolate(JSON.stringify(dashboard.rows), data)) : dashboard.rows;
+  const rows: IRow[] = JSON.parse(interpolate(JSON.stringify(dashboard.rows), data ? data : [], times));
 
   if (isError) {
     return (

plugins/dashboards/src/utils/dashboard.ts

@@ -1,6 +1,6 @@
 import { gridSpans } from '@patternfly/react-core';
 
-import { IDashboard, IPlaceholders, IPluginDefaults, IReference } from '@kobsio/plugin-core';
+import { IDashboard, IPlaceholders, IPluginDefaults, IPluginTimes, IReference } from '@kobsio/plugin-core';
 import { IDashboardsOptions, IVariableValues } from './interfaces';
 
 // toGridSpans is used to convert the provided col and row span value to the corresponding gridSpans value, so that it
@@ -46,6 +46,7 @@ interface IVariables {
 export const interpolate = (
   str: string,
   variables: IVariableValues[],
+  times: IPluginTimes,
   interpolator: string[] = ['{%', '%}'],
 ): string => {
   const vars: IVariables = {};
@@ -54,6 +55,9 @@ export const interpolate = (
     vars[variable.name] = variable.value;
   }
 
+  vars['__timeStart'] = `${times.timeStart}`;
+  vars['__timeEnd'] = `${times.timeEnd}`;
+
   return str
     .split(interpolator[0])
     .map((s1, i) => {