Traces: Do not use red in span colors as this looks like an error (#50074)

* Do not allow red in span colors

* Added test

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');
+});

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;
   }