✨ Adds a Pi-Hole top queries widget

docs/widgets.md

@@ -28,6 +28,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Memory History](#memory-history-netdata)
   - [System Load History](#load-history-netdata)
   - [Pi Hole Stats](#pi-hole-stats)
+  - [Pi Hole Queries](#pi-hole-queries)
 - [Dynamic Widgets](#dynamic-widgets)
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -643,6 +644,30 @@ Displays the number of queries blocked by [Pi-Hole](https://pi-hole.net/).
   options:
     hostname: http://192.168.130.1
 ```
+---
+
+### Pi Hole Queries
+
+Shows top queries that were blocked and allowed by [Pi-Hole](https://pi-hole.net/).
+
+<p align="center"><img width="400" src="https://i.ibb.co/pXR0bdQ/pi-hole-queries.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`host`** | `string` |  Required | The URL to your Pi-Hole instance
+**`apiKey`** | `string` |  Required | Your Pi-Hole web password. It is **NOT** your pi-hole admin interface or server password. It can be found in `/etc/pihole/setupVars.conf`, and is a 64-character located on the line that starts with `WEBPASSWORD`
+**`count`** | `number` |  _Optional_ | The number of queries to display. Defaults to `10`
+
+##### Example 
+
+```yaml
+- type: pi-hole-top-queries
+  options:
+    hostname: https://pi-hole.local
+    apiKey: xxxxxxxxxxxxxxxxxxxxxxx
+```
 
 ---
 

src/components/Widgets/PiHoleTopQueries.vue

@@ -0,0 +1,114 @@
+<template>
+<div class="pi-hole-queries-wrapper" v-if="results">
+  <div v-for="section in results" :key="section.id" class="query-section">
+    <p class="section-title">{{ section.title }}</p>
+    <div v-for="(query, i) in section.results" :key="i" class="query-row">
+      <p class="domain">{{ query.domain }}</p>
+      <p class="count">{{ query.count }}</p>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { showNumAsThousand } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      results: null,
+    };
+  },
+  computed: {
+    /* Let user select which comic to display: random, latest or a specific number */
+    hostname() {
+      const usersChoice = this.options.hostname;
+      if (!usersChoice) this.error('You must specify the hostname for your Pi-Hole server');
+      return usersChoice || 'http://pi.hole';
+    },
+    apiKey() {
+      if (!this.options.apiKey) this.error('API Key is required, please see the docs');
+      return this.options.apiKey;
+    },
+    count() {
+      const usersChoice = this.options.count;
+      if (usersChoice && !Number.isNaN(usersChoice)) return usersChoice;
+      return 10;
+    },
+    endpoint() {
+      return `${this.hostname}/admin/api.php?topItems=${this.count}&auth=${this.apiKey}`;
+    },
+  },
+  methods: {
+    /* Make GET request to local pi-hole instance */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          if (Array.isArray(response.data)) {
+            this.error('Got success, but found no results, possible authorization error');
+          } else {
+            this.processData(response.data);
+          }
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch data', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      const topAds = [];
+      Object.keys(data.top_ads).forEach((domain) => {
+        topAds.push({ domain, count: showNumAsThousand(data.top_ads[domain]) });
+      });
+      const topQueries = [];
+      Object.keys(data.top_queries).forEach((domain) => {
+        topQueries.push({ domain, count: showNumAsThousand(data.top_queries[domain]) });
+      });
+      this.results = [
+        { id: '01', title: 'Top Ads Blocked', results: topAds },
+        { id: '02', title: 'Top Queries', results: topQueries },
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.pi-hole-queries-wrapper {
+  color: var(--widget-text-color);
+  .query-section {
+    display: inline-block;
+    width: 100%;
+    p.section-title {
+      margin: 0.75rem 0 0.25rem;
+      font-size: 1.2rem;
+      font-weight: bold;
+    }
+    .query-row {
+      display: flex;
+      justify-content: space-between;
+      margin: 0.25rem;
+      p.domain {
+        margin: 0.25rem 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      p.count {
+        margin: 0.25rem 0;
+        font-family: var(--font-monospace);
+      }
+      &:not(:last-child) {
+        border-bottom: 1px dashed var(--widget-text-color);
+      }
+    }
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -130,6 +130,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <PiHoleTopQueries
+        v-else-if="widgetType === 'pi-hole-top-queries'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <PublicHolidays
         v-else-if="widgetType === 'public-holidays'"
         :options="widgetOptions"
@@ -224,6 +231,7 @@ import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
 import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
 import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
 import PiHoleStats from '@/components/Widgets/PiHoleStats.vue';
+import PiHoleTopQueries from '@/components/Widgets/PiHoleTopQueries.vue';
 import PublicHolidays from '@/components/Widgets/PublicHolidays.vue';
 import PublicIp from '@/components/Widgets/PublicIp.vue';
 import RssFeed from '@/components/Widgets/RssFeed.vue';
@@ -259,6 +267,7 @@ export default {
     NdLoadHistory,
     NdRamHistory,
     PiHoleStats,
+    PiHoleTopQueries,
     PublicHolidays,
     PublicIp,
     RssFeed,