From 94f57d0e64f00d42e5747c0f94c2a0d291ea54e7 Mon Sep 17 00:00:00 2001
From: ricoberger <mail@ricoberger.de>
Date: Tue, 14 Dec 2021 19:01:52 +0100
Subject: [PATCH] [dashboards] Add special variables for dashboards

Dashboards are now supporting two special variables "__timeStart" and
"__timeEnd", which can be used within a dashboard via
"{% .__timeStart %}" and "{% .__timeEnd %}".
---
 CHANGELOG.md                                              | 1 +
 docs/resources/dashboards.md                              | 8 ++++++++
 .../dashboards/src/components/dashboards/Dashboard.tsx    | 4 ++--
 plugins/dashboards/src/utils/dashboard.ts                 | 6 +++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9341b7433..eb06ba709 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/docs/resources/dashboards.md b/docs/resources/dashboards.md
index e576e7b96..f7a13cef4 100644
--- a/docs/resources/dashboards.md
+++ b/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 |
diff --git a/plugins/dashboards/src/components/dashboards/Dashboard.tsx b/plugins/dashboards/src/components/dashboards/Dashboard.tsx
index 9d3bfd5d3..5bc183119 100644
--- a/plugins/dashboards/src/components/dashboards/Dashboard.tsx
+++ b/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 (
diff --git a/plugins/dashboards/src/utils/dashboard.ts b/plugins/dashboards/src/utils/dashboard.ts
index 1cb6a1360..0e71436fc 100644
--- a/plugins/dashboards/src/utils/dashboard.ts
+++ b/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) => {