MyException - 我的异常网
当前位置:我的异常网» 行业应用 » TWaver 3D应用于特大型数据中心(续)

TWaver 3D应用于特大型数据中心(续)

www.MyException.Cn  网友分享于:2015-02-04  浏览:0次
TWaver 3D应用于大型数据中心(续)

在2014年11月份,我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章,该blog比较详细的描述一些常用的功能的实现方法,比如:动态添加机柜,告警,温度,湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了,可是在有些客户觉得这还不够“动态”,都是代码一下生成的,少了一些交互,前些天同事说要不再加点功能,让它更加“动”一些,所以今天我抽了个时间再接着来个“续”——动态的添加机柜,主机和告警。
整体

1、动态的添加机柜,输入机柜ID机柜:
createRack

基本方法同TWaver HTML5 3D应用于大型数据中心中的机柜创建方法一样(其实是完全一样,我只传了一个机柜id和position):

var loadRack = function(pos,type,isEmp,id){
var empRack = true;
    if(isEmp != undefined && isEmp !=null){
        empRack = isEmp;
    }
    var rackType = "s";
    if(type != null && type != undefined){
        rackType = type;
    }
    var addRack = function(element){
        if(element && pos){
            element.setPosition(pos.clone());
            element.rackType = rackType;
            element.setClient('R_ID',id); //给创建好的机柜添加了一个id,后面检索的话可以根据这个id来找到相应的机柜
            if(rackType == 'emptyRack'){
                element.setClient('bycustom',true);
            }
            if(!empRack){
                element.loaded = true;
                window.setTimeout(function(){
                    showChart(element);
                },500);
            }
        }
    };
    var  = './emptyRack.json';
     
    mono.Toolkits.loadTemplateUrl(network.getDataBox(), rack, null, null, addRack);
}

 由于机柜的也想动态,想摆哪里就摆哪里,为了实现这样功能,我就先这么处理了一下,点你点击“添加”后,给network添加了一个监听,当click时获取一下鼠标所点中的位置,把这个位置作为你想要放机柜的位置(这里主要将这个意思,你也可以通过dblclick,或单独弄个button或什么来管理这个功能):

     var addRack = function(e){
        network.getRootView().removeEventListener('click',addRack); //当执行后就把这个监听去掉
        var objects = network.getElementsByMouseEvent(e);
        if (objects.length) {
            var first = objects[0];
            var object3d = first.element;
            var point=first.point;
            var rack_id = txtRack.value;
            var position = new mono.Vec3(point.x, Size.rack_y, point.z); //5710,0,2546
            loadRack(position,'emptyRack',true,rack_id);
        }
    }
 
   //创建时:
    if(type == 'rack'){
            network.getRootView().addEventListener('click',addRack);
//            var position = new mono.Vec3(point.x, Size.rack_y, point.y); //5710,0,2546
//            loadRack(position,'emptyRack',true,rack_id);
   }

 效果图:

在走廊添加3个机柜

2、动态的添加交换机,根据路由器的id,路由器的位置动态的添加交换机(这里选择交换机是因为交换机有许多的端口,告警可以直接从交换机的端口发出,主要是因为交换机具有代表性):
下面是在上面(第一步)创建的机柜(机柜ID为“rid”)中的20u的地方(不知道是不是换算错了,呵呵)添加了一个交换机:
动态添加交换机

代码如下:

var createRouter = function(rack_id,host_id,y){
     var addHost = function(element){
         if(element){
             var rack = findFromClient('R_ID',rack_id);//根据机柜的id找到机柜
             if(!rack) return;
             rack.addChild(element);//把新的主机加到该机柜中
             if(host_id){
                 element.setClient('oid',host_id); //设置新增加的交换机的oid(也就是给它贴了个标签),以便于查找
             }
             element.setPositionX(0);
             element.setPositionY(y);//主机在机柜中的位置
             element.setPositionZ(0);
         }
     }
   mono.Toolkits.loadTemplateUrl(network.getDataBox(),"./ciscoroter.json",null,null,addHost);
 }

 

3、动态的添加告警,可以给路由器中指定的端口添加告警,如下图:
动态添加告警

添加方法基本和上次差不多,在之前的基础上做的简单的改进:

 
var createAlarm = function(alarmid,rid,soid,poid,st){
    var rack = findFromClient('R_ID',rid);
    var alarm;
    var s;
    if(rack) {
        s = findOidfromChildren(rack, soid);
    }else { //当Router没有放到机柜中时,单独再找一下
        s = findFromClient('H_ID',soid); 
        if(!s){
            s = findFromClient('oid',soid);
        }
    }
    if (s) {
        var p = findOidfromChildren(s, poid);
        if (p) {
            alarm = new mono.Alarm(alarmid, p.getId(), st);
        } else {
            alarm = new mono.Alarm(alarmid, s.getId(), st);
        }
    }else if(rack){
       alarm = new mono.Alarm(alarmid, rack.getId(), st);
    }
    if(alarm){
        network.getDataBox().getAlarmBox().add(alarm);
    }
}
 
 var addAlarm = function(rack_id,host_id,port_id,severity_id){
        var severities = mono.AlarmSeverity.severities;
        var severity = severities.get(severity_id);
        createAlarm('c',rack_id,host_id,port_id,severity);
    }

 再给这个路由器和机柜添加东西:

效果图2

文章评论

2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Java程序员必看电影
Java程序员必看电影
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
如何成为一名黑客
如何成为一名黑客
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
鲜为人知的编程真相
鲜为人知的编程真相
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
代码女神横空出世
代码女神横空出世
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
旅行,写作,编程
旅行,写作,编程
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
我的丈夫是个程序员
我的丈夫是个程序员
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员的鄙视链
程序员的鄙视链
程序员应该关注的一些事儿
程序员应该关注的一些事儿
老程序员的下场
老程序员的下场
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为什么程序员都是夜猫子
为什么程序员都是夜猫子
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
那些争议最大的编程观点
那些争议最大的编程观点
程序员都该阅读的书
程序员都该阅读的书
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
每天工作4小时的程序员
每天工作4小时的程序员
一个程序员的时间管理
一个程序员的时间管理
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
漫画:程序员的工作
漫画:程序员的工作
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
 程序员的样子
程序员的样子
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
编程语言是女人
编程语言是女人
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有