zabbix 新增元件 JS 分析學習

chaofu發表於2019-03-06
元件JS

zabbix 的頁面顯示的元件可以自己編輯 修改和刪除，感覺太強大了，來學習瞭解一下

  1. 這是處理新增元件的js dashboard.grid.js

  2. 這個是一張操作的圖片
    file

  3. 新增完元件，儲存後，再次重新整理，會ajax 會自動請求重新整理資料 我這邊是設定每10秒
    monitoring.widget.hosts.view.php 請求，返回的json 格式的資料
    如圖
    file
    返回的資料格式 有 header ,body,footer 三部分組成

  4. 重新整理時間的建立、
    file
    在 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 協議》，轉載必須註明作者和本文連結

相關文章