Tracing: Change color palette. (#23656)

packages/jaeger-ui-components/src/Theme.tsx

@@ -17,6 +17,50 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import memoizeOne from 'memoize-one';
 import tinycolor from 'tinycolor2';
 
+const COLORS_HEX = [
+  '#17B8BE',
+  '#F8DCA1',
+  '#B7885E',
+  '#FFCB99',
+  '#F89570',
+  '#829AE3',
+  '#E79FD5',
+  '#1E96BE',
+  '#89DAC1',
+  '#B3AD9E',
+  '#12939A',
+  '#DDB27C',
+  '#88572C',
+  '#FF9833',
+  '#EF5D28',
+  '#162A65',
+  '#DA70BF',
+  '#125C77',
+  '#4DC19C',
+  '#776E57',
+];
+
+const COLORS_HEX_DARK = [
+  '#17B8BE',
+  '#F8DCA1',
+  '#B7885E',
+  '#FFCB99',
+  '#F89570',
+  '#829AE3',
+  '#E79FD5',
+  '#1E96BE',
+  '#89DAC1',
+  '#B3AD9E',
+  '#12939A',
+  '#DDB27C',
+  '#88572C',
+  '#FF9833',
+  '#EF5D28',
+  '#DA70BF',
+  '#4DC19C',
+  '#776E57',
+];
+
 export type ThemeOptions = Partial<Theme>;
 
 export enum ThemeType {
@@ -26,16 +70,19 @@ export enum ThemeType {
 
 export type Theme = {
   type: ThemeType;
+  servicesColorPalette: string[];
   borderStyle: string;
 };
 
 export const defaultTheme: Theme = {
   type: ThemeType.Light,
   borderStyle: '1px solid #bbb',
+  servicesColorPalette: COLORS_HEX,
 };
 
-export function isLight(theme: Theme) {
-  return theme.type === ThemeType.Light;
+export function isLight(theme?: Theme | ThemeOptions) {
+  // Light theme is default type not set which only happens if called for ThemeOptions.
+  return theme && theme.type ? theme.type === ThemeType.Light : false;
 }
 
 const ThemeContext = React.createContext<ThemeOptions | undefined>(undefined);
@@ -57,10 +104,15 @@ export function ThemeConsumer(props: ThemeConsumerProps) {
   );
 }
 
-const memoizedThemeMerge = memoizeOne(value => {
+const memoizedThemeMerge = memoizeOne((value?: ThemeOptions) => {
+  const darkOverrides: Partial<Theme> = {};
+  if (!isLight(value)) {
+    darkOverrides.servicesColorPalette = COLORS_HEX_DARK;
+  }
   return value
     ? {
         ...defaultTheme,
+        ...darkOverrides,
         ...value,
       }
     : defaultTheme;

packages/jaeger-ui-components/src/utils/color-generator.tsx

@@ -12,51 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { isLight, Theme } from '../Theme';
-
-const COLORS_HEX = [
-  '#17B8BE',
-  '#F8DCA1',
-  '#B7885E',
-  '#FFCB99',
-  '#F89570',
-  '#829AE3',
-  '#E79FD5',
-  '#1E96BE',
-  '#89DAC1',
-  '#B3AD9E',
-  '#12939A',
-  '#DDB27C',
-  '#88572C',
-  '#FF9833',
-  '#EF5D28',
-  '#162A65',
-  '#DA70BF',
-  '#125C77',
-  '#4DC19C',
-  '#776E57',
-];
-
-const COLORS_HEX_DARK = [
-  '#17B8BE',
-  '#F8DCA1',
-  '#B7885E',
-  '#FFCB99',
-  '#F89570',
-  '#829AE3',
-  '#E79FD5',
-  '#1E96BE',
-  '#89DAC1',
-  '#B3AD9E',
-  '#12939A',
-  '#DDB27C',
-  '#88572C',
-  '#FF9833',
-  '#EF5D28',
-  '#DA70BF',
-  '#4DC19C',
-  '#776E57',
-];
+import { Theme } from '../Theme';
+import memoizeOne from 'memoize-one';
 
 // TS needs the precise return type
 function strToRgb(s: string): [number, number, number] {
@@ -118,18 +75,18 @@ class ColorGenerator {
   }
 }
 
-let darkGenerator = new ColorGenerator(COLORS_HEX_DARK);
-let lightGenerator = new ColorGenerator(COLORS_HEX);
+const getGenerator = memoizeOne((colors: string[]) => {
+  return new ColorGenerator(colors);
+});
 
 export function clear() {
-  darkGenerator = new ColorGenerator(COLORS_HEX_DARK);
-  lightGenerator = new ColorGenerator(COLORS_HEX);
+  getGenerator([]);
 }
 
 export function getColorByKey(key: string, theme: Theme) {
-  return (isLight(theme) ? lightGenerator : darkGenerator).getColorByKey(key);
+  return getGenerator(theme.servicesColorPalette).getColorByKey(key);
 }
 
 export function getRgbColorByKey(key: string, theme: Theme): [number, number, number] {
-  return (isLight(theme) ? lightGenerator : darkGenerator).getRgbColorByKey(key);
+  return getGenerator(theme.servicesColorPalette).getRgbColorByKey(key);
 }

public/app/features/explore/TraceView/TraceView.tsx

@@ -4,6 +4,7 @@ import {
   Link,
   Span,
   SpanData,
+  ThemeOptions,
   ThemeProvider,
   ThemeType,
   Trace,
@@ -20,7 +21,7 @@ import { useSearch } from './useSearch';
 import { useChildrenState } from './useChildrenState';
 import { useDetailState } from './useDetailState';
 import { useHoverIndentGuide } from './useHoverIndentGuide';
-import { useTheme } from '@grafana/ui';
+import { colors, useTheme } from '@grafana/ui';
 
 type Props = {
   trace: TraceData & { spans: SpanData[] };
@@ -54,7 +55,10 @@ export function TraceView(props: Props) {
   const { search, setSearch, spanFindMatches } = useSearch(traceProp?.spans);
 
   const theme = useTheme();
-  const traceTheme = useMemo(() => ({ type: theme.isDark ? ThemeType.Dark : ThemeType.Light }), [theme]);
+  const traceTheme = useMemo(
+    () => ({ type: theme.isDark ? ThemeType.Dark : ThemeType.Light, servicesColorPalette: colors } as ThemeOptions),
+    [theme]
+  );
   const traceTimeline: TTraceTimeline = useMemo(
     () => ({
       childrenHiddenIDs,