kitto
v0.4.0
Kitto est un framework pour vous aider à créer des tableaux de bord, écrit en Elixir/React.
La source des tableaux de bord de démonstration peut être trouvée à l'adresse : kittoframework/demo.
Pour commencer à créer le vôtre, lisez ci-dessous.
Installer la dernière archive
mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.9.2.ezElixir : >= 1,3Erlang/OTP : >= 19Node : 14.15.1npm : 6.14.9Il peut fonctionner par inadvertance dans des versions autres que celles ci-dessus, mais il n'aura pas été testé de manière approfondie (voir .travis.yml pour la matrice de construction définie).
Vous pouvez également utiliser l'image Docker officielle.
Veuillez ouvrir un problème pour demander de l'aide pour une plate-forme spécifique.
mix kitto.new < project_name > Installer les dépendances
mix deps.get && npm installDémarrez un serveur Kitto (surveille également les modifications des actifs)
mix kitto.serverEssayez l'exemple de tableau de bord sur : http://localhost:4000/dashboards/sample
Pour les options de configuration et le dépannage, assurez-vous de consulter le wiki.
Kitto est capable de servir plusieurs tableaux de bord. Chacun d’eux est servi à partir d’un chemin de la forme suivante /dashboards/<dashboard_name> .
Un tableau de bord est constitué d'une grille Gridster contenant des widgets React.
Vous trouverez un exemple de tableau de bord sous dashboards/sample .
L'extrait ci-dessous placera un simple widget Text dans le tableau de bord.
< 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 >Les attributs de données les plus importants ici sont
data-widget Sélectionne le widget à utiliser. Voir : Widgetsdata-source Sélectionne la source de données pour remplir le widget. Voir : EmploisLes autres attributs de données sont des options à transmettre en tant qu'accessoires au widget React.
En créant un nouveau tableau de bord à l'aide de mix kitto.new <project_name> vous obtenez quelques exemples de tâches dans le répertoire jobs/ .
Un dossier de travail est structuré comme suit :
# File jobs/random.exs
use Kitto.Job.DSL
job :random , every: :second do
broadcast! :random , % { value: :rand . uniform * 100 |> Float . round }
end Ce qui précède engendrera un processus supervisé qui émettra un événement envoyé par le serveur avec un nom random chaque seconde.
Les tâches peuvent également exécuter des commandes sur le serveur. Les données diffusées à l'aide de commandes se présentent sous la forme {exit_code: integer, stdout: String.t} . Par exemple, le travail suivant diffusera un événement kitto_last_commit avec les résultats de l'instruction curl :
job :kitto_last_commit ,
every: { 5 , :minutes } ,
command: "curl https://api.github.com/repos/kittoframework/kitto/commits ? page = 1 & per_page = 1" Vous pouvez configurer un travail pour qu'il démarre plus tard à l'aide de l'option 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 Les widgets vivent dans widgets/ sont compilés à l'aide de Webpack et sont automatiquement chargés dans les tableaux de bord. Les actifs sont reconstruits en cas de changement dans le développement, mais doivent être compilés pour la production. Voir webpack.config.js pour les options de construction.
Exemple de widget ( 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 >
) ;
}
} ) ; Chaque widget est mis à jour avec les données d'une source spécifiée à l'aide de l'attribut data-source .
distillerie | docker | Héroku | système
Compiler le projet
MIX_ENV=prod mix compileCompiler les actifs pour la production
npm run buildDémarrer le serveur
MIX_ENV=prod mix kitto.serverEn échafaudant un nouveau tableau de bord avec :
mix kitto.new vous obtenez également un Dockerfile .
Créez une image incluant votre code, prête à être déployée.
docker build . -t my-awesome-dashboardGénérer un conteneur de l'image
docker run -i -p 127.0.0.1:4000:4000 -t my-awesome-dashboardVeuillez lire les instructions détaillées dans le wiki.
Veuillez lire le guide de mise à niveau dans le wiki.
mix test mix credoVous avez une question ?
Il est fortement inspiré de shopify/dashing. ❤️
La route vers Erlang/Elixir commence avec Kitto.
Copyright (c) 2017 Dimitris Zorbas, licence MIT. Voir LICENSE.txt pour plus de détails.
Logo de Vangelis Tzortzis (github/site).
