Dashboard

<p align="center"> <img src="https://cloud.githubusercontent.com/assets/457834/25781812/a981cf5a-333e-11e7-938e-378de1589b20.png" width="250" alt="Dashboard"> </p> <h1 align="center"> Dashboard </h1> <p align="center"> Create your own team dashboard with custom widgets. </p> <p align="center"> <a href="https://github.com/danielbayerlein/vallox-api/actions"> <img alt="Actions Status" src="https://github.com/danielbayerlein/dashboard/workflows/CI/badge.svg"> </a> <a href="https://standardjs.com"> <img alt="JavaScript Style Guide" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg"> </a> <a href="https://dependabot.com"> <img alt="Dependabot Status" src="https://api.dependabot.com/badges/status?host=github&repo=danielbayerlein/dashboard"> </a> <a href="https://deploy.now.sh/?repo=https://github.com/danielbayerlein/dashboard"> <img alt="Deploy to now" src="https://deploy.now.sh/static/button.svg" height="20"> </a> </p>

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