é isso

---

Kitto é um framework para ajudar você a criar dashboards, escrito em Elixir/React.

Demonstração

• Exemplo de painel
• Painel Elixir
• Painel de empregos
• Painel 1080 (otimizado para telas 1080) (fonte)

A fonte dos painéis de demonstração pode ser encontrada em: kittoframework/demo.

Para começar a criar o seu próprio, leia abaixo.

Características

• Jobs são processos supervisionados executados simultaneamente
• Os widgets são codificados na popular biblioteca React
• Usa uma cadeia de ferramentas de ativos moderna, Webpack
• Permite streaming de SSE para vários clientes simultaneamente com baixo consumo de memória/CPU
• Fácil de implantar usando as imagens Docker fornecidas, Heroku (guia) ou Distillery (guia)
• Pode servir ativos em produção
• Mantém estatísticas sobre trabalhos definidos e vem com um painel para monitorá-los (demonstração)
• Pode aplicar recuos exponenciais a trabalhos com falha
• Recarrega o código após alterações no desenvolvimento

Instalação

Instale o arquivo mais recente

mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.9.2.ez

Requisitos

• Elixir : >= 1,3
• Erlang/OTP : >= 19

Ativos

• Node : 14.15.1
• npm : 6.14.9

Pode funcionar inadvertidamente em versões diferentes das acima, mas não terá sido completamente testado (consulte .travis.yml para a matriz de construção definida).

Você também pode usar a imagem oficial do Docker.

Abra um problema para solicitar suporte para uma plataforma específica.

Crie um painel

mix kitto.new < project_name > 

Desenvolvimento

Instalar dependências

mix deps.get && npm install

Inicie um servidor Kitto (também observa alterações de ativos)

mix kitto.server

Experimente o painel de amostra em: http://localhost:4000/dashboards/sample

Para opções de configuração e solução de problemas, consulte o wiki.

A grade do painel

Kitto é capaz de servir vários painéis. Cada um deles é servido a partir de um caminho no seguinte formato /dashboards/ .

Um painel consiste em uma grade Gridster contendo widgets React.

Você encontrará um painel de amostra em dashboards/sample .

O trecho abaixo colocará um widget Text simples no painel.

">

 < 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 >

Os atributos de dados mais importantes aqui são

• data-widget Seleciona o widget a ser usado. Veja: Widgets
• data-source Seleciona a fonte de dados para preencher o widget. Veja: Empregos

Os outros atributos de dados são opções a serem passadas como acessórios para o widget React.

Empregos

Ao criar um novo painel usando mix kitto.new você obtém alguns exemplos de trabalhos no diretório jobs/ .

Um arquivo de trabalho é estruturado da seguinte forma:

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

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

O procedimento acima gerará um processo supervisionado que emitirá um evento enviado pelo servidor com o nome random a cada segundo.

Os trabalhos também podem executar comandos no servidor. A transmissão de dados usando comandos está no formato {exit_code: integer, stdout: String.t} . Por exemplo, o trabalho a seguir transmitirá um evento kitto_last_commit com os resultados da instrução curl :

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

Você pode definir um trabalho para iniciar mais tarde usando a opção 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

Widgets residem em widgets/ são compilados usando Webpack e são carregados automaticamente nos painéis. Os ativos são reconstruídos mediante mudanças no desenvolvimento, mas precisam ser compilados para produção. Consulte webpack.config.js para opções de construção.

Widget de exemplo ( widgets/text/text.js )

{this.props.title}

{this.state.text || this.props.text}

{this.props.moreinfo}

); } });">

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