mirror of https://github.com/Lissy93/dashy.git
✨ Adds a Pi-Hole stats widget
This commit is contained in:
Alicia Sykes
parent
fad1e5ff50
commit
dece5c58aa
|
|
@ -27,6 +27,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
|||
- [CPU History](#cpu-history-netdata)
|
||||
- [Memory History](#memory-history-netdata)
|
||||
- [System Load History](#load-history-netdata)
|
||||
- [Pi Hole Stats](#pi-hole-stats)
|
||||
- [Dynamic Widgets](#dynamic-widgets)
|
||||
- [Iframe Widget](#iframe-widget)
|
||||
- [HTML Embed Widget](#html-embedded-widget)
|
||||
|
|
@ -622,6 +623,29 @@ Pull recent load usage in 1, 5 and 15 minute intervals, from NetData.
|
|||
|
||||
---
|
||||
|
||||
### Pi Hole Stats
|
||||
|
||||
Displays the number of queries blocked by [Pi-Hole](https://pi-hole.net/).
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/zftCLJN/pi-hole-stats.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`host`** | `string` | Required | The URL to your Pi-Hole instance
|
||||
**`hideStatus`** / **`hideChart`** / **`hideInfo`** | `boolean` | _Optional_ | Optionally hide any of the three parts of the widget
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: pi-hole-stats
|
||||
options:
|
||||
hostname: http://192.168.130.1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dynamic Widgets
|
||||
|
||||
### Iframe Widget
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div class="pi-hole-stats-wrapper">
|
||||
<!-- Current Status -->
|
||||
<div v-if="status" class="status">
|
||||
<span class="status-lbl">Status:</span>
|
||||
<span :class="`status-val ${getStatusColor(status)}`">{{ status | capitalize }}</span>
|
||||
</div>
|
||||
<!-- Block Pie Chart -->
|
||||
<p :id="chartId" class="block-pie"></p>
|
||||
<!-- More Data -->
|
||||
<div v-if="dataTable" class="data-table">
|
||||
<div class="data-table-row" v-for="(row, inx) in dataTable" :key="inx" >
|
||||
<p class="row-label">{{ row.lbl }}</p>
|
||||
<p class="row-value">{{ row.val }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import ChartingMixin from '@/mixins/ChartingMixin';
|
||||
import { capitalize } from '@/utils/MiscHelpers';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin, ChartingMixin],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
status: null,
|
||||
dataTable: null,
|
||||
blockPercentChart: 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';
|
||||
},
|
||||
endpoint() {
|
||||
return `${this.hostname}/admin/api.php`;
|
||||
},
|
||||
hideStatus() { return this.options.hideStatus; },
|
||||
hideChart() { return this.options.hideChart; },
|
||||
hideInfo() { return this.options.hideInfo; },
|
||||
},
|
||||
filters: {
|
||||
capitalize(str) {
|
||||
return capitalize(str);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/* Make GET request to local pi-hole instance */
|
||||
fetchData() {
|
||||
axios.get(this.endpoint)
|
||||
.then((response) => {
|
||||
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) {
|
||||
if (!this.hideStatus) {
|
||||
this.status = data.status;
|
||||
}
|
||||
if (!this.hideInfo) {
|
||||
this.dataTable = [
|
||||
{ lbl: 'Active Clients', val: `${data.unique_clients}/${data.clients_ever_seen}` },
|
||||
{ lbl: 'Ads Blocked Today', val: data.ads_blocked_today },
|
||||
{ lbl: 'DNS Queries Today', val: data.dns_queries_today },
|
||||
{ lbl: 'Total DNS Queries', val: data.dns_queries_all_types },
|
||||
{ lbl: 'Domains on Block List', val: data.domains_being_blocked },
|
||||
];
|
||||
}
|
||||
if (!this.hideChart) {
|
||||
const blockedToday = Math.round(data.ads_percentage_today);
|
||||
this.generateBlockPie(blockedToday);
|
||||
}
|
||||
},
|
||||
getStatusColor(status) {
|
||||
if (status === 'enabled') return 'green';
|
||||
if (status === 'disabled') return 'red';
|
||||
else return 'blue';
|
||||
},
|
||||
/* Generate pie chart showing the proportion of queries blocked */
|
||||
generateBlockPie(blockedToday) {
|
||||
const chartData = {
|
||||
labels: ['Blocked', 'Allowed'],
|
||||
datasets: [{
|
||||
values: [blockedToday, 100 - blockedToday],
|
||||
}],
|
||||
};
|
||||
return new this.Chart(`#${this.chartId}`, {
|
||||
title: 'Block Percent',
|
||||
data: chartData,
|
||||
type: 'donut',
|
||||
height: 250,
|
||||
strokeWidth: 18,
|
||||
colors: ['#f80363', '#20e253'],
|
||||
tooltipOptions: {
|
||||
formatTooltipY: d => `${Math.round(d)}%`,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pi-hole-stats-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.status {
|
||||
margin: 0.5rem 0;
|
||||
.status-lbl {
|
||||
color: var(--widget-text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-val {
|
||||
margin-left: 0.5rem;
|
||||
font-family: var(--font-monospace);
|
||||
&.green { color: var(--success); }
|
||||
&.red { color: var(--danger); }
|
||||
&.blue { color: var(--info); }
|
||||
}
|
||||
}
|
||||
img.block-percent-chart {
|
||||
margin: 0.5rem auto;
|
||||
max-width: 8rem;
|
||||
width: 100%;
|
||||
}
|
||||
.block-pie {
|
||||
margin: 0;
|
||||
}
|
||||
.data-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.data-table-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
p {
|
||||
margin: 0.2rem 0;
|
||||
color: var(--widget-text-color);
|
||||
font-size: 0.9rem;
|
||||
&.row-value {
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -123,6 +123,13 @@
|
|||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<PiHoleStats
|
||||
v-else-if="widgetType === 'pi-hole-stats'"
|
||||
:options="widgetOptions"
|
||||
@loading="setLoaderState"
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<PublicHolidays
|
||||
v-else-if="widgetType === 'public-holidays'"
|
||||
:options="widgetOptions"
|
||||
|
|
@ -216,6 +223,7 @@ import Jokes from '@/components/Widgets/Jokes.vue';
|
|||
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 PublicHolidays from '@/components/Widgets/PublicHolidays.vue';
|
||||
import PublicIp from '@/components/Widgets/PublicIp.vue';
|
||||
import RssFeed from '@/components/Widgets/RssFeed.vue';
|
||||
|
|
@ -250,6 +258,7 @@ export default {
|
|||
NdCpuHistory,
|
||||
NdLoadHistory,
|
||||
NdRamHistory,
|
||||
PiHoleStats,
|
||||
PublicHolidays,
|
||||
PublicIp,
|
||||
RssFeed,
|
||||
|
|
|
|||
Loading…
Reference in New Issue