kitto
v0.4.0
Kitto ist ein Framework zur Erstellung von Dashboards, geschrieben in Elixir/React.
Die Quelle für die Demo-Dashboards finden Sie unter: kittoframework/demo.
Um mit der Erstellung Ihrer eigenen zu beginnen, lesen Sie unten.
Installieren Sie das neueste Archiv
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.9Es kann versehentlich in anderen als den oben genannten Versionen funktionieren, es wurde jedoch nicht gründlich getestet (siehe .travis.yml für die definierte Build-Matrix).
Sie können auch das offizielle Docker-Image verwenden.
Bitte öffnen Sie ein Problem, um Support für eine bestimmte Plattform anzufordern.
mix kitto.new < project_name > Abhängigkeiten installieren
mix deps.get && npm installStarten Sie einen Kitto-Server (achten Sie auch auf Asset-Änderungen)
mix kitto.serverProbieren Sie das Beispiel-Dashboard unter: http://localhost:4000/dashboards/sample aus
Informationen zu Konfigurationsoptionen und Fehlerbehebung finden Sie im Wiki.
Kitto ist in der Lage, mehrere Dashboards bereitzustellen. Jeder von ihnen wird über einen Pfad der folgenden Form bedient: /dashboards/<dashboard_name> .
Ein Dashboard besteht aus einem Gridster-Raster, das React-Widgets enthält.
Ein Beispiel-Dashboard finden Sie unter dashboards/sample .
Mit dem folgenden Snippet wird ein einfaches Text Widget im Dashboard platziert.
< 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 >Die wichtigsten Datenattribute sind hier
data-widget Wählt das zu verwendende Widget aus. Siehe: Widgetsdata-source Wählt die Datenquelle aus, um das Widget zu füllen. Siehe: JobsDie anderen Datenattribute sind Optionen, die als Requisiten an das React-Widget übergeben werden.
Durch das Erstellen eines neuen Dashboards mit mix kitto.new <project_name> erhalten Sie einige Beispieljobs im Verzeichnis jobs/ .
Eine Auftragsdatei ist wie folgt aufgebaut:
# File jobs/random.exs
use Kitto.Job.DSL
job :random , every: :second do
broadcast! :random , % { value: :rand . uniform * 100 |> Float . round }
end Dadurch wird ein überwachter Prozess erzeugt, der jede Sekunde ein vom Server gesendetes Ereignis mit dem Namen random ausgibt.
Jobs können auch Befehle auf dem Server ausführen. Die Datenübermittlung mithilfe von Befehlen hat die Form {exit_code: integer, stdout: String.t} . Der folgende Job sendet beispielsweise ein kitto_last_commit -Ereignis mit den Ergebnissen der curl -Anweisung:
job :kitto_last_commit ,
every: { 5 , :minutes } ,
command: "curl https://api.github.com/repos/kittoframework/kitto/commits ? page = 1 & per_page = 1" Mit der Option first_at können Sie einen Job so einstellen, dass er zu einem späteren Zeitpunkt startet:
# 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 leben in widgets/ werden mit Webpack kompiliert und automatisch in die Dashboards geladen. Assets werden bei Änderungen in der Entwicklung neu erstellt, müssen jedoch für die Produktion zusammengestellt werden. Build-Optionen finden Sie in webpack.config.js .
Beispiel-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 >
) ;
}
} ) ; Jedes Widget wird mit Daten aus einer Quelle aktualisiert, die mithilfe des data-source -Attributs angegeben wird.
Brennerei | Docker | heroku | systemd
Kompilieren Sie das Projekt
MIX_ENV=prod mix compileStellen Sie Assets für die Produktion zusammen
npm run buildStarten Sie den Server
MIX_ENV=prod mix kitto.serverDurch den Aufbau eines neuen Dashboards mit:
mix kitto.new Sie erhalten auch eine Dockerfile .
Erstellen Sie ein Image einschließlich Ihres Codes, das zur Bereitstellung bereit ist.
docker build . -t my-awesome-dashboardErzeugen Sie einen Container des Bildes
docker run -i -p 127.0.0.1:4000:4000 -t my-awesome-dashboardBitte lesen Sie die detaillierten Anweisungen im Wiki.
Bitte lesen Sie die Upgrade-Anleitung im Wiki.
mix test mix credoHaben Sie eine Frage?
Es ist stark von Shopify/Dashing inspiriert. ❤️
Der Weg nach Erlang / Elixir beginnt mit Kitto.
Copyright (c) 2017 Dimitris Zorbas, MIT-Lizenz. Weitere Einzelheiten finden Sie in LICENSE.txt.
Logo von Vangelis Tzortzis (github / site).
