kitto

---

Kitto 是一个帮助您创建仪表板的框架，用 Elixir / React 编写。

演示

• 示例仪表板
• Elixir 仪表板
• 职位仪表板
• 1080 仪表板（针对 1080 屏幕进行了优化）（来源）

演示仪表板的源代码可以在以下位置找到：kittoframework/demo。

要开始创建您自己的，请阅读以下内容。

特征

• 作业是同时运行的受监督进程
• 小部件在流行的 React 库中编码
• 使用现代资产工具链Webpack
• 允许以较低的内存/CPU 占用空间同时将 SSE 流式传输到众多客户端
• 使用提供的 Docker 镜像、Heroku（指南）或 Distillery（指南）轻松部署
• 可以为生产中的资产提供服务
• 保留有关已定义作业的统计信息，并附带一个仪表板来监控它们（演示）
• 可以对失败的作业应用指数退避
• 在开发发生变化时重新加载代码

安装

安装最新的存档

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

要求

• Elixir ：>= 1.3
• Erlang/OTP ：>= 19

资产

• Node ：14.15.1
• npm ：6.14.9

它可能会无意中在上述以外的版本中工作，但它不会经过彻底的测试（有关定义的构建矩阵，请参阅 .travis.yml ）。

您还可以使用官方 Docker 镜像。

请提出问题以请求对特定平台的支持。

创建仪表板

mix kitto.new < project_name > 

发展

安装依赖项

mix deps.get && npm install

启动 Kitto 服务器（还监视资产更改）

mix kitto.server

尝试以下位置的示例仪表板：http://localhost:4000/dashboards/sample

有关配置选项和故障排除，请务必查阅 wiki。

仪表板网格

Kitto 能够为多个仪表板提供服务。其中每一个都通过以下形式的路径提供/dashboards/<dashboard_name> 。

仪表板由包含 React 小部件的 Gridster 网格组成。

您将在dashboards/sample下找到示例仪表板。

下面的代码片段将在仪表板中放置一个简单的Text小部件。

 < 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选择要使用的小部件。请参阅：小部件
• data-source选择用于填充小部件的数据源。请参阅：工作机会

其他数据属性是作为 props 传递给 React 小部件的选项。

工作机会

通过使用mix kitto.new <project_name>创建新的仪表板，您可以在目录jobs/中获得一些示例作业。

作业文件的结构如下：

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

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

上面将生成一个受监督的进程，该进程每秒都会发出一个名称为random服务器发送事件。

作业还可以在服务器上运行命令。使用命令进行数据广播的形式为{exit_code: integer, stdout: String.t} 。例如，以下作业将广播kitto_last_commit事件以及curl语句的结果：

 job :kitto_last_commit ,
    every: { 5 , :minutes } ,
    command: "curl https://api.github.com/repos/kittoframework/kitto/commits ? page = 1 & per_page = 1"

您可以使用first_at选项将作业设置为稍后启动：

 # Delay the first run by 2 minutes
job :random , every: :second , first_at: { 2 , :minutes } do
  broadcast! :random , % { value: :rand . uniform * 100 |> Float . round }
end 

小部件

位于widgets/中的小部件是使用 Webpack 编译的，并自动加载到仪表板中。资产根据开发的变化进行重建，但必须编译用于生产。有关构建选项，请参阅webpack.config.js 。

示例小部件 ( 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 >
    ) ;
  }
} ) ;

每个小部件都使用来自使用data-source属性指定的一个源的数据进行更新。

部署

部署指南

酿酒厂|码头工人 |赫罗库 |系统

编译项目

MIX_ENV=prod mix compile

编译用于生产的资产

npm run build

启动服务器

MIX_ENV=prod mix kitto.server

使用 Docker

通过使用以下内容构建新的仪表板：

mix kitto.new

你还会得到一个Dockerfile 。

构建包含您的代码的映像，准备部署。

docker build . -t my-awesome-dashboard

生成图像的容器

docker run -i -p 127.0.0.1:4000:4000 -t my-awesome-dashboard

赫罗库

请阅读 wiki 中的详细说明。

升级中

请阅读 wiki 中的升级指南。

贡献

运行测试

mix test 

运行 Linter

mix credo

支持

有问题吗？

• 先查一下维基百科
• 参见 Elixirforum/kitto
• 打开一个问题
• 在 gitter.im/kittoframework 中提问

灵感

它深受 shopify/dashing 的启发。 ❤️

关于名字

通往 Erlang / Elixir 的道路从 Kitto 开始。

执照

版权所有 (c) 2017 Dimitris Zorbas，麻省理工学院许可证。有关更多详细信息，请参阅 LICENSE.txt。

徽标由 Vangelis Tzortzis 设计（github / 站点）。