spatie / dashboard.spatie.be

The source code of dashboard.spatie.be

dashboard.spatie.be

This repo contains the source code of our dashboard.

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Example

Our configured dashboard has following tiles:

• Twitter stream with all tweets mentioning and quoting @spatie_be
• Clock/date/weather
• Team tile with todo's via GitHub files, remote status via Slack, current tracks via Last.fm
• Packagist downloads
• Internet up/down via WebSockets
• Velo status

How it works

Our own Freek Van der Herten gave a talk on the dashboard at Laracon EU where he explained how the dashboard works behind the screens. The talk was recorded and published on Youtube.

Installation

Install this package by running cloning this repository and install like you normally install Laravel.

• Run composer install and npm install yarn
• Run yarn and yarn run dev to generate assets
• Copy .env.example to .env and fill your values (php artisan key:generate, database, pusher values etc)
• Run php artisan migrate --seed, this will seed a user based on your BASIC_AUTH .env values
• Start your queue listener and setup the Laravel scheduler.
• Open the dashboard in your browser, login and wait for the update events to fill the dashboard.

Postcardware

If you are using our dashboard, please send us a postcard from your hometown.

Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.

All postcards are published on our website.

Support

This dashboard is tailormade to be displayed on the wall mounted tv in our office. We do not follow semver for this project and do not provide support whatsoever. However if you're a bit familiar with Laravel and Vue you should easily find your way.

For more details on the project, read our article about the setup and components

License

This project and the Laravel framework are open-sourced software licensed under the MIT license.

dashboard.spatie.be's Issues

Uptime tile needs styling

No testing for application?

I tried to get some inspiration from how you test a Laravel application, but I found tests directory is empty(!)
Why didn't you add test for this app?
Also is there any repo you can point me to, to get some inspiration on Laravel application testing?

Insufficient error handling on the server

When a task goes wrong, the dashboard gets stuck in a no-connection state.

Concrete examples of situations that kill the dashboard:

• When a task is fetched for a user that doesn't have a task list
• When Buienradar is down (seems to happen every day around noon)

If a task errors, it shouldn't affect the heartbeat.

Summer 2017 refresh: rename all the things

Currently the components are named according to the data sources that are being used. It might be better to name things by the content they are displaying. So no GitHub tile, but a Task tile.

Quoted tweets need styling

@willemvb could you take care of this in the feature-quoted-tweets branch?

Composer.lock

Hi Spatie guys!

I noticed you have included the composer.lock file in the git repository. Any particular reason for this? I believe ideally the lock file shouldn't be in the git repos :)

Thanks for the wonderful dashboard!

Tasks

Hello. I know you don't provide support, but is it possible to add a guide how to set up the tasks repo? And how to setup the .env

Authentication Required

Hello, thanks for this great project. I have successfully run it but it is requesting for USERNAME and PASSWORD. Please how do I go about this? Thanks.

GitHub tasks webhook seems broken

no content?

Downtime time has timezone issues

The time a website is down is off by an hour in the winter and by two in the summer.

Adding How To for starting the dashboard locally

Hi there, awesome product :)

it would be nice though to elaborate on how to start the dashboard which port etc.
I read (granted merely skimmed) the laravel docs for infos about that and also webpack/vue but i didn't find anything :( that allows me to start it

that would be a huge help :)

Wrap twitter mentions in a span

In the tweet body text, it would be nice to accentuate the mentions.
You can use class tweet__body__handle on the wrapper.

GitHub contributors is fluctuating

The number of contributors sometimes goes down. Seem highly unlikely that this is correct.

Class log does not exist i

Hi I tried to install this in my local machine, I got this error when I run php artisan migrate

   Class log does not exist i

And also in google console

  [Vue warn]: Unknown custom element: <twitter> - did you register the component correctly?

The dashboard positions not good as shown in example

Moving tiles

Hello @spatie

You have a great starting point in your creation I've managed to build upon your dashboard to make it my own.. So much THANK YOU for the grid system it's so nice and easy to use! :)

