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