Skip to content

Commit

Permalink
Update Styling and switch to using a templating system for displaying…
Browse files Browse the repository at this point in the history 
… content
  • Loading branch information
@alexandermarston
alexandermarston committed Aug 9, 2019
1 parent a42e18c commit 25ae2e2
Show file tree
Hide file tree
Showing 11 changed files with 340 additions and 263 deletions.
10 changes: 10 additions & 0 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@ FROM php:7.0-apache

MAINTAINER Alex Marston <alexander.marston@gmail.com>

# Install Git
RUN apt-get update && apt-get install -y git unzip

# Install Composer to handle dependencies
RUN curl -sS https://getcomposer.org/installer | php && mv composer.phar /usr/local/bin/composer

# Copy application source code to html directory
COPY ./app/ /var/www/html/

# Install dependencies
RUN composer install

RUN mkdir -p /var/lib/vnstat
8 changes: 6 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,19 @@ This dashboard is an adaptation of vnstat-php-frontend by bjd using Bootstrap wr
``$ docker push amarston/vnstat-dashboard:latest``

### How to start it
``$ docker run --name vnstat-dashboard -p 80:80 -d amarston/vnstat-dashboard:latest``
``$ docker run --name vnstat-dashboard -p 80:80 -v /usr/bin/vnstat:/usr/bin/vnstat -v /var/lib/vnstat:/var/lib/vnstat -d amarston/vnstat-dashboard:latest``

### How to stop it
``$ docker stop vnstat-dashboard``

## Run it with Locally

### How to run it
``$ cp -rp app/ /var/www/html/vnstat/``
```
$ cp -rp app/ /var/www/html/vnstat/
$ cd /var/www/html/vnstat/
$ composer install
```

