From 3292abbbf27c03fc3c08123fbf015f05d93bd118 Mon Sep 17 00:00:00 2001 From: Rahat Ali Date: Wed, 19 Aug 2015 15:18:44 +0500 Subject: [PATCH] dashbaord login pattern --- server/src/main/webapp/home.xhtml | 207 +----------------- .../src/main/webapp/resources/js/dashboard.js | 103 +++++++++ 2 files changed, 114 insertions(+), 196 deletions(-) create mode 100644 server/src/main/webapp/resources/js/dashboard.js diff --git a/server/src/main/webapp/home.xhtml b/server/src/main/webapp/home.xhtml index 8abdc9aab..7652e98b9 100644 --- a/server/src/main/webapp/home.xhtml +++ b/server/src/main/webapp/home.xhtml @@ -82,16 +82,12 @@ -
+

Successful login

- - - -
- -
+ +

failed login

- +
@@ -126,7 +122,7 @@
-
+

@@ -138,11 +134,10 @@
-
+
- Single Sign-On - Authentication Errors + Login Successful
@@ -150,7 +145,7 @@
- API Requests + Login Failed
@@ -205,177 +200,7 @@
- -
-
-
-
- -

Server Activity

-
- - -
- -
-
-
-
- -
-
-
- -
New Users
-
- -
- -
Online Users
-
- -
- -
User Requests
-
- -
- -
- -
-
-
-
-
-

Browser Usage

-
- - -
-
- -
-
-
-
- -
- -
- -
-
    -
  • Chrome
    • -
  • IE
    • -
  • FireFox
    • -
  • Safari
    • -
  • Opera
    • -
  • Navigator
    • -
-
- -
- -
- -
- - -
-
- -

Calendar

- -
- -
- - -
- - -
- -
- -
-
-
- -
-
-
-
- File Server Backup 90% -
-
-
-
-
- Database Cloning 70% -
-
-
-
-
- -
-
- Delete Inactive Users 60% -
-
-
-
-
- Task #4 40% -
-
-
-
-
- -
- -
-
- -
- -
+ @@ -394,17 +219,7 @@ - - - + + diff --git a/server/src/main/webapp/resources/js/dashboard.js b/server/src/main/webapp/resources/js/dashboard.js new file mode 100644 index 000000000..8ded261d1 --- /dev/null +++ b/server/src/main/webapp/resources/js/dashboard.js @@ -0,0 +1,103 @@ + +"use strict"; + +$(function () { + +//----------------------- + //- Dashboard > Authentication Requests Chart - + //----------------------- + + // Get context with jQuery - using jQuery's .get() method. + var authenticationRequestsChartCanvas = $("#authenticationRequestsChart").get(0).getContext("2d"); + // This will get the first returned node in the jQuery collection. + var authenticationRequestsChart = new Chart(authenticationRequestsChartCanvas); + + var successJson = JSON.parse($("#successJson").val()); + var failedJson = JSON.parse($("#failedJson").val()); + console.log(failedJson); + console.log(successJson); + var successLabels = []; + var successValue = []; + for (var field in successJson) { + console.log("field:"+field+",value:"+successJson[field]); + successLabels.push(field); + successValue.push(successJson[field]); + } + + var failedLabels = []; + var failedValue = []; + for (var field in failedJson) { + console.log("field:"+field+",value:"+failedJson[field]); + failedLabels.push(field); + failedValue.push(failedJson[field]); + } + var authenticationRequestsChartData = { + labels: successLabels, + datasets: [ + { + label: "Successful Login", + fillColor: "rgb(210, 214, 222)", + strokeColor: "rgb(210, 214, 222)", + pointColor: "rgb(210, 214, 222)", + pointStrokeColor: "#c1c7d1", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgb(220,220,220)", + data: successValue + }, + { + label: "Failed Attempts", + fillColor: "rgba(60,141,188,0.9)", + strokeColor: "rgba(60,141,188,0.8)", + pointColor: "#3b8bba", + pointStrokeColor: "rgba(60,141,188,1)", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(60,141,188,1)", + data: failedValue + } + ] + }; + + var authenticationRequestsChartOptions = { + //Boolean - If we should show the scale at all + showScale: true, + //Boolean - Whether grid lines are shown across the chart + scaleShowGridLines: false, + //String - Colour of the grid lines + scaleGridLineColor: "rgba(0,0,0,.05)", + //Number - Width of the grid lines + scaleGridLineWidth: 1, + //Boolean - Whether to show horizontal lines (except X axis) + scaleShowHorizontalLines: true, + //Boolean - Whether to show vertical lines (except Y axis) + scaleShowVerticalLines: true, + //Boolean - Whether the line is curved between points + bezierCurve: true, + //Number - Tension of the bezier curve between points + bezierCurveTension: 0.3, + //Boolean - Whether to show a dot for each point + pointDot: false, + //Number - Radius of each point dot in pixels + pointDotRadius: 4, + //Number - Pixel width of point dot stroke + pointDotStrokeWidth: 1, + //Number - amount extra to add to the radius to cater for hit detection outside the drawn point + pointHitDetectionRadius: 20, + //Boolean - Whether to show a stroke for datasets + datasetStroke: true, + //Number - Pixel width of dataset stroke + datasetStrokeWidth: 2, + //Boolean - Whether to fill the dataset with a color + datasetFill: true, + //String - A legend template + legendTemplate: "
    <% for (var i=0; i
  • \"><%=datasets[i].label%>
    • <%}%>
", + //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container + maintainAspectRatio: false, + //Boolean - whether to make the chart responsive to window resizing + responsive: true + }; + + //Create the line chart + authenticationRequestsChart.Line(authenticationRequestsChartData, authenticationRequestsChartOptions); + + +}); \ No newline at end of file