Kitto 是一个用 Elixir / React 开发的,帮助你创建仪表盘的框架.

用途

主要用作实时监控服务器的各个运行指标. 比如在一个游戏服务器中,Kitto 通过 SSE(服务器事件流) 连接到管理服务器获取服务器的运行状态指标. 达到实时监控的目的.

需要的技术

• React.js

• Elixir

安装

mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.2.3.ez

要求

• Elixir: 1.3

• Erlang/OTP: 19

创建Dashboard

mix kitto.new <project_name>

部署

安装依赖

mix deps.get && npm install

启动服务器

mix kitto.server

仪表盘网格

Kitto 支持多个仪表盘. 每一个仪表盘用路径 /dashboards/<dashboard_name> 表示.

一个仪表盘是由包含 React 组件的 Gridster 网格构成的

在 dashboards/sample 目录下有仪表盘的示例代码.

下面的代码片段在仪表盘中放置一个简单的文本组件.

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  <div class="widget-welcome"
       data-widget="Text"
       data-source="text"
       data-title="Hello"
       data-text="This is your shiny new dashboard."
       data-moreinfo="Protip: You can drag the widgets around!"></div>
</li>

最重要的数据属性是:

• data-widget 选择要使用的Widget.

• data-source 指定Widget的数据来源.

Jobs (作业)

使用 mix kitto.new <project_name> 创建了一个仪表盘后,在 jobs/ 目录下存在一些样例作业.

一个作业文件的结构如下:

# File jobs/random.ex
use Kitto.Job.DSL

job :random,every: :second do
  broadcast! :random,%{value: :rand.uniform * 100 |> Float.round}
end

上面的代码会生成一个被监视的(supervised)进程,这个进程每秒钟生成一个事件.

Widgets

在 widgets/ 目录中的 Widgets 被 Webpack 自动编译并在仪表盘中加载.

Widget 例子(widgets/text/text.js)

import React from 'react';
import Widget from '../../assets/javascripts/widget';

import './text.scss';

Widget.mount(class Text extends Widget {
  render() {
    return (
      <div className={this.props.className}>
        <h1 className="title">{this.props.title}</h1>
        <h3>{this.state.text || this.props.text}</h3>
        <p className="more-info">{this.props.moreinfo}</p>
      </div>
    );
  }
});

每一个Widget使用data-source属性指定的源更新数据.

部署

编译项目

MIX_ENV=prod mix compile

编译用于产品环境的资源

npm run build

启动服务器

MIX_ENV=prod mix kitto.server

项目附带有两个例子

• http://localhost:4000/dashboards/sample

• http://localhost:4000/dashboards/jobs

目录结构

• assets — 所有在仪表盘中使用的Javascript,CSS文件. 参考webpack.config.js文件了解它们是如何加载的.

• dashboards — 一个 .html.eex 文件用于描述仪表盘信息.

• jobs — 数据检索的实现. 用于为Widgets提供数据.

• lib — 由Job使用的Elixir模块.

• widgets — 每一个Widget的所有HTML,SCSS,Javascript都放在这里.