Elixir: Kitto, 一个创建仪表盘(Dashboard)的框架

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

部署

安装依赖

mix deps.get && npm install

启动服务器

mix kitto.server

仪表盘网格

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

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

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

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

最重要的数据属性是:

data-widget 选择要使用的Widget.
data-source 指定Widget的数据来源.

Jobs (作业)

使用 mix kitto.new 创建了一个仪表盘后, 在 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 (
      
        {this.props.title}
        {this.state.text || this.props.text}
        {this.props.moreinfo}
      
    );
  }
});

每一个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都放在这里.