How to add a custom widget to Dashboard?

To add a custom widget, you need to create a React component in the components/widgets directory, similar to existing widgets. It should fetch data and render it, and you can import it into your dashboards as shown in the README examples.

Does Dashboard support real-time updates?

No, Dashboard widgets use interval-based polling for data refresh, with props like 'interval' specifying refresh rates. For real-time features, you'd need to modify widgets to use WebSockets or push notifications.

Dashboard vs Dashing: which is better for dev teams?

Dashboard is built with modern technologies like Next.js and React, offering a component-based approach and pre-built widgets for dev tools. Dashing is older and uses Ruby, so Dashboard is better for teams familiar with JavaScript and wanting more customization.

Can I use Dashboard with GitLab?

Out of the box, Dashboard does not have a widget for GitLab. You would need to build a custom widget by fetching data from GitLab's API and integrating it, which requires React and API knowledge.

How to deploy Dashboard on AWS?

You can deploy Dashboard on AWS by building it with 'npm run build' and using services like EC2 or ECS. For Docker, containerize it as per the README and run it on ECS or Fargate with appropriate networking.

Is Dashboard secure for internal use?

Dashboard supports basic authentication via environment variables, but for better security, run it behind a reverse proxy with HTTPS. The README recommends using .env files for credentials, but additional measures may be needed.

Open-Awesome

Dashboard

MITJavaScript

A customizable team dashboard built with Next.js and React, featuring widgets for Jenkins, JIRA, GitHub, and other development tools.

GitHub

1.3k stars189 forks0 contributors

What is Dashboard?

Dashboard is an open-source team dashboard builder that allows development teams to create custom dashboards with widgets for monitoring Jenkins jobs, JIRA issues, GitHub metrics, SonarQube scores, and other tools. It solves the problem of fragmented tool visibility by aggregating key data into a single, customizable interface. Built with Next.js and React, it provides a modern, component-based approach to dashboard creation.

Target Audience

Development teams, DevOps engineers, and engineering managers who need a centralized view of CI/CD pipelines, issue trackers, and code quality metrics. It's particularly useful for teams using Jenkins, JIRA, Bitbucket, GitHub, SonarQube, or Elasticsearch.

Value Proposition

Developers choose Dashboard because it's a lightweight, self-hosted alternative to commercial dashboard solutions that offers pre-built widgets for popular dev tools. Its modular design and open-source nature allow for easy customization and extension without vendor lock-in.

Overview

📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Use Cases

Best For

Monitoring Jenkins job statuses and build durations across multiple projects
Tracking JIRA issue counts and sprint progress in real-time
Aggregating GitHub issue counts and pull request metrics for repositories
Displaying SonarQube code quality scores and Elasticsearch hit counts
Creating custom dashboards for different teams (e.g., frontend, backend, QA)
Self-hosting a lightweight dashboard without relying on SaaS platforms

Not Ideal For

Teams using tools like GitLab CI/CD, Azure DevOps, or custom APIs not covered by built-in widgets
Organizations needing real-time data streaming or WebSocket integrations, as widgets rely on interval-based polling
Projects requiring extensive visual customization beyond the provided light and dark themes
Companies wanting a fully managed SaaS dashboard with zero deployment and maintenance overhead

Pros & Cons

Pros

Pre-built Dev Tool Widgets

Includes ready-to-use components for Jenkins job status, JIRA issue counts, GitHub issues, and more, as detailed in the README, saving development time.

Multiple Dashboard Support

Allows creating separate dashboards for different teams or projects, like 'team-unicorn.js', enabling tailored views without code duplication.

Self-Hosted Flexibility

Supports deployment via Docker, npm scripts, or platforms like Vercel, giving teams full control over hosting and data privacy.

Theme Customization

Offers light and dark themes for visual preference, with easy integration into dashboard components, as shown in preview images.

Cons

Limited Tool Coverage

Only supports a specific set of tools; integrating new services requires building custom React components, which may be complex without React expertise.

CORS Proxy Dependency

Requires setting up a proxy server for cross-origin requests, adding deployment complexity and potential performance bottlenecks, as noted in the CORS section.

Basic Authentication Only

Relies solely on HTTP basic authentication, lacking support for modern OAuth or token-based security, which could be insufficient for enterprise environments.

Frequently Asked Questions

Related Projects

Taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Stars19,288

Forks2,746

Last commit5 months ago

FIM Agent

Open-source agent platform for Global × China enterprises — wire every system through one agent core. Self-hosted, any LLM.

Stars1,568

Forks178

Last commit5 days ago

Rauchg Blog

Blog built by a Next.js core maintainer

Stars1,423

Forks214

Last commit3 months ago

CourseLit

Create/Sell courses and digital downloads and publish blogs on your own branded website. An open source alternative to Teachable, Thinkific, Podia and the likes.

Stars1,269

Forks260

Last commit2 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub