zabbix 新增组件 JS 分析学习

zabbix 的页面显示的组件可以自己编辑 修改和删除，感觉太强大了，来学习了解一下

1. 这是处理添加组件的js dashboard.grid.js

2. 这个是一张操作的图片
   

3. 添加完组件，保存后，再次刷新，会ajax 会自动请求刷新数据 我这边是设置每10秒
   monitoring.widget.hosts.view.php 请求，返回的json 格式的数据
   如图
   
   返回的数据格式 有 header ,body,footer 三部分组成

4. 刷新时间的创建、
   
   在 menupopup.js 中的方法创建createMenuItem

      /**
    * Create menu item.
    *
    * @param string options['label']           link text
    * @param string options['url']             link url
    * @param string options['css']             item class
    * @param array  options['data']            item data as key => value
    * @param array  options['items']           item sub menu
    * @param object options['clickCallback']   item click callback
    *
    * @return object
    */
   function createMenuItem(options) {
   }

5. 为什么组件可以自动刷新
   路径-》layout.htmlpage.header.php-》jsLoader.php（加载js ）->menupopup.js->
   触发
   jQuery('.dashbrd-grid-widget-container')
   .dashboardGrid('setWidgetRefreshRate', options.widgetName, parseInt(currentRate));

   然后

   $.fn.dashboardGrid = function(method) {
       if (methods[method]) {
         //函数回调
           return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
       }
       else if (typeof method === 'object' || !method) {
           return methods.init.apply(this, arguments);
       }
       else {
           $.error('Invalid method "' +  method + '".');
       }
   }
   //  dashboard.grid.js   设置组件刷新频率
   setWidgetRefreshRate: function(widgetid, rf_rate) {
           return this.each(function() {
               var $this = $(this),
                   data = $this.data('dashboardGrid');
   
               $.each(data['widgets'], function(index, widget) {
                   if (widget['widgetid'] == widgetid) {
                       widget['rf_rate'] = rf_rate;
                       startWidgetRefresh($this, data, widget);
                   }
               });
           });
       },
   
       function startWidgetRefresh($obj, data, widget) {
       if (typeof(widget['rf_timeoutid']) != 'undefined') {
           stopWidgetRefreshTimer(widget);
       }
   
       startWidgetRefreshTimer($obj, data, widget, widget['rf_rate']);
      }
      // 定时器
      function startWidgetRefreshTimer($obj, data, widget, rf_rate) {
       alert('time:'+rf_rate);
       if (rf_rate != 0) {
           widget['rf_timeoutid'] = setTimeout(function () {
               if (doAction('timer_refresh', $obj, data, widget) == 0) {
                   // widget was not updated, update it's content
                   updateWidgetContent($obj, data, widget);
               }
               else {
                   // widget was updated, start next timeout.
                   startWidgetRefreshTimer($obj, data, widget, widget['rf_rate']);
               }
           }, rf_rate * 1000);
       }
   }
   // 最终触发 ajax 请求，更新组件的内容
       function updateWidgetContent($obj, data, widget)
   

本作品采用《CC 协议》，转载必须注明作者和本文链接