Unverified Commit 850dbda5 authored by Łukasz Mierzwa's avatar Łukasz Mierzwa Committed by GitHub
Browse files

Add a dark theme (#8604)



* Upgrade bootstrap and reactstrap to the latest version
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add SASS support

node-sass is needed for cra to handle SCSS files instead of pure CSS.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme

This adds a dark theme and UI controls to switch between themes.
Dark theme will require some CSS changes that will follow in future commits.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a margin to Prometheus brand

There is no space between 'Prometheus' brand text and the toggle button when using mobile device.
This adds a margin to the button that's only rendered on mobile
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for CollapsibleAlertPanel
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for RulesContent
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for Config
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Use bootstrap classes for margins

We can override margins via bootstrap css classes instead of loading custom css module.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for QueryStatsView
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for MetricsExplorer
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for 'Clear time' button
This button had some custom css based on light bootstrap theme so it needs to be adjusted for dark theme.
This change re-uses bootstrap styles used for input components instead of copying color values
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add dark theme for Graph panel input

This makes the whole input group look consistent in dark mode as the old styles were made to blend it with the default bootstrap theme.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for CME expression input

This change splits current CME theme into 3:
1 - base theme used for both light and dark mode
2 - light mode specific theme that overrides base
3 - dark mode specific theme that overrides base

To make it all work we also need to move theme to dynamic config, so when theme value
in ThemeContext changes CME input will apply a new theme.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Add a dark theme for /graph page tabs
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Fix metrics explorer modal scroll

bootstrap-dark breaks scrolling on the metrics modal, so we need an extra rule to fix that.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Move App.css rules to themes/_shared.scss

This completes splitting styles into light and dark theme.
It also fixes some small issues with themes as now all styles from App.css are applied correctly.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Move html{} styles to a dedicated file

html block is root document so styles for it cannot be nested under theme classes.
Move it out and add a bit of documentation to explain what which file does.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Fix reboot styles overriding other FontAwesome classes

Both bootstrap themes we use import reboot classes (https://getbootstrap.com/docs/4.6/content/reboot/

) which has the side effect of overriding other classes. We need reboot to be applied as defaults for the browser, so it needs to be moved out of theme class selectors. But because reboot requires scss variables we need to feed it something, for that we use the default light theme, so it gets imported there and browser will use style of the default theme to reset default (unthemed) styles.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>

* Move codicon font to app.scss

This needs to be applied globally, not per theme.
Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
parent f9e2dd06
......@@ -15,11 +15,12 @@
"@codemirror/search": "^0.18.2",
"@codemirror/state": "^0.18.2",
"@codemirror/view": "^0.18.3",
"@forevolve/bootstrap-dark": "^1.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.14",
"@fortawesome/free-solid-svg-icons": "^5.7.1",
"@fortawesome/react-fontawesome": "^0.1.4",
"@reach/router": "^1.2.1",
"bootstrap": "^4.2.1",
"bootstrap": "^4.6.0",
"codemirror-promql": "^0.15.0",
"css.escape": "^1.5.1",
"downshift": "^3.4.8",
......@@ -31,6 +32,7 @@
"jsdom": "^16.4.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.23",
"node-sass": "4.14.1",
"popper.js": "^1.14.3",
"react": "^16.7.0",
"react-copy-to-clipboard": "^5.0.1",
......@@ -38,11 +40,12 @@
"react-resize-detector": "^5.0.7",
"react-scripts": "3.4.4",
"react-test-renderer": "^16.9.0",
"reactstrap": "^8.0.1",
"reactstrap": "^8.9.0",
"sanitize-html": "^1.20.1",
"tempusdominus-bootstrap-4": "^5.1.2",
"tempusdominus-core": "^5.0.3",
"typescript": "^3.3.3"
"typescript": "^3.3.3",
"use-media": "^1.4.0"
},
"scripts": {
"start": "react-scripts start",
......@@ -71,16 +74,16 @@
"@types/flot": "0.0.31",
"@types/jest": "^26.0.10",
"@types/jquery": "^3.5.1",
"@types/node": "^12.11.1",
"@types/moment-timezone": "^0.5.10",
"@types/node": "^12.11.1",
"@types/reach__router": "^1.2.6",
"@types/react": "^16.8.2",
"@types/reactstrap": "^8.0.5",
"@types/sanitize-html": "^1.20.2",
"@types/sinon": "^9.0.4",
"@types/react-copy-to-clipboard": "^5.0.0",
"@types/react-dom": "^16.8.0",
"@types/react-resize-detector": "^5.0.0",
"@types/reactstrap": "^8.7.2",
"@types/sanitize-html": "^1.20.2",
"@types/sinon": "^9.0.4",
"@typescript-eslint/eslint-plugin": "2.x",
"@typescript-eslint/parser": "2.x",
"enzyme": "^3.10.0",
......
......@@ -38,7 +38,7 @@
-->
<title>TITLE_PLACEHOLDER</title>
</head>
<body>
<body class="bootstrap">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
......
......@@ -2,10 +2,13 @@ import React, { FC } from 'react';
import Navigation from './Navbar';
import { Container } from 'reactstrap';
import './App.css';
import { Router, Redirect } from '@reach/router';
import useMedia from 'use-media';
import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
import { PathPrefixContext } from './contexts/PathPrefixContext';
import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext';
import { Theme, themeLocalStorageKey } from './Theme';
import { useLocalStorage } from './hooks/useLocalStorage';
interface AppProps {
consolesLink: string | null;
......@@ -39,28 +42,44 @@ const App: FC<AppProps> = ({ consolesLink }) => {
}
}
const [userTheme, setUserTheme] = useLocalStorage<themeSetting>(themeLocalStorageKey, 'auto');
const browserHasThemes = useMedia('(prefers-color-scheme)');
const browserWantsDarkTheme = useMedia('(prefers-color-scheme: dark)');
let theme: themeName;
if (userTheme !== 'auto') {
theme = userTheme;
} else {
theme = browserHasThemes ? (browserWantsDarkTheme ? 'dark' : 'light') : 'light';
}
return (
<PathPrefixContext.Provider value={basePath}>
<Navigation consolesLink={consolesLink} />
<Container fluid style={{ paddingTop: 70 }}>
<Router basepath={`${basePath}`}>
<Redirect from="/" to={`graph`} noThrow />
{/*
<ThemeContext.Provider
value={{ theme: theme, userPreference: userTheme, setTheme: (t: themeSetting) => setUserTheme(t) }}
>
<Theme />
<PathPrefixContext.Provider value={basePath}>
<Navigation consolesLink={consolesLink} />
<Container fluid style={{ paddingTop: 70 }}>
<Router basepath={`${basePath}`}>
<Redirect from="/" to={`graph`} noThrow />
{/*
NOTE: Any route added here needs to also be added to the list of
React-handled router paths ("reactRouterPaths") in /web/web.go.
*/}
<PanelList path="/graph" />
<Alerts path="/alerts" />
<Config path="/config" />
<Flags path="/flags" />
<Rules path="/rules" />
<ServiceDiscovery path="/service-discovery" />
<Status path="/status" />
<TSDBStatus path="/tsdb-status" />
<Targets path="/targets" />
</Router>
</Container>
</PathPrefixContext.Provider>
<PanelList path="/graph" />
<Alerts path="/alerts" />
<Config path="/config" />
<Flags path="/flags" />
<Rules path="/rules" />
<ServiceDiscovery path="/service-discovery" />
<Status path="/status" />
<TSDBStatus path="/tsdb-status" />
<Targets path="/targets" />
</Router>
</Container>
</PathPrefixContext.Provider>
</ThemeContext.Provider>
);
};
......
......@@ -13,6 +13,7 @@ import {
DropdownItem,
} from 'reactstrap';
import { usePathPrefix } from './contexts/PathPrefixContext';
import { ThemeToggle } from './Theme';
interface NavbarProps {
consolesLink: string | null;
......@@ -24,7 +25,7 @@ const Navigation: FC<NavbarProps> = ({ consolesLink }) => {
const pathPrefix = usePathPrefix();
return (
<Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
<NavbarToggler onClick={toggle} />
<NavbarToggler onClick={toggle} className="mr-2" />
<Link className="pt-0 navbar-brand" to={`${pathPrefix}/graph`}>
Prometheus
</Link>
......@@ -81,6 +82,7 @@ const Navigation: FC<NavbarProps> = ({ consolesLink }) => {
</NavItem>
</Nav>
</Collapse>
<ThemeToggle />
</Navbar>
);
};
......
import React, { FC, useEffect } from 'react';
import { Form, Button, ButtonGroup } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMoon, faSun, faAdjust } from '@fortawesome/free-solid-svg-icons';
import { useTheme } from './contexts/ThemeContext';
export const themeLocalStorageKey = 'user-prefers-color-scheme';
export const Theme: FC = () => {
const { theme } = useTheme();
useEffect(() => {
document.body.classList.toggle('bootstrap-dark', theme === 'dark');
document.body.classList.toggle('bootstrap', theme === 'light');
}, [theme]);
return null;
};
export const ThemeToggle: FC = () => {
const { userPreference, setTheme } = useTheme();
return (
<Form className="ml-auto" inline>
<ButtonGroup size="sm">
<Button
color="secondary"
title="Use light theme"
active={userPreference === 'light'}
onClick={() => setTheme('light')}
>
<FontAwesomeIcon icon={faSun} className={userPreference === 'light' ? 'text-white' : 'text-dark'} />
</Button>
<Button color="secondary" title="Use dark theme" active={userPreference === 'dark'} onClick={() => setTheme('dark')}>
<FontAwesomeIcon icon={faMoon} className={userPreference === 'dark' ? 'text-white' : 'text-dark'} />
</Button>
<Button
color="secondary"
title="Use browser-preferred theme"
active={userPreference === 'auto'}
onClick={() => setTheme('auto')}
>
<FontAwesomeIcon icon={faAdjust} className={userPreference === 'auto' ? 'text-white' : 'text-dark'} />
</Button>
</ButtonGroup>
</Form>
);
};
import React from 'react';
export type themeName = 'light' | 'dark';
export type themeSetting = themeName | 'auto';
export interface ThemeCtx {
theme: themeName;
userPreference: themeSetting;
setTheme: (t: themeSetting) => void;
}
// defaults, will be overriden in App.tsx
export const ThemeContext = React.createContext<ThemeCtx>({
theme: 'light',
userPreference: 'auto',
// eslint-disable-next-line @typescript-eslint/no-empty-function
setTheme: (s: themeSetting) => {},
});
export const useTheme = () => {
return React.useContext(ThemeContext);
};
......@@ -2,7 +2,9 @@ import './globals';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import './themes/app.scss';
import './themes/light.scss';
import './themes/dark.scss';
import './fonts/codicon.ttf';
import { isPresent } from './utils';
......
......@@ -28,7 +28,7 @@ const CollapsibleAlertPanel: FC<CollapsibleAlertPanelProps> = ({ rule, showAnnot
<strong>{rule.name}</strong> ({`${rule.alerts.length} active`})
</Alert>
<Collapse isOpen={open} className="mb-2">
<pre style={{ background: '#f5f5f5', padding: 15 }}>
<pre className="alert-cell">
<code>
<div>
name: <Link to={createExpressionLink(`ALERTS{alertname="${rule.name}"}`)}>{rule.name}</Link>
......
.config-yaml {
display: block;
padding: 10px;
font-size: 13px;
color: #333;
word-break: break-all;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
......@@ -3,7 +3,6 @@ import { RouteComponentProps } from '@reach/router';
import { Button } from 'reactstrap';
import CopyToClipboard from 'react-copy-to-clipboard';
import './Config.css';
import { withStatusIndicator } from '../../components/withStatusIndicator';
import { useFetch } from '../../hooks/useFetch';
import { usePathPrefix } from '../../contexts/PathPrefixContext';
......
......@@ -13,13 +13,14 @@ import { commentKeymap } from '@codemirror/comment';
import { lintKeymap } from '@codemirror/lint';
import { PromQLExtension, CompleteStrategy } from 'codemirror-promql';
import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import { theme, promqlHighlighter } from './CMTheme';
import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch, faSpinner, faGlobeEurope } from '@fortawesome/free-solid-svg-icons';
import MetricsExplorer from './MetricsExplorer';
import { usePathPrefix } from '../../contexts/PathPrefixContext';
import { newCompleteStrategy } from 'codemirror-promql/cjs/complete';
import { useTheme } from '../../contexts/ThemeContext';
const promqlExtension = new PromQLExtension();
......@@ -92,6 +93,7 @@ const CMExpressionInput: FC<CMExpressionInputProps> = ({
const viewRef = useRef<EditorView | null>(null);
const [showMetricsExplorer, setShowMetricsExplorer] = useState<boolean>(false);
const pathPrefix = usePathPrefix();
const { theme } = useTheme();
// (Re)initialize editor based on settings / setting changes.
useEffect(() => {
......@@ -107,7 +109,11 @@ const CMExpressionInput: FC<CMExpressionInputProps> = ({
queryHistory
),
});
const dynamicConfig = [enableHighlighting ? promqlHighlighter : [], promqlExtension.asExtension()];
const dynamicConfig = [
enableHighlighting ? promqlHighlighter : [],
promqlExtension.asExtension(),
theme === 'dark' ? darkTheme : lightTheme,
];
// Create or reconfigure the editor.
const view = viewRef.current;
......@@ -120,7 +126,7 @@ const CMExpressionInput: FC<CMExpressionInputProps> = ({
const startState = EditorState.create({
doc: value,
extensions: [
theme,
baseTheme,
highlightSpecialChars(),
history(),
EditorState.allowMultipleSelections.of(true),
......@@ -193,7 +199,7 @@ const CMExpressionInput: FC<CMExpressionInputProps> = ({
// re-run this effect every time that "value" changes.
//
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [enableAutocomplete, enableHighlighting, enableLinter, executeQuery, onExpressionChange, queryHistory]);
}, [enableAutocomplete, enableHighlighting, enableLinter, executeQuery, onExpressionChange, queryHistory, theme]);
const insertAtCursor = (value: string) => {
const view = viewRef.current;
......@@ -218,11 +224,13 @@ const CMExpressionInput: FC<CMExpressionInputProps> = ({
</InputGroupAddon>
<div ref={containerRef} className="cm-expression-input" />
<InputGroupAddon addonType="append">
<Button className="btn-light border" title="Open metrics explorer" onClick={() => setShowMetricsExplorer(true)}>
<Button
className="metrics-explorer-btn"
title="Open metrics explorer"
onClick={() => setShowMetricsExplorer(true)}
>
<FontAwesomeIcon icon={faGlobeEurope} />
</Button>
</InputGroupAddon>
<InputGroupAddon addonType="append">
<Button className="execute-btn" color="primary" onClick={executeQuery}>
Execute
</Button>
......
import { HighlightStyle, tags } from '@codemirror/highlight';
import { EditorView } from '@codemirror/view';
export const theme = EditorView.theme({
export const baseTheme = EditorView.theme({
'&': {
'&.cm-focused': {
outline: 'none',
......@@ -25,11 +25,6 @@ export const theme = EditorView.theme({
},
'.cm-nonmatchingBracket': { borderColor: 'red' },
'.cm-tooltip': {
backgroundColor: '#f8f8f8',
borderColor: 'rgba(52, 79, 113, 0.2)',
},
'.cm-tooltip.cm-tooltip-autocomplete': {
'& > ul': {
maxHeight: '350px',
......@@ -39,13 +34,6 @@ export const theme = EditorView.theme({
'& > ul > li': {
padding: '2px 1em 2px 3px',
},
'& li:hover': {
backgroundColor: '#ddd',
},
'& > ul > li[aria-selected]': {
backgroundColor: '#d6ebff',
color: 'unset',
},
minWidth: '30%',
},
......@@ -59,7 +47,6 @@ export const theme = EditorView.theme({
padding: '10px',
fontFamily: "'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;",
border: 'none',
backgroundColor: '#d6ebff',
minWidth: '250px',
maxWidth: 'min-content',
},
......@@ -71,8 +58,9 @@ export const theme = EditorView.theme({
position: 'absolute',
width: '0',
left: '-20px',
border: '10px solid transparent',
borderRightColor: '#d6ebff',
borderWidth: '10px',
borderStyle: 'solid',
borderColor: 'transparent',
},
marginLeft: '12px',
},
......@@ -83,8 +71,9 @@ export const theme = EditorView.theme({
position: 'absolute',
width: '0',
right: '-20px',
border: '10px solid transparent',
borderLeftColor: '#d6ebff',
borderWidth: '10px',
borderStyle: 'solid',
borderColor: 'transparent',
},
marginRight: '12px',
},
......@@ -95,15 +84,6 @@ export const theme = EditorView.theme({
color: '#0066bf',
},
'.cm-line': {
'&::selection': {
backgroundColor: '#add6ff',
},
'& > span::selection': {
backgroundColor: '#add6ff',
},
},
'.cm-selectionMatch': {
backgroundColor: '#e6f3ff',
},
......@@ -166,6 +146,83 @@ export const theme = EditorView.theme({
},
});
export const lightTheme = EditorView.theme(
{
'.cm-tooltip': {
backgroundColor: '#f8f8f8',
borderColor: 'rgba(52, 79, 113, 0.2)',
},
'.cm-tooltip.cm-tooltip-autocomplete': {
'& li:hover': {
backgroundColor: '#ddd',
},
'& > ul > li[aria-selected]': {
backgroundColor: '#d6ebff',
color: 'unset',
},
},
'.cm-tooltip.cm-completionInfo': {
backgroundColor: '#d6ebff',
},
'.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': {
'&:before': {
borderRightColor: '#d6ebff',
},
},
'.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': {
'&:before': {
borderLeftColor: '#d6ebff',
},
},
'.cm-line': {
'&::selection': {
backgroundColor: '#add6ff',
},
'& > span::selection': {
backgroundColor: '#add6ff',
},
},
},
{ dark: false }
);
export const darkTheme = EditorView.theme(
{
'.cm-content': {
caretColor: '#fff',
},
'.cm-tooltip.cm-completionInfo': {
backgroundColor: '#333338',
},
'.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': {
'&:before': {
borderRightColor: '#333338',
},
},
'.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': {
'&:before': {
borderLeftColor: '#333338',
},
},
'.cm-line': {
'&::selection': {
backgroundColor: '#767676',
},
'& > span::selection': {
backgroundColor: '#767676',
},
},
},
{ dark: true }
);
export const promqlHighlighter = HighlightStyle.define([
{ tag: tags.name, color: '#000' },
{ tag: tags.number, color: '#09885a' },
......
......@@ -215,7 +215,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
value={value}
/>
<InputGroupAddon addonType="append">
<Button className="btn-light border" title="Open metrics explorer" onClick={this.openMetricsExplorer}>
<Button className="metrics-explorer-btn" title="Open metrics explorer" onClick={this.openMetricsExplorer}>
<FontAwesomeIcon icon={faGlobeEurope} />
</Button>
</InputGroupAddon>
......
.metrics-explorer.modal-dialog {
max-width: 750px;
overflow-wrap: break-word;
}
.metrics-explorer .metric {
cursor: pointer;
margin: 0;
padding: 5px;
}
.metrics-explorer .metric:hover {
background: #efefef;
}
import React, { Component } from 'react';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import './MetricsExplorer.css';
interface Props {
show: boolean;
......
.query-stats{
flex-grow: 1;
font-size: 0.7rem;
color: #71808e;
}
import React, { FC } from 'react';
import './QueryStatsView.css';
export interface QueryStats {
loadTime: number;
......
......@@ -120,7 +120,7 @@ class TimeInput extends Component<TimeInputProps> {
that functionality is broken, so we create an external solution instead. */}
{this.props.time && (
<InputGroupAddon addonType="append">
<Button className="clear-time-btn" title="Clear time" onClick={this.clearTime}>
<Button outline className="clear-time-btn" title="Clear time" onClick={this.clearTime}>
<FontAwesomeIcon icon={faTimes} fixedWidth />
</Button>
</InputGroupAddon>
......
......@@ -85,7 +85,7 @@ export const RulesContent: FC<RouteComponentProps & RulesContentProps> = ({ resp
{g.rules.map((r, i) => {
return (
<tr key={i}>
<td style={{ backgroundColor: '#F5F5F5' }} className="rule_cell">
<td className="rule-cell">
{r.alerts ? (
<GraphExpressionLink title="alert" text={r.name} expr={`ALERTS{alertname="${r.name}"}`} />
) : (
......
.btn {
margin-top: 0.6em;
margin-bottom: 15px;