ELKstack 中文指南
  • ELKstack 中文指南
  • Logstash
    • 入门示例
      • 下载安装
      • hello world
      • 配置语法
      • plugin的安装
      • 长期运行
    • 插件配置
      • input配置
        • file
        • stdin
        • syslog
        • tcp
      • codec配置
        • json
        • multiline
        • collectd
        • netflow
      • filter配置
        • date
        • grok
        • dissect
        • geoip
        • json
        • kv
        • metrics
        • mutate
        • ruby
        • split
        • elapsed
      • output配置
        • elasticsearch
        • email
        • exec
        • file
        • nagios
        • statsd
        • stdout
        • tcp
        • hdfs
    • 场景示例
      • nginx访问日志
      • nginx错误日志
      • postfix日志
      • ossec日志
      • windows系统日志
      • Java日志
      • MySQL慢查询日志
    • 性能与测试
      • generator方式
      • 监控方案
        • logstash-input-heartbeat方式
        • jmx启动参数方式
        • API方式
    • 扩展方案
      • 通过redis传输
      • 通过kafka传输
      • AIX 平台上的logstash-forwarder-java
      • rsyslog
      • nxlog
      • heka
      • fluent
      • Message::Passing
    • 源码解析
      • pipeline流程
      • Event的生成
    • 插件开发
      • utmp插件示例
  • Beats
    • filebeat
    • packetbeat网络流量分析
    • metricbeat
    • winlogbeat
  • ElasticSearch
    • 架构原理
      • segment、buffer和translog对实时性的影响
      • segment merge对写入性能的影响
      • routing和replica的读写过程
      • shard的allocate控制
      • 自动发现的配置
    • 接口使用示例
      • 增删改查操作
      • 搜索请求
      • Painless脚本
      • reindex接口
    • 性能优化
      • bulk提交
      • gateway配置
      • 集群状态维护
      • 缓存
      • fielddata
      • curator工具
      • profile接口
    • rally测试方案
    • 多集群互联
    • 别名的应用
    • 映射与模板的定制
    • puppet-elasticsearch模块的使用
    • 计划内停机升级的操作流程
    • 镜像备份
    • rollover和shrink
    • Ingest节点
    • Hadoop 集成
      • spark streaming交互
    • 权限管理
      • Shield
      • Search-Guard 在 Elasticsearch 2.x 上的运用
    • 监控方案
      • 监控相关接口
        • 集群健康状态
        • 节点状态
        • 索引状态
        • 任务管理
        • cat 接口的命令行使用
      • 日志记录
      • 实时bigdesk方案
      • cerebro
      • zabbix trapper方案
    • ES在运维监控领域的其他玩法
      • percolator接口
      • watcher报警
      • ElastAlert
      • 时序数据库
      • Grafana
      • juttle
      • Etsy的Kale异常检测
  • Kibana 5
    • 安装、配置和运行
    • 生产环境部署
    • discover功能
    • 各visualize功能
      • area
      • table
      • line
      • markdown
      • metric
      • pie
      • tile map
      • vertical bar
    • dashboard功能
    • timelion 介绍
    • console 介绍
    • setting功能
    • 常用sub agg示例
      • 函数堆栈链分析
      • 分图统计
      • TopN的时序趋势图
      • 响应时间的百分占比趋势图
      • 响应时间的概率分布在不同时段的相似度对比
    • 源码解析
      • .kibana索引的数据结构
      • 主页入口
      • discover解析
      • visualize解析
      • dashboard解析
    • 插件
      • 可视化开发示例
      • 后端开发示例
      • 完整app开发示例
    • Kibana报表
  • 竞品对比
  • 推荐阅读
  • 合作名单
  • 捐赠名单
Powered by GitBook
On this page

Was this helpful?

  1. Kibana 5
  2. 源码解析

dashboard解析

plugins/kibana/public/dashboard/index.js 结构跟 visualize 类似,设置两个调用 savedDashboards.get() 方法的 routes,提供一个叫 dashboard-app 的 directive。

savedDashboards 由 plugins/kibana/public/dashboard/services/saved_dashboard.js 提供,调用 es.search 获取数据,生成 savedDashboard 对象,这个对象同样也是继承 savedObject,主要内容是 panelsJSON 数组字段。实现如下:

  module.factory('SavedDashboard', function (courier) {
    _.class(SavedDashboard).inherits(courier.SavedObject);
    function SavedDashboard(id) {
      SavedDashboard.Super.call(this, {
        type: SavedDashboard.type,
        mapping: SavedDashboard.mapping,
        searchSource: SavedDashboard.searchsource,
        id: id,
        defaults: {
          title: 'New Dashboard',
          hits: 0,
          description: '',
          panelsJSON: '[]',
          optionsJSON: angular.toJson({
            darkTheme: config.get('dashboard:defaultDarkTheme')
          }),
          uiStateJSON: '{}',
          version: 1,
          timeRestore: false,
          timeTo: undefined,
          timeFrom: undefined,
          refreshInterval: undefined
        },
        clearSavedIndexPattern: true
      });
    }

可以注意到,这个 panelsJSON 是一个字符串,这跟之前 kbnIndex 提到的是一致的。

dashboard-app 中,最重要的功能,是监听搜索框和过滤条件的变更,我们可以看到 init 函数中有下面这段:

        function updateQueryOnRootSource() {
          var filters = queryFilter.getFilters();
          if ($state.query) {
            dash.searchSource.set('filter', _.union(filters, [{
              query: $state.query
            }]));
          } else {
            dash.searchSource.set('filter', filters);
          }
        }

        $scope.$listen(queryFilter, 'update', function () {
          updateQueryOnRootSource();
          $state.save();
        });

在 index.html 里,实际承载面板的,是下面这行:

  <dashboard-grid></dashboard-grid>

这也是一个 angular directive,通过加载 plugins/kibana/public/dashboard/directives/grid.js 引入的。其中添加面板相关的代码有两部分:

          $scope.$watchCollection('state.panels', function (panels) {
            const currentPanels = gridster.$widgets.toArray().map(function (el) {
              return getPanelFor(el);
            });
            const removed = _.difference(currentPanels, panels);
            const added = _.difference(panels, currentPanels);
            if (added.length) added.forEach(addPanel);
            ...

这段用来监听 $state.panels 数组,一旦有新增面板,调用 addPanel 函数。同理也有删除面板的,这里就不重复贴了。

而 addPanel 函数的实现大致如下:

        var addPanel = function (panel) {
          _.defaults(panel, {
            size_x: 3,
            size_y: 2
          });
          ...
          panel.$scope = $scope.$new();
          panel.$scope.panel = panel;
          panel.$el = $compile('<li><dashboard-panel></li>')(panel.$scope);
          gridster.add_widget(panel.$el, panel.size_x, panel.size_y, panel.col, panel.row);
          ...
        };

这里即验证了之前 kbnIndex 小节中讲的 gridster 默认大小,又引入了一个新的 directive,叫 dashboard-panel。

dashboard-panel 在 plugins/kibana/public/dashboard/components/panel/panel.js 中实现,其中使用了 plugins/kibana/public/dashboard/components/panel/panel.html 页面。页面最后是这么一段:

 <visualize ng-switch-when="visualization"
    vis="savedObj.vis"
    search-source="savedObj.searchSource"
    class="panel-content">
  </visualize>

  <doc-table ng-switch-when="search"
    search-source="savedObj.searchSource"
    sorting="panel.sort"
    columns="panel.columns"
    class="panel-content"
    filter="filter">
  </doc-table>

这里使用的 savedObj 对象,来自 plugins/kibana/public/dashboard/components/panel/lib/load_panel.js 获取的 savedSearch 或者 savedVisualization。获得的对象,以 savedVisualization 为例:

define(function (require) {
  return function visualizationLoader(savedVisualizations, Private) { // Inject services here
    return function (panel, $scope) {
      return savedVisualizations.get(panel.id)
        .then(function (savedVis) {
          savedVis.vis.listeners.click = filterBarClickHandler($scope.state);
          savedVis.vis.listeners.brush = brushEvent;

          return {
            savedObj: savedVis,
            panel: panel,
            editUrl: savedVisualizations.urlFor(panel.id)
          };
        });
    };
  };
});

而 visualize 和 doc-table 两个 directive。这两个正是之前在 visualize 和 discover 插件解析里提到过的,在 components/ 底下实现。

Previousvisualize解析Next插件

Last updated 5 years ago

Was this helpful?