Kitto: A framework for interactive dashboards

I created Kitto a framework for dashboards inspired by Dashing.

The distributed characteristics of Elixir and the low memory footprint (compared to Ruby/Rails) make it ideal for a dashboard server. It feels familiar to users of Dashing and provides a DSL to define jobs.

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

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

The front end uses React/Webpack (which are really widespread) so it should be easy to dive in and code widgets without having to learn yet another framework.

Currently i’m expanding the wiki and general documentation so to make it as straightforward as possible to use.

You’re welcome to try it, make suggestions and if you evaluate it positively, help me get it in awesome elixir.

24 Likes

That looks really interesting … think i will find time to play with it some time this week!

Cheers

Shifters

This looks really awesome, great job!

Thanks! If you think it’s awesome, vote it be part of awesome-elixir so that more people may see it and use it.

Great news! I used a lot of Dashings in Ruby and now it’s final time to use the new one :slight_smile:

Finally bringing my love of analytics, visualisation and elixir. Great job!!

Hi,

can you indicate which OS platform you are using for your demo’s. including Erlang/Elixir/Phoenix/Nodejs versions. I have tried building on ubuntu 16.04 (and windows 7) and run into issues just compiling. (don’t know much about nodejs but ok with elixir/erlang etc).

cheers

Shifters

PS how about a complete mix project with all dependecies etc for the test system?

Thanks a lot for giving it a try.

node/npm versions can be found in the “engines” section of https://github.com/kittoframework/demo/blob/heroku/package.json (planning to have a heroku deployment guide).

I develop it using debian/testing and elixir v1.3 (can’t be sure about the exact erlang/otp version right now, I’m afk). You can also inspect the platform specs in the provided Dockerfile.

Please let me know if the above info helped.

Hi Zorbash,

thanks that did help - repo versions in Ubuntu 16.04 of nodejs and npm were old - i have updated to the latest direct from the web sites and everything compiles and runs fine - how time to play!

cheers for the direction!

Shifters

I’m glad everything worked out for you. I’ll add the supported elixir/erlang/node/npm versions to the readme, maybe even some matrix builds in travis. Let me know if you need further guidance.

I you wish to get started with Kitto, you should probably read this blogpost: https://davejlong.com/2016/11/17/writing-jobs-for-kitto/

Hi @zorbash . Thanks for getting Kitto going, I think it is a really good initiative. While I usually don’t love the “it’s this project rewritten in this technology”, I think Kitto could be a nice exception :wink: Especially if you have plans to make it diverge from Dashing/Smashing and make it more uniquely Elixir-fied.

I did have a question about the data returned from a block job.

For example, there is the text widget:

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>
    );
  }
});

This seems to imply that the only dynamic text I can put in my text widget is the <h3> text with this.state.text . Am I reading that correctly?

Since text is a core, built-in widget, would it be more useful if there was less hard-coded text and more dynamic text? Or is the intention for users to always extend the widgets and the ones in the kitto.new are just examples?

Thanks again

I had plans from the beginning to diverge from Dashing/Smashing and that’s why there’s nowhere in the documentation a promise for compatibility between the projects. Building it on some of the conventions of Dashing though can hopefully make people using it more productive and eager to port existing dashboards to Kitto (and even find an excuse to introduce Elixir at work :innocent:)

Concerning your question abou the text widget, you’re right about it having only one dynamic attribute at the moment.
Changing it to have more or all of its attributes dynamic is quite simple and i wouldn’t mind if the default generated text widget
had all of them dynamic (feel free to submit a PR about this).

Keep in mind that even core widgets are generated in any new dashboard app instead of being bundled somehow to allow the user to see the source code, and adapt it accordingly.

1 Like

New Security release for Kitto.

The latest v0.5.2 release contains various security fixes listed below:

3 security vulnerabilities have been disclosed to us by @griffinbyatt

  1. Directory Traversal
  1. XSS in 404 page
  1. DoS from query parameter conversion to Atoms (since they’re not Garbage-Collected)

Please mind to upgrade.

Special thanks to @davejlong and @griffinbyatt for the their swift and responsible work.

6 Likes

Have you looked at Drab?

With this, you could eliminate React dependency, just clean Elixir code.

Just a thought though :slight_smile:

4 Likes

@vfsoraki Thanks for the suggestion, it’s a really interesting project! But has phoenix as a requirement and Kitto is not built on phoenix, it just uses Plug, also uses Server Sent Events instead of WebSockets.

1 Like