kitto

---

Kitto เป็นเฟรมเวิร์กที่จะช่วยคุณสร้างแดชบอร์ดที่เขียนด้วย Elixir / React

สาธิต

• แดชบอร์ดตัวอย่าง
• แดชบอร์ด Elixir
• แดชบอร์ดงาน
• 1080 Dashboard (ปรับให้เหมาะสมสำหรับหน้าจอ 1080) (ที่มา)

สามารถดูแหล่งที่มาของแดชบอร์ดสาธิตได้ที่: kittoframework/demo

หากต้องการเริ่มสร้างของคุณเอง โปรดอ่านด้านล่าง

คุณสมบัติ

• งานคือกระบวนการภายใต้การดูแลที่ทำงานไปพร้อมๆ กัน
• วิดเจ็ตถูกเข้ารหัสในไลบรารี React ยอดนิยม
• ใช้สายโซ่เครื่องมือสินทรัพย์ที่ทันสมัย ​​Webpack
• อนุญาตให้สตรีม SSE ไปยังไคลเอนต์จำนวนมากพร้อมกันโดยมีหน่วยความจำ/CPU เหลือน้อย
• ง่ายต่อการปรับใช้โดยใช้อิมเมจ Docker, Heroku (ไกด์) หรือ Distillery (ไกด์) ที่ให้มา
• สามารถให้บริการสินทรัพย์ในการผลิตได้
• เก็บสถิติเกี่ยวกับงานที่กำหนดและมาพร้อมกับแดชบอร์ดเพื่อตรวจสอบ (สาธิต)
• สามารถใช้การถอยกลับแบบเอ็กซ์โปเนนเชียลกับงานที่ล้มเหลวได้
• โหลดโค้ดใหม่เมื่อมีการเปลี่ยนแปลงในการพัฒนา

การติดตั้ง

ติดตั้งไฟล์เก็บถาวรล่าสุด

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

ความต้องการ

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

สินทรัพย์

• Node : 14.15.1
• npm : 6.14.9

อาจทำงานได้โดยไม่ตั้งใจในเวอร์ชันอื่นนอกเหนือจากข้างต้น แต่จะไม่ได้รับการทดสอบอย่างละเอียด (ดู .travis.yml สำหรับเมทริกซ์บิลด์ที่กำหนด)

คุณสามารถใช้อิมเมจ Docker อย่างเป็นทางการได้

โปรดเปิดประเด็นเพื่อขอรับการสนับสนุนสำหรับแพลตฟอร์มเฉพาะ

สร้างแดชบอร์ด

mix kitto.new < project_name > 

การพัฒนา

ติดตั้งการพึ่งพา

mix deps.get && npm install

เริ่มเซิร์ฟเวอร์ Kitto (คอยติดตามการเปลี่ยนแปลงสินทรัพย์ด้วย)

mix kitto.server

ลองใช้แดชบอร์ดตัวอย่างที่: http://localhost:4000/dashboards/sample

สำหรับตัวเลือกการกำหนดค่าและการแก้ไขปัญหา โปรดศึกษาจากวิกิ

ตารางแดชบอร์ด

Kitto สามารถให้บริการหลายแดชบอร์ดได้ แต่ละรายการให้บริการจากเส้นทางของแบบฟอร์มต่อไปนี้ /dashboards/<dashboard_name>

แดชบอร์ดประกอบด้วยตาราง Gridster ที่มีวิดเจ็ต React

คุณจะพบแดชบอร์ดตัวอย่างใต้ dashboards/sample

ตัวอย่างด้านล่างนี้จะวางวิดเจ็ต Text แบบธรรมดาไว้ในแดชบอร์ด

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

คุณลักษณะข้อมูลที่สำคัญที่สุดที่นี่คือ

• data-widget เลือกวิดเจ็ตที่จะใช้ ดู: วิดเจ็ต
• data-source เลือกแหล่งข้อมูลเพื่อเติมวิดเจ็ต ดู: งาน

คุณลักษณะข้อมูลอื่นๆ คือตัวเลือกที่จะส่งผ่านเป็นอุปกรณ์ประกอบฉากไปยังวิดเจ็ต React

งาน

โดยการสร้างแดชบอร์ดใหม่โดยใช้ mix kitto.new <project_name> คุณจะได้รับงานตัวอย่างบางส่วนในไดเร็กทอรี jobs/

ไฟล์งานมีโครงสร้างดังนี้:

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

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

ข้างต้นจะวางไข่กระบวนการภายใต้การดูแลซึ่งจะปล่อยเหตุการณ์ที่เซิร์ฟเวอร์ส่งพร้อมกับชื่อ random ทุกวินาที

งานยังสามารถรันคำสั่งบนเซิร์ฟเวอร์ได้ การถ่ายทอดข้อมูลโดยใช้คำสั่งจะอยู่ในรูปแบบ {exit_code: integer, stdout: String.t} ตัวอย่างเช่น งานต่อไปนี้จะออกอากาศเหตุการณ์ kitto_last_commit พร้อมกับผลลัพธ์ของคำสั่ง curl :

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

คุณสามารถตั้งค่างานให้เริ่มต้นในภายหลังได้โดยใช้ตัวเลือก 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/ รวบรวมโดยใช้ Webpack และโหลดในแดชบอร์ดโดยอัตโนมัติ สินทรัพย์จะถูกสร้างขึ้นใหม่เมื่อมีการเปลี่ยนแปลงในการพัฒนา แต่จะต้องรวบรวมเพื่อการผลิต ดู webpack.config.js สำหรับตัวเลือกบิลด์

วิดเจ็ตตัวอย่าง ( 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 >
    ) ;
  }
} ) ;

แต่ละวิดเจ็ตได้รับการอัปเดตด้วยข้อมูลจากแหล่งเดียวที่ระบุโดยใช้แอตทริบิวต์ data-source

การปรับใช้

คู่มือการปรับใช้

โรงกลั่น | นักเทียบท่า | เฮโรกุ | ระบบ

รวบรวมโครงการ

MIX_ENV=prod mix compile

รวบรวมสินทรัพย์เพื่อการผลิต

npm run build

เริ่มเซิร์ฟเวอร์

MIX_ENV=prod mix kitto.server

การใช้นักเทียบท่า

โดยนั่งร้านแดชบอร์ดใหม่ด้วย:

mix kitto.new

คุณยังได้รับ Dockerfile อีกด้วย

สร้างอิมเมจพร้อมโค้ดของคุณ พร้อมสำหรับการใช้งาน

docker build . -t my-awesome-dashboard

วางไข่คอนเทนเนอร์ของรูปภาพ

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

เฮโรกุ

โปรดอ่านคำแนะนำโดยละเอียดในวิกิ

กำลังอัปเกรด

โปรดอ่านคู่มือการอัพเกรดในวิกิ

มีส่วนร่วม

เรียกใช้การทดสอบ

mix test 

เรียกใช้ Linter

mix credo

สนับสนุน

มีคำถาม?

• ตรวจสอบวิกิก่อน
• ดูที่ elixirforum/kitto
• เปิดประเด็น
• ถามใน gitter.im/kittoframework

แรงบันดาลใจ

ได้รับแรงบันดาลใจอย่างมากจาก shopify/dashing

เกี่ยวกับชื่อ

ถนนสู่ Erlang / Elixir เริ่มต้นด้วย Kitto

ใบอนุญาต

ลิขสิทธิ์ (c) 2017 Dimitris Zorbas, ใบอนุญาต MIT ดู LICENSE.txt สำหรับรายละเอียดเพิ่มเติม

โลโก้โดย Vangelis Tzortzis (github / ไซต์)