IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Finish converting emotion styles to object syntax (#95399)

Browse Source 
* convert some emotion styles to object syntax

* convert more styles to object syntax

* fix placeholder content
This commit is contained in:
Ashley Harrison 2024-10-25 14:50:28 +01:00 committed by GitHub
parent 2788817107
commit 94bbc081c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
111 changed files with 2044 additions and 2582 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

608
.betterer.results
View File

@ -3709,33 +3709,17 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/logs/components/log-context/LogRowContextModal.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, "No untranslated strings. Wrap text with <Trans />", "13"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "15"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "16"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "17"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/features/logs/utils.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/manage-dashboards/DashboardImportPage.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/manage-dashboards/components/ImportDashboardForm.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -3743,9 +3727,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "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.", "0"]
],
"public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -3753,18 +3735,8 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.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/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/manage-dashboards/state/actions.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -3839,13 +3811,6 @@ exports[`better eslint`] = {
"public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.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"]
],
"public/app/features/panel/components/VizTypePicker/VisualizationSuggestions.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
@ -3882,8 +3847,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/plugins/admin/components/Badges/index.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./PluginDisabledBadge\`)", "0"],
@ -3893,9 +3857,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not re-export imported variable (\`./PluginAngularBadge\`)", "4"],
[0, 0, 0, "Do not re-export imported variable (\`./PluginDeprecatedBadge\`)", "5"]
],
"public/app/features/plugins/admin/components/Badges/sharedStyles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithApp.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
@ -3907,9 +3868,6 @@ exports[`better eslint`] = {
"public/app/features/plugins/admin/components/GetStartedWithPlugin/index.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./GetStartedWithPlugin\`)", "0"]
],
"public/app/features/plugins/admin/components/HorizontalGroup.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/plugins/admin/components/InstallControls/ExternallyManagedButton.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@ -3929,8 +3887,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not re-export imported variable (\`./InstallControlsButton\`)", "1"]
],
"public/app/features/plugins/admin/components/PluginActions.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/plugins/admin/components/PluginDashboards.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -3958,13 +3915,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
],
"public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/plugins/admin/components/PluginDetailsPage.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
@ -3982,21 +3933,12 @@ exports[`better eslint`] = {
],
"public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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/plugins/admin/components/PluginSubtitle.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/plugins/admin/components/PluginUsage.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/plugins/admin/components/VersionList.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -4004,13 +3946,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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"]
],
"public/app/features/plugins/admin/hooks/usePluginInfo.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
],
"public/app/features/plugins/admin/pages/Browse.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
@ -4105,15 +4041,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/query/components/QueryErrorAlert.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -4124,16 +4052,9 @@ exports[`better eslint`] = {
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "11"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "12"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
],
"public/app/features/query/components/QueryGroupOptions.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -4227,20 +4148,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/search/page/components/SearchResultsTable.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/search/page/components/columns.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
@ -4294,12 +4202,10 @@ exports[`better eslint`] = {
],
"public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -4308,14 +4214,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "6"]
],
"public/app/features/serviceaccounts/components/ServiceAccountsListItem.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -4329,9 +4228,6 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/storage/Breadcrumb.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/storage/CreateNewFolderModal.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
@ -4339,23 +4235,11 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/storage/FolderView.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/storage/RootView.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -4366,19 +4250,12 @@ exports[`better eslint`] = {
],
"public/app/features/storage/StoragePage.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/storage/UploadButton.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/storage/storage.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -4526,9 +4403,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"]
],
"public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/transformers/editors/CalculateFieldTransformerEditor/CumulativeOptionsEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -4568,10 +4442,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/transformers/editors/GroupByTransformerEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "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, "Do not use any type assertions.", "0"]
],
"public/app/features/transformers/editors/MergeTransformerEditor.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -4595,9 +4466,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/transformers/extractFields/extractFields.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -4612,10 +4481,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "Do not use any type assertions.", "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, "Do not use any type assertions.", "5"]
],
"public/app/features/transformers/fieldToConfigMapping/fieldToConfigMapping.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
@ -4653,8 +4519,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"]
],
"public/app/features/transformers/prepareTimeSeries/prepareTimeSeries.test.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@ -4663,10 +4528,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/features/transformers/spatial/SpatialTransformerEditor.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/transformers/spatial/optionsHelper.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"],
@ -4689,10 +4550,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/features/users/UsersActionBar.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -4731,21 +4589,13 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/features/variables/editor/VariableEditorListRow.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"],
[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, "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", "3"]
],
"public/app/features/variables/editor/getVariableQueryEditor.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -4779,12 +4629,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "5"]
],
"public/app/features/variables/inspect/utils.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -4917,8 +4762,7 @@ exports[`better eslint`] = {
],
"public/app/features/visualization/data-hover/DataHoverRows.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/visualization/data-hover/DataHoverView.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -4997,9 +4841,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
@ -5009,9 +4850,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/cloud-monitoring/components/index.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./Project\`)", "0"],
[0, 0, 0, "Do not re-export imported variable (\`./GroupBy\`)", "1"],
@ -5080,15 +4918,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not re-export imported variable (\`./thirdArgAfterSearchQuery\`)", "4"],
[0, 0, 0, "Do not re-export imported variable (\`./withinStringQuery\`)", "5"]
],
"public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx:5381": [
[0, 0, 0, "* import is invalid because \'Layout,HorizontalGroup,VerticalGroup\' from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
@ -5098,9 +4927,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./MetricsQueryEditor/SQLCodeEditor\`)", "0"]
],
"public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/index.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./MetricStatEditor\`)", "0"]
],
@ -5195,23 +5021,12 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "7"],
[0, 0, 0, "Unexpected any. Specify a different type.", "8"]
],
"public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.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/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -5224,59 +5039,16 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.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/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/aggregations.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/state/reducer.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.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"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/elasticsearch/configuration/DataLink.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/plugins/datasource/elasticsearch/configuration/DataLinks.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/plugins/datasource/elasticsearch/datasource.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@ -5295,10 +5067,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not re-export imported variable (\`./dataquery.gen\`)", "1"],
[0, 0, 0, "Do not re-export imported variable (\`ElasticsearchQuery\`)", "2"]
],
"public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/grafana-pyroscope-datasource/utils.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -5320,8 +5088,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
],
"public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.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, "Unexpected any. Specify a different type.", "0"]
],
"public/app/plugins/datasource/grafana-testdata-datasource/components/index.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./StreamingClientEditor\`)", "0"],
@ -5340,18 +5107,7 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/grafana/components/QueryEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/plugins/datasource/grafana/components/TimePickerInput.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/plugins/datasource/grafana/components/TimeRegionEditor.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, "Do not use any type assertions.", "2"]
],
"public/app/plugins/datasource/grafana/datasource.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
@ -5364,35 +5120,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "7"],
[0, 0, 0, "Do not use any type assertions.", "8"]
],
"public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.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/plugins/datasource/graphite/components/MetricTankMetaInspector.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"]
],
"public/app/plugins/datasource/graphite/components/TagsSection.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/graphite/components/helpers.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
@ -5497,18 +5224,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.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/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/influxdb/datasource.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@ -5562,10 +5277,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/influxdb/response_parser.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/plugins/datasource/jaeger/CheatSheet.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/jaeger/_importedDependencies/model/transform-trace-data.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -5575,10 +5286,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/jaeger/components/QueryEditor.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/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/jaeger/datasource.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@ -5586,84 +5293,16 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/loki/LanguageProvider.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/plugins/datasource/loki/components/LokiContextUi.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"]
],
"public/app/plugins/datasource/loki/components/LokiLabelBrowser.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"]
],
"public/app/plugins/datasource/loki/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"]
],
"public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/plugins/datasource/loki/configuration/DerivedField.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"]
],
"public/app/plugins/datasource/loki/configuration/DerivedFields.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"]
],
"public/app/plugins/datasource/loki/datasource.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.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/plugins/datasource/loki/querybuilder/components/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"]
],
"public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.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/plugins/datasource/loki/types.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`LokiQueryDirection\`)", "0"],
[0, 0, 0, "Do not re-export imported variable (\`LokiQueryType\`)", "1"],
@ -5673,10 +5312,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not re-export imported variable (\`MixedDatasource\`)", "0"],
[0, 0, 0, "Do not re-export imported variable (\`Datasource\`)", "1"]
],
"public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/opentsdb/datasource.d.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
@ -5700,10 +5335,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "16"],
[0, 0, 0, "Unexpected any. Specify a different type.", "17"]
],
"public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/datasource/parca/webpack.config.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"]
],
@ -5792,38 +5423,6 @@ exports[`better eslint`] = {
"public/app/plugins/datasource/zipkin/webpack.config.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"]
],
"public/app/plugins/panel/alertlist/AlertInstances.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/panel/alertlist/UnifiedAlertList.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"],
[0, 0, 0, "Styles should be written using objects.", "16"]
],
"public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.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"]
],
"public/app/plugins/panel/annolist/AnnoListPanel.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -5850,11 +5449,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not re-export imported variable (\`CandlestickFieldMap\`)", "6"],
[0, 0, 0, "Do not re-export imported variable (\`FieldConfig\`)", "7"]
],
"public/app/plugins/panel/datagrid/utils.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"]
],
"public/app/plugins/panel/debug/CursorView.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@ -5921,24 +5515,6 @@ exports[`better eslint`] = {
"public/app/plugins/panel/geomap/utils/tooltip.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/panel/gettingstarted/components/DocsCard.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"]
],
"public/app/plugins/panel/gettingstarted/components/TutorialCard.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/plugins/panel/gettingstarted/components/sharedStyles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/panel/heatmap/HeatmapPanel.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@ -5973,18 +5549,8 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "15"],
[0, 0, 0, "Do not use any type assertions.", "16"]
],
"public/app/plugins/panel/live/LiveChannelEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/panel/live/LivePanel.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "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, "Do not use any type assertions.", "0"]
],
"public/app/plugins/panel/logs/LogsPanel.test.tsx:5381": [
[0, 0, 0, "* import is invalid because \'Layout,HorizontalGroup,VerticalGroup\' from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
@ -5995,55 +5561,16 @@ exports[`better eslint`] = {
"public/app/plugins/panel/nodeGraph/Edge.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/panel/nodeGraph/EdgeLabel.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/plugins/panel/nodeGraph/Legend.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/panel/nodeGraph/Marker.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/plugins/panel/nodeGraph/Node.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"]
],
"public/app/plugins/panel/nodeGraph/NodeGraph.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, "Do not use any type assertions.", "10"],
[0, 0, 0, "Do not use any type assertions.", "11"],
[0, 0, 0, "Do not use any type assertions.", "12"],
[0, 0, 0, "Do not use any type assertions.", "13"]
[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"]
],
"public/app/plugins/panel/nodeGraph/ViewControls.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, "Unexpected any. Specify a different type.", "3"]
],
"public/app/plugins/panel/nodeGraph/editor/ArcOptionsEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
],
"public/app/plugins/panel/nodeGraph/index.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./NodeGraph\`)", "0"]
@ -6054,17 +5581,6 @@ exports[`better eslint`] = {
"public/app/plugins/panel/nodeGraph/types.ts:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./panelcfg.gen\`)", "0"]
],
"public/app/plugins/panel/nodeGraph/useContextMenu.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/panel/piechart/PieChart.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"]
],
"public/app/plugins/panel/piechart/migrations.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@ -6076,13 +5592,8 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/plugins/panel/table/TablePanel.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.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, "Styles should be written using objects.", "1"]
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/plugins/panel/table/migrations.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -6090,13 +5601,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "2"],
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
],
"public/app/plugins/panel/text/TextPanel.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/panel/text/TextPanelEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/panel/text/textPanelMigrationHandler.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
@ -6124,15 +5628,6 @@ exports[`better eslint`] = {
"public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.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"]
],
"public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
@ -6143,21 +5638,6 @@ exports[`better eslint`] = {
[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"]
],
"public/app/plugins/panel/traces/TracesPanel.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/plugins/panel/welcome/Welcome.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/plugins/panel/xychart/AutoEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/plugins/panel/xychart/ManualEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],

166
public/app/features/logs/components/log-context/LogRowContextModal.tsx
View File

@ -34,91 +34,91 @@ import { LogContextButtons } from './LogContextButtons';
const getStyles = (theme: GrafanaTheme2) => {
return {
modal: css`
width: 85vw;
${theme.breakpoints.down('md')} {
width: 100%;
}
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`,
sticky: css`
position: sticky;
z-index: 1;
top: -1px;
bottom: -1px;
`,
entry: css`
& > td {
padding: ${theme.spacing(1)} 0 ${theme.spacing(1)} 0;
}
background: ${theme.colors.emphasize(theme.colors.background.secondary)};
modal: css({
width: '85vw',
[theme.breakpoints.down('md')]: {
width: '100%',
},
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}),
sticky: css({
position: 'sticky',
zIndex: 1,
top: '-1px',
bottom: '-1px',
}),
entry: css({
'& > td': {
padding: theme.spacing(1, 0, 1, 0),
},
background: theme.colors.emphasize(theme.colors.background.secondary),
& > table {
margin-bottom: 0;
}
'& > table': {
marginBottom: 0,
},
& .log-row-menu {
margin-top: -6px;
}
`,
datasourceUi: css`
padding-bottom: ${theme.spacing(1.25)};
display: flex;
align-items: center;
`,
logRowGroups: css`
overflow: auto;
max-height: 75%;
align-self: stretch;
display: inline-block;
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.radius.default};
& > table {
min-width: 100%;
}
`,
flexColumn: css`
display: flex;
flex-direction: column;
padding: 0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)};
`,
flexRow: css`
display: flex;
flex-direction: row;
align-items: center;
& > div:last-child {
margin-left: auto;
}
`,
noMarginBottom: css`
& > table {
margin-bottom: 0;
}
`,
hidden: css`
display: none;
`,
paddingTop: css`
padding-top: ${theme.spacing(1)};
`,
paddingBottom: css`
padding-bottom: ${theme.spacing(1)};
`,
link: css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
:hover {
color: ${theme.colors.text.link};
}
`,
loadingCell: css`
position: sticky;
left: 50%;
display: inline-block;
transform: translateX(-50%);
`,
'& .log-row-menu': {
marginTop: '-6px',
},
}),
datasourceUi: css({
paddingBottom: theme.spacing(1.25),
display: 'flex',
alignItems: 'center',
}),
logRowGroups: css({
overflow: 'auto',
maxHeight: '75%',
alignSelf: 'stretch',
display: 'inline-block',
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
'& > table': {
minWidth: '100%',
},
}),
flexColumn: css({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(0, 3, 3, 3),
}),
flexRow: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
'& > div:last-child': {
marginLeft: 'auto',
},
}),
noMarginBottom: css({
'& > table': {
marginBottom: 0,
},
}),
hidden: css({
display: 'none',
}),
paddingTop: css({
paddingTop: theme.spacing(1),
}),
paddingBottom: css({
paddingBottom: theme.spacing(1),
}),
link: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.bodySmall.fontSize,
':hover': {
color: theme.colors.text.link,
},
}),
loadingCell: css({
position: 'sticky',
left: '50%',
display: 'inline-block',
transform: 'translateX(-50%)',
}),
};
};

