Added full list of bandwidth usage by all monitored Websites to management.
authorChuck Scott <cscott@gaslightmedia.com>
Fri, 2 Sep 2016 16:21:36 +0000 (12:21 -0400)
committerChuck Scott <cscott@gaslightmedia.com>
Fri, 2 Sep 2016 16:21:36 +0000 (12:21 -0400)
classes/serverBandwidthSupport.php
models/admin/ajax/serverBandwidthGraphs.php
models/admin/management/serverStats.php
views/admin/dashboardWidget/serverStats.html
views/admin/management/serverStats.html

index d1d3b7e..7aa34c4 100644 (file)
@@ -36,6 +36,13 @@ class GlmServerBandwidthSupport
      * @access public
      */
     public $siteId = false;
+    /**
+     * Sort full list by
+     *
+     * @var $sortBy
+     * @access public
+     */
+    public $sortBy = false;
 
     public function __construct()
     {
@@ -102,6 +109,138 @@ class GlmServerBandwidthSupport
 
     }
 
+    /*
+     * Get bandwidth stats for the current day, and month for all sites
+     */
+    public function bandwidthGetAllSitesStats($sortByRequest = 'name')
+    {
+        $stats = array();
+
+        // Determine output table sort order
+        $this->sortBy = 'name';
+
+        if (in_array($sortByRequest, array('name', 'today', 'thisMonth', 'lastMonth'))) {
+            $this->sortBy = $sortByRequest;
+        }
+
+        // Check for good database connection
+        if ($this->bwdb == false) {
+            return false;
+        }
+
+        // Get stats so far for today in Megabytes
+        $today = date('Y-m-d 0:0:0.0');
+        $tomorrow = date('Y-m-d 0:0:0.0', strtotime(date('Y-m-d')." + 1day"));
+        $sql = "
+            SELECT B.websitefk as id,
+                   W.name as name,
+                   COALESCE ( SUM(B.bytesin)/1000000, 0 ) as data_in,
+                   COALESCE ( SUM(B.bytesout)/1000000, 0 ) as data_out,
+                   COALESCE ( SUM(B.total)/1000000, 0 ) as data_total
+              FROM bytes B, website W
+             WHERE W.websitepk = B.websitefk
+               AND time BETWEEN '$today' AND '$tomorrow'
+          GROUP BY B.websitefk
+          ORDER BY W.name
+        ;";
+        $todayStats = $this->bwdb->query($sql);
+        $todayStats->data_seek(0);
+        while ($row = $todayStats->fetch_assoc()) {
+            $stats[$row['id']]['today'] = $row;
+        }
+
+        // Get stats for this month in Gigabytes
+        $firstDayOfMonth = date('Y-m-01');
+        $lastDayOfMonth = date('Y-m-t');
+        $sql = "
+            SELECT R.websitefk as id,
+                   W.name as name,
+                   COALESCE ( SUM(R.bytesin)/1000000000, 0 ) as data_in,
+                   COALESCE ( SUM(R.bytesout)/1000000000, 0 ) as data_out,
+                   COALESCE ( SUM(R.total)/1000000000, 0 ) as data_total
+              FROM rollup R, website W
+             WHERE W.websitepk = R.websitefk
+               AND date BETWEEN '$firstDayOfMonth' AND '$lastDayOfMonth'
+          GROUP BY R.websitefk
+          ORDER BY W.name
+        ;";
+        $thisMonthStats = $this->bwdb->query($sql);
+        $thisMonthStats->data_seek(0);
+        while ($row = $thisMonthStats->fetch_assoc()) {
+            $stats[$row['id']]['thisMonth'] = $row;
+        }
+
+        // Get stats for last month in Gigabytes
+        $firstDayOfMonth = date('Y-m-01', strtotime(date('Y-m-01').' -1 month'));
+        $lastDayOfMonth = date('Y-m-t', strtotime($firstDayOfMonth));
+        $sql = "
+            SELECT R.websitefk as id,
+                   W.name as name,
+                   COALESCE ( SUM(R.bytesin)/1000000000, 0 ) as data_in,
+                   COALESCE ( SUM(R.bytesout)/1000000000, 0 ) as data_out,
+                   COALESCE ( SUM(total)/1000000000, 0 ) as data_total
+              FROM rollup R, website W
+             WHERE W.websitepk = R.websitefk
+               AND date BETWEEN '$firstDayOfMonth' AND '$lastDayOfMonth'
+          GROUP BY R.websitefk
+          ORDER BY W.name
+        ;";
+        $lastMonthStats = $this->bwdb->query($sql);
+        $lastMonthStats->data_seek(0);
+        while ($row = $lastMonthStats->fetch_assoc()) {
+            $stats[$row['id']]['lastMonth'] = $row;
+        }
+
+        // Scan all results to fill in empty data for situations where there was no results
+        reset($stats);
+        while (list($key, $value) = each($stats)) {
+
+            // Get name from the first available data
+            if (isset($value['today'])) {
+                $name = $value['today']['name'];
+            } elseif (isset($value['thisMonth'])) {
+                $name = $value['thisMonth']['name'];
+            } elseif (isset($value['lastMonth'])) {
+                $name = $value['lastMonth']['name'];
+            }
+            $stats[$key]['name'] = $name;
+            $stats[$key]['id'] = $key;
+
+            // Fill in any missing results
+            if (!isset($value['today'])) {
+                $stats[$key]['today'] = array('id' => $key, 'name' => $name, 'data_in' => 0, 'data_out' => 0, 'data_total' => 0);
+            }
+            if (!isset($value['thisMonth'])) {
+                $stats[$key]['thisMonth'] = array('id' => $key, 'name' => $name, 'data_in' => 0, 'data_out' => 0, 'data_total' => 0);
+            }
+            if (!isset($value['lastMonth'])) {
+                $stats[$key]['lastMonth'] = array('id' => $key, 'name' => $name, 'data_in' => 0, 'data_out' => 0, 'data_total' => 0);
+            }
+
+        }
+
+        // Sort output array as requested.
+        uasort($stats, array( $this, 'bwSort'));
+
+        return $stats;
+
+    }
+
+    public function bwSort($a, $b) {
+
+            if ($this->sortBy == 'name') {
+                if ($a['name'] == $b['name']) {
+                    return 0;
+                }
+                return ($a['name'] < $b['name']) ? -1 : 1;
+            } else {
+                if ($a[$this->sortBy]['data_total'] == $b[$this->sortBy]['data_total']) {
+                    return 0;
+                }
+                return ($a[$this->sortBy]['data_total'] < $b[$this->sortBy]['data_total']) ? 1 : -1;
+            }
+    }
+
     /*
      * Get bandwidth stats for the current day, and month
      */
