Merge pull request #94 from prymitive/ui-colors

refactor(colors): move font color selection to the fronted

internal/models/api.go

@@ -27,7 +27,7 @@ type Color struct {
 // LabelColors holds color information for labels that should be colored in the UI
 // every configured label will have a distinct coloring for each value
 type LabelColors struct {
-	Font       Color `json:"font"`
+	Brightness int32 `json:"brightness"`
 	Background Color `json:"background"`
 }
 

internal/transform/colors.go

@@ -55,27 +55,8 @@ func ColorLabel(colorStore models.LabelsColorMap, key string, val string) {
 			// check if color is bright or dark and pick the right background
 			// uses https://www.w3.org/WAI/ER/WD-AERT/#color-contrast method
 			brightness := ((int32(bc.Red) * 299) + (int32(bc.Green) * 587) + (int32(bc.Blue) * 114)) / 1000
-			var fc models.Color
-			if brightness <= 125 {
-				// background color is dark, use white font
-				fc = models.Color{
-					Red:   255,
-					Green: 255,
-					Blue:  255,
-					Alpha: 255,
-				}
-			} else {
-				// background color is bright, use dark font
-				fc = models.Color{
-					Red:   44,
-					Green: 62,
-					Blue:  80,
-					Alpha: 255,
-				}
-			}
-
 			colorStore[key][val] = models.LabelColors{
-				Font:       fc,
+				Brightness: brightness,
 				Background: bc,
 			}
 		}

ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.css

@@ -1,5 +1,6 @@
 .components-grid-annotation {
   font-size: 90%;
+  word-break: break-all;
 }
 
 .components-grid-annotation-link {

ui/src/Components/Labels/BaseLabel/index.js

@@ -49,12 +49,10 @@ class BaseLabel extends Component {
         c.background.blue,
         c.background.alpha
       ].join(", ")})`;
-      style["color"] = `rgba(${[
-        c.font.red,
-        c.font.green,
-        c.font.blue,
-        c.font.alpha
-      ].join(", ")})`;
+      style["color"] =
+        c.brightness <= 125
+          ? "rgba(255, 255, 255, 255)"
+          : "rgba(44, 62, 80, 255)";
     }
     return style;
   }

ui/src/Components/Labels/BaseLabel/index.test.js

@@ -65,16 +65,30 @@ describe("<BaseLabel />", () => {
     expect(instance.getColorStyle("foo", "bar")).toMatchObject({});
   });
 
-  it("getColorStyle() on a label with color information should be correctly formatted", () => {
+  it("getColorStyle() on a label with dark background color should have a bright font", () => {
     alertStore.data.colors["foo"] = {
       bar: {
-        font: { red: 1, green: 2, blue: 3, alpha: 100 },
+        brightness: 125,
         background: { red: 4, green: 5, blue: 6, alpha: 200 }
       }
     };
     const instance = FakeBaseLabel().instance();
     expect(instance.getColorStyle("foo", "bar")).toMatchObject({
-      color: "rgba(1, 2, 3, 100)",
+      color: "rgba(255, 255, 255, 255)",
+      backgroundColor: "rgba(4, 5, 6, 200)"
+    });
+  });
+
+  it("getColorStyle() on a label with bright background color should have a dark font", () => {
+    alertStore.data.colors["foo"] = {
+      bar: {
+        brightness: 200,
+        background: { red: 4, green: 5, blue: 6, alpha: 200 }
+      }
+    };
+    const instance = FakeBaseLabel().instance();
+    expect(instance.getColorStyle("foo", "bar")).toMatchObject({
+      color: "rgba(44, 62, 80, 255)",
       backgroundColor: "rgba(4, 5, 6, 200)"
     });
   });

ui/src/Components/Labels/FilterInputLabel/index.test.js

@@ -17,7 +17,7 @@ const NonEqualMatchers = ["!=", "=~", "!~", ">", "<"];
 const MockColors = () => {
   alertStore.data.colors["foo"] = {
     bar: {
-      font: { red: 1, green: 2, blue: 3, alpha: 100 },
+      brightness: 200,
       background: { red: 4, green: 5, blue: 6, alpha: 200 }
     }
   };
@@ -109,7 +109,7 @@ describe("<FilterInputLabel /> style", () => {
     MockColors();
     const tree = ShallowLabel("=", true, true);
     expect(tree.props().style).toMatchObject({
-      color: "rgba(1, 2, 3, 100)",
+      color: "rgba(44, 62, 80, 255)",
       backgroundColor: "rgba(4, 5, 6, 200)"
     });
   });