Repository files navigation

Kitto is a framework to help you create dashboards, written inElixir /React.

• Sample Dashboard
• Elixir Dashboard
• Jobs Dashboard
• 1080 Dashboard (optimized for 1080 screens) (source)

The source for the demo dashboards can be found at:kittoframework/demo.

To start creating your own, readbelow.

• Jobs are supervised processes running concurrently
• Widgets are coded in the popularReact library
• Uses a modern asset tool-chain,Webpack
• Allows streaming SSE to numerous clients concurrently with lowmemory/CPU footprint
• Easy to deploy using the provided Docker images, Heroku (guide)orDistillery (guide)
• Can serve assets in production
• Keeps stats about defined jobs and comes with a dashboard to monitor them (demo)
• Can apply exponential back-offs to failing jobs
• Reloads code upon change in development

Install the latest archive

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

It may inadvertently work in versions other than the above, but it won't have beenthoroughly tested (see.travis.yml for the defined build matrix).

You may also use the officialDocker image.

Please open an issue to request support for a specific platform.

mix kitto.new<project_name>

Install dependencies

mix deps.get&& npm install

Start a Kitto server (also watches for assets changes)

mix kitto.server

Try the sample dashboard at:http://localhost:4000/dashboards/sample

For configuration options and troubleshooting be sure to consult thewiki.

Kitto is capable of serving multiple dashboards. Each one of them isserved from a path of the following form/dashboards/<dashboard_name>.

A dashboard consists of aGridster grid containingReact widgets.

You will find a sample dashboard underdashboards/sample.

The snippet below will place a simpleText widget in the dashboard.

<lidata-row="1"data-col="1"data-sizex="2"data-sizey="1"><divclass="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>

The most important data attributes here are

• data-widget Selects the widget to be used. See:Widgets
• data-source Selects the data source to populate the widget. See:Jobs

The other data attributes are options to be passed as props to the React widget.

By creating a new dashboard usingmix kitto.new <project_name> you geta few sample jobs in the directoryjobs/.

A job file is structured as follows:

# File jobs/random.exsuseKitto.Job.DSLjob:random,every::seconddobroadcast!:random,%{value::rand.uniform*100|>Float.round}end

The above will spawn a supervised process which will emit aserver-sentevent with the namerandom every second.

Jobs can also run commands on the server. Data broadcast using commands is inthe form{exit_code: integer, stdout: String.t}. For example the followingjob will broadcast akitto_last_commit event with the results of thecurlstatement:

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

You can set a job to start at a later time using thefirst_at option:

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

Widgets live inwidgets/ are compiled usingWebpack and are automatically loaded in the dashboards.Assets are rebuilt upon change in development, but have to be compiledfor production. Seewebpack.config.js for build options.

Example widget (widgets/text/text.js)

importReactfrom'react';importWidgetfrom'../../assets/javascripts/widget';import'./text.scss';Widget.mount(classTextextendsWidget{render(){return(<divclassName={this.props.className}><h1className="title">{this.props.title}</h1><h3>{this.state.text||this.props.text}</h3><pclassName="more-info">{this.props.moreinfo}</p></div>);}});

Each widget is updated with data from one source specified using thedata-source attribute.

distillery |docker |heroku |systemd

Compile the project

MIX_ENV=prod mix compile

Compile assets for production

npm run build

Start the server

MIX_ENV=prod mix kitto.server

By scaffolding a new dashboard with:

mix kitto.new

you also get aDockerfile.

Build an image including your code, ready to be deployed.

docker build. -t my-awesome-dashboard

Spawn a container of the image

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

Please read the detailedinstructions in the wiki.

Please read theupgrading guide in the wiki.

mixtest

mix credo

Have a question?

• Check thewiki first
• Seeelixirforum/kitto
• Open anissue
• Ask ingitter.im/kittoframework

It is heavily inspired byshopify/dashing. ❤️

Theroad to Erlang / Elixir starts withKitto.

Copyright (c) 2017 Dimitris Zorbas, MIT License.SeeLICENSE.txt for further details.

Logo by Vangelis Tzortzis (github /site).