From a05b3e0928c513a7cffe2e93db9cb61e26543583 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 25 Jun 2020 17:58:19 +0100 Subject: [PATCH 1/2] fix(api): return label color data as rgba strings --- internal/models/api.go | 8 ++++++-- internal/transform/colors.go | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/internal/models/api.go b/internal/models/api.go index bb0939e60..40f05d180 100644 --- a/internal/models/api.go +++ b/internal/models/api.go @@ -27,11 +27,15 @@ type Color struct { Alpha uint8 `json:"alpha"` } +func (c *Color) ToString() string { + return fmt.Sprintf("rgba(%d,%d,%d,%d)", c.Red, c.Green, c.Blue, c.Alpha) +} + // 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 { - Brightness int32 `json:"brightness"` - Background Color `json:"background"` + Brightness int32 `json:"brightness"` + Background string `json:"background"` } // LabelsColorMap is a map of "Label Key" -> "Label Value" -> karmaLabelColors diff --git a/internal/transform/colors.go b/internal/transform/colors.go index f7667383d..80e571f52 100644 --- a/internal/transform/colors.go +++ b/internal/transform/colors.go @@ -58,7 +58,7 @@ func parseCustomColor(colorStore models.LabelsColorMap, key, val, customColor st } colorStore[key][val] = models.LabelColors{ Brightness: brightness, - Background: bc, + Background: bc.ToString(), } } @@ -102,7 +102,7 @@ func ColorLabel(colorStore models.LabelsColorMap, key string, val string) { brightness := rgbToBrightness(bc.Red, bc.Green, bc.Blue) colorStore[key][val] = models.LabelColors{ Brightness: brightness, - Background: bc, + Background: bc.ToString(), } } } From 62b8e8771fb8f16c1bdd01f6531927175f869d3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 25 Jun 2020 18:04:25 +0100 Subject: [PATCH 2/2] fix(ui): use string formatted rgba label colors --- .../Labels/FilterInputLabel/index.test.js | 4 ++-- .../Components/Labels/FilteringLabel/index.test.js | 4 ++-- .../Components/Labels/HistoryLabel/index.test.js | 4 ++-- ui/src/Components/Labels/StaticLabel/index.test.js | 4 ++-- ui/src/Components/Labels/Utils.js | 9 +-------- ui/src/Components/NavBar/index.stories.js | 4 ++-- ui/src/__mocks__/Stories.js | 14 +++++++------- 7 files changed, 18 insertions(+), 25 deletions(-) diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.js b/ui/src/Components/Labels/FilterInputLabel/index.test.js index 20d0f2b78..bd66591b3 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.test.js +++ b/ui/src/Components/Labels/FilterInputLabel/index.test.js @@ -18,7 +18,7 @@ const MockColors = () => { alertStore.data.colors["foo"] = { bar: { brightness: 200, - background: { red: 4, green: 5, blue: 6, alpha: 200 }, + background: "rgba(4,5,6,200)", }, }; }; @@ -112,7 +112,7 @@ describe(" style", () => { MockColors(); const tree = ShallowLabel("=", true, true, 1); expect(tree.props().style).toMatchObject({ - backgroundColor: "rgba(4, 5, 6, 200)", + backgroundColor: "rgba(4,5,6,200)", }); }); diff --git a/ui/src/Components/Labels/FilteringLabel/index.test.js b/ui/src/Components/Labels/FilteringLabel/index.test.js index 8b8e62d4c..6a926b9a3 100644 --- a/ui/src/Components/Labels/FilteringLabel/index.test.js +++ b/ui/src/Components/Labels/FilteringLabel/index.test.js @@ -65,7 +65,7 @@ describe("", () => { alertStore.data.colors["foo"] = { bar: { brightness: 125, - background: { red: 4, green: 5, blue: 6, alpha: 200 }, + background: "rgba(4,5,6,200)", }, }; const tree = MountedFilteringLabel("foo", "bar"); @@ -76,7 +76,7 @@ describe("", () => { alertStore.data.colors["foo"] = { bar: { brightness: 200, - background: { red: 4, green: 5, blue: 6, alpha: 200 }, + background: "rgba(4,5,6,200)", }, }; const tree = MountedFilteringLabel("foo", "bar"); diff --git a/ui/src/Components/Labels/HistoryLabel/index.test.js b/ui/src/Components/Labels/HistoryLabel/index.test.js index 5c6e044fb..ddef51537 100644 --- a/ui/src/Components/Labels/HistoryLabel/index.test.js +++ b/ui/src/Components/Labels/HistoryLabel/index.test.js @@ -40,7 +40,7 @@ describe("", () => { alertStore.data.colors["foo"] = { bar: { brightness: 125, - background: { red: 4, green: 5, blue: 6, alpha: 200 }, + background: "rgba(4,5,6,200)", }, }; const tree = ShallowHistoryLabel("foo", "=", "bar").find( @@ -53,7 +53,7 @@ describe("", () => { alertStore.data.colors["foo"] = { bar: { brightness: 200, - background: { red: 4, green: 5, blue: 6, alpha: 200 }, + background: "rgba(4,5,6,200)", }, }; const tree = ShallowHistoryLabel("foo", "=", "bar").find( diff --git a/ui/src/Components/Labels/StaticLabel/index.test.js b/ui/src/Components/Labels/StaticLabel/index.test.js index 3b54a9766..30ec14f15 100644 --- a/ui/src/Components/Labels/StaticLabel/index.test.js +++ b/ui/src/Components/Labels/StaticLabel/index.test.js @@ -28,7 +28,7 @@ describe("", () => { alertStore.data.colors["foo"] = { bar: { brightness: 125, - background: { red: 4, green: 5, blue: 6, alpha: 200 }, + background: "rgba(4,5,6,200)", }, }; const tree = MountedStaticLabel(); @@ -41,7 +41,7 @@ describe("", () => { alertStore.data.colors["foo"] = { bar: { brightness: 200, - background: { red: 4, green: 5, blue: 6, alpha: 200 }, + background: "rgba(4,5,6,200)", }, }; const tree = MountedStaticLabel(); diff --git a/ui/src/Components/Labels/Utils.js b/ui/src/Components/Labels/Utils.js index a113c8a39..698b929f0 100644 --- a/ui/src/Components/Labels/Utils.js +++ b/ui/src/Components/Labels/Utils.js @@ -31,14 +31,7 @@ const GetClassAndStyle = (alertStore, name, value, extraClass, baseClass) => { } else { const c = alertStore.data.getColorData(name, value); if (c) { - // if there's color information use it - data.style["backgroundColor"] = `rgba(${[ - c.background.red, - c.background.green, - c.background.blue, - c.background.alpha, - ].join(", ")})`; - + data.style["backgroundColor"] = c.background; data.colorClassNames.push( isBackgroundDark(c.brightness) ? "components-label-dark" diff --git a/ui/src/Components/NavBar/index.stories.js b/ui/src/Components/NavBar/index.stories.js index c573f11d9..704096f16 100644 --- a/ui/src/Components/NavBar/index.stories.js +++ b/ui/src/Components/NavBar/index.stories.js @@ -31,13 +31,13 @@ storiesOf("NavBar", module).add("NavBar", () => { cluster: { staging: { brightness: 205, - background: { red: 246, green: 176, blue: 247, alpha: 255 }, + background: "rgba(246,176,247,255)", }, }, region: { AF: { brightness: 111, - background: { red: 115, green: 101, blue: 152, alpha: 255 }, + background: "rgba(115,101,152,255)", }, }, }; diff --git a/ui/src/__mocks__/Stories.js b/ui/src/__mocks__/Stories.js index 5822aabf3..9d2e43a85 100644 --- a/ui/src/__mocks__/Stories.js +++ b/ui/src/__mocks__/Stories.js @@ -76,33 +76,33 @@ const MockGrid = (alertStore) => { group: { group1: { brightness: 50, - background: { red: 178, green: 55, blue: 247, alpha: 255 }, + background: "rgba(178,55,247,255)", }, group2: { brightness: 50, - background: { red: 200, green: 100, blue: 66, alpha: 255 }, + background: "rgba(200,100,66,255)", }, group3: { brightness: 205, - background: { red: 246, green: 176, blue: 247, alpha: 255 }, + background: "rgba(246,176,247,255)", }, group4: { brightness: 111, - background: { red: 115, green: 101, blue: 152, alpha: 255 }, + background: "rgba(115,101,152,255)", }, }, instance: { instance1: { brightness: 50, - background: { red: 111, green: 65, blue: 40, alpha: 255 }, + background: "rgba(111,65,40,255)", }, instance2: { brightness: 50, - background: { red: 66, green: 99, blue: 66, alpha: 255 }, + background: "rgba(66,99,66,255)", }, instance3: { brightness: 150, - background: { red: 66, green: 250, blue: 123, alpha: 255 }, + background: "rgba(66,250,123,255)", }, }, };