mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Rewrite grafana-prometheus css using object styles (#86835)
This commit is contained in:
kay delaney
GitHub
parent
6733f43781
commit
b68f40d5c5
@ -460,15 +460,6 @@ exports[`better eslint`] = {
|
|||||||
"packages/grafana-o11y-ds-frontend/src/utils.ts:5381": [
|
"packages/grafana-o11y-ds-frontend/src/utils.ts:5381": [
|
||||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/components/PromExemplarField.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/components/PromExploreExtraField.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/components/PromQueryField.test.tsx:5381": [
|
"packages/grafana-prometheus/src/components/PromQueryField.test.tsx:5381": [
|
||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||||
],
|
],
|
||||||
@ -476,44 +467,7 @@ exports[`better eslint`] = {
|
|||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx:5381": [
|
"packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx:5381": [
|
||||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "6"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "7"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "8"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "9"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "10"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "11"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "12"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/configuration/ConfigEditor.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "6"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "7"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "8"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "9"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "10"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "11"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "12"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "13"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "14"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "15"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/datasource.ts:5381": [
|
"packages/grafana-prometheus/src/datasource.ts:5381": [
|
||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||||
@ -555,87 +509,21 @@ exports[`better eslint`] = {
|
|||||||
"packages/grafana-prometheus/src/language_utils.ts:5381": [
|
"packages/grafana-prometheus/src/language_utils.ts:5381": [
|
||||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/LabelFilterItem.tsx:5381": [
|
"packages/grafana-prometheus/src/querybuilder/components/LabelFilterItem.tsx:5381": [
|
||||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||||
[0, 0, 0, "Do not use any type assertions.", "3"]
|
[0, 0, 0, "Do not use any type assertions.", "3"]
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/LabelParamEditor.tsx:5381": [
|
"packages/grafana-prometheus/src/querybuilder/components/LabelParamEditor.tsx:5381": [
|
||||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx:5381": [
|
"packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx:5381": [
|
||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "6"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "7"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "8"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "9"]
|
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx:5381": [
|
"packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx:5381": [
|
||||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "6"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "7"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "8"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "9"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "10"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "11"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "12"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "6"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "7"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "8"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "9"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "10"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "11"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "12"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "13"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "14"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "15"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "16"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "17"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "18"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/shared/OperationEditor.tsx:5381": [
|
"packages/grafana-prometheus/src/querybuilder/shared/OperationEditor.tsx:5381": [
|
||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||||
],
|
],
|
||||||
@ -643,10 +531,6 @@ exports[`better eslint`] = {
|
|||||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||||
[0, 0, 0, "Do not use any type assertions.", "1"]
|
[0, 0, 0, "Do not use any type assertions.", "1"]
|
||||||
],
|
],
|
||||||
"packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx:5381": [
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
|
||||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
|
||||||
],
|
|
||||||
"packages/grafana-prometheus/src/querybuilder/shared/types.ts:5381": [
|
"packages/grafana-prometheus/src/querybuilder/shared/types.ts:5381": [
|
||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||||
|
|||||||
@ -66,15 +66,15 @@ export function PromExemplarField({ datasource, onChange, query, ...rest }: Prop
|
|||||||
|
|
||||||
function getStyles(theme: GrafanaTheme2) {
|
function getStyles(theme: GrafanaTheme2) {
|
||||||
return {
|
return {
|
||||||
eyeIcon: css`
|
eyeIcon: css({
|
||||||
margin-left: ${theme.spacing(2)};
|
marginLeft: theme.spacing(2),
|
||||||
`,
|
}),
|
||||||
activeIcon: css`
|
activeIcon: css({
|
||||||
color: ${theme.colors.primary.main};
|
color: theme.colors.primary.main,
|
||||||
`,
|
}),
|
||||||
iconWrapper: css`
|
iconWrapper: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
align-items: center;
|
alignItems: 'center',
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -60,9 +60,9 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
|
|||||||
data-testid={promExploreExtraFieldTestIds.queryTypeField}
|
data-testid={promExploreExtraFieldTestIds.queryTypeField}
|
||||||
className={cx(
|
className={cx(
|
||||||
'gf-form explore-input-margin',
|
'gf-form explore-input-margin',
|
||||||
css`
|
css({
|
||||||
flex-wrap: nowrap;
|
flexWrap: 'nowrap',
|
||||||
`
|
})
|
||||||
)}
|
)}
|
||||||
aria-label="Query type field"
|
aria-label="Query type field"
|
||||||
>
|
>
|
||||||
@ -79,9 +79,9 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
|
|||||||
data-testid={promExploreExtraFieldTestIds.stepField}
|
data-testid={promExploreExtraFieldTestIds.stepField}
|
||||||
className={cx(
|
className={cx(
|
||||||
'gf-form',
|
'gf-form',
|
||||||
css`
|
css({
|
||||||
flex-wrap: nowrap;
|
flexWrap: 'nowrap',
|
||||||
`
|
})
|
||||||
)}
|
)}
|
||||||
aria-label="Step field"
|
aria-label="Step field"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -116,75 +116,75 @@ export function facetLabels(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
|
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
|
||||||
wrapper: css`
|
wrapper: css({
|
||||||
background-color: ${theme.colors.background.secondary};
|
backgroundColor: theme.colors.background.secondary,
|
||||||
padding: ${theme.spacing(1)};
|
padding: theme.spacing(1),
|
||||||
width: 100%;
|
width: '100%',
|
||||||
`,
|
}),
|
||||||
list: css`
|
list: css({
|
||||||
margin-top: ${theme.spacing(1)};
|
marginTop: theme.spacing(1),
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-wrap: wrap;
|
flexWrap: 'wrap',
|
||||||
max-height: 200px;
|
maxHeight: '200px',
|
||||||
overflow: auto;
|
overflow: 'auto',
|
||||||
align-content: flex-start;
|
alignContent: 'flex-start',
|
||||||
`,
|
}),
|
||||||
section: css`
|
section: css({
|
||||||
& + & {
|
'& + &': {
|
||||||
margin: ${theme.spacing(2)} 0;
|
margin: `${theme.spacing(2)} 0`,
|
||||||
}
|
},
|
||||||
position: relative;
|
position: 'relative',
|
||||||
`,
|
}),
|
||||||
selector: css`
|
selector: css({
|
||||||
font-family: ${theme.typography.fontFamilyMonospace};
|
fontFamily: theme.typography.fontFamilyMonospace,
|
||||||
margin-bottom: ${theme.spacing(1)};
|
marginBottom: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
status: css`
|
status: css({
|
||||||
padding: ${theme.spacing(0.5)};
|
padding: theme.spacing(0.5),
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
white-space: nowrap;
|
whiteSpace: 'nowrap',
|
||||||
overflow: hidden;
|
overflow: 'hidden',
|
||||||
text-overflow: ellipsis;
|
textOverflow: 'ellipsis',
|
||||||
/* using absolute positioning because flex interferes with ellipsis */
|
/* using absolute positioning because flex interferes with ellipsis */
|
||||||
position: absolute;
|
position: 'absolute',
|
||||||
width: 50%;
|
width: '50%',
|
||||||
right: 0;
|
right: 0,
|
||||||
text-align: right;
|
textAlign: 'right',
|
||||||
transition: opacity 100ms linear;
|
transition: 'opacity 100ms linear',
|
||||||
opacity: 0;
|
opacity: 0,
|
||||||
`,
|
}),
|
||||||
statusShowing: css`
|
statusShowing: css({
|
||||||
opacity: 1;
|
opacity: 1,
|
||||||
`,
|
}),
|
||||||
error: css`
|
error: css({
|
||||||
color: ${theme.colors.error.main};
|
color: theme.colors.error.main,
|
||||||
`,
|
}),
|
||||||
valueList: css`
|
valueList: css({
|
||||||
margin-right: ${theme.spacing(1)};
|
marginRight: theme.spacing(1),
|
||||||
resize: horizontal;
|
resize: 'horizontal',
|
||||||
`,
|
}),
|
||||||
valueListWrapper: css`
|
valueListWrapper: css({
|
||||||
border-left: 1px solid ${theme.colors.border.medium};
|
borderLeft: `1px solid ${theme.colors.border.medium}`,
|
||||||
margin: ${theme.spacing(1)} 0;
|
margin: `${theme.spacing(1)} 0`,
|
||||||
padding: ${theme.spacing(1)} 0 ${theme.spacing(1)} ${theme.spacing(1)};
|
padding: `${theme.spacing(1)} 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
|
||||||
`,
|
}),
|
||||||
valueListArea: css`
|
valueListArea: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-wrap: wrap;
|
flexWrap: 'wrap',
|
||||||
margin-top: ${theme.spacing(1)};
|
marginTop: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
valueTitle: css`
|
valueTitle: css({
|
||||||
margin-left: -${theme.spacing(0.5)};
|
marginLeft: `-${theme.spacing(0.5)}`,
|
||||||
margin-bottom: ${theme.spacing(1)};
|
marginBottom: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
validationStatus: css`
|
validationStatus: css({
|
||||||
padding: ${theme.spacing(0.5)};
|
padding: theme.spacing(0.5),
|
||||||
margin-bottom: ${theme.spacing(1)};
|
marginBottom: theme.spacing(1),
|
||||||
color: ${theme.colors.text.maxContrast};
|
color: theme.colors.text.maxContrast,
|
||||||
white-space: nowrap;
|
whiteSpace: 'nowrap',
|
||||||
overflow: hidden;
|
overflow: 'hidden',
|
||||||
text-overflow: ellipsis;
|
textOverflow: 'ellipsis',
|
||||||
`,
|
}),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -80,17 +80,17 @@ function ensurePromQL(monaco: Monaco) {
|
|||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
|
const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
|
||||||
return {
|
return {
|
||||||
container: css`
|
container: css({
|
||||||
border-radius: ${theme.shape.radius.default};
|
borderRadius: theme.shape.radius.default,
|
||||||
border: 1px solid ${theme.components.input.borderColor};
|
border: `1px solid ${theme.components.input.borderColor}`,
|
||||||
`,
|
}),
|
||||||
placeholder: css`
|
placeholder: css({
|
||||||
::after {
|
'::after': {
|
||||||
content: '${placeholder}';
|
content: `'${placeholder}'`,
|
||||||
font-family: ${theme.typography.fontFamilyMonospace};
|
fontFamily: theme.typography.fontFamilyMonospace,
|
||||||
opacity: 0.6;
|
opacity: 0.6,
|
||||||
}
|
},
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -87,54 +87,54 @@ export const validateInput = (
|
|||||||
|
|
||||||
export function overhaulStyles(theme: GrafanaTheme2) {
|
export function overhaulStyles(theme: GrafanaTheme2) {
|
||||||
return {
|
return {
|
||||||
additionalSettings: css`
|
additionalSettings: css({
|
||||||
margin-bottom: 25px;
|
marginBottom: '25px',
|
||||||
`,
|
}),
|
||||||
secondaryGrey: css`
|
secondaryGrey: css({
|
||||||
color: ${theme.colors.secondary.text};
|
color: theme.colors.secondary.text,
|
||||||
opacity: 65%;
|
opacity: '65%',
|
||||||
`,
|
}),
|
||||||
inlineError: css`
|
inlineError: css({
|
||||||
margin: 0px 0px 4px 245px;
|
margin: '0px 0px 4px 245px',
|
||||||
`,
|
}),
|
||||||
switchField: css`
|
switchField: css({
|
||||||
align-items: center;
|
alignItems: 'center',
|
||||||
`,
|
}),
|
||||||
sectionHeaderPadding: css`
|
sectionHeaderPadding: css({
|
||||||
padding-top: 32px;
|
paddingTop: '32px',
|
||||||
`,
|
}),
|
||||||
sectionBottomPadding: css`
|
sectionBottomPadding: css({
|
||||||
padding-bottom: 28px;
|
paddingBottom: '28px',
|
||||||
`,
|
}),
|
||||||
subsectionText: css`
|
subsectionText: css({
|
||||||
font-size: 12px;
|
fontSize: '12px',
|
||||||
`,
|
}),
|
||||||
hrBottomSpace: css`
|
hrBottomSpace: css({
|
||||||
margin-bottom: 56px;
|
marginBottom: '56px',
|
||||||
`,
|
}),
|
||||||
hrTopSpace: css`
|
hrTopSpace: css({
|
||||||
margin-top: 50px;
|
marginTop: '50px',
|
||||||
`,
|
}),
|
||||||
textUnderline: css`
|
textUnderline: css({
|
||||||
text-decoration: underline;
|
textDecoration: 'underline',
|
||||||
`,
|
}),
|
||||||
versionMargin: css`
|
versionMargin: css({
|
||||||
margin-bottom: 12px;
|
marginBottom: '12px',
|
||||||
`,
|
}),
|
||||||
advancedHTTPSettingsMargin: css`
|
advancedHTTPSettingsMargin: css({
|
||||||
margin: 24px 0 8px 0;
|
margin: '24px 0 8px 0',
|
||||||
`,
|
}),
|
||||||
advancedSettings: css`
|
advancedSettings: css({
|
||||||
padding-top: 32px;
|
paddingTop: '32px',
|
||||||
`,
|
}),
|
||||||
alertingTop: css`
|
alertingTop: css({
|
||||||
margin-top: 40px !important;
|
marginTop: '40px !important',
|
||||||
`,
|
}),
|
||||||
overhaulPageHeading: css`
|
overhaulPageHeading: css({
|
||||||
font-weight: 400;
|
fontWeight: 400,
|
||||||
`,
|
}),
|
||||||
container: css`
|
container: css({
|
||||||
maxwidth: 578;
|
maxwidth: 578,
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -48,9 +48,9 @@ export function ExemplarsSettings({ options, onChange, disabled }: Props) {
|
|||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
data-testid={selectors.components.DataSource.Prometheus.configPage.exemplarsAddButton}
|
data-testid={selectors.components.DataSource.Prometheus.configPage.exemplarsAddButton}
|
||||||
className={css`
|
className={css({
|
||||||
margin-bottom: 10px;
|
marginBottom: '10px',
|
||||||
`}
|
})}
|
||||||
icon="plus"
|
icon="plus"
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|||||||
@ -99,21 +99,21 @@ export const QueryPattern = (props: Props) => {
|
|||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => {
|
const getStyles = (theme: GrafanaTheme2) => {
|
||||||
return {
|
return {
|
||||||
card: css`
|
card: css({
|
||||||
width: 49.5%;
|
width: '49.5%',
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-direction: column;
|
flexDirection: 'column',
|
||||||
`,
|
}),
|
||||||
rawQueryContainer: css`
|
rawQueryContainer: css({
|
||||||
flex-grow: 1;
|
flexGrow: 1,
|
||||||
`,
|
}),
|
||||||
rawQuery: css`
|
rawQuery: css({
|
||||||
background-color: ${theme.colors.background.primary};
|
backgroundColor: theme.colors.background.primary,
|
||||||
padding: ${theme.spacing(1)};
|
padding: theme.spacing(1),
|
||||||
margin-top: ${theme.spacing(1)};
|
marginTop: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
spacing: css`
|
spacing: css({
|
||||||
margin-bottom: ${theme.spacing(1)};
|
marginBottom: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -120,14 +120,14 @@ export const QueryPatternsModal = (props: Props) => {
|
|||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => {
|
const getStyles = (theme: GrafanaTheme2) => {
|
||||||
return {
|
return {
|
||||||
cardsContainer: css`
|
cardsContainer: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-direction: row;
|
flexDirection: 'row',
|
||||||
flex-wrap: wrap;
|
flexWrap: 'wrap',
|
||||||
justify-content: space-between;
|
justifyContent: 'space-between',
|
||||||
`,
|
}),
|
||||||
spacing: css`
|
spacing: css({
|
||||||
margin-bottom: ${theme.spacing(1)};
|
marginBottom: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -86,9 +86,11 @@ export function LabelFilters({
|
|||||||
{variableEditor ? (
|
{variableEditor ? (
|
||||||
<InlineFieldRow>
|
<InlineFieldRow>
|
||||||
<div
|
<div
|
||||||
className={cx(css`
|
className={cx(
|
||||||
display: flex;
|
css({
|
||||||
`)}
|
display: 'flex',
|
||||||
|
})
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<InlineLabel
|
<InlineLabel
|
||||||
width={20}
|
width={20}
|
||||||
|
|||||||
@ -366,53 +366,53 @@ export function MetricSelect({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => ({
|
const getStyles = (theme: GrafanaTheme2) => ({
|
||||||
select: css`
|
select: css({
|
||||||
min-width: 125px;
|
minWidth: '125px',
|
||||||
`,
|
}),
|
||||||
highlight: css`
|
highlight: css({
|
||||||
label: select__match-highlight;
|
label: 'select__match-highlight',
|
||||||
background: inherit;
|
background: 'inherit',
|
||||||
padding: inherit;
|
padding: 'inherit',
|
||||||
color: ${theme.colors.warning.contrastText};
|
color: theme.colors.warning.contrastText,
|
||||||
background-color: ${theme.colors.warning.main};
|
backgroundColor: theme.colors.warning.main,
|
||||||
`,
|
}),
|
||||||
customOption: css`
|
customOption: css({
|
||||||
padding: 8px;
|
padding: '8px',
|
||||||
display: flex;
|
display: 'flex',
|
||||||
justify-content: space-between;
|
justifyContent: 'space-between',
|
||||||
cursor: pointer;
|
cursor: 'pointer',
|
||||||
:hover {
|
':hover': {
|
||||||
background-color: ${theme.colors.emphasize(theme.colors.background.primary, 0.1)};
|
backgroundColor: theme.colors.emphasize(theme.colors.background.primary, 0.1),
|
||||||
}
|
},
|
||||||
`,
|
}),
|
||||||
customOptionlabel: css`
|
customOptionlabel: css({
|
||||||
color: ${theme.colors.text.primary};
|
color: theme.colors.text.primary,
|
||||||
`,
|
}),
|
||||||
customOptionDesc: css`
|
customOptionDesc: css({
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
font-size: ${theme.typography.size.xs};
|
fontSize: theme.typography.size.xs,
|
||||||
opacity: 50%;
|
opacity: '50%',
|
||||||
`,
|
}),
|
||||||
focus: css`
|
focus: css({
|
||||||
background-color: ${theme.colors.emphasize(theme.colors.background.primary, 0.1)};
|
backgroundColor: theme.colors.emphasize(theme.colors.background.primary, 0.1),
|
||||||
`,
|
}),
|
||||||
customOptionWidth: css`
|
customOptionWidth: css({
|
||||||
min-width: 400px;
|
minWidth: '400px',
|
||||||
`,
|
}),
|
||||||
customMenuFooter: css`
|
customMenuFooter: css({
|
||||||
flex: 0;
|
flex: 0,
|
||||||
display: flex;
|
display: 'flex',
|
||||||
justify-content: space-between;
|
justifyContent: 'space-between',
|
||||||
padding: ${theme.spacing(1.5)};
|
padding: theme.spacing(1.5),
|
||||||
border-top: 1px solid ${theme.colors.border.weak};
|
borderTop: `1px solid ${theme.colors.border.weak}`,
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
`,
|
}),
|
||||||
customMenuContainer: css`
|
customMenuContainer: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-direction: column;
|
flexDirection: 'column',
|
||||||
background: ${theme.colors.background.primary};
|
background: theme.colors.background.primary,
|
||||||
box-shadow: ${theme.shadows.z3};
|
boxShadow: theme.shadows.z3,
|
||||||
`,
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const formatPrometheusLabelFiltersToString = (
|
export const formatPrometheusLabelFiltersToString = (
|
||||||
|
|||||||
@ -44,10 +44,10 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
return {
|
return {
|
||||||
// This wrapper styling can be removed after the old PromQueryEditor is removed.
|
// This wrapper styling can be removed after the old PromQueryEditor is removed.
|
||||||
// This is removing margin bottom on the old legacy inline form styles
|
// This is removing margin bottom on the old legacy inline form styles
|
||||||
wrapper: css`
|
wrapper: css({
|
||||||
.gf-form {
|
'.gf-form': {
|
||||||
margin-bottom: 0;
|
marginBottom: 0,
|
||||||
}
|
},
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -67,20 +67,20 @@ export function AdditionalSettings(props: AdditionalSettingsProps) {
|
|||||||
|
|
||||||
function getStyles(theme: GrafanaTheme2) {
|
function getStyles(theme: GrafanaTheme2) {
|
||||||
return {
|
return {
|
||||||
settingsIcon: css`
|
settingsIcon: css({
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
`,
|
}),
|
||||||
selectItem: css`
|
selectItem: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-direction: row;
|
flexDirection: 'row',
|
||||||
align-items: center;
|
alignItems: 'center',
|
||||||
padding: 4px 0;
|
padding: '4px 0',
|
||||||
`,
|
}),
|
||||||
selectItemLabel: css`
|
selectItemLabel: css({
|
||||||
margin: 0 0 0 ${theme.spacing(1)};
|
margin: `0 0 0 ${theme.spacing(1)}`,
|
||||||
align-self: center;
|
alignSelf: 'center',
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
font-size: 12px;
|
fontSize: '12px',
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -187,67 +187,65 @@ export function ResultsTable(props: ResultsTableProps) {
|
|||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => {
|
const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => {
|
||||||
return {
|
return {
|
||||||
table: css`
|
table: css({
|
||||||
${disableTextWrap ? '' : 'table-layout: fixed;'}
|
tableLayout: disableTextWrap ? undefined : 'fixed',
|
||||||
border-radius: ${theme.shape.radius.default};
|
borderRadius: theme.shape.radius.default,
|
||||||
width: 100%;
|
width: '100%',
|
||||||
white-space: ${disableTextWrap ? 'nowrap' : 'normal'};
|
whiteSpace: disableTextWrap ? 'nowrap' : 'normal',
|
||||||
td {
|
td: {
|
||||||
padding: ${theme.spacing(1)};
|
padding: theme.spacing(1),
|
||||||
}
|
},
|
||||||
|
'td,th': {
|
||||||
td,
|
minWidth: theme.spacing(3),
|
||||||
th {
|
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||||
min-width: ${theme.spacing(3)};
|
},
|
||||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
}),
|
||||||
}
|
row: css({
|
||||||
`,
|
label: 'row',
|
||||||
row: css`
|
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||||
label: row;
|
'&:last-child': {
|
||||||
border-bottom: 1px solid ${theme.colors.border.weak}
|
borderBottom: 0,
|
||||||
&:last-child {
|
},
|
||||||
border-bottom: 0;
|
}),
|
||||||
}
|
tableHeaderPadding: css({
|
||||||
`,
|
padding: '8px',
|
||||||
tableHeaderPadding: css`
|
}),
|
||||||
padding: 8px;
|
matchHighLight: css({
|
||||||
`,
|
background: 'inherit',
|
||||||
matchHighLight: css`
|
color: theme.components.textHighlight.text,
|
||||||
background: inherit;
|
backgroundColor: theme.components.textHighlight.background,
|
||||||
color: ${theme.components.textHighlight.text};
|
}),
|
||||||
background-color: ${theme.components.textHighlight.background};
|
nameWidth: css({
|
||||||
`,
|
width: disableTextWrap ? undefined : '37.5%',
|
||||||
nameWidth: css`
|
}),
|
||||||
${disableTextWrap ? '' : 'width: 37.5%;'}
|
nameOverflow: css({
|
||||||
`,
|
overflowWrap: disableTextWrap ? undefined : 'anywhere',
|
||||||
nameOverflow: css`
|
}),
|
||||||
${disableTextWrap ? '' : 'overflow-wrap: anywhere;'}
|
typeWidth: css({
|
||||||
`,
|
width: disableTextWrap ? undefined : '15%',
|
||||||
typeWidth: css`
|
}),
|
||||||
${disableTextWrap ? '' : 'width: 15%;'}
|
descriptionWidth: css({
|
||||||
`,
|
width: disableTextWrap ? undefined : '35%',
|
||||||
descriptionWidth: css`
|
}),
|
||||||
${disableTextWrap ? '' : 'width: 35%;'}
|
selectButtonWidth: css({
|
||||||
`,
|
width: disableTextWrap ? undefined : '12.5%',
|
||||||
selectButtonWidth: css`
|
}),
|
||||||
${disableTextWrap ? '' : 'width: 12.5%;'}
|
stickyHeader: css({
|
||||||
`,
|
position: 'sticky',
|
||||||
stickyHeader: css`
|
top: 0,
|
||||||
position: sticky;
|
backgroundColor: theme.colors.background.primary,
|
||||||
top: 0;
|
}),
|
||||||
background-color: ${theme.colors.background.primary};
|
noResults: css({
|
||||||
`,
|
textAlign: 'center',
|
||||||
noResults: css`
|
color: theme.colors.text.secondary,
|
||||||
text-align: center;
|
}),
|
||||||
color: ${theme.colors.text.secondary};
|
tooltipSpace: css({
|
||||||
`,
|
marginLeft: '4px',
|
||||||
tooltipSpace: css`
|
}),
|
||||||
margin-left: 4px;
|
centerButton: css({
|
||||||
`,
|
display: 'block',
|
||||||
centerButton: css`
|
margin: 'auto',
|
||||||
display: block;
|
border: 'none',
|
||||||
margin: auto;
|
}),
|
||||||
border: none;
|
|
||||||
`,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -5,98 +5,98 @@ import { GrafanaTheme2 } from '@grafana/data';
|
|||||||
|
|
||||||
export const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => {
|
export const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => {
|
||||||
return {
|
return {
|
||||||
modal: css`
|
modal: css({
|
||||||
width: 85vw;
|
width: '85vw',
|
||||||
${theme.breakpoints.down('md')} {
|
[theme.breakpoints.down('md')]: {
|
||||||
width: 100%;
|
width: '100%',
|
||||||
}
|
},
|
||||||
${theme.breakpoints.up('xl')} {
|
[theme.breakpoints.up('xl')]: {
|
||||||
width: 60%;
|
width: '60%',
|
||||||
}
|
},
|
||||||
`,
|
}),
|
||||||
inputWrapper: css`
|
inputWrapper: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-direction: row;
|
flexDirection: 'row',
|
||||||
flex-wrap: wrap;
|
flexWrap: 'wrap',
|
||||||
`,
|
}),
|
||||||
inputItemFirst: css`
|
inputItemFirst: css({
|
||||||
flex-basis: 40%;
|
flexBasis: '40%',
|
||||||
padding-right: 16px;
|
paddingRight: '16px',
|
||||||
${theme.breakpoints.down('md')} {
|
[theme.breakpoints.down('md')]: {
|
||||||
padding-right: 0px;
|
paddingRight: '0px',
|
||||||
padding-bottom: 16px;
|
paddingBottom: '16px',
|
||||||
}
|
},
|
||||||
`,
|
}),
|
||||||
inputItem: css`
|
inputItem: css({
|
||||||
flex-grow: 1;
|
flexGrow: 1,
|
||||||
flex-basis: 20%;
|
flexBasis: '20%',
|
||||||
${theme.breakpoints.down('md')} {
|
[theme.breakpoints.down('md')]: {
|
||||||
min-width: 100%;
|
minWidth: '100%',
|
||||||
}
|
},
|
||||||
`,
|
}),
|
||||||
selectWrapper: css`
|
selectWrapper: css({
|
||||||
margin-bottom: ${theme.spacing(1)};
|
marginBottom: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
resultsAmount: css`
|
resultsAmount: css({
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
font-size: 0.85rem;
|
fontSize: '0.85rem',
|
||||||
padding: 0 0 4px 0;
|
padding: '0 0 4px 0',
|
||||||
`,
|
}),
|
||||||
resultsData: css`
|
resultsData: css({
|
||||||
margin: 4px 0 ${theme.spacing(2)} 0;
|
margin: `4px 0 ${theme.spacing(2)} 0`,
|
||||||
`,
|
}),
|
||||||
resultsDataCount: css`
|
resultsDataCount: css({
|
||||||
margin: 0;
|
margin: 0,
|
||||||
`,
|
}),
|
||||||
resultsDataFiltered: css`
|
resultsDataFiltered: css({
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
text-align: center;
|
textAlign: 'center',
|
||||||
border: solid 1px rgba(204, 204, 220, 0.25);
|
border: 'solid 1px rgba(204, 204, 220, 0.25)',
|
||||||
padding: 7px;
|
padding: '7px',
|
||||||
`,
|
}),
|
||||||
resultsDataFilteredText: css`
|
resultsDataFilteredText: css({
|
||||||
display: inline;
|
display: 'inline',
|
||||||
vertical-align: text-top;
|
verticalAlign: 'text-top',
|
||||||
`,
|
}),
|
||||||
results: css`
|
results: css({
|
||||||
height: calc(80vh - 310px);
|
height: 'calc(80vh - 310px)',
|
||||||
overflow-y: scroll;
|
overflowY: 'scroll',
|
||||||
`,
|
}),
|
||||||
resultsFooter: css`
|
resultsFooter: css({
|
||||||
margin-top: 24px;
|
marginTop: '24px',
|
||||||
display: flex;
|
display: 'flex',
|
||||||
flex-direction: row;
|
flexDirection: 'row',
|
||||||
flex-wrap: wrap;
|
flexWrap: 'wrap',
|
||||||
justify-content: space-between;
|
justifyContent: 'space-between',
|
||||||
align-items: center;
|
alignItems: 'center',
|
||||||
position: sticky;
|
position: 'sticky',
|
||||||
`,
|
}),
|
||||||
currentlySelected: css`
|
currentlySelected: css({
|
||||||
color: grey;
|
color: 'grey',
|
||||||
opacity: 75%;
|
opacity: '75%',
|
||||||
font-size: 0.75rem;
|
fontSize: '0.75rem',
|
||||||
`,
|
}),
|
||||||
loadingSpinner: css`
|
loadingSpinner: css({
|
||||||
visibility: hidden;
|
visibility: 'hidden',
|
||||||
`,
|
}),
|
||||||
visible: css`
|
visible: css({
|
||||||
visibility: visible;
|
visibility: 'visible',
|
||||||
`,
|
}),
|
||||||
settingsBtn: css`
|
settingsBtn: css({
|
||||||
float: right;
|
float: 'right',
|
||||||
`,
|
}),
|
||||||
noBorder: css`
|
noBorder: css({
|
||||||
border: none;
|
border: 'none',
|
||||||
`,
|
}),
|
||||||
resultsPerPageLabel: css`
|
resultsPerPageLabel: css({
|
||||||
color: ${theme.colors.text.secondary};
|
color: theme.colors.text.secondary,
|
||||||
opacity: 75%;
|
opacity: '75%',
|
||||||
padding-top: 5px;
|
paddingTop: '5px',
|
||||||
font-size: 0.85rem;
|
fontSize: '0.85rem',
|
||||||
margin-right: 8px;
|
marginRight: '8px',
|
||||||
`,
|
}),
|
||||||
resultsPerPageWrapper: css`
|
resultsPerPageWrapper: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -77,12 +77,12 @@ QueryBuilderHints.displayName = 'QueryBuilderHints';
|
|||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => {
|
const getStyles = (theme: GrafanaTheme2) => {
|
||||||
return {
|
return {
|
||||||
container: css`
|
container: css({
|
||||||
display: flex;
|
display: 'flex',
|
||||||
align-items: start;
|
alignItems: 'start',
|
||||||
`,
|
}),
|
||||||
hint: css`
|
hint: css({
|
||||||
margin-right: ${theme.spacing(1)};
|
marginRight: theme.spacing(1),
|
||||||
`,
|
}),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user