@@ -166,8 +305,13 @@ class GlmServerBandwidthSupport
     /*
      * Get bandwidth graph data for Today, Last two months, Last two years
      */
-    public function bandwidthGetGraphData($graphType = false)
+    public function bandwidthGetGraphData($graphType = false, $siteId = false)
     {
+
+        if (!$siteId) {
+            $siteId = $this->siteId;
+        }
+
         $bandwidth = array('data_in' => array(), 'data_out' => array(), 'data_total' => array());
 
         // Produce data for specified intervals
@@ -184,7 +328,7 @@ class GlmServerBandwidthSupport
                            bytesout/1000000 as data_out,
                            total/1000000 as data_total
                       FROM bytes
-                     WHERE websitefk = ".$this->siteId."
+                     WHERE websitefk = $siteId
                        AND time BETWEEN '$startOfToday' AND '$endOfToday'
                   ORDER BY time ASC
                 ;";
@@ -210,7 +354,7 @@ class GlmServerBandwidthSupport
                            bytesout/1000000000 as data_out,
                            total/1000000000 as data_total
                       FROM rollup
-                     WHERE websitefk = ".$this->siteId."
+                     WHERE websitefk = $siteId
                        AND date BETWEEN '$firstDayOfMonth' AND '$lastDayOfMonth'
                   ORDER BY date ASC
                 ;";
@@ -236,7 +380,7 @@ class GlmServerBandwidthSupport
                            COALESCE ( SUM(bytesout)/1000000000, 0 ) as data_out,
                            COALESCE ( SUM(total)/1000000000, 0 ) as data_total
                       FROM rollup
-                     WHERE websitefk = ".$this->siteId."
+                     WHERE websitefk = $siteId
                        AND date BETWEEN '$firstMonth' AND '$lastMonth'
                   GROUP BY YEAR(date), MONTH(date)
                   ORDER BY date ASC
index 35ee9e5..1b6006d 100644 (file)
@@ -94,6 +94,16 @@ class GlmMembersAdmin_ajax_serverBandwidthGraphs  extends GlmServerBandwidthSupp
     {
         $graphType = $_REQUEST['graphType'];
 
+        $siteId = false;
+        if (isset($_REQUEST['siteId'])) {
+            $siteId = $_REQUEST['siteId']-0;
+        }
+
+        $noTarget = false;
+        if (isset($_REQUEST['noTarget'])) {
+            $noTarget = true;
+        }
+
         $interval = 1;
         $useTarget = false;
         switch($graphType) {
@@ -113,7 +123,7 @@ class GlmMembersAdmin_ajax_serverBandwidthGraphs  extends GlmServerBandwidthSupp
         }
 
         // Get bandwidth data for today
-        $data = $this->bandwidthGetGraphData($graphType);
+        $data = $this->bandwidthGetGraphData($graphType, $siteId);
 
         // Load PHPGraphLib
         require_once GLM_MEMBERS_PLUGIN_LIB_PATH.'/phpgraphlib-master/phpgraphlib.php';
@@ -122,7 +132,7 @@ class GlmMembersAdmin_ajax_serverBandwidthGraphs  extends GlmServerBandwidthSupp
         $graph = new PHPGraphLib(1200,300);
         $graph->setXValues(true);
         $graph->setYValues(true);
-        $graph->setMinMaxY(10); // Set minimum top value to Y axis
+        $graph->setMinMaxY(1); // Set minimum top value to Y axis
         $graph->setXValuesInterval($interval);
         $graph->setXValuesHorizontal(false);
         $graph->setLineColor("blue", "red", "green");
@@ -138,7 +148,7 @@ class GlmMembersAdmin_ajax_serverBandwidthGraphs  extends GlmServerBandwidthSupp
         $graph->addData($data['data_out']);
 
         // Set target bandwidth line. Must be set after data sets
-        if ($useTarget) {
+        if ($useTarget && !$noTarget) {
             $graph->setGoalLine(($this->target/1000), "black", "dashed");
         }
 
index 882048a..da83e67 100644 (file)
@@ -80,10 +80,13 @@ class GlmMembersAdmin_management_serverStats extends GlmDataServerStatsManagemen
 
     public function modelAction($actionData = false)
     {
+
+        $option = 'settings';
         $serverStatsSettigns = false;
         $settingsUpdated = false;
         $settingsUpdateError = false;
         $dbError = false;
+        $sites = false;
 
 
         // Determine if current user can edit configurations
@@ -100,8 +103,7 @@ class GlmMembersAdmin_management_serverStats extends GlmDataServerStatsManagemen
         }
 
         // Check for submission option
-        $option = '';
-        if (isset($_REQUEST['option']) && $_REQUEST['option'] == 'submit') {
+        if (isset($_REQUEST['option'])) {
             $option = $_REQUEST['option'];
         }
 
@@ -135,7 +137,39 @@ class GlmMembersAdmin_management_serverStats extends GlmDataServerStatsManagemen
 
                 break;
 
+            case 'listSites':
+
+                $serverStatsSettings = $this->getEntry(1);
+
+                // Connect to the database
+                require_once GLM_MEMBERS_SERVERSTATS_PLUGIN_CLASS_PATH.'/serverBandwidthSupport.php';
+                $BandwidthStats = new GlmServerBandwidthSupport();
+                $res = $BandwidthStats->bandwidthDataConnect(
+                    $serverStatsSettings['db_host'],
+                    $serverStatsSettings['db_user'],
+                    $serverStatsSettings['db_pass'],
+                    $serverStatsSettings['db_name'],
+                    $serverStatsSettings['website']
+                );
+
+                // If no connection
+                if ($res != '') {
+                    $dbError = $res." ";
+                }
+
+                // Get sorting option
+                $sortBy = 'name';
+                if (isset($_REQUEST['sortBy'])) {
+                    $sortBy = trim($_REQUEST['sortBy']);
+                }
+
+                // Produce summary data for all sites in the bandwidth database
+                $sites = $BandwidthStats->bandwidthGetAllSitesStats($sortBy);
+
+                break;
+
             // Default is to get the current settings and display the form
+            case 'settings':
             default:
 
                 // Try to get the first (should be only) entry for general settings.
@@ -155,11 +189,15 @@ class GlmMembersAdmin_management_serverStats extends GlmDataServerStatsManagemen
 
         // Compile template data
         $templateData = array(
+            'option' => $option,
+            'sortBy' => $sortBy,
             'reason' => '',
             'serverStatsSettings' => $serverStatsSettings,
             'settingsUpdated' => $settingsUpdated,
             'settingsUpdateError' => $settingsUpdateError,
-            'dbError' => $dbError
+            'dbError' => $dbError,
+            'sites' => $sites,
+            'thisDate' => date('m/d/Y')
        );
 
         // Return status, suggested view, and data to controller
index db4a08f..642ecfc 100644 (file)
@@ -90,7 +90,7 @@
             var position = $(this).offset();
             $('#' + areaToPrint).printArea({
                 mode:       'popup',        //printable window is either iframe or browser popup
-                popHt:      500,            // popup window height
+                popHt:      1200,            // popup window height
                 popWd:      1200,            // popup window width
                 popX:       200,            // popup window screen X position
                 popY:       200,            //popup window screen Y position
index fb3484b..73e9bcf 100644 (file)
 {include file='admin/management/header.html'}
 
-    {if $dbError != ''}
-    <h2 class="glm-error">Unable to test database connection!</h2>
-    <p><b>Error reported:</b> {$dbError}</p>
-    {/if}    
-    <form action="{$thisUrl}?page={$thisPage}" method="post" enctype="multipart/form-data">
-        <input type="hidden" name="glm_action" value="serverStats">
-        <input type="hidden" name="option" value="submit">
+    <h2 class="nav-tab-wrapper" style="margin-bottom: 1em;">
+        <a id="glm-settings-Server" data-show-table="glm-table-serverstats-server" class="glm-settings-tab nav-tab{if $option==''} nav-tab-active{/if}">Server Settings</a>
+        <a id="glm-settings-List" data-show-table="glm-table-serverstats-list" class="glm-settings-tab nav-tab{if $option=='listSites'} nav-tab-active{/if}">Web Site Bandwidth Consumed</a>
+    </h2>
+
+    <!--  Server Settings  -->
+    <div id="glm-table-serverstats-server" class="glm-settings-table">
+    
+{if $option == 'settings'}    
+        {if $dbError != ''}
+        <h2 class="glm-error">Unable to test database connection!</h2>
+        <p><b>Error reported:</b> {$dbError}</p>
+        {/if}    
+        <form action="{$thisUrl}?page={$thisPage}" method="post" enctype="multipart/form-data">
+            <input type="hidden" name="glm_action" value="serverStats">
+            <input type="hidden" name="option" value="submit">
+            
+            <table class="glm-admin-table">
+            
+                <!-- Settings for talking with the Bandwidth Database -->
+            
+                <tr>
+                    <td colspan="2">
+                        {if $settingsUpdated}<h2 class="glm-notice glm-flash-updated glm-right">Settings Updated</h2>{/if}
+                        {if $settingsUpdateError}<span class="glm-error glm-flash-updated glm-right">Settings Update Error</span>{/if}
+                    </td>
+                </tr>
+                <tr>
+                    <th>Enabled:</th>
+                    <td>
+                        <input type="checkbox" name="enabled"{if $serverStatsSettings.fieldData.enabled.value} checked="checked"{/if}>
+                    </td>
+                </tr>
+                <tr>
+                    <th {if $serverStatsSettings.fieldRequired.db_name}class="glm-required"{/if}>Database Name:</th>
+                    <td {if $serverStatsSettings.fieldFail.db_name}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
+                        <input type="text" name="db_name" value="{$serverStatsSettings.fieldData.db_name}" class="glm-form-text-input-medium">
+                        {if $serverStatsSettings.fieldFail.db_name}<p>{$serverStatsSettings.fieldFail.db_name}</p>{/if}
+                    </td>
+                </tr>
+                <tr>
+                    <th {if $serverStatsSettings.fieldRequired.db_host}class="glm-required"{/if}>Database Server Hostname:</th>
+                    <td {if $serverStatsSettings.fieldFail.db_host}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
+                        <input type="text" name="db_host" value="{$serverStatsSettings.fieldData.db_host}" class="glm-form-text-input-medium">
+                        {if $serverStatsSettings.fieldFail.db_host}<p>{$serverStatsSettings.fieldFail.db_host}</p>{/if}
+                    </td>
+                </tr>
+                <tr>
+                    <th {if $serverStatsSettings.fieldRequired.db_user}class="glm-required"{/if}>Database Username:</th>
+                    <td {if $serverStatsSettings.fieldFail.db_user}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
+                        <input type="text" name="db_user" value="{$serverStatsSettings.fieldData.db_user}" class="glm-form-text-input-medium">
+                        {if $serverStatsSettings.fieldFail.db_user}<p>{$serverStatsSettings.fieldFail.db_user}</p>{/if}
+                    </td>
+                </tr>
+                <tr>
+                    <th {if $serverStatsSettings.fieldRequired.db_pass}class="glm-required"{/if}>Database Password:</th>
+                    <td {if $serverStatsSettings.fieldFail.db_pass}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
+                        <input type="text" name="db_pass" value="{$serverStatsSettings.fieldData.db_pass}" class="glm-form-text-input-medium">
+                        {if $serverStatsSettings.fieldFail.db_pass}<p>{$serverStatsSettings.fieldFail.db_pass}</p>{/if}
+                    </td>
+                </tr>
+                <tr>
+                    <th {if $serverStatsSettings.fieldRequired.website}class="glm-required"{/if}>Website Name:</th>
+                    <td {if $serverStatsSettings.fieldFail.website}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
+                        <input type="text" name="website" value="{$serverStatsSettings.fieldData.website}" class="glm-form-text-input-medium">
+                        <br>This is the name of the Website as it's listed in the server stats database. Normally does not include 'www'.
+                        {if $serverStatsSettings.fieldFail.website}<p>{$serverStatsSettings.fieldFail.website}</p>{/if}
+                    </td>
+                </tr>
+                <tr>
+                    <th {if $serverStatsSettings.fieldRequired.target}class="glm-required"{/if}>Monthly Target Bandwidth:</th>
+                    <td {if $serverStatsSettings.fieldFail.target}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
+                        <input type="text" name="target" value="{$serverStatsSettings.fieldData.target}" class="glm-form-text-input-medium">
+                        <br>Monthly target bandwidth is entered in Megabytes without any fractions.
+                        {if $serverStatsSettings.fieldFail.target}<p>{$serverStatsSettings.fieldFail.target}</p>{/if}
+                    </td>
+                </tr>
+            </table>
+            <input type="submit" value="Update Settings" class="button-primary">
+        </form>
+{/if}        
         
-        <table class="glm-admin-table">
+    </div>
+    
+    <!--  Server Settings  -->
+    <div id="glm-table-serverstats-list" class="{if $option!='listSites'}glm-hidden{/if} glm-settings-table">
+    
+        <p>
+            <form action="{$thisUrl}?page={$thisPage}" method="post" enctype="multipart/form-data">
+                <input type="hidden" name="glm_action" value="serverStats">
+                <input type="hidden" name="option" value="listSites">
+                Sort by: 
+                <select name="sortBy">
+                    <option value="name"{if $sortBy == 'name'} selected{/if}>Site Name</option>
+                    <option value="today"{if $sortBy == 'today'} selected{/if}>Today</option>
+                    <option value="thisMonth"{if $sortBy == 'thisMonth'} selected{/if}>This Month</option>
+                    <option value="lastMonth"{if $sortBy == 'lastMonth'} selected{/if}>Last Month</option>
+                </select>
+                <input type="submit" value="Generate List of Web Sites" class="button-primary">
+            </form>
+        </p>
         
-            <!-- Settings for talking with the Bandwidth Database -->
+        <!-- Server Bandwidth Stats -->
+        <div id="serverStats" class="graph-dialog glm-dialog-box" title="Server Bandwidth">
+            <div id="StatsPrintArea" class="PrintArea" style="padding: 10px;">
+                <center><h3><span id="siteNameHere"></span></h3></center>
+                <p>
+                    <span class="glm-right">{$thisDate}</span>
+                    <span class="glm-left">Server Bandwidth Stats for Today by 10 Min Intervals - Megabytes</span>
+                </p>
+                <span id="twoDayGraph"></span>
+                <p>
+                    <span class="glm-right">{$thisDate}</span>
+                    <span class="glm-left">Server Bandwidth Stats for last 2 Months by Day - Gigabytes</span>
+                </p>
+                <span id="twoMonthGraph"></span>
+                <p>
+                    <span class="glm-right">{$thisDate}</span>
+                    <span class="glm-left">Server Bandwidth Stats for last 2 Years by Month - Gigabytes</span>
+                </p>
+                <span id="twoYearGraph"></span>
+                <center>Color Key: <span style="color: red;">Incoming</span>, <span style="color: green;">Outgoing</span>, <span style="color: blue;">Total</span></center>
+            </div>
+            <div class="button button-secondary graph-print glm-right" data-areaToPrint="StatsPrintArea">Print</div>
+        </div>
+        <script src="{$jsUrl}/PrintArea/jquery.PrintArea.js" type="text/JavaScript" language="javascript"></script>
         
-            <tr>
-                <td colspan="2">
-                    {if $settingsUpdated}<h2 class="glm-notice glm-flash-updated glm-right">Settings Updated</h2>{/if}
-                    {if $settingsUpdateError}<span class="glm-error glm-flash-updated glm-right">Settings Update Error</span>{/if}
-                    <h2>General Server Stats Settings</h2>
-                </td>
-            </tr>
-            <tr>
-                <th>Enabled:</th>
-                <td>
-                    <input type="checkbox" name="enabled"{if $serverStatsSettings.fieldData.enabled.value} checked="checked"{/if}>
-                </td>
-            </tr>
-            <tr>
-                <th {if $serverStatsSettings.fieldRequired.db_name}class="glm-required"{/if}>Database Name:</th>
-                <td {if $serverStatsSettings.fieldFail.db_name}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
-                    <input type="text" name="db_name" value="{$serverStatsSettings.fieldData.db_name}" class="glm-form-text-input-medium">
-                    {if $serverStatsSettings.fieldFail.db_name}<p>{$serverStatsSettings.fieldFail.db_name}</p>{/if}
-                </td>
-            </tr>
-            <tr>
-                <th {if $serverStatsSettings.fieldRequired.db_host}class="glm-required"{/if}>Database Server Hostname:</th>
-                <td {if $serverStatsSettings.fieldFail.db_host}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
-                    <input type="text" name="db_host" value="{$serverStatsSettings.fieldData.db_host}" class="glm-form-text-input-medium">
-                    {if $serverStatsSettings.fieldFail.db_host}<p>{$serverStatsSettings.fieldFail.db_host}</p>{/if}
-                </td>
-            </tr>
-            <tr>
-                <th {if $serverStatsSettings.fieldRequired.db_user}class="glm-required"{/if}>Database Username:</th>
-                <td {if $serverStatsSettings.fieldFail.db_user}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
-                    <input type="text" name="db_user" value="{$serverStatsSettings.fieldData.db_user}" class="glm-form-text-input-medium">
-                    {if $serverStatsSettings.fieldFail.db_user}<p>{$serverStatsSettings.fieldFail.db_user}</p>{/if}
-                </td>
+{if $sites}
+        <table class="wp-list-table striped glm-admin-table">
+            <tr style="font-weight: bold;">
+                <td style="text-align: left;{if $sortBy == 'name'} color: #3580c0;{/if}">Site</td>
+                <td style="text-align: right;{if $sortBy == 'today'} color: #3580c0;{/if}">&nbsp;&nbsp;Today (MB)</td>
+                <td style="text-align: right;{if $sortBy == 'thisMonth'} color: #3580c0;{/if}">&nbsp;&nbsp;This Month (GB)</td>
+                <td style="text-align: right;{if $sortBy == 'lastMonth'} color: #3580c0;{/if}">&nbsp;&nbsp;Last Month (GB)</td>
+                <td>&nbsp;</td>
             </tr>
+    {foreach $sites as $s}
             <tr>
-                <th {if $serverStatsSettings.fieldRequired.db_pass}class="glm-required"{/if}>Database Password:</th>
-                <td {if $serverStatsSettings.fieldFail.db_pass}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
-                    <input type="text" name="db_pass" value="{$serverStatsSettings.fieldData.db_pass}" class="glm-form-text-input-medium">
-                    {if $serverStatsSettings.fieldFail.db_pass}<p>{$serverStatsSettings.fieldFail.db_pass}</p>{/if}
-                </td>
-            </tr>
-            <tr>
-                <th {if $serverStatsSettings.fieldRequired.website}class="glm-required"{/if}>Website Name:</th>
-                <td {if $serverStatsSettings.fieldFail.website}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
-                    <input type="text" name="website" value="{$serverStatsSettings.fieldData.website}" class="glm-form-text-input-medium">
-                    <br>This is the name of the Website as it's listed in the server stats database. Normally does not include 'www'.
-                    {if $serverStatsSettings.fieldFail.website}<p>{$serverStatsSettings.fieldFail.website}</p>{/if}
-                </td>
-            </tr>
-            <tr>
-                <th {if $serverStatsSettings.fieldRequired.target}class="glm-required"{/if}>Monthly Target Bandwidth:</th>
-                <td {if $serverStatsSettings.fieldFail.target}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
-                    <input type="text" name="target" value="{$serverStatsSettings.fieldData.target}" class="glm-form-text-input-medium">
-                    <br>Monthly target bandwidth is entered in Megabytes without any fractions.
-                    {if $serverStatsSettings.fieldFail.target}<p>{$serverStatsSettings.fieldFail.target}</p>{/if}
-                </td>
+                <td style="text-align: left; font-weight: bold;">{$s.name} ({$s.id})</td>
+                <td style="text-align: right;">{$s.today.data_total|number_format:3:".":","}</td>
+                <td style="text-align: right;">{$s.thisMonth.data_total|number_format:3:".":","}</td>
+                <td style="text-align: right;">{$s.lastMonth.data_total|number_format:3:".":","}</td>
+                <td style="padding: 0 1em 0 1em;"><a style="margin-left: 2em;" data-site="{$s.id}" data-siteName="{$s.name}" data-type="serverStats" class="dialog-button" href=""><img src="{$assetsUrl}/graph.png"></a></td>
             </tr>
+    {/foreach}
         </table>
-        <input type="submit" value="Update Settings" class="button-primary">
-    </form>
+
+{/if}
     
+    </div>    
     <script type="text/javascript">
         
         jQuery(document).ready(function($) {
 
+            /*
+             * Edit area tabs
+             */
+            $('.glm-settings-tab').click( function() {
+
+                // Clear table highlights and hide all tables
+                $('.glm-settings-tab').removeClass('nav-tab-active');
+                $('.glm-settings-table').addClass('glm-hidden');
+
+                // Highlight selected tab
+                $(this).addClass('nav-tab-active');
+
+                // Show selected table
+                var table = $(this).attr('data-show-table');
+                $('#' + table).removeClass('glm-hidden');
+
+            });
+  
+            // Create graph dialog boxes
+            $(".graph-dialog").dialog({
+                autoOpen: false,
+                minWidth: 1200,
+                position: { my: "center", at: "center", of: window }
+            });
+
+            $(".graph-print").click(function(){
+                var areaToPrint = $(this).attr('data-areaToPrint');
+                var position = $(this).offset();
+                $('#' + areaToPrint).printArea({
+                    mode:       'popup',        //printable window is either iframe or browser popup
+                    popHt:      1200,            // popup window height
+                    popWd:      1200,            // popup window width
+                    popX:       200,            // popup window screen X position
+                    popY:       200,            //popup window screen Y position
+                    popTitle:   'Graph Print Window',   // popup window title element
+                    popClose:   true,           // popup window close after printing
+                    extraCss:   '',             // Comma separated list of extra css to include
+                    extraHead:  '',             // Comma separated list of extra elements to be appended to head tag
+                    strict:     false           // strict or looseTransitional html 4.01 document standard or undefined to not include at all only for popup option
+                });
+           });
+
+            // Display selected graph dialog box
+            $('.dialog-button').click( function() {
+                $(".graph-dialog").dialog("open");
+                siteId = $(this).attr('data-site');
+                siteName = $(this).attr('data-siteName');
+                $('#siteNameHere').html(siteName);
+                $('#twoDayGraph').html('<img src="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=serverBandwidthGraphs&graphType=twoDay&siteId=' + siteId + '&noTarget=true">');
+                $('#twoMonthGraph').html('<img src="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=serverBandwidthGraphs&graphType=twoMonth&siteId=' + siteId + '&noTarget=true">');
+                $('#twoYearGraph').html('<img src="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=serverBandwidthGraphs&graphType=twoYear&siteId=' + siteId + '&noTarget=true">');
+
+//                var graph = $(this).attr('data-type');
+                return false;
+            });
+
             // Flash certain elements for a short time after display      
             $(".glm-flash-updated").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);