kitto

---

Kitto adalah kerangka kerja untuk membantu Anda membuat dasbor, ditulis dalam Elixir / React.

Demo

• Contoh Dasbor
• Dasbor Elixir
• Dasbor Pekerjaan
• Dasbor 1080 (dioptimalkan untuk layar 1080) (sumber)

Sumber dasbor demo dapat ditemukan di: kittoframework/demo.

Untuk mulai membuatnya sendiri, baca di bawah.

Fitur

• Pekerjaan adalah proses yang diawasi dan berjalan secara bersamaan
• Widget diberi kode di perpustakaan React yang populer
• Menggunakan rantai alat aset modern, Webpack
• Memungkinkan streaming SSE ke banyak klien secara bersamaan dengan memori/jejak CPU yang rendah
• Mudah diterapkan menggunakan image Docker, Heroku (panduan) atau Distillery (panduan) yang disediakan
• Dapat melayani aset dalam produksi
• Menyimpan statistik tentang pekerjaan yang ditentukan dan dilengkapi dengan dasbor untuk memantaunya (demo)
• Dapat menerapkan kemunduran eksponensial pada pekerjaan yang gagal
• Memuat ulang kode setelah perubahan dalam pengembangan

Instalasi

Instal arsip terbaru

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

Persyaratan

• Elixir : >= 1.3
• Erlang/OTP : >= 19

Aktiva

• Node : 14.15.1
• npm : 6.14.9

Ini mungkin secara tidak sengaja berfungsi di versi selain yang di atas, tetapi belum diuji secara menyeluruh (lihat .travis.yml untuk matriks build yang ditentukan).

Anda juga dapat menggunakan image Docker resmi.

Silakan buka terbitan untuk meminta dukungan untuk platform tertentu.

Buat dasbor

mix kitto.new < project_name > 

Perkembangan

Instal dependensi

mix deps.get && npm install

Mulai server Kitto (juga memperhatikan perubahan aset)

mix kitto.server

Coba contoh dasbor di: http://localhost:4000/dashboards/sample

Untuk opsi konfigurasi dan pemecahan masalah, pastikan untuk membaca wiki.

Kisi dasbor

Kitto mampu melayani banyak dasbor. Masing-masing dilayani dari jalur dengan bentuk berikut /dashboards/<dashboard_name> .

Dasbor terdiri dari grid Gridster yang berisi widget React.

Anda akan menemukan contoh dasbor di bawah dashboards/sample .

Cuplikan di bawah ini akan menempatkan widget Text sederhana di dashboard.

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

Atribut data yang paling penting di sini adalah

• data-widget Memilih widget yang akan digunakan. Lihat: Widget
• data-source Memilih sumber data untuk mengisi widget. Lihat: Pekerjaan

Atribut data lainnya adalah opsi untuk diteruskan sebagai props ke widget React.

Pekerjaan

Dengan membuat dasbor baru menggunakan mix kitto.new <project_name> Anda mendapatkan beberapa contoh pekerjaan di direktori jobs/ .

File pekerjaan disusun sebagai berikut:

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

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

Di atas akan memunculkan proses yang diawasi yang akan mengeluarkan peristiwa yang dikirim server dengan nama random setiap detik.

Pekerjaan juga dapat menjalankan perintah di server. Penyiaran data menggunakan perintah berbentuk {exit_code: integer, stdout: String.t} . Misalnya pekerjaan berikut akan menyiarkan acara kitto_last_commit dengan hasil pernyataan curl :

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

Anda dapat mengatur pekerjaan untuk dimulai di lain waktu menggunakan opsi 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 

Widget

Widget ada di widgets/ dikompilasi menggunakan Webpack dan secara otomatis dimuat di dasbor. Aset dibangun kembali berdasarkan perubahan dalam pengembangan, tetapi harus dikompilasi untuk produksi. Lihat webpack.config.js untuk opsi build.

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

Setiap widget diperbarui dengan data dari satu sumber yang ditentukan menggunakan atribut data-source .

Penyebaran

Panduan Penerapan

penyulingan | buruh pelabuhan | pahlawanku | sistemd

Kompilasi proyek

MIX_ENV=prod mix compile

Kumpulkan aset untuk produksi

npm run build

Mulai servernya

MIX_ENV=prod mix kitto.server

Menggunakan Docker

Dengan membuat perancah pada dasbor baru dengan:

mix kitto.new

Anda juga mendapatkan Dockerfile .

Bangun gambar termasuk kode Anda, siap untuk diterapkan.

docker build . -t my-awesome-dashboard

Memunculkan wadah gambar

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

Pahlawanku

Silakan baca instruksi rinci di wiki.

Perbaikan

Silakan baca panduan peningkatan di wiki.

Berkontribusi

Jalankan Tes

mix test 

Jalankan Linternya

mix credo

Mendukung

Punya pertanyaan?

• Periksa wiki terlebih dahulu
• Lihat obat mujarab/kitto
• Buka masalah
• Tanyakan di gitter.im/kittoframework

Inspirasi

Ini sangat terinspirasi oleh Shopify/gagah. ❤️

Tentang nama

Jalan menuju Erlang / Elixir dimulai dari Kitto.

LISENSI

Hak Cipta (c) 2017 Dimitris Zorbas, Lisensi MIT. Lihat LICENSE.txt untuk rincian lebih lanjut.

Logo oleh Vangelis Tzortzis (github / situs).