From 32f3ed4f60d4ee26d1f061810a212c6bb1dbef42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sun, 30 Sep 2018 13:40:29 +0100 Subject: [PATCH 1/2] fix(ui): break long words in annotations --- ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.css b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.css index 46c2961ab..ecd00c7bd 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.css +++ b/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 { From 090d73350ce8d998d852b99d854b758427694107 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sun, 30 Sep 2018 13:42:17 +0100 Subject: [PATCH 2/2] refactor(colors): move font color selection to the fronted Right now backend sends both background and font color information, refactor to send background color and background brightness level (needed to pick font color) and let UI apply font color. Needed to implement #18 --- internal/models/api.go | 2 +- internal/transform/colors.go | 21 +------------------ ui/src/Components/Labels/BaseLabel/index.js | 10 ++++----- .../Components/Labels/BaseLabel/index.test.js | 20 +++++++++++++++--- .../Labels/FilterInputLabel/index.test.js | 4 ++-- 5 files changed, 25 insertions(+), 32 deletions(-) diff --git a/internal/models/api.go b/internal/models/api.go index c2fc459ca..68b779310 100644 --- a/internal/models/api.go +++ b/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"` } diff --git a/internal/transform/colors.go b/internal/transform/colors.go index b2793329d..3087f0d4c 100644 --- a/internal/transform/colors.go +++ b/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, } } diff --git a/ui/src/Components/Labels/BaseLabel/index.js b/ui/src/Components/Labels/BaseLabel/index.js index 12d2ed95c..a86ee99c3 100644 --- a/ui/src/Components/Labels/BaseLabel/index.js +++ b/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; } diff --git a/ui/src/Components/Labels/BaseLabel/index.test.js b/ui/src/Components/Labels/BaseLabel/index.test.js index b5f7d19b6..bba969f4b 100644 --- a/ui/src/Components/Labels/BaseLabel/index.test.js +++ b/ui/src/Components/Labels/BaseLabel/index.test.js @@ -65,16 +65,30 @@ describe("", () => { 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)" }); }); diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.js b/ui/src/Components/Labels/FilterInputLabel/index.test.js index ac0daa404..099228cf2 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.test.js +++ b/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(" 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)" }); });