kitto

---

Kitto は、Elixir / React で書かれたダッシュボードの作成を支援するフレームワークです。

デモ

• サンプルダッシュボード
• Elixir ダッシュボード
• ジョブダッシュボード
• 1080 ダッシュボード (1080 画面用に最適化) (ソース)

デモ ダッシュボードのソースは、kittoframework/demo にあります。

独自の作成を開始するには、以下をお読みください。

特徴

• ジョブは同時に実行される監視対象のプロセスです
• ウィジェットは人気のある React ライブラリでコーディングされています
• 最新のアセット ツール チェーンである Webpack を使用します
• 少ないメモリ/CPU フットプリントで多数のクライアントに SSE を同時にストリーミングできる
• 提供された Docker イメージ、Heraku (ガイド) または 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ウィジェットに設定するデータ ソースを選択します。参照: ジョブ

他のデータ属性は、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}です。たとえば、次のジョブは、 curlステートメントの結果を含むkitto_last_commitイベントをブロードキャストします。

 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属性を使用して指定された 1 つのソースからのデータで更新されます。

導入

導入ガイド

蒸留所 |ドッカー |ヒロク |システムド

プロジェクトをコンパイルする

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

Heroku

wiki の詳細な手順をお読みください。

アップグレード中

Wiki のアップグレード ガイドをお読みください。

貢献する

テストを実行する

mix test 

リンターを実行する

mix credo

サポート

質問がありますか?

• まずはwikiを確認してください
• elixirforum/kitto を参照
• 問題を開く
• gitter.im/kittoframework で質問してください

インスピレーション

これは Shopify/Dashing から大きく影響を受けています。 ❤️

名前について

Erlang / Elixir への道は Kitto から始まります。

ライセンス

著作権 (c) 2017 Dimitris Zorbas、MIT ライセンス。詳細については、LICENSE.txt を参照してください。

Vangelis Tzortzis によるロゴ (github / サイト)。