@grafana/ui
Version:
Grafana Components Library
1,592 lines (1,565 loc) • 1.35 MB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var classNames = require('classnames');
var React = require('react');
var SVG = require('react-inlinesvg');
var data = require('@grafana/data');
var hoistNonReactStatics = require('hoist-non-react-statics');
var memoize = require('micro-memoize');
var react$1 = require('@floating-ui/react');
var e2eSelectors = require('@grafana/e2e-selectors');
var ReactDOM = require('react-dom');
var react = require('@emotion/react');
var tinycolor = require('tinycolor2');
var lodash = require('lodash');
var slate = require('slate');
var ReactSelect = require('react-select');
var ReactAsyncSelect = require('react-select/async');
var Creatable = require('react-select/creatable');
var i18next = require('i18next');
var reactI18next = require('react-i18next');
var reactTransitionGroup = require('react-transition-group');
var Scrollbars = require('react-custom-scrollbars-2');
var RCCascader = require('rc-cascader');
var useMeasure = require('react-use/lib/useMeasure');
var AsyncCreatable = require('react-select/async-creatable');
var reactWindow = require('react-window');
var ReactDOMServer = require('react-dom/server');
var focus = require('@react-aria/focus');
var reactColorful = require('react-colorful');
var reactUse = require('react-use');
var dateFns = require('date-fns');
var dialog = require('@react-aria/dialog');
var overlays = require('@react-aria/overlays');
var reactVirtual = require('@tanstack/react-virtual');
var downshift = require('downshift');
var uFuzzy = require('@leeoniya/ufuzzy');
var Calendar = require('react-calendar');
var uuid = require('uuid');
var RcPicker = require('rc-picker');
var generateConfig = require('rc-picker/lib/generate/moment');
var locale = require('rc-picker/lib/locale/en_US');
require('rc-picker/assets/index.css');
var reactTable = require('react-table');
var Skeleton = require('react-loading-skeleton');
var reactHookForm = require('react-hook-form');
var Plain = require('slate-plain-serializer');
var slateReact = require('slate-react');
var isHotkey = require('is-hotkey');
var Prism = require('prismjs');
var immutable = require('immutable');
var calculateSize = require('calculate-size');
var Highlighter = require('react-highlight-words');
var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
var rxjs = require('rxjs');
var operators = require('rxjs/operators');
var schema = require('@grafana/schema');
var RcDrawer = require('rc-drawer');
require('rc-drawer/assets/index.css');
var WKT = require('ol/format/WKT');
var geom = require('ol/geom');
var uPlot = require('uplot');
require('uplot/dist/uPlot.min.css');
var $ = require('jquery');
var usePrevious = require('react-use/lib/usePrevious');
var useClickAway = require('react-use/lib/useClickAway');
var dnd = require('@hello-pangea/dnd');
var faroWebSdk = require('@grafana/faro-web-sdk');
var SliderComponent = require('rc-slider');
require('rc-slider/assets/index.css');
var Tooltip$1 = require('rc-tooltip');
var reactDropzone = require('react-dropzone');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
function _interopNamespaceCompat(e) {
if (e && typeof e === 'object' && 'default' in e) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
var SVG__default = /*#__PURE__*/_interopDefaultCompat(SVG);
var hoistNonReactStatics__default = /*#__PURE__*/_interopDefaultCompat(hoistNonReactStatics);
var memoize__default = /*#__PURE__*/_interopDefaultCompat(memoize);
var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
var tinycolor__default = /*#__PURE__*/_interopDefaultCompat(tinycolor);
var ReactSelect__default = /*#__PURE__*/_interopDefaultCompat(ReactSelect);
var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultCompat(ReactAsyncSelect);
var Creatable__default = /*#__PURE__*/_interopDefaultCompat(Creatable);
var i18next__default = /*#__PURE__*/_interopDefaultCompat(i18next);
var Scrollbars__default = /*#__PURE__*/_interopDefaultCompat(Scrollbars);
var RCCascader__default = /*#__PURE__*/_interopDefaultCompat(RCCascader);
var useMeasure__default = /*#__PURE__*/_interopDefaultCompat(useMeasure);
var AsyncCreatable__default = /*#__PURE__*/_interopDefaultCompat(AsyncCreatable);
var ReactDOMServer__default = /*#__PURE__*/_interopDefaultCompat(ReactDOMServer);
var uFuzzy__default = /*#__PURE__*/_interopDefaultCompat(uFuzzy);
var Calendar__default = /*#__PURE__*/_interopDefaultCompat(Calendar);
var RcPicker__default = /*#__PURE__*/_interopDefaultCompat(RcPicker);
var generateConfig__default = /*#__PURE__*/_interopDefaultCompat(generateConfig);
var locale__default = /*#__PURE__*/_interopDefaultCompat(locale);
var Skeleton__default = /*#__PURE__*/_interopDefaultCompat(Skeleton);
var Plain__default = /*#__PURE__*/_interopDefaultCompat(Plain);
var Prism__default = /*#__PURE__*/_interopDefaultCompat(Prism);
var calculateSize__default = /*#__PURE__*/_interopDefaultCompat(calculateSize);
var Highlighter__default = /*#__PURE__*/_interopDefaultCompat(Highlighter);
var RcDrawer__default = /*#__PURE__*/_interopDefaultCompat(RcDrawer);
var WKT__default = /*#__PURE__*/_interopDefaultCompat(WKT);
var uPlot__default = /*#__PURE__*/_interopDefaultCompat(uPlot);
var $__default = /*#__PURE__*/_interopDefaultCompat($);
var usePrevious__default = /*#__PURE__*/_interopDefaultCompat(usePrevious);
var useClickAway__default = /*#__PURE__*/_interopDefaultCompat(useClickAway);
var SliderComponent__default = /*#__PURE__*/_interopDefaultCompat(SliderComponent);
var Tooltip__default = /*#__PURE__*/_interopDefaultCompat(Tooltip$1);
function stylesFactory(stylesCreator) {
return memoize__default.default(stylesCreator);
}
let ThemeContextMock = null;
const memoizedStyleCreators = /* @__PURE__ */ new WeakMap();
const withTheme = (Component) => {
const WithTheme = (props) => {
const ContextComponent = ThemeContextMock || data.ThemeContext;
return (
// @ts-ignore
/* @__PURE__ */ jsxRuntime.jsx(ContextComponent.Consumer, { children: (theme) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, theme: theme.v1 }) })
);
};
WithTheme.displayName = `WithTheme(${Component.displayName})`;
hoistNonReactStatics__default.default(WithTheme, Component);
return WithTheme;
};
const withTheme2 = (Component) => {
const WithTheme = (props) => {
const ContextComponent = ThemeContextMock || data.ThemeContext;
return (
// @ts-ignore
/* @__PURE__ */ jsxRuntime.jsx(ContextComponent.Consumer, { children: (theme) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, theme }) })
);
};
WithTheme.displayName = `WithTheme(${Component.displayName})`;
hoistNonReactStatics__default.default(WithTheme, Component);
return WithTheme;
};
function useTheme() {
return React.useContext(ThemeContextMock || data.ThemeContext).v1;
}
function useTheme2() {
return React.useContext(ThemeContextMock || data.ThemeContext);
}
function useStyles(getStyles) {
const theme = useTheme();
let memoizedStyleCreator = memoizedStyleCreators.get(getStyles);
if (!memoizedStyleCreator) {
memoizedStyleCreator = stylesFactory(getStyles);
memoizedStyleCreators.set(getStyles, memoizedStyleCreator);
}
return memoizedStyleCreator(theme);
}
function useStyles2(getStyles, ...additionalArguments) {
const theme = useTheme2();
if (!theme.colors.background.elevated) {
theme.colors.background.elevated = theme.colors.mode === "light" ? theme.colors.background.primary : theme.colors.background.secondary;
}
let memoizedStyleCreator = memoizedStyleCreators.get(getStyles);
if (!memoizedStyleCreator) {
memoizedStyleCreator = memoize__default.default(getStyles, { maxSize: 10 });
memoizedStyleCreators.set(getStyles, memoizedStyleCreator);
}
return memoizedStyleCreator(theme, ...additionalArguments);
}
const mockThemeContext = (theme) => {
ThemeContextMock = React__namespace.createContext(theme);
return () => {
ThemeContextMock = null;
};
};
const spin$1 = css.keyframes({
"0%": {
transform: "rotate(0deg)"
},
"100%": {
transform: "rotate(359deg)"
}
});
const alwaysMonoIcons = [
"grafana",
"favorite",
"heart-break",
"heart",
"panel-add",
"library-panel",
"circle-mono"
];
function getIconSubDir(name, type) {
if (name == null ? void 0 : name.startsWith("gf-")) {
return "custom";
} else if (alwaysMonoIcons.includes(name)) {
return "mono";
} else if (type === "default") {
return "unicons";
} else if (type === "solid") {
return "solid";
} else {
return "mono";
}
}
function getSvgSize(size) {
switch (size) {
case "xs":
return 12;
case "sm":
return 14;
case "md":
return 16;
case "lg":
return 18;
case "xl":
return 24;
case "xxl":
return 36;
case "xxxl":
return 48;
}
}
let iconRoot;
function getIconRoot() {
if (iconRoot) {
return iconRoot;
}
const grafanaPublicPath = typeof window !== "undefined" && window.__grafana_public_path__;
if (grafanaPublicPath) {
iconRoot = grafanaPublicPath + "img/icons/";
} else {
iconRoot = "public/img/icons/";
}
return iconRoot;
}
const getIconStyles = (theme) => {
return {
icon: css.css({
display: "inline-block",
fill: "currentColor",
flexShrink: 0,
label: "Icon",
// line-height: 0; is needed for correct icon alignment in Safari
lineHeight: 0,
verticalAlign: "middle"
}),
orange: css.css({
fill: theme.v1.palette.orange
}),
spin: css.css({
[theme.transitions.handleMotion("no-preference", "reduce")]: {
animation: `${spin$1} 2s infinite linear`
}
})
};
};
const Icon = React__namespace.forwardRef(
({ size = "md", type = "default", name, className, style, title = "", ...rest }, ref) => {
const styles = useStyles2(getIconStyles);
if (!data.isIconName(name)) {
console.warn("Icon component passed an invalid icon name", name);
}
const iconName = name === "fa fa-spinner" ? "spinner" : name;
const iconRoot = getIconRoot();
const svgSize = getSvgSize(size);
const svgHgt = svgSize;
const svgWid = name.startsWith("gf-bar-align") ? 16 : name.startsWith("gf-interp") ? 30 : svgSize;
const subDir = getIconSubDir(iconName, type);
const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;
const composedClassName = css.cx(
styles.icon,
className,
type === "mono" ? { [styles.orange]: name === "favorite" } : "",
{
[styles.spin]: iconName === "spinner"
}
);
return /* @__PURE__ */ jsxRuntime.jsx(
SVG__default.default,
{
"aria-hidden": rest.tabIndex === void 0 && !title && !rest["aria-label"] && !rest["aria-labelledby"] && !rest["aria-describedby"],
innerRef: ref,
src: svgPath,
width: svgWid,
height: svgHgt,
title,
className: composedClassName,
style,
loader: /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: css.cx(
css.css({
width: svgWid,
height: svgHgt
}),
composedClassName
)
}
),
...rest
}
);
}
);
Icon.displayName = "Icon";
function getPlacement(placement) {
switch (placement) {
case "auto":
return "bottom";
case "auto-start":
return "bottom-start";
case "auto-end":
return "bottom-end";
default:
return placement != null ? placement : "bottom";
}
}
function buildTooltipTheme(theme, tooltipBg, toggletipBorder, tooltipText, tooltipPadding) {
return {
arrow: css.css({
fill: tooltipBg
}),
container: css.css({
backgroundColor: tooltipBg,
borderRadius: theme.shape.radius.default,
border: `1px solid ${toggletipBorder}`,
boxShadow: theme.shadows.z2,
color: tooltipText,
fontSize: theme.typography.bodySmall.fontSize,
padding: theme.spacing(tooltipPadding.topBottom, tooltipPadding.rightLeft),
[theme.transitions.handleMotion("no-preference", "reduce")]: {
transition: "opacity 0.3s"
},
zIndex: theme.zIndex.tooltip,
maxWidth: "400px",
overflowWrap: "break-word",
"&[data-popper-interactive='false']": {
pointerEvents: "none"
}
}),
headerClose: css.css({
color: theme.colors.text.secondary,
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(1.5),
backgroundColor: "transparent",
border: 0
}),
header: css.css({
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(2)
}),
body: css.css({
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1)
}),
footer: css.css({
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(1)
})
};
}
let themeMock;
const getTheme = (mode = "dark") => {
if (themeMock) {
return themeMock(mode);
}
return data.createTheme({ colors: { mode } }).v1;
};
const mockTheme = (mock) => {
themeMock = mock;
return () => {
themeMock = null;
};
};
function getAccessibilityStyles(theme) {
return react.css({
".sr-only": {
position: "absolute",
width: "1px",
height: "1px",
padding: 0,
margin: "-1px",
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
border: 0
}
});
}
function getAlertingStyles(theme) {
return react.css({
".alert-state-paused, .alert-state-pending": {
color: theme.colors.text.secondary,
fontWeight: theme.typography.fontWeightMedium
},
".alert-state-ok": {
color: theme.colors.success.text,
fontWeight: theme.typography.fontWeightMedium
},
".alert-state-warning": {
color: theme.colors.warning.text,
fontWeight: theme.typography.fontWeightMedium
},
".alert-state-critical": {
color: theme.colors.error.text,
fontWeight: theme.typography.fontWeightMedium
}
});
}
function getCardStyles$1(theme) {
return react.css({
".card-section": {
marginBottom: theme.spacing(4)
},
".card-list": {
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
listStyleType: "none"
},
".card-item": {
display: "block",
height: "100%",
background: theme.colors.background.secondary,
boxShadow: "none",
padding: theme.spacing(2),
borderRadius: "4px",
"&:hover": {
background: theme.colors.emphasize(theme.colors.background.secondary, 0.03)
},
".label-tag": {
marginLeft: theme.spacing(1),
fontSize: "11px",
padding: "2px 6px"
}
},
".card-item-body": {
display: "flex",
overflow: "hidden"
},
".card-item-details": {
overflow: "hidden"
},
".card-item-header": {
marginBottom: theme.spacing(2)
},
".card-item-type": {
color: theme.colors.text.secondary,
textTransform: "uppercase",
fontSize: theme.typography.size.sm,
fontWeight: theme.typography.fontWeightMedium
},
".card-item-badge": {
margin: "6px 0"
},
".card-item-notice": {
fontSize: theme.typography.size.sm
},
".card-item-name": {
color: theme.colors.text.primary,
overflow: "hidden",
textOverflow: "ellipsis",
width: "100%"
},
".card-item-label": {
marginLeft: theme.spacing(1)
},
".card-item-sub-name": {
color: theme.colors.text.secondary,
overflow: "hidden",
textOverflow: "ellipsis",
width: "100%"
},
".card-item-sub-name--header": {
color: theme.colors.text.secondary,
textTransform: "uppercase",
marginBottom: theme.spacing(2),
fontSize: theme.typography.size.sm,
fontWeight: "bold"
},
".card-list-layout-grid": {
".card-item-type": {
display: "inline-block"
},
".card-item-notice": {
fontSize: theme.typography.size.sm,
display: "inline-block",
marginLeft: theme.spacing(2)
},
".card-item-header-action": {
float: "right"
},
".card-item-wrapper": {
width: "100%",
padding: theme.spacing(0, 2, 2, 0)
},
".card-item-wrapper--clickable": {
cursor: "pointer"
},
".card-item-figure": {
margin: theme.spacing(0, 2, 2, 0),
height: "80px",
img: {
width: "80px"
}
},
".card-item-name": {
fontSize: theme.typography.h3.fontSize
},
[theme.breakpoints.up("md")]: {
".card-item-wrapper": {
width: "50%"
}
},
[theme.breakpoints.up("lg")]: {
".card-item-wrapper": {
width: "33.333333%"
}
},
"&.card-list-layout-grid--max-2-col": {
[theme.breakpoints.up("lg")]: {
".card-item-wrapper": {
width: "50%"
}
}
}
},
".card-list-layout-list": {
".card-item-wrapper": {
padding: 0,
width: "100%",
marginBottom: theme.spacing(1)
},
".card-item-wrapper--clickable": {
cursor: "pointer"
},
".card-item": {
borderRadius: "2px"
},
".card-item-header": {
float: "right",
textAlign: "right"
},
".card-item-figure": {
margin: theme.spacing(0, 2, 0, 0),
img: {
width: "48px"
}
},
".card-item-name": {
fontSize: theme.typography.h4.fontSize
},
".card-item-sub-name": {
fontSize: theme.typography.size.sm
},
".layout-selector": {
marginRight: 0
}
}
});
}
function getCodeStyles(theme) {
return react.css({
"code, pre, kbd, samp": {
...theme.typography.code,
fontSize: theme.typography.bodySmall.fontSize,
backgroundColor: theme.colors.background.primary,
color: theme.colors.text.primary,
border: `1px solid ${theme.colors.border.medium}`,
borderRadius: "4px"
},
code: {
whiteSpace: "nowrap",
padding: "2px 5px",
margin: "0 2px"
},
pre: {
display: "block",
margin: theme.spacing(0, 0, 2),
lineHeight: theme.typography.body.lineHeight,
wordBreak: "break-all",
wordWrap: "break-word",
whiteSpace: "pre-wrap",
overflow: "auto",
padding: "10px",
code: {
padding: 0,
color: "inherit",
whiteSpace: "pre-wrap",
backgroundColor: "transparent",
border: 0
}
}
});
}
function getDashboardGridStyles(theme) {
return react.css({
".react-resizable-handle": {
// this needs to use visibility and not display none in order not to cause resize flickering
visibility: "hidden"
},
".react-grid-item, #grafana-portal-container": {
touchAction: "initial !important",
"&:hover": {
".react-resizable-handle": {
visibility: "visible"
}
}
},
".dragging-active": {
"*": {
cursor: "move",
userSelect: "none"
}
},
[theme.breakpoints.down("md")]: {
".react-grid-layout": {
height: "unset !important"
},
".react-grid-item": {
display: "block !important",
transitionProperty: "none !important",
// can't avoid type assertion here due to !important
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
position: "unset !important",
transform: "translate(0px, 0px) !important",
marginBottom: theme.spacing(2)
},
".panel-repeater-grid-item": {
height: "auto !important"
}
},
".react-grid-item.react-grid-placeholder": {
boxShadow: `0 0 4px ${theme.colors.primary.border} !important`,
background: `${theme.colors.primary.transparent} !important`,
zIndex: "-1 !important",
opacity: "unset !important"
},
".react-grid-item > .react-resizable-handle::after": {
borderRight: `2px solid ${theme.isDark ? theme.v1.palette.gray1 : theme.v1.palette.gray3} !important`,
borderBottom: `2px solid ${theme.isDark ? theme.v1.palette.gray1 : theme.v1.palette.gray3} !important`
},
// Hack for preventing panel menu overlapping.
".react-grid-item.resizing.panel, .react-grid-item.panel.dropdown-menu-open, .react-grid-item.react-draggable-dragging.panel": {
zIndex: theme.zIndex.dropdown
},
// Disable animation on initial rendering and enable it when component has been mounted.
".react-grid-item.cssTransforms": {
transitionProperty: "none !important"
},
[theme.transitions.handleMotion("no-preference")]: {
".react-grid-layout--enable-move-animations": {
".react-grid-item.cssTransforms": {
transitionProperty: "transform !important"
}
}
},
".dashboard-selected-element": {
outline: `1px dashed ${theme.colors.primary.border}`,
outlineOffset: "0px",
borderRadius: theme.shape.radius.default
},
".dashboard-selectable-element": {
"&:hover": {
outline: `1px dashed ${theme.colors.border.strong}`,
outlineOffset: "0px",
borderRadius: theme.shape.radius.default,
backgroundColor: theme.colors.emphasize(theme.colors.background.canvas, 0.08)
}
},
".dashboard-canvas-add-button": {
display: "flex",
opacity: 0.5,
transition: theme.transitions.create("opacity"),
filter: `grayscale(100%)`,
"&:hover": {
opacity: 1,
filter: "unset"
}
},
".dashboard-visible-hidden-element": {
position: "relative"
},
// Universal style for marking drop targets when dragging between layouts
".dashboard-drop-target": {
// Setting same options for hovered and not hovered to overwrite any conflicting styles
// There was a race condition with selectable elements styles
"&:is(:hover),&:not(:hover)": {
outline: `2px solid ${theme.colors.primary.border}`,
outlineOffset: "0px",
borderRadius: "2px"
}
},
// Body style for preventing selection when dragging
".dashboard-draggable-transparent-selection": {
"*::selection": {
all: "inherit"
}
},
".react-draggable-dragging": {
opacity: 0.8
}
});
}
function getDashDiffStyles(theme) {
return react.css({
".delta-html": {
background: theme.colors.background.secondary,
paddingTop: "5px",
paddingBottom: "5px",
userSelect: "none"
},
".diff-line": {
color: theme.colors.text.primary,
fontFamily: theme.typography.fontFamilyMonospace,
fontSize: theme.typography.size.sm,
lineHeight: 2,
marginBottom: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
position: "relative",
"&:after": {
left: "-40px"
}
},
".diff-line-number": {
color: theme.colors.text.secondary,
display: "inline-block",
fontSize: theme.typography.size.xs,
lineHeight: 2.3,
textAlign: "right",
width: "30px"
},
".diff-line-number-hide": {
visibility: "hidden"
},
".diff-line-icon": {
color: theme.colors.text.primary,
fontSize: theme.typography.size.xs,
float: "right",
position: "relative",
top: "2px",
right: "10px"
},
".diff-json-new, .diff-json-old, .diff-json-deleted, .diff-json-added": {
color: theme.v1.palette.gray5,
".diff-line-number": {
color: theme.colors.text.primary
}
},
".diff-json-new": {
backgroundColor: theme.isDark ? "#457740" : "#664e33"
},
".diff-json-old": {
backgroundColor: theme.isDark ? "#a04338" : "#5a372a"
},
".diff-json-added": {
backgroundColor: theme.colors.primary.shade
},
".diff-json-deleted": {
backgroundColor: theme.colors.error.shade
},
".diff-value": {
userSelect: "all"
},
// Basic
".diff-circle": {
marginRight: "0.5em",
"*": {
marginBottom: "1px"
}
},
".diff-circle-changed": {
color: "#f59433"
},
".diff-circle-added": {
color: "#29d761"
},
".diff-circle-deleted": {
color: "#fd474a"
},
".diff-item-added, .diff-item-deleted": {
listStyle: "none"
},
".diff-group": {
background: theme.colors.background.secondary,
fontSize: "16px",
fontStyle: "normal",
padding: "10px 15px",
margin: theme.spacing(2, 0),
".diff-group": {
padding: "0 5px"
}
},
".diff-group-name": {
display: "inline-block",
width: "100%",
fontSize: "16px",
paddingLeft: "1.75em",
margin: "0 0 14px 0"
},
".diff-summary-key": {
paddingLeft: "0.25em"
},
".diff-list": {
paddingLeft: "40px",
".diff-list": {
paddingLeft: 0
}
},
".diff-item": {
color: theme.v1.palette.gray2,
lineHeight: 2.5,
"> div": {
display: "inline"
}
},
".diff-item-changeset": {
listStyle: "none"
},
".diff-label": {
backgroundColor: theme.colors.action.hover,
borderRadius: "3px",
color: theme.colors.text.primary,
display: "inline",
fontSize: `${theme.typography.fontSize}px`,
margin: "0 5px",
padding: "3px 8px"
},
".diff-linenum": {
float: "right"
},
".diff-arrow": {
color: theme.colors.text.primary
},
".diff-block": {
width: "100%",
display: "inline-block"
},
".diff-block-title": {
fontSize: "16px",
display: "inline-block"
},
".diff-title": {
fontSize: "16px"
},
".diff-change-container": {
margin: "0 0",
paddingLeft: "3em",
paddingRight: 0
},
".diff-change-group": {
width: "100%",
color: theme.colors.text.primary,
marginBottom: "14px"
},
".diff-change-item": {
display: "inline-block"
},
".diff-change-title": {
fontSize: "16px"
},
".bullet-position-container": {
position: "relative",
left: "-6px"
},
".diff-list-circle": {
marginBottom: "3px"
}
});
}
function cardChrome(theme) {
return `
background: ${theme.colors.background.secondary};
&:hover {
background: ${hoverColor(theme.colors.background.secondary, theme)};
}
box-shadow: ${theme.components.panel.boxShadow};
border-radius: ${theme.shape.radius.default};
`;
}
function hoverColor(color, theme) {
return theme.isDark ? tinycolor__default.default(color).brighten(2).toString() : tinycolor__default.default(color).darken(2).toString();
}
function listItem(theme) {
return `
background: ${theme.colors.background.secondary};
&:hover {
background: ${hoverColor(theme.colors.background.secondary, theme)};
}
box-shadow: ${theme.components.panel.boxShadow};
border-radius: ${theme.shape.radius.default};
`;
}
function listItemSelected(theme) {
return `
background: ${hoverColor(theme.colors.background.secondary, theme)};
color: ${theme.colors.text.maxContrast};
`;
}
function mediaUp(breakpoint) {
return `only screen and (min-width: ${breakpoint})`;
}
const isGrafanaTheme2 = (theme) => theme.hasOwnProperty("v1");
const focusCss = (theme) => {
const isTheme2 = isGrafanaTheme2(theme);
const firstColor = isTheme2 ? theme.colors.background.canvas : theme.colors.bodyBg;
const secondColor = isTheme2 ? theme.colors.primary.main : theme.colors.formFocusOutline;
return `
outline: 2px dotted transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px ${firstColor}, 0 0 0px 4px ${secondColor};
transition-property: outline, outline-offset, box-shadow;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);`;
};
function getMouseFocusStyles(theme) {
return {
outline: "none",
boxShadow: `none`
};
}
function getFocusStyles(theme) {
return {
outline: "2px dotted transparent",
outlineOffset: "2px",
boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
transitionDuration: "0.2s",
transitionProperty: "outline, outline-offset, box-shadow"
};
}
const getTooltipContainerStyles = (theme) => ({
overflow: "hidden",
background: theme.colors.background.elevated,
boxShadow: theme.shadows.z2,
maxWidth: "800px",
padding: theme.spacing(1),
borderRadius: theme.shape.radius.default,
zIndex: theme.zIndex.tooltip
});
const getExternalRadius = (theme, offset, additionalOptions = {}) => {
const { selfBorderWidth = 1, childBorderRadius } = additionalOptions;
const childBorderRadiusPx = childBorderRadius !== void 0 ? `${childBorderRadius}px` : theme.shape.radius.default;
return `calc(max(0px, ${childBorderRadiusPx} + ${offset}px + ${selfBorderWidth}px))`;
};
const getInternalRadius = (theme, offset, additionalOptions = {}) => {
const { parentBorderWidth = 1, parentBorderRadius } = additionalOptions;
const parentBorderRadiusPx = parentBorderRadius !== void 0 ? `${parentBorderRadius}px` : theme.shape.radius.default;
return `calc(max(0px, ${parentBorderRadiusPx} - ${offset}px - ${parentBorderWidth}px))`;
};
var mixins = /*#__PURE__*/Object.freeze({
__proto__: null,
cardChrome: cardChrome,
focusCss: focusCss,
getExternalRadius: getExternalRadius,
getFocusStyles: getFocusStyles,
getInternalRadius: getInternalRadius,
getMouseFocusStyles: getMouseFocusStyles,
getTooltipContainerStyles: getTooltipContainerStyles,
hoverColor: hoverColor,
listItem: listItem,
listItemSelected: listItemSelected,
mediaUp: mediaUp
});
function getElementStyles(theme, isExtensionSidebarOpen) {
const bodyOverflow = isExtensionSidebarOpen ? {} : { overflowY: "auto !important" };
return react.css({
"*, *::before, *::after": {
boxSizing: "inherit"
},
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
"[tabindex='-1']:focus": {
outline: "none !important"
},
html: {
MsOverflowStyle: "scrollbar",
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
boxSizing: "border-box",
height: "100%",
fontSize: `${theme.typography.htmlFontSize}px`,
fontFamily: theme.typography.fontFamily,
lineHeight: theme.typography.body.lineHeight,
fontKerning: "normal"
},
":root": {
colorScheme: theme.colors.mode
},
body: {
height: "100%",
width: "100%",
position: "unset",
color: theme.colors.text.primary,
backgroundColor: theme.colors.background.canvas,
paddingRight: "0 !important",
"@media print": {
overflow: "visible"
},
"@page": {
margin: 0,
size: "auto",
padding: 0
},
// disable contextual font ligatures. otherwise, in firefox and safari,
// an "x" between 2 numbers is replaced by a multiplication ligature
// see https://github.com/rsms/inter/issues/222
fontVariantLigatures: "no-contextual",
...theme.typography.body,
...bodyOverflow
},
"h1, .h1": getVariantStyles(theme.typography.h1),
"h2, .h2": getVariantStyles(theme.typography.h2),
"h3, .h3": getVariantStyles(theme.typography.h3),
"h4, .h4": getVariantStyles(theme.typography.h4),
"h5, .h5": getVariantStyles(theme.typography.h5),
"h6, .h6": getVariantStyles(theme.typography.h6),
p: {
margin: theme.spacing(0, 0, 2)
},
textarea: {
overflow: "auto",
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: "vertical"
},
button: {
letterSpacing: theme.typography.body.letterSpacing,
"&:focus-visible": getFocusStyles(theme),
"&:focus": {
outline: "none"
}
},
label: {
// Allow labels to use `margin` for spacing.
display: "inline-block"
},
figure: {
margin: theme.spacing(0, 0, 2)
},
img: {
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
// centers them. This won't apply should you reset them to `block` level.
verticalAlign: "middle"
// Note: `<img>`s are deliberately not made responsive by default.
// For the rationale behind this, see the comments on the `.img-fluid` class.
},
fieldset: {
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
minWidth: 0,
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0,
margin: 0,
border: 0
},
legend: {
// Reset the entire legend element to match the `fieldset`
display: "block",
width: "100%",
padding: 0,
marginBottom: theme.spacing(1),
fontSize: theme.spacing(3),
lineHeight: "inherit",
border: 0
},
// Ex: 14px base font * 85% = about 12px
"small, .small": {
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: "normal"
},
"b, strong": {
fontWeight: theme.typography.fontWeightMedium
},
em: {
fontStyle: "italic",
color: theme.colors.text.primary
},
cite: {
fontStyle: "normal"
},
blockquote: {
padding: theme.spacing(0, 0, 0, 2),
margin: theme.spacing(0, 0, 2),
borderLeft: `5px solid ${theme.v1.palette.gray3}`,
p: {
marginBottom: 0,
fontSize: theme.typography.fontSize * 1.25,
fontWeight: 300,
lineHeight: 1.25
},
small: {
display: "block",
lineHeight: theme.typography.body.lineHeight,
color: theme.v1.palette.gray2,
"&:before": {
content: "'\\2014 \\00A0'"
}
}
},
// Quotes
"q:before, q:after, blockquote:before, blockquote:after": {
content: "''"
},
// Addresses
address: {
display: "block",
marginBottom: theme.spacing(2),
fontStyle: "normal",
lineHeight: theme.typography.body.lineHeight
},
"a.external-link": {
color: theme.colors.text.link,
textDecoration: "normal",
"&:hover": {
color: theme.colors.text.link,
textDecoration: "underline"
}
},
".link": {
color: theme.colors.text.primary,
cursor: "pointer"
},
".link:hover": {
color: theme.colors.text.maxContrast
},
".pointer": {
cursor: "pointer"
},
"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",
cursor: "help"
},
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"
},
hr: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
border: 0,
borderTop: `1px solid ${theme.colors.border.medium}`
},
"mark, .mark": {
background: theme.colors.warning.main
},
"ul, ol, dl": {
marginTop: 0,
marginBottom: 0,
padding: 0
},
"ul ul, ul ol, ol ol, ol ul": {
marginBottom: 0
},
li: {
lineHeight: theme.typography.body.lineHeight
},
dd: {
marginBottom: theme.spacing(1),
marginLeft: 0
// Undo browser default
},
"dt, dd": {
lineHeight: theme.typography.body.lineHeight
},
dt: {
fontWeight: theme.typography.fontWeightMedium
},
// 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": {
borderRadius: 0,
color: "inherit",
font: "inherit",
lineHeight: "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"
},
'input[type="search"]': {
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
WebkitAppearance: "none"
},
// 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: {
// Reset for nesting within parents with `background-color`.
backgroundColor: "transparent",
borderCollapse: "collapse",
borderSpacing: 0
},
caption: {
paddingTop: theme.spacing(0.5),
paddingBottom: theme.spacing(0.5),
color: theme.colors.text.secondary,
textAlign: "left",
captionSide: "bottom"
},
th: {
fontWeight: theme.typography.fontWeightMedium,
textAlign: "left"
},
"td, th": {
padding: 0
},
// Utility classes
".muted": {
color: theme.colors.text.secondary
},
"a.muted:hover, a.muted:focus": {
color: theme.colors.text.primary
},
".text-warning": {
color: theme.colors.warning.text,
"&:hover, &:focus": {
color: theme.colors.emphasize(theme.colors.warning.text, 0.15)
}
},
".text-error": {
color: theme.colors.error.text,
"&:hover, &:focus": {
color: theme.colors.emphasize(theme.colors.error.text, 0.15)
}
},
".text-success": {
color: "$success-text-color",
"&:hover, &:focus": {
color: theme.colors.emphasize(theme.colors.success.text, 0.15)
}
},
a: {
cursor: "pointer",
color: theme.colors.text.primary,
textDecoration: "none",
"&:focus": {
outline: "none"
},
"&:focus-visible": getFocusStyles(theme),
"&:[disabled]": {
cursor: "default",
// Need type assertion here due to the use of !important
// see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
pointerEvents: "none !important"
}
},
// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
"[role='button']": {
cursor: "pointer"
},
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
"[hidden]": {
display: "none !important"
},
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
//
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support removing the click delay via `touch-action: manipulation`.
// See:
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
"a, area, button, [role='button'], input, label, select, summary, textarea": {
touchAction: "manipulation"
},
".text-link": {
textDecoration: "underline"
},
".text-left": {
textAlign: "left"
},
".text-right": {
textAlign: "right"
},
".text-center": {
textAlign: "center"
},
".highlight-search-match": {
background: theme.components.textHighlight.background,
color: theme.components.textHighlight.text,
padding: 0
},
".template-variable": {
color: theme.colors.primary.text
},
".modal-header-title": {
fontSize: theme.typography.size.lg,
float: "left",
paddingTop: theme.spacing(1),
margin: theme.spacing(0, 2)
}
});
}
function getVariantStyles(variant) {
return {
margin: 0,
fontSize: variant.fontSize,
lineHeight: variant.lineHeight,
fontWeight: variant.fontWeight,
letterSpacing: variant.letterSpacing,
fontFamily: variant.fontFamily,
marginBottom: "0.45em"
};
}
function getExtraStyles(theme) {
return react.css({
// fix white background on intercom in dark mode
"iframe.intercom-borderless-frame": {
colorScheme: theme.colors.mode
}
});
}
function getFilterTableStyles(theme) {
return react.css({
".filter-table *": {
boxSizing: "border-box"
},
".filter-table": {
width: "100%",
borderCollapse: "separate",
tbody: {
"tr:nth-of-type(odd)": {
background: theme.colors.emphasize(theme.colors.background.primary, 0.02)
}
},
th: {
width: "auto",
padding: theme.spacing(0.5, 1),
textAlign: "left",
lineHeight: "30px",
height: "30px",
whiteSpace: "nowrap"
},
td: {
padding: theme.spacing(0.5, 1),
lineHeight: "30px",
height: "30px",
whiteSpace: "nowrap"
},
".link-td": {
padding: 0,
lineHeight: "30px",
height: "30px",
whiteSpace: "nowrap",
a: {
display: "block",
padding: theme.spacing(0, 1),
height: "30px"
}
},
".ellipsis": {
display: "block",
width: "100%",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
".expanded": {
borderColor: theme.components.panel.background
},
".expanded > td": {
paddingBottom: 0
},
".filter-table__avatar": {
width: "25px",
height: "25px",
borderRadius: "50%"
},
"&--hover": {
"tbody tr:hover": {
background: theme.colors.emphasize(theme.colors.background.primary, 0.05)
}
}
}
});
}
function getFontStyles(theme) {
const grafanaPublicPath = typeof window !== "undefined" && window.__grafana_public_path__;
const fontRoot = grafanaPublicPath ? `${grafanaPublicPath}fonts/` : "public/fonts/";
return react.css([
{
/* latin */
"@font-face": {
fontFamily: "Roboto Mono",
fontStyle: "normal",
fontWeight: 400,
fontDisplay: "swap",
src: `url('${fontRoot}roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')`,
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
}
},
{
/* latin */
"@font-face": {
fontFamily: "Roboto Mono",
fontStyle: "normal",
fontWeight: 500,
fontDisplay: "swap",
src: `url('${fontRoot}roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')`,
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
}
},
{
/*
To add new variations/version of Inter, download from https://rsms.me/inter/ and add the
web font files to the public/fonts/inter folder. Do not download the fonts from Google Fonts
or somewhere else because they don't support the features we require (like tabular numerals).
If adding additional weights, consider switching to the InterVariable variable font as combined
it may take less space than multiple static weights.
*/
"@font-face": {
fontFamily: "Inter",
fontStyle: "normal",
fontWeight: 400,
fontDisplay: "swap",
src: `url('${fontRoot}inter/Inter-Regular.woff2') format('woff2')`
}
},
{
"@font-face": {
fontFamily: "Inter",
fontStyle: "normal",
fontWeight: 500,
fontDisplay: "swap",
src: `url('${fontRoot}inter/Inter-Medium.woff2') format('woff2')`
}
}
]);
}
function getFormElementStyles(theme) {
return react.css({
"input, button, select, textarea": {
fontFamily: theme.typography.body.fontFamily,
fontSize: theme.typography.body.fontSize,
fontWeight: theme.typography.body.fontWeight,
lineHeight: theme.typography.body.lineHeight
},
"input, select": {
backgroundColor: theme.components.input.background,
color: theme.components.input.text,
border: "none",
boxShadow: "none"
},
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
"input, textarea": {
"&::placeholder": {
color: theme.colors.text.disabled
}
},
// not a big fan of number fields
'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button': {
WebkitAppearance: "none",
margin: 0
},
'input[type="number"]': {
MozAppearance: "textfield"
},
// Set the height of select and file controls to match text inputs
'select, input[type="file"]': {
height: theme.components.height.md,
lineHeight: theme.components.height.md
},
// Make select elements obey height by applying a border
select: {
width: "220px",
// default input width + 10px of padding that doesn't get applied
border: `1px solid ${theme.components.input.borderColor}`,
backgroundColor: theme.components.input.background
// Chrome on Linux and Mobile Safari need background-color
},
"select[multiple], select[size], textarea": {
height: "auto"
},
// Focus for select, file, radio, and checkbox
'select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus': {
// WebKit
outline: "5px auto -webkit-focus-ring-color",
outlineOffset: "-2px"
},
// Reset width of input images, buttons, radios, checkboxes
"input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']": {
width: "auto"
// Override of generic input selector
},
// Disabled and read-only inputs
"input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly]": {
cursor: "not-allowed",
backgroundColor: theme.colors.action.disabledBackground
},
// Explicitly reset the colors here
'input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly]': {
cursor: "not-allowed",
backgroundColor: "transparent"
},
"input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus": {
WebkitBoxShadow: `0 0 0px 1000px ${theme.components.input.background} inset !important`,
WebkitTextFillColor: theme.components.input.text,
boxShadow: `0 0 0px 1000px ${theme.components.input.background} inset`,