Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/danielbayerlein/dashboard

📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.
https://github.com/danielbayerlein/dashboard

bitbucket dashboard elasticsearch github jenkins jira pagespeed-insights react sonarqube widget

Last synced: 6 days ago
JSON representation

📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Host: GitHub
URL: https://github.com/danielbayerlein/dashboard
Owner: danielbayerlein
License: mit
Created: 2017-05-01T15:21:02.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-05-03T04:58:01.000Z (over 1 year ago)
Last Synced: 2024-11-30T17:05:28.116Z (13 days ago)
Topics: bitbucket, dashboard, elasticsearch, github, jenkins, jira, pagespeed-insights, react, sonarqube, widget
Language: JavaScript
Homepage:
Size: 2.16 MB
Stars: 1,303
Watchers: 31
Forks: 190
Open Issues: 23
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

awesome-nextjs - Dashboard - Create your own team dashboard with custom widgets. (Apps)
fucking-awesome-nextjs - Dashboard - Create your own team dashboard with custom widgets. (Apps)

README

        


  





  Dashboard





  Create your own team dashboard with custom widgets.





  

    

  

  

    

  

  

    

  

  

    

  



## Table of Contents

* [Installation](#installation)

* [Server](#server)

  * [Development](#development)

  * [Production](#production)

  * [Docker](#docker)

* [Create a Dashboard](#create-a-dashboard)

* [Available Widgets](#available-widgets)

  * [DateTime](#datetime)

  * [Jenkins Job Status](#jenkins-job-status)

  * [Jenkins Job Health](#jenkins-job-health)

  * [Jenkins Build Duration](#jenkins-build-duration)

  * [JIRA Issue Count](#jira-issue-count)

  * [JIRA Sprint Days Remaining](#jira-sprint-days-remaining)

  * [Bitbucket PullRequest Count](#bitbucket-pullrequest-count)

  * [PageSpeed Insights Score](#pagespeed-insights-score)

  * [PageSpeed Insights Stats](#pagespeed-insights-stats)

  * [SonarQube](#sonarqube)

  * [Elasticsearch Hit Count](#elasticsearch-hit-count)

  * [GitHub Issue Count](#github-issue-count)

  * [Title](#title)

* [Available Themes](#available-themes)

  * [light](#light)

  * [dark](#dark)

* [Authentication](#authentication)

* [Cross-Origin Resource Sharing (CORS)](#cross-origin-resource-sharing-cors)

  * [Proxy](#proxy)

  * [Resources](#resources)

* [License](#license)

## Installation

1. [Download](../../archive/master.zip) 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:

```javascript

import Dashboard from '../components/dashboard'

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

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

export default () => (

  

    

  

)

```

This dashboard is available at http://localhost:3000/team-unicorn.

For an example, see [pages/index.js](./pages/index.js).

## Available Widgets

### [DateTime](./components/widgets/datetime/index.js)

#### Example

```javascript

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

```

#### props

* `interval`: Refresh interval in milliseconds (Default: `10000`)

### [Jenkins Job Status](./components/widgets/jenkins/job-status.js)

#### Example

```javascript

import JenkinsJobStatus from '../components/widgets/jenkins/job-status'

```

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](./auth.js)

### [Jenkins Job Health](./components/widgets/jenkins/job-health.js)

#### Example

```javascript

import JenkinsJobHealth from '../components/widgets/jenkins/job-health'

```

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](./auth.js)

### [Jenkins Build Duration](./components/widgets/jenkins/build-duration.js)

#### Example

```javascript

import JenkinsBuildDuration from '../components/widgets/jenkins/build-duration'

```

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](./auth.js)

### [JIRA Issue Count](./components/widgets/jira/issue-count.js)

#### Example

```javascript

import JiraIssueCount from '../components/widgets/jira/issue-count'

```

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](./auth.js)

### [JIRA Sprint Days Remaining](./components/widgets/jira/sprint-days-remaining.js)

#### Example

```javascript

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

```

#### 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](./auth.js)

### [Bitbucket PullRequest Count](./components/widgets/bitbucket/pull-request-count.js)

#### Example

```javascript

import BitbucketPullRequestCount from '../components/widgets/bitbucket/pull-request-count'

```

#### 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](./auth.js)

### [PageSpeed Insights Score](./components/widgets/pagespeed-insights/score.js)

#### Example

```javascript

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

```

#### 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](./components/widgets/pagespeed-insights/stats.js)

#### Example

```javascript

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

```

#### 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](./components/widgets/sonarqube/index.js)

#### Example

```javascript

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

```

#### 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](./auth.js)

### [Elasticsearch Hit Count](./components/widgets/elasticsearch/hit-count.js)

#### Example

```javascript

import ElasticsearchHitCount from '../components/widgets/elasticsearch/hit-count'

```

#### 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](./auth.js)

### [GitHub Issue Count](./components/widgets/github/issue-count.js)

#### Example

```javascript

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

```

#### 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](./auth.js)

### [Title](./components/widgets/title/index.js)

#### Example

```javascript

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

API Status

```

## Available Themes

### [light](./styles/light-theme.js)

#### Example

```javascript

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

  ...

```

#### Preview

![dashboard-light](https://cloud.githubusercontent.com/assets/457834/26214930/8c065dce-3bfe-11e7-9da0-2d6ebba2dfb8.png)

### [dark](./styles/dark-theme.js)

#### Example

```javascript

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

  ...

```

#### Preview

![dashboard-dark](https://cloud.githubusercontent.com/assets/457834/26214954/a668dc50-3bfe-11e7-8c19-7a0c7dd260e7.png)

## Authentication

Any widget can authenticate itself, should your server expect this. We use

[basic authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication).

1. Define your credential key in [auth.js](./auth.js). For example:

   ```javascript

   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:

   ```javascript

   

   ```

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:

   ```dosini

   JIRA_USER=root

   JIRA_PASS=s1mpl3

   ```

## Cross-Origin Resource Sharing (CORS)

[Cross-Origin Resource Sharing](https://www.w3.org/TR/cors/) (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](https://github.com/chrishelgert/hapi-rest-proxy))

to enable CORS request for any website.

#### Server

```bash

docker pull chrishelgert/hapi-rest-proxy

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

```

#### Dashboard

```javascript

```

### Resources

* 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

## License

Copyright (c) 2017-present Daniel Bayerlein. See [LICENSE](./LICENSE.md) for details.