From 56eb131715f076952caa4821797e0fb21427a9fa Mon Sep 17 00:00:00 2001
From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com>
Date: Mon, 6 Jun 2022 18:33:15 +0100
Subject: [PATCH] Traces: Do not use red in span colors as this looks like an
 error (#50074)

* Do not allow red in span colors

* Added test
---
 .../src/utils/color-generator.test.js                  | 10 ++++++++++
 .../jaeger-ui-components/src/utils/color-generator.tsx |  7 ++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/jaeger-ui-components/src/utils/color-generator.test.js b/packages/jaeger-ui-components/src/utils/color-generator.test.js
index 894dd69ab81..4281b91ff5e 100644
--- a/packages/jaeger-ui-components/src/utils/color-generator.test.js
+++ b/packages/jaeger-ui-components/src/utils/color-generator.test.js
@@ -37,3 +37,13 @@ it('should clear cache', () => {
   const colorTwo = getColorByKey('serviceB', createTheme());
   expect(colorOne).toBe(colorTwo);
 });
+
+it('should not allow red', () => {
+  clear();
+  getColorByKey('serviceA', createTheme());
+  getColorByKey('serviceB', createTheme());
+  getColorByKey('serviceC', createTheme());
+  getColorByKey('serviceD', createTheme());
+  const colorFive = getColorByKey('serviceE', createTheme());
+  expect(colorFive).not.toBe('#E24D42');
+});
diff --git a/packages/jaeger-ui-components/src/utils/color-generator.tsx b/packages/jaeger-ui-components/src/utils/color-generator.tsx
index aa5bc87dfd6..6e6a0627ed6 100644
--- a/packages/jaeger-ui-components/src/utils/color-generator.tsx
+++ b/packages/jaeger-ui-components/src/utils/color-generator.tsx
@@ -44,9 +44,10 @@ class ColorGenerator {
   _getColorIndex(key: string): number {
     let i = this.cache.get(key);
     if (i == null) {
-      i = this.currentIdx;
-      this.cache.set(key, this.currentIdx);
-      this.currentIdx = ++this.currentIdx % this.colorsHex.length;
+      // colors[4] is red (which we want to disallow as a span color because it looks like an error)
+      i = this.currentIdx !== 4 ? this.currentIdx : this.currentIdx + 1;
+      this.cache.set(key, i);
+      this.currentIdx = (i + 1) % this.colorsHex.length;
     }
     return i;
   }