How to gash your deschboard for all occasions?

    In the work of almost every person there are certainly numbers on which everything depends. Website traffic, response time or the number of commits - anything! And if you put these numbers in the most visible place, they immediately become either a great way to quickly make decisions, or just a visual tool for motivation. And the best way to do this is with your own descent board, an information board that can be hung in a prominent place in the office.




    Why are Dashboards needed?


    According to Google Translate, Dashboard is a dashboard. Indeed, on those Dashboards that will be discussed in the article, you can quickly monitor changes in various parameters - as if on the instrument panel of an airplane. Only instead of an airplane we will have a conditional start-up, and instead of altitude, heel and temperature overboard - the number of visitors online, the status of various components of the service and server load.

    In fact, a dashboard is a screen on which actual data is displayed in real time in some beautiful and clear form, for example, in the form of graphs, numbers or diagrams. Such screens hang on the walls of the offices of many cool companies: for example, search queries that users enter at the moment are displayed on the screen in the Yandex office. In many technical startups, the screen for technical guys shows data from all kinds of monitoring. I also wanted to do something similar and was getting ready to code for several days - but it turned out that everything I had done was done before me.

    How to build a dashboard?


    We will build our Dashboard using the free Dashing framework developed in the bowels of Shopify. The embedded architecture implies that a dashboard consists of:

    • from “hands”, that is, a grabber, which at a given interval collects the necessary data;
    • “Brain”, that is, a parser that processes this data in real time;
    • “Muzzles” is a front-end to which these data are displayed in a beautiful and clear way.

    He can collect and process almost any data, and he is accustomed to take it from anywhere: for example, from our server he can remove the load, ping time, the number of registrations on the service; from social networks - the latest posts on the topic, the number of Twitter followers, the most popular reddit topics; from other services - weather, world news, pull requests on github. In general, we can collect and show almost everything we want. And now I’ll tell you exactly how. Watch your hands - repeat the movements.

    Everyone according to Heroka


    Heroku is an ideal platform for hosting Dashing for free.

    To do this, on the Heroku main page, click the Sign Up button, enter the email on the page that appears, in the received letter click on the confirmation link, create a password and click Save. Done! Now we have a small but proud corner in the cloud where you can quickly create elegant web applications.

    The page on which we found ourselves offers to install Heroku Toolbelt - a utility for working with the cloud. We will not deny ourselves this. If you, like mine, Ubuntu or Debian, feel free to write to the console:

    wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh
    

    If Windows or OS X, download exe or pkg from their site and install.

    Secondly, we will need a version control system in order to quickly return everything to its place if we suddenly mess things up, and to know who to give the cap to, if someone else ruins everything. Heroku creators recommend Git for these purposes. Let's not refuse - Git is really good. Installing it is easy:

    sudo apt-get install git
    

    For another operating system, Git just as easily downloads from the official site and is just as easy to install. Now we have everything to start.

    Install Dashing

    To get started, log into Heroku. To do this, open the command line, write:

    heroku login
    

    Enter here the email and password specified during registration. Create a folder for the future repository and go to it.

    mkdir dashing
    cd dashing
    

    Clone the Dashing Git repository:

    git clone https://github.com/Shopify/dashing.git
    

    Now you need to install the application, initialize a new Git repository and commit everything that we just cloned into it:

    bundle install
    git init
    git add .
    git commit -m "My beautiful dashboard"
    

    Create an application in Heroku

    heroku apps:create xakepdashboard
    

    Now it is available at the address xakepdashboard.herokuapp.com, but there is nothing in it. But Heroku utility has created a separate repository branch heroku. We copy our application there.

    git push heroku master
    

    If the console swears at the absence of the Gemfile.lock file despite the fact that it exists, open the file .gitignore

    gedit .gitignore
    

    and delete the line from there. ./Gemfile.lock

    After that, push will succeed, after which the installation will automatically start. Ah, this beautiful age of smart cars! While the installation is in progress, you can have a coffee and mail out to your colleagues that in 20 minutes an incredible beauty and visualization service for visualizing corporate data will be ready.

    First dashboard


    Since Dashing is written in Ruby, creating your first dashboard will be easy. Install the appropriate gem (make sure Ruby 1.9+ is installed on the system):

    $ gem install dashing
    

    Next, we generate a new project:

    $ dashing new sweet_dashboard_project
    

    Go to the sweet_dashboard_project directory and gems gang:

    $ bundle
    

    Now you can start the server:

    $ dashing start
    

    If everything went as it should, then on the 3030th port a web server started up (Dashing is based on Sinatra), so you can safely open localhost: 3030 in your browser.

    Any dashboard comes with demo widgets and the necessary files - together they represent a good starting point to make a dashboard for yourself. There will be several widgets on the screen that you can arbitrarily move and swap. The developers specially selected such a set to demonstrate the variety of data visualization methods: one of the widgets shows a graph of a certain parameter (for example, processor load), the second is more suitable for visualizing the value and its changes in securities, the third visualizes a digital value, but using a circular indicator , similar to a speedometer, in the fourth a plate with certain statistics is displayed, in another one the text is displayed and a countdown is in progress.



    By the way, here is an example of how you can influence the data that is displayed on the Dashboard. Try typing in the console:

    curl -d '{ "authtoken": "YOURAUTH_TOKEN", "text": "Этот текст будет выведен на виджет" }' \http://127.0.0.1:3030/widgets/welcome
    

    and in one of the widgets the text will change. We will talk about this further.

    Dashing structure


    First you need to understand the simple structure of the application:

    • Assets - this folder contains images, fonts, js / coffeescript libraries.
    • Dashboards - each dashboard has its own erb-file, which describes the location and parameters of widgets.
    • Jobs - scripts for collecting data (for example, calling the API of external services).
    • Lib are optional Ruby helper files you may need.
    • Public - static dashboard files (now there are favicon or custom 404th page).
    • Widgets - all HTML / CSS / coffee-code for your own widgets.

    Below is an example of a simple dashboard consisting of two widgets:

    <% content_for(:title) { "Xakep dashboard" } %>
    

    Each widget has two important parameters: data-id (this is the widget identifier, which is further used when updating files), and data-view (indicates the type of widget, in this case both widgets are numeric). Using the grid described by the data-row (row) and data-col (column) parameters, as a constructor, we collect the dashboard from the necessary widgets (by default, Dashin implements clock, comments, graph, iframe, image, list, meter, number, text )



    No one bothers to write your widget (let's not go deep, everything is in the documentation), but at first we definitely have enough of the standard ones. But what is important to deal with is updating the data, which will be further visualized. After all, this is the most important thing.

    How to update data


    Transferring data to widgets is very simple. You just need to specify the widget that you want to use (using its widget-id), and pass it the data in the form of JSON. There are two ways to do this.

    Scheduler Tasks (Jobs)

    Dashing has a special scheduler built-in that parses job scripts located in the jobs folder and performs the actions specified in them with the required frequency. In order to create your job file, use generate job sample_job.

    SCHEDULER.every '1m', :first_in => 0 do |job|
        send_event('karma', { current: rand(1000) })
    end
    

    This task will be executed every minute and send a random value to all widgets with data-id equal to karma. Accordingly, the send_event method (widget_id, json_formatted_data) is used to transfer values.

    Tasks are very useful when you need to take some data from a database or call third-party APIs (Dashing implements data aggregation from Twitter).

    API

    Another way is to update the data directly through HTTP:

    curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "current": 100 }' http://localhost:3030/widgets/karma
    

    For security purposes, a token is used (it is written in config.ru). We already saw an example of such a request when we updated the value of the text field in the dashboard, which Dashing creates by default.



    My office dashboard


    A large community is starting to form around Dashin, on the special pages github.com/Shopify/dashing/wiki/Additional-Widgets and dashing.challengepost.com a lot of ready-made widgets are collected.

    I was able to build a dashboard for my office right away. What did I want to do? It should count down to the release (or until the end of the iteration, if Agile is used). It is also necessary to monitor the number of visitors currently on the site (we will take data from Google Analytics). Along with this, it would be nice to monitor the load on the server in order to understand in time what and where to optimize and what measures to take in order to prevent the site from collapsing suddenly under the wave of visitors or a DDoS attack. And finally, we will follow what is written about us on social networks: display the latest messages from Twitter with the name of our service.

    In the end, I put together the following set of widgets:

    1. Countdown Countdown widget .
    2. Monitoring visitors. Google Analytics Widget .
    3. Server load. Load Averages widget .
    4. Project status in the form of traffic lights. We rewrite the Github status widget for our project .
    5. Twitter Twitter Search widget .



    How to display on TV?


    Of course, a dashboard will be useful just on the computer (you can install it as a start page), but still, traditionally, the image of all this beauty is displayed on the TV. There is even a browser on modern TVs, but I honestly admit that I don’t have one at that, so I haven’t tried this configuration.

    My option is to use the Raspberry Pi for output. It is ideally powered via the TV’s USB port (it is almost everywhere now) and is connected via HDMI. The only problem may be the network connection: if you do not want extra wires, you can use the USB Wi-Fi module (instructions here ). Unfortunately, Dashing turned out to be quite voracious in resources, so I even had to install a special assembly of Chromium - Hexxeh's Chromeand limit the refresh rate of the image.



    I summarize. Labor costs - one day. Programming is almost unnecessary. Necessary iron - Raspberri Pi, one piece. The result is the coolest dashboard in the office, which everyone now wants to improve. Beauty!

    Dashing did not go. What else?


    It is clear that the Dashing framework did not meet the wedge. A quick search on GitHub gave some more interesting developments that can be used.

    • Team Dashboard. Прекрасный фреймворк для создания дэшборда, может поспорить по функциональности с Dashing. Team Dashboard предназначен в первую очередь для технических команд. Так, уже из коробки есть готовые модули для систем мониторинга Errbit, New Relic, Pingdom, систем CI (Continous Integration) Jenkins, Travis CI. Есть модули для визуализации любых данных в виде графиков (используются Graphite и Ganglia), виджет для отображения цифровых данных и их изменения во времени и так далее.
    • Grafana. Богатая по функциональности панель с отображением статистики (и еще редактор графиков). Предлагается в качестве красивой замены Graphite.
    • Linux Dash. Удобная и простая веб-панель для удаленного мониторинга Linux-машины, написанная на PHP. Показывает аптайм, загрузку оперативной памяти, свободное место на диске, подключенных пользователей, установленный софт, запущенные процессы и прочее.
    • Reportr. Персональный дэшборд для визуализации самых разных данных о ежедневной активности: от спортивной активности RunKeeper’а до количества коммитов на GitHub.
    • Personal Dashboard & API. Еще один персональный дэшборд, неприлично простой в реализации.
    • sDashboard. Написанный на JS фреймворк для создания дэшбордов. По сути, представляет собой плагин для jQuery, позволяющий визуализировать различные данные и события.
    • dashku . Full-fledged framework for building dashboards, written on Node.js by Asian developers.



    First published in the Hacker magazine from 04/2014.

    Publish on Issuu.com

    Subscribe to Hacker





    Also popular now: