kitto

---

Kitto — это фреймворк, помогающий создавать информационные панели, написанный на Elixir/React.

Демо

• Пример информационной панели
• Панель управления Эликсиром
• Панель вакансий
• 1080 Dashboard (оптимизировано для экранов 1080) (источник)

Исходный код демонстрационных панелей можно найти по адресу: kittoframework/demo.

Чтобы начать создавать свои собственные, читайте ниже.

Функции

• Задания — это контролируемые процессы, выполняемые одновременно.
• Виджеты написаны в популярной библиотеке React.
• Использует современную цепочку инструментов для активов Webpack.
• Позволяет осуществлять потоковую передачу 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.

Для получения информации о вариантах конфигурации и устранении неполадок обязательно обратитесь к вики.

Сетка приборной панели

Kitto способен обслуживать несколько информационных панелей. Каждый из них обслуживается по пути следующего вида /dashboards/<dashboard_name> .

Панель мониторинга состоит из сетки Gridster, содержащей виджеты React.

Вы найдете образец информационной панели в разделе 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} . Например, следующее задание будет транслировать событие 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

Использование Докера

Создав новую панель мониторинга с помощью:

mix kitto.new

вы также получаете Dockerfile .

Создайте образ, включающий ваш код, готовый к развертыванию.

docker build . -t my-awesome-dashboard

Создать контейнер изображения

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

Хероку

Пожалуйста, прочитайте подробные инструкции в вики.

Обновление

Пожалуйста, прочитайте руководство по обновлению в вики.

Содействие

Запустите тесты

mix test 

Запустить Линтер

mix credo

Поддерживать

Есть вопросы?

• Сначала проверьте вики
• См. эликсирфорум/китто.
• Открыть проблему
• Спросите в gitter.im/kittoframework

Вдохновение

Он во многом вдохновлен Shopify/Dashing. ❤️

О названии

Дорога к Эрлангу/Эликсиру начинается с Китто.

ЛИЦЕНЗИЯ

Авторские права (c) Димитрис Зорбас, 2017 г., Лицензия MIT. Дополнительную информацию см. в файле LICENSE.txt.

Логотип Вангелиса Цорциса (github/сайт).