Fix variable handling for dashboards

CHANGELOG.md

@@ -21,6 +21,8 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 
 ### Fixed
 
+- [#94](https://github.com/kobsio/kobs/pull/94): Fix variable handling for dashboards.
+
 ### Changed
 
 - [#82](https://github.com/kobsio/kobs/pull/82): Improve error handling for our API.

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

@@ -116,7 +116,8 @@ const Dashboard: React.FunctionComponent<IDashboardProps> = ({
                   tmpVariables[i].value =
                     json && json.includes(tmpVariables[i].value) ? tmpVariables[i].value : json ? json[0] : '';
                 } else {
-                  throw new Error(`No values for variable ${tmpVariables[i].label || tmpVariables[i].name}`);
+                  tmpVariables[i].values = [''];
+                  tmpVariables[i].value = '';
                 }
               } else {
                 if (json.error) {

plugins/prometheus/src/components/panel/Sparkline.tsx

@@ -48,7 +48,11 @@ export const Spakrline: React.FunctionComponent<ISpakrlineProps> = ({
         const json = await response.json();
 
         if (response.status >= 200 && response.status < 300) {
-          return convertMetrics(json).series;
+          if (json) {
+            return convertMetrics(json).series;
+          } else {
+            return [];
+          }
         } else {
           if (json.error) {
             throw new Error(json.error);
@@ -65,11 +69,16 @@ export const Spakrline: React.FunctionComponent<ISpakrlineProps> = ({
 
   // Determine the label which should be shown above the chart. This is the last value in first metric of the returned
   // data or a value from the user specified mappings.
-  let label = '';
-  if (data && options.mappings && Object.keys(options.mappings).length > 0) {
-    label = getMappingValue(data[0].data[data[0].data.length - 1].y, options.mappings);
-  } else if (data) {
-    label = `${data[0].data[data[0].data.length - 1].y} ${options.unit ? options.unit : ''}`;
+  let label = 'N/A';
+  if (data && data.length > 0) {
+    if (options.mappings && Object.keys(options.mappings).length > 0) {
+      label = getMappingValue(data[0].data[data[0].data.length - 1].y, options.mappings);
+    } else {
+      label =
+        data[0].data[data[0].data.length - 1].y === null
+          ? 'N/A'
+          : `${data[0].data[data[0].data.length - 1].y} ${options.unit ? options.unit : ''}`;
+    }
   }
 
   return (

plugins/prometheus/src/components/preview/Sparkline.tsx

@@ -41,7 +41,11 @@ export const Spakrline: React.FunctionComponent<ISpakrlineProps> = ({
         const json = await response.json();
 
         if (response.status >= 200 && response.status < 300) {
-          return convertMetrics(json).series;
+          if (json) {
+            return convertMetrics(json).series;
+          } else {
+            return [];
+          }
         } else {
           if (json.error) {
             throw new Error(json.error);
@@ -58,11 +62,16 @@ export const Spakrline: React.FunctionComponent<ISpakrlineProps> = ({
 
   // Determine the label which should be shown above the chart. This is the last value in first metric of the returned
   // data or a value from the user specified mappings.
-  let label = '';
-  if (data && options.mappings && Object.keys(options.mappings).length > 0) {
-    label = getMappingValue(data[0].data[data[0].data.length - 1].y, options.mappings);
-  } else if (data) {
-    label = `${data[0].data[data[0].data.length - 1].y} ${options.unit ? options.unit : ''}`;
+  let label = 'N/A';
+  if (data && data.length > 0) {
+    if (options.mappings && Object.keys(options.mappings).length > 0) {
+      label = getMappingValue(data[0].data[data[0].data.length - 1].y, options.mappings);
+    } else {
+      label =
+        data[0].data[data[0].data.length - 1].y === null
+          ? 'N/A'
+          : `${data[0].data[data[0].data.length - 1].y} ${options.unit ? options.unit : ''}`;
+    }
   }
 
   return (

plugins/resources/src/components/panel/details/overview/Container.tsx

@@ -15,7 +15,7 @@ const getContainerStatus = (state: V1ContainerState): string => {
   if (state.running) {
     return `Started at ${state.running.startedAt}`;
   } else if (state.waiting) {
-    return `Waiting: ${state.waiting.message}`;
+    return state.waiting.message ? `Waiting: ${state.waiting.message}` : 'Waiting';
   } else if (state.terminated) {
     return `Terminated with ${state.terminated.exitCode} at ${state.terminated.finishedAt}: ${state.terminated.reason}`;
   }