Now I have a question/help wanted thing:
I want to make the dashboard more appealing to people watching it so I thought that I would implement a mechanism to make the tiles move around e.g (a tile that is the same size and is in the position next to another tile can switch places within a time interval or even be totally hidden while another tile is shown)

If you also want such a feature we could help each other creating it as my Vue expertise drops a bit here.

Let me know what you think! :)

Not receiving events

Hey Spatie,

Thanks for this really neat dashboard! I'm trying to get it up & running so we can customise it for use at our office. But I'm running into a couple of issues:

I can see my events arriving on the Pusher debug console, but it looks like my dashboard isn't receiving them. First time using Echo and Pusher and I'm not sure where to start debugging this.

Thanks for your feedback
Jan

The Mix manifest does not exist after updating Spatie dashboard

I updated my spatie dashboard by running

       git pull
       composer update
      rm -rf  node_modules
     npm install

Now my spatie dashboard ain't running

The error shows

The Mix manifest does not exist

Summer 2017 refresh: modernize css

The grid system should use the latest and greatest possibilities in css land.

weather is not showing because of display:none in css

I dunno if this is a bug or an oversight.. but it seems weird to me that in the dashboard.blade.php there are values for setting the weather city, but then the weather does not appear even though a call IS being made to yahoo to fetch the weather on an interval

kinda wasted 20 minutes debugging before I realized the fields were simply set to display:none by default in the css

.time-weather__time-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    /* display: none; */
    width: 100%;
    color: var(--yellow);
    text-align: center;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
}

.time-weather__date {
    /* display: none; */
    color: var(--gray-light);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
}

.time-weather__weather {
    /* display: none; */
    color: var(--gray-light);
    font-size: var(--font-size-m);
}

This should be covered or documented somewhere.. or enabled/disabled through a configuration option.. IMO

Is there support for drag and drop support and to add widget a runtime?

Is there support for drag and drop support and to add widget a runtime?

Uptime tile doesn't seem to be working

Command not found

dashboard.spatie.be/app/Console/UpdateDashboardCommand.php

Line 24 in 779a113

$this->call('dashboard:fetch-trains-info');

---

Above mentioned command does not exist.

readme.md explain

in the support part of the readme:

We do not follow semver for this project and do not provide support whatsoever.

Semver? Cant trace that word back to something logical. Perhaps my fault?

Running dashboard on AppleTV

