dashboard

jumpserver/api.py

@@ -1,7 +1,12 @@
 __author__ = 'guanghongwei'
 
+import json
+
+from django.http import HttpResponse
+
 from juser.models import User, UserGroup
 from jasset.models import Asset, BisGroup
+from jlog.models import Log
 
 
 def user_perm_group_api(user):
@@ -46,3 +51,10 @@ def asset_perm_api(asset):
             user_permed_list.extend(user_group.user_set.all())
         return user_permed_list
 
+
+def api_user(request):
+    hosts = Log.objects.filter(is_finished=0).count()
+    users = Log.objects.filter(is_finished=0).values('user').distinct().count()
+    ret = {'users': users, 'hosts': hosts}
+    json_data = json.dumps(ret)
+    return HttpResponse(json_data)

jumpserver/urls.py

@@ -6,7 +6,7 @@ urlpatterns = patterns('',
     # url(r'^$', 'jumpserver.views.home', name='home'),
     # url(r'^blog/', include('blog.urls')),
     (r'^$', 'jumpserver.views.index'),
-    (r'^api/user/$', 'jumpserver.views.api_user'),
+    (r'^api/user/$', 'jumpserver.api.api_user'),
     (r'^skin_config/$', 'jumpserver.views.skin_config'),
     (r'^install/$', 'jumpserver.views.install'),
     (r'^base/$', 'jumpserver.views.base'),

jumpserver/views.py

@@ -103,10 +103,6 @@ def index(request):
     return render_to_response('index.html', locals(), context_instance=RequestContext(request))
 
 
-def api_user(request):
-    users = Log.objects.filter(is_finished=0).count()
-    ret = {'users': users}
-    return HttpResponse(json.dumps(ret))
 
 
 def skin_config(request):

templates/index.html

@@ -35,10 +35,10 @@
             <div class="ibox float-e-margins">
                 <div class="ibox-title">
                     <span class="label label-primary pull-right">Today</span>
-                    <h5>在线用户</h5>
+                    <h5>实时在线用户</h5>
                 </div>
                 <div class="ibox-content">
-                    <h1 class="no-margins"><a href="/jlog/log_list/online/">{{ online_user.count }}</a></h1>
+                    <h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_users"></span></a></h1>
                     <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>
                     <small>Online user</small>
                 </div>
@@ -52,7 +52,7 @@
                     <h5>已连接服务器</h5>
                 </div>
                 <div class="ibox-content">
-                    <h1 class="no-margins"><a href="/jlog/log_list/online/">{{ online_host.count }}</a></h1>
+                        <h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_hosts"></span></a></h1>
                     <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div>
                     <small>Connect host</small>
                 </div>
@@ -208,85 +208,27 @@ $(function () {
         ]
     });
 
-
-    $(document).ready(function() {
-        Highcharts.setOptions({
-            global: {
-                useUTC: false
+    function magic_number(value, id) {
+        var num = $("#"+id);
+        num.animate({count: value}, {
+            duration: 500,
+            step: function() {
+                num.text(String(parseInt(this.count)));
             }
         });
+    };
 
-        var chart;
-        $('#dynamic').highcharts({
-            chart: {
-                type: 'spline',
-                animation: Highcharts.svg, // don't animate in old IE
-                marginRight: 10,
-                events: {
-                    load: function () {
-                        var series = this.series[0];
-                        setInterval(function () {
-                            jQuery.getJSON('api/user/', function (data) {
-                                var users = data.users;
-                                var x = (new Date()).getTime(), // current time
-                                        y = users;
-                                console.log(users)
-                                series.addPoint([x, y], true, true);
-                            });
-                        }, 3000);
-                    }
-                }
-            },
-            title: {
-                text: '实时在线用户统计'
-            },
-            xAxis: {
-                type: 'datetime',
-                tickPixelInterval: 150
-            },
-            yAxis: {
-                min: 0,
-                title: {
-                    text: '用户数量'
-                },
-                plotLines: [{
-                    value: 0,
-                    width: 1,
-                    color: '#808080'
-                }]
-            },
-            tooltip: {
-                formatter: function() {
-                        return '<b>'+ this.series.name +'</b><br/>'+
-                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
-                        Highcharts.numberFormat(this.y);
-                }
-            },
-            legend: {
-                enabled: false
-            },
-            exporting: {
-                enabled: false
-            },
-            series: [{
-                name: '实时在线用户数量',
-                data: (function() {
-                    // generate an array of random data
-                    var data = [],
-                        time = (new Date()).getTime(),
-                        i;
-
-                    for (i = -19; i <= 0; i++) {
-                        data.push({
-                            x: time + i * 1000,
-                            y: 0
-                        });
-                    }
-                    return data;
-                })()
-            }]
+    function update() {
+        $.getJSON('api/user/',  function(data) {
+            var users = data.users;
+            var hosts = data.hosts;
+            magic_number(users, 'online_users');
+            magic_number(hosts, 'online_hosts')
         });
-    });
+    };
+
+    setInterval(update, 1000); //5秒钟执行一次
+    update();
 
 });
 </script>