20
public/app/features/manage-dashboards/DashboardImportPage.tsx
View File

@ -256,15 +256,15 @@ export default DashboardImport;
const importStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
option: css`
margin-bottom: ${theme.spacing(4)};
max-width: 600px;
`,
labelWithLink: css`
max-width: 100%;
`,
linkWithinLabel: css`
font-size: inherit;
`,
option: css({
marginBottom: theme.spacing(4),
maxWidth: '600px',
}),
labelWithLink: css({
maxWidth: '100%',
}),
linkWithinLabel: css({
fontSize: 'inherit',
}),
};
});

12
public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.tsx
View File

@ -52,11 +52,11 @@ export function ImportDashboardLibraryPanelsList({
function getStyles(theme: GrafanaTheme2) {
return {
spacer: css`
margin-bottom: ${theme.spacing(2)};
`,
item: css`
margin-bottom: ${theme.spacing(1)};
`,
spacer: css({
marginBottom: theme.spacing(2),
}),
item: css({
marginBottom: theme.spacing(1),
}),
};
}

12
public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx
View File

@ -47,10 +47,10 @@ export const DeletePublicDashboardModal = ({
};
const getStyles = (theme: GrafanaTheme2) => ({
title: css`
margin-bottom: ${theme.spacing(1)};
`,
description: css`
font-size: ${theme.typography.body.fontSize};
`,
title: css({
marginBottom: theme.spacing(1),
}),
description: css({
fontSize: theme.typography.body.fontSize,
}),
});

80
public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx
View File

@ -209,46 +209,46 @@ export const PublicDashboardListTable = () => {
};
const getStyles = (theme: GrafanaTheme2) => ({
list: css`
list-style-type: none;
margin-bottom: ${theme.spacing(2)};
`,
card: css`
${theme.breakpoints.up('sm')} {
display: flex;
}
`,
heading: css`
display: flex;
align-items: center;
gap: ${theme.spacing(1)};
flex: 1;
`,
orphanedTitle: css`
display: flex;
align-items: center;
gap: ${theme.spacing(1)};
`,
actions: css`
display: flex;
align-items: center;
position: relative;
list: css({
listStyleType: 'none',
marginBottom: theme.spacing(2),
}),
card: css({
[theme.breakpoints.up('sm')]: {
display: 'flex',
},
}),
heading: css({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
flex: 1,
}),
orphanedTitle: css({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
}),
actions: css({
display: 'flex',
alignItems: 'center',
position: 'relative',
gap: ${theme.spacing(0.5)};
${theme.breakpoints.up('sm')} {
gap: ${theme.spacing(1)};
}
`,
pauseSwitch: css`
display: flex;
gap: ${theme.spacing(1)};
align-items: center;
font-size: ${theme.typography.bodySmall.fontSize};
margin-bottom: 0;
flex: 1;
gap: theme.spacing(0.5),
[theme.breakpoints.up('sm')]: {
gap: theme.spacing(1),
},
}),
pauseSwitch: css({
display: 'flex',
gap: theme.spacing(1),
alignItems: 'center',
fontSize: theme.typography.bodySmall.fontSize,
marginBottom: 0,
flex: 1,
${theme.breakpoints.up('sm')} {
padding-right: ${theme.spacing(2)};
}
`,
[theme.breakpoints.up('sm')]: {
paddingRight: theme.spacing(2),
},
}),
});

91
public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx
View File

@ -83,55 +83,56 @@ const getStyles = (theme: GrafanaTheme2) => {
borderRadius: theme.spacing(2),
bottom: 0,
}),
vizBox: css`
position: relative;
background: none;
border-radius: ${theme.shape.radius.default};
cursor: pointer;
border: 1px solid ${theme.colors.border.medium};
vizBox: css({
position: 'relative',
background: 'none',
borderRadius: theme.shape.radius.default,
cursor: 'pointer',
border: `1px solid ${theme.colors.border.medium}`,
transition: ${theme.transitions.create(['background'], {
duration: theme.transitions.duration.short,
})};
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
transition: theme.transitions.create(['background'], {
duration: theme.transitions.duration.short,
}),
},
&:hover {
background: ${theme.colors.background.secondary};
}
`,
imgBox: css`
display: flex;
flex-direction: column;
height: 100%;
'&:hover': {
background: theme.colors.background.secondary,
},
}),
imgBox: css({
display: 'flex',
flexDirection: 'column',
height: '100%',
justify-self: center;
color: ${theme.colors.text.primary};
width: 100%;
display: flex;
justifySelf: 'center',
color: theme.colors.text.primary,
width: '100%',
justify-content: center;
align-items: center;
text-align: center;
`,
name: css`
padding-bottom: ${theme.spacing(0.5)};
margin-top: ${theme.spacing(-1)};
font-size: ${theme.typography.bodySmall.fontSize};
white-space: nowrap;
overflow: hidden;
color: ${theme.colors.text.secondary};
font-weight: ${theme.typography.fontWeightMedium};
text-overflow: ellipsis;
`,
img: css`
max-width: ${theme.spacing(8)};
max-height: ${theme.spacing(8)};
`,
renderContainer: css`
position: absolute;
transform-origin: left top;
top: 6px;
left: 6px;
`,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
}),
name: css({
paddingBottom: theme.spacing(0.5),
marginTop: theme.spacing(-1),
fontSize: theme.typography.bodySmall.fontSize,
whiteSpace: 'nowrap',
overflow: 'hidden',
color: theme.colors.text.secondary,
fontWeight: theme.typography.fontWeightMedium,
textOverflow: 'ellipsis',
}),
img: css({
maxWidth: theme.spacing(8),
maxHeight: theme.spacing(8),
}),
renderContainer: css({
position: 'absolute',
transformOrigin: 'left top',
top: '6px',
left: '6px',
}),
};
};

10
public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx
View File

@ -17,10 +17,10 @@ export function PluginUpdateAvailableBadge({ plugin }: Props): React.ReactElemen
export const getStyles = (theme: GrafanaTheme2) => {
return {
hasUpdate: css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
margin-bottom: 0;
`,
hasUpdate: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.bodySmall.fontSize,
marginBottom: 0,
}),
};
};

11
public/app/features/plugins/admin/components/Badges/sharedStyles.ts
View File

@ -2,8 +2,9 @@ import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
export const getBadgeColor = (theme: GrafanaTheme2) => css`
background: ${theme.colors.background.primary};
border-color: ${theme.colors.border.strong};
color: ${theme.colors.text.secondary};
`;
export const getBadgeColor = (theme: GrafanaTheme2) =>
css({
background: theme.colors.background.primary,
borderColor: theme.colors.border.strong,
color: theme.colors.text.secondary,
});

24
public/app/features/plugins/admin/components/HorizontalGroup.tsx
View File

@ -18,16 +18,16 @@ export const HorizontalGroup = ({ children, wrap, className }: HorizontalGroupPr
};
const getStyles = (theme: GrafanaTheme2, wrap?: boolean) => ({
container: css`
display: flex;
flex-direction: row;
flex-wrap: ${wrap ? 'wrap' : 'no-wrap'};
& > * {
margin-bottom: ${theme.spacing()};
margin-right: ${theme.spacing()};
}
& > *:last-child {
margin-right: 0;
}
`,
container: css({
display: 'flex',
flexDirection: 'row',
flexWrap: wrap ? 'wrap' : 'nowrap',
'& > *': {
marginBottom: theme.spacing(),
marginRight: theme.spacing(),
},
'& > *:last-child': {
marginRight: 0,
},
}),
});

6
public/app/features/plugins/admin/components/PluginActions.tsx
View File

@ -73,8 +73,8 @@ export const PluginActions = ({ plugin }: Props) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
message: css`
color: ${theme.colors.text.secondary};
`,
message: css({
color: theme.colors.text.secondary,
}),
};
};

22
public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
View File

@ -50,21 +50,21 @@ export function PluginDetailsHeaderDependencies({ plugin, grafanaDependency }: P
export const getStyles = (theme: GrafanaTheme2) => {
return {
dependencyTitle: css`
margin-right: ${theme.spacing(0.5)};
dependencyTitle: css({
marginRight: theme.spacing(0.5),
&::after {
content: '';
padding: 0;
}
`,
'&::after': {
content: "''",
padding: 0,
},
}),
depBadge: css({
display: 'flex',
alignItems: 'flex-start',
}),
icon: css`
color: ${theme.colors.text.secondary};
margin-right: ${theme.spacing(0.5)};
`,
icon: css({
color: theme.colors.text.secondary,
marginRight: theme.spacing(0.5),
}),
};
};

18
public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.tsx
View File

@ -34,14 +34,14 @@ export function PluginDetailsHeaderSignature({ plugin }: Props): React.ReactElem
export const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
display: flex;
flex-wrap: wrap;
gap: ${theme.spacing(0.5)};
`,
link: css`
display: inline-flex;
align-items: center;
`,
container: css({
display: 'flex',
flexWrap: 'wrap',
gap: theme.spacing(0.5),
}),
link: css({
display: 'inline-flex',
alignItems: 'center',
}),
};
};

32
public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx
View File

@ -53,20 +53,20 @@ export const DetailsBadge = ({ children }: React.PropsWithChildren<{}>) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
badge: css`
background-color: ${theme.colors.background.canvas};
border-color: ${theme.colors.border.strong};
color: ${theme.colors.text.secondary};
white-space: nowrap;
`,
detailsWrapper: css`
align-items: center;
display: flex;
`,
strong: css`
color: ${theme.colors.text.primary};
`,
icon: css`
margin-right: ${theme.spacing(0.5)};
`,
badge: css({
backgroundColor: theme.colors.background.canvas,
borderColor: theme.colors.border.strong,
color: theme.colors.text.secondary,
whiteSpace: 'nowrap',
}),
detailsWrapper: css({
alignItems: 'center',
display: 'flex',
}),
strong: css({
color: theme.colors.text.primary,
}),
icon: css({
marginRight: theme.spacing(0.5),
}),
});

10
public/app/features/plugins/admin/components/PluginSubtitle.tsx
View File

