From da5bb42c2647083c971b0ca1ea2d01b81abacf0c Mon Sep 17 00:00:00 2001
From: Mike Morris <1149913+mikemorris@users.noreply.github.com>
Date: Sun, 24 Mar 2024 15:45:16 -0400
Subject: [PATCH 1/2] update colorscheme to colorblind-friendly Tol palette
---
assets/html/index.html | 90 ++++++++++++++++++++++++-----------------
faces-chart/values.yaml | 4 +-
pkg/faces/constants.go | 21 ++++++++--
3 files changed, 71 insertions(+), 44 deletions(-)
diff --git a/assets/html/index.html b/assets/html/index.html
index 5012d82..880ce7e 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -26,19 +26,19 @@
}
.green {
- color: green;
+ color: rgb(55 117 59);
}
.red {
- color: red;
+ color: rgb(125 42 83); /* dark magenta */
}
.blue {
- color: blue;
+ color: rgb(151 202 234); /* light blue */
}
.grey {
- color: gray;
+ color: grey;
}
.key {
@@ -184,19 +184,19 @@
}
.bg-green {
- background-color: green;
+ background-color: rgb(55 117 59);
}
.bg-red {
- background-color: red;
+ background-color: rgb(125 42 83); /* dark magenta */
}
.bg-blue {
- background-color: blue;
+ background-color: rgb(151 202 234); /* light blue */
}
.bg-grey {
- background-color: gray;
+ background-color: grey;
}
.inline {
@@ -304,15 +304,15 @@ Faces
// having to always pass the color by hand.
success(msg) {
- this.logmsg("green", msg)
+ this.logmsg(Cell.colors.green, msg)
}
fail(msg) {
- this.logmsg("red", msg)
+ this.logmsg(Cell.colors.red, msg)
}
info(msg) {
- this.logmsg("grey", msg)
+ this.logmsg(Cell.colors.grey, msg)
}
}
@@ -435,12 +435,12 @@ Faces
if (status == 599) {
// Latched error state.
smiley = Cell.smilies.neutral
- bgColor = "hotpink"
+ bgColor = Cell.colors.hotpink
bumpCounter = true
}
else if (status == 429) {
smiley = Cell.smilies.sleeping
- bgColor = "pink"
+ bgColor = Cell.colors.pink
bumpCounter = true
}
else if (status == 200) {
@@ -449,7 +449,7 @@ Faces
}
if (bgColor == "504") {
- bgColor = "pink"
+ bgColor = Cell.colors.pink
}
this.countDiv.innerHTML = 0
@@ -457,9 +457,9 @@ Faces
}
else {
// This should probably never happen.
- borderColor = "red"
+ borderColor = Cell.colors.red
smiley = Cell.smilies.upset
- bgColor = "red"
+ bgColor = Cell.colors.red
bumpCounter = true
}
@@ -570,6 +570,18 @@ Faces
"yay": "🎉",
};
+ static colors = {
+ "grey": "grey",
+ "purple": "rgb(48 34 130)",
+ "green": "rgb(55 117 59)",
+ "cyan": "rgb(55 117 59)", // too similar to grey, avoid
+ "blue": "rgb(151 202 234)", // light blue
+ "yellow": "rgb(218 204 130)",
+ "pink": "rgb(191 108 120)",
+ "hotpink": "rgb(158 75 149)",
+ "red": "rgb(125 42 83)", // dark magenta
+ }
+
constructor(logger, sw, podSet, fetchURL, enclosingDiv, row, col) {
this.logger = logger
this.sw = sw
@@ -755,7 +767,7 @@ Faces
setTimeout(() => {
$(`smiley-${this.row}-${this.col}`).innerHTML = Cell.smilies.confused
$(`cell-${this.row}-${this.col}`).style.opacity = 1.0
- $(`cell-${this.row}-${this.col}`).style.background = "red"
+ $(`cell-${this.row}-${this.col}`).style.background = Cell.colors.red
$(`cell-${this.row}-${this.col}`).style.borderColor = "grey"
}, 50)
@@ -790,7 +802,7 @@ Faces
let errors = "unknown";
let smiley = undefined;
let bgColor = undefined;
- let borderColor = "grey";
+ let borderColor = Cell.colors.grey;
// Start by assuming that we didn't get any timeouts.
let anyTimeouts = false;
@@ -808,7 +820,7 @@ Faces
if (obj.errors != undefined) {
errors = obj.errors.join(",");
- borderColor = "red";
+ borderColor = Cell.colors.red
}
else {
errors = "success!";
@@ -824,9 +836,9 @@ Faces
catch (e) {
// Whoops, something went wrong. If it's a SyntaxError, that
// probably means we got bad JSON. Otherwise, it's... who knows?
- borderColor = "red";
+ borderColor = Cell.colors.red
smiley = Cell.smilies.confused;
- bgColor = "red";
+ bgColor = Cell.colors.red;
if (e instanceof SyntaxError) {
errors = "parse error";
@@ -850,14 +862,14 @@ Faces
// This is our latched-error status. Show it as a neutral face
// on a hot pink background.
smiley = Cell.smilies.neutral;
- bgColor = "hotpink";
+ bgColor = Cell.colors.hotpink;
}
else if (Math.floor(curStatus / 100) == 5) {
// Some other 5yz, so an unknown kind of server error. (In
// practice, this is probably a 503 because there's some kind
// of connectivity error, but whatever, we don't care.
smiley = Cell.smilies.confused;
- bgColor = "red";
+ bgColor = Cell.colors.red;
errors = "server error";
}
@@ -866,7 +878,7 @@ Faces
}
if (bgColor == undefined) {
- bgColor = "purple"
+ bgColor = Cell.colors.purple
}
return { curStatus, anyTimeouts, smiley, bgColor, borderColor };
@@ -876,12 +888,12 @@ Faces
class Key {
constructor(keyDiv) {
let keyEntries = [
- [ "smiling", "blue", "grey", "24px", "Success!" ],
- [ "confused", "red", "grey", "", "Face service error" ],
- [ "sleeping", "pink", "grey", "", "Timeout" ],
- [ "kaboom", "red", "grey", "24px", "Service overwhelmed" ],
- [ "smiling", "grey", "transparent", "", "Color service error" ],
- [ "", "blue", "red", "24px", "Smiley service error" ],
+ [ "smiling", Cell.colors.blue, Cell.colors.grey, "24px", "Success!" ],
+ [ "confused", Cell.colors.red, Cell.colors.grey, "", "Face service error" ],
+ [ "sleeping", Cell.colors.pink, Cell.colors.grey, "", "Timeout" ],
+ [ "kaboom", Cell.colors.red, Cell.colors.grey, "24px", "Service overwhelmed" ],
+ [ "smiling", Cell.colors.grey, "transparent", "", "Color service error" ],
+ [ "", Cell.colors.blue, Cell.colors.red, "24px", "Smiley service error" ],
[ "-", "-", "-", "", "Slow service" ]
]
@@ -986,11 +998,11 @@ Faces
if (cellCount > 4) {
let smiley = Cell.smilies.sleeping
- let bgColor = "pink"
+ let bgColor = Cell.colors.pink
if (cell.lastStatus == 599) {
smiley = Cell.smilies.screaming
- bgColor = "hotpink"
+ bgColor = Cell.colors.hotpink
}
$(`smiley-${cell.row}-${cell.col}`).innerHTML = smiley
@@ -1097,12 +1109,12 @@ Faces
if (xhr.status == 504) {
text = `Timeout after ${latency}ms`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
- fgColor = "cyan"
+ fgColor = Cell.colors.cyan
}
else if (xhr.status != 200) {
text = `Unknown status ${xhr.status} after ${latency}ms`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
- fgColor = "red"
+ fgColor = Cell.colors.red
}
else {
// Parse JSON!
@@ -1118,12 +1130,12 @@ Faces
if (e instanceof SyntaxError) {
text = `Could not parse QotM: ${e.message}\n${xhr.responseText}`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
- fgColor = "red"
+ fgColor = Cell.colors.red
}
else {
text = `Missing QotM? ${e.message}`
shape = "19.000,49.000 31.000,49.000 31.000,1.000 19.000,1.000"
- fgColor = "red"
+ fgColor = Cell.colors.red
}
}
}
@@ -1134,11 +1146,11 @@ Faces
// XSRF-protection cookie, and it changes whenever the auth token does.
let decoration = `${latency}ms`
- let bgColor = "green"
+ let bgColor = Cell.colors.green
let curXSRF = getCookie("ambassador_xsrf.keycloak-multi.default")
if (curXSRF != this.lastXSRF) {
- bgColor = "blue"
+ bgColor = Cell.colors.blue
decoration += ", new session token"
this.lastXSRF = curXSRF
}
@@ -1167,6 +1179,8 @@ Faces
let nowISO = now.toISOString()
this.xhrdiv.innerHTML = `${nowISO}: Failed!
`
+
+ // FIXME: this looks like the wrong arguments for calling this.markers.mark
this.markers.mark("red")
})
diff --git a/faces-chart/values.yaml b/faces-chart/values.yaml
index d35629c..c5c2ca7 100644
--- a/faces-chart/values.yaml
+++ b/faces-chart/values.yaml
@@ -58,7 +58,7 @@ color:
imagePullPolicy: "" # If not set, uses backend.imagePullPolicy
errorFraction: "" # If not set, uses backend.errorFraction
delayBuckets: "" # If not set, uses backend.delayBuckets
- color: "blue" # Override if desired
+ color: "rgb(151 202 234)" # Override if desired, defaults to colorblind-friendly light blue from the Tol palette
color2:
enabled: False # If set to True, enables the second color workload
@@ -68,4 +68,4 @@ color2:
imagePullPolicy: "" # If not set, uses backend.imagePullPolicy
errorFraction: "" # If not set, uses backend.errorFraction
delayBuckets: "" # If not set, uses backend.delayBuckets
- color: "orange" # Override if desired
+ color: "rgb(55 117 59)" # Override if desired, defaults to colorblind-friendly green from the Tol palette
diff --git a/pkg/faces/constants.go b/pkg/faces/constants.go
index 663f98f..d0e9b1d 100644
--- a/pkg/faces/constants.go
+++ b/pkg/faces/constants.go
@@ -28,18 +28,31 @@ var Smileys = map[string]string{
"Screaming": "😱",
}
+// colorblind-friendly colors from the Tol palette
+var Colors = map[string]string{
+ "grey": "grey",
+ "purple": "rgb(48 34 130)",
+ "green": "rgb(55 117 59)",
+ "teal": "rgb(55 117 59)", // too similar to grey, avoid
+ "blue": "rgb(151 202 234)", // light blue
+ "yellow": "rgb(218 204 130)",
+ "pink": "rgb(191 108 120)",
+ "hotpink": "rgb(158 75 149)",
+ "red": "rgb(125 42 83)", // dark magenta
+}
+
var Defaults = map[string]string{
// Default to grey background, cursing face.
- "color": "grey",
+ "color": Colors["grey"],
"smiley": Smileys["Cursing"],
// 504 errors (GatewayTimeout) from the face workload will get handled in
// the GUI, but from the color & smiley workloads, they should get
- // translated to a pink color or a sleeping face.
- "color-504": "pink",
+ // translated to a pink color and a sleeping face.
+ "color-504": Colors["pink"],
"smiley-504": Smileys["Sleeping"],
// Ratelimits are pink with an exploding head.
- "color-ratelimit": "pink",
+ "color-ratelimit": Colors["pink"],
"smiley-ratelimit": Smileys["Kaboom"],
}
From 33f9545b87d6dfe393c2d95eeb3c923f6f9552a7 Mon Sep 17 00:00:00 2001
From: Mike Morris
Date: Mon, 25 Mar 2024 11:30:44 -0400
Subject: [PATCH 2/2] Apply suggestions from code review
---
assets/html/index.html | 2 +-
pkg/faces/constants.go | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/assets/html/index.html b/assets/html/index.html
index 880ce7e..b80af38 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -574,7 +574,7 @@ Faces
"grey": "grey",
"purple": "rgb(48 34 130)",
"green": "rgb(55 117 59)",
- "cyan": "rgb(55 117 59)", // too similar to grey, avoid
+ "cyan": "rgb(55 117 59)", // too similar to pink and grey, avoid
"blue": "rgb(151 202 234)", // light blue
"yellow": "rgb(218 204 130)",
"pink": "rgb(191 108 120)",
diff --git a/pkg/faces/constants.go b/pkg/faces/constants.go
index d0e9b1d..b55a5b8 100644
--- a/pkg/faces/constants.go
+++ b/pkg/faces/constants.go
@@ -33,7 +33,7 @@ var Colors = map[string]string{
"grey": "grey",
"purple": "rgb(48 34 130)",
"green": "rgb(55 117 59)",
- "teal": "rgb(55 117 59)", // too similar to grey, avoid
+ "cyan": "rgb(55 117 59)", // too similar to pink and grey, avoid
"blue": "rgb(151 202 234)", // light blue
"yellow": "rgb(218 204 130)",
"pink": "rgb(191 108 120)",