danielbayerlein/dashboard

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

Dashboard

Create your own team dashboard with custom widgets.

Table of Contents

• Installation
• Server
  • Development
  • Production
  • Docker
• Create a Dashboard
• Available Widgets
  • DateTime
  • Jenkins Job Status
  • Jenkins Job Health
  • Jenkins Build Duration
  • JIRA Issue Count
  • JIRA Sprint Days Remaining
  • Bitbucket PullRequest Count
  • PageSpeed Insights Score
  • PageSpeed Insights Stats
  • SonarQube
  • Elasticsearch Hit Count
  • GitHub Issue Count
  • Title
• Available Themes
  • light
  • dark
• Authentication
• Cross-Origin Resource Sharing (CORS)
  • Proxy
  • Resources
• License

Installation

1. Download or clone the repository.
2. Install the dependencies with npm install.

Server

Development

Run npm run dev and go to http://localhost:3000.

Production

Build your dashboard for production with npm run build and then start the server with npm start.

Docker

1. Build your dashboard for production with npm run build
2. Build the image with docker build -t dashboard .
3. Start the container with docker run -d -p 8080:3000 dashboard
4. Go to http://localhost:8080

Create a Dashboard

You can create multiple dashboards. For example populate pages/team-unicorn.js inside your project:

import Dashboard from '../components/dashboard'
import DateTime from '../components/widgets/datetime'
import lightTheme from '../styles/light-theme'

export default () => (
  <Dashboard theme={lightTheme} name='Unicorn Dashboard'>
    <DateTime />
  </Dashboard>
)

This dashboard is available at http://localhost:3000/team-unicorn.

For an example, see pages/index.js.

Available Widgets

DateTime

Example

import DateTime from '../components/widgets/datetime'

<DateTime interval={10000} />

props

• interval: Refresh interval in milliseconds (Default: 10000)

Jenkins Job Status

Example

import JenkinsJobStatus from '../components/widgets/jenkins/job-status'

<JenkinsJobStatus
  url='https://builds.apache.org'
  jobs={[
    { label: 'JMeter', path: 'JMeter-trunk' },
    { label: 'Log4j Kotlin', path: 'Log4jKotlin', branch: 'master' }
  ]}
/>

For Jenkins multibranch projects add branch to the object.

props

• title: Widget title (Default: Job Status)
• interval: Refresh interval in milliseconds (Default: 300000)
• url: Jenkins URL
• jobs: List of all jobs
• authKey: Credential key, defined in auth.js

Jenkins Job Health

Example

import JenkinsJobHealth from '../components/widgets/jenkins/job-health'

<JenkinsJobHealth
  url='https://builds.apache.org'
  jobs={[
    { label: 'JMeter', path: 'JMeter-trunk' },
    { label: 'Log4j Kotlin', path: 'Log4jKotlin', branch: 'master' }
  ]}
/>

For Jenkins multibranch projects add branch to the object.

props

• title: Widget title (Default: Job Health)
• interval: Refresh interval in milliseconds (Default: 300000)
• url: Jenkins URL
• jobs: List of all jobs
• authKey: Credential key, defined in auth.js

Jenkins Build Duration

Example

import JenkinsBuildDuration from '../components/widgets/jenkins/build-duration'

<JenkinsBuildDuration
  url='https://builds.apache.org'
  jobs={[
    { label: 'JMeter', path: 'JMeter-trunk' },
    { label: 'Log4j Kotlin', path: 'Log4jKotlin', branch: 'master' }
  ]}
/>

For Jenkins multibranch projects add branch to the object.

props

• title: Widget title (Default: Build Duration)
• interval: Refresh interval in milliseconds (Default: 300000)
• url: Jenkins URL
• jobs: List of all jobs
• authKey: Credential key, defined in auth.js

JIRA Issue Count

Example

import JiraIssueCount from '../components/widgets/jira/issue-count'

<JiraIssueCount
  title='JIRA Open Bugs'
  url='https://jira.atlassian.com'
  query='type=Bug AND project="Bitbucket Server" AND resolution=Unresolved ORDER BY priority DESC,created DESC'
/>

For Jenkins multibranch projects add branch to the object.

props

• title: Widget title (Default: JIRA Issue Count)
• interval: Refresh interval in milliseconds (Default: 300000)
• url: JIRA Server URL
• query: JIRA search query (jql)
• authKey: Credential key, defined in auth.js

JIRA Sprint Days Remaining

Example

import JiraSprintDaysRemaining from '../components/widgets/jira/sprint-days-remaining'

<JiraSprintDaysRemaining
  title='Sprint Days'
  url='https://jira.atlassian.com'
  boardId={42}
/>

props

• title: Widget title (Default: JIRA Sprint Days Remaining)
• interval: Refresh interval in milliseconds (Default: 3600000)
• url: JIRA Server URL
• boardId: JIRA board id
• authKey: Credential key, defined in auth.js

