From 7336219cc571d8387221afac8c76814959297114 Mon Sep 17 00:00:00 2001 From: Apex Liu Date: Wed, 13 Dec 2017 01:59:00 +0800 Subject: [PATCH] =?UTF-8?q?dashboard=E7=9A=84=E7=BD=91=E7=BB=9C=E6=B5=8F?= =?UTF-8?q?=E8=A7=88=E5=92=8C=E7=A3=81=E7=9B=98IO=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- server/www/teleport/static/css/dashboard.css | 2 +- .../teleport/static/js/dashboard/dashboard.js | 334 ++++++++++++++---- server/www/teleport/static/js/tp-utils.js | 23 +- .../www/teleport/static/less/dashboard.less | 151 +------- server/www/teleport/view/dashboard/index.mako | 10 +- .../www/teleport/webroot/app/base/status.py | 39 +- server/www/teleport/webroot/app/base/utils.py | 4 + 7 files changed, 314 insertions(+), 249 deletions(-) diff --git a/server/www/teleport/static/css/dashboard.css b/server/www/teleport/static/css/dashboard.css index 90f121e..3775bbf 100644 --- a/server/www/teleport/static/css/dashboard.css +++ b/server/www/teleport/static/css/dashboard.css @@ -1 +1 @@ -@charset "utf-8";html{font-size:13px}body{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background-color:#e9e9e9;color:#333}html,body{height:100%}#page-container{min-width:1260px}a{text-decoration:none}a:link{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}a:visited{text-decoration:none}select{outline:none}label{font-weight:normal}.clear-float{clear:both}.bigger{font-size:120%}.normal-text{font-size:13px;color:#333}.mono{font-family:Monaco,Lucida Console,Consolas,Courier,'Courier New',monospace}.important{color:#d45f1c}.error{color:#d34242}.bold{font-weight:bold}hr.hr-sm{padding:1px 0;margin:5px 0;border-top:1px dashed #c4c4c4}ul{list-style:none}ul.list{margin:0;padding:3px 0 5px 0}ul.list li{margin:3px 3px 5px 10px}.btn-single-line{white-space:nowrap}.btn-single-line .btn:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.btn-single-line .btn:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.remote-action-group{margin-bottom:3px;height:28px}.remote-action-group ul{display:block;height:28px;margin:0;padding:0}.remote-action-group ul li{float:left;position:relative;display:block;height:28px;padding:4px 5px;background-color:#eee;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.remote-action-group ul li.remote-action-btn{background:none;padding:0;border:none}.remote-action-group ul li.remote-action-input{background:none;padding:4px 0}.remote-action-group ul li.remote-action-input select{border:none}.remote-action-group ul li.remote-action-chk-protocol{width:86px}.remote-action-group ul li.remote-action-state{text-align:center;white-space:nowrap}.remote-action-group ul li.remote-action-state.state-disabled{background-color:#e5e5e5;color:#aaa;text-shadow:-1px -1px 1px #fff}.remote-action-group ul li.remote-action-state.state-disabled>i.fa{color:#b53a2f}.remote-action-group ul li.remote-action-username,.remote-action-group ul li.remote-action-name,.remote-action-group ul li.remote-action-protocol{width:96px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remote-action-group ul li.remote-action-username{font-size:90%;color:#999}.remote-action-group ul li.remote-action-name,.remote-action-group ul li.remote-action-protocol,.remote-action-group ul li.remote-action-chk-protocol{color:#000}.remote-action-group ul li.remote-action-name,.remote-action-group ul li.remote-action-chk-protocol{font-weight:bold}.remote-action-group ul li.remote-action-password,.remote-action-group ul li.remote-action-sshkey,.remote-action-group ul li.remote-action-noauth{text-align:center;padding:4px 8px;width:45px}.remote-action-group ul li.remote-action-password{background-color:#e3ffe3;color:#999}.remote-action-group ul li.remote-action-sshkey{background-color:#fbe9c8;color:#666}.remote-action-group ul li.remote-action-noauth{background-color:#e0e0e0;color:#666}.remote-action-group ul li .btn{line-height:1.5;margin:0;padding:4px 8px;font-size:12px;border-radius:0}.remote-action-group ul li label{padding:0;display:block;float:left;margin-top:1px;cursor:pointer}.remote-action-group ul li input[type=checkbox]{display:block;float:left;margin:3px 5px 0 0}.remote-action-group ul li select{margin-top:-3px}.remote-action-group ul li:first-child{border-left:1px solid #ccc;border-top-left-radius:4px;border-bottom-left-radius:4px}.remote-action-group ul li.remote-action-btn:first-child{border:none}.remote-action-group ul li.remote-action-btn:first-child .btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.remote-action-group ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.remote-action-group ul li.remote-action-btn:last-child{border:none}.remote-action-group ul li.remote-action-btn:last-child .btn{border-top-right-radius:4px;border-bottom-right-radius:4px}.remote-info-group{margin-bottom:3px;height:28px}.remote-info-group ul{display:inline-block;height:28px;margin:0;padding:0}.remote-info-group ul li{float:left;position:relative;display:block;height:28px;padding:4px 5px;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.remote-info-group ul li.remote-action-btn{background:none;padding:0;border:none}.remote-info-group ul li.remote-action-input{background:none;padding:4px 0}.remote-info-group ul li.remote-action-input select{border:none}.remote-info-group ul li label{padding:0;display:block;float:left;margin-top:1px;cursor:pointer}.remote-info-group ul li select{margin-top:-3px}.remote-info-group ul li:first-child{border-left:1px solid #ccc;border-top-left-radius:4px;border-bottom-left-radius:4px}.remote-info-group ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}hr.small{margin:5px 0}.dlg-protocol-group{margin-bottom:3px}.dlg-protocol-group ul{display:block;height:28px;margin:0;padding:0}.dlg-protocol-group ul li{float:left;position:relative;display:block;height:28px;padding:4px 5px;background-color:#eee;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.dlg-protocol-group ul li.item-name{width:120px}.dlg-protocol-group ul li.item-btn{background:none;padding:0;border:none}.dlg-protocol-group ul li.item-input{background:none;border:none;padding:0}.dlg-protocol-group ul li .form-control{line-height:1.5;margin:0;padding:4px 5px;font-size:12px;height:28px;border-radius:0;border-left:none;width:100px}.dlg-protocol-group ul li label{padding:0;display:block;float:left;margin-top:1px;cursor:pointer}.dlg-protocol-group ul li input[type=checkbox]{display:block;float:left;margin:3px 5px 0 0}.dlg-protocol-group ul li:first-child{border-left:1px solid #ccc;border-top-left-radius:4px;border-bottom-left-radius:4px}.dlg-protocol-group ul li:first-child .btn,.dlg-protocol-group ul li:first-child .form-control{border-top-left-radius:4px;border-bottom-left-radius:4px}.dlg-protocol-group ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.dlg-protocol-group ul li:last-child .btn,.dlg-protocol-group ul li:last-child .form-control{border-top-right-radius:4px;border-bottom-right-radius:4px}.os-icon-windows:after{color:#00bcf6;content:"\f17a";font-size:18px;width:24px;height:24px;line-height:24px;display:inline-block;font-family:'FontAwesome'}.os-icon-linux:after{color:#fff;content:"\f17c";font-size:18px;width:24px;height:24px;line-height:24px;background-color:#333;border-radius:50%;display:inline-block;font-family:'FontAwesome'}.os-icon-macos:after{color:#a7a7a7;content:"\f179";font-size:20px;width:24px;height:24px;line-height:24px;display:inline-block;font-family:'FontAwesome'}.os-icon-ubuntu:after,.os-icon-debian:after,.os-icon-centos:after,.os-icon-redhat:after{content:" ";width:24px;height:24px;line-height:24px;display:inline-block}.os-icon-ubuntu:after{background:url(../img/os-icon/ubuntu-24x24.png) no-repeat}.os-icon-debian:after{background:url(../img/os-icon/debian-24x24.png) no-repeat}.os-icon-centos:after{background:url(../img/os-icon/centos-24x24.png) no-repeat}.os-icon-redhat:after{background:url(../img/os-icon/redhat-24x24.png) no-repeat}.disable-bg{position:absolute;background:url(../img/css/disable-bg.png) repeat;opacity:.45;z-index:990}.disable-message{display:inline-block;font-size:160%;position:absolute;padding:20px 40px;border:1px solid #2b0002;background-color:#65181a;color:#fff;opacity:.85;z-index:991}.btn-group-sm>.btn{padding:3px 5px;font-size:12px}.pop-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040}.form-group{margin-bottom:5px}.badge{padding:3px 6px;border-radius:10px;font-size:13px;font-weight:400;background-color:#999}.badge.badge-sm{font-size:12px;padding:3px 5px;margin-top:0;border-radius:8px;text-shadow:none}.badge.badge-sup{margin-left:-8px;margin-top:-16px}.badge.badge-ignore{background-color:#e5e5e5;color:#999}.badge.badge-info{background-color:#33b7d0}.badge.badge-primary{background-color:#348fe2}.badge.badge-success{background-color:#368142}.badge.badge-warning{background-color:#f57523}.badge.badge-danger{background-color:#d34242}.btn-success .badge{color:#fff}.label{display:inline-block;padding:5px 10px;margin:2px;font-size:13px;font-weight:400;background-color:#999}.label.label-sm{font-size:12px;padding:3px 8px 4px 8px;margin-top:0;border-radius:3px}.label.label-ignore{background-color:#e5e5e5;color:#aaa;text-shadow:-1px -1px 1px #fff}.label.label-info{background-color:#33b7d0}.label.label-primary{background-color:#348fe2}.label.label-success{background-color:#368142}.label.label-warning{background-color:#f57523}.label.label-danger{background-color:#d34242}.progress.progress-sm{height:18px;margin-bottom:2px;background-color:#aaa}.progress.progress-sm.button{cursor:pointer}.progress.progress-sm .progress-bar{display:block;font-size:11px;float:none}.modal-dialog .modal-content .modal-header{background-color:#f7f7f7}.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{padding-right:5px;padding-left:5px}.input-group :-moz-placeholder{color:#d2d2d2}.input-group ::-moz-placeholder{color:#d2d2d2}.input-group input:-ms-input-placeholder,.input-group textarea:-ms-input-placeholder{color:#d2d2d2}.input-group input::-webkit-input-placeholder,.input-group textarea::-webkit-input-placeholder{color:#d2d2d2}.modal .modal-content{border-radius:0}.modal .modal-header .close{margin-top:-4px;margin-right:-6px}.modal .modal-header .close:hover{color:#9c3023;opacity:1}.modal .modal-header .close:active,.modal .modal-header .close:focus,.modal .modal-header .close:visited{-webkit-appearance:none}.modal .form-horizontal .form-group,.modal .row{margin-left:0;margin-right:0}.alert{border-radius:0;padding:5px;margin-bottom:10px}.dropdown-menu{min-width:0;font-size:13px}.form-control-sm{padding:3px 5px;font-size:13px;height:inherit}.form-group .control-label.require{color:#505050;font-weight:bold}.form-group .control-label.require:before{font-weight:normal;color:#ac4e43;position:absolute;margin-left:-1.2em;margin-top:1px;content:"\f069";font-size:8px;font-family:'FontAwesome'}.form-group .control-desc{padding-top:6px;color:#999}label.form-control-static input{display:inline-block;position:relative;margin-top:4px}.control-desc .popover{max-width:none;font-size:13px}#gritter-notice-wrapper{z-index:9999}.gritter-bottom,.gritter-item,.gritter-top{background:rgba(0,0,0,0.8) !important}.gritter-top{border-top-left-radius:3px;border-top-right-radius:3px}.gritter-bottom{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.gritter-close,.gritter-light .gritter-close{left:auto !important;right:5px !important;top:5px !important;width:16px !important;height:16px !important;line-height:16px !important;display:block !important;border-radius:50%}.gritter-close:before,.gritter-light .gritter-close:before{content:'\f00d' !important;font-family:FontAwesome !important;font-size:9px !important;width:16px !important;height:16px !important;line-height:16px !important;color:#fff !important;text-indent:0 !important;position:absolute !important;text-align:center !important;right:0 !important;top:0 !important}.gritter-title{font-size:13px !important;line-height:16px !important;padding-bottom:5px !important;font-weight:400 !important;color:#fff !important;text-shadow:none !important}.gritter-item{color:#aaa !important;font-size:13px !important;padding:2px 15px 5px !important}.gritter-error .gritter-bottom,.gritter-error .gritter-item,.gritter-error .gritter-top{background:rgba(123,32,32,0.9) !important}.gritter-error .gritter-title{color:#fff !important}.gritter-error .gritter-item{color:#ddd !important}.gritter-error .gritter-close{left:auto !important;right:5px !important;top:5px !important;width:16px !important;height:16px !important;line-height:16px !important;display:block !important;border-radius:50%;background:#e33b3b !important}.gritter-success .gritter-bottom,.gritter-success .gritter-item,.gritter-success .gritter-top{background:rgba(1,65,16,0.9) !important}.gritter-success .gritter-title{color:#ddd !important}.gritter-success .gritter-item{color:#ccc !important}.gritter-success .gritter-close{background:#0eb320 !important}#gritter-notice-wrapper{width:320px;max-width:480px}.page-content-dashboard{padding:20px 25px}.sys-msg{border:1px solid #ff8987;border-radius:5px;background-color:#ffbdb7;padding:10px;margin-bottom:10px;text-align:center;display:none}.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{padding-right:10px;padding-left:10px}.stats{overflow:hidden;color:#686868;background-color:#fff;margin-bottom:10px}.stats.stats-id-host{border-top:5px solid #348fe2;background-color:#e7f1fb}.stats.stats-id-user{border-top:5px solid #f57523;background-color:#feefe6}.stats.stats-id-account{border-top:5px solid #d34242;background-color:#fae7e7}.stats.stats-id-connect{border-top:5px solid #368142;background-color:#def1e1}.stats.stats-box{position:relative;height:98px;box-shadow:1px 1px 2px rgba(0,0,0,0.3)}.stats.stats-box .stats-content{padding-left:20px}.stats.stats-box .stats-icon{font-size:130px;line-height:130px;top:5px;right:-40px;position:absolute;color:rgba(0,0,0,0.07)}.stats.stats-box .stats-name{font-size:16px;font-weight:500;padding-top:10px;color:rgba(0,0,0,0.6)}.stats.stats-box .stats-value{color:rgba(0,0,0,0.6);font-size:42px;font-weight:300;white-space:nowrap;padding-left:20px}.stats.stats-bar{position:relative;height:280px;padding:8px;box-shadow:1px 1px 2px rgba(0,0,0,0.3)}.stats.stats-bar .stats-name{font-size:14px;font-weight:500;color:rgba(0,0,0,0.6)}.stats.stats-bar .stats-value{margin-top:5px}.stats.stats-first{border-left:none}.stats a{color:#eee;color:rgba(255,255,255,0.7)}.stats a:hover{color:#fff}/*# sourceMappingURL=dashboard.css.map */ \ No newline at end of file +@charset "utf-8";html{font-size:13px}body{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background-color:#e9e9e9;color:#333}html,body{height:100%}#page-container{min-width:1260px}a{text-decoration:none}a:link{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}a:visited{text-decoration:none}select{outline:none}label{font-weight:normal}.clear-float{clear:both}.bigger{font-size:120%}.normal-text{font-size:13px;color:#333}.mono{font-family:Monaco,Lucida Console,Consolas,Courier,'Courier New',monospace}.important{color:#d45f1c}.error{color:#d34242}.bold{font-weight:bold}hr.hr-sm{padding:1px 0;margin:5px 0;border-top:1px dashed #c4c4c4}ul{list-style:none}ul.list{margin:0;padding:3px 0 5px 0}ul.list li{margin:3px 3px 5px 10px}.btn-single-line{white-space:nowrap}.btn-single-line .btn:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.btn-single-line .btn:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.remote-action-group{margin-bottom:3px;height:28px}.remote-action-group ul{display:block;height:28px;margin:0;padding:0}.remote-action-group ul li{float:left;position:relative;display:block;height:28px;padding:4px 5px;background-color:#eee;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.remote-action-group ul li.remote-action-btn{background:none;padding:0;border:none}.remote-action-group ul li.remote-action-input{background:none;padding:4px 0}.remote-action-group ul li.remote-action-input select{border:none}.remote-action-group ul li.remote-action-chk-protocol{width:86px}.remote-action-group ul li.remote-action-state{text-align:center;white-space:nowrap}.remote-action-group ul li.remote-action-state.state-disabled{background-color:#e5e5e5;color:#aaa;text-shadow:-1px -1px 1px #fff}.remote-action-group ul li.remote-action-state.state-disabled>i.fa{color:#b53a2f}.remote-action-group ul li.remote-action-username,.remote-action-group ul li.remote-action-name,.remote-action-group ul li.remote-action-protocol{width:96px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remote-action-group ul li.remote-action-username{font-size:90%;color:#999}.remote-action-group ul li.remote-action-name,.remote-action-group ul li.remote-action-protocol,.remote-action-group ul li.remote-action-chk-protocol{color:#000}.remote-action-group ul li.remote-action-name,.remote-action-group ul li.remote-action-chk-protocol{font-weight:bold}.remote-action-group ul li.remote-action-password,.remote-action-group ul li.remote-action-sshkey,.remote-action-group ul li.remote-action-noauth{text-align:center;padding:4px 8px;width:45px}.remote-action-group ul li.remote-action-password{background-color:#e3ffe3;color:#999}.remote-action-group ul li.remote-action-sshkey{background-color:#fbe9c8;color:#666}.remote-action-group ul li.remote-action-noauth{background-color:#e0e0e0;color:#666}.remote-action-group ul li .btn{line-height:1.5;margin:0;padding:4px 8px;font-size:12px;border-radius:0}.remote-action-group ul li label{padding:0;display:block;float:left;margin-top:1px;cursor:pointer}.remote-action-group ul li input[type=checkbox]{display:block;float:left;margin:3px 5px 0 0}.remote-action-group ul li select{margin-top:-3px}.remote-action-group ul li:first-child{border-left:1px solid #ccc;border-top-left-radius:4px;border-bottom-left-radius:4px}.remote-action-group ul li.remote-action-btn:first-child{border:none}.remote-action-group ul li.remote-action-btn:first-child .btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.remote-action-group ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.remote-action-group ul li.remote-action-btn:last-child{border:none}.remote-action-group ul li.remote-action-btn:last-child .btn{border-top-right-radius:4px;border-bottom-right-radius:4px}.remote-info-group{margin-bottom:3px;height:28px}.remote-info-group ul{display:inline-block;height:28px;margin:0;padding:0}.remote-info-group ul li{float:left;position:relative;display:block;height:28px;padding:4px 5px;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.remote-info-group ul li.remote-action-btn{background:none;padding:0;border:none}.remote-info-group ul li.remote-action-input{background:none;padding:4px 0}.remote-info-group ul li.remote-action-input select{border:none}.remote-info-group ul li label{padding:0;display:block;float:left;margin-top:1px;cursor:pointer}.remote-info-group ul li select{margin-top:-3px}.remote-info-group ul li:first-child{border-left:1px solid #ccc;border-top-left-radius:4px;border-bottom-left-radius:4px}.remote-info-group ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}hr.small{margin:5px 0}.dlg-protocol-group{margin-bottom:3px}.dlg-protocol-group ul{display:block;height:28px;margin:0;padding:0}.dlg-protocol-group ul li{float:left;position:relative;display:block;height:28px;padding:4px 5px;background-color:#eee;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.dlg-protocol-group ul li.item-name{width:120px}.dlg-protocol-group ul li.item-btn{background:none;padding:0;border:none}.dlg-protocol-group ul li.item-input{background:none;border:none;padding:0}.dlg-protocol-group ul li .form-control{line-height:1.5;margin:0;padding:4px 5px;font-size:12px;height:28px;border-radius:0;border-left:none;width:100px}.dlg-protocol-group ul li label{padding:0;display:block;float:left;margin-top:1px;cursor:pointer}.dlg-protocol-group ul li input[type=checkbox]{display:block;float:left;margin:3px 5px 0 0}.dlg-protocol-group ul li:first-child{border-left:1px solid #ccc;border-top-left-radius:4px;border-bottom-left-radius:4px}.dlg-protocol-group ul li:first-child .btn,.dlg-protocol-group ul li:first-child .form-control{border-top-left-radius:4px;border-bottom-left-radius:4px}.dlg-protocol-group ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.dlg-protocol-group ul li:last-child .btn,.dlg-protocol-group ul li:last-child .form-control{border-top-right-radius:4px;border-bottom-right-radius:4px}.os-icon-windows:after{color:#00bcf6;content:"\f17a";font-size:18px;width:24px;height:24px;line-height:24px;display:inline-block;font-family:'FontAwesome'}.os-icon-linux:after{color:#fff;content:"\f17c";font-size:18px;width:24px;height:24px;line-height:24px;background-color:#333;border-radius:50%;display:inline-block;font-family:'FontAwesome'}.os-icon-macos:after{color:#a7a7a7;content:"\f179";font-size:20px;width:24px;height:24px;line-height:24px;display:inline-block;font-family:'FontAwesome'}.os-icon-ubuntu:after,.os-icon-debian:after,.os-icon-centos:after,.os-icon-redhat:after{content:" ";width:24px;height:24px;line-height:24px;display:inline-block}.os-icon-ubuntu:after{background:url(../img/os-icon/ubuntu-24x24.png) no-repeat}.os-icon-debian:after{background:url(../img/os-icon/debian-24x24.png) no-repeat}.os-icon-centos:after{background:url(../img/os-icon/centos-24x24.png) no-repeat}.os-icon-redhat:after{background:url(../img/os-icon/redhat-24x24.png) no-repeat}.disable-bg{position:absolute;background:url(../img/css/disable-bg.png) repeat;opacity:.45;z-index:990}.disable-message{display:inline-block;font-size:160%;position:absolute;padding:20px 40px;border:1px solid #2b0002;background-color:#65181a;color:#fff;opacity:.85;z-index:991}.btn-group-sm>.btn{padding:3px 5px;font-size:12px}.pop-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040}.form-group{margin-bottom:5px}.badge{padding:3px 6px;border-radius:10px;font-size:13px;font-weight:400;background-color:#999}.badge.badge-sm{font-size:12px;padding:3px 5px;margin-top:0;border-radius:8px;text-shadow:none}.badge.badge-sup{margin-left:-8px;margin-top:-16px}.badge.badge-ignore{background-color:#e5e5e5;color:#999}.badge.badge-info{background-color:#33b7d0}.badge.badge-primary{background-color:#348fe2}.badge.badge-success{background-color:#368142}.badge.badge-warning{background-color:#f57523}.badge.badge-danger{background-color:#d34242}.btn-success .badge{color:#fff}.label{display:inline-block;padding:5px 10px;margin:2px;font-size:13px;font-weight:400;background-color:#999}.label.label-sm{font-size:12px;padding:3px 8px 4px 8px;margin-top:0;border-radius:3px}.label.label-ignore{background-color:#e5e5e5;color:#aaa;text-shadow:-1px -1px 1px #fff}.label.label-info{background-color:#33b7d0}.label.label-primary{background-color:#348fe2}.label.label-success{background-color:#368142}.label.label-warning{background-color:#f57523}.label.label-danger{background-color:#d34242}.progress.progress-sm{height:18px;margin-bottom:2px;background-color:#aaa}.progress.progress-sm.button{cursor:pointer}.progress.progress-sm .progress-bar{display:block;font-size:11px;float:none}.modal-dialog .modal-content .modal-header{background-color:#f7f7f7}.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{padding-right:5px;padding-left:5px}.input-group :-moz-placeholder{color:#d2d2d2}.input-group ::-moz-placeholder{color:#d2d2d2}.input-group input:-ms-input-placeholder,.input-group textarea:-ms-input-placeholder{color:#d2d2d2}.input-group input::-webkit-input-placeholder,.input-group textarea::-webkit-input-placeholder{color:#d2d2d2}.modal .modal-content{border-radius:0}.modal .modal-header .close{margin-top:-4px;margin-right:-6px}.modal .modal-header .close:hover{color:#9c3023;opacity:1}.modal .modal-header .close:active,.modal .modal-header .close:focus,.modal .modal-header .close:visited{-webkit-appearance:none}.modal .form-horizontal .form-group,.modal .row{margin-left:0;margin-right:0}.alert{border-radius:0;padding:5px;margin-bottom:10px}.dropdown-menu{min-width:0;font-size:13px}.form-control-sm{padding:3px 5px;font-size:13px;height:inherit}.form-group .control-label.require{color:#505050;font-weight:bold}.form-group .control-label.require:before{font-weight:normal;color:#ac4e43;position:absolute;margin-left:-1.2em;margin-top:1px;content:"\f069";font-size:8px;font-family:'FontAwesome'}.form-group .control-desc{padding-top:6px;color:#999}label.form-control-static input{display:inline-block;position:relative;margin-top:4px}.control-desc .popover{max-width:none;font-size:13px}#gritter-notice-wrapper{z-index:9999}.gritter-bottom,.gritter-item,.gritter-top{background:rgba(0,0,0,0.8) !important}.gritter-top{border-top-left-radius:3px;border-top-right-radius:3px}.gritter-bottom{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.gritter-close,.gritter-light .gritter-close{left:auto !important;right:5px !important;top:5px !important;width:16px !important;height:16px !important;line-height:16px !important;display:block !important;border-radius:50%}.gritter-close:before,.gritter-light .gritter-close:before{content:'\f00d' !important;font-family:FontAwesome !important;font-size:9px !important;width:16px !important;height:16px !important;line-height:16px !important;color:#fff !important;text-indent:0 !important;position:absolute !important;text-align:center !important;right:0 !important;top:0 !important}.gritter-title{font-size:13px !important;line-height:16px !important;padding-bottom:5px !important;font-weight:400 !important;color:#fff !important;text-shadow:none !important}.gritter-item{color:#aaa !important;font-size:13px !important;padding:2px 15px 5px !important}.gritter-error .gritter-bottom,.gritter-error .gritter-item,.gritter-error .gritter-top{background:rgba(123,32,32,0.9) !important}.gritter-error .gritter-title{color:#fff !important}.gritter-error .gritter-item{color:#ddd !important}.gritter-error .gritter-close{left:auto !important;right:5px !important;top:5px !important;width:16px !important;height:16px !important;line-height:16px !important;display:block !important;border-radius:50%;background:#e33b3b !important}.gritter-success .gritter-bottom,.gritter-success .gritter-item,.gritter-success .gritter-top{background:rgba(1,65,16,0.9) !important}.gritter-success .gritter-title{color:#ddd !important}.gritter-success .gritter-item{color:#ccc !important}.gritter-success .gritter-close{background:#0eb320 !important}#gritter-notice-wrapper{width:320px;max-width:480px}.page-content-dashboard{padding:20px 25px}.sys-msg{border:1px solid #ff8987;border-radius:5px;background-color:#ffbdb7;padding:10px;margin-bottom:10px;text-align:center;display:none}.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{padding-right:10px;padding-left:10px}.stats{overflow:hidden;color:#686868;background-color:#fff;margin-bottom:10px}.stats.stats-id-host{border-top:5px solid #348fe2;background-color:#e7f1fb}.stats.stats-id-user{border-top:5px solid #f57523;background-color:#feefe6}.stats.stats-id-account{border-top:5px solid #d34242;background-color:#fae7e7}.stats.stats-id-connect{border-top:5px solid #368142;background-color:#def1e1}.stats.stats-box{position:relative;height:98px;box-shadow:1px 1px 2px rgba(0,0,0,0.3)}.stats.stats-box .stats-content{padding-left:20px}.stats.stats-box .stats-icon{font-size:130px;line-height:130px;top:5px;right:-40px;position:absolute;color:rgba(0,0,0,0.07)}.stats.stats-box .stats-name{font-size:16px;font-weight:500;padding-top:10px;color:rgba(0,0,0,0.6)}.stats.stats-box .stats-value{color:rgba(0,0,0,0.6);font-size:42px;font-weight:300;white-space:nowrap;padding-left:20px}.stats.stats-bar{position:relative;height:200px;padding:8px;box-shadow:1px 1px 2px rgba(0,0,0,0.3)}.stats.stats-bar .stats-value{margin-top:5px;height:180px}.stats.stats-first{border-left:none}.stats a{color:#eee;color:rgba(255,255,255,0.7)}.stats a:hover{color:#fff}/*# sourceMappingURL=dashboard.css.map */ \ No newline at end of file diff --git a/server/www/teleport/static/js/dashboard/dashboard.js b/server/www/teleport/static/js/dashboard/dashboard.js index 4bc388b..e3f56ca 100644 --- a/server/www/teleport/static/js/dashboard/dashboard.js +++ b/server/www/teleport/static/js/dashboard/dashboard.js @@ -3,16 +3,20 @@ $app.on_init = function (cb_stack) { $app.MAX_OVERLOAD_DATA = 10 * 60 / 5; $app.dom = { - count_user: $('#count-user') - , count_host: $('#count-host') - , count_acc: $('#count-acc') - , count_conn: $('#count-conn') + count_user: $('#count-user'), + count_host: $('#count-host'), + count_acc: $('#count-acc'), + count_conn: $('#count-conn'), + bar_cpu: $('#bar-cpu'), + bar_mem: $('#bar-mem'), + bar_net: $('#bar-net'), + bar_disk: $('#bar-disk') }; + window.onresize = $app.on_screen_resize; + // refresh basic info every 1m. $app.load_basic_info(); - // refresh overload info every 5m. - //$app.load_overload_info(); $app.ws = null; $app.init_ws(); @@ -23,7 +27,6 @@ $app.on_init = function (cb_stack) { $app.load_basic_info = function () { $tp.ajax_post_json('/dashboard/do-get-basic', {}, function (ret) { - console.log(ret); if (ret.code === TPE_OK) { $app.dom.count_user.text(ret.data.count_user); $app.dom.count_host.text(ret.data.count_host); @@ -44,8 +47,61 @@ $app.load_basic_info = function () { $app.init_sys_status_info = function (data) { var i = 0; - // var t = (Math.floor(Date.now() / 1000) - $app.MAX_OVERLOAD_DATA - 1) * 1000; - console.log(data); + + var grid_cfg = { + show: true, left: 60, right: 20, top: 30, bottom: 20 + }; + + var axis_time_cfg = { + type: 'time', + boundaryGap: false, + splitNumber: 10, + axisLine: {show: false}, + axisTick: {show: false}, + axisLabel: { + margin: 3, + formatter: function (value, index) { + return tp_format_datetime_ms(tp_utc2local_ms(value), 'HH:mm'); + } + } + }; + + var axis_percent_cfg = { + type: 'value', + axisLine: {show: false}, + axisTick: {show: false}, + // min: 0, + // max: 100, + boundaryGap: [0, '60%'], + axisLabel: { + margin: 3, + formatter: function (value, index) { + if (index === 0) + return ''; + return value + '%'; + } + } + }; + + var axis_size_cfg = { + type: 'value', + axisLine: {show: false}, + axisTick: {show: false}, + splitNumber: 5, + boundaryGap: [0, '20%'], + axisLabel: { + margin: 3, + fontSize: 10, + fontFamily: 'Courier New', + formatter: function (value, index) { + if (index === 0) + return ''; + return tp_size2str(value, 1); + } + } + }; + + console.log(axis_size_cfg); //===================================== // CPU @@ -54,39 +110,33 @@ $app.init_sys_status_info = function (data) { $app.bar_cpu_user = []; $app.bar_cpu_sys = []; for (i = 0; i < data.length; i++) { - // var x = t + i * 1000; - $app.bar_cpu_user.push({name: tp_format_datetime(tp_utc2local(data[i].t), 'HH:mm:ss'), value: [tp_utc2local(data[i].t)*1000, data[i].c.u]}); - $app.bar_cpu_sys.push({name: tp_format_datetime(tp_utc2local(data[i].t), 'HH:mm:ss'), value: [tp_utc2local(data[i].t)*1000, data[i].c.s]}); + $app.bar_cpu_user.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].cpu.u]}); + $app.bar_cpu_sys.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].cpu.s]}); } - var clr_user = '#e2524c'; - var clr_user_area = '#f7827a'; - var clr_sys = '#558c5a'; - var clr_sys_area = '#3dc34a'; + var clr_cpu_user = '#e2524c'; + var clr_cpu_user_area = '#f7827a'; + var clr_cpu_sys = '#558c5a'; + var clr_cpu_sys_area = '#3dc34a'; $app.bar_cpu = echarts.init(document.getElementById('bar-cpu')); $app.bar_cpu.setOption({ title: { - // show: false text: 'CPU负载', + left: 'center', top: 0, textStyle: { color: 'rgba(0,0,0,0.5)', fontSize: 14 } }, - color: [clr_sys, clr_user], - grid: { - show: true - , left: 30 - , right: 20 - , top: 30 - , bottom: 20 - }, + useUTC: true, + color: [clr_cpu_sys, clr_cpu_user], + grid: grid_cfg, tooltip: { trigger: 'axis', formatter: function (params) { - return params[0].name + '
'+ params[1].seriesName + ': ' + params[1].value[1] + '%
' + params[0].seriesName + ': ' + params[0].value[1] + '%'; + return params[0].name + '
' + params[1].seriesName + ': ' + params[1].value[1] + '%
' + params[0].seriesName + ': ' + params[0].value[1] + '%'; }, axisPointer: { animation: false @@ -99,20 +149,8 @@ $app.init_sys_status_info = function (data) { {name: '用户', icon: 'rect'} ] }, - xAxis: { - type: 'time', - boundaryGap: false, - splitNumber: 10, - axisLine: {show: false} - }, - yAxis: { - type: 'value', - axisLine: {show: false}, - min: 0, - max: 100, - containLabel: true - - }, + xAxis: axis_time_cfg, + yAxis: axis_percent_cfg, series: [ { name: '系统', @@ -126,10 +164,10 @@ $app.init_sys_status_info = function (data) { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, - color: clr_sys + color: clr_cpu_sys }, { offset: 1, - color: clr_sys_area + color: clr_cpu_sys_area }]) } }, @@ -144,10 +182,10 @@ $app.init_sys_status_info = function (data) { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, - color: clr_user + color: clr_cpu_user }, { offset: 1, - color: clr_user_area + color: clr_cpu_user_area }]) } }, @@ -162,7 +200,7 @@ $app.init_sys_status_info = function (data) { $app.bar_mem_used = []; for (i = 0; i < data.length; i++) { - $app.bar_mem_used.push({name: tp_format_datetime(tp_utc2local(data[i].t), 'HH:mm:ss'), value: [tp_utc2local(data[i].t)*1000, tp_digital_precision(data[i].m.u * 100 / data[i].m.t, 1)]}); + $app.bar_mem_used.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, tp_digital_precision(data[i].mem.u * 100 / data[i].mem.t, 1)]}); } var clr_mem = '#5671e2'; @@ -172,41 +210,39 @@ $app.init_sys_status_info = function (data) { $app.bar_mem.setOption({ title: { text: '内存用量', + left: 'center', top: 0, textStyle: { color: 'rgba(0,0,0,0.5)', fontSize: 14 } }, + useUTC: true, color: [clr_mem], - grid: { - show: true - , left: 30 - , right: 20 - , top: 30 - , bottom: 20 - }, + grid: grid_cfg, tooltip: { trigger: 'axis', formatter: function (params) { - return params[0].name + ': '+ params[0].value[1] + '%'; + return params[0].name + ': ' + params[0].value[1] + '%'; }, - axisPointer: { - animation: false - } - }, - xAxis: { - type: 'time', - boundaryGap: false, - splitNumber: 10, - axisLine: {show: false} + axisPointer: {animation: false} }, + xAxis: axis_time_cfg, yAxis: { type: 'value', axisLine: {show: false}, + axisTick: {show: false}, min: 0, max: 100, - containLabel: true + // boundaryGap: [0, '60%'], + axisLabel: { + margin: 3, + formatter: function (value, index) { + if (index === 0) + return ''; + return value + '%'; + } + } }, series: [ { @@ -232,6 +268,141 @@ $app.init_sys_status_info = function (data) { } ] }); + + //===================================== + // Network + //===================================== + + $app.bar_net_recv = []; + $app.bar_net_sent = []; + for (i = 0; i < data.length; i++) { + $app.bar_net_recv.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].net.r]}); + $app.bar_net_sent.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].net.s]}); + } + + var clr_net_recv = '#e2524c'; + var clr_net_sent = '#558c5a'; + + $app.bar_net = echarts.init(document.getElementById('bar-net')); + $app.bar_net.setOption({ + title: { + text: '网络流量', + left: 'center', + top: 0, + textStyle: { + color: 'rgba(0,0,0,0.5)', + fontSize: 14 + } + }, + useUTC: true, + color: [clr_net_recv, clr_net_sent], + grid: grid_cfg, + tooltip: { + trigger: 'axis', + formatter: function (params) { + return params[0].name + '
' + params[1].seriesName + ': ' + tp_size2str(params[1].value[1], 2) + '
' + params[0].seriesName + ': ' + tp_size2str(params[0].value[1], 2); + }, + axisPointer: { + animation: false + } + }, + legend: { + right: 20, + data: [ + {name: '发送', icon: 'rect'}, + {name: '接收', icon: 'rect'} + ] + }, + xAxis: axis_time_cfg, + yAxis: axis_size_cfg, + series: [ + { + name: '接收', + type: 'line', smooth: true, symbol: 'none', stack: 'a', showSymbol: false, + lineStyle: { + normal: { + width: 1 + } + }, + data: $app.bar_net_recv + }, + { + name: '发送', type: 'line', smooth: true, symbol: 'none', stack: 'b', showSymbol: false, + lineStyle: { + normal: {width: 1} + }, + data: $app.bar_net_sent + } + ] + }); + + //===================================== + // Disk IO + //===================================== + + $app.bar_disk_read = []; + $app.bar_disk_write = []; + for (i = 0; i < data.length; i++) { + $app.bar_disk_read.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].disk.r]}); + $app.bar_disk_write.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].disk.w]}); + } + + var clr_disk_read = '#558c5a'; + var clr_disk_write = '#e2524c'; + + $app.bar_disk = echarts.init(document.getElementById('bar-disk')); + $app.bar_disk.setOption({ + title: { + text: '磁盘读写', + left: 'center', + top: 0, + textStyle: { + color: 'rgba(0,0,0,0.5)', + fontSize: 14 + } + }, + useUTC: true, + color: [clr_disk_read, clr_disk_write], + grid: grid_cfg, + tooltip: { + trigger: 'axis', + formatter: function (params) { + return params[0].name + '
' + params[1].seriesName + ': ' + tp_size2str(params[1].value[1], 2) + '
' + params[0].seriesName + ': ' + tp_size2str(params[0].value[1], 2); + }, + axisPointer: { + animation: false + } + }, + legend: { + right: 20, + data: [ + {name: '读取', icon: 'rect'}, + {name: '写入', icon: 'rect'} + ] + }, + xAxis: axis_time_cfg, + yAxis: axis_size_cfg, + series: [ + { + name: '读取', + type: 'line', smooth: true, symbol: 'none', stack: 'a', showSymbol: false, + lineStyle: { + normal: { + width: 1 + } + }, + data: $app.bar_disk_read + }, + { + name: '写入', type: 'line', smooth: true, symbol: 'none', stack: 'b', showSymbol: false, + lineStyle: { + normal: {width: 1} + }, + data: $app.bar_disk_write + } + ] + }); + }; $app.init_ws = function () { @@ -263,19 +434,50 @@ $app.init_ws = function () { if (t.method === 'subscribe' && t.param === 'sys_status') { $app.bar_cpu_user.shift(); - $app.bar_cpu_user.push({name: tp_format_datetime(tp_utc2local(t.data.t), 'HH:mm:ss'), value: [tp_utc2local(t.data.t) * 1000, t.data.c.u]}); + $app.bar_cpu_user.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.cpu.u]}); $app.bar_cpu_sys.shift(); - $app.bar_cpu_sys.push({name: tp_format_datetime(tp_utc2local(t.data.t), 'HH:mm:ss'), value: [tp_utc2local(t.data.t) * 1000, t.data.c.s]}); + $app.bar_cpu_sys.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.cpu.s]}); $app.bar_cpu.setOption( {series: [{data: $app.bar_cpu_sys}, {data: $app.bar_cpu_user}]} ); $app.bar_mem_used.shift(); - $app.bar_mem_used.push({name: tp_format_datetime(tp_utc2local(t.data.t), 'HH:mm:ss'), value: [tp_utc2local(t.data.t) * 1000, Math.round(t.data.m.u / t.data.m.t * 100, 2)]}); + $app.bar_mem_used.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, Math.round(t.data.mem.u / t.data.mem.t * 100, 2)]}); $app.bar_mem.setOption( {series: [{data: $app.bar_mem_used}]} ); + $app.bar_net_recv.shift(); + $app.bar_net_recv.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.net.r]}); + $app.bar_net_sent.shift(); + $app.bar_net_sent.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.net.s]}); + $app.bar_net.setOption( + {series: [{data: $app.bar_net_recv}, {data: $app.bar_net_sent}]} + ); + + $app.bar_disk_read.shift(); + $app.bar_disk_read.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.disk.r]}); + $app.bar_disk_write.shift(); + $app.bar_disk_write.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.disk.w]}); + $app.bar_disk.setOption( + {series: [{data: $app.bar_disk_read}, {data: $app.bar_disk_write}]} + ); } }; }; + +$app.on_screen_resize = function () { + // console.log('avail width:', screen.availWidth, 'avail height:', screen.availHeight); + // console.log('page width:', $(document).width(), 'page height:', $(document).height()); + // console.log('window width:', $(window).width(), 'window height:', $(window).height()); + // console.log('client width:', $(window).innerWidth(), 'client height:', $(window).innerHeight()); + + // var win = window, d = document, e = d.documentElement, b = d.getElementsByTagName('body')[0], + // w = win.innerWidth || e.clientWidth || b.clientWidth, + // h = win.innerHeight || e.clientHeight || b.clientHeight; + + $app.bar_cpu.resize({width: 'auto', height: 'auto'}); + $app.bar_mem.resize({width: 'auto', height: 'auto'}); + $app.bar_net.resize({width: 'auto', height: 'auto'}); + $app.bar_disk.resize({width: 'auto', height: 'auto'}); +}; diff --git a/server/www/teleport/static/js/tp-utils.js b/server/www/teleport/static/js/tp-utils.js index 655d1ba..d41bef7 100644 --- a/server/www/teleport/static/js/tp-utils.js +++ b/server/www/teleport/static/js/tp-utils.js @@ -128,12 +128,17 @@ function tp_get_cookie(name) { } function tp_utc2local(timestamp) { - //console.log('utc_to_local:', timestamp); var d = new Date(timestamp * 1000); var _local = d.getTime() - (d.getTimezoneOffset() * 60000); return Math.round(_local / 1000); } +function tp_utc2local_ms(timestamp) { + var d = new Date(timestamp); + var _local = d.getTime() - (d.getTimezoneOffset() * 60000); + return Math.round(_local); +} + function tp_local2utc(timestamp) { var ts = timestamp || Math.floor(Date.now() / 1000); var d = new Date(ts * 1000); @@ -141,8 +146,8 @@ function tp_local2utc(timestamp) { return Math.round(_utc / 1000); } -function tp_format_datetime(timestamp, format) { - var d = new Date(timestamp * 1000); +function tp_format_datetime_ms(timestamp, format) { + var d = new Date(timestamp); //return '' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); var fmt = format || 'yyyy-MM-dd HH:mm:ss'; @@ -168,6 +173,10 @@ function tp_format_datetime(timestamp, format) { return fmt; } +function tp_format_datetime(timestamp, format) { + return tp_format_datetime_ms(timestamp * 1000, format); +} + var base64KeyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; function tp_base64_encode(input) { @@ -300,20 +309,20 @@ function tp_gen_password(len) { var have_CHAR = false; var have_char = false; var have_num = false; - for(;;) { + for (; ;) { ret = ''; for (i = 0; i < len; i++) { var idx = Math.floor(Math.random() * _chars.length); - if(idx === 0) + if (idx === 0) have_CHAR = true; - else if(idx === 1) + else if (idx === 1) have_char = true; else have_num = true; ret += _chars[idx].charAt(Math.floor(Math.random() * _chars_len[idx])); } - if(have_CHAR && have_char && have_num) + if (have_CHAR && have_char && have_num) break; } diff --git a/server/www/teleport/static/less/dashboard.less b/server/www/teleport/static/less/dashboard.less index 817bf91..97011e1 100644 --- a/server/www/teleport/static/less/dashboard.less +++ b/server/www/teleport/static/less/dashboard.less @@ -24,142 +24,6 @@ padding-left: 10px; } -// dashboard -//.widget { -// overflow: hidden; -// border-radius: 3px; -// padding: 15px; -// margin-bottom: 20px; -// color: #fff; -// -// &.widget-stats { -// position: relative; -// } -// -// .stats-icon { -// font-size: 52px; -// top: 12px; -// right: 21px; -// width: 56px; -// height: 56px; -// text-align: center; -// line-height: 56px; -// margin-left: 15px; -// color: #fff; -// position: absolute; -// opacity: .2; -// } -// .stats-title { -// color: #fff; -// color: rgba(255, 255, 255, .6); -// } -// .stats-split { -// height: 2px; -// margin: 0 -15px 10px; -// background: rgba(0, 0, 0, .2); -// } -// .stats-content { -// font-size: 24px; -// font-weight: 300; -// margin-bottom: 10px; -// } -// .stats-desc { -// display: inline-block; -// color: #fff; -// color: rgba(255, 255, 255, .6); -// } -// .stats-action { -// display: inline-block; -// float: right; -// } -// -// a { -// color: #eee; -// color: rgba(255, 255, 255, .7); -// &:hover { -// color: #fff; -// } -// } -// -// &.widget-info { -// background-color: @color-bg-info; -// } -// &.widget-primary { -// background-color: @color-bg-primary; -// } -// -// &.widget-success { -// background-color: @color-bg-success; -// } -// &.widget-warning { -// background-color: @color-bg-warning; -// } -// &.widget-danger { -// background-color: @color-bg-danger; -// } -//} -// -//.panel { -// border: none; -// box-shadow: none; -// border-radius: 3px; -// -// .panel-heading { -// padding: 6px 15px; -// color: #fff; -// // border-bottom-width: 2px; -// // border-bottom-color: rgba(0, 0, 0, .2); -// -// .panel-title { -// font-size: 14px; -// } -// .panel-heading-btn { -// float: right; -// -// .btn { -// display: inline-block; -// padding: 0; -// border: none; -// text-align: center; -// -// &.btn-xs { -// width: 18px; -// height: 18px; -// line-height: 18px; -// font-size: 12px; -// } -// &.btn-circle { -// border-radius: 50%; -// } -// } -// } -// } -//} -// -//.place-holder-h200 { -// width: 100%; -// height: 300px; -// background-color: #eee; -// border: 1px solid #ccc; -// line-height: 200px; -// text-align: center; -//} -// -//.dashboard-panel2-holder { -// width: 100%; -// height: 1150px; -// background-color: #eee; -// border: 1px solid #ccc; -// line-height: 200px; -// text-align: center; -//} -// -//.dashboard-panel-time { -// color: #cecece; -//} -// - - .stats { overflow: hidden; //padding: 15px; @@ -279,7 +143,7 @@ &.stats-bar { position: relative; - height: 280px; + height: 200px; padding:8px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); @@ -287,14 +151,15 @@ //padding-left: 100px; } - .stats-name { - font-size: 14px; - font-weight: 500; - //color: #1f1f1f; - color: rgba(0, 0, 0, 0.6); - } + //.stats-name { + // font-size: 14px; + // font-weight: 500; + // //color: #1f1f1f; + // color: rgba(0, 0, 0, 0.6); + //} .stats-value { margin-top: 5px; + height: 180px; //color: #000000; //color: rgba(0, 0, 0, 0.6); //font-size: 48px; diff --git a/server/www/teleport/view/dashboard/index.mako b/server/www/teleport/view/dashboard/index.mako index a54bdf7..4232fe3 100644 --- a/server/www/teleport/view/dashboard/index.mako +++ b/server/www/teleport/view/dashboard/index.mako @@ -70,13 +70,13 @@
-
+
-
+
@@ -85,15 +85,13 @@
-
网络流量
-
+
-
网络连接
-
+
diff --git a/server/www/teleport/webroot/app/base/status.py b/server/www/teleport/webroot/app/base/status.py index fb4232c..54a4f3e 100644 --- a/server/www/teleport/webroot/app/base/status.py +++ b/server/www/teleport/webroot/app/base/status.py @@ -1,13 +1,7 @@ # -*- coding: utf-8 -*- -import time -import datetime -import threading import psutil -import json - -from app.base.logger import log -from app.base.utils import tp_timestamp_utc_now +from app.base.utils import tp_timestamp_utc_now, tp_utc_timestamp_ms from app.controller.ws import tp_wss from app.base.cron import tp_corn @@ -31,18 +25,18 @@ class TPSysStatus(object): self._net_sent = 0 def init(self): - t = tp_timestamp_utc_now() - 10 * 60 + t = tp_utc_timestamp_ms() - 10 * 60 * 1000 cnt = int((10 * 60 + self._INTERVAL - 1) / self._INTERVAL) for i in range(cnt): val = { 't': t, - 'c': {'u': 0, 's': 0}, - 'm': {'u': 1, 't': 100}, - 'd': {'r': 0, 'w': 0}, - 'n': {'r': 0, 's': 0} + 'cpu': {'u': 0, 's': 0}, + 'mem': {'u': 1, 't': 100}, + 'disk': {'r': 0, 'w': 0}, + 'net': {'r': 0, 's': 0} } self._history.append(val) - t += self._INTERVAL + t += self._INTERVAL*1000 psutil.cpu_times_percent() net = psutil.net_io_counters(pernic=False) @@ -57,20 +51,15 @@ class TPSysStatus(object): return True def _check_status(self): - # time.sleep(self._interval) - val = {'t': tp_timestamp_utc_now()} + val = {'t': tp_utc_timestamp_ms()} cpu = psutil.cpu_times_percent() - # print(int(cpu.user * 100), int(cpu.system * 100)) - val['c'] = {'u': cpu.user, 's': cpu.system} - # + val['cpu'] = {'u': cpu.user, 's': cpu.system} + mem = psutil.virtual_memory() - val['m'] = {'u': mem.used, 't': mem.total} - # print(mem.total, mem.used, int(mem.used * 100 / mem.total)) + val['mem'] = {'u': mem.used, 't': mem.total} disk = psutil.disk_io_counters(perdisk=False) - # val['d'] = {'r': disk.read_byes, 'w': disk.write_bytes} - # print(disk.read_bytes, disk.write_bytes) _read = disk.read_bytes - self._disk_read _write = disk.write_bytes - self._disk_write self._disk_read = disk.read_bytes @@ -80,8 +69,7 @@ class TPSysStatus(object): _read = 0 if _write < 0: _write = 0 - val['d'] = {'r': int(_read / self._INTERVAL), 'w': int(_write / self._INTERVAL)} - # print(int(_read / self._interval), int(_write / self._interval)) + val['disk'] = {'r': int(_read / self._INTERVAL), 'w': int(_write / self._INTERVAL)} net = psutil.net_io_counters(pernic=False) _recv = net.bytes_recv - self._net_recv @@ -95,8 +83,7 @@ class TPSysStatus(object): _recv = 0 if _sent < 0: _sent = 0 - val['n'] = {'r': int(_recv / self._INTERVAL), 's': int(_sent / self._INTERVAL)} - # print(int(_recv / self._interval), int(_sent / self._interval)) + val['net'] = {'r': int(_recv / self._INTERVAL), 's': int(_sent / self._INTERVAL)} self._history.pop(0) self._history.append(val) diff --git a/server/www/teleport/webroot/app/base/utils.py b/server/www/teleport/webroot/app/base/utils.py index c7a9c1d..5d7f50f 100644 --- a/server/www/teleport/webroot/app/base/utils.py +++ b/server/www/teleport/webroot/app/base/utils.py @@ -169,6 +169,10 @@ def tp_timestamp_utc_now(): return int(datetime.datetime.utcnow().timestamp()) +def tp_utc_timestamp_ms(): + return int(datetime.datetime.utcnow().timestamp()*1000) + + def tp_bytes2string(b, encode='utf8'): for c in range(len(b)): if b[c] == 0: