mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Rewrite dashboard component css using object styles (#86930)
This commit is contained in:
kay delaney
GitHub
parent
fbcb9a3677
commit
0f98bd3b7b
@ -2495,17 +2495,8 @@ exports[`better eslint`] = {
|
||||
"public/app/features/dashboard/components/AddLibraryPanelWidget/index.ts:5381": [
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./AddLibraryPanelWidget\`)", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/AnnotationSettings/index.tsx:5381": [
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./AnnotationSettingsEdit\`)", "0"],
|
||||
@ -2534,20 +2525,12 @@ exports[`better eslint`] = {
|
||||
"public/app/features/dashboard/components/DashExportModal/index.ts:5381": [
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./DashboardExporter\`)", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashNav/DashNavButton.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashNav/index.ts:5381": [
|
||||
[0, 0, 0, "Do not re-export imported variable (\`DashNav\`)", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashboardLoading/DashboardLoading.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, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "3"]
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
@ -2569,23 +2552,14 @@ exports[`better eslint`] = {
|
||||
"public/app/features/dashboard/components/DashboardRow/index.ts:5381": [
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./DashboardRow\`)", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DashboardSettings/index.ts:5381": [
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./DashboardSettings\`)", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/HelpWizard/HelpWizard.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/Inspector/PanelInspector.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
@ -2595,81 +2569,26 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./LinkSettingsList\`)", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/OptionsPane.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.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, "Use data-testid for E2E selectors instead of aria-label", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.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, "Unexpected any. Specify a different type.", "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, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/PanelEditor.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, "Do not use any type assertions.", "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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.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, "Do not use any type assertions.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx:5381": [
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx:5381": [
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "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, "Use data-testid for E2E selectors instead of aria-label", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
@ -2687,27 +2606,10 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Do not use any type assertions.", "4"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "5"]
|
||||
],
|
||||
"public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx:5381": [
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
@ -2715,12 +2617,10 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "2"],
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "4"]
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SaveDashboard/types.ts:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
@ -2733,70 +2633,26 @@ exports[`better eslint`] = {
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "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, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx:5381": [
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"]
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.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"]
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/ShareModal/index.ts:5381": [
|
||||
[0, 0, 0, "Do not re-export imported variable (\`./ShareModal\`)", "0"],
|
||||
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/SubMenu/SubMenu.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.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, "Styles should be written using objects.", "10"]
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx:5381": [
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
|
||||
@ -68,19 +68,18 @@ export const AddWidgetModal = () => {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
modal: css`
|
||||
width: 65%;
|
||||
max-width: 960px;
|
||||
|
||||
${theme.breakpoints.down('md')} {
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
searchInput: css`
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
`,
|
||||
grid: css`
|
||||
display: grid;
|
||||
grid-gap: ${theme.spacing(1)};
|
||||
`,
|
||||
modal: css({
|
||||
width: '65%',
|
||||
maxWidth: '960px',
|
||||
[theme.breakpoints.down('md')]: {
|
||||
width: '100%',
|
||||
},
|
||||
}),
|
||||
searchInput: css({
|
||||
marginBottom: theme.spacing(2),
|
||||
}),
|
||||
grid: css({
|
||||
display: 'grid',
|
||||
gridGap: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -265,9 +265,9 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
maxWidth: theme.spacing(60),
|
||||
marginBottom: theme.spacing(2),
|
||||
}),
|
||||
select: css`
|
||||
margin-top: 8px;
|
||||
`,
|
||||
select: css({
|
||||
marginTop: '8px',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -154,8 +154,8 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
|
||||
};
|
||||
|
||||
const getStyles = () => ({
|
||||
table: css`
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
`,
|
||||
table: css({
|
||||
width: '100%',
|
||||
overflowX: 'scroll',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -37,8 +37,8 @@ export const DashNavButton = ({ icon, iconType, iconSize, tooltip, onClick, chil
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
noBorderContainer: css`
|
||||
padding: 0 ${theme.spacing(0.5)};
|
||||
display: flex;
|
||||
`,
|
||||
noBorderContainer: css({
|
||||
padding: `0 ${theme.spacing(0.5)}`,
|
||||
display: 'flex',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -24,10 +24,10 @@ export const DashboardFailed = ({ initError }: Props) => {
|
||||
};
|
||||
|
||||
export const styles = {
|
||||
dashboardLoading: css`
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`,
|
||||
dashboardLoading: css({
|
||||
height: '60vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}),
|
||||
};
|
||||
|
||||
@ -44,16 +44,16 @@ export const getStyles = (theme: GrafanaTheme2) => {
|
||||
`;
|
||||
|
||||
return {
|
||||
dashboardLoading: css`
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
opacity: 0%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: ${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards;
|
||||
`,
|
||||
dashboardLoadingText: css`
|
||||
font-size: ${theme.typography.h4.fontSize};
|
||||
`,
|
||||
dashboardLoading: css({
|
||||
height: '60vh',
|
||||
display: 'flex',
|
||||
opacity: '0%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
animation: `${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards`,
|
||||
}),
|
||||
dashboardLoadingText: css({
|
||||
fontSize: theme.typography.h4.fontSize,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -18,7 +18,7 @@ export const ListNewButton = ({ children, ...restProps }: Props) => {
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
buttonWrapper: css`
|
||||
padding: ${theme.spacing(3)} 0;
|
||||
`,
|
||||
buttonWrapper: css({
|
||||
padding: `${theme.spacing(3)} 0`,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -60,9 +60,9 @@ const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): voi
|
||||
title="Cannot delete provisioned dashboard"
|
||||
icon="trash-alt"
|
||||
onDismiss={hideModal}
|
||||
className={css`
|
||||
width: 500px;
|
||||
`}
|
||||
className={css({
|
||||
width: '500px',
|
||||
})}
|
||||
>
|
||||
<p>
|
||||
This dashboard is managed by Grafana provisioning and cannot be deleted. Remove the dashboard from the config file
|
||||
|
||||
@ -212,24 +212,22 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
code: css`
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
`,
|
||||
field: css`
|
||||
width: 100%;
|
||||
`,
|
||||
opts: css`
|
||||
display: flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-grow: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
`,
|
||||
code: css({
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
overflow: 'scroll',
|
||||
}),
|
||||
field: css({
|
||||
width: '100%',
|
||||
}),
|
||||
opts: css({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexGrow: 0,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
button: {
|
||||
marginLeft: '8px',
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -83,10 +83,10 @@ export const DynamicConfigValueEditor = ({
|
||||
<OptionsPaneCategory
|
||||
id={item.name}
|
||||
renderTitle={renderLabel(false, true)}
|
||||
className={css`
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
`}
|
||||
className={css({
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
})}
|
||||
isNested
|
||||
isOpenDefault={property.value !== undefined}
|
||||
>
|
||||
@ -130,13 +130,11 @@ export const DynamicConfigValueEditor = ({
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
collapsibleOverrideEditor: css`
|
||||
label: collapsibleOverrideEditor;
|
||||
& + .dynamicConfigValueEditor--nonCollapsible {
|
||||
margin-top: ${theme.spacing(1)};
|
||||
}
|
||||
`,
|
||||
};
|
||||
};
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
collapsibleOverrideEditor: css({
|
||||
label: 'collapsibleOverrideEditor',
|
||||
'& + .dynamicConfigValueEditor--nonCollapsible': {
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -53,42 +53,40 @@ export const OptionsPane = ({
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
`,
|
||||
optionsWrapper: css`
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
`,
|
||||
vizButtonWrapper: css`
|
||||
padding: 0 ${theme.spacing(2, 2)} 0;
|
||||
`,
|
||||
legacyOptions: css`
|
||||
label: legacy-options;
|
||||
.panel-options-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.panel-options-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.panel-options-group__body {
|
||||
padding: ${theme.spacing(2)} 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: block;
|
||||
margin: ${theme.spacing(2)} 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
`,
|
||||
wrapper: css({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flex: '1 1 0',
|
||||
flexDirection: 'column',
|
||||
padding: 0,
|
||||
}),
|
||||
optionsWrapper: css({
|
||||
flexGrow: 1,
|
||||
minHeight: 0,
|
||||
}),
|
||||
vizButtonWrapper: css({
|
||||
padding: `0 ${theme.spacing(2, 2)} 0`,
|
||||
}),
|
||||
legacyOptions: css({
|
||||
label: 'legacy-options',
|
||||
'.panel-options-grid': {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
'.panel-options-group': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
'.panel-options-group__body': {
|
||||
padding: `${theme.spacing(2)} 0`,
|
||||
},
|
||||
'.section': {
|
||||
display: 'block',
|
||||
margin: `${theme.spacing(2)} 0`,
|
||||
'&:first-child': {
|
||||
marginTop: 0,
|
||||
},
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -120,9 +120,9 @@ function OptionPaneLabel({ title, description, overrides, addon }: OptionPanelLa
|
||||
|
||||
function getLabelStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@ -174,55 +174,55 @@ export function renderSearchHits(
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
wrapper: css({
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: '1 1 0',
|
||||
|
||||
.search-fragment-highlight {
|
||||
color: ${theme.colors.warning.text};
|
||||
background: transparent;
|
||||
}
|
||||
`,
|
||||
searchBox: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
`,
|
||||
formRow: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
formBox: css`
|
||||
padding: ${theme.spacing(1)};
|
||||
background: ${theme.colors.background.primary};
|
||||
border: 1px solid ${theme.components.panel.borderColor};
|
||||
border-top-left-radius: ${theme.shape.borderRadius(1.5)};
|
||||
border-bottom: none;
|
||||
`,
|
||||
closeButton: css`
|
||||
margin-left: ${theme.spacing(1)};
|
||||
`,
|
||||
searchHits: css`
|
||||
padding: ${theme.spacing(1, 1, 0, 1)};
|
||||
`,
|
||||
scrollWrapper: css`
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
`,
|
||||
searchNotice: css`
|
||||
font-size: ${theme.typography.size.sm};
|
||||
color: ${theme.colors.text.secondary};
|
||||
padding: ${theme.spacing(1)};
|
||||
text-align: center;
|
||||
`,
|
||||
mainBox: css`
|
||||
background: ${theme.colors.background.primary};
|
||||
border: 1px solid ${theme.components.panel.borderColor};
|
||||
border-top: none;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
angularDeprecationWrapper: css`
|
||||
padding: ${theme.spacing(1)};
|
||||
`,
|
||||
'.search-fragment-highlight': {
|
||||
color: theme.colors.warning.text,
|
||||
background: 'transparent',
|
||||
},
|
||||
}),
|
||||
searchBox: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: 0,
|
||||
}),
|
||||
formRow: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
formBox: css({
|
||||
padding: theme.spacing(1),
|
||||
background: theme.colors.background.primary,
|
||||
border: `1px solid ${theme.components.panel.borderColor}`,
|
||||
borderTopLeftRadius: theme.shape.borderRadius(1.5),
|
||||
borderBottom: 'none',
|
||||
}),
|
||||
closeButton: css({
|
||||
marginLeft: theme.spacing(1),
|
||||
}),
|
||||
searchHits: css({
|
||||
padding: theme.spacing(1, 1, 0, 1),
|
||||
}),
|
||||
scrollWrapper: css({
|
||||
flexGrow: 1,
|
||||
minHeight: 0,
|
||||
}),
|
||||
searchNotice: css({
|
||||
fontSize: theme.typography.size.sm,
|
||||
color: theme.colors.text.secondary,
|
||||
padding: theme.spacing(1),
|
||||
textAlign: 'center',
|
||||
}),
|
||||
mainBox: css({
|
||||
background: theme.colors.background.primary,
|
||||
border: `1px solid ${theme.components.panel.borderColor}`,
|
||||
borderTop: 'none',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
angularDeprecationWrapper: css({
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -47,23 +47,23 @@ OverrideCategoryTitle.displayName = 'OverrideTitle';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
matcherUi: css`
|
||||
padding: ${theme.spacing(1)};
|
||||
`,
|
||||
propertyPickerWrapper: css`
|
||||
margin-top: ${theme.spacing(2)};
|
||||
`,
|
||||
overrideDetails: css`
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
`,
|
||||
options: css`
|
||||
overflow: hidden;
|
||||
padding-right: ${theme.spacing(4)};
|
||||
`,
|
||||
unknownLabel: css`
|
||||
margin-bottom: 0;
|
||||
`,
|
||||
matcherUi: css({
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
propertyPickerWrapper: css({
|
||||
marginTop: theme.spacing(2),
|
||||
}),
|
||||
overrideDetails: css({
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
color: theme.colors.text.secondary,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
}),
|
||||
options: css({
|
||||
overflow: 'hidden',
|
||||
paddingRight: theme.spacing(4),
|
||||
}),
|
||||
unknownLabel: css({
|
||||
marginBottom: 0,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -502,64 +502,64 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, props: Props) => {
|
||||
display: 'flex',
|
||||
paddingTop: theme.spacing(2),
|
||||
}),
|
||||
verticalSplitPanesWrapper: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
`,
|
||||
mainPaneWrapper: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpacing};
|
||||
`,
|
||||
variablesWrapper: css`
|
||||
label: variablesWrapper;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
gap: ${theme.spacing(1, 2)};
|
||||
`,
|
||||
panelWrapper: css`
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
padding-left: ${paneSpacing};
|
||||
`,
|
||||
tabsWrapper: css`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`,
|
||||
panelToolbar: css`
|
||||
display: flex;
|
||||
padding: 0 0 ${paneSpacing} ${paneSpacing};
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
`,
|
||||
angularWarning: css`
|
||||
display: flex;
|
||||
height: theme.spacing(4);
|
||||
align-items: center;
|
||||
`,
|
||||
toolbarLeft: css`
|
||||
padding-left: ${theme.spacing(1)};
|
||||
`,
|
||||
centeringContainer: css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
`,
|
||||
onlyPanel: css`
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
`,
|
||||
verticalSplitPanesWrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
}),
|
||||
mainPaneWrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
paddingRight: `${uiState.isPanelOptionsVisible ? 0 : paneSpacing}`,
|
||||
}),
|
||||
variablesWrapper: css({
|
||||
label: 'variablesWrapper',
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
flexWrap: 'wrap',
|
||||
gap: theme.spacing(1, 2),
|
||||
}),
|
||||
panelWrapper: css({
|
||||
flex: '1 1 0',
|
||||
minHeight: 0,
|
||||
width: '100%',
|
||||
paddingLeft: paneSpacing,
|
||||
}),
|
||||
tabsWrapper: css({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}),
|
||||
panelToolbar: css({
|
||||
display: 'flex',
|
||||
padding: `0 0 ${paneSpacing} ${paneSpacing}`,
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
}),
|
||||
angularWarning: css({
|
||||
display: 'flex',
|
||||
height: theme.spacing(4),
|
||||
alignItems: 'center',
|
||||
}),
|
||||
toolbarLeft: css({
|
||||
paddingLeft: theme.spacing(1),
|
||||
}),
|
||||
centeringContainer: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
onlyPanel: css({
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -113,25 +113,25 @@ function getCounter(panel: PanelModel, tab: PanelEditorTab) {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
`,
|
||||
tabBar: css`
|
||||
padding-left: ${theme.spacing(2)};
|
||||
`,
|
||||
tabContent: css`
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
background: ${theme.colors.background.primary};
|
||||
border: 1px solid ${theme.components.panel.borderColor};
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-top-right-radius: ${theme.shape.borderRadius(1.5)};
|
||||
`,
|
||||
wrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}),
|
||||
tabBar: css({
|
||||
paddingLeft: theme.spacing(2),
|
||||
}),
|
||||
tabContent: css({
|
||||
padding: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
background: theme.colors.background.primary,
|
||||
border: `1px solid ${theme.components.panel.borderColor}`,
|
||||
borderLeft: 'none',
|
||||
borderBottom: 'none',
|
||||
borderTopRightRadius: theme.shape.borderRadius(1.5),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -65,11 +65,11 @@ export const VisualizationButton = ({ panel }: Props) => {
|
||||
VisualizationButton.displayName = 'VisualizationTab';
|
||||
|
||||
const styles = {
|
||||
wrapper: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
vizButton: css`
|
||||
text-align: left;
|
||||
`,
|
||||
wrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
vizButton: css({
|
||||
textAlign: 'left',
|
||||
}),
|
||||
};
|
||||
|
||||
@ -143,46 +143,46 @@ VisualizationSelectPane.displayName = 'VisualizationSelectPane';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
icon: css`
|
||||
color: ${theme.v1.palette.gray33};
|
||||
`,
|
||||
wrapper: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
height: 100%;
|
||||
`,
|
||||
vizButton: css`
|
||||
text-align: left;
|
||||
`,
|
||||
scrollWrapper: css`
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
`,
|
||||
scrollContent: css`
|
||||
padding: ${theme.spacing(1)};
|
||||
`,
|
||||
openWrapper: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 100%;
|
||||
height: 100%;
|
||||
background: ${theme.colors.background.primary};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
`,
|
||||
searchRow: css`
|
||||
display: flex;
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
closeButton: css`
|
||||
margin-left: ${theme.spacing(1)};
|
||||
`,
|
||||
customFieldMargin: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
formBox: css`
|
||||
padding: ${theme.spacing(1)};
|
||||
padding-bottom: 0;
|
||||
`,
|
||||
icon: css({
|
||||
color: theme.v1.palette.gray33,
|
||||
}),
|
||||
wrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: '1 1 0',
|
||||
height: '100%',
|
||||
}),
|
||||
vizButton: css({
|
||||
textAlign: 'left',
|
||||
}),
|
||||
scrollWrapper: css({
|
||||
flexGrow: 1,
|
||||
minHeight: 0,
|
||||
}),
|
||||
scrollContent: css({
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
openWrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: '1 1 100%',
|
||||
height: '100%',
|
||||
background: theme.colors.background.primary,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
}),
|
||||
searchRow: css({
|
||||
display: 'flex',
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
closeButton: css({
|
||||
marginLeft: theme.spacing(1),
|
||||
}),
|
||||
customFieldMargin: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
formBox: css({
|
||||
padding: theme.spacing(1),
|
||||
paddingBottom: 0,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -35,34 +35,34 @@ export const PublicDashboardNotAvailable = ({ paused }: { paused?: boolean }) =>
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
container: css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
container: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
|
||||
:before {
|
||||
opacity: 1;
|
||||
}
|
||||
`,
|
||||
box: css`
|
||||
width: 608px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: ${theme.spacing(4)};
|
||||
z-index: 1;
|
||||
border-radius: ${theme.shape.borderRadius(4)};
|
||||
padding: ${theme.spacing(6, 8)};
|
||||
opacity: 1;
|
||||
`,
|
||||
title: css`
|
||||
font-size: ${theme.typography.h3.fontSize};
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
`,
|
||||
description: css`
|
||||
font-size: ${theme.typography.h5.fontSize};
|
||||
margin: 0;
|
||||
`,
|
||||
':before': {
|
||||
opacity: 1,
|
||||
},
|
||||
}),
|
||||
box: css({
|
||||
width: '608px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(4),
|
||||
zIndex: 1,
|
||||
borderRadius: theme.shape.borderRadius(4),
|
||||
padding: theme.spacing(6, 8),
|
||||
opacity: 1,
|
||||
}),
|
||||
title: css({
|
||||
fontSize: theme.typography.h3.fontSize,
|
||||
textAlign: 'center',
|
||||
margin: 0,
|
||||
}),
|
||||
description: css({
|
||||
fontSize: theme.typography.h5.fontSize,
|
||||
margin: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -24,8 +24,8 @@ export const RowOptionsModal = ({ repeat, title, onDismiss, onUpdate, warning }:
|
||||
};
|
||||
|
||||
const getStyles = () => ({
|
||||
modal: css`
|
||||
label: RowOptionsModal;
|
||||
width: 500px;
|
||||
`,
|
||||
modal: css({
|
||||
label: 'RowOptionsModal',
|
||||
width: '500px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -126,20 +126,19 @@ export const proxyHandlesError = (errorStatus: string) => {
|
||||
};
|
||||
|
||||
const getConfirmPluginDashboardSaveModalStyles = (theme: GrafanaTheme2) => ({
|
||||
modal: css`
|
||||
width: 500px;
|
||||
`,
|
||||
modalText: css`
|
||||
font-size: ${theme.typography.h4.fontSize};
|
||||
color: ${theme.colors.text.primary};
|
||||
margin-bottom: ${theme.spacing(4)}
|
||||
padding-top: ${theme.spacing(2)};
|
||||
`,
|
||||
modalButtonRow: css`
|
||||
margin-bottom: 14px;
|
||||
a,
|
||||
button {
|
||||
margin-right: ${theme.spacing(2)};
|
||||
}
|
||||
`,
|
||||
modal: css({
|
||||
width: '500px',
|
||||
}),
|
||||
modalText: css({
|
||||
fontSize: theme.typography.h4.fontSize,
|
||||
color: theme.colors.text.primary,
|
||||
marginBottom: theme.spacing(4),
|
||||
paddingTop: theme.spacing(2),
|
||||
}),
|
||||
modalButtonRow: css({
|
||||
marginBottom: '14px',
|
||||
'a, button': {
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -21,9 +21,9 @@ export const UnsavedChangesModal = ({ dashboard, onSaveSuccess, onDiscard, onDis
|
||||
title="Unsaved changes"
|
||||
onDismiss={onDismiss}
|
||||
icon="exclamation-triangle"
|
||||
className={css`
|
||||
width: 500px;
|
||||
`}
|
||||
className={css({
|
||||
width: '500px',
|
||||
})}
|
||||
>
|
||||
<h5>Do you want to save your changes?</h5>
|
||||
<Modal.ButtonRow>
|
||||
|
||||
@ -135,11 +135,11 @@ export const SaveDashboardForm = ({
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
message: css`
|
||||
display: flex;
|
||||
align-items: end;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
`,
|
||||
message: css({
|
||||
display: 'flex',
|
||||
alignItems: 'end',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@ -67,11 +67,11 @@ export const SaveProvisionedDashboardForm = ({ dashboard, onCancel }: Omit<SaveD
|
||||
};
|
||||
|
||||
const styles = {
|
||||
json: css`
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
resize: none;
|
||||
font-family: monospace;
|
||||
`,
|
||||
json: css({
|
||||
height: '400px',
|
||||
width: '100%',
|
||||
overflow: 'auto',
|
||||
resize: 'none',
|
||||
fontFamily: 'monospace',
|
||||
}),
|
||||
};
|
||||
|
||||
@ -163,9 +163,9 @@ export function ConfigPublicDashboardBase({
|
||||
data-testid={selectors.PauseSwitch}
|
||||
/>
|
||||
<Label
|
||||
className={css`
|
||||
margin-bottom: 0;
|
||||
`}
|
||||
className={css({
|
||||
marginBottom: 0,
|
||||
})}
|
||||
>
|
||||
<Trans i18nKey="public-dashboard.config.pause-sharing-dashboard-label">Pause sharing dashboard</Trans>
|
||||
</Label>
|
||||
@ -265,18 +265,18 @@ export function ConfigPublicDashboard({ publicDashboard, unsupportedDatasources
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
configContainer: css`
|
||||
label: config container;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: ${theme.spacing(3)};
|
||||
`,
|
||||
fieldSpace: css`
|
||||
label: field space;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
`,
|
||||
configContainer: css({
|
||||
label: 'config container',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexWrap: 'wrap',
|
||||
gap: theme.spacing(3),
|
||||
}),
|
||||
fieldSpace: css({
|
||||
label: 'field space',
|
||||
width: '100%',
|
||||
marginBottom: 0,
|
||||
}),
|
||||
timeRange: css({
|
||||
display: 'inline-block',
|
||||
}),
|
||||
|
||||
@ -228,52 +228,50 @@ export const EmailSharingConfiguration = ({ dashboard }: { dashboard: DashboardM
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
container: css`
|
||||
label: emailConfigContainer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: ${theme.spacing(3)};
|
||||
`,
|
||||
field: css`
|
||||
label: field-noMargin;
|
||||
margin-bottom: 0;
|
||||
`,
|
||||
emailContainer: css`
|
||||
label: emailContainer;
|
||||
display: flex;
|
||||
gap: ${theme.spacing(1)};
|
||||
`,
|
||||
emailInput: css`
|
||||
label: emailInput;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
table: css`
|
||||
label: table;
|
||||
display: flex;
|
||||
max-height: 220px;
|
||||
overflow-y: scroll;
|
||||
container: css({
|
||||
label: 'emailConfigContainer',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexWrap: 'wrap',
|
||||
gap: theme.spacing(3),
|
||||
}),
|
||||
field: css({
|
||||
label: 'field-noMargin',
|
||||
marginBottom: 0,
|
||||
}),
|
||||
emailContainer: css({
|
||||
label: 'emailContainer',
|
||||
display: 'flex',
|
||||
gap: theme.spacing(1),
|
||||
}),
|
||||
emailInput: css({
|
||||
label: 'emailInput',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
table: css({
|
||||
label: 'table',
|
||||
display: 'flex',
|
||||
maxHeight: '220px',
|
||||
overflowY: 'scroll',
|
||||
'& tbody': {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
},
|
||||
'& tr': {
|
||||
minHeight: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: theme.spacing(0.5, 1),
|
||||
|
||||
& tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& tr {
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: ${theme.spacing(0.5, 1)};
|
||||
|
||||
:nth-child(odd) {
|
||||
background: ${theme.colors.background.secondary};
|
||||
}
|
||||
}
|
||||
`,
|
||||
tableButtonsContainer: css`
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
`,
|
||||
':nth-child(odd)': {
|
||||
background: theme.colors.background.secondary,
|
||||
},
|
||||
},
|
||||
}),
|
||||
tableButtonsContainer: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'end',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -66,12 +66,12 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
summaryWrapper: css({
|
||||
display: 'flex',
|
||||
}),
|
||||
summary: css`
|
||||
label: collapsedText;
|
||||
margin-left: ${theme.spacing.gridSize * 2}px;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
summary: css({
|
||||
label: 'collapsedText',
|
||||
marginLeft: `${theme.spacing.gridSize * 2}px`,
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
timeRange: css({
|
||||
display: 'inline-block',
|
||||
}),
|
||||
|
||||
@ -110,7 +110,7 @@ export const AcknowledgeCheckboxes = ({
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
title: css`
|
||||
font-weight: ${theme.typography.fontWeightBold};
|
||||
`,
|
||||
title: css({
|
||||
fontWeight: theme.typography.fontWeightBold,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -110,27 +110,27 @@ export function CreatePublicDashboard({ hasError }: { hasError?: boolean }) {
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
container: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${theme.spacing(4)};
|
||||
`,
|
||||
title: css`
|
||||
font-size: ${theme.typography.h4.fontSize};
|
||||
margin: ${theme.spacing(0, 0, 2)};
|
||||
`,
|
||||
description: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
margin-bottom: ${theme.spacing(0)};
|
||||
`,
|
||||
checkboxes: css`
|
||||
margin: ${theme.spacing(0, 0, 4)};
|
||||
`,
|
||||
buttonContainer: css`
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
`,
|
||||
loadingSpinner: css`
|
||||
margin-left: ${theme.spacing(1)};
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(4),
|
||||
}),
|
||||
title: css({
|
||||
fontSize: theme.typography.h4.fontSize,
|
||||
margin: theme.spacing(0, 0, 2),
|
||||
}),
|
||||
description: css({
|
||||
color: theme.colors.text.secondary,
|
||||
marginBottom: theme.spacing(0),
|
||||
}),
|
||||
checkboxes: css({
|
||||
margin: theme.spacing(0, 0, 4),
|
||||
}),
|
||||
buttonContainer: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'end',
|
||||
}),
|
||||
loadingSpinner: css({
|
||||
marginLeft: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -38,8 +38,8 @@ export const UnsupportedDataSourcesAlert = ({ unsupportedDataSources }: { unsupp
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
unsupportedDataSourceDescription: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
unsupportedDataSourceDescription: css({
|
||||
color: theme.colors.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -68,22 +68,20 @@ export const AnnotationPicker = ({ annotation, events, onEnabledChanged }: Annot
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
annotation: css`
|
||||
display: inline-block;
|
||||
margin-right: ${theme.spacing(1)};
|
||||
|
||||
.fa-caret-down {
|
||||
font-size: 75%;
|
||||
padding-left: ${theme.spacing(1)};
|
||||
}
|
||||
|
||||
.gf-form-inline .gf-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`,
|
||||
indicator: css`
|
||||
align-self: center;
|
||||
padding: 0 ${theme.spacing(0.5)};
|
||||
`,
|
||||
annotation: css({
|
||||
display: 'inline-block',
|
||||
marginRight: theme.spacing(1),
|
||||
'.fa-caret-down': {
|
||||
fontSize: '75%',
|
||||
paddingLeft: theme.spacing(1),
|
||||
},
|
||||
'.gf-form-inline .gf-form': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}),
|
||||
indicator: css({
|
||||
alignSelf: 'center',
|
||||
padding: `0 ${theme.spacing(0.5)}`,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@ -80,20 +80,19 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
formStyles: css`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: contents;
|
||||
`,
|
||||
submenu: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: ${theme.spacing(1)} ${theme.spacing(2)};
|
||||
padding: 0 0 ${theme.spacing(1)} 0;
|
||||
`,
|
||||
formStyles: css({
|
||||
display: 'contents',
|
||||
flexWrap: 'wrap',
|
||||
}),
|
||||
submenu: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignContent: 'flex-start',
|
||||
alignItems: 'flex-start',
|
||||
gap: `${theme.spacing(1)} ${theme.spacing(2)}`,
|
||||
padding: `0 0 ${theme.spacing(1)} 0`,
|
||||
}),
|
||||
spacer: css({
|
||||
flexGrow: 1,
|
||||
}),
|
||||
|
||||
@ -83,7 +83,7 @@ export const TransformationEditor = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.editor} data-testid={selectors.components.TransformTab.transformationEditor(uiConfig.name)}>
|
||||
<div data-testid={selectors.components.TransformTab.transformationEditor(uiConfig.name)}>
|
||||
{editor}
|
||||
{debugMode && (
|
||||
<Drawer title="Debug transformation" subtitle={uiConfig.name} onClose={toggleShowDebug}>
|
||||
@ -113,76 +113,75 @@ export const TransformationEditor = ({
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
title: css`
|
||||
display: flex;
|
||||
padding: 4px 8px 4px 8px;
|
||||
position: relative;
|
||||
height: 35px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`,
|
||||
name: css`
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
color: ${theme.colors.primary.text};
|
||||
`,
|
||||
iconRow: css`
|
||||
display: flex;
|
||||
`,
|
||||
icon: css`
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
color: ${theme.colors.text.secondary};
|
||||
margin-left: ${theme.spacing(1)};
|
||||
&:hover {
|
||||
color: ${theme.colors.text};
|
||||
}
|
||||
`,
|
||||
editor: css``,
|
||||
debugWrapper: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`,
|
||||
debugSeparator: css`
|
||||
width: 48px;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
justify-content: center;
|
||||
margin: 0 ${theme.spacing(0.5)};
|
||||
color: ${theme.colors.primary.text};
|
||||
`,
|
||||
debugTitle: css`
|
||||
padding: ${theme.spacing(1)} ${theme.spacing(0.25)};
|
||||
font-family: ${theme.typography.fontFamilyMonospace};
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
color: ${theme.colors.text};
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
`,
|
||||
|
||||
debug: css`
|
||||
margin-top: ${theme.spacing(1)};
|
||||
padding: 0 ${theme.spacing(1, 1, 1)};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: stretch;
|
||||
`,
|
||||
debugJson: css`
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: ${theme.spacing(0.5)};
|
||||
`,
|
||||
title: css({
|
||||
display: 'flex',
|
||||
padding: '4px 8px 4px 8px',
|
||||
position: 'relative',
|
||||
height: '35px',
|
||||
// eslint-disable-next-line @grafana/no-border-radius-literal
|
||||
borderRadius: '4px 4px 0 0',
|
||||
flexWrap: 'nowrap',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
name: css({
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
color: theme.colors.primary.text,
|
||||
}),
|
||||
iconRow: css({
|
||||
display: 'flex',
|
||||
}),
|
||||
icon: css({
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
cursor: 'pointer',
|
||||
color: theme.colors.text.secondary,
|
||||
marginLeft: theme.spacing(1),
|
||||
'&:hover': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
}),
|
||||
debugWrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
}),
|
||||
debugSeparator: css({
|
||||
width: '48px',
|
||||
minHeight: '300px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'stretch',
|
||||
justifyContent: 'center',
|
||||
margin: `0 ${theme.spacing(0.5)}`,
|
||||
color: theme.colors.primary.text,
|
||||
}),
|
||||
debugTitle: css({
|
||||
padding: `${theme.spacing(1)} ${theme.spacing(0.25)}`,
|
||||
fontFamily: theme.typography.fontFamilyMonospace,
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
color: theme.colors.text.primary,
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
flexGrow: 0,
|
||||
flexShrink: 1,
|
||||
}),
|
||||
debug: css({
|
||||
marginTop: theme.spacing(1),
|
||||
padding: `0 ${theme.spacing(1, 1, 1)}`,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
background: `${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05}`,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
width: '100%',
|
||||
minHeight: '300px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignSelf: 'stretch',
|
||||
}),
|
||||
debugJson: css({
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
padding: theme.spacing(0.5),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -232,16 +232,16 @@ function TransformationsGrid({ showIllustrations, transformations, onClick, data
|
||||
|
||||
function getTransformationGridStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
// eslint-disable-next-line @emotion/syntax-preference
|
||||
heading: css`
|
||||
font-weight: 400,
|
||||
> button: {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justify-content: 'space-between',
|
||||
align-items: 'center',
|
||||
flex-wrap: 'no-wrap',
|
||||
},`,
|
||||
heading: css({
|
||||
fontWeight: 400,
|
||||
'> button': {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
}),
|
||||
description: css({
|
||||
fontSize: '12px',
|
||||
display: 'flex',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user