From fb525c47a210e605f72dbd3bf5720ae337fe2a16 Mon Sep 17 00:00:00 2001 From: Mcat12 Date: Sun, 30 Jul 2017 15:37:54 -0400 Subject: [PATCH] Simplify code by not using classes when they aren't needed Signed-off-by: Mcat12 --- src/components/Aside/Aside.js | 16 +- src/components/Footer/Footer.js | 34 ++-- .../ForwardDestOverTime.js | 108 ++++++----- src/components/Header/Header.js | 79 ++++---- src/components/QueriesGraph/QueriesGraph.js | 175 +++++++++--------- src/components/QueryLog/QueryLog.js | 10 +- .../QueryTypesOverTime/QueryTypesOverTime.js | 142 +++++++------- src/components/Sidebar/Sidebar.js | 101 +++++----- src/components/SummaryStats/SummaryStats.js | 16 +- src/components/TopBlocked/TopBlocked.js | 13 +- src/components/TopClients/TopClients.js | 13 +- src/components/TopDomains/TopDomains.js | 13 +- src/containers/Full/Full.js | 46 +++-- {public => src}/img/logo.svg | 0 src/views/Dashboard/Dashboard.js | 36 ++-- 15 files changed, 383 insertions(+), 419 deletions(-) rename {public => src}/img/logo.svg (100%) diff --git a/src/components/Aside/Aside.js b/src/components/Aside/Aside.js index e951e79..74883c6 100644 --- a/src/components/Aside/Aside.js +++ b/src/components/Aside/Aside.js @@ -1,11 +1,7 @@ -import React, { Component } from 'react'; +import React from 'react'; -export default class Aside extends Component { - render() { - return ( - - ) - } -} +export default () => ( + +); diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 4fba366..8b66a0e 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,20 +1,16 @@ -import React, { Component } from 'react'; +import React from 'react'; -export default class Footer extends Component { - render() { - return ( -
-
- Pi-hole Version vDev - Web Interface Version vDev -
-
- - - Donate - if you found this useful -
-
- ) - } -} +export default () => ( +
+
+ Pi-hole Version vDev + Web Interface Version vDev +
+
+ + + Donate + if you found this useful +
+
+); diff --git a/src/components/ForwardDestOverTime/ForwardDestOverTime.js b/src/components/ForwardDestOverTime/ForwardDestOverTime.js index f0de2c6..4285ae4 100644 --- a/src/components/ForwardDestOverTime/ForwardDestOverTime.js +++ b/src/components/ForwardDestOverTime/ForwardDestOverTime.js @@ -3,60 +3,60 @@ import { Line } from 'react-chartjs-2'; import { padNumber, parseObjectForGraph, api, makeCancelable } from '../../utils'; export default class ForwardDestOverTime extends Component { + state = { + data: { + labels: [], + datasets: [] + }, + options: { + tooltips: { + enabled: true, + mode: "x-axis", + callbacks: { + title: tooltipItem => { + const label = tooltipItem[0].xLabel; + const time = label.match(/(\d?\d):?(\d?\d?)/); + const h = parseInt(time[1], 10); + const m = parseInt(time[2], 10) || 0; + const from = padNumber(h)+":"+padNumber(m-5)+":00"; + const to = padNumber(h)+":"+padNumber(m+4)+":59"; + return "Forward destinations from "+from+" to "+to; + }, + label: (tooltipItems, data) => { + return data.datasets[tooltipItems.datasetIndex].label + ": " + (100.0*tooltipItems.yLabel).toFixed(1) + "%"; + } + } + }, + legend: { + display: false + }, + scales: { + xAxes: [{ + type: "time", + time: { + unit: "hour", + displayFormats: { + hour: "HH:mm" + }, + tooltipFormat: "HH:mm" + } + }], + yAxes: [{ + ticks: { + mix: 0.0, + max: 1.0, + beginAtZero: true, + callback: (value, index, values) => Math.round(value*100) + "%" + }, + stacked: true + }] + }, + maintainAspectRatio: true + } + }; + constructor(props) { super(props); - this.state = { - data: { - labels: [], - datasets: [] - }, - options: { - tooltips: { - enabled: true, - mode: "x-axis", - callbacks: { - title: (tooltipItem, data) => { - const label = tooltipItem[0].xLabel; - const time = label.match(/(\d?\d):?(\d?\d?)/); - const h = parseInt(time[1], 10); - const m = parseInt(time[2], 10) || 0; - const from = padNumber(h)+":"+padNumber(m-5)+":00"; - const to = padNumber(h)+":"+padNumber(m+4)+":59"; - return "Forward destinations from "+from+" to "+to; - }, - label: (tooltipItems, data) => { - return data.datasets[tooltipItems.datasetIndex].label + ": " + (100.0*tooltipItems.yLabel).toFixed(1) + "%"; - } - } - }, - legend: { - display: false - }, - scales: { - xAxes: [{ - type: "time", - time: { - unit: "hour", - displayFormats: { - hour: "HH:mm" - }, - tooltipFormat: "HH:mm" - } - }], - yAxes: [{ - ticks: { - mix: 0.0, - max: 1.0, - beginAtZero: true, - callback: (value, index, values) => Math.round(value*100) + "%" - }, - stacked: true - }] - }, - maintainAspectRatio: true - } - }; - this.updateGraph = this.updateGraph.bind(this); } @@ -128,9 +128,7 @@ export default class ForwardDestOverTime extends Component { data.labels = labels; data.datasets = datasets; - this.setState({ - data: data - }); + this.setState({ data }); }) .catch(() => null); } diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 20121ec..f8ad3e3 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,47 +1,42 @@ -import React, { Component } from 'react'; +import React from 'react'; -export default class Header extends Component { +//const sidebarToggle = (e) => { +// e.preventDefault(); +// document.body.classList.toggle('sidebar-hidden'); +//}; - sidebarToggle(e) { - e.preventDefault(); - document.body.classList.toggle('sidebar-hidden'); - } +const sidebarMinimize = (e) => { + e.preventDefault(); + document.body.classList.toggle('sidebar-minimized'); +}; - sidebarMinimize(e) { - e.preventDefault(); - document.body.classList.toggle('sidebar-minimized'); - } +const mobileSidebarToggle = (e) => { + e.preventDefault(); + document.body.classList.toggle('sidebar-mobile-show'); +}; - mobileSidebarToggle(e) { - e.preventDefault(); - document.body.classList.toggle('sidebar-mobile-show'); - } +//const asideToggle = (e) => { +// e.preventDefault(); +// document.body.classList.toggle('aside-menu-hidden'); +//}; - asideToggle(e) { - e.preventDefault(); - document.body.classList.toggle('aside-menu-hidden'); - } - - render() { - return ( -
- - - - Pi-hole - - -
    -
  • - -
    • -
-
-
    -
  • -
-
-
- ) - } -} +export default () => ( +
+ + + + Pi-hole + + +
    +
  • + +
    • +
+
+
    +
  • +
+
+
+); diff --git a/src/components/QueriesGraph/QueriesGraph.js b/src/components/QueriesGraph/QueriesGraph.js index 5fe8d20..163e9fe 100644 --- a/src/components/QueriesGraph/QueriesGraph.js +++ b/src/components/QueriesGraph/QueriesGraph.js @@ -3,94 +3,93 @@ import { Line } from 'react-chartjs-2'; import { padNumber, parseObjectForGraph, api, makeCancelable } from '../../utils'; export default class QueriesGraph extends Component { + state = { + data: { + labels: [], + datasets: [ + { + label: "Total Queries", + data: [], + fill: true, + backgroundColor: "rgba(220,220,220,0.5)", + borderColor: "rgba(0, 166, 90,.8)", + pointBorderColor: "rgba(0, 166, 90,.8)", + pointRadius: 1, + pointHoverRadius: 5, + pointHitRadius: 5, + cubicInterpolationMode: "monotone" + }, + { + label: "Blocked Queries", + data: [], + fill: true, + backgroundColor: "rgba(0,192,239,0.5)", + borderColor: "rgba(0,192,239,1)", + pointBorderColor: "rgba(0,192,239,1)", + pointRadius: 1, + pointHoverRadius: 5, + pointHitRadius: 5, + cubicInterpolationMode: "monotone" + } + ] + }, + options: { + tooltips: { + enabled: true, + mode: "x-axis", + callbacks: { + title: tooltipItem => { + const time = tooltipItem[0].xLabel.match(/(\d?\d):?(\d?\d?)/); + const h = parseInt(time[1], 10); + const m = parseInt(time[2], 10) || 0; + const from = padNumber(h) + ":" + padNumber(m) + ":00"; + const to = padNumber(h) + ":" + padNumber(m + 9) + ":59"; + + return "Queries from " + from + " to " + to; + }, + label: (tooltipItems, data) => { + if (tooltipItems.datasetIndex === 1) { + let percentage = 0.0; + const total = parseInt(data.datasets[0].data[tooltipItems.index], 10); + const blocked = parseInt(data.datasets[1].data[tooltipItems.index], 10); + + if (total > 0) + percentage = 100.0 * blocked / total; + + return data.datasets[tooltipItems.datasetIndex].label + ": " + tooltipItems.yLabel + + " (" + percentage.toFixed(1) + "%)"; + } + else + return data.datasets[tooltipItems.datasetIndex].label + ": " + tooltipItems.yLabel; + } + } + }, + legend: { + display: false + }, + scales: { + xAxes: [{ + type: "time", + time: { + unit: "hour", + displayFormats: { + hour: "HH:mm" + }, + tooltipFormat: "HH:mm" + } + }], + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + }, + maintainAspectRatio: false + } + }; + constructor(props) { super(props); - - this.state = { - data: { - labels: [], - datasets: [ - { - label: "Total Queries", - data: [], - fill: true, - backgroundColor: "rgba(220,220,220,0.5)", - borderColor: "rgba(0, 166, 90,.8)", - pointBorderColor: "rgba(0, 166, 90,.8)", - pointRadius: 1, - pointHoverRadius: 5, - pointHitRadius: 5, - cubicInterpolationMode: "monotone" - }, - { - label: "Blocked Queries", - data: [], - fill: true, - backgroundColor: "rgba(0,192,239,0.5)", - borderColor: "rgba(0,192,239,1)", - pointBorderColor: "rgba(0,192,239,1)", - pointRadius: 1, - pointHoverRadius: 5, - pointHitRadius: 5, - cubicInterpolationMode: "monotone" - } - ] - }, - options: { - tooltips: { - enabled: true, - mode: "x-axis", - callbacks: { - title: (tooltipItem, data) => { - const time = tooltipItem[0].xLabel.match(/(\d?\d):?(\d?\d?)/); - const h = parseInt(time[1], 10); - const m = parseInt(time[2], 10) || 0; - const from = padNumber(h) + ":" + padNumber(m) + ":00"; - const to = padNumber(h) + ":" + padNumber(m + 9) + ":59"; - - return "Queries from " + from + " to " + to; - }, - label: (tooltipItems, data) => { - if (tooltipItems.datasetIndex === 1) { - let percentage = 0.0; - const total = parseInt(data.datasets[0].data[tooltipItems.index], 10); - const blocked = parseInt(data.datasets[1].data[tooltipItems.index], 10); - - if (total > 0) - percentage = 100.0 * blocked / total; - - return data.datasets[tooltipItems.datasetIndex].label + ": " + tooltipItems.yLabel - + " (" + percentage.toFixed(1) + "%)"; - } - else - return data.datasets[tooltipItems.datasetIndex].label + ": " + tooltipItems.yLabel; - } - } - }, - legend: { - display: false - }, - scales: { - xAxes: [{ - type: "time", - time: { - unit: "hour", - displayFormats: { - hour: "HH:mm" - }, - tooltipFormat: "HH:mm" - } - }], - yAxes: [{ - ticks: { - beginAtZero: true - } - }] - }, - maintainAspectRatio: false - } - }; - this.updateGraph = this.updateGraph.bind(this); } @@ -118,9 +117,7 @@ export default class QueriesGraph extends Component { data.datasets[0].data = res.domains_over_time[1]; data.datasets[1].data = res.ads_over_time[1]; - this.setState({ - data: data - }); + this.setState({ data }); }) .catch(() => null); } diff --git a/src/components/QueryLog/QueryLog.js b/src/components/QueryLog/QueryLog.js index ee2f280..94165cd 100644 --- a/src/components/QueryLog/QueryLog.js +++ b/src/components/QueryLog/QueryLog.js @@ -5,15 +5,13 @@ import 'react-table/react-table.css'; export default class QueryLog extends Component { updateHandler = null; + state = { + history: [], + loading: true + }; constructor(props) { super(props); - - this.state = { - history: [], - loading: true - }; - this.updateTable = this.updateTable.bind(this); } diff --git a/src/components/QueryTypesOverTime/QueryTypesOverTime.js b/src/components/QueryTypesOverTime/QueryTypesOverTime.js index 422d946..46a45bc 100644 --- a/src/components/QueryTypesOverTime/QueryTypesOverTime.js +++ b/src/components/QueryTypesOverTime/QueryTypesOverTime.js @@ -3,77 +3,77 @@ import { Line } from 'react-chartjs-2'; import { padNumber, parseObjectForGraph, api, makeCancelable } from '../../utils'; export default class QueryTypesOverTime extends Component { + state = { + data: { + labels: [], + datasets: [ + { + label: "A: IPv4 queries", + pointRadius: 0, + pointHitRadius: 5, + pointHoverRadius: 5, + backgroundColor: "#20a8d8", + data: [] + }, + { + label: "AAAA: IPv6 queries", + pointRadius: 0, + pointHitRadius: 5, + pointHoverRadius: 5, + backgroundColor: "#f86c6b", + data: [] + } + ] + }, + options: { + tooltips: { + enabled: true, + mode: "x-axis", + callbacks: { + title: (tooltipItem, data) => { + const label = tooltipItem[0].xLabel; + const time = label.match(/(\d?\d):?(\d?\d?)/); + const h = parseInt(time[1], 10); + const m = parseInt(time[2], 10) || 0; + const from = padNumber(h)+":"+padNumber(m-5)+":00"; + const to = padNumber(h)+":"+padNumber(m+4)+":59"; + return "Query types from "+from+" to "+to; + }, + label: (tooltipItems, data) => { + return data.datasets[tooltipItems.datasetIndex].label + ": " + (100.0*tooltipItems.yLabel).toFixed(1) + "%"; + } + } + }, + legend: { + display: false + }, + scales: { + xAxes: [{ + type: "time", + time: { + unit: "hour", + displayFormats: { + hour: "HH:mm" + }, + tooltipFormat: "HH:mm" + } + }], + yAxes: [{ + ticks: { + mix: 0.0, + max: 1.0, + beginAtZero: true, + callback: (value, index, values) => Math.round(value*100) + "%" + }, + stacked: true + }] + }, + maintainAspectRatio: true + } + }; + constructor(props) { super(props); - this.state = { - data: { - labels: [], - datasets: [ - { - label: "A: IPv4 queries", - pointRadius: 0, - pointHitRadius: 5, - pointHoverRadius: 5, - backgroundColor: "#20a8d8", - data: [] - }, - { - label: "AAAA: IPv6 queries", - pointRadius: 0, - pointHitRadius: 5, - pointHoverRadius: 5, - backgroundColor: "#f86c6b", - data: [] - } - ] - }, - options: { - tooltips: { - enabled: true, - mode: "x-axis", - callbacks: { - title: (tooltipItem, data) => { - const label = tooltipItem[0].xLabel; - const time = label.match(/(\d?\d):?(\d?\d?)/); - const h = parseInt(time[1], 10); - const m = parseInt(time[2], 10) || 0; - const from = padNumber(h)+":"+padNumber(m-5)+":00"; - const to = padNumber(h)+":"+padNumber(m+4)+":59"; - return "Query types from "+from+" to "+to; - }, - label: (tooltipItems, data) => { - return data.datasets[tooltipItems.datasetIndex].label + ": " + (100.0*tooltipItems.yLabel).toFixed(1) + "%"; - } - } - }, - legend: { - display: false - }, - scales: { - xAxes: [{ - type: "time", - time: { - unit: "hour", - displayFormats: { - hour: "HH:mm" - }, - tooltipFormat: "HH:mm" - } - }], - yAxes: [{ - ticks: { - mix: 0.0, - max: 1.0, - beginAtZero: true, - callback: (value, index, values) => Math.round(value*100) + "%" - }, - stacked: true - }] - }, - maintainAspectRatio: true - } - }; - this.updateGraph = this.updateGraph.bind(this); } @@ -118,9 +118,7 @@ export default class QueryTypesOverTime extends Component { data.datasets[0].data = data_A; data.datasets[1].data = data_AAAA; - this.setState({ - data: data - }); + this.setState({ data }); }) .catch(() => null); } diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js index 568ed11..620e26d 100644 --- a/src/components/Sidebar/Sidebar.js +++ b/src/components/Sidebar/Sidebar.js @@ -1,57 +1,54 @@ -import React, { Component } from 'react'; +import React from 'react'; import { NavLink } from 'react-router-dom' +import logo from '../../img/logo.svg'; -export default class Sidebar extends Component { - handleClick(e) { - e.preventDefault(); - e.target.parentElement.classList.toggle('open'); - } +//const handleClick = (e) => { +// e.preventDefault(); +// e.target.parentElement.classList.toggle('open'); +//}; - activeRoute(routeName) { - return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown'; - } +//const activeRoute = (routeName) => { +// return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown'; +//} - // secondLevelActive(routeName) { - // return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse"; - // } +//const secondLevelActive = (routeName) => { +// return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse"; +//} - render() { - return ( -
- -
- ) - } -} +export default () => ( +
+ +
+); diff --git a/src/components/SummaryStats/SummaryStats.js b/src/components/SummaryStats/SummaryStats.js index d564254..97fb861 100644 --- a/src/components/SummaryStats/SummaryStats.js +++ b/src/components/SummaryStats/SummaryStats.js @@ -2,16 +2,16 @@ import React, { Component } from 'react'; import { api, makeCancelable } from '../../utils'; export default class SummaryStats extends Component { + state = { + blockedQueries: "---", + totalQueries: "---", + percentBlocked: "---", + gravityDomains: "---", + uniqueClients: "---" + }; + constructor(props) { super(props); - this.state = { - blockedQueries: "---", - totalQueries: "---", - percentBlocked: "---", - gravityDomains: "---", - uniqueClients: "---" - }; - this.updateStats = this.updateStats.bind(this); } diff --git a/src/components/TopBlocked/TopBlocked.js b/src/components/TopBlocked/TopBlocked.js index e6f1d09..26c9eba 100644 --- a/src/components/TopBlocked/TopBlocked.js +++ b/src/components/TopBlocked/TopBlocked.js @@ -2,14 +2,13 @@ import React, { Component } from 'react'; import { api, makeCancelable } from '../../utils'; export default class TopBlocked extends Component { + state = { + total_blocked: 0, + top_blocked: {} + }; + constructor(props) { super(props); - - this.state = { - total_blocked: 0, - top_blocked: {} - }; - this.updateChart = this.updateChart.bind(this); } @@ -48,7 +47,7 @@ export default class TopBlocked extends Component { Frequency { - Object.keys(this.state.top_blocked).map((item, index) => { + Object.keys(this.state.top_blocked).map(item => { const stat = this.state.top_blocked[item]; const percentage = stat / this.state.total_blocked * 100; return ( diff --git a/src/components/TopClients/TopClients.js b/src/components/TopClients/TopClients.js index 2ef375e..2d39fcf 100644 --- a/src/components/TopClients/TopClients.js +++ b/src/components/TopClients/TopClients.js @@ -2,14 +2,13 @@ import React, { Component } from 'react'; import { api, makeCancelable } from '../../utils'; export default class TopClients extends Component { + state = { + total_queries: 0, + top_clients: {} + }; + constructor(props) { super(props); - - this.state = { - total_queries: 0, - top_clients: {} - }; - this.updateChart = this.updateChart.bind(this); } @@ -48,7 +47,7 @@ export default class TopClients extends Component { Frequency { - Object.keys(this.state.top_clients).map((item, index) => { + Object.keys(this.state.top_clients).map((item) => { let hostname = ""; let ipAddr = ""; const stat = this.state.top_clients[item]; diff --git a/src/components/TopDomains/TopDomains.js b/src/components/TopDomains/TopDomains.js index 165a65f..1f9bb87 100644 --- a/src/components/TopDomains/TopDomains.js +++ b/src/components/TopDomains/TopDomains.js @@ -2,14 +2,13 @@ import React, { Component } from 'react'; import { api, makeCancelable } from '../../utils'; export default class TopDomains extends Component { + state = { + total_queries: 0, + top_domains: {} + }; + constructor(props) { super(props); - - this.state = { - total_queries: 0, - top_domains: {} - }; - this.updateChart = this.updateChart.bind(this); } @@ -48,7 +47,7 @@ export default class TopDomains extends Component { Frequency { - Object.keys(this.state.top_domains).map((item, index) => { + Object.keys(this.state.top_domains).map(item => { const stat = this.state.top_domains[item]; const percentage = stat / this.state.total_queries * 100; return ( diff --git a/src/containers/Full/Full.js b/src/containers/Full/Full.js index 9f777a0..54da28b 100644 --- a/src/containers/Full/Full.js +++ b/src/containers/Full/Full.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import { Switch, Route, Redirect } from 'react-router-dom' import Header from '../../components/Header'; import Sidebar from '../../components/Sidebar'; @@ -9,28 +9,24 @@ import Dashboard from '../../views/Dashboard'; import QueryLog from '../../components/QueryLog'; import Whitelist from '../../views/Whitelist'; -export default class Full extends Component { - render() { - return ( -
-
-
- -
- -
- - - - - - -
-
-
+); diff --git a/public/img/logo.svg b/src/img/logo.svg similarity index 100% rename from public/img/logo.svg rename to src/img/logo.svg diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js index 35e2aa1..affbe72 100644 --- a/src/views/Dashboard/Dashboard.js +++ b/src/views/Dashboard/Dashboard.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import SummaryStats from './../../components/SummaryStats'; import QueriesGraph from './../../components/QueriesGraph'; import QueryTypesOverTime from './../../components/QueryTypesOverTime'; @@ -7,22 +7,18 @@ import TopDomains from './../../components/TopDomains'; import TopBlocked from './../../components/TopBlocked'; import TopClients from './../../components/TopClients'; -export default class Dashboard extends Component { - render() { - return ( -
- - -
- - -
-
- - - -
-
- ); - } -} +export default () => ( +
+ + +
+ + +
+
+ + + +
+
+);