Skip to content

WCCC Production Systems Status Board

This content will be shown before all post

Update: Custom built status boards for monitoring your systems, helpdesk, or NOC can be developed via my web design and development business, Sators.com.

Read an interview with Atlassian regarding the status board project…


So over the past week or two I have built out a status board for the Willow Creek Production Systems department.  It was a pretty fun project for me, I guess I’ll share some details.  🙂  The inspiration began from reading about the Panic Room’s Status Board, so that got the mind working, then the fingers started doing the rest.  Here’s the skinny with a demo video at the bottom:

The Status Board

The status board contains:

  • Kayako SupportSuite Helpdesk Ticket System:
    • Current Ticket Status Count (Top Right)
    • Current Department Count (Columns: Overdue tickets / Open Tickets)
    • Last 5 New Tickets
    • Top 5 Overdue Tickets
    • Ticket Count Trend (Top Left) (If there are more open or closed tickets within the 24h period, doesn’t display if the count is even)
  • Twitter Feed (Search query pulled from MySQL, updated every 15s)
  • Countdown (Again, pulled from MySQL)
  • Calendar
    • Current Date/Time/Day
    • Next 7 Upcoming Events from Google Calendar
  • Current Local Weather
    • Pulled from Yahoo Weather
    • Auto-updating weather image and icons based on current conditions / forecast
    • Today/Tomorrow Forecast with High/Low Temps
  • Outdoor Webcam (AXIS 221 Network Camera)
  • RSS Feed Ticker (List of RSS Feeds pulled from MySQL on rotation, scrolling titles of 5 recent items)

Behind the scenes, when there is a new ticket submitted to the system, it triggers a WebSwitch “On Air” light (cause I didn’t have a big flashing light) that alerts the team when a new ticket arrives, and auto shuts off after the ticket is over 1h old.  You’ll also see in the demo video below that once a new ticket hits the system, the board goes to a full screen “NEW TICKET” alert that briefly displays the submitted information so the team knows whether to spring into action on a critical issue or not.

The board is running on a Mac Mini running Plainview at full screen on a Hannspree LCD TV via DVI > HDMI at 1360×768.  The background gradients are all CSS based, so as the heights of the columns change based off of the current ticket counts relational to each other, the gradients will adjust automatically.  Similarly the rounded corners are all 100% CSS based.  I built the widgets all from scratch.  The system uses jQuery, AJAX, PHP, MySQL, JSON, WebKit, etc. etc. etc.  The majority of the system was built over the course of two days (while my wife was out of town) 🙂 and tweaked throughout the following week or two.

This is a pretty custom built application – it was nice knowing exactly what browser and exactly what screen resolution to build for.  Because of this, I don’t care that it looks wonky in Firefox, etc.  However, it is a “fluid-ish” design in that most of the design is based off of percentages, etc.  Here’s a demo video:

If you have a similar ticket system or would potentially have any interest in a board like this for your environment or a custom application, drop me an email at matt@sators.com.  I’d be happy to answer any questions via comments below.  The source code for the above board can be found at https://github.com/sators/sators-status-board

Check out another status board I did with some similarities to this board.

Thanks!

Icons Provided by: http://icontexto.blogspot.com/; cyberchaos05
Weather Data and Graphics from Yahoo Weather

This content will be shown after all post