TWaver 3D應用於大型數據中心(續)

在2014年11月份，我們當時發了一篇有關TWaver HTML5 3D應用於大型數據中心的文章，該blog比較詳細的描述一些常用的功能的實現方法，比如：動態添加機櫃，告警，溫度，溼度等相關的功能的具體實現。其實會用這些東西的話基本上可以使用我們的TWaver HTML5 3D來實現相關的應用了，可是在有些客戶覺得這還不夠“動態”，都是代碼一下生成的，少了一些交互，前些天同事說要不再加點功能，讓它更加“動”一些，所以今天我抽了個時間再接着來個“續”——動態的添加機櫃，主機和告警。

1、動態的添加機櫃，輸入機櫃ID機櫃：

基本方法同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);
   }

效果圖：

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);
    }

再給這個路由器和機櫃添加東西：