@ -76,10 +76,10 @@ export const PluginSubtitle = ({ plugin }: Props) => {
export const getStyles = (theme: GrafanaTheme2) => {
return {
subtitle: css`
display: flex;
flex-direction: column;
gap: ${theme.spacing(1)};
`,
subtitle: css({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
}),
};
};

14
public/app/features/plugins/admin/components/PluginUsage.tsx
View File

@ -86,12 +86,12 @@ export function PluginUsage({ plugin }: Props) {
export const getStyles = (theme: GrafanaTheme2) => {
return {
wrap: css`
width: 100%;
height: 100%;
`,
info: css`
padding-bottom: 30px;
`,
wrap: css({
width: '100%',
height: '100%',
}),
info: css({
paddingBottom: '30px',
}),
};
};

33
public/app/features/plugins/admin/components/VersionList.tsx
View File

@ -57,21 +57,20 @@ export const VersionList = ({ versions = [], installedVersion }: Props) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
padding: ${theme.spacing(2, 4, 3)};
`,
table: css`
table-layout: fixed;
width: 100%;
td,
th {
padding: ${theme.spacing()} 0;
}
th {
font-size: ${theme.typography.h5.fontSize};
}
`,
currentVersion: css`
font-weight: ${theme.typography.fontWeightBold};
`,
container: css({
padding: theme.spacing(2, 4, 3),
}),
table: css({
tableLayout: 'fixed',
width: '100%',
'td, th': {
padding: `${theme.spacing()} 0`,
},
th: {
fontSize: theme.typography.h5.fontSize,
},
}),
currentVersion: css({
fontWeight: theme.typography.fontWeightBold,
}),
});

10
public/app/features/plugins/admin/hooks/usePluginInfo.tsx
View File

@ -88,10 +88,10 @@ export const usePluginInfo = (plugin?: CatalogPlugin): PageInfoItem[] => {
export const getStyles = (theme: GrafanaTheme2) => {
return {
subtitle: css`
display: flex;
flex-direction: column;
gap: ${theme.spacing(1)};
`,
subtitle: css({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
}),
};
};

135
public/app/features/query/components/QueryEditorRowHeader.tsx
View File

@ -146,79 +146,78 @@ const renderDataSource = <TQuery extends DataQuery>(
const getStyles = (theme: GrafanaTheme2) => {
return {
wrapper: css`
label: Wrapper;
display: flex;
align-items: center;
margin-left: ${theme.spacing(0.5)};
overflow: hidden;
`,
queryNameWrapper: css`
display: flex;
cursor: pointer;
border: 1px solid transparent;
border-radius: ${theme.shape.borderRadius(2)};
align-items: center;
padding: 0 0 0 ${theme.spacing(0.5)};
margin: 0;
background: transparent;
overflow: hidden;
wrapper: css({
label: 'Wrapper',
display: 'flex',
alignItems: 'center',
marginLeft: theme.spacing(0.5),
overflow: 'hidden',
}),
queryNameWrapper: css({
display: 'flex',
cursor: 'pointer',
border: '1px solid transparent',
borderRadius: theme.shape.radius.default,
alignItems: 'center',
padding: theme.spacing(0, 0, 0, 0.5),
margin: 0,
background: 'transparent',
overflow: 'hidden',
&:hover {
background: ${theme.colors.action.hover};
border: 1px dashed ${theme.colors.border.strong};
}
'&:hover': {
background: theme.colors.action.hover,
border: `1px dashed ${theme.colors.border.strong}`,
},
&:focus {
border: 2px solid ${theme.colors.primary.border};
}
'&:focus': {
border: `2px solid ${theme.colors.primary.border}`,
},
&:hover,
&:focus {
.query-name-edit-icon {
visibility: visible;
}
}
`,
queryName: css`
font-weight: ${theme.typography.fontWeightMedium};
color: ${theme.colors.primary.text};
cursor: pointer;
overflow: hidden;
margin-left: ${theme.spacing(0.5)};
`,
'&:hover, &:focus': {
'.query-name-edit-icon': {
visibility: 'visible',
},
},
}),
queryName: css({
fontWeight: theme.typography.fontWeightMedium,
color: theme.colors.primary.text,
cursor: 'pointer',
overflow: 'hidden',
marginLeft: theme.spacing(0.5),
}),
queryEditIcon: cx(
css`
margin-left: ${theme.spacing(2)};
visibility: hidden;
`,
css({
marginLeft: theme.spacing(2),
visibility: 'hidden',
}),
'query-name-edit-icon'
),
queryNameInput: css`
max-width: 300px;
margin: -4px 0;
`,
collapsedText: css`
font-weight: ${theme.typography.fontWeightRegular};
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
padding-left: ${theme.spacing(1)};
align-items: center;
overflow: hidden;
font-style: italic;
white-space: nowrap;
text-overflow: ellipsis;
`,
contextInfo: css`
font-size: ${theme.typography.bodySmall.fontSize};
font-style: italic;
color: ${theme.colors.text.secondary};
padding-left: 10px;
padding-right: 10px;
`,
itemWrapper: css`
display: flex;
margin-left: 4px;
`,
queryNameInput: css({
maxWidth: '300px',
margin: '-4px 0',
}),
collapsedText: css({
fontWeight: theme.typography.fontWeightRegular,
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
paddingLeft: theme.spacing(1),
alignItems: 'center',
overflow: 'hidden',
fontStyle: 'italic',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
}),
contextInfo: css({
fontSize: theme.typography.bodySmall.fontSize,
fontStyle: 'italic',
color: theme.colors.text.secondary,
paddingLeft: '10px',
paddingRight: '10px',
}),
itemWrapper: css({
display: 'flex',
marginLeft: '4px',
}),
};
};

46
public/app/features/query/components/QueryGroup.tsx
View File

@ -355,29 +355,29 @@ const getStyles = stylesFactory(() => {
const { theme } = config;
return {
innerWrapper: css`
display: flex;
flex-direction: column;
padding: ${theme.spacing.md};
`,
dataSourceRow: css`
display: flex;
margin-bottom: ${theme.spacing.md};
`,
dataSourceRowItem: css`
margin-right: ${theme.spacing.inlineFormMargin};
`,
dataSourceRowItemOptions: css`
flex-grow: 1;
margin-right: ${theme.spacing.inlineFormMargin};
`,
queriesWrapper: css`
padding-bottom: 16px;
`,
expressionWrapper: css``,
expressionButton: css`
margin-right: ${theme.spacing.sm};
`,
innerWrapper: css({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing.md,
}),
dataSourceRow: css({
display: 'flex',
marginBottom: theme.spacing.md,
}),
dataSourceRowItem: css({
marginRight: theme.spacing.inlineFormMargin,
}),
dataSourceRowItemOptions: css({
flexGrow: 1,
marginRight: theme.spacing.inlineFormMargin,
}),
queriesWrapper: css({
paddingBottom: '16px',
}),
expressionWrapper: css({}),
expressionButton: css({
marginRight: theme.spacing.sm,
}),
};
});

152
public/app/features/search/page/components/SearchResultsTable.tsx
View File

@ -228,44 +228,44 @@ const getStyles = (theme: GrafanaTheme2) => {
const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03);
return {
noData: css`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
`,
headerCell: css`
align-items: center;
display: flex;
overflo: hidden;
padding: ${theme.spacing(1)};
`,
headerRow: css`
background-color: ${theme.colors.background.secondary};
display: flex;
gap: ${theme.spacing(1)};
height: ${ROW_HEIGHT}px;
`,
selectedRow: css`
background-color: ${rowHoverBg};
box-shadow: inset 3px 0px ${theme.colors.primary.border};
`,
rowContainer: css`
display: flex;
gap: ${theme.spacing(1)};
height: ${ROW_HEIGHT}px;
label: row;
&:hover {
background-color: ${rowHoverBg};
}
noData: css({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
}),
headerCell: css({
alignItems: 'center',
display: 'flex',
overflo: 'hidden',
padding: theme.spacing(1),
}),
headerRow: css({
backgroundColor: theme.colors.background.secondary,
display: 'flex',
gap: theme.spacing(1),
height: `${ROW_HEIGHT}px`,
}),
selectedRow: css({
backgroundColor: rowHoverBg,
boxShadow: `inset 3px 0px ${theme.colors.primary.border}`,
}),
rowContainer: css({
display: 'flex',
gap: theme.spacing(1),
height: `${ROW_HEIGHT}px`,
label: 'row',
'&:hover': {
backgroundColor: rowHoverBg,
},
&:not(:hover) div[role='cell'] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`,
"&:not(:hover) div[role='cell']": {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}),
};
};
@ -278,53 +278,53 @@ const getColumnStyles = (theme: GrafanaTheme2) => {
display: 'flex',
alignItems: 'center',
}),
nameCellStyle: css`
overflow: hidden;
text-overflow: ellipsis;
user-select: text;
white-space: nowrap;
`,
nameCellStyle: css({
overflow: 'hidden',
textOverflow: 'ellipsis',
userSelect: 'text',
whiteSpace: 'nowrap',
}),
typeCell: css({
gap: theme.spacing(0.5),
}),
typeIcon: css`
fill: ${theme.colors.text.secondary};
`,
datasourceItem: css`
span {
&:hover {
color: ${theme.colors.text.link};
}
}
`,
missingTitleText: css`
color: ${theme.colors.text.disabled};
font-style: italic;
`,
invalidDatasourceItem: css`
color: ${theme.colors.error.main};
text-decoration: line-through;
`,
typeIcon: css({
fill: theme.colors.text.secondary,
}),
datasourceItem: css({
span: {
'&:hover': {
color: theme.colors.text.link,
},
},
}),
missingTitleText: css({
color: theme.colors.text.disabled,
fontStyle: 'italic',
}),
invalidDatasourceItem: css({
color: theme.colors.error.main,
textDecoration: 'line-through',
}),
locationContainer: css({
display: 'flex',
flexWrap: 'nowrap',
gap: theme.spacing(1),
overflow: 'hidden',
}),
locationItem: css`
align-items: center;
color: ${theme.colors.text.secondary};
display: flex;
flex-wrap: nowrap;
gap: 4px;
overflow: hidden;
`,
explainItem: css`
cursor: pointer;
`,
tagList: css`
justify-content: flex-start;
flex-wrap: nowrap;
`,
locationItem: css({
alignItems: 'center',
color: theme.colors.text.secondary,
display: 'flex',
flexWrap: 'nowrap',
gap: '4px',
overflow: 'hidden',
}),
explainItem: css({
cursor: 'pointer',
}),
tagList: css({
justifyContent: 'flex-start',
flexWrap: 'nowrap',
}),
};
};

6
public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx
View File

@ -85,7 +85,7 @@ export function ServiceAccountProfile({ serviceAccount, timeZone, onChange }: Pr
}
export const getStyles = (theme: GrafanaTheme2) => ({
section: css`
margin-bottom: ${theme.spacing(4)};
`,
section: css({
marginBottom: theme.spacing(4),
}),
});

6
public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx
View File

@ -100,8 +100,8 @@ export const ServiceAccountProfileRow = ({ label, value, inputType, disabled, on
const getStyles = (theme: GrafanaTheme2) => {
return {
disabled: css`
color: ${theme.colors.text.secondary};
`,
disabled: css({
color: theme.colors.text.secondary,
}),
};
};

43
public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx
View File

@ -121,25 +121,26 @@ const TokenExpiration = ({ timeZone, token }: TokenExpirationProps) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
tableRow: (hasExpired: boolean | undefined) => css`
color: ${hasExpired ? theme.colors.text.secondary : theme.colors.text.primary};
`,
tooltipContainer: css`
margin-left: ${theme.spacing(1)};
`,
toolTipIcon: css`
color: ${theme.colors.error.text};
`,
secondsUntilExpiration: css`
color: ${theme.colors.warning.text};
`,
hasExpired: css`
color: ${theme.colors.error.text};
`,
neverExpire: css`
color: ${theme.colors.text.secondary};
`,
section: css`
margin-bottom: ${theme.spacing(4)};
`,
tableRow: (hasExpired: boolean | undefined) =>
css({
color: hasExpired ? theme.colors.text.secondary : theme.colors.text.primary,
}),
tooltipContainer: css({
marginLeft: theme.spacing(1),
}),
toolTipIcon: css({
color: theme.colors.error.text,
}),
secondsUntilExpiration: css({
color: theme.colors.warning.text,
}),
hasExpired: css({
color: theme.colors.error.text,
}),
neverExpire: css({
color: theme.colors.text.secondary,
}),
section: css({
marginBottom: theme.spacing(4),
}),
});

32
public/app/features/storage/Breadcrumb.tsx
View File

@ -39,23 +39,23 @@ export function Breadcrumb({ pathName, onPathChange, rootIcon }: Props) {
function getStyles(theme: GrafanaTheme2) {
return {
breadCrumb: css`
list-style: none;
padding: ${theme.spacing(2, 1)};
breadCrumb: css({
listStyle: 'none',
padding: theme.spacing(2, 1),
li {
display: inline;
li: {
display: 'inline',
:not(:last-child) {
color: ${theme.colors.text.link};
cursor: pointer;
}
+ li:before {
content: '>';
padding: ${theme.spacing(1)};
color: ${theme.colors.text.secondary};
}
}
`,
':not(:last-child)': {
color: theme.colors.text.link,
cursor: 'pointer',
},
'+ li:before': {
content: "'>'",
padding: theme.spacing(1),
color: theme.colors.text.secondary,
},
},
}),
};
}

58
public/app/features/storage/FileView.tsx
View File

@ -125,37 +125,31 @@ function getFileDisplayInfo(path: string): FileDisplayInfo {
const getStyles = (theme: GrafanaTheme2) => ({
// TODO: remove `height: 90%`
wrapper: css`
display: flex;
flex-direction: column;
height: 100%;
`,
tableControlRowWrapper: css`
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: ${theme.spacing(2)};
`,
wrapper: css({
display: 'flex',
flexDirection: 'column',
height: '100%',
}),
tableControlRowWrapper: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: theme.spacing(2),
}),
// TODO: remove `height: 100%`
tableWrapper: css`
border: 1px solid ${theme.colors.border.medium};
height: 100%;
`,
uploadSpot: css`
margin-left: ${theme.spacing(2)};
`,
border: css`
border: 1px solid ${theme.colors.border.medium};
padding: ${theme.spacing(2)};
`,
img: css`
max-width: 100%;
// max-height: 147px;
// fill: ${theme.colors.text.primary};
`,
icon: css`
// max-width: 100%;
// max-height: 147px;
// fill: ${theme.colors.text.primary};
`,
tableWrapper: css({
border: `1px solid ${theme.colors.border.medium}`,
height: '100%',
}),
uploadSpot: css({
marginLeft: theme.spacing(2),
}),
border: css({
border: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(2),
}),
img: css({
maxWidth: '100%',
}),
icon: css({}),
});

44
public/app/features/storage/FolderView.tsx
View File

@ -43,27 +43,27 @@ export function FolderView({ listing, view }: Props) {
const getStyles = (theme: GrafanaTheme2) => ({
// TODO: remove `height: 90%`
wrapper: css`
display: flex;
flex-direction: column;
height: 100%;
`,
tableControlRowWrapper: css`
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: ${theme.spacing(2)};
`,
wrapper: css({
display: 'flex',
flexDirection: 'column',
height: '100%',
}),
tableControlRowWrapper: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: theme.spacing(2),
}),
// TODO: remove `height: 100%`
tableWrapper: css`
border: 1px solid ${theme.colors.border.medium};
height: 100%;
`,
uploadSpot: css`
margin-left: ${theme.spacing(2)};
`,
border: css`
border: 1px solid ${theme.colors.border.medium};
padding: ${theme.spacing(2)};
`,
tableWrapper: css({
border: `1px solid ${theme.colors.border.medium}`,
height: '100%',
}),
uploadSpot: css({
marginLeft: theme.spacing(2),
}),
border: css({
border: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(2),
}),
});

50
public/app/features/storage/StoragePage.tsx
View File

@ -267,30 +267,30 @@ export default function StoragePage(props: Props) {
const getStyles = (theme: GrafanaTheme2) => ({
// TODO: remove `height: 90%`
wrapper: css`
display: flex;
flex-direction: column;
height: 100%;
`,
tableControlRowWrapper: css`
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: ${theme.spacing(2)};
`,
wrapper: css({
display: 'flex',
flexDirection: 'column',
height: '100%',
}),
tableControlRowWrapper: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: theme.spacing(2),
}),
// TODO: remove `height: 100%`
tableWrapper: css`
border: 1px solid ${theme.colors.border.medium};
height: 100%;
`,
border: css`
border: 1px solid ${theme.colors.border.medium};
padding: ${theme.spacing(2)};
`,
errorAlert: css`
padding-top: 20px;
`,
uploadButton: css`
margin-right: ${theme.spacing(2)};
`,
tableWrapper: css({
border: `1px solid ${theme.colors.border.medium}`,
height: '100%',
}),
border: css({
border: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(2),
}),
errorAlert: css({
paddingTop: '20px',
}),
uploadButton: css({
marginRight: theme.spacing(2),
}),
});

6
public/app/features/storage/UploadButton.tsx
View File

@ -112,7 +112,7 @@ export function UploadButton({ setErrorMessages, setPath, path, fileNames }: Pro
}
const getStyles = (theme: GrafanaTheme2) => ({
uploadButton: css`
margin-right: ${theme.spacing(2)};
`,
uploadButton: css({
marginRight: theme.spacing(2),
}),
});

6
public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
View File

@ -99,7 +99,7 @@ export const configFromQueryTransformRegistryItem: TransformerRegistryItem<Confi
};
const getStyles = (theme: GrafanaTheme2) => ({
matcherOptions: css`
min-width: 404px;
`,
matcherOptions: css({
minWidth: '404px',
}),
});

26
public/app/features/transformers/editors/GroupByTransformerEditor.tsx
View File

@ -127,19 +127,19 @@ export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }:
const getStyles = (theme: GrafanaTheme2) => {
return {
label: css`
label {
min-width: ${theme.spacing(32)};
}
`,
operation: css`
flex-shrink: 0;
height: 100%;
width: ${theme.spacing(24)};
`,
aggregations: css`
flex-grow: 1;
`,
label: css({
label: {
minWidth: theme.spacing(32),
},
}),
operation: css({
flexShrink: 0,
height: '100%',
width: theme.spacing(24),
}),
aggregations: css({
flexGrow: 1,
}),
};
};

14
public/app/features/transformers/extractFields/components/JSONPathEditor.tsx
View File

@ -120,12 +120,12 @@ const getTooltips = () => {
function getStyle() {
return {
list: css`
margin-left: 20px;
`,
removeIcon: css`
margin: 0 0 0 4px;
align-items: center;
`,
list: css({
marginLeft: '20px',
}),
removeIcon: css({
margin: '0 0 0 4px',
alignItems: 'center',
}),
};
}

53
public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx
View File

@ -202,32 +202,31 @@ function configHandlerToSelectOption(
}
const getStyles = (theme: GrafanaTheme2) => ({
table: css`
margin-top: ${theme.spacing(1)};
table: css({
marginTop: theme.spacing(1),
td,
th {
border-right: 4px solid ${theme.colors.background.primary};
border-bottom: 4px solid ${theme.colors.background.primary};
white-space: nowrap;
}
th {
font-size: ${theme.typography.bodySmall.fontSize};
line-height: ${theme.spacing(4)};
padding: ${theme.spacing(0, 1)};
}
`,
labelCell: css`
font-size: ${theme.typography.bodySmall.fontSize};
background: ${theme.colors.background.secondary};
padding: ${theme.spacing(0, 1)};
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
min-width: 140px;
`,
selectCell: css`
padding: 0;
min-width: 161px;
`,
'td, th': {
borderRight: `4px solid ${theme.colors.background.primary}`,
borderBottom: `4px solid ${theme.colors.background.primary}`,
whiteSpace: 'nowrap',
},
th: {
fontSize: theme.typography.bodySmall.fontSize,
lineHeight: theme.spacing(4),
padding: theme.spacing(0, 1),
},
}),
labelCell: css({
fontSize: theme.typography.bodySmall.fontSize,
background: theme.colors.background.secondary,
padding: theme.spacing(0, 1),
maxWidth: '400px',
overflow: 'hidden',
textOverflow: 'ellipsis',
minWidth: '140px',
}),
selectCell: css({
padding: 0,
minWidth: '161px',
}),
});

6
public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
View File

@ -110,9 +110,9 @@ export function PrepareTimeSeriesEditor(props: TransformerUIProps<PrepareTimeSer
}
const getStyles = (theme: GrafanaTheme2) => ({
info: css`
margin-left: 20px;
`,
info: css({
marginLeft: '20px',
}),
});
export const prepareTimeseriesTransformerRegistryItem: TransformerRegistryItem<PrepareTimeSeriesOptions> = {

14
public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
View File

@ -149,13 +149,13 @@ export const SetGeometryTransformerEditor = (props: Props) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
wrap: css`
margin-bottom: 20px;
`,
item: css`
border-left: 4px solid ${theme.colors.border.strong};
padding-left: 10px;
`,
wrap: css({
marginBottom: '20px',
}),
item: css({
borderLeft: `4px solid ${theme.colors.border.strong}`,
paddingLeft: '10px',
}),
};
};

20
public/app/features/users/TokenRevokedModal.tsx
View File

@ -50,14 +50,14 @@ export const TokenRevokedModal = (props: Props) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
infobox: css`
margin-bottom: 0;
`,
text: css`
margin: ${theme.spacing(1, 0, 2)};
`,
backdrop: css`
background-color: ${theme.colors.background.canvas};
opacity: 0.8;
`,
infobox: css({
marginBottom: 0,
}),
text: css({
margin: theme.spacing(1, 0, 2),
}),
backdrop: css({
backgroundColor: theme.colors.background.canvas,
opacity: 0.8,
}),
});

8
public/app/features/variables/editor/VariableEditorList.tsx
View File

@ -143,8 +143,8 @@ function EmptyVariablesList({ onAdd }: { onAdd: () => void }): ReactElement {
}
const getStyles = () => ({
tableContainer: css`
overflow: scroll;
width: 100%;
`,
tableContainer: css({
overflow: 'scroll',
width: '100%',
}),
});

66
public/app/features/variables/editor/VariableEditorListRow.tsx
View File

@ -154,38 +154,38 @@ function VariableCheckIndicator({ passed }: VariableCheckIndicatorProps): ReactE
function getStyles(theme: GrafanaTheme2) {
return {
dragHandle: css`
cursor: grab;
margin-left: ${theme.spacing(1)};
`,
column: css`
width: 1%;
`,
nameLink: css`
cursor: pointer;
color: ${theme.colors.primary.text};
`,
definitionColumn: css`
width: 100%;
max-width: 200px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
`,
iconPassed: css`
color: ${theme.v1.palette.greenBase};
margin-right: ${theme.spacing(2)};
`,
iconFailed: css`
color: ${theme.v1.palette.orange};
margin-right: ${theme.spacing(2)};
`,
icons: css`
display: flex;
gap: ${theme.spacing(2)};
align-items: center;
`,
dragHandle: css({
cursor: 'grab',
marginLeft: theme.spacing(1),
}),
column: css({
width: '1%',
}),
nameLink: css({
cursor: 'pointer',
color: theme.colors.primary.text,
}),
definitionColumn: css({
width: '100%',
maxWidth: '200px',
cursor: 'pointer',
overflow: 'hidden',
textOverflow: 'ellipsis',
OTextOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}),
iconPassed: css({
color: theme.v1.palette.greenBase,
marginRight: theme.spacing(2),
}),
iconFailed: css({
color: theme.v1.palette.orange,
marginRight: theme.spacing(2),
}),
icons: css({
display: 'flex',
gap: theme.spacing(2),
alignItems: 'center',
}),
};
}

44
public/app/features/variables/inspect/VariablesUnknownTable.tsx
View File

@ -123,26 +123,26 @@ function UnknownTable({ usages }: { usages: UsagesToNetwork[] }): ReactElement {
}
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
margin-top: ${theme.spacing(4)};
padding-top: ${theme.spacing(4)};
`,
infoIcon: css`
margin-left: ${theme.spacing(1)};
`,
defaultColumn: css`
width: 1%;
`,
firstColumn: css`
width: 1%;
vertical-align: top;
color: ${theme.colors.text.maxContrast};
`,
lastColumn: css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
text-align: right;
`,
container: css({
marginTop: theme.spacing(4),
paddingTop: theme.spacing(4),
}),
infoIcon: css({
marginLeft: theme.spacing(1),
}),
defaultColumn: css({
width: '1%',
}),
firstColumn: css({
width: '1%',
verticalAlign: 'top',
color: theme.colors.text.maxContrast,
}),
lastColumn: css({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: '100%',
textAlign: 'right',
}),
});

6
public/app/features/visualization/data-hover/DataHoverRows.tsx
View File

@ -108,7 +108,7 @@ export const generateLabel = (feature: FeatureLike, idx: number): string | React
};
const getStyles = (theme: GrafanaTheme2) => ({
collapsibleRow: css`
margin-bottom: 0;
`,
collapsibleRow: css({
marginBottom: 0,
}),
});

6
public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx
View File

@ -27,9 +27,9 @@ export default class CloudMonitoringCheatSheet extends PureComponent<
<span>Patterns:</span>
<br />
<ul
className={css`
list-style: none;
`}
className={css({
listStyle: 'none',
})}
>
<li>
<code>{`${'{{metric.type}}'}`}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time

13
public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
View File

@ -312,11 +312,12 @@ export function Editor({
);
}
const getStyles = (theme: GrafanaTheme2) => css`
label: grafana-select-option-description;
font-weight: normal;
font-style: italic;
color: ${theme.colors.text.secondary};
`;
const getStyles = (theme: GrafanaTheme2) =>
css({
label: 'grafana-select-option-description',
fontWeight: 'normal',
fontStyle: 'italic',
color: theme.colors.text.secondary,
});
export const VisualMetricQueryEditor = React.memo(Editor);

8
public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx
View File

@ -6,10 +6,10 @@ import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
import { Alert, Field, InlineField, useStyles2 } from '@grafana/ui';
const getStyles = (theme: GrafanaTheme2) => ({
infoText: css`
padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.text.secondary};
`,
infoText: css({
paddingBottom: theme.spacing(2),
color: theme.colors.text.secondary,
}),
});
interface Props {

8
public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx
View File

@ -14,10 +14,10 @@ type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJ
query: CloudWatchLogsQuery;
};
const labelClass = css`
margin-left: 3px;
flex-grow: 0;
`;
const labelClass = css({
marginLeft: '3px',
flexGrow: 0,
});
export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor(props: Props) {
const { query, data, datasource } = props;

12
public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx
View File

@ -38,12 +38,12 @@ export function DynamicLabelsField({ label, width, onChange }: Props) {
return (
<div ref={containerRef} className={cx(styles.wrapper)}>
<CodeEditor
containerStyles={css`
border: 1px solid ${theme.colors.action.disabledBackground};
&:hover {
border-color: ${theme.components.input.borderColor};
}
`}
containerStyles={css({
border: `1px solid ${theme.colors.action.disabledBackground}`,
'&:hover': {
borderColor: theme.components.input.borderColor,
},
})}
monacoOptions={{
// without this setting, the auto-resize functionality causes an infinite loop, don't remove it!
scrollBeyondLastLine: false,

6
public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx
View File

@ -11,9 +11,9 @@ type Props = {
legacyLogGroupNames: string[];
};
const rowGap = css`
gap: 3px;
`;
const rowGap = css({
gap: '3px',
});
export const LegacyLogGroupSelection = ({ datasource, region, legacyLogGroupNames, onChange }: Props) => {
return (

6
public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
View File

@ -16,9 +16,9 @@ interface Props {
export const AddRemove = ({ index, onAdd, onRemove, elements }: Props) => {
return (
<div
className={css`
display: flex;
`}
className={css({
display: 'flex',
})}
>
{index === 0 && (
<Button variant="secondary" fill="text" icon="plus" onClick={onAdd} tooltip="Add" aria-label="Add" />

6
public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
View File

@ -6,9 +6,9 @@ import { Segment } from '@grafana/ui';
import { MetricAggregation } from '../types';
import { describeMetric } from '../utils';
const noWrap = css`
white-space: nowrap;
`;
const noWrap = css({
whiteSpace: 'nowrap',
});
const toOption = (metric: MetricAggregation) => ({
label: describeMetric(metric),

20
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
View File

@ -38,23 +38,23 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
return (
<>
<div
className={css`
display: flex;
flex-direction: column;
`}
className={css({
display: 'flex',
flexDirection: 'column',
})}
>
{bucketAgg.settings?.filters!.map((filter, index) => (
<div
key={index}
className={css`
display: flex;
`}
className={css({
display: 'flex',
})}
>
<InlineField label="Query" labelWidth={8}>
<div
className={css`
width: 150px;
`}
className={css({
width: '150px',
})}
>
<QueryField
placeholder="Lucene Query"

28
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
View File

@ -45,18 +45,18 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
return (
<>
<div
className={css`
display: flex;
`}
className={css({
display: 'flex',
})}
>
<InlineLabel width={16}>Variables</InlineLabel>
<div
className={css`
display: grid;
grid-template-columns: 1fr auto;
row-gap: 4px;
margin-bottom: 4px;
`}
className={css({
display: 'grid',
gridTemplateColumns: '1fr auto',
rowGap: '4px',
marginBottom: '4px',
})}
>
{value.pipelineVariables!.map((pipelineVar, index) => (
// index as a key doesn't work here since removing an element
@ -68,11 +68,11 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
// ensures the UI is in a correct state. We might want to optimize this if we see perf issue in the future.
<Fragment key={uniqueId('es-bs-')}>
<div
className={css`
display: grid;
column-gap: 4px;
grid-template-columns: auto auto;
`}
className={css({
display: 'grid',
columnGap: '4px',
gridTemplateColumns: 'auto auto',
})}
>
<Input
aria-label="Variable name"

16
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
View File

@ -49,16 +49,16 @@ export const TopMetricsSettingsEditor = ({ metric }: Props) => {
<InlineField
label="Order By"
labelWidth={16}
className={css`
& > div {
width: 100%;
}
`}
className={css({
'& > div': {
width: '100%',
},
})}
>
<SegmentAsync
className={css`
margin-right: 0;
`}
className={css({
marginRight: 0,
})}
loadOptions={getOrderByOptions}
onChange={(e) => dispatch(changeMetricSetting({ metric, settingName: 'orderBy', newValue: e.value }))}
placeholder="Select Field"

13
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
View File

@ -6,13 +6,10 @@ export const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
return {
color:
hidden &&
css`
&,
&:hover,
label,
a {
color: ${hidden ? theme.colors.text.disabled : theme.colors.text.primary};
}
`,
css({
'&, &:hover, label, a': {
color: hidden ? theme.colors.text.disabled : theme.colors.text.primary,
},
}),
};
};

14
public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
View File

@ -55,12 +55,12 @@ export const QueryEditorRow = ({
const getStyles = (theme: GrafanaTheme2) => {
return {
iconWrapper: css`
display: flex;
`,
icon: css`
color: ${theme.colors.text.secondary};
margin-left: ${theme.spacing(0.25)};
`,
iconWrapper: css({
display: 'flex',
}),
icon: css({
color: theme.colors.text.secondary,
marginLeft: theme.spacing(0.25),
}),
};
};

37
public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
View File

@ -8,24 +8,25 @@ import { segmentStyles } from './styles';
const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
return {
wrapper: css`
max-width: 500px;
display: flex;
flex-direction: column;
`,
settingsWrapper: css`
padding-top: ${theme.spacing(0.5)};
`,
icon: css`
margin-right: ${theme.spacing(0.5)};
`,
button: css`
justify-content: start;
${hidden &&
css`
color: ${theme.colors.text.disabled};
`}
`,
wrapper: css({
maxWidth: '500px',
display: 'flex',
flexDirection: 'column',
}),
settingsWrapper: css({
paddingTop: theme.spacing(0.5),
}),
icon: css({
marginRight: theme.spacing(0.5),
}),
button: css(
{
justifyContent: 'start',
},
hidden && {
color: theme.colors.text.disabled,
}
),
};
};

14
public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
View File

@ -64,13 +64,13 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }:
};
const getStyles = (theme: GrafanaTheme2) => ({
root: css`
display: flex;
`,
queryItem: css`
flex-grow: 1;
margin: 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0;
`,
root: css({
display: 'flex',
}),
queryItem: css({
flexGrow: 1,
margin: theme.spacing(0, 0.5, 0.5, 0),
}),
});
interface Props {

6
public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
export const segmentStyles = css`
min-width: 150px;
`;
export const segmentStyles = css({
minWidth: '150px',
});

40
public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
View File

@ -154,24 +154,24 @@ function useInternalLink(datasourceUid?: string): [boolean, Dispatch<SetStateAct
}
const getStyles = () => ({
firstRow: css`
display: flex;
`,
nameField: css`
flex: 2;
`,
regexField: css`
flex: 3;
`,
row: css`
display: flex;
align-items: baseline;
`,
urlField: css`
display: flex;
flex: 1;
`,
urlDisplayLabelField: css`
flex: 1;
`,
firstRow: css({
display: 'flex',
}),
nameField: css({
flex: 2,
}),
regexField: css({
flex: 3,
}),
row: css({
display: 'flex',
alignItems: 'baseline',
}),
urlField: css({
display: 'flex',
flex: 1,
}),
urlDisplayLabelField: css({
flex: 1,
}),
});

18
public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
View File

@ -10,15 +10,15 @@ import { DataLink } from './DataLink';
const getStyles = (theme: GrafanaTheme2) => {
return {
addButton: css`
margin-right: 10px;
`,
container: css`
margin-bottom: ${theme.spacing(2)};
`,
dataLink: css`
margin-bottom: ${theme.spacing(1)};
`,
addButton: css({
marginRight: '10px',
}),
container: css({
marginBottom: theme.spacing(2),
}),
dataLink: css({
marginBottom: theme.spacing(1),
}),
};
};

27
public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
View File

@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import { useEffect, useRef } from 'react';
import { useAsync, useLatest } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { CodeEditor, Monaco, useStyles2, monacoTypes } from '@grafana/ui';
import { languageDefinition } from '../pyroscopeql';
@ -138,22 +139,22 @@ function ensurePyroscopeQL(monaco: Monaco) {
}
}
const getStyles = () => {
const getStyles = (theme: GrafanaTheme2) => {
return {
queryField: css`
label: LabelsEditorQueryField;
flex: 1;
queryField: css({
label: 'LabelsEditorQueryField',
flex: 1,
// Not exactly sure but without this the editor does not shrink after resizing (so you can make it bigger but not
// smaller). At the same time this does not actually make the editor 100px because it has flex 1 so I assume
// this should sort of act as a flex-basis (but flex-basis does not work for this). So yeah CSS magic.
width: 100px;
`,
wrapper: css`
label: LabelsEditorWrapper;
display: flex;
flex: 1;
border: 1px solid rgba(36, 41, 46, 0.3);
border-radius: 2px;
`,
width: '100px',
}),
wrapper: css({
label: 'LabelsEditorWrapper',
display: 'flex',
flex: 1,
border: '1px solid rgba(36, 41, 46, 0.3)',
borderRadius: theme.shape.radius.default,
}),
};
};

6
public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx
View File

@ -50,9 +50,9 @@ const renderInput = (field: FieldSchema, onChange: SchemaFormProps['onChange'],
const getStyles = (theme: GrafanaTheme2) => {
return {
jsonView: css`
margin-bottom: ${theme.spacing(1)};
`,
jsonView: css({
marginBottom: theme.spacing(1),
}),
};
};

22
public/app/plugins/datasource/grafana/components/QueryEditor.tsx
View File

@ -504,16 +504,16 @@ export const QueryEditor = withTheme2(UnthemedQueryEditor);
function getStyles(theme: GrafanaTheme2) {
return {
file: css`
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: ${theme.spacing(2)};
border: 1px dashed ${theme.colors.border.medium};
background-color: ${theme.colors.background.secondary};
margin-top: ${theme.spacing(1)};
`,
file: css({
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
padding: theme.spacing(2),
border: `1px dashed ${theme.colors.border.medium}`,
backgroundColor: theme.colors.background.secondary,
marginTop: theme.spacing(1),
}),
};
}

157
public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
View File

@ -5,7 +5,7 @@ import TimePicker from 'rc-time-picker';
import { GrafanaTheme2 } from '@grafana/data';
import { FormInputSize, Icon, useStyles2 } from '@grafana/ui';
import { inputSizes } from '@grafana/ui/src/components/Forms/commonStyles';
import { focusCss } from '@grafana/ui/src/themes/mixins';
import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
export interface Props {
onChange: (value: Moment) => void;
@ -49,9 +49,9 @@ export const TimePickerInput = ({
const getWidth = () => {
if (width) {
return css`
width: ${width}px;
`;
return css({
width: `${width}px`,
});
}
return inputSizes()[size];
@ -99,90 +99,87 @@ const getStyles = (theme: GrafanaTheme2) => {
const borderColor = theme.components.input.borderColor;
return {
caretWrapper: css`
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-block;
text-align: right;
color: ${theme.colors.text.secondary};
`,
picker: css`
.rc-time-picker-panel-select {
font-size: 14px;
background-color: ${bgColor};
border-color: ${borderColor};
li {
outline-width: 2px;
&.rc-time-picker-panel-select-option-selected {
background-color: inherit;
border: 1px solid ${theme.v1.palette.orange};
border-radius: ${borderRadius};
}
caretWrapper: css({
position: 'absolute',
right: '8px',
top: '50%',
transform: 'translateY(-50%)',
display: 'inline-block',
textAlign: 'right',
color: theme.colors.text.secondary,
}),
picker: css({
'.rc-time-picker-panel-select': {
fontSize: '14px',
backgroundColor: bgColor,
borderColor: borderColor,
li: {
outlineWidth: '2px',
'&.rc-time-picker-panel-select-option-selected': {
backgroundColor: 'inherit',
border: `1px solid ${theme.v1.palette.orange}`,
borderRadius: borderRadius,
},
&:hover {
background: ${optionBgHover};
}
'&:hover': {
background: optionBgHover,
},
&.rc-time-picker-panel-select-option-disabled {
color: ${theme.colors.action.disabledText};
}
}
}
'&.rc-time-picker-panel-select-option-disabled': {
color: theme.colors.action.disabledText,
},
},
},
.rc-time-picker-panel-inner {
box-shadow: 0px 4px 4px ${menuShadowColor};
background-color: ${bgColor};
border-color: ${borderColor};
border-radius: ${borderRadius};
margin-top: 3px;
'.rc-time-picker-panel-inner': {
boxShadow: `0px 4px 4px ${menuShadowColor}`,
backgroundColor: bgColor,
borderColor: borderColor,
borderRadius: borderRadius,
marginTop: '3px',
.rc-time-picker-panel-input-wrap {
margin-right: 2px;
'.rc-time-picker-panel-input-wrap': {
marginRight: '2px',
&,
.rc-time-picker-panel-input {
background-color: ${bgColor};
padding-top: 2px;
}
}
'&, .rc-time-picker-panel-input': {
backgroundColor: bgColor,
paddingTop: '2px',
},
},
.rc-time-picker-panel-combobox {
display: flex;
}
}
`,
input: css`
.rc-time-picker-input {
background-color: ${bgColor};
border-radius: ${borderRadius};
border-color: ${borderColor};
height: ${theme.spacing(4)};
'.rc-time-picker-panel-combobox': {
display: 'flex',
},
},
}),
input: css({
'.rc-time-picker-input': {
backgroundColor: bgColor,
borderRadius: borderRadius,
borderColor: borderColor,
height: theme.spacing(4),
&:focus {
${focusCss(theme)}
}
'&:focus': getFocusStyles(theme),
&:disabled {
background-color: ${theme.colors.action.disabledBackground};
color: ${theme.colors.action.disabledText};
border: 1px solid ${theme.colors.action.disabledBackground};
&:focus {
box-shadow: none;
}
}
}
'&:disabled': {
backgroundColor: theme.colors.action.disabledBackground,
color: theme.colors.action.disabledText,
border: `1px solid ${theme.colors.action.disabledBackground}`,
'&:focus': {
boxShadow: 'none',
},
},
},
.rc-time-picker-clear {
position: absolute;
right: 20px;
top: 50%;
cursor: pointer;
overflow: hidden;
transform: translateY(-50%);
color: ${theme.colors.text.secondary};
}
`,
'.rc-time-picker-clear': {
position: 'absolute',
right: '20px',
top: '50%',
cursor: 'pointer',
overflow: 'hidden',
transform: 'translateY(-50%)',
color: theme.colors.text.secondary,
},
}),
};
};

22
public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
View File

@ -175,16 +175,16 @@ const getStyles = (theme: GrafanaTheme2) => {
maxWidth: theme.spacing(60),
marginBottom: theme.spacing(2),
}),
timezoneContainer: css`
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 12px;
`,
timezone: css`
margin-right: 5px;
`,
timezoneContainer: css({
padding: '5px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
fontSize: '12px',
}),
timezone: css({
marginRight: '5px',
}),
};
};

6
public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
View File

@ -50,8 +50,8 @@ export function AddGraphiteFunction({ funcDefs }: Props) {
function getStyles(theme: GrafanaTheme2) {
return {
button: css`
margin-right: ${theme.spacing(0.5)};
`,
button: css({
marginRight: theme.spacing(0.5),
}),
};
}

12
public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx
View File

@ -66,11 +66,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
margin: 0,
padding: 0,
}),
input: css`
margin: 0;
padding: 0;
input {
height: 25px;
input: css({
margin: 0,
padding: 0,
input: {
height: '25px',
},
`,
}),
});

6
public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
View File

@ -93,9 +93,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
padding: `0 ${theme.spacing(1)}`,
height: `${theme.v1.spacing.formInputHeight}px`,
}),
error: css`
border: 1px solid ${theme.colors.error.main};
`,
error: css({
border: `1px solid ${theme.colors.error.main}`,
}),
label: css({
padding: 0,
margin: 0,

18
public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
View File

@ -63,14 +63,14 @@ function GraphiteQueryEditorContent() {
function getStyles(theme: GrafanaTheme2) {
return {
container: css`
display: flex;
`,
visualEditor: css`
flex-grow: 1;
`,
toggleButton: css`
margin-left: ${theme.spacing(0.5)};
`,
container: css({
display: 'flex',
}),
visualEditor: css({
flexGrow: 1,
}),
toggleButton: css({
marginLeft: theme.spacing(0.5),
}),
};
}

96
public/app/plugins/datasource/graphite/components/MetricTankMetaInspector.tsx
View File

@ -131,54 +131,54 @@ const getStyles = stylesFactory(() => {
const headerBg = theme.isDark ? theme.palette.gray15 : theme.palette.gray85;
return {
metaItem: css`
background: ${background};
border: 1px solid ${borderColor};
margin-bottom: ${theme.spacing.md};
`,
metaItemHeader: css`
background: ${headerBg};
padding: ${theme.spacing.xs} ${theme.spacing.md};
font-size: ${theme.typography.size.md};
display: flex;
justify-content: space-between;
`,
metaItemBody: css`
padding: ${theme.spacing.md};
`,
stepHeading: css`
font-size: ${theme.typography.size.md};
`,
stepDescription: css`
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textWeak};
margin-bottom: ${theme.spacing.sm};
`,
step: css`
margin-bottom: ${theme.spacing.lg};
metaItem: css({
background: background,
border: `1px solid ${borderColor}`,
marginBottom: theme.spacing.md,
}),
metaItemHeader: css({
background: headerBg,
padding: `${theme.spacing.xs} ${theme.spacing.md}`,
fontSize: theme.typography.size.md,
display: 'flex',
justifyContent: 'space-between',
}),
metaItemBody: css({
padding: theme.spacing.md,
}),
stepHeading: css({
fontSize: theme.typography.size.md,
}),
stepDescription: css({
fontSize: theme.typography.size.sm,
color: theme.colors.textWeak,
marginBottom: theme.spacing.sm,
}),
step: css({
marginBottom: theme.spacing.lg,
&:last-child {
margin-bottom: 0;
}
`,
bucket: css`
display: flex;
margin-bottom: ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
`,
bucketInterval: css`
flex-grow: 0;
width: 60px;
`,
bucketRetention: css`
background: linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95});
text-align: center;
color: ${theme.palette.white};
margin-right: ${theme.spacing.md};
border-radius: ${theme.border.radius.sm};
`,
bucketRetentionActive: css`
background: linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade});
`,
'&:last-child': {
marginBottom: 0,
},
}),
bucket: css({
display: 'flex',
marginBottom: theme.spacing.sm,
borderRadius: theme.border.radius.sm,
}),
bucketInterval: css({
flexGrow: 0,
width: '60px',
}),
bucketRetention: css({
background: `linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95})`,
textAlign: 'center',
color: theme.palette.white,
marginRight: theme.spacing.md,
borderRadius: theme.border.radius.sm,
}),
bucketRetentionActive: css({
background: `linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade})`,
}),
};
});

6
public/app/plugins/datasource/graphite/components/TagsSection.tsx
View File

@ -66,8 +66,8 @@ export function TagsSection({ tags, state }: Props) {
function getStyles(theme: GrafanaTheme2) {
return {
button: css`
margin-right: ${theme.spacing(0.5)};
`,
button: css({
marginRight: theme.spacing(0.5),
}),
};
}

30
public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx
View File

@ -200,10 +200,10 @@ class UnthemedFluxQueryEditor extends PureComponent<Props> {
options={samples}
value="Sample query"
onChange={this.onSampleChange}
className={css`
margin-top: -${theme.spacing(0.5)};
margin-left: ${theme.spacing(0.5)};
`}
className={css({
marginTop: theme.spacing(-0.5),
marginLeft: theme.spacing(0.5),
})}
/>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow"></div>
@ -218,17 +218,17 @@ class UnthemedFluxQueryEditor extends PureComponent<Props> {
}
const getStyles = (theme: GrafanaTheme2) => ({
editorContainerStyles: css`
height: 200px;
max-width: 100%;
resize: vertical;
overflow: auto;
background-color: ${theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary};
padding-bottom: ${theme.spacing(1)};
`,
editorActions: css`
margin-top: 6px;
`,
editorContainerStyles: css({
height: '200px',
maxWidth: '100%',
resize: 'vertical',
overflow: 'auto',
backgroundColor: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
paddingBottom: theme.spacing(1),
}),
editorActions: css({
marginTop: '6px',
}),
});
export const FluxQueryEditor = withTheme2(UnthemedFluxQueryEditor);

22
public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx
View File

@ -118,17 +118,17 @@ class UnthemedSQLQueryEditor extends PureComponent<Props> {
}
const getStyles = (theme: GrafanaTheme2) => ({
editorContainerStyles: css`
height: 200px;
max-width: 100%;
resize: vertical;
overflow: auto;
background-color: ${theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary};
padding-bottom: ${theme.spacing(1)};
`,
editorActions: css`
margin-top: 6px;
`,
editorContainerStyles: css({
height: '200px',
maxWidth: '100%',
resize: 'vertical',
overflow: 'auto',
backgroundColor: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
paddingBottom: theme.spacing(1),
}),
editorActions: css({
marginTop: '6px',
}),
});
export const FSQLEditor = withTheme2(UnthemedSQLQueryEditor);

6
public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx
View File

@ -247,8 +247,8 @@ export const VisualInfluxQLEditor = (props: Props): JSX.Element => {
function getStyles(theme: GrafanaTheme2) {
return {
inlineLabel: css`
color: ${theme.colors.primary.text};
`,
inlineLabel: css({
color: theme.colors.primary.text,
}),
};
}

12
public/app/plugins/datasource/jaeger/CheatSheet.tsx
View File

@ -48,10 +48,10 @@ export default function CheatSheet() {
}
const getStyles = (theme: GrafanaTheme2) => ({
anchorTag: css`
color: ${theme.colors.text.link};
`,
unorderedList: css`
list-style-type: none;
`,
anchorTag: css({
color: theme.colors.text.link,
}),
unorderedList: css({
listStyleType: 'none',
}),
});

16
public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx
View File

@ -45,12 +45,12 @@ export function TraceIdTimeParams({ options, onOptionsChange }: Props) {
}
const styles = {
container: css`
label: container;
width: 100%;
`,
row: css`
label: row;
align-items: baseline;
`,
container: css({
label: 'container',
width: '100%',
}),
row: css({
label: 'row',
alignItems: 'baseline',
}),
};

118
public/app/plugins/datasource/loki/components/LokiContextUi.tsx
View File

@ -42,71 +42,71 @@ export interface LokiContextUiProps {
function getStyles(theme: GrafanaTheme2) {
return {
labels: css`
display: flex;
gap: ${theme.spacing(0.5)};
`,
wrapper: css`
display: flex;
flex-direction: column;
flex: 1;
gap: ${theme.spacing(0.5)};
position: relative;
`,
textWrapper: css`
display: flex;
align-items: center;
`,
hidden: css`
visibility: hidden;
`,
label: css`
max-width: 100%;
&:first-of-type {
margin-bottom: ${theme.spacing(2)};
}
&:not(:first-of-type) {
margin: ${theme.spacing(2)} 0;
}
`,
rawQueryContainer: css`
text-align: start;
line-break: anywhere;
margin-top: -${theme.spacing(0.25)};
margin-right: ${theme.spacing(6)};
min-height: ${theme.spacing(4)};
`,
ui: css`
background-color: ${theme.colors.background.secondary};
padding: ${theme.spacing(2)};
`,
labels: css({
display: 'flex',
gap: theme.spacing(0.5),
}),
wrapper: css({
display: 'flex',
flexDirection: 'column',
flex: 1,
gap: theme.spacing(0.5),
position: 'relative',
}),
textWrapper: css({
display: 'flex',
alignItems: 'center',
}),
hidden: css({
visibility: 'hidden',
}),
label: css({
maxWidth: '100%',
'&:first-of-type': {
marginBottom: theme.spacing(2),
},
'&:not(:first-of-type)': {
margin: theme.spacing(2, 0),
},
}),
rawQueryContainer: css({
textAlign: 'start',
lineBreak: 'anywhere',
marginTop: theme.spacing(-0.25),
marginRight: theme.spacing(6),
minHeight: theme.spacing(4),
}),
ui: css({
backgroundColor: theme.colors.background.secondary,
padding: theme.spacing(2),
}),
notification: css({
position: 'absolute',
zIndex: theme.zIndex.portal,
top: 0,
right: 0,
}),
rawQuery: css`
display: inline;
`,
queryDescription: css`
margin-left: ${theme.spacing(0.5)};
`,
iconButton: css`
position: absolute;
top: ${theme.spacing(1)};
right: ${theme.spacing(1)};
z-index: ${theme.zIndex.navbarFixed};
`,
operationsToggle: css`
margin: ${theme.spacing(1)} 0 ${theme.spacing(-1)} 0;
& > div {
margin: 0;
& > label {
padding: 0;
}
}
`,
rawQuery: css({
display: 'inline',
}),
queryDescription: css({
marginLeft: theme.spacing(0.5),
}),
iconButton: css({
position: 'absolute',
top: theme.spacing(1),
right: theme.spacing(1),
zIndex: theme.zIndex.navbarFixed,
}),
operationsToggle: css({
margin: theme.spacing(1, 0, -1, 0),
'& > div': {
margin: 0,
'& > label': {
padding: 0,
},
},
}),
};
}

152
public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
View File

@ -108,82 +108,84 @@ export function facetLabels(
}
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
background-color: ${theme.colors.background.secondary};
width: 100%;
`,
wrapperPadding: css`
padding: ${theme.spacing(2)};
`,
list: css`
margin-top: ${theme.spacing(1)};
display: flex;
flex-wrap: wrap;
max-height: 200px;
overflow: auto;
`,
section: css`
& + & {
margin: ${theme.spacing(2, 0)};
}
wrapper: css({
backgroundColor: theme.colors.background.secondary,
width: '100%',
}),
wrapperPadding: css({
padding: theme.spacing(2),
}),
list: css({
marginTop: theme.spacing(1),
display: 'flex',
flexWrap: 'wrap',
maxHeight: '200px',
overflow: 'auto',
}),
section: css({
'& + &': {
margin: theme.spacing(2, 0),
},
position: relative;
`,
footerSectionStyles: css`
padding: ${theme.spacing(1)};
background-color: ${theme.colors.background.primary};
position: sticky;
bottom: -${theme.spacing(3)}; /* offset the padding on modal */
left: 0;
`,
selector: css`
font-family: ${theme.typography.fontFamilyMonospace};
margin-bottom: ${theme.spacing(1)};
width: 100%;
`,
status: css`
margin-bottom: ${theme.spacing(1)};
color: ${theme.colors.text.secondary};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 100ms linear;
opacity: 0;
font-size: ${theme.typography.bodySmall.fontSize};
height: calc(${theme.typography.bodySmall.fontSize} + 10px);
`,
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, 1, 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: 'relative',
}),
footerSectionStyles: css({
padding: theme.spacing(1),
backgroundColor: theme.colors.background.primary,
position: 'sticky',
bottom: theme.spacing(-3) /* offset the padding on modal */,
left: 0,
}),
selector: css({
fontFamily: theme.typography.fontFamilyMonospace,
marginBottom: theme.spacing(1),
width: '100%',
}),
status: css({
marginBottom: theme.spacing(1),
color: theme.colors.text.secondary,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
transition: 'opacity 100ms linear',
},
opacity: 0,
fontSize: theme.typography.bodySmall.fontSize,
height: `calc(${theme.typography.bodySmall.fontSize} + 10px)`,
}),
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, 1, 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',
}),
});
export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, BrowserState> {

30
public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx
View File

@ -82,21 +82,21 @@ function ensureLogQL(monaco: Monaco) {
const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
return {
container: css`
border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.components.input.borderColor};
width: 100%;
.monaco-editor .suggest-widget {
min-width: 50%;
}
`,
placeholder: css`
::after {
content: '${placeholder}';
font-family: ${theme.typography.fontFamilyMonospace};
opacity: 0.3;
}
`,
container: css({
borderRadius: theme.shape.radius.default,
border: `1px solid ${theme.components.input.borderColor}`,
width: '100%',
'.monaco-editor .suggest-widget': {
minWidth: '50%',
},
}),
placeholder: css({
'::after': {
content: `'${placeholder}'`,
fontFamily: theme.typography.fontFamilyMonospace,
opacity: 0.3,
},
}),
};
};

46
public/app/plugins/datasource/loki/configuration/DerivedField.tsx
View File

@ -12,29 +12,29 @@ import { DerivedFieldConfig } from '../types';
type MatcherType = 'label' | 'regex';
const getStyles = (theme: GrafanaTheme2) => ({
row: css`
display: flex;
align-items: baseline;
`,
nameField: css`
flex: 2;
margin-right: ${theme.spacing(0.5)};
`,
regexField: css`
flex: 3;
margin-right: ${theme.spacing(0.5)};
`,
urlField: css`
flex: 1;
margin-right: ${theme.spacing(0.5)};
`,
urlDisplayLabelField: css`
flex: 1;
`,
internalLink: css`
margin-right: ${theme.spacing(1)};
`,
dataSource: css``,
row: css({
display: 'flex',
alignItems: 'baseline',
}),
nameField: css({
flex: 2,
marginRight: theme.spacing(0.5),
}),
regexField: css({
flex: 3,
marginRight: theme.spacing(0.5),
}),
urlField: css({
flex: 1,
marginRight: theme.spacing(0.5),
}),
urlDisplayLabelField: css({
flex: 1,
}),
internalLink: css({
marginRight: theme.spacing(1),
}),
dataSource: css({}),
nameMatcherField: css({
width: theme.spacing(20),
marginRight: theme.spacing(0.5),

30
public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
View File

@ -11,18 +11,18 @@ import { DebugSection } from './DebugSection';
import { DerivedField } from './DerivedField';
const getStyles = (theme: GrafanaTheme2) => ({
addButton: css`
margin-right: 10px;
`,
derivedField: css`
margin-bottom: ${theme.spacing(1)};
`,
container: css`
margin-bottom: ${theme.spacing(4)};
`,
debugSection: css`
margin-top: ${theme.spacing(4)};
`,
addButton: css({
marginRight: '10px',
}),
derivedField: css({
marginBottom: theme.spacing(1),
}),
container: css({
marginBottom: theme.spacing(4),
}),
debugSection: css({
marginTop: theme.spacing(4),
}),
});
type Props = {
@ -114,9 +114,9 @@ export const DerivedFields = ({ fields = [], onChange }: Props) => {
{showDebug && (
<div className={styles.debugSection}>
<DebugSection
className={css`
margin-bottom: 10px;
`}
className={css({
marginBottom: '10px',
})}
derivedFields={fields}
/>
</div>

12
public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
View File

@ -86,11 +86,11 @@ export const LabelBrowserModal = (props: Props) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
modal: css`
width: 85vw;
${theme.breakpoints.down('md')} {
width: 100%;
}
`,
modal: css({
width: '85vw',
[theme.breakpoints.down('md')]: {
width: '100%',
},
}),
};
};

42
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
View File

@ -46,26 +46,26 @@ export function LokiQueryCodeEditor({
const getStyles = (theme: GrafanaTheme2) => {
return {
wrapper: css`
max-width: 100%;
.gf-form {
margin-bottom: 0.5;
}
`,
buttonGroup: css`
border: 1px solid ${theme.colors.border.medium};
border-top: none;
padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
margin-bottom: ${theme.spacing(0.5)};
display: flex;
flex-grow: 1;
justify-content: end;
font-size: ${theme.typography.bodySmall.fontSize};
`,
hint: css`
color: ${theme.colors.text.disabled};
white-space: nowrap;
cursor: help;
`,
wrapper: css({
maxWidth: '100%',
'.gf-form': {
marginBottom: 0.5,
},
}),
buttonGroup: css({
border: `1px solid ${theme.colors.border.medium}`,
borderTop: 'none',
padding: theme.spacing(0.5, 0.5, 0.5, 0.5),
marginBottom: theme.spacing(0.5),
display: 'flex',
flexGrow: 1,
justifyContent: 'end',
fontSize: theme.typography.bodySmall.fontSize,
}),
hint: css({
color: theme.colors.text.disabled,
whiteSpace: 'nowrap',
cursor: 'help',
}),
};
};

32
public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx
View File

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

30
public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
View File

@ -135,20 +135,20 @@ 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)};
`,
modal: css`
width: 85vw;
${theme.breakpoints.down('md')} {
width: 100%;
}
`,
cardsContainer: css({
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
}),
spacing: css({
marginBottom: theme.spacing(1),
}),
modal: css({
width: '85vw',
[theme.breakpoints.down('md')]: {
width: '100%',
},
}),
};
};

12
public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
View File

@ -154,12 +154,12 @@ export function OpenTsdbQueryEditor({
function getStyles(theme: GrafanaTheme2) {
return {
container: css`
display: flex;
`,
toggleButton: css`
margin-left: ${theme.spacing(0.5)};
`,
container: css({
display: 'flex',
}),
toggleButton: css({
marginLeft: theme.spacing(0.5),
}),
};
}

23
public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.tsx
View File

@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import { useEffect, useRef } from 'react';
import { useLatest } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { CodeEditor, Monaco, useStyles2, monacoTypes } from '@grafana/ui';
import { ParcaDataSource } from '../datasource';
@ -125,20 +126,20 @@ function ensureParcaQL(monaco: Monaco) {
}
}
const getStyles = () => {
const getStyles = (theme: GrafanaTheme2) => {
return {
queryField: css`
flex: 1;
queryField: css({
flex: 1,
// Not exactly sure but without this the editor doe not shrink after resizing (so you can make it bigger but not
// smaller). At the same time this does not actually make the editor 100px because it has flex 1 so I assume
// this should sort of act as a flex-basis (but flex-basis does not work for this). So yeah CSS magic.
width: 100px;
`,
wrapper: css`
display: flex;
flex: 1;
border: 1px solid rgba(36, 41, 46, 0.3);
border-radius: 2px;
`,
width: '100px',
}),
wrapper: css({
display: 'flex',
flex: 1,
border: '1px solid rgba(36, 41, 46, 0.3)',
borderRadius: theme.shape.radius.default,
}),
};
};

22
public/app/plugins/panel/alertlist/AlertInstances.tsx
View File

@ -138,15 +138,15 @@ export const AlertInstances = ({
};
const getStyles = (theme: GrafanaTheme2) => ({
clickable: css`
cursor: pointer;
`,
footerRow: css`
display: flex;
flex-direction: column;
gap: ${theme.spacing(1)};
justify-content: space-between;
align-items: center;
width: 100%;
`,
clickable: css({
cursor: 'pointer',
}),
footerRow: css({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}),
});

186
public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
View File

@ -351,102 +351,102 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: Combined
}
export const getStyles = (theme: GrafanaTheme2) => ({
cardContainer: css`
padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0;
line-height: ${theme.typography.body.lineHeight};
margin-bottom: 0px;
`,
container: css`
overflow-y: auto;
height: 100%;
`,
alertRuleList: css`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
`,
alertRuleItem: css`
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: ${theme.colors.background.secondary};
padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
border-radius: ${theme.shape.radius.default};
margin-bottom: ${theme.spacing(0.5)};
cardContainer: css({
padding: theme.spacing(0.5, 0, 0.25, 0),
lineHeight: theme.typography.body.lineHeight,
marginBottom: 0,
}),
container: css({
overflowY: 'auto',
height: '100%',
}),
alertRuleList: css({
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
listStyleType: 'none',
}),
alertRuleItem: css({
display: 'flex',
alignItems: 'center',
width: '100%',
height: '100%',
background: theme.colors.background.secondary,
padding: theme.spacing(0.5, 1),
borderRadius: theme.shape.radius.default,
marginBottom: theme.spacing(0.5),
gap: ${theme.spacing(2)};
`,
alertName: css`
font-size: ${theme.typography.h6.fontSize};
font-weight: ${theme.typography.fontWeightBold};
gap: theme.spacing(2),
}),
alertName: css({
fontSize: theme.typography.h6.fontSize,
fontWeight: theme.typography.fontWeightBold,
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`,
alertNameWrapper: css`
display: flex;
flex: 1;
flex-wrap: nowrap;
flex-direction: column;
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}),
alertNameWrapper: css({
display: 'flex',
flex: 1,
flexWrap: 'nowrap',
flexDirection: 'column',
min-width: 100px;
`,
alertLabels: css`
> * {
margin-right: ${theme.spacing(0.5)};
}
`,
alertDuration: css`
font-size: ${theme.typography.bodySmall.fontSize};
`,
alertRuleItemText: css`
font-weight: ${theme.typography.fontWeightBold};
font-size: ${theme.typography.bodySmall.fontSize};
margin: 0;
`,
alertRuleItemTime: css`
color: ${theme.colors.text.secondary};
font-weight: normal;
white-space: nowrap;
`,
alertRuleItemInfo: css`
font-weight: normal;
flex-grow: 2;
display: flex;
align-items: flex-end;
`,
noAlertsMessage: css`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
`,
alertIcon: css`
margin-right: ${theme.spacing(0.5)};
`,
instanceDetails: css`
min-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`,
customGroupDetails: css`
margin-bottom: ${theme.spacing(0.5)};
`,
link: css`
word-break: break-all;
color: ${theme.colors.primary.text};
display: flex;
align-items: center;
gap: ${theme.spacing(1)};
`,
hidden: css`
display: none;
`,
minWidth: '100px',
}),
alertLabels: css({
'> *': {
marginRight: theme.spacing(0.5),
},
}),
alertDuration: css({
fontSize: theme.typography.bodySmall.fontSize,
}),
alertRuleItemText: css({
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.bodySmall.fontSize,
margin: 0,
}),
alertRuleItemTime: css({
color: theme.colors.text.secondary,
fontWeight: 'normal',
whiteSpace: 'nowrap',
}),
alertRuleItemInfo: css({
fontWeight: 'normal',
flexGrow: 2,
display: 'flex',
alignItems: 'flex-end',
}),
noAlertsMessage: css({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
}),
alertIcon: css({
marginRight: theme.spacing(0.5),
}),
instanceDetails: css({
minWidth: '1px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}),
customGroupDetails: css({
marginBottom: theme.spacing(0.5),
}),
link: css({
wordBreak: 'break-all',
color: theme.colors.primary.text,
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
}),
hidden: css({
display: 'none',
}),
});
export function UnifiedAlertListPanel(props: PanelProps<UnifiedAlertListOptions>) {

55
public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
View File

@ -139,42 +139,25 @@ const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstance
};
const getStateTagStyles = (theme: GrafanaTheme2) => ({
common: css`
width: 70px;
text-align: center;
align-self: stretch;
display: inline-block;
color: white;
border-radius: ${theme.shape.radius.default};
font-size: ${theme.typography.bodySmall.fontSize};
text-transform: capitalize;
line-height: 1.2;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
`,
icon: css`
margin-top: ${theme.spacing(2.5)};
align-self: flex-start;
`,
good: css`
color: ${theme.colors.success.main};
`,
bad: css`
color: ${theme.colors.error.main};
`,
warning: css`
color: ${theme.colors.warning.main};
`,
neutral: css`
color: ${theme.colors.secondary.main};
`,
info: css`
color: ${theme.colors.primary.main};
`,
icon: css({
marginTop: theme.spacing(2.5),
alignSelf: 'flex-start',
}),
good: css({
color: theme.colors.success.main,
}),
bad: css({
color: theme.colors.error.main,
}),
warning: css({
color: theme.colors.warning.main,
}),
neutral: css({
color: theme.colors.secondary.main,
}),
info: css({
color: theme.colors.primary.main,
}),
});
export default UngroupedModeView;

112
public/app/plugins/panel/datagrid/utils.ts
View File

@ -248,61 +248,63 @@ export const getGridCellKind = (field: Field, row: number, hasGridSelection = fa
export const getStyles = (theme: GrafanaTheme2, isResizeInProgress: boolean) => {
return {
dataEditor: css`
.dvn-scroll-inner > div:nth-child(2) {
pointer-events: none !important;
}
scrollbar-color: ${theme.colors.background.secondary} ${theme.colors.background.primary};
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: ${theme.colors.background.primary};
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
}
::-webkit-scrollbar-corner {
display: none;
}
`,
addColumnDiv: css`
width: 120px;
display: flex;
flex-direction: column;
background-color: ${theme.colors.background.primary};
button {
pointer-events: ${isResizeInProgress ? 'none' : 'auto'};
border: none;
outline: none;
height: 37px;
font-size: 20px;
background-color: ${theme.colors.background.primary};
color: ${theme.colors.text.primary};
border-right: 1px solid ${theme.components.panel.borderColor};
border-bottom: 1px solid ${theme.components.panel.borderColor};
transition: background-color 200ms;
cursor: pointer;
:hover {
background-color: ${theme.colors.background.secondary};
}
}
input {
height: 37px;
border: 1px solid ${theme.colors.primary.main};
:focus {
outline: none;
}
}
`,
renameColumnInput: css`
height: 37px;
border: 1px solid ${theme.colors.primary.main};
:focus {
outline: none;
}
`,
dataEditor: css({
'.dvn-scroll-inner > div:nth-child(2)': {
// can't avoid type assertion here due to '!important'
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
pointerEvents: 'none !important' as 'none',
},
scrollbarColor: `${theme.colors.background.secondary} ${theme.colors.background.primary}`,
'::-webkit-scrollbar': {
width: '10px',
height: '10px',
},
'::-webkit-scrollbar-track': {
background: theme.colors.background.primary,
},
'::-webkit-scrollbar-thumb': {
borderRadius: '10px',
},
'::-webkit-scrollbar-corner': {
display: 'none',
},
}),
addColumnDiv: css({
width: '120px',
display: 'flex',
flexDirection: 'column',
backgroundColor: theme.colors.background.primary,
button: {
pointerEvents: isResizeInProgress ? 'none' : 'auto',
border: 'none',
outline: 'none',
height: '37px',
fontSize: '20px',
backgroundColor: theme.colors.background.primary,
color: theme.colors.text.primary,
borderRight: `1px solid ${theme.components.panel.borderColor}`,
borderBottom: `1px solid ${theme.components.panel.borderColor}`,
transition: 'background-color 200ms',
cursor: 'pointer',
':hover': {
backgroundColor: theme.colors.background.secondary,
},
},
input: {
height: '37px',
border: `1px solid ${theme.colors.primary.main}`,
':focus': {
outline: 'none',
},
},
}),
renameColumnInput: css({
height: '37px',
border: `1px solid ${theme.colors.primary.main}`,
':focus': {
outline: 'none',
},
}),
};
};

50
public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
View File

@ -42,32 +42,32 @@ export const DocsCard = ({ card }: Props) => {
const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return {
card: css`
${cardStyle(theme, complete)}
card: css({
...cardStyle(theme, complete),
min-width: 230px;
minWidth: '230px',
${theme.breakpoints.down('md')} {
min-width: 192px;
}
`,
heading: css`
text-transform: uppercase;
color: ${complete ? theme.v1.palette.blue95 : '#FFB357'};
margin-bottom: ${theme.spacing(2)};
`,
title: css`
margin-bottom: ${theme.spacing(2)};
`,
url: css`
display: inline-block;
`,
learnUrl: css`
border-top: 1px solid ${theme.colors.border.weak};
position: absolute;
bottom: 0;
padding: 8px 16px;
width: 100%;
`,
[theme.breakpoints.down('md')]: {
minWidth: '192px',
},
}),
heading: css({
textTransform: 'uppercase',
color: complete ? theme.v1.palette.blue95 : '#FFB357',
marginBottom: theme.spacing(2),
}),
title: css({
marginBottom: theme.spacing(2),
}),
url: css({
display: 'inline-block',
}),
learnUrl: css({
borderTop: `1px solid ${theme.colors.border.weak}`,
position: 'absolute',
bottom: 0,
padding: theme.spacing(1, 2),
width: '100%',
}),
};
};

60
public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
View File

@ -45,37 +45,37 @@ const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Tutoria
const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return {
card: css`
${cardStyle(theme, complete)}
width: 460px;
min-width: 460px;
card: css({
...cardStyle(theme, complete),
width: '460px',
minWidth: '460px',
${theme.breakpoints.down('xl')} {
min-width: 368px;
}
[theme.breakpoints.down('xl')]: {
minWidth: '368px',
},
${theme.breakpoints.down('lg')} {
min-width: 272px;
}
`,
type: css`
color: ${theme.colors.primary.text};
text-transform: uppercase;
`,
heading: css`
text-transform: uppercase;
color: ${theme.colors.primary.text};
margin-bottom: ${theme.spacing(1)};
`,
cardTitle: css`
margin-bottom: ${theme.spacing(2)};
`,
info: css`
margin-bottom: ${theme.spacing(2)};
`,
status: css`
display: flex;
justify-content: flex-end;
`,
[theme.breakpoints.down('lg')]: {
minWidth: '272px',
},
}),
type: css({
color: theme.colors.primary.text,
textTransform: 'uppercase',
}),
heading: css({
textTransform: 'uppercase',
color: theme.colors.primary.text,
marginBottom: theme.spacing(1),
}),
cardTitle: css({
marginBottom: theme.spacing(2),
}),
info: css({
marginBottom: theme.spacing(2),
}),
status: css({
display: 'flex',
justifyContent: 'flex-end',
}),
};
};

50
public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
View File

@ -9,31 +9,31 @@ export const cardStyle = (theme: GrafanaTheme2, complete: boolean) => {
const borderGradient = theme.isDark ? darkThemeGradients : lightThemeGradients;
return `
background-color: ${theme.colors.background.secondary};
margin-right: ${theme.spacing(4)};
border: 1px solid ${theme.colors.border.weak};
border-bottom-left-radius: ${theme.shape.borderRadius(2)};
border-bottom-right-radius: ${theme.shape.borderRadius(2)};
position: relative;
max-height: 230px;
return {
backgroundColor: theme.colors.background.secondary,
marginRight: theme.spacing(4),
border: `1px solid ${theme.colors.border.weak}`,
borderBottomLeftRadius: theme.shape.borderRadius(2),
borderBottomRightRadius: theme.shape.borderRadius(2),
position: 'relative',
maxHeight: '230px',
${theme.breakpoints.down('xxl')} {
margin-right: ${theme.spacing(2)};
}
&::before {
display: block;
content: ' ';
position: absolute;
left: 0;
right: 0;
height: 2px;
top: 0;
background-image: ${borderGradient};
}
`;
[theme.breakpoints.down('xxl')]: {
marginRight: theme.spacing(2),
},
'&::before': {
display: 'block',
content: "' '",
position: 'absolute',
left: 0,
right: 0,
height: '2px',
top: 0,
backgroundImage: borderGradient,
},
} as const;
};
export const cardContent = css`
padding: 16px;
`;
export const cardContent = css({
padding: '16px',
});

6
public/app/plugins/panel/live/LiveChannelEditor.tsx
View File

@ -156,7 +156,7 @@ function findPathOption(paths: Array<SelectableValue<string>>, path?: string): S
}
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
dropWrap: css`
margin-bottom: ${theme.spacing(1)};
`,
dropWrap: css({
marginBottom: theme.spacing(1),
}),
}));

54
public/app/plugins/panel/live/LivePanel.tsx
View File

@ -269,33 +269,33 @@ export class LivePanel extends PureComponent<Props, State> {
}
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
statusWrap: css`
margin: auto;
position: absolute;
top: 0;
right: 0;
background: ${theme.components.panel.background};
padding: 10px;
z-index: ${theme.zIndex.modal};
`,
statusWrap: css({
margin: 'auto',
position: 'absolute',
top: 0,
right: 0,
background: theme.components.panel.background,
padding: '10px',
zIndex: theme.zIndex.modal,
}),
status: {
[LiveChannelConnectionState.Pending]: css`
border: 1px solid ${theme.v1.palette.orange};
`,
[LiveChannelConnectionState.Connected]: css`
border: 1px solid ${theme.colors.success.main};
`,
[LiveChannelConnectionState.Connecting]: css`
border: 1px solid ${theme.v1.palette.brandWarning};
`,
[LiveChannelConnectionState.Disconnected]: css`
border: 1px solid ${theme.colors.warning.main};
`,
[LiveChannelConnectionState.Shutdown]: css`
border: 1px solid ${theme.colors.error.main};
`,
[LiveChannelConnectionState.Invalid]: css`
border: 1px solid red;
`,
[LiveChannelConnectionState.Pending]: css({
border: `1px solid ${theme.v1.palette.orange}`,
}),
[LiveChannelConnectionState.Connected]: css({
border: `1px solid ${theme.colors.success.main}`,
}),
[LiveChannelConnectionState.Connecting]: css({
border: `1px solid ${theme.v1.palette.brandWarning}`,
}),
[LiveChannelConnectionState.Disconnected]: css({
border: `1px solid ${theme.colors.warning.main}`,
}),
[LiveChannelConnectionState.Shutdown]: css({
border: `1px solid ${theme.colors.error.main}`,
}),
[LiveChannelConnectionState.Invalid]: css({
border: '1px solid red',
}),
},
}));

20
public/app/plugins/panel/nodeGraph/EdgeLabel.tsx
View File

@ -10,18 +10,18 @@ import { shortenLine } from './utils';
const getStyles = (theme: GrafanaTheme2) => {
return {
mainGroup: css`
pointer-events: none;
font-size: 8px;
`,
mainGroup: css({
pointerEvents: 'none',
fontSize: '8px',
}),
background: css`
fill: ${theme.components.tooltip.background};
`,
background: css({
fill: theme.components.tooltip.background,
}),
text: css`
fill: ${theme.components.tooltip.text};
`,
text: css({
fill: theme.components.tooltip.text,
}),
};
};

16
public/app/plugins/panel/nodeGraph/Legend.tsx
View File

@ -10,15 +10,15 @@ import { NodeDatum } from './types';
function getStyles() {
return {
item: css`
label: LegendItem;
flex-grow: 0;
`,
item: css({
label: 'LegendItem',
flexGrow: 0,
}),
legend: css`
label: Legend;
pointer-events: all;
`,
legend: css({
label: 'Legend',
pointerEvents: 'all',
}),
};
}

32
public/app/plugins/panel/nodeGraph/Marker.tsx
View File

@ -9,23 +9,23 @@ import { NodesMarker } from './types';
const nodeR = 40;
const getStyles = (theme: GrafanaTheme2) => ({
mainGroup: css`
cursor: pointer;
font-size: 10px;
`,
mainGroup: css({
cursor: 'pointer',
fontSize: '10px',
}),
mainCircle: css`
fill: ${theme.components.panel.background};
stroke: ${theme.colors.border.strong};
`,
text: css`
width: 50px;
height: 50px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
`,
mainCircle: css({
fill: theme.components.panel.background,
stroke: theme.colors.border.strong,
}),
text: css({
width: '50px',
height: '50px',
textAlign: 'center',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}),
});
export const Marker = memo(function Marker(props: {

96
public/app/plugins/panel/nodeGraph/Node.tsx
View File

@ -14,61 +14,63 @@ export const nodeR = 40;
export const highlightedNodeColor = '#a00';
const getStyles = (theme: GrafanaTheme2, hovering: HoverState) => ({
mainGroup: css`
cursor: pointer;
font-size: 10px;
transition: opacity 300ms;
opacity: ${hovering === 'inactive' ? 0.5 : 1};
`,
mainGroup: css({
cursor: 'pointer',
fontSize: '10px',
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
transition: 'opacity 300ms',
},
opacity: hovering === 'inactive' ? 0.5 : 1,
}),
mainCircle: css`
fill: ${theme.components.panel.background};
`,
mainCircle: css({
fill: theme.components.panel.background,
}),
filledCircle: css`
fill: ${highlightedNodeColor};
`,
filledCircle: css({
fill: highlightedNodeColor,
}),
hoverCircle: css`
opacity: 0.5;
fill: transparent;
stroke: ${theme.colors.primary.text};
`,
hoverCircle: css({
opacity: 0.5,
fill: 'transparent',
stroke: theme.colors.primary.text,
}),
text: css`
fill: ${theme.colors.text.primary};
pointer-events: none;
`,
text: css({
fill: theme.colors.text.primary,
pointerEvents: 'none',
}),
titleText: css`
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background-color: ${tinycolor(theme.colors.background.primary).setAlpha(0.6).toHex8String()};
width: 140px;
`,
titleText: css({
textAlign: 'center',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
backgroundColor: tinycolor(theme.colors.background.primary).setAlpha(0.6).toHex8String(),
width: '140px',
}),
statsText: css`
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 70px;
`,
statsText: css({
textAlign: 'center',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
width: '70px',
}),
textHovering: css`
width: 200px;
& span {
background-color: ${tinycolor(theme.colors.background.primary).setAlpha(0.8).toHex8String()};
}
`,
textHovering: css({
width: '200px',
'& span': {
backgroundColor: tinycolor(theme.colors.background.primary).setAlpha(0.8).toHex8String(),
},
}),
clickTarget: css`
fill: none;
stroke: none;
pointer-events: fill;
`,
clickTarget: css({
fill: 'none',
stroke: 'none',
pointerEvents: 'fill',
}),
});
export const computeNodeCircumferenceStrokeWidth = (nodeRadius: number) => Math.ceil(nodeRadius * 0.075);

144
public/app/plugins/panel/nodeGraph/NodeGraph.tsx
View File

@ -23,83 +23,83 @@ import { useZoom } from './useZoom';
import { processNodes, Bounds, findConnectedNodesForEdge, findConnectedNodesForNode } from './utils';
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
label: wrapper;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
`,
wrapper: css({
label: 'wrapper',
height: '100%',
width: '100%',
overflow: 'hidden',
position: 'relative',
}),
svg: css`
label: svg;
height: 100%;
width: 100%;
overflow: visible;
font-size: 10px;
cursor: move;
`,
svg: css({
label: 'svg',
height: '100%',
width: '100%',
overflow: 'visible',
fontSize: '10px',
cursor: 'move',
}),
svgPanning: css`
label: svgPanning;
user-select: none;
`,
svgPanning: css({
label: 'svgPanning',
userSelect: 'none',
}),
noDataMsg: css`
height: 100%;
width: 100%;
display: grid;
place-items: center;
font-size: ${theme.typography.h4.fontSize};
color: ${theme.colors.text.secondary};
`,
noDataMsg: css({
height: '100%',
width: '100%',
display: 'grid',
placeItems: 'center',
fontSize: theme.typography.h4.fontSize,
color: theme.colors.text.secondary,
}),
mainGroup: css`
label: mainGroup;
will-change: transform;
`,
mainGroup: css({
label: 'mainGroup',
willChange: 'transform',
}),
viewControls: css`
label: viewControls;
position: absolute;
left: 2px;
bottom: 3px;
right: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
pointer-events: none;
`,
legend: css`
label: legend;
background: ${theme.colors.background.secondary};
box-shadow: ${theme.shadows.z1};
padding-bottom: 5px;
margin-right: 10px;
`,
viewControlsWrapper: css`
margin-left: auto;
`,
alert: css`
label: alert;
padding: 5px 8px;
font-size: 10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
border-radius: ${theme.shape.radius.default};
align-items: center;
position: absolute;
top: 0;
right: 0;
background: ${theme.colors.warning.main};
color: ${theme.colors.warning.contrastText};
`,
loadingWrapper: css`
label: loadingWrapper;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
`,
viewControls: css({
label: 'viewControls',
position: 'absolute',
left: '2px',
bottom: '3px',
right: 0,
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'space-between',
pointerEvents: 'none',
}),
legend: css({
label: 'legend',
background: theme.colors.background.secondary,
boxShadow: theme.shadows.z1,
paddingBottom: '5px',
marginRight: '10px',
}),
viewControlsWrapper: css({
marginLeft: 'auto',
}),
alert: css({
label: 'alert',
padding: '5px 8px',
fontSize: '10px',
textShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
borderRadius: theme.shape.radius.default,
alignItems: 'center',
position: 'absolute',
top: 0,
right: 0,
background: theme.colors.warning.main,
color: theme.colors.warning.contrastText,
}),
loadingWrapper: css({
label: 'loadingWrapper',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}),
});
// Limits the number of visible nodes, mainly for performance reasons. Nodes above the limit are accessible by expanding

8
public/app/plugins/panel/nodeGraph/ViewControls.tsx
View File

@ -5,10 +5,10 @@ import { Button, HorizontalGroup, useStyles2, VerticalGroup } from '@grafana/ui'
function getStyles() {
return {
wrapper: css`
label: wrapper;
pointer-events: all;
`,
wrapper: css({
label: 'wrapper',
pointerEvents: 'all',
}),
};
}

Some files were not shown because too many files have changed in this diff Show More