Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
84e9004d
Unverified
Commit
84e9004d
authored
Apr 21, 2020
by
Andrej Ocenas
Committed by
GitHub
Apr 21, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Tracing: Change color palette. (#23656)
parent
3c36c0f0
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
69 additions
and
56 deletions
+69
-56
packages/jaeger-ui-components/src/Theme.tsx
+55
-3
packages/jaeger-ui-components/src/utils/color-generator.tsx
+8
-51
public/app/features/explore/TraceView/TraceView.tsx
+6
-2
No files found.
packages/jaeger-ui-components/src/Theme.tsx
View file @
84e9004d
...
...
@@ -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
View file @
84e9004d
...
...
@@ -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
View file @
84e9004d
...
...
@@ -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
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment