IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tracing: Change color palette. (#23656)

Browse Source
This commit is contained in:
Andrej Ocenas 2020-04-21 22:04:51 +02:00 committed by GitHub
parent 3c36c0f043
commit 84e9004da4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/jaeger-ui-components/src/Theme.tsx
View File

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

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

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

8
public/app/features/explore/TraceView/TraceView.tsx
View File

@ -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,