Chore: SCSS cleanup (#89355)
* remove/migrate normalize.scss * fix typo * migrate _explore styles * make json-formatter styles global
This commit is contained in:
Ashley Harrison
@@ -6134,10 +6134,6 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./thirdArgAfterSearchQuery\`)", "4"],
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./withinStringQuery\`)", "5"]
|
||||
],
|
||||
"public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
// Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { QueryEditorHelpProps } from '@grafana/data';
|
||||
import { GrafanaTheme2, QueryEditorHelpProps } from '@grafana/data';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
|
||||
import { PromQuery } from '../types';
|
||||
|
||||
@@ -29,23 +31,44 @@ const CHEAT_SHEET_ITEMS = [
|
||||
},
|
||||
];
|
||||
|
||||
export const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => (
|
||||
<div>
|
||||
<h2>PromQL Cheat Sheet</h2>
|
||||
{CHEAT_SHEET_ITEMS.map((item, index) => (
|
||||
<div className="cheat-sheet-item" key={index}>
|
||||
<div className="cheat-sheet-item__title">{item.title}</div>
|
||||
{item.expression ? (
|
||||
<button
|
||||
type="button"
|
||||
className="cheat-sheet-item__example"
|
||||
onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
|
||||
>
|
||||
<code>{item.expression}</code>
|
||||
</button>
|
||||
) : null}
|
||||
<div className="cheat-sheet-item__label">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
export const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>PromQL Cheat Sheet</h2>
|
||||
{CHEAT_SHEET_ITEMS.map((item, index) => (
|
||||
<div className={styles.cheatSheetItem} key={index}>
|
||||
<div className={styles.cheatSheetItemTitle}>{item.title}</div>
|
||||
{item.expression ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.cheatSheetExample}
|
||||
onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
|
||||
>
|
||||
<code>{item.expression}</code>
|
||||
</button>
|
||||
) : null}
|
||||
{item.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
cheatSheetItem: css({
|
||||
margin: theme.spacing(3, 0),
|
||||
}),
|
||||
cheatSheetItemTitle: css({
|
||||
fontSize: theme.typography.h3.fontSize,
|
||||
}),
|
||||
cheatSheetExample: css({
|
||||
margin: theme.spacing(0.5, 0),
|
||||
// element is interactive, clear button styles
|
||||
textAlign: 'left',
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
display: 'block',
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -4,7 +4,8 @@ import { isEqual } from 'lodash';
|
||||
import React, { memo, useCallback } from 'react';
|
||||
import { usePrevious } from 'react-use';
|
||||
|
||||
import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { InlineFormLabel, RadioButtonGroup, useStyles2 } from '@grafana/ui';
|
||||
|
||||
import { PrometheusDatasource } from '../datasource';
|
||||
import { PromQuery } from '../types';
|
||||
@@ -21,6 +22,7 @@ export interface PromExploreExtraFieldProps {
|
||||
export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQuery }: PromExploreExtraFieldProps) => {
|
||||
const rangeOptions = getQueryTypeOptions(true);
|
||||
const prevQuery = usePrevious(query);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const onExemplarChange = useCallback(
|
||||
(exemplar: boolean) => {
|
||||
@@ -59,7 +61,8 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
|
||||
<div
|
||||
data-testid={promExploreExtraFieldTestIds.queryTypeField}
|
||||
className={cx(
|
||||
'gf-form explore-input-margin',
|
||||
'gf-form',
|
||||
styles.queryTypeField,
|
||||
css({
|
||||
flexWrap: 'nowrap',
|
||||
})
|
||||
@@ -144,3 +147,9 @@ export const promExploreExtraFieldTestIds = {
|
||||
stepField: 'prom-editor-extra-field-step',
|
||||
queryTypeField: 'prom-editor-extra-field-query-type',
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
queryTypeField: css({
|
||||
marginRight: theme.spacing(0.5),
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
|
||||
import { cx } from '@emotion/css';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
import { isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data';
|
||||
@@ -265,8 +265,12 @@ class PromQueryFieldClass extends React.PureComponent<PromQueryFieldProps, PromQ
|
||||
|
||||
{ExtraFieldElement}
|
||||
{hint ? (
|
||||
<div className="query-row-break">
|
||||
<div className="prom-query-field-info text-warning">
|
||||
<div
|
||||
className={css({
|
||||
flexBasis: '100%',
|
||||
})}
|
||||
>
|
||||
<div className="text-warning">
|
||||
{hint.label}{' '}
|
||||
{hint.fix ? (
|
||||
<button
|
||||
|
||||
@@ -75,8 +75,12 @@ export const PromQueryBuilder = React.memo<PromQueryBuilderProps>((props) => {
|
||||
<MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
|
||||
</EditorRow>
|
||||
{initHints.length ? (
|
||||
<div className="query-row-break">
|
||||
<div className="prom-query-field-info text-warning">
|
||||
<div
|
||||
className={css({
|
||||
flexBasis: '100%',
|
||||
})}
|
||||
>
|
||||
<div className="text-warning">
|
||||
{initHints[0].label}{' '}
|
||||
{initHints[0].fix ? (
|
||||
<button type="button" className={'text-warning'}>
|
||||
|
||||
@@ -11,6 +11,7 @@ import { getElementStyles } from './elements';
|
||||
import { getExtraStyles } from './extra';
|
||||
import { getFontStyles } from './fonts';
|
||||
import { getFormElementStyles } from './forms';
|
||||
import { getJsonFormatterStyles } from './jsonFormatter';
|
||||
import { getLegacySelectStyles } from './legacySelect';
|
||||
import { getMarkdownStyles } from './markdownStyles';
|
||||
import { getPageStyles } from './page';
|
||||
@@ -31,6 +32,7 @@ export function GlobalStyles() {
|
||||
getExtraStyles(theme),
|
||||
getFontStyles(theme),
|
||||
getFormElementStyles(theme),
|
||||
getJsonFormatterStyles(theme),
|
||||
getPageStyles(theme),
|
||||
getCardStyles(theme),
|
||||
getAgularPanelStyles(theme),
|
||||
|
||||
@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
export function getCodeStyles(theme: GrafanaTheme2) {
|
||||
return css({
|
||||
'code, pre': {
|
||||
'code, pre, kbd, samp': {
|
||||
...theme.typography.code,
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
@@ -26,6 +26,7 @@ export function getCodeStyles(theme: GrafanaTheme2) {
|
||||
wordBreak: 'break-all',
|
||||
wordWrap: 'break-word',
|
||||
whiteSpace: 'pre-wrap',
|
||||
overflow: 'auto',
|
||||
padding: '10px',
|
||||
|
||||
code: {
|
||||
|
||||
@@ -40,6 +40,10 @@ export function getElementStyles(theme: GrafanaTheme2) {
|
||||
margin: theme.spacing(0, 0, 2),
|
||||
},
|
||||
|
||||
textarea: {
|
||||
overflow: 'auto',
|
||||
},
|
||||
|
||||
button: {
|
||||
letterSpacing: theme.typography.body.letterSpacing,
|
||||
|
||||
@@ -67,6 +71,82 @@ export function getElementStyles(theme: GrafanaTheme2) {
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
|
||||
'audio, canvas, progress, video': {
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'baseline',
|
||||
},
|
||||
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
'audio:not([controls])': {
|
||||
display: 'none',
|
||||
height: 0,
|
||||
},
|
||||
|
||||
// Address styling not present in Safari.
|
||||
'abbr[title]': {
|
||||
borderBottom: '1px dotted',
|
||||
},
|
||||
dfn: {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
'sub, sup': {
|
||||
fontSize: '75%',
|
||||
lineHeight: 0,
|
||||
position: 'relative',
|
||||
verticalAlign: 'baseline',
|
||||
},
|
||||
sup: {
|
||||
top: '-0.5em',
|
||||
},
|
||||
sub: {
|
||||
bottom: '-0.25em',
|
||||
},
|
||||
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
'button, input, optgroup, select, textarea': {
|
||||
color: 'inherit',
|
||||
font: 'inherit',
|
||||
margin: 0,
|
||||
},
|
||||
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
optgroup: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
'button, html input[type="button"], input[type="submit"]': {
|
||||
WebkitAppearance: 'button',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration': {
|
||||
WebkitAppearance: 'none',
|
||||
},
|
||||
|
||||
table: {
|
||||
borderCollapse: 'collapse',
|
||||
borderSpacing: 0,
|
||||
},
|
||||
|
||||
'td, th': {
|
||||
padding: 0,
|
||||
},
|
||||
|
||||
// Utility classes
|
||||
'.muted': {
|
||||
color: theme.colors.text.secondary,
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
export function getJsonFormatterStyles(theme: GrafanaTheme2) {
|
||||
return css({
|
||||
'.json-formatter-row': {
|
||||
fontFamily: 'monospace',
|
||||
|
||||
'&, a, a:hover': {
|
||||
color: theme.colors.text.primary,
|
||||
textDecoration: 'none',
|
||||
},
|
||||
|
||||
'.json-formatter-row': {
|
||||
marginLeft: theme.spacing(2),
|
||||
},
|
||||
|
||||
'.json-formatter-children': {
|
||||
'&.json-formatter-empty': {
|
||||
opacity: 0.5,
|
||||
marginLeft: theme.spacing(2),
|
||||
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
},
|
||||
'&.json-formatter-object::after': {
|
||||
content: "'No properties'",
|
||||
},
|
||||
'&.json-formatter-array::after': {
|
||||
content: "'[]'",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'.json-formatter-string': {
|
||||
color: theme.isDark ? '#23d662' : 'green',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordWrap: 'break-word',
|
||||
wordBreak: 'break-all',
|
||||
},
|
||||
|
||||
'.json-formatter-number': {
|
||||
color: theme.isDark ? theme.colors.primary.text : theme.colors.primary.main,
|
||||
},
|
||||
'.json-formatter-boolean': {
|
||||
color: theme.isDark ? theme.colors.primary.text : theme.colors.error.main,
|
||||
},
|
||||
'.json-formatter-null': {
|
||||
color: theme.isDark ? '#eec97d' : '#855a00',
|
||||
},
|
||||
'.json-formatter-undefined': {
|
||||
color: theme.isDark ? 'rgb(239, 143, 190)' : 'rgb(202, 11, 105)',
|
||||
},
|
||||
'.json-formatter-function': {
|
||||
color: theme.isDark ? '#fd48cb' : '#ff20ed',
|
||||
},
|
||||
'.json-formatter-url': {
|
||||
textDecoration: 'underline',
|
||||
color: theme.isDark ? '#027bff' : theme.colors.primary.main,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
|
||||
'.json-formatter-bracket': {
|
||||
color: theme.isDark ? '#9494ff' : theme.colors.primary.main,
|
||||
},
|
||||
'.json-formatter-key': {
|
||||
color: theme.isDark ? '#23a0db' : '#00008b',
|
||||
cursor: 'pointer',
|
||||
paddingRight: theme.spacing(0.25),
|
||||
marginRight: theme.spacing(0.5),
|
||||
},
|
||||
|
||||
'.json-formatter-constructor-name': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
|
||||
'.json-formatter-array-comma': {
|
||||
marginRight: theme.spacing(0.5),
|
||||
},
|
||||
|
||||
'.json-formatter-toggler': {
|
||||
lineHeight: '16px',
|
||||
fontSize: theme.typography.size.xs,
|
||||
verticalAlign: 'middle',
|
||||
opacity: 0.6,
|
||||
cursor: 'pointer',
|
||||
paddingRight: theme.spacing(0.25),
|
||||
|
||||
'&::after': {
|
||||
display: 'inline-block',
|
||||
transition: 'transform 100ms ease-in',
|
||||
content: "'►'",
|
||||
},
|
||||
},
|
||||
|
||||
// Inline preview on hover (optional)
|
||||
'> a > .json-formatter-preview-text': {
|
||||
opacity: 0,
|
||||
transition: 'opacity 0.15s ease-in',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
'&:hover > a > .json-formatter-preview-text': {
|
||||
opacity: 0.6,
|
||||
},
|
||||
|
||||
// Open state
|
||||
'&.json-formatter-open': {
|
||||
'> .json-formatter-toggler-link .json-formatter-toggler::after': {
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
'> .json-formatter-children::after': {
|
||||
display: 'inline-block',
|
||||
},
|
||||
'> a > .json-formatter-preview-text': {
|
||||
display: 'none',
|
||||
},
|
||||
'&.json-formatter-empty::after': {
|
||||
display: 'block',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -3,7 +3,8 @@ import { stripIndent, stripIndents } from 'common-tags';
|
||||
import Prism from 'prismjs';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Collapse } from '@grafana/ui';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { Collapse, useStyles2 } from '@grafana/ui';
|
||||
import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
|
||||
|
||||
import tokenizer from '../../language/cloudwatch-logs/syntax';
|
||||
@@ -350,14 +351,6 @@ function renderHighlightedMarkup(code: string, keyPrefix: string) {
|
||||
return <div className="slate-query-field">{spans}</div>;
|
||||
}
|
||||
|
||||
const exampleCategory = css`
|
||||
margin-top: 5px;
|
||||
`;
|
||||
|
||||
const link = css`
|
||||
text-decoration: underline;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
onClickExample: (query: CloudWatchQuery) => void;
|
||||
query: CloudWatchQuery;
|
||||
@@ -366,6 +359,7 @@ type Props = {
|
||||
const LogsCheatSheet = (props: Props) => {
|
||||
const [isCommandsOpen, setIsCommandsOpen] = useState(false);
|
||||
const [isQueriesOpen, setIsQueriesOpen] = useState(false);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -385,7 +379,7 @@ const LogsCheatSheet = (props: Props) => {
|
||||
<p>{item.description}</p>
|
||||
<button
|
||||
type="button"
|
||||
className="cheat-sheet-item__example"
|
||||
className={styles.cheatSheetExample}
|
||||
key={item.expr}
|
||||
onClick={() =>
|
||||
props.onClickExample({
|
||||
@@ -415,13 +409,13 @@ const LogsCheatSheet = (props: Props) => {
|
||||
>
|
||||
{QUERIES.map((cat, i) => (
|
||||
<div key={`cat-${i}`}>
|
||||
<div className={`cheat-sheet-item__title ${cx(exampleCategory)}`}>{cat.category}</div>
|
||||
<div className={cx(styles.cheatSheetItemTitle, styles.exampleCategory)}>{cat.category}</div>
|
||||
{cat.examples.map((item, j) => (
|
||||
<div className="cheat-sheet-item" key={`item-${j}`}>
|
||||
<div className={styles.cheatSheetItem} key={`item-${j}`}>
|
||||
<h4>{item.title}</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="cheat-sheet-item__example"
|
||||
className={styles.cheatSheetExample}
|
||||
key={item.expr}
|
||||
onClick={() =>
|
||||
props.onClickExample({
|
||||
@@ -445,7 +439,7 @@ const LogsCheatSheet = (props: Props) => {
|
||||
<div>
|
||||
Note: If you are seeing masked data, you may have CloudWatch logs data protection enabled.{' '}
|
||||
<a
|
||||
className={cx(link)}
|
||||
className={styles.link}
|
||||
href="https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/#cloudwatch-logs-data-protection"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
@@ -459,3 +453,26 @@ const LogsCheatSheet = (props: Props) => {
|
||||
};
|
||||
|
||||
export default LogsCheatSheet;
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
exampleCategory: css({
|
||||
marginTop: '5px',
|
||||
}),
|
||||
link: css({
|
||||
textDecoration: 'underline',
|
||||
}),
|
||||
cheatSheetItem: css({
|
||||
margin: theme.spacing(3, 0),
|
||||
}),
|
||||
cheatSheetItemTitle: css({
|
||||
fontSize: theme.typography.h3.fontSize,
|
||||
}),
|
||||
cheatSheetExample: css({
|
||||
margin: theme.spacing(0.5, 0),
|
||||
// element is interactive, clear button styles
|
||||
textAlign: 'left',
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
display: 'block',
|
||||
}),
|
||||
});
|
||||
|
||||
+28
-11
@@ -1,5 +1,9 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
|
||||
const CHEAT_SHEET_ITEMS = [
|
||||
{
|
||||
title: 'Getting started',
|
||||
@@ -8,14 +12,27 @@ const CHEAT_SHEET_ITEMS = [
|
||||
},
|
||||
];
|
||||
|
||||
export const InfluxCheatSheet = () => (
|
||||
<div>
|
||||
<h2>InfluxDB Cheat Sheet</h2>
|
||||
{CHEAT_SHEET_ITEMS.map((item) => (
|
||||
<div className="cheat-sheet-item" key={item.title}>
|
||||
<div className="cheat-sheet-item__title">{item.title}</div>
|
||||
<div className="cheat-sheet-item__label">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
export const InfluxCheatSheet = () => {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>InfluxDB Cheat Sheet</h2>
|
||||
{CHEAT_SHEET_ITEMS.map((item) => (
|
||||
<div className={styles.cheatSheetItem} key={item.title}>
|
||||
<div className={styles.cheatSheetItemTitle}>{item.title}</div>
|
||||
{item.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
cheatSheetItem: css({
|
||||
margin: theme.spacing(3, 0),
|
||||
}),
|
||||
cheatSheetItemTitle: css({
|
||||
fontSize: theme.typography.h3.fontSize,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { shuffle } from 'lodash';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { QueryEditorHelpProps } from '@grafana/data';
|
||||
import { GrafanaTheme2, QueryEditorHelpProps } from '@grafana/data';
|
||||
import { reportInteraction } from '@grafana/runtime';
|
||||
import { Themeable2, withTheme2 } from '@grafana/ui';
|
||||
|
||||
import LokiLanguageProvider from '../LanguageProvider';
|
||||
import { escapeLabelValueInExactSelector } from '../languageUtils';
|
||||
@@ -37,7 +39,10 @@ const LOGQL_EXAMPLES = [
|
||||
},
|
||||
];
|
||||
|
||||
export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<LokiQuery>, { userExamples: string[] }> {
|
||||
class UnthemedLokiCheatSheet extends PureComponent<
|
||||
QueryEditorHelpProps<LokiQuery> & Themeable2,
|
||||
{ userExamples: string[] }
|
||||
> {
|
||||
declare userLabelTimer: ReturnType<typeof setTimeout>;
|
||||
state = {
|
||||
userExamples: [],
|
||||
@@ -75,7 +80,8 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
|
||||
};
|
||||
|
||||
renderExpression(expr: string) {
|
||||
const { onClickExample } = this.props;
|
||||
const { onClickExample, theme } = this.props;
|
||||
const styles = getStyles(theme);
|
||||
const onClick = (query: LokiQuery) => {
|
||||
onClickExample(query);
|
||||
reportInteraction('grafana_loki_cheatsheet_example_clicked', {});
|
||||
@@ -84,7 +90,7 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="cheat-sheet-item__example"
|
||||
className={styles.cheatSheetExample}
|
||||
key={expr}
|
||||
onClick={() => onClick({ refId: 'A', expr })}
|
||||
>
|
||||
@@ -95,55 +101,72 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
|
||||
|
||||
render() {
|
||||
const { userExamples } = this.state;
|
||||
const { theme } = this.props;
|
||||
const hasUserExamples = userExamples.length > 0;
|
||||
const styles = getStyles(theme);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Loki Cheat Sheet</h2>
|
||||
<div className="cheat-sheet-item">
|
||||
<div className="cheat-sheet-item__title">See your logs</div>
|
||||
<div className="cheat-sheet-item__label">
|
||||
Start by selecting a log stream from the Label browser, or alternatively you can write a stream selector
|
||||
into the query field.
|
||||
</div>
|
||||
<div className={styles.cheatSheetItem}>
|
||||
<div className={styles.cheatSheetItemTitle}>See your logs</div>
|
||||
Start by selecting a log stream from the Label browser, or alternatively you can write a stream selector into
|
||||
the query field.
|
||||
{hasUserExamples ? (
|
||||
<div>
|
||||
<div className="cheat-sheet-item__label">Here are some example streams from your logs:</div>
|
||||
Here are some example streams from your logs:
|
||||
{userExamples.map((example) => this.renderExpression(example))}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="cheat-sheet-item__label">Here is an example of a log stream:</div>
|
||||
Here is an example of a log stream:
|
||||
{this.renderExpression(DEFAULT_EXAMPLES[0])}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="cheat-sheet-item">
|
||||
<div className="cheat-sheet-item__title">Combine stream selectors</div>
|
||||
<div className={styles.cheatSheetItem}>
|
||||
<div className={styles.cheatSheetItemTitle}>Combine stream selectors</div>
|
||||
{this.renderExpression('{app="cassandra",namespace="prod"}')}
|
||||
<div className="cheat-sheet-item__label">Returns all log lines from streams that have both labels.</div>
|
||||
Returns all log lines from streams that have both labels.
|
||||
</div>
|
||||
|
||||
<div className="cheat-sheet-item">
|
||||
<div className="cheat-sheet-item__title">Filtering for search terms.</div>
|
||||
<div className={styles.cheatSheetItem}>
|
||||
<div className={styles.cheatSheetItemTitle}>Filtering for search terms.</div>
|
||||
{this.renderExpression('{app="cassandra"} |~ "(duration|latency)s*(=|is|of)s*[d.]+"')}
|
||||
{this.renderExpression('{app="cassandra"} |= "exact match"')}
|
||||
{this.renderExpression('{app="cassandra"} != "do not match"')}
|
||||
<div className="cheat-sheet-item__label">
|
||||
<a href="https://grafana.com/docs/loki/latest/logql/#log-pipeline" target="logql">
|
||||
LogQL
|
||||
</a>{' '}
|
||||
supports exact and regular expression filters.
|
||||
</div>
|
||||
<a href="https://grafana.com/docs/loki/latest/logql/#log-pipeline" target="logql">
|
||||
LogQL
|
||||
</a>{' '}
|
||||
supports exact and regular expression filters.
|
||||
</div>
|
||||
{LOGQL_EXAMPLES.map((item) => (
|
||||
<div className="cheat-sheet-item" key={item.expression}>
|
||||
<div className="cheat-sheet-item__title">{item.title}</div>
|
||||
<div className={styles.cheatSheetItem} key={item.expression}>
|
||||
<div className={styles.cheatSheetItemTitle}>{item.title}</div>
|
||||
{this.renderExpression(item.expression)}
|
||||
<div className="cheat-sheet-item__label">{item.label}</div>
|
||||
{item.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme2(UnthemedLokiCheatSheet);
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
cheatSheetItem: css({
|
||||
margin: theme.spacing(3, 0),
|
||||
}),
|
||||
cheatSheetItemTitle: css({
|
||||
fontSize: theme.typography.h3.fontSize,
|
||||
}),
|
||||
cheatSheetExample: css({
|
||||
margin: theme.spacing(0.5, 0),
|
||||
// element is interactive, clear button styles
|
||||
textAlign: 'left',
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
display: 'block',
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -198,6 +198,7 @@ $doc-font-size: $font-size-sm;
|
||||
.graph-legend {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-wrap: wrap;
|
||||
max-height: 35%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
@@ -1846,3 +1847,20 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
|
||||
line-height: calc(3em / 4);
|
||||
vertical-align: -15%;
|
||||
}
|
||||
|
||||
.cheat-sheet-item {
|
||||
margin: $space-lg 0;
|
||||
}
|
||||
|
||||
.cheat-sheet-item__title {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
.cheat-sheet-item__example {
|
||||
margin: $space-xs 0;
|
||||
// element is interactive, clear button styles
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
@import 'mixins/forms';
|
||||
|
||||
// BASE
|
||||
@import 'base/normalize';
|
||||
@import 'base/reboot';
|
||||
@import 'base/type';
|
||||
@import 'base/forms';
|
||||
@@ -31,7 +30,6 @@
|
||||
@import 'components/infobox';
|
||||
@import 'components/query_editor';
|
||||
@import 'components/query_part';
|
||||
@import 'components/json_explorer';
|
||||
@import 'components/dashboard_grid';
|
||||
@import 'components/add_data_source';
|
||||
@import 'components/panel_header';
|
||||
@@ -40,7 +38,6 @@
|
||||
@import 'pages/dashboard';
|
||||
@import 'pages/alerting';
|
||||
@import 'pages/history';
|
||||
@import 'pages/explore';
|
||||
|
||||
// ANGULAR
|
||||
@import 'angular';
|
||||
|
||||
@@ -1,424 +0,0 @@
|
||||
/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
// without disabling user zoom.
|
||||
//
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 1
|
||||
-ms-text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default margin.
|
||||
//
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
// and Firefox.
|
||||
// Correct `block` display not defined for `main` in IE 11.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
//
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the gray background color from active links in IE 10.
|
||||
//
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
//
|
||||
// Improve readability of focused elements when they are also in an
|
||||
// active/hover state.
|
||||
//
|
||||
|
||||
a {
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
//
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
//
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in Safari and Chrome.
|
||||
//
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
//
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9.
|
||||
//
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
//
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
//
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct overflow not hidden in IE 9/10/11.
|
||||
//
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address margin not present in IE 8/9 and Safari.
|
||||
//
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
//
|
||||
// Address differences between Firefox and other browsers.
|
||||
//
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Contain overflow in all browsers.
|
||||
//
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address odd `em`-unit font size rendering in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
//
|
||||
|
||||
//
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; // 1
|
||||
font: inherit; // 2
|
||||
margin: 0; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
// Correct `select` style inheritance in Firefox.
|
||||
//
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
//
|
||||
|
||||
button,
|
||||
html input[type='button'],
|
||||
// 1 input[type='reset'],
|
||||
input[type='submit'] {
|
||||
-webkit-appearance: button; // 2
|
||||
cursor: pointer; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Re-set default cursor for disabled elements.
|
||||
//
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
//
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements.
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
//
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
//
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
//
|
||||
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
//
|
||||
|
||||
input[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
//
|
||||
|
||||
input[type='search']::-webkit-search-cancel-button,
|
||||
input[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Define consistent border, margin, and padding.
|
||||
//
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
//
|
||||
|
||||
legend {
|
||||
border: 0; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
//
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Tables
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove most spacing between table cells.
|
||||
//
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -292,7 +292,7 @@ legend {
|
||||
margin-bottom: $space-sm;
|
||||
font-size: $space-lg;
|
||||
line-height: inherit;
|
||||
// border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type='search'] {
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
.json-formatter-row {
|
||||
font-family: monospace;
|
||||
|
||||
&,
|
||||
a,
|
||||
a:hover {
|
||||
color: $json-explorer-default-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.json-formatter-row {
|
||||
margin-left: $space-md;
|
||||
}
|
||||
|
||||
.json-formatter-children {
|
||||
&.json-formatter-empty {
|
||||
opacity: 0.5;
|
||||
margin-left: $space-md;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
&.json-formatter-object::after {
|
||||
content: 'No properties';
|
||||
}
|
||||
&.json-formatter-array::after {
|
||||
content: '[]';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.json-formatter-string {
|
||||
color: $json-explorer-string-color;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.json-formatter-number {
|
||||
color: $json-explorer-number-color;
|
||||
}
|
||||
.json-formatter-boolean {
|
||||
color: $json-explorer-boolean-color;
|
||||
}
|
||||
.json-formatter-null {
|
||||
color: $json-explorer-null-color;
|
||||
}
|
||||
.json-formatter-undefined {
|
||||
color: $json-explorer-undefined-color;
|
||||
}
|
||||
.json-formatter-function {
|
||||
color: $json-explorer-function-color;
|
||||
}
|
||||
.json-formatter-date {
|
||||
background-color: fade($json-explorer-default-color, 5%);
|
||||
}
|
||||
.json-formatter-url {
|
||||
text-decoration: underline;
|
||||
color: $json-explorer-url-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.json-formatter-bracket {
|
||||
color: $json-explorer-bracket-color;
|
||||
}
|
||||
.json-formatter-key {
|
||||
color: $json-explorer-key-color;
|
||||
cursor: pointer;
|
||||
padding-right: $space-xxs;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.json-formatter-constructor-name {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.json-formatter-array-comma {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.json-formatter-toggler {
|
||||
line-height: 16px;
|
||||
font-size: $font-size-xs;
|
||||
vertical-align: middle;
|
||||
opacity: $json-explorer-toggler-opacity;
|
||||
cursor: pointer;
|
||||
padding-right: $space-xxs;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
transition: transform $json-explorer-rotate-time ease-in;
|
||||
content: '►';
|
||||
}
|
||||
}
|
||||
|
||||
// Inline preview on hover (optional)
|
||||
> a > .json-formatter-preview-text {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease-in;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:hover > a > .json-formatter-preview-text {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// Open state
|
||||
&.json-formatter-open {
|
||||
> .json-formatter-toggler-link .json-formatter-toggler::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
> .json-formatter-children::after {
|
||||
display: inline-block;
|
||||
}
|
||||
> a > .json-formatter-preview-text {
|
||||
display: none;
|
||||
}
|
||||
&.json-formatter-empty::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
// TODO: this is used in Loki & Prometheus, move it
|
||||
.explore-input-margin {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// TODO: move to Loki and Prometheus
|
||||
.query-row-break {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
// TODO: Prometheus-specifics, to be extracted to datasource soon
|
||||
.explore {
|
||||
.prom-query-field-info {
|
||||
margin: 0.25em 0.5em 0.5em;
|
||||
display: flex;
|
||||
|
||||
details {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ReactTable basic overrides (does not include pivot/groups/filters)
|
||||
// When integrating ReactTable as new panel plugin, move to _panel_table.scss
|
||||
|
||||
.ReactTable {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ReactTable .rt-table {
|
||||
// Allow some space for the no-data text
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead.-header {
|
||||
box-shadow: none;
|
||||
background: $list-item-bg;
|
||||
border-top: 2px solid $body-bg;
|
||||
border-bottom: 2px solid $body-bg;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead.-header .rt-th {
|
||||
text-align: left;
|
||||
color: $blue;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead .rt-td,
|
||||
.ReactTable .rt-thead .rt-th {
|
||||
padding: 0.45em 0 0.45em 1.1em;
|
||||
border-right: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ReactTable .rt-tbody .rt-td {
|
||||
padding: 0.45em 0 0.45em 1.1em;
|
||||
border-bottom: 2px solid $body-bg;
|
||||
border-right: 2px solid $body-bg;
|
||||
}
|
||||
|
||||
.ReactTable .rt-tbody .rt-td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.ReactTable .-pagination {
|
||||
border-top: none;
|
||||
box-shadow: none;
|
||||
margin-top: $space-sm;
|
||||
}
|
||||
|
||||
.ReactTable .-pagination .-btn {
|
||||
color: $blue;
|
||||
background: $list-item-bg;
|
||||
}
|
||||
|
||||
.ReactTable .-pagination input,
|
||||
.ReactTable .-pagination select {
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
|
||||
.ReactTable .-loading {
|
||||
background: $input-bg;
|
||||
}
|
||||
|
||||
.ReactTable .-loading.-active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ReactTable .-loading > div {
|
||||
color: $input-color;
|
||||
}
|
||||
|
||||
.ReactTable .rt-tr .rt-td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ReactTable .rt-noData {
|
||||
top: 60px;
|
||||
z-index: inherit;
|
||||
}
|
||||
|
||||
// React-component cascade fix: show "loading" when loading children
|
||||
.rc-cascader-menu-item-loading:after {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
content: 'loading';
|
||||
color: #767980;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// React-component cascade fix: vertical alignment issue with Safari
|
||||
.rc-cascader-menu {
|
||||
vertical-align: top;
|
||||
// To fix cascader button width issue in windows + firefox
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
// TODO Experimental
|
||||
|
||||
.cheat-sheet-item {
|
||||
margin: $space-lg 0;
|
||||
}
|
||||
|
||||
.cheat-sheet-item__title {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
.cheat-sheet-item__example {
|
||||
margin: $space-xs 0;
|
||||
// element is interactive, clear button styles
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.query-type-toggle {
|
||||
margin-left: 5px;
|
||||
|
||||
.btn.active {
|
||||
background-color: $input-bg;
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
@include box-shadow($input-box-shadow);
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user