apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Rewrite grafana-prometheus css using object styles (#86835)

Browse Source
pull/87421/head
kay delaney 1 year ago committed by GitHub
parent 6733f43781
commit b68f40d5c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 406 additions and 522 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 120
      .betterer.results
  2. 20
      packages/grafana-prometheus/src/components/PromExemplarField.tsx
  3. 12
      packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
  4. 136
      packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
  5. 22
      packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx
  6. 98
      packages/grafana-prometheus/src/configuration/ConfigEditor.tsx
  7. 6
      packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx
  8. 32
      packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
  9. 18
      packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
  10. 8
      packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx
  11. 94
      packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx
  12. 10
      packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx
  13. 30
      packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx
  14. 122
      packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx
  15. 186
      packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts
  16. 14
      packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx

120
.betterer.results
Unescape View File

@ -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"],

20
packages/grafana-prometheus/src/components/PromExemplarField.tsx
Unescape View File

@ -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',
}),
};
}

12
packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
Unescape View File

@ -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"
>

136
packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
Unescape View File

@ -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',
}),
}));
/**

22
packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx
Unescape View File

@ -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,
},
}),
};
};

98
packages/grafana-prometheus/src/configuration/ConfigEditor.tsx
Unescape View File

@ -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,
}),
};
}

6
packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx
Unescape View File

@ -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();

32
packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
Unescape View File

@ -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),
}),
};
};

18
packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
Unescape View File

@ -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),
}),
};
};

8
packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx
Unescape View File

@ -86,9 +86,11 @@ export function LabelFilters({
{variableEditor ? (
<InlineFieldRow>
<div
className={cx(css`
display: flex;
`)}
className={cx(
css({
display: 'flex',
})
)}
>
<InlineLabel
width={20}

94
packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx
Unescape View File

@ -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 = (

10
packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx
Unescape View File

@ -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,
},
}),
};
};

30
packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx
Unescape View File

@ -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',
}),
};
}

122
packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx
Unescape View File

@ -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',
}),
};
};

186
packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts
Unescape View File

@ -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',
}),
};
};

14
packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx
Unescape View File

@ -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),
}),
};
};

Write Preview
Loading…
Cancel
Save