Could maybe anyone share how we can easily manage to run the dashboard on our AppleTV? Thanks so much for any tips. Apple seems to have removed even the WebView feature disallowing any simple selfmade litte app :-(

Add npm stats tile

Currently we have a tile to display stats for all our PHP stuff on Composer. It would be nice to have a tile with statistics for all our JS stuff on NPM.

laravel/echo namespaces issue handling ?

Hello,

first of all I love your dashboard 😄.
It seems that there is a known issue in the community regarding the namespaces and the event names.
issue. In a nutshell the issue is that the client can not properly listen for events that are namespaced. e.g.

Echo.private('dashboard').listen('.app.events.Twitter.mentioned', (e) => {// do smt});
The above code wont trigger an event in the client's side, even thought the laravel docs clearly suggest that it will. I have experienced this issue and the solution is to explicitly specify the event's name.

Event class:
public function broadcastAs() { return 'Mentioned'; }
and then in the client.
Echo.private('dashboard').listen('Mentioned', (e) => {// do smt});

If you are interested in this fix I can open a pull request.

Thanks

example configuration files.

I'm having trouble with basically every config to make this work.

I do have pusher working though.

Would you include your config files? And examples of what your are using for the github data?

Thanks!

Google Calendar Config 'file not found' Exception

I've placed a valid public calendar ID into my env's GOOGLE_CALENDAR_ID however when I run php artisan dashboard:fetch-calendar-events I get the following error:

[2017-09-06 01:47:36] local.ERROR: file does not exist {"exception":"[object] (InvalidArgumentException(code: 0): file does not exist at /home/vagrant/Code/dashboard/vendor/google/apiclient/src/Google/Client.php:849)

Unit tests

Please consider adding a handful of basic unit tests.

resize column like 1.5

I am currently using this amazing dashboard, I have just have one question for the column(size). Does it possible to add column size equivalent to 1 and 1 half, like

     <admin-file file-name="Admin" grid="a1:b1.5"></admin-file>//I mean 2 and a half column equivalent
    <feedback-file file-name="Feedback" grid="b1:c1"></feedback-file>

I don't know how to it in __grid.scss file

Thanks

GitHub task updates aren't instant

They listen to a webhook so should update instantly

Improve config

Use services.php for all the service configs, instead of creating config for lastfm, packagist, github etc.

Display weather on time tile

The rain predication time isn't useful enough. Let's just add the current temperature rain predication percentage to the time tile.

The Yahoo Weather API could be used for this.

Question - Can a color be passed to the Tasks Component

I am loving your dashboard. I cloned it to check it out. I modifed the template of Tasks. vue as

<tile :position="position" modifiers="overflow green">

and all the tasks panels turned green .... cool. However, I was wondering if there is a way to modify

<tasks team-member="alex" position="c2"></tasks>

in dashboard.blade.php to allow for different colors for each worker. Our thought is to use a green, yellow, orange, red scale to represent the worker to deadline ratio and need to be able to change panels individually.

This is a great dashboard and tool! Thanks for sharing!

Thumbs up emoji is not being displayed correctly

That questionmark should be "👍 "

Argument 1 passed to Illuminate\Auth\SessionGuard::login()

Quote not showing

Not sure if this behaviour is normal, seems to me like the key 'quoted_status' is missing? Or is this just treated as a reply, in which case the 'In reply to' never shows?

what's the password?I can't login in?

How to install this project?

Thanks for this nice piece of work. I would like to try it, but I don't know how to install it. Could you please provide the basic steps/commands to install it?

Uptime tile seems to be broken

Our uptime monitor seems to send the right events, but dashboard does not seem to pick that up.

Avoid fetching packagist stats if vendor is not configured

If services.packagist.vendor is null or empty then

dashboard.spatie.be/app/Console/Components/Packagist/FetchTotals.php

Line 20 in 0cd2647

$totals = collect($packagist->getPackagesByVendor(config('services.packagist.vendor'))['packageNames'])

will fetch the entire list of packagist packages, and then proceed to fetch them all via the API. This resulted in someone using your dashboard to do hourly updates of the entire db (143'000 packages * 24h = 3'432'000 requests per day or an equivalent of ~40 requests per second done to our API).

Maybe it should just skip this or error loudly if the config is not valid.

Defensive programming++ ;)

Weather graph is broken

phpinfo() in app.js?

Hey,

I have a very strange issue after following the installation steps. after executing "yarn run dev" and even "npm run dev", my app.js contains - when opened in the browser - a full and valid phpinfo() output... when I view it in PHPStorm, it shows valid webpack content, but how can it be that my browser sees phpinfo() executed inside the app.js?? Any idea on this?

Can I set the size of a component to btw 2 rows tall and 2 rows wide

maybe the attached will help.

Thanks!

Elixir NPM

Elixir has been moved to NPM could this potentially get updated to reflect?

not working for me :\

Missing argument 1 for Illuminate\Support\Manager::createDriver(), called in /dash/vendor/laravel/framework/src/Illuminate/Support/Manager.php on line 87 and defined

Typo error in .env.example

At line 47, Github is spelled Gitub...

GITUB_HOOK_SECRET

Mix 2.0

More of an FYI. I speculatively tried changing to using laravel mix 2.0, and npm was not happy with me about it. Instead of (helpfully) debugging I've been lazy and rolled back to the 0.* release. Just thought you might like the heads up on this one :)

Rasbian

Hi,

Looks like a really nice project, would you also be able to share the code/bash script you've used to display on the TV with the raspberry pi / chromium?

Thanks!

Jon via Laravel News