feat(ui): assign colors based on pods #21001
Conversation
🔴 Preview Environment stopped on BunnyshellSee: Environment Details | Pipeline Logs Available commands (reply to this comment):
|
|
current view
|
|
I think red-ish background are typically associated with errors. I'd rather add interchanging white and light blue or something like that. |
| @@ -57,6 +57,8 @@ const colors = [red, green, yellow, blue, magenta, cyan]; | |||
| const reset = '\u001b[0m'; | |||
| const whiteOnYellow = '\u001b[1m\u001b[43;1m\u001b[37m'; | |||
|
|
|||
| const POD_BACKGROUND_COLORS = ['rgba(230, 243, 255, 0.7)', 'rgba(255, 243, 230, 0.7)', 'rgba(230, 255, 230, 0.7)', 'rgba(255, 230, 230, 0.7)', 'rgba(243, 230, 255, 0.7)']; | |||
There was a problem hiding this comment.
I am wondering if there have to be hard coded or can be gathered from an environment variable ...
There was a problem hiding this comment.
Also, need to adjust for the dark mode.
There was a problem hiding this comment.
you can utilise argo-ui color variables with altreanates to light blue and White in light theme, and light gray and white in dark theme.
| // ansi color for pod name | ||
| function podColor(podName: string) { | ||
| return colors[Math.abs(stringHashCode(podName) % colors.length)]; | ||
| } | ||
|
|
||
| const PodLegend: React.FC<{logs: LogEntry[]}> = ({logs}) => { |
There was a problem hiding this comment.
this would be on top of the log-viewer so in case if there are lot of pods, can have like a Horizontal scroll?
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
|
Light Mode:
Dark Mode:
|
Fixes: #20898
Checklist: