Flag non-normal status in different color

[asayler]

When the status reports something other than "complete" flag it in red/yellow/etc.

[hexacyanide]

Made an attempt at this, and on determining that yellow text would be rather difficult to see, went with highlighting the status instead. I assumed that these were all the possible statuses:

complete
complete-exception-env
complete-exception-builder_setup
complete-exception-builder_build
complete-exception-tester_setup
complete-exception-tester_run
complete-exception-reporter
complete-error-builder_build
complete-error-tester_run

There's most likely a more elegant way of styling it, but so far it looks like this:

Any suggestions?

[asayler]

Yea, I'd just have three stats:

"complete" "complete-exception..." "complete-error..."

I think thsi is what you're already doing, but I'd use Bootstrap's predfined warning and danger states: https://getbootstrap.com/css/#helper-classes-colors. We could also color code the "complete" state in the green "success" color.

In general, I think I like text color better than highlighting, but I understand the readability concern. Still, I think the bootstrap "warning" color is readable enough to be worth a go. Easy to swap later if it causes issues.

[asayler]

Another option if we're concerned about readability would be to add a round "status light" icon somewhere on the output screen. We could then key this to differnt colors based on status.

[hexacyanide]

I agree that the text color is nicer, so here's what it looks like now:

Any other thoughts?

[asayler]

That seems like a good start. I agree the color differences could stand out a bit more, but this works for now.

I guess the next step would be to try something like changing the white background of the results section to different output values, but let's see how this works first.

As an aside, do you have a way of testing these on a working site? I've about to test your your previous pull request on my test server, but curious to know if/how you've been testing.

[hexacyanide]

Do you mean changing the entire background to also use it as an indicator of sorts?

As for testing, I've been running a local copy of COG and COG-Web, so all changes are tested on a live-running setup (but not with many different browsers).

[asayler]

Yes on the background - although that may present it's own text readability issues. But feel free to play around with it.

Glad to hear you have a local test setup. If you like, I can give you an account on my test API server - that way you'd just have to run your own test frontend server. But if you already went to the effort to spin up a local API server, all the better.

[asayler]

Can you post a screenshot of what the background color option looks like? Then we can pick our favorite of the above options and wrap it into a pull request.

[hexacyanide]

I'd appreciate a test API server account, since I occasionally develop remotely and don't have my current development machine exposed to the internet.

As for the commit above, it was actually just background highlighting for the status text (until it was changed to actual text color), but I've been testing around with very light shades of green/yellow/red and they currently look like this:

The above is using the following colors:

{
  "success": "#edf7f2",
  "exception": "#f7f7ed",
  "error": "#f7edf2"
}

Should they perhaps be even lighter?

[asayler]

I think those are all pretty readable.

Email me out of band (andy.sayler@colorado.edu) and we can get you a test server account spun up.