Create your own team dashboard with custom widgets.

• 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

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

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

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

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

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.

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

<DateTime interval={10000} />

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

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.

• 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

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.

• 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

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.

• 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

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.

• 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

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

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

• 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

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']}
/>

• 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

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

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

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

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

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

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

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

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

• 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

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

• 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

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

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

• 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

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

<Title>API Status</Title>

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

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

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

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

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

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

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

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

• 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

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