From 7b14cd5fdb3e11a6cfe06a1d4b2020c31dcebbe8 Mon Sep 17 00:00:00 2001
From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com>
Date: Thu, 16 Jun 2022 08:24:19 +0100
Subject: [PATCH] Traces: Consistent span colors for service names (#50782)

* Show consistent span colors

* Update tests

* Test for ensuring red is not used
---
 .../src/utils/color-generator.test.js         | 18 ++++--------------
 .../src/utils/color-generator.tsx             | 19 ++++++++++++++-----
 2 files changed, 18 insertions(+), 19 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 4281b91ff5e..b1857f3b127 100644
--- a/packages/jaeger-ui-components/src/utils/color-generator.test.js
+++ b/packages/jaeger-ui-components/src/utils/color-generator.test.js
@@ -30,20 +30,10 @@ it('gives different colors for each for each key', () => {
   expect(colorOne).not.toBe(colorTwo);
 });
 
-it('should clear cache', () => {
-  clear();
-  const colorOne = getColorByKey('serviceA', createTheme());
-  clear();
-  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');
+  // when aPAKNMeFcF is hashed it's index is 4
+  // which is red, which we disallow because it looks like an error
+  const colorOne = getColorByKey('aPAKNMeFcF', createTheme());
+  expect(colorOne).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 6e6a0627ed6..51821e7d81f 100644
--- a/packages/jaeger-ui-components/src/utils/color-generator.tsx
+++ b/packages/jaeger-ui-components/src/utils/color-generator.tsx
@@ -32,26 +32,36 @@ class ColorGenerator {
   colorsHex: string[];
   colorsRgb: Array<[number, number, number]>;
   cache: Map<string, number>;
-  currentIdx: number;
 
   constructor(colorsHex: string[]) {
     this.colorsHex = colorsHex;
     this.colorsRgb = colorsHex.map(strToRgb);
     this.cache = new Map();
-    this.currentIdx = 0;
   }
 
   _getColorIndex(key: string): number {
     let i = this.cache.get(key);
     if (i == null) {
+      const hash = this.hashCode(key.toLowerCase());
+      const hashIndex = Math.abs(hash % 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;
+      i = hashIndex === 4 ? hashIndex + 1 : hashIndex;
       this.cache.set(key, i);
-      this.currentIdx = (i + 1) % this.colorsHex.length;
     }
     return i;
   }
 
+  hashCode(key: string) {
+    var hash = 0,
+      i,
+      chr;
+    for (i = 0; i < key.length; i++) {
+      chr = key.charCodeAt(i);
+      hash = (hash << 5) - hash + chr;
+    }
+    return hash;
+  }
+
   /**
    * Will assign a color to an arbitrary key.
    * If the key has been used already, it will
@@ -74,7 +84,6 @@ class ColorGenerator {
 
   clear() {
     this.cache.clear();
-    this.currentIdx = 0;
   }
 }