## Licensing
Copyright (C) 2019 Alexander Marston (alexander.marston@gmail.com)
Expand Down
3 changes: 3 additions & 0 deletions app/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,6 @@ body {
.nav-tabs {
margin-bottom: 10px;
}
.navbar {
margin-bottom: 25px;
}
5 changes: 5 additions & 0 deletions app/composer.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"require": {
"smarty/smarty": "~3.1"
}
}
303 changes: 42 additions & 261 deletions app/index.php
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,22 @@
<?php
/*
* Copyright (C) 2019 Alexander Marston (alexander.marston@gmail.com)
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

require('includes/vnstat.php'); // The vnstat information parser
require('includes/config.php'); // Include all the configuration information
// Require includes
require __DIR__ . '/vendor/autoload.php';
require __DIR__ . '/includes/vnstat.php';
require __DIR__ . '/includes/config.php';

function printOptions()
{
global $interface_list;
// Initiate Smarty
$smarty = new Smarty();

$i = 0;
foreach ($interface_list as $interface) {
$i++;
if ($i == count($interface_list)) {
echo "<a href=\"?i=" . rawurlencode($interface) . "\">" . rawurlencode($interface) . "</a>";
} else {
echo "<a href=\"?i=" . rawurlencode($interface) . "\">" . rawurlencode($interface) . ", </a>";
}
}
}

function printTableStats($path, $type, $interface, $label)
{
echo '<table class="table table-bordered">
<thead>
<tr>
<th>' . $label . '</th>
<th>Received</th>
<th>Sent</th>
<th>Total</th>
</tr>
</thead>
<tbody>';
$data = getVnstatData($path, $type, $interface);

for ($i = 0; $i < count($data); $i++) {
$label = $data[$i]['label'];
$totalReceived = $data[$i]['rx'];
$totalSent = $data[$i]['tx'];
$totalTraffic = $data[$i]['total'];
echo '<tr>';
echo '<td>' . $label . '</td>';
echo '<td>' . $totalReceived . '</td>';
echo '<td>' . $totalSent . '</td>';
echo '<td>' . $totalTraffic . '</td>';
echo '</tr>';

}
echo '</tbody></table>';
}
// Set the current year
$smarty->assign('year', date("Y"));

// Set the current interface
$thisInterface = "";

if (isset($_GET['i'])) {
$interfaceChosen = rawurldecode($_GET['i']);

if (in_array($interfaceChosen, $interface_list, true)) {
$thisInterface = $interfaceChosen;
} else {
Expand All @@ -77,215 +26,47 @@ function printTableStats($path, $type, $interface, $label)
// Assume they mean the first interface
$thisInterface = reset($interface_list);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Network Traffic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(drawHourlyChart);
google.charts.setOnLoadCallback(drawDailyChart);
google.charts.setOnLoadCallback(drawMonthlyChart);

function drawHourlyChart()
{
let data = google.visualization.arrayToDataTable([
['Hour', 'Traffic In', 'Traffic Out', 'Total Traffic'],
<?php
$hourlyGraph = getVnstatData($vnstat_bin_dir, "hourlyGraph", $thisInterface);

$hourlyLargestValue = getLargestValue($hourlyGraph);
$hourlyLargestPrefix = getLargestPrefix($hourlyLargestValue);

for ($i = 0; $i < count($hourlyGraph); $i++) {
$hour = $hourlyGraph[$i]['label'];
$inTraffic = kbytesToString($hourlyGraph[$i]['rx'], true, $hourlyLargestPrefix);
$outTraffic = kbytesToString($hourlyGraph[$i]['tx'], true, $hourlyLargestPrefix);
$totalTraffic = kbytesToString($hourlyGraph[$i]['total'], true, $hourlyLargestPrefix);

if (($hourlyGraph[$i]['label'] == "12am") && ($hourlyGraph[$i]['time'] == "0")) {
continue;
}
$smarty->assign('current_interface', $thisInterface);

if ($i == 23) {
echo("['" . $hour . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "]\n");
} else {
echo("['" . $hour . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "],\n");
}
}
?>
]);
// Assign interface options
global $interface_list;
$smarty->assign('interface_list', $interface_list);

let options = {
title: 'Hourly Network Traffic',
subtitle: 'over last 24 hours',
vAxis: {format: '##.## <?php echo $hourlyLargestPrefix; ?>'}
};
// Populate table data
$hourlyData = getVnstatData($vnstat_bin_dir, 'hourly', $thisInterface);
$smarty->assign('hourlyTableData', $hourlyData);

let chart = new google.charts.Bar(document.getElementById('hourlyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
$dailyData = getVnstatData($vnstat_bin_dir, 'daily', $thisInterface);
$smarty->assign('dailyTableData', $dailyData);

function drawDailyChart()
{
let data = google.visualization.arrayToDataTable([
['Day', 'Traffic In', 'Traffic Out', 'Total Traffic'],
<?php
$dailyGraph = getVnstatData($vnstat_bin_dir, "dailyGraph", $thisInterface);
$monthlyData = getVnstatData($vnstat_bin_dir, 'monthly', $thisInterface);
$smarty->assign('monthlyTableData', $monthlyData);

$dailyLargestValue = getLargestValue($dailyGraph);
$dailyLargestPrefix = getLargestPrefix($dailyLargestValue);
$top10Data = getVnstatData($vnstat_bin_dir, 'top10', $thisInterface);
$smarty->assign('top10TableData', $top10Data);

for ($i = 0; $i < count($dailyGraph); $i++) {
$day = $dailyGraph[$i]['label'];
$inTraffic = kbytesToString($dailyGraph[$i]['rx'], true, $dailyLargestPrefix);
$outTraffic = kbytesToString($dailyGraph[$i]['tx'], true, $dailyLargestPrefix);
$totalTraffic = kbytesToString($dailyGraph[$i]['total'], true, $dailyLargestPrefix);
// Populate graph data
$hourlyGraphData = getVnstatData($vnstat_bin_dir, 'hourlyGraph', $thisInterface);
$hourlyLargestValue = getLargestValue($hourlyGraphData);
$hourlyLargestPrefix = getLargestPrefix($hourlyLargestValue);
$smarty->assign('hourlyGraphData', $hourlyGraphData);
$smarty->assign('hourlyLargestPrefix', $hourlyLargestPrefix);

if ($dailyGraph[$i]['time'] == "0") {
continue;
}
$dailyGraphData = getVnstatData($vnstat_bin_dir, 'dailyGraph', $thisInterface);
$dailyLargestValue = getLargestValue($dailyGraphData);
$dailyLargestPrefix = getLargestPrefix($dailyLargestValue);
$smarty->assign('dailyGraphData', $dailyGraphData);
$smarty->assign('dailyLargestPrefix', $dailyLargestPrefix);

if ($i == 29) {
echo("['" . $day . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "]\n");
} else {
echo("['" . $day . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "],\n");
}
}
?>
]);
$monthlyGraphData = getVnstatData($vnstat_bin_dir, 'monthlyGraph', $thisInterface);
$monthlyLargestValue = getLargestValue($monthlyGraphData);
$monthlyLargestPrefix = getLargestPrefix($monthlyLargestValue);
$smarty->assign('monthlyGraphData', $monthlyGraphData);
$smarty->assign('monthlyLargestPrefix', $monthlyLargestPrefix);

let options = {
title: 'Daily Network Traffic',
subtitle: 'over last 29 days (most recent first)',
vAxis: {format: '##.## <?php echo $dailyLargestPrefix; ?>'}
};
// Display the page
$smarty->display('templates/site_index.tpl');

let chart = new google.charts.Bar(document.getElementById('dailyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}

function drawMonthlyChart()
{
let data = google.visualization.arrayToDataTable([
['Month', 'Traffic In', 'Traffic Out', 'Total Traffic'],
<?php
$monthlyGraph = getVnstatData($vnstat_bin_dir, "monthlyGraph", $thisInterface);

$monthlyLargestValue = getLargestValue($monthlyGraph);
$monthlyLargestPrefix = getLargestPrefix($monthlyLargestValue);

for ($i = 0; $i < count($monthlyGraph); $i++) {
$hour = $monthlyGraph[$i]['label'];
$inTraffic = kbytesToString($monthlyGraph[$i]['rx'], true, $monthlyLargestPrefix);
$outTraffic = kbytesToString($monthlyGraph[$i]['tx'], true, $monthlyLargestPrefix);
$totalTraffic = kbytesToString($monthlyGraph[$i]['total'], true, $monthlyLargestPrefix);

if ($i == 23) {
echo("['" . $hour . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "]\n");
} else {
echo("['" . $hour . "', " . $inTraffic . " , " . $outTraffic . ", " . $totalTraffic . "],\n");
}
}
?>
]);

let options = {
title: 'Monthly Network Traffic',
subtitle: 'over last 12 months',
vAxis: {format: '##.## <?php echo $monthlyLargestPrefix; ?>'}
};

let chart = new google.charts.Bar(document.getElementById('monthlyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div class="container">
<div class="pb-2 mt-4 mb-2 border-bottom">
<h1>Network Traffic (<?php echo $interface_name[$thisInterface]; ?>)</h1> <?php printOptions(); ?>
</div>
</div>

<div class="container">
<ul class="nav nav-tabs" id="graphTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="hourly-graph-tab" data-toggle="tab" href="#hourly-graph" role="tab" aria-controls="hourly-graph" aria-selected="true">Hourly Graph</a>
</li>
<li class="nav-item">
<a class="nav-link" id="daily-graph-tab" data-toggle="tab" href="#daily-graph" role="tab" aria-controls="daily-graph" aria-selected="false">Daily Graph</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monthly-graph-tab" data-toggle="tab" href="#monthly-graph" role="tab" aria-controls="monthly-graph" aria-selected="false">Monthly Graph</a>
</li>
</ul>

<div class="tab-content">
<div class="tab-pane fade show active" id="hourly-graph" role="tabpanel" aria-labelledby="hourly-graph-tab">
<div id="hourlyNetworkTrafficGraph" style="height: 300px;"></div>
</div>

<div class="tab-pane fade" id="daily-graph" role="tabpanel" aria-labelledby="daily-graph-tab">
<div id="dailyNetworkTrafficGraph" style="height: 300px;"></div>
</div>

<div class="tab-pane fade" id="monthly-graph" role="tabpanel" aria-labelledby="monthly-graph-tab">
<div id="monthlyNetworkTrafficGraph" style="height: 300px;"></div>
</div>
</div>
</div>

<div class="container">
<ul class="nav nav-tabs" id="tableTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="hourly-table-tab" data-toggle="tab" href="#hourly-table" role="tab" aria-controls="hourly-table" aria-selected="true">Hourly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="daily-table-tab" data-toggle="tab" href="#daily-table" role="tab" aria-controls="daily-table" aria-selected="false">Daiily</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monthly-table-tab" data-toggle="tab" href="#monthly-table" role="tab" aria-controls="monthly-table" aria-selected="false">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="top10-table-tab" data-toggle="tab" href="#top10-table" role="tab" aria-controls="top10-table" aria-selected="false">Top 10</a>
</li>
</ul>

<div class="tab-content" id="tableTabContent">
<div class="tab-pane fade show active" id="hourly-table" role="tabpanel" aria-labelledby="hourly-table-tab">
<?php printTableStats($vnstat_bin_dir, "hourly", $thisInterface, 'Hour') ?>
</div>
<div class="tab-pane fade" id="daily-table" role="tabpanel" aria-labelledby="daily-table-tab">
<?php printTableStats($vnstat_bin_dir, "daily", $thisInterface, 'Day') ?>
</div>
<div class="tab-pane fade" id="monthly-table" role="tabpanel" aria-labelledby="monthly-table-tab">
<?php printTableStats($vnstat_bin_dir, "monthly", $thisInterface, 'Month') ?>
</div>
<div class="tab-pane fade" id="top10-table" role="tabpanel" aria-labelledby="top10-table-tab">
<?php printTableStats($vnstat_bin_dir, "top10", $thisInterface, 'Day') ?>
</div>
</div>
</div>

<footer class="footer">
<div class="container">
<span class="text-muted">Copyright (C) <?php echo date("Y"); ?> Alexander Marston -
<a href="https://github.com/alexandermarston/vnstat-dashboard">vnstat-dashboard</a></span>
</div>
</footer>
</body>
</html>
?>
Loading

0 comments on commit 25ae2e2

Please sign in to comment.