Create your own team dashboard with custom widgets.
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
.
npm run build
docker build -t dashboard .
docker run -d -p 8080:3000 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.
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 URLjobs
: List of all jobsauthKey
: Credential key, defined in auth.jsimport 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 URLjobs
: List of all jobsauthKey
: Credential key, defined in auth.jsimport 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 URLjobs
: List of all jobsauthKey
: Credential key, defined in auth.jsimport 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 URLquery
: JIRA search query (jql
)authKey
: Credential key, defined in auth.jsimport 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 URLboardId
: JIRA board idauthKey
: Credential key, defined in auth.jsimport 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 URLproject
: Bitbucket project keyrepository
: Bitbucket repository slugusers
: Bitbucket user slugs as an arrayauthKey
: Credential key, defined in auth.jsimport 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 analyzestrategy
: Analysis strategy (Default: desktop
)
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 analyzestrategy
: Analysis strategy (Default: desktop
)
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 URLcomponentKey
: SonarQube project keyauthKey
: Credential key, defined in auth.jsimport 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 URLindex
: Elasticsearch index to search inquery
: Elasticsearch queryauthKey
: Credential key, defined in auth.jsimport 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 repositoryrepository
: Name of the repositoryauthKey
: Credential key, defined in auth.jsimport 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.
jira: {
username: process.env.JIRA_USER,
password: process.env.JIRA_PASS
}
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'
/>
.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'
/>
Copyright (c) 2017-present Daniel Bayerlein. See LICENSE for details.