cyronlee / zboard

Designed for agile teams, visualize daily information, like build info, ticket status, delivery progress and more...

zBoard

Designed for DevOps teams, visualize daily information, fits perfectly on a large screen 🖥️

Build with:

Demo: https://z-board.vercel.app/ Password: 123456

Features ✨

🚀  Handly informations

• Monitor CICD Build Status (CircleCI & GitHub Actions supported)
• Monitor Ticket Status (Zendesk supported)
• Display Project Timeline (Kanbanize supported)

🚙  Functional

• All in one, no database needed
• Fast page render and responsive design

🎨  Customization

• Built with chakra-ui, easy for customization
• Customize config options

🔒  Security

• Site password
• All tokens secured in the backend
• No sensitive information in API transmission

Quick Start

Deploy on Vercel

1. Star this repo 😉
2. Fork this project
3. Customize the config files and push the code, includes datasource and monitoring rules, please read the comments inside:
   • site.config.js
   • build_status.config.js
   • ticket_status.config.js
   • project_timeline.config.js
   • owner_rotation.config.js
4. Deploy on Vercel, set following environment variables (will display fake data if no token is configured)：

• SITE_PASSWORD: If filled, the site requires a login
• CIRCLE_CI_API_TOKEN: CircleCI API Token to get build status, get it here
• ZENDESK_API_TOKEN: Zendesk API Token to get ticket status, follow this guide
• ZENDESK_USER_EMAIL: The user email who generate the API token
• ZENDESK_BASE_URL: https://<Your Org>.zendesk.com
• GITHUB_API_TOKEN: GitHub API Token to get build status from GitHub Actions
• KANBANIZE_BASE_URL: https://<Your Org>.kanbanize.com
• KANBANIZE_API_KEY: Kanbanize API Key to build project timeline, follow this guide
• API_TABLE_API_KEY: ApiTable API Key to load owner rotation data, follow this guide

5. Visit your site🎉

Deploy on Mac mini

1. On the Mac mini, hold command and click WIFI icon to get the IP address
2. On your Mac (under same network), use command+p to search & open Sreen Sharing app
3. Enter the IP of Mac mini, then login to control the Mac mini
4. Follow the steps of Local development

Local development

1. Star & Clone this repo 😉
2. Install node 18 via nvm install 18, then nvm use 18
3. Customize the config files in local, includes datasource and monitoring rules, please read the comments inside:
   • site.config.js
   • build_status.config.js
   • ticket_status.config.js
   • project_timeline.config.js
   • owner_rotation.config.js
4. Copy .env.example to be .env, and set the values
5. Run with development mode

   npm install
   npm run dev

6. Or run with production mode

   npm run build
   npm run start

7. Visit http://localhost:2000/

Update to new version

Please backup your config files before update, config structure may be modified in major version updates.

# backup config files
git stash

# update main version
git checkout main
git pull origin main

# apply your backup config files
git stash apply

Roadmap

• CircleCI Build Status
• Zendesk Ticket Status
• Kanbanize project timeline
• Site password
• Dark mode
• Examples page
• Check for new versions
• Owner shift indicator
• Integrate more products...
• Resizeable & draggable
• Settings page
• ...

License

The MIT License.

zboard's Issues

fix: miss key warning & hydration failed errors

A environment bug in dev mode

feat: dashboard builder

Provide the ability for users to customize their own dashboard page

Features

• Based on the grid layout
• Place components and resize their sizes by dragging
• Configure components visually

Todos

• draggable & resizable container
• responsive components
• configuration form

Can timeline display multiple cards in one line

Now 1 line only have 1 card, maybe display multiple cards in 1 line could save much place.