Bitbucket PullRequest Count

Example

import BitbucketPullRequestCount from '../components/widgets/bitbucket/pull-request-count'

<BitbucketPullRequestCount
  title='Bitbucket Open PR'
  url='https://bitbucket.typo3.com'
  project='EXT'
  repository='blog'
  users={['stekal', 'marleg', 'denhub']}
/>

props

• title: Widget title (Default: Bitbucket PR Count)
• interval: Refresh interval in milliseconds (Default: 300000)
• url: Bitbucket Server URL
• project: Bitbucket project key
• repository: Bitbucket repository slug
• users: Bitbucket user slugs as an array
• authKey: Credential key, defined in auth.js

PageSpeed Insights Score

Example

import PageSpeedInsightsScore from '../components/widgets/pagespeed-insights/score'

<PageSpeedInsightsScore url='https://github.com' />

props

• title: Widget title (Default: PageSpeed Score)
• interval: Refresh interval in milliseconds (Default: 43200000)
• url: URL to fetch and analyze
• strategy: Analysis strategy (Default: desktop)
  • Acceptable values: desktop | mobile
• filterThirdPartyResources: Indicates if third party resources should be filtered out (Default: false)

PageSpeed Insights Stats

Example

import PageSpeedInsightsStats from '../components/widgets/pagespeed-insights/stats'

<PageSpeedInsightsStats url='https://github.com' />

props

• title: Widget title (Default: PageSpeed Stats)
• interval: Refresh interval in milliseconds (Default: 43200000)
• url: URL to fetch and analyze
• strategy: Analysis strategy (Default: desktop)
  • Acceptable values: desktop | mobile
• filterThirdPartyResources: Indicates if third party resources should be filtered out (Default: false)

SonarQube

Example

import SonarQube from '../components/widgets/sonarqube'

<SonarQube
  url='https://sonarcloud.io'
  componentKey='com.icegreen:greenmail-parent'
/>

props

• title: Widget title (Default: SonarQube)
• interval: Refresh interval in milliseconds (Default: 300000)
• url: SonarQube URL
• componentKey: SonarQube project key
• authKey: Credential key, defined in auth.js

Elasticsearch Hit Count

Example

import ElasticsearchHitCount from '../components/widgets/elasticsearch/hit-count'

<ElasticsearchHitCount
  title='Log Hits'
  url='http://ec2-34-210-144-223.us-west-2.compute.amazonaws.com:9200'
  index='blog'
  query='user:dilbert'
/>

props

• title: Widget title (Default: Elasticsearch Hit Count)
• interval: Refresh interval in milliseconds (Default: 300000)
• url: Elasticsearch URL
• index: Elasticsearch index to search in
• query: Elasticsearch query
• authKey: Credential key, defined in auth.js

GitHub Issue Count

Example

import GitHubIssueCount from '../components/widgets/github/issue-count'

<GitHubIssueCount
  owner='danielbayerlein'
  repository='dashboard'
/>

props

• title: Widget title (Default: GitHub Issue Count)
• interval: Refresh interval in milliseconds (Default: 300000)
• owner: Owner of the repository
• repository: Name of the repository
• authKey: Credential key, defined in auth.js

Title

Example

import Title from '../components/widgets/title'

<Title>API Status</Title>

Available Themes

light

Example

import lightTheme from '../styles/light-theme'

<Dashboard theme={lightTheme}>
  ...
</Dashboard>

Preview

dark

Example

import darkTheme from '../styles/dark-theme'

<Dashboard theme={darkTheme}>
  ...
</Dashboard>

Preview

Authentication

Any widget can authenticate itself, should your server expect this. We use basic authentication.

1. Define your credential key in auth.js. For example:

   jira: {
     username: process.env.JIRA_USER,
     password: process.env.JIRA_PASS
   }

2. Give the defined credential key jira via prop authKey to the widget. For example:

   <JiraIssueCount
     authKey='jira'
     url='https://jira.atlassian.com'
     query='type=Bug AND project="Bitbucket Server" AND resolution=Unresolved ORDER BY priority DESC,created DESC'
   />

3. Create a .env file or rename .env.example to .env in the root directory of your project. Add environment-specific variables on new lines in the form of NAME=VALUE. For example:

   JIRA_USER=root
   JIRA_PASS=s1mpl3

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests.

Proxy

You can use a proxy (e.g. hapi-rest-proxy) to enable CORS request for any website.

Server

docker pull chrishelgert/hapi-rest-proxy
docker run -d -p 3001:8080 chrishelgert/hapi-rest-proxy

Dashboard

<SonarQube
  url='http://127.0.0.1:3001/?url=https://sonarcloud.io'
  componentKey='com.icegreen:greenmail-parent'
/>

Resources

• https://www.w3.org/TR/cors/
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
• https://enable-cors.org
• https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

License

Copyright (c) 2017-present Daniel Bayerlein. See LICENSE for details.