danielbayerlein/dashboard

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

Hi, I'm Daniel 👋

 

dashboard's Issues

[Widget] Bitbucket

Cannot read property 'backgroundColor' of undefined

Cloning this repository, and running install, build and start command, I get the following error as soon as I visit the dashboard with my browser.

(pi@HulenPi:~/dashboard/pages $ npm start

> [email protected] start /home/pi/dashboard
> next start

> Ready on http://localhost:3000
TypeError: Cannot read property 'backgroundColor' of undefined
    at /home/pi/dashboard/.next/server/static/mX9Kv1iErUfmWQOdMcvjO/pages/index.js:363:30
    at flatten (/home/pi/dashboard/node_modules/styled-components/dist/styled-components.cjs.js:1292:21)
    at flatten (/home/pi/dashboard/node_modules/styled-components/dist/styled-components.cjs.js:1272:16)
    at ComponentStyle.generateAndInjectStyles (/home/pi/dashboard/node_modules/styled-components/dist/styled-components.cjs.js:1481:19)
    at StyledComponent.generateAndInjectStyles (/home/pi/dashboard/node_modules/styled-components/dist/styled-components.cjs.js:2160:36)
    at StyledComponent.renderInner (/home/pi/dashboard/node_modules/styled-components/dist/styled-components.cjs.js:2065:33)
    at a.render (/home/pi/dashboard/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:64)
    at a.read (/home/pi/dashboard/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:58)
    at renderToString (/home/pi/dashboard/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:53:83)
    at render (/home/pi/dashboard/node_modules/next-server/dist/server/render.js:86:16))

When running "npm run dev" then everything works fine.

TeamCity

Any plans for a TeamCity build status widget?

can not start

New user.

Fresh Ubuntu 16.04 VM.
Installed Java node, npm , angular.

I've been trying for some time to get this up and running, no luck.

Complain durring npm install:

