From 2c801fe935ba3cc3b5b6b8b09ec7d364e972acc7 Mon Sep 17 00:00:00 2001
From: piyush-kr <sinha.piyushbt@gmail.com>
Date: Mon, 6 Nov 2017 17:09:05 +0530
Subject: [PATCH] updated for: * added grid download csv,table view, graph
 view, download graph to make uniform to other graph.

---
 .../dashboard/staff/tower-monitoring.html     | 24 +++++++++++----
 .../dashboard/tower_detail/monitor.html       | 29 +++++++++++++++----
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/cloud/endagaweb/templates/dashboard/staff/tower-monitoring.html b/cloud/endagaweb/templates/dashboard/staff/tower-monitoring.html
index 9dc33430..a9050552 100644
--- a/cloud/endagaweb/templates/dashboard/staff/tower-monitoring.html
+++ b/cloud/endagaweb/templates/dashboard/staff/tower-monitoring.html
@@ -14,6 +14,8 @@
 {% block pagestyle %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/css/bootstrap-datetimepicker.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
+<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" type="text/css"/>
 <style>
   .timezone-notice {
     display: none;
@@ -81,27 +83,33 @@ <h3>Timeseries Stats!
     }, 800);
   });
 </script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.5/d3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
+<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
+<script src="/static/js/dashboard/saveSvgAsPng.js"></script>
 
-<script type="text/jsx" src="/static/js/dashboard/chart-components.js"></script>
+<script type="text/jsx" src="/static/js/dashboard/report-chart-components.js"></script>
 <script type="text/jsx">
   React.render(
     <TimeseriesChartWithButtonsAndDatePickers
       title='Channel Load'
       chartID='channel-load-stats-chart'
       statTypes='sdcch_load,sdcch_available,tchf_load,tchf_available,pch_active,pch_total,agch_active,agch_pending,gprs_current_pdchs,ccch_sdcch4_load,tch_f_max,tch_f_load,sdcch8_max,tch_f_pdch_load,tch_f_pdch_max,tch_h_load,tch_h_max,sdcch8_load,ccch_sdcch4_max'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows total capacity, availibility and usage of GSM signalling and traffic channels for selected time window.'
+
     />,
     document.getElementById('channel-load-stats-chart-container')
   );
@@ -110,13 +118,15 @@ <h3>Timeseries Stats!
       title='Noise'
       chartID='noise-stats-chart'
       statTypes='noise_rssi_db,noise_ms_rssi_target_db'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows noise signal strength and Target mobile signal strength to receive error free signal.'
     />,
     document.getElementById('noise-stats-chart-container')
   );
@@ -125,13 +135,15 @@ <h3>Timeseries Stats!
       title='System Utilization'
       chartID='system-utilization-stats-chart'
       statTypes='cpu_percent,memory_percent,disk_percent,gprs_utilization_percentage'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows total system utlization in terms of memory, disk and cpu for selected time window.'
     />,
     document.getElementById('system-utilization-stats-chart-container')
   );
@@ -140,13 +152,15 @@ <h3>Timeseries Stats!
       title='Network Utilization'
       chartID='network-utilization-stats-chart'
       statTypes='bytes_sent_delta,bytes_received_delta'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows total data ( uplink and downlink) used by network for selected time window.'
     />,
     document.getElementById('network-utilization-stats-chart-container')
   );
diff --git a/cloud/endagaweb/templates/dashboard/tower_detail/monitor.html b/cloud/endagaweb/templates/dashboard/tower_detail/monitor.html
index 28e285aa..b8f1aa16 100644
--- a/cloud/endagaweb/templates/dashboard/tower_detail/monitor.html
+++ b/cloud/endagaweb/templates/dashboard/tower_detail/monitor.html
@@ -11,12 +11,18 @@
 
 
 {% block pagestyle %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/css/bootstrap-datetimepicker.min.css">
+<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" type="text/css"/>
 <style>
   .timezone-notice {
     display: none;
   }
+   div.tooltip-inner {
+    max-width: 350px;
+    background-color:#483D8B;
+  }
 </style>
 {% endblock %}
 
@@ -73,27 +79,32 @@
     }, 800);
   });
 </script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.5/d3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
-
-<script type="text/jsx" src="/static/js/dashboard/chart-components.js"></script>
+<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
+<script src="/static/js/dashboard/saveSvgAsPng.js"></script>
+<script type="text/jsx" src="/static/js/dashboard/report-chart-components.js"></script>
 <script type="text/jsx">
   React.render(
     <TimeseriesChartWithButtonsAndDatePickers
       title='Channel Load'
       chartID='channel-load-stats-chart'
       statTypes='sdcch_load,sdcch_available,tchf_load,tchf_available,pch_active,pch_total,agch_active,agch_pending,gprs_current_pdchs,ccch_sdcch4_load,tch_f_max,tch_f_load,sdcch8_max,tch_f_pdch_load,tch_f_pdch_max,tch_h_load,tch_h_max,sdcch8_load,ccch_sdcch4_max'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows total capacity, availibility and usage of GSM signalling and traffic channels for selected time window.'
+
     />,
     document.getElementById('channel-load-stats-chart-container')
   );
@@ -102,13 +113,15 @@
       title='Noise'
       chartID='noise-stats-chart'
       statTypes='noise_rssi_db,noise_ms_rssi_target_db'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows noise signal strength and Target mobile signal strength to receive error free signal.'
     />,
     document.getElementById('noise-stats-chart-container')
   );
@@ -117,13 +130,15 @@
       title='System Utilization'
       chartID='system-utilization-stats-chart'
       statTypes='cpu_percent,memory_percent,disk_percent,gprs_utilization_percentage'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows total system utlization in terms of memory, disk and cpu for selected time window.'
     />,
     document.getElementById('system-utilization-stats-chart-container')
   );
@@ -132,13 +147,15 @@
       title='Network Utilization'
       chartID='network-utilization-stats-chart'
       statTypes='bytes_sent_delta,bytes_received_delta'
+      level='tower'
       levelID='{{ tower.id }} '
       aggregation='average_value'
       yAxisLabel=''
       currentTimeEpoch='{{ current_time_epoch }}'
       timezoneOffset='{{ timezone_offset }}'
-      endpoint='/api/v1/stats/tower'
       defaultButtonText='day'
+      chartType='line-chart'
+      info='This graph shows total data ( uplink and downlink) used by network for selected time window.'
     />,
     document.getElementById('network-utilization-stats-chart-container')
   );