From 251eb63ec198564fdd79833f420ca64a4d44b47f Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Tue, 9 Nov 2021 11:23:10 -0800
Subject: [PATCH] CEC-607 Parameterize Grafana (#103)

* CEC-607 Parameterize Grafana

* Update urls
---
 .env.dev                                      | 10 ++++
 .env.local                                    | 10 ++++
 .env.prd                                      | 10 ++++
 .env.stg                                      | 10 ++++
 .env.template                                 |  7 ++-
 Dockerfile                                    |  2 +-
 .../App/__snapshots__/App.test.js.snap        | 44 +++++++-------
 src/components/Datascope/Battery/index.jsx    | 15 ++---
 src/components/Datascope/Home/index.jsx       |  5 +-
 src/components/Layouts/SideMenu.jsx           | 12 ++--
 .../__snapshots__/SideMenu.test.jsx.snap      |  2 +-
 src/services/grafanaAPI.js                    | 36 +++++++----
 src/services/grafanaCharts.js                 | 50 ++++++++++++++++
 src/services/grafanaCharts.test.js            | 59 +++++++++++++++++++
 14 files changed, 219 insertions(+), 53 deletions(-)
 create mode 100644 src/services/grafanaCharts.js
 create mode 100644 src/services/grafanaCharts.test.js

diff --git a/.env.dev b/.env.dev
index 0c3250f..6a3aade 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,3 +1,13 @@
 REACT_APP_AUTH_SERVICE_URL=https://gw-dev.fiskerdps.com/compute_auth
 REACT_APP_UPLOAD_SERVICE_URL=https://gw-dev.fiskerdps.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://dev-ota-admin.fiskerdps.com
+REACT_APP_GRAFANA_BASE_URL=https://dev-grafana.fiskerdps.com
+REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_API=https://dev-grafana.fiskerdps.com/api/datasources/proxy/2
diff --git a/.env.local b/.env.local
index 6760ebe..af4cb29 100644
--- a/.env.local
+++ b/.env.local
@@ -1,3 +1,13 @@
 REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
 REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
+REACT_APP_GRAFANA_BASE_URL=https://dev-grafana.fiskerdps.com
+REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_API=https://dev-grafana.fiskerdps.com/api/datasources/proxy/2
diff --git a/.env.prd b/.env.prd
index 9ec77df..e4ef37d 100644
--- a/.env.prd
+++ b/.env.prd
@@ -1,3 +1,13 @@
 REACT_APP_AUTH_SERVICE_URL=https://gw.fiskerdps.com/compute_auth
 REACT_APP_UPLOAD_SERVICE_URL=https://gw.fiskerdps.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.fiskerdps.com
+REACT_APP_GRAFANA_BASE_URL=https://grafana.fiskerdps.com
+REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_API=https://grafana.fiskerdps.com/api/datasources/proxy/1
diff --git a/.env.stg b/.env.stg
index f400e02..c944ca0 100644
--- a/.env.stg
+++ b/.env.stg
@@ -1,3 +1,13 @@
 REACT_APP_AUTH_SERVICE_URL=https://gw-stg.fiskerdps.com/compute_auth
 REACT_APP_UPLOAD_SERVICE_URL=https://gw-stg.fiskerdps.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.fiskerdps.com
+REACT_APP_GRAFANA_BASE_URL=https://stg-grafana.fiskerdps.com
+REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_API=https://stg-grafana.fiskerdps.com/api/datasources/proxy/1
diff --git a/.env.template b/.env.template
index e3ba686..b024aa7 100644
--- a/.env.template
+++ b/.env.template
@@ -1,3 +1,4 @@
-REACT_APP_AUTH_SERVICE_URL = http://localhost/compute_auth
-REACT_APP_UPLOAD_SERVICE_URL = http://localhost/ota_update
-REACT_APP_AUTH_CALLBACK_URL = http://localhost:3000
\ No newline at end of file
+REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
+REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
+REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
+REACT_APP_GRAFANA_API=https://grafana.fiskerdps.com/api/datasources/proxy/2
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 36a2580..b03d55f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,6 +1,6 @@
 FROM node:14-alpine as builder
 
-ARG ENVIRONMENT
+ARG ENVIRONMENT=local
 
 COPY package*.json ./
 RUN npm install
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 7f14267..d4edb4d 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -240,7 +240,7 @@ exports[`App Route / authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-873 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -688,7 +688,7 @@ exports[`App Route /datascope authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1062 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -776,7 +776,7 @@ exports[`App Route /datascope authenticated 1`] = `
                   >
                     <iframe
                       frameborder="0"
-                      src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
+                      src="https://dev-grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
                       style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                       title="Signals Time Series"
                     />
@@ -788,7 +788,7 @@ exports[`App Route /datascope authenticated 1`] = `
               aria-disabled="false"
               aria-label="create"
               class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiTypography-colorPrimary"
-              href="https://grafana.fiskerdps.com"
+              href="https://dev-grafana.fiskerdps.com"
               rel="noopener"
               role="button"
               style="margin-top: 10px;"
@@ -1154,7 +1154,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1125 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -1311,7 +1311,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                     >
                       <iframe
                         frameborder="0"
-                        src="https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=1F15K3R45N1234567&var-Signal=BMS_CellVolt1&panelId=2"
+                        src="https://dev-grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=1F15K3R45N1234567&var-Signal=BMS_CellVolt1&panelId=2"
                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                         title="Cell Voltage"
                       />
@@ -1331,7 +1331,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                     >
                       <iframe
                         frameborder="0"
-                        src="https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=1F15K3R45N1234567&var-Signal=BMS_CellT1&panelId=2"
+                        src="https://dev-grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=1F15K3R45N1234567&var-Signal=BMS_CellT1&panelId=2"
                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                         title="Cell Temperature"
                       />
@@ -1349,7 +1349,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                     >
                       <iframe
                         frameborder="0"
-                        src="https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=4"
+                        src="https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=4"
                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                         title="Battery Temperature Time Series"
                       />
@@ -1372,7 +1372,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                     >
                       <iframe
                         frameborder="0"
-                        src="https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=6"
+                        src="https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=6"
                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                         title="Battery Capacity Time Series"
                       />
@@ -1390,7 +1390,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                     >
                       <iframe
                         frameborder="0"
-                        src="https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&panelId=12"
+                        src="https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&panelId=12"
                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                         title="Battery Percent Time Series"
                       />
@@ -1408,7 +1408,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                     >
                       <iframe
                         frameborder="0"
-                        src="https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=2"
+                        src="https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=2"
                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                         title="12V Battery Percentage Time Series"
                       />
@@ -1426,7 +1426,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                     >
                       <iframe
                         frameborder="0"
-                        src="https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=9"
+                        src="https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=1F15K3R45N1234567&refresh=1m&panelId=9"
                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%;"
                         title="12V Battery Voltage Time Series"
                       />
@@ -1739,7 +1739,7 @@ exports[`App Route /home authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-936 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -2223,7 +2223,7 @@ exports[`App Route /package-create authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1385 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -3741,7 +3741,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1318 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -4563,7 +4563,7 @@ exports[`App Route /package-status authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1255 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -5115,7 +5115,7 @@ exports[`App Route /packages authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1192 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -5891,7 +5891,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-999 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -6262,7 +6262,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1452 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -6848,7 +6848,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1590 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -8071,7 +8071,7 @@ exports[`App Route /vehicle-status/vin/carupdateid authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1653 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
@@ -8927,7 +8927,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1519 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://grafana.fiskerdps.com"
+                  href="https://dev-grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
                   tabindex="0"
diff --git a/src/components/Datascope/Battery/index.jsx b/src/components/Datascope/Battery/index.jsx
index f752e90..fbc0c34 100644
--- a/src/components/Datascope/Battery/index.jsx
+++ b/src/components/Datascope/Battery/index.jsx
@@ -12,6 +12,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import ResponsiveIFrame from "../../Controls/ResponsiveIFrame";
+import { grafanaCharts } from "../../../services/grafanaCharts";
 
 const Battery = () => {
   const classes = useStyles();
@@ -82,7 +83,7 @@ const Battery = () => {
               Cell Voltage {cellNum}
               <ResponsiveIFrame
                 classes={classes}
-                src={`https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2`}
+                src={grafanaCharts.CELLVOLTAGE_CHART({ vin, cellNum })}
                 title="Cell Voltage"
               />
             </Paper>
@@ -93,7 +94,7 @@ const Battery = () => {
               Cell Temperature {cellNum}
               <ResponsiveIFrame
                 classes={classes}
-                src={`https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2`}
+                src={grafanaCharts.CELLTEMP_CHART({ vin, cellNum })}
                 title="Cell Temperature"
               />
             </Paper>
@@ -103,7 +104,7 @@ const Battery = () => {
             <Paper className={classes.grafanaContainer}>
               <ResponsiveIFrame
                 classes={classes}
-                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4`}
+                src={grafanaCharts.BATTERYTEMP_CHART({ vin })}
                 title="Battery Temperature Time Series"
               />
             </Paper>
@@ -115,7 +116,7 @@ const Battery = () => {
             <Paper className={classes.grafanaContainer}>
               <ResponsiveIFrame
                 classes={classes}
-                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6`}
+                src={grafanaCharts.BATTERYCAP_CHART({ vin })}
                 title="Battery Capacity Time Series"
               />
             </Paper>
@@ -125,7 +126,7 @@ const Battery = () => {
             <Paper className={classes.grafanaContainer}>
               <ResponsiveIFrame
                 classes={classes}
-                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12`}
+                src={grafanaCharts.BATTERYPERCENT_CHART({ vin })}
                 title="Battery Percent Time Series"
               />
             </Paper>
@@ -135,7 +136,7 @@ const Battery = () => {
             <Paper className={classes.grafanaContainer}>
               <ResponsiveIFrame
                 classes={classes}
-                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2`}
+                src={grafanaCharts.BATTERY12VPERCENT_CHART({ vin })}
                 title="12V Battery Percentage Time Series"
               />
             </Paper>
@@ -145,7 +146,7 @@ const Battery = () => {
             <Paper className={classes.grafanaContainer}>
               <ResponsiveIFrame
                 classes={classes}
-                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9`}
+                src={grafanaCharts.BATTERY12VVOLTAGE_CHART({ vin })}
                 title="12V Battery Voltage Time Series"
               />
             </Paper>
diff --git a/src/components/Datascope/Home/index.jsx b/src/components/Datascope/Home/index.jsx
index 12e5fc2..d92b1fb 100644
--- a/src/components/Datascope/Home/index.jsx
+++ b/src/components/Datascope/Home/index.jsx
@@ -7,6 +7,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import ResponsiveIFrame from "../../Controls/ResponsiveIFrame";
 import { logger } from "../../../services/monitoring";
+import { grafanaCharts } from "../../../services/grafanaCharts";
 
 const Datascope = () => {
   const classes = useStyles();
@@ -72,7 +73,7 @@ const Datascope = () => {
           <Paper className={classes.grafanaContainer}>
             <ResponsiveIFrame
               classes={classes}
-              src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
+              src={grafanaCharts.HOME_CHART}
               title="Signals Time Series"
             />
           </Paper>
@@ -83,7 +84,7 @@ const Datascope = () => {
         aria-label="create"
         color="primary"
         component={Link}
-        href="https://grafana.fiskerdps.com"
+        href={grafanaCharts.BASE}
         rel="noopener"
         target="_blank"
       >
diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx
index f5b28f1..d77ded1 100644
--- a/src/components/Layouts/SideMenu.jsx
+++ b/src/components/Layouts/SideMenu.jsx
@@ -1,14 +1,16 @@
 import React from "react";
 import { List } from "@material-ui/core";
-import ListItemLink from "../ListItemLink";
-import ListItemExternalLink from "../ListItemExternalLink";
-import { useUserContext } from "../Contexts/UserContext";
-import { Roles, hasRole } from "../../utils/roles";
 import HomeIcon from "@material-ui/icons/Home";
 import CommuteIcon from "@material-ui/icons/Commute";
 import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
 import AssessmentIcon from "@material-ui/icons/Assessment";
 
+import ListItemLink from "../ListItemLink";
+import ListItemExternalLink from "../ListItemExternalLink";
+import { useUserContext } from "../Contexts/UserContext";
+import { Roles, hasRole } from "../../utils/roles";
+import { grafanaCharts } from "../../services/grafanaCharts";
+
 const menuData = [
   {
     label: "Home",
@@ -40,7 +42,7 @@ const menuData = [
       },
       {
         label: "Diagnostics",
-        url: "https://grafana.fiskerdps.com",
+        url: grafanaCharts.BASE,
       },
     ],
   },
diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
index ba0608e..9feb0ad 100644
--- a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
+++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
@@ -183,7 +183,7 @@ exports[`SideMenu Authenticated 1`] = `
           <a
             aria-disabled="false"
             class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-54 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-            href="https://grafana.fiskerdps.com"
+            href="https://dev-grafana.fiskerdps.com"
             rel="noopener"
             role="button"
             tabindex="0"
diff --git a/src/services/grafanaAPI.js b/src/services/grafanaAPI.js
index 6b4b456..bddafe3 100644
--- a/src/services/grafanaAPI.js
+++ b/src/services/grafanaAPI.js
@@ -1,24 +1,36 @@
-import { fetchRespHandler } from "../utils/http"
+import { fetchRespHandler } from "../utils/http";
 import { logger } from "./monitoring";
 
-const API_ENDPOINT = "https://grafana.fiskerdps.com/api/datasources/proxy/2"
+const API_ENDPOINT = process.env.REACT_APP_GRAFANA_API;
 
 const grafanaAPI = {
-    getCarsCount: async () => fetch(`${API_ENDPOINT}/?query=SELECT%20countDistinct(VIN)%20as%20count%0AFROM%20default.vehicle_signal%0AWHERE%20Timestamp%20%3C%3D%20toDateTime64(${Date.now() / Math.pow(10, 3)}%2C%203)%20AND%20Timestamp%20%3E%3D%20toDateTime64(${Date.now() / Math.pow(10, 3) - 60 * 60 * 24}%2C%203)%20FORMAT%20JSON`, {
+  getCarsCount: async () =>
+    fetch(
+      `${API_ENDPOINT}/?query=SELECT%20countDistinct(VIN)%20as%20count%0AFROM%20default.vehicle_signal%0AWHERE%20Timestamp%20%3C%3D%20toDateTime64(${
+        Date.now() / Math.pow(10, 3)
+      }%2C%203)%20AND%20Timestamp%20%3E%3D%20toDateTime64(${
+        Date.now() / Math.pow(10, 3) - 60 * 60 * 24
+      }%2C%203)%20FORMAT%20JSON`,
+      {
         method: "GET",
         headers: Object.assign({ "Content-Type": "application/json" }),
-    })
-        .then(fetchRespHandler)
-        .then(result => result.data[0].count)
-        .catch(error => logger.warn(error.stack)),
+      }
+    )
+      .then(fetchRespHandler)
+      .then((result) => result.data[0].count)
+      .catch((error) => logger.warn(error.stack)),
 
-    getSignalsCount: async () => fetch(`${API_ENDPOINT}/?query=SELECT%20count()%20as%20count%0AFROM%20default.vehicle_signal%20FORMAT%20JSON`, {
+  getSignalsCount: async () =>
+    fetch(
+      `${API_ENDPOINT}/?query=SELECT%20count()%20as%20count%0AFROM%20default.vehicle_signal%20FORMAT%20JSON`,
+      {
         method: "GET",
         headers: Object.assign({ "Content-Type": "application/json" }),
-    })
-        .then(fetchRespHandler)
-        .then(result => result.data[0].count)
-        .catch(error => logger.warn(error.stack)),
+      }
+    )
+      .then(fetchRespHandler)
+      .then((result) => result.data[0].count)
+      .catch((error) => logger.warn(error.stack)),
 };
 
 export default grafanaAPI;
diff --git a/src/services/grafanaCharts.js b/src/services/grafanaCharts.js
new file mode 100644
index 0000000..9ed8d34
--- /dev/null
+++ b/src/services/grafanaCharts.js
@@ -0,0 +1,50 @@
+const GRAFANA_BASE_URL = process.env.REACT_APP_GRAFANA_BASE_URL;
+
+const template = (props, value) => {
+  const keys = Object.keys(props);
+
+  return keys.reduce(
+    (current, key) => current.replace(`\${${key}}`, props[key]),
+    value
+  );
+};
+
+export const grafanaCharts = {
+  BASE: GRAFANA_BASE_URL,
+  HOME_CHART: `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_HOME_CHART_PATH}`,
+  CELLVOLTAGE_CHART: (props) =>
+    template(
+      props,
+      `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_VOLTAGE_CHART_PATH}`
+    ),
+  CELLTEMP_CHART: (props) =>
+    template(
+      props,
+      `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_CELLTEMP_CHART_PATH}`
+    ),
+  BATTERYTEMP_CHART: (props) =>
+    template(
+      props,
+      `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_BATTERYTEMP_CHART}`
+    ),
+  BATTERYCAP_CHART: (props) =>
+    template(
+      props,
+      `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_BATTERYCAP_CHART}`
+    ),
+  BATTERYPERCENT_CHART: (props) =>
+    template(
+      props,
+      `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_BATTERYPERCENT_CHART}`
+    ),
+  BATTERY12VPERCENT_CHART: (props) =>
+    template(
+      props,
+      `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART}`
+    ),
+  BATTERY12VVOLTAGE_CHART: (props) =>
+    template(
+      props,
+      `${GRAFANA_BASE_URL}${process.env.REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART}`
+    ),
+};
diff --git a/src/services/grafanaCharts.test.js b/src/services/grafanaCharts.test.js
new file mode 100644
index 0000000..72077fd
--- /dev/null
+++ b/src/services/grafanaCharts.test.js
@@ -0,0 +1,59 @@
+import { grafanaCharts } from "./grafanaCharts";
+
+describe("Grafana Charts URLs", () => {
+  it("Base", () => {
+    expect(grafanaCharts.BASE).toEqual("https://dev-grafana.fiskerdps.com");
+  });
+
+  it("Home", () => {
+    expect(grafanaCharts.HOME_CHART).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
+    );
+  });
+
+  it("Cell Voltage", () => {
+    expect(
+      grafanaCharts.CELLVOLTAGE_CHART({ vin: "VIN", cellNum: "CELLNUM" })
+    ).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=VIN&var-Signal=BMS_CellVoltCELLNUM&panelId=2"
+    );
+  });
+
+  it("Cell Temperature", () => {
+    expect(
+      grafanaCharts.CELLTEMP_CHART({ vin: "VIN", cellNum: "CELLNUM" })
+    ).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=VIN&var-Signal=BMS_CellTCELLNUM&panelId=2"
+    );
+  });
+
+  it("Battery Temperature Time Series", () => {
+    expect(grafanaCharts.BATTERYTEMP_CHART({ vin: "VIN" })).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=VIN&refresh=1m&panelId=4"
+    );
+  });
+
+  it("Battery Capacity Time Series", () => {
+    expect(grafanaCharts.BATTERYCAP_CHART({ vin: "VIN" })).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=VIN&refresh=1m&panelId=6"
+    );
+  });
+
+  it("Battery Percent Time Series", () => {
+    expect(grafanaCharts.BATTERYPERCENT_CHART({ vin: "VIN" })).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=VIN&panelId=12"
+    );
+  });
+
+  it("12V Battery Percentage Time Series", () => {
+    expect(grafanaCharts.BATTERY12VPERCENT_CHART({ vin: "VIN" })).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=VIN&refresh=1m&panelId=2"
+    );
+  });
+
+  it("12V Battery Voltage Time Series", () => {
+    expect(grafanaCharts.BATTERY12VVOLTAGE_CHART({ vin: "VIN" })).toEqual(
+      "https://dev-grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=VIN&refresh=1m&panelId=9"
+    );
+  });
+});