Colours indicate feed status of activity

[TrystanLea]

http://getbootstrap.com/2.3.2/base-css.html#tables

[emrysr]

here's a screenshot of a bootstrap 4 version I tried out. It seems a little messy with all the colours:

let me know what you think and I'll attempt it on the v2 feeds layout.

Interactive version:
https://codepen.io/emrys/full/mGoryK/

[emrysr]

Tweeked the colours with @TrystanLea @glynhudson ...

https://codepen.io/emrys/full/mGoryK/

[TrystanLea]

@pb66, @Paul-Reed interesting UI proposal from @emrysr, try clicking on individual feeds, perhaps this could be the future?

[pb66]

I like it!

The coloring is still a bit garish, perhaps it will grow on me :-) It's far more subtle than the last suggestion.

The tool tip info box is a really good idea, I like the buttons in the box rather than the top of the screen (on a PC, I haven't tried it with a mobile yet).

Couple of minor points which have been mentioned before.
where is the feed start time in unix seconds
interval not needed for other feeds, only phpfina so combine the feed type and interval for clarity eg "5sec PHPFINA" or "PHPFINA (5s)"

If you are going to include a timedate string for easy reading then is should be an easy read string and include the TZ if not UTC (but perhaps even UTC should ideally be indicated)

What is "latest" ? Is it the timestamp of the last value (eg the last update might have been yesterdays data posted an hour ago)

Where does "87s" come from?

What is considered "inactive"? will we need another field in the feeds table for "acceptable inactivity period"? I have inputs/feeds that update once per day, will these always display in red?

IMO the feed name:tag isn't prominent enough, it maybe the soft blue colour or perhaps because there is a lot of bold in the left column, it just doesn't standout as a title/label, maybe it needs bold or a increase in font. It also needs a gap or 2 to separate the name and the tag eg "small node : example 123" to help readability.

Where are the values and units? I'm guessing it's incomplete or based on an older version? as the feedtype and public status are still displayed.

[Paul-Reed]

Very slick! It's got both form & function, nice work @emrysr
Like Paul above has said, the colour scheme maybe needs tweaking a little (pink?), but almost there.
The tooltips are a big improvement - 'click for tooltip - not hover'.

Paul

[Paul-Reed]

In fact thinking some more about this... Is it really necessary to shade the row at all to indicate stagnant feeds?
It's going to be difficult to get the shading right, and it dominates the table.
Currently, the 'last update time' changes green, amber & red, which imo is sufficient, and fits well into the aesthetics.
Also, as Paul mentioned above, how are you going to determine the time period which triggers this. I have some feeds which update every 5 seconds, and some every 20 minutes (weather data via API).
I could live with a amber or red 'last update time' for the weather feeds, but having the entire row coloured red (or pink) would be an over the top response, when everything is running as expected.

As per my last post, I do like this poc, and you are definitely heading in the right direction.

[emrysr]

@TrystanLea @pb66 @Paul-Reed thank you for the positive feedback!.

RE: DATA IN DEMO
The above screenshots are of a 'flat' version of the site - just for js and css ideas - values and content are not 'real' values.

RE: INTERVALS
as we know the interval for each feed the highlighting of 'inactive' feeds could be based on a value derived from the feeds' interval... ie yellow if a few intervals are missed and red if 20+ intervals missed? (the thresholds could be discussed?) @pb66 I like the idea of displaying the interval for the feeds with intervals - currently only available in the tooltip.

RE: COLOURS
I'll try a few other designs that might be less "garish"...
Those colours were the default bootstrap v4 list group and card colours

https://getbootstrap.com/docs/4.0/utilities/colors/

[emrysr]

maybe a "traffic light" red/amber/green indicator could be added to each node group like this?
[screenshot of desktop view]

this would be also be visible on smaller devices that might only fit the title column when the titles are longer
[screenshot of iphone6/7/8]

the stronger colours were used as only a small amount colour was needed - the lighter colours don't group the nodes effectively at a glance

[Paul-Reed]

I realise that you are just exploring different options, but are you opposed to simply colouring the 'last updated time'?
It's easy enough to see the status, and less obtrusive.
If you didn't want to show the last updated time on mobile, maybe just a small round filled in circle would suffice.

[emrysr]

The time is not visible on small mobile devices if the title is too long to fit along side the time.

This is why I'm trying to explore the best way to show the feed status without taking up any additional width.

[emrysr]

here's the above with small filled circles - https://codepen.io/emrys/full/wYWQzM/

[Paul-Reed]

I suppose we could have different indicators for large & small devices, to reflect the available space.
So for example, where there is enough space to show the time, use the time digits to display the status colour. And on smaller devices, hide the time and show a circle, square or whatever?