Create your own team dashboard with custom widgets.
- Installation
- Server
- Create a Dashboard
- Available Widgets
- Available Themes
- Authentication
- Cross-Origin Resource Sharing (CORS)
- License
- Download or clone the repository.
- 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
.
- 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
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}>
<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 Jenkins from '../components/widgets/jenkins'
<Jenkins
url='https://builds.apache.org'
jobs={[
{ label: 'Hadoop', path: 'Hadoop-trunk-Commit' },
{ label: 'Jackrabbit', path: 'Jackrabbit-trunk' },
{ label: 'JMeter', path: 'JMeter-trunk' }
]}
/>
title
: Widget title (Default:Jenkins
)interval
: Refresh interval in milliseconds (Default:300000
)url
: Jenkins URLjobs
: List of all jobsauthKey
: 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'
/>
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.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 URLboardId
: JIRA board idauthKey
: 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 URLproject
: Bitbucket project keyrepository
: Bitbucket repository slugusers
: Bitbucket user slugs as an arrayauthKey
: 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 analyzestrategy
: Analysis strategy (Default:desktop
)- Acceptable values:
desktop
|mobile
- Acceptable values:
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
)- Acceptable values:
desktop
|mobile
- Acceptable values:
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.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 URLindex
: Elasticsearch index to search inquery
: Elasticsearch queryauthKey
: Credential key, defined in auth.js
import GitHubIssueCount from '../components/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.js
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.
- 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 propauthKey
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 in the root directory of your project. Add environment-specific variables on new lines in the form ofNAME=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 Daniel Bayerlein. See LICENSE for details.