kitto

---

Kitto es un marco para ayudarte a crear paneles, escrito en Elixir/React.

Manifestación

• Panel de muestra
• Panel de Elixir
• Panel de empleos
• Panel 1080 (optimizado para pantallas 1080) (fuente)

La fuente de los paneles de demostración se puede encontrar en: kittoframework/demo.

Para comenzar a crear el tuyo propio, lee a continuación.

Características

• Los trabajos son procesos supervisados ​​que se ejecutan simultáneamente.
• Los widgets están codificados en la popular biblioteca React
• Utiliza una cadena de herramientas de activos moderna, Webpack
• Permite transmitir SSE a numerosos clientes simultáneamente con poca memoria/huella de CPU
• Fácil de implementar utilizando las imágenes de Docker proporcionadas, Heroku (guía) o Distillery (guía)
• Puede servir activos en producción.
• Mantiene estadísticas sobre trabajos definidos y viene con un panel para monitorearlos (demostración)
• Puede aplicar retrocesos exponenciales a trabajos fallidos
• Recarga el código ante cambios en el desarrollo.

Instalación

Instalar el último archivo

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

Requisitos

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

Activos

• Node : 14.15.1
• npm : 6.14.9

Es posible que funcione sin darse cuenta en versiones distintas a las anteriores, pero no se habrá probado exhaustivamente (consulte .travis.yml para ver la matriz de compilación definida).

También puedes utilizar la imagen oficial de Docker.

Abra un problema para solicitar soporte para una plataforma específica.

Crear un panel

mix kitto.new < project_name > 

Desarrollo

Instalar dependencias

mix deps.get && npm install

Inicie un servidor Kitto (también vigila los cambios de activos)

mix kitto.server

Pruebe el panel de muestra en: http://localhost:4000/dashboards/sample

Para opciones de configuración y solución de problemas, asegúrese de consultar la wiki.

La cuadrícula del tablero

Kitto es capaz de servir a múltiples paneles. Cada uno de ellos se sirve desde una ruta del siguiente formato /dashboards/<dashboard_name> .

Un panel consta de una cuadrícula Gridster que contiene widgets de React.

Encontrará un panel de muestra en dashboards/sample .

El siguiente fragmento colocará un widget Text simple en el panel.

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

Los atributos de datos más importantes aquí son

• data-widget Selecciona el widget que se utilizará. Ver: widgets
• data-source Selecciona la fuente de datos para completar el widget. Ver: Empleos

Los otros atributos de datos son opciones que se pasan como accesorios al widget React.

Empleos

Al crear un nuevo panel usando mix kitto.new <project_name> obtienes algunos trabajos de muestra en el directorio jobs/ .

Un archivo de trabajo está estructurado de la siguiente manera:

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

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

Lo anterior generará un proceso supervisado que emitirá un evento enviado por el servidor con el nombre random cada segundo.

Los trabajos también pueden ejecutar comandos en el servidor. Los datos transmitidos mediante comandos tienen el formato {exit_code: integer, stdout: String.t} . Por ejemplo, el siguiente trabajo transmitirá un evento kitto_last_commit con los resultados de la declaración curl :

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

Puede configurar un trabajo para que comience más tarde usando la opción 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

Los widgets se encuentran en widgets/ se compilan mediante Webpack y se cargan automáticamente en los paneles. Los activos se reconstruyen según los cambios en el desarrollo, pero deben compilarse para la producción. Consulte webpack.config.js para conocer las opciones de compilación.

Widget de ejemplo ( 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 >
    ) ;
  }
} ) ;

Cada widget se actualiza con datos de una fuente especificada mediante el atributo data-source .

Despliegue

Guías de implementación

destilería | acoplador | héroeku | sistemad

compilar el proyecto

MIX_ENV=prod mix compile

Compilar activos para producción.

npm run build

Iniciar el servidor

MIX_ENV=prod mix kitto.server

Usando ventana acoplable

Creando un nuevo panel con:

mix kitto.new

también obtienes un Dockerfile .

Cree una imagen que incluya su código, lista para ser implementada.

docker build . -t my-awesome-dashboard

Generar un contenedor de la imagen.

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

héroeku

Lea las instrucciones detalladas en la wiki.

Actualización

Lea la guía de actualización en la wiki.

Contribuyendo

Ejecute las pruebas

mix test 

Ejecute el Linter

mix credo

Apoyo

¿Tiene alguna pregunta?

• Primero revisa la wiki
• Ver elixirforum/kitto
• abrir un problema
• Pregunte en gitter.im/kittoframework

Inspiración

Está fuertemente inspirado en Shopify/Dashing. ❤️

Sobre el nombre

El camino hacia Erlang/Elixir comienza con Kitto.

LICENCIA

Copyright (c) 2017 Dimitris Zorbas, Licencia MIT. Consulte LICENCIA.txt para obtener más detalles.

Logotipo de Vangelis Tzortzis (github/sitio).