Dashboard

Create your own team dashboard with custom widgets.

Installation

Download or clone the repository.
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

Build your dashboard for production with npm run build
Build the image with docker build -t dashboard .
Start the container with docker run -d -p 8080:3000 dashboard
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.

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

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

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

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

Name		Name	Last commit message	Last commit date
Latest commit History 411 Commits
.github		.github
components		components
lib		lib
pages		pages
public/static		public/static
styles		styles
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE.md		LICENSE.md
README.md		README.md
auth.js		auth.js
next.config.js		next.config.js
package.json		package.json
yarn.lock		yarn.lock

License

danielbayerlein/dashboard

Folders and files

Latest commit

History

Repository files navigation

Dashboard

Table of Contents

Installation

Server

Development

Production

Docker

Create a Dashboard

Available Widgets

Example

props

Example

props

Example

props

Example

props

Example

props

Example

props

Example

props

Example

props

Example

props

Example

props

Example

props

Example

props

Example

Available Themes

Example

Preview

Example

Preview

Authentication

Cross-Origin Resource Sharing (CORS)

Proxy

Server

Dashboard

Resources

License

About

Topics

Resources

License

Stars

Watchers

Forks

Languages