│ ├── [email protected] 
│ ├── UNMET PEER DEPENDENCY typescript@*
│ └─┬ [email protected] 
│   ├── [email protected] 
│   └── [email protected] 
├── [email protected] 
└─┬ [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  └── [email protected] 

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of typescript@* but none was installed.

Reproduce:

• Unpack
• Run npm install
• run npm run dev
• open page in browser.

 [email protected] dev /opt/GitHub/Dashboard/dashboard-master
> next

> Using external babel configuration
> Location: "/opt/GitHub/Dashboard/dashboard-master/package.json"
> Using "webpack" config function defined in next.config.js.
Failed to load ./.env.


 DONE  Compiled successfully in 3850ms                                  14:14:31

> Ready on http://localhost:3000
> Building page: /


 DONE  Compiled successfully in 10909ms                                 14:15:12

Error: EPERM: operation not permitted, futime
    at Error (native)
    at Object.fs.futimesSync (fs.js:1091:11)
    at TouchSync.futimes (/opt/GitHub/Dashboard/dashboard-master/node_modules/touch/index.js:211:17)
    at TouchSync.onopen (/opt/GitHub/Dashboard/dashboard-master/node_modules/touch/index.js:118:14)
    at TouchSync.open (/opt/GitHub/Dashboard/dashboard-master/node_modules/touch/index.js:176:12)
    at TouchSync.Touch (/opt/GitHub/Dashboard/dashboard-master/node_modules/touch/index.js:82:12)
    at TouchSync (/opt/GitHub/Dashboard/dashboard-master/node_modules/touch/index.js:173:1)
    at Function.module.exports.module.exports.sync.module.exports.touchSync (/opt/GitHub/Dashboard/dashboard-master/node_modules/touch/index.js:20:4)
    at null._onTimeout (/opt/GitHub/Dashboard/dashboard-master/node_modules/next/dist/server/on-demand-entry-handler.js:142:27)
    at Timer.listOnTimeout (timers.js:92:15)

npm ERR! Linux 4.10.0-28-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `next`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'next'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the dashboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     next
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs dashboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls dashboard
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /opt/GitHub/Dashboard/dashboard-master/npm-debug.log

An in-range update of styled-components is breaking the build 🚨

The dependency styled-components was updated from 4.2.0 to 4.2.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

styled-components is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of react is breaking the build 🚨

There have been updates to the react monorepo:

• • The dependency react was updated from 16.6.1 to 16.6.2.

• The dependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Extracting the core functionality into a separate package

Maybe it makes sense to extract the core functionality into a separate package. This repo then serves as the basic framework with the dependency on the newly created package. This makes it easier to update the dashboard.

Changing the HTML Header Title?

Hi Daniel,
is there any way to modify the title of the dashboard itself shown in browser tabs? Means HTML Head Title.

I didn't found anything so far in your documentation and the code itself.

BR Chris

HTTPS

Hi Daniel,

This is not an issue, more of a question...
How do you resolve applications that are of type https?

<SonarQube
  authKey='sonarqube'
  interval='300000'
       url='http://127.0.0.0:3001/?url=https://sonarqube.com'
       componentKey='TEST'
/>

Great Dashboard!!!

Regards
DG

401 Unauthorized Jira and Sonar

Hi Daniel,

This is not an issue, more of a question.

I'm trying to use the Dashboard, but I'm having issues with authentications. I did all the described steps, and looked at the old issues, but still unsuccessfully.
I'm trying to use it in the dev environment for now, and on Jira and Sonar I only get 401 on the requests. But when I put the URL directly into the browser, I'm getting the API return correctly.
Can you help me with this problem?

SyntaxError: Unexpected token =>

~/DEVOPS/TOOLS/DASHBOARDS/dashboard$ sudo npm run dev

[email protected] dev /Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard
next

/Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard/next.config.js:4
webpack: (config) => {
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at loadConfig (/Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard/node_modules/next/dist/server/config.js:57:28)
at getConfig (/Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard/node_modules/next/dist/server/config.js:41:20)
at Object. (/Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard/node_modules/next/dist/bin/next:95:39)

npm ERR! Darwin 16.7.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: next
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'next'.
npm ERR! This is most likely a problem with the dashboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! next
npm ERR! You can get their info via:
npm ERR! npm owner ls dashboard
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard/npm-debug.log
~/DEVOPS/TOOLS/DASHBOARDS/dashboard$ /Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard/node_modules/next/node_modules/glob-promise/lib/index.js:6
return new Promise((resolve, reject) => {
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/a3x52zz/DEVOPS/TOOLS/DASHBOARDS/dashboard/node_modules/next/dist/server/resolve.js:141:20)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)

Dockerfile

Add Dockerfile (+ .dockerignore) and add documentation to the README.

Docker deployment doesn't expose static directory

When runnning dashboard with "npm run dev" , all pngs in "static" are reachable from widgets under "/static/xxxx.png".

But when running from Docker, they are not reachable (even the famous favicon).

Adding a mounting point and copying files doesn't seems enought...

Github API deprecation

The current auth method has been deprecated as of Nov 2020 by GitHub; authentication would need to be revised to the new oauth specifications.

Backstage Plugin

Cool Project! We use Backstage to visualize Jira and SonarQube metrics and looking to create something similar for Bitbucket Pull Requests and commits.

https://backstage.io/plugins

[README] CORS

We should add a section in the README where we explain the workaround (Proxy via e.g. Node.js Server) for the CORS problem.

[Widget] Jenkins

Time doesnt update

After playing around with this dashboard for some time, I dont understand how the functionality to update the components works. By using the setTimeout() function, the code is only updated 1 time. Is this on purpose. If i replace the setTimeout() with the setInterval() then it works.

 componentDidMount () {
    const { interval } = this.props
    this.timeout = setInterval(() => this.setState({ date: new Date() }), interval)
  }

Anybody who can explain to me how the setTimeout should be able of updating the components multiple times?

Gerrit?

Any plans to add Gerrit?

[Widget] Validate necessary information

it would be good if every widget validates its properties and prints an error message, if the user forget to set a required property (example url for api calls)

sonarqube 504 method not allowed

I try using sonarqube widget but get http code 504 , because the method has been using is OPTIONS , and sonarqube Is GET. I try to add method: 'GET' , but i get other erorr 401 noAuth

Can u help ?

[Widget] SonarQube

Indicator when Server is down

When the Browser app cannot reload information from the node server, a indication in the frontend would be nice.
currently there is only a error in js console.

[Widget] Add interval to all widgets

we should add the interval property from DateTime to all existing widgets.
currently the users have to refresh the page manually - which could be really annoying on a tv.

possible solution:

• global (default) interval on the page
• interval for every widget (if it not exists, we could use the default interval)

npm install failed - on babylon

npm installed failed

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10

npm ERR! fetch failed with status code 404

Websocket integration

First of all: Nice work! I like the react / next approach very much.

Im going to setup a Dashboard using your Framework. But regarding Datasources I want the widgets to be updated via Websockets (because of some Security Issues / Rate Limiting / etc.).
I've created a simple node server which fetches data on regular basis and publishes the latest results to connected clients.

I've hacked around a little bit to integrate sockets and everything seems to be fine right now:

...
import io from 'socket.io-client'

const socket = io('http://somehost');

export default () => (
  <Dashboard theme={darkTheme}>
    <JiraIssueCount
      title='My Issues'
      socket={socket}
      event='myproject:issues'
    />

For me the given widget-url is irrelevant, but I can imagine that a widget potentially could determine by itself if it should fetch data via url (the current approach) or via websocket (and the given eventname it should listen to), depending on the props it was given.