[FEATURE grafana] Support Grafana

CONTRIBUTING.md

@@ -44,6 +44,11 @@ PAGERBEAUTY_HTTP_PASSWORD=basic_password
 PAGERBEAUTY_HTTP_ACCESS_TOKEN=803651A9-E3B7-4153-9566-6E54F5F0CEAB
 ```
 
+#### Grafana
+There's a test Grafana with pre-provisioned PagerBeauty board available
+at <http://localhost:3000/d/RUn-WZumz/pagerbeauty>. Feel free to use for testing.  
+Login and pasword are `admin`.
+
 ### Additional configuration
 
 Use `.env` to override the [default settings](https://github.com/sergiitk/pagerbeauty#configuration),
@@ -83,6 +88,11 @@ PAGERBEAUTY_PD_API_MOCK_PORT=9090
 PAGERBEAUTY_PD_API_URL=http://mock-pagerduty-api:9090
 ```
 
+You can configure grafana local port with:
+```sh
+PAGERBEAUTY_GRAFANA_PORT=3001
+```
+
 **Using real PagerDuty API**
 
 ```sh

README.md

@@ -115,11 +115,32 @@ PAGERBEAUTY_PD_SCHEDULES=SCHEDL1,SCHEDL2
 
 ![Add PagerDuty to Datadog dashboard](https://user-images.githubusercontent.com/672669/46853316-ad0a7900-cdcb-11e8-80b3-ddedb7c8f2eb.gif)
 
-1. Open the schedules list in deployed app. Make sure the app is running behind HTTPS
-2. Find the schedule you want to embed
+1. Open the schedules list in PagerBeauty. Make sure the app is running behind HTTPS
+2. Find the schedule you want to embed, copy its URL
 3. Open your Datadog dashboard, click "Edit Board".
 4. Drag "IFrame" widget to the board
-5. Copy PagerBeauty URL of your schedule and paste to IFrame URL on Datadog board
+5. Paste copied PagerBeauty schedule URL to IFrame URL on Datadog board
+6. Resize and save!
+
+## Add to Grafana dashboard
+
+![Add PagerDuty to Grafana dashboard](https://user-images.githubusercontent.com/672669/52322269-75d95c80-29a6-11e9-9432-e3b420c13de1.gif)
+
+
+1. Install [AJAX](https://grafana.com/plugins/ryantxu-ajax-panel) plugin:  
+   `grafana-cli plugins install ryantxu-ajax-panel`
+2. Restart Grafana Server
+3. Open the schedules list in PagerBeauty
+4. Find the schedule you want to embed, open it, copy its URL
+5. Open your Grafana dashboard, click "Add Panel"
+6. Select `AJAX` panel
+7. Click `Panel title` -> `Edit`
+8. On `Request` tab, fill out:  
+   `URL`: paste copied PagerBeauty schedule URL  
+   `Method`: `iframe`  
+   `Parameters`: `{ theme: "grafana" }`
+9. On `General` tab, set your panel title and check `Transparent`
+10. Close panel edit, resize and save!
 
 ## FAQ
 ### How it works?

app.json

@@ -19,7 +19,10 @@
     "datadog-dashboard",
     "embeds",
     "pager",
-    "oncalls-widget"
+    "oncalls-widget",
+    "grafana",
+    "grafana-dashboard",
+    "grafana-pagerduty"
   ],
   "env": {
     "PAGERBEAUTY_PD_API_KEY": {

ava.config.js

@@ -5,6 +5,7 @@ const avaConfig = {
     'test/**/*.mjs',
     '!test/helpers',
     '!test/mocks',
+    '!test/grafana',
   ],
   require: ['esm'],
   babel: false,

docker-compose.yaml

@@ -113,6 +113,20 @@ services:
       - .:/usr/src/app/
       - node_modules:/usr/src/app/node_modules
 
+  # Grafana
+  # admin/admin
+  grafana:
+    image: grafana/grafana
+    ports:
+      - ${PAGERBEAUTY_GRAFANA_PORT:-3000}:${PAGERBEAUTY_PD_API_MOCK_PORT:-3000}
+    environment:
+      GF_INSTALL_PLUGINS: ryantxu-ajax-panel
+    volumes:
+      - ./test/grafana/provisioning/dashboards:/etc/grafana/provisioning/dashboards
+      - ./test/grafana/dashboards:/var/lib/grafana/dashboards
+    depends_on:
+      - pagerbeauty-dev
+
 # Use shared node_modules
 volumes:
   node_modules:

package.json

@@ -128,6 +128,9 @@
     "datadog-dashboard",
     "embeds",
     "pager",
-    "oncalls-widget"
+    "oncalls-widget",
+    "grafana",
+    "grafana-dashboard",
+    "grafana-pagerduty"
   ]
 }

src/assets/stylesheets/application.scss

@@ -4,6 +4,7 @@ $red: #eb364b;
 $green: #25c151;
 $textBlack: #454545;
 $textWhite: white;
+$textGrey: #d8d9da;
 $borderDark: #343434;
 $scheduleRowDefaultPadding: 1vw;
 
@@ -20,6 +21,7 @@ $statusSuccess: #94E185;
 // Styles
 body {
   font-family: 'Roboto Mono', monospace;
+  margin: 8px;
 }
 
 .status_indicator {
@@ -173,3 +175,9 @@ a {
 }
 .schedule.state_not_found { @include schedule_state($yellow); }
 .schedule.state_active_incident { @include schedule_state($red); }
+
+.theme-grafana {
+  a { color: $textGrey; }
+  &.filled_row { color: $textGrey; }
+  .schedule { margin: 0; width: 98%; }
+}

src/controllers/SchedulesController.mjs

@@ -24,6 +24,10 @@ export class SchedulesController {
 
   async show(ctx, scheduleId, format = 'html') {
     const oncall = this.db.get('oncalls').onCallRepo.get(scheduleId);
+    let theme = false;
+    if (ctx.request.query.theme === 'grafana') {
+      theme = 'grafana';
+    }
 
     switch (format) {
       case 'json':
@@ -36,7 +40,7 @@ export class SchedulesController {
         break;
       case 'html':
         // HTML will handle it for now
-        await ctx.render('oncalls/show.html', { oncall });
+        await ctx.render('oncalls/show.html', { oncall, theme });
         break;
       default:
         break;

src/views/oncalls/show.html.j2

@@ -4,6 +4,6 @@
 {% block content %}
 {# {{ oncall | dump }} #}
 
-<div class="on_call_root" data-id="{{ oncall.schedule.id }}"></div>
+<div class="on_call_root {% if theme %}theme-{{theme}}{% endif %}" data-id="{{ oncall.schedule.id }}"></div>
 
 {% endblock %}

test/acceptance/oncall-misc.mjs

@@ -0,0 +1,38 @@
+// ------- Imports -------------------------------------------------------------
+
+import test from 'ava';
+
+// ------- Internal imports ----------------------------------------------------
+
+import {
+  AcceptanceHelpers,
+  PageTest,
+  BASE_URL,
+} from '../helpers/AcceptanceHelpers';
+
+// ------- Init ----------------------------------------------------------------
+
+const { withNewPage } = AcceptanceHelpers;
+
+test.before(AcceptanceHelpers.openBrowser);
+test.after.always(AcceptanceHelpers.closeBrowser);
+
+// ------- Tests ---------------------------------------------------------------
+
+test('Misc: Grafana theme is applied', withNewPage(), async (t, page) => {
+  await page.goto(`${BASE_URL}/v1/schedules/PJ1P5JQ.html?theme=grafana`);
+
+  await page.waitForSelector('.on_call_root');
+  const pageTest = new PageTest(page);
+  await pageTest.expectClass('.on_call_root', 'theme-grafana');
+});
+
+test('Misc: Other themes is not', withNewPage(), async (t, page) => {
+  await page.goto(`${BASE_URL}/v1/schedules/PJ1P5JQ.html?theme=foo`);
+
+  await page.waitForSelector('.on_call_root');
+  const pageTest = new PageTest(page);
+  await pageTest.expectNoClass('.on_call_root', 'theme-foo');
+});
+
+// ------- End -----------------------------------------------------------------

test/grafana/dashboards/pagerbeauty-board.json

@@ -0,0 +1,113 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "links": [],
+  "panels": [
+    {
+      "gridPos": {
+        "h": 10,
+        "w": 10,
+        "x": 0,
+        "y": 0
+      },
+      "header_js": "{}",
+      "id": 6,
+      "links": [],
+      "method": "iframe",
+      "mode": "html",
+      "params_js": "",
+      "responseType": "text",
+      "showTime": false,
+      "showTimeFormat": "LTS",
+      "showTimePrefix": null,
+      "showTimeValue": "request",
+      "skipSameURL": true,
+      "templateResponse": true,
+      "title": "PagerBeauty Schedule",
+      "transparent": true,
+      "type": "ryantxu-ajax-panel",
+      "url": "http://localhost:8080/v1/schedules/P2RFGIP.html?theme=grafana",
+      "withCredentials": false
+    },
+    {
+      "description": "",
+      "gridPos": {
+        "h": 10,
+        "w": 10,
+        "x": 0,
+        "y": 10
+      },
+      "header_js": "{}",
+      "id": 4,
+      "links": [],
+      "method": "iframe",
+      "mode": "html",
+      "params_js": "",
+      "responseType": "text",
+      "showTime": true,
+      "showTimeFormat": "LTS",
+      "showTimePrefix": null,
+      "showTimeValue": "request",
+      "skipSameURL": true,
+      "templateResponse": true,
+      "title": "Test Schedule",
+      "transparent": true,
+      "type": "ryantxu-ajax-panel",
+      "url": "http://localhost:8080/v1/schedules/PJ1P5JQ.html?theme=grafana",
+      "withCredentials": false
+    }
+  ],
+  "schemaVersion": 16,
+  "style": "dark",
+  "tags": [],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-6h",
+    "to": "now"
+  },
+  "timepicker": {
+    "refresh_intervals": [
+      "5s",
+      "10s",
+      "30s",
+      "1m",
+      "5m",
+      "15m",
+      "30m",
+      "1h",
+      "2h",
+      "1d"
+    ],
+    "time_options": [
+      "5m",
+      "15m",
+      "1h",
+      "6h",
+      "12h",
+      "24h",
+      "2d",
+      "7d",
+      "30d"
+    ]
+  },
+  "timezone": "",
+  "title": "PagerBeauty",
+  "uid": "RUn-WZumz",
+  "version": 7
+}

test/grafana/provisioning/dashboards/all.yaml

@@ -0,0 +1,11 @@
+apiVersion: 1
+
+providers:
+- name: 'default'
+  orgId: 1
+  folder: ''
+  type: file
+  disableDeletion: false
+  updateIntervalSeconds: 10 #how often Grafana will scan for changed dashboards
+  options:
+    path: /var/lib/grafana/dashboards