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: Convert styles to use emotion object syntax (#94989)

Browse Source 
* convert to use emotion object syntax

* missed one

* review comments

* set back to 0 and disable lint rule
This commit is contained in:
Ashley Harrison 2024-10-23 15:25:28 +01:00 committed by GitHub
parent 3f47621065
commit b23b6d228a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
79 changed files with 2057 additions and 2476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

537
.betterer.results
View File

@ -860,8 +860,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.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/core/components/AppNotifications/AppNotificationItem.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -916,9 +915,6 @@ exports[`better eslint`] = {
"public/app/core/components/NestedFolderPicker/NestedFolderList.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/core/components/PageNotFound/EntityNotFound.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@ -927,42 +923,17 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/core/components/PanelTypeFilter/PanelTypeFilter.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/core/components/PluginHelp/PluginHelp.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/core/components/QueryOperationRow/OperationRowHelp.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/core/components/QueryOperationRow/QueryOperationRow.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/core/components/QueryOperationRow/QueryOperationRowHeader.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/core/components/RolePicker/BuiltinRoleSelector.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/core/components/RolePicker/RolePickerInput.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/core/components/RolePicker/RolePickerMenu.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -973,9 +944,6 @@ exports[`better eslint`] = {
"public/app/core/components/RolePicker/RolePickerSubMenu.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/core/components/RolePicker/ValueContainer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/core/components/Select/OldFolderPicker.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
@ -999,34 +967,13 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "1"],
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
],
"public/app/core/components/Upgrade/ProBadge.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/core/components/Upgrade/UpgradeBox.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 />", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"],
[0, 0, 0, "Styles should be written using objects.", "15"],
[0, 0, 0, "Styles should be written using objects.", "16"],
[0, 0, 0, "Styles should be written using objects.", "17"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "18"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "19"],
[0, 0, 0, "Styles should be written using objects.", "20"],
[0, 0, 0, "Styles should be written using objects.", "21"],
[0, 0, 0, "Styles should be written using objects.", "22"],
[0, 0, 0, "Styles should be written using objects.", "23"]
[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"]
],
"public/app/core/components/help/HelpModal.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -1185,11 +1132,6 @@ exports[`better eslint`] = {
"public/app/features/admin/AdminSettings.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/admin/LicenseChrome.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/admin/ServerStats.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@ -1200,8 +1142,8 @@ exports[`better eslint`] = {
],
"public/app/features/admin/UpgradePage.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, "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, "No untranslated strings. Wrap text with <Trans />", "5"],
@ -1209,12 +1151,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
[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, "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, "No untranslated strings. Wrap text with <Trans />", "10"]
],
"public/app/features/admin/UserCreatePage.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -1233,15 +1170,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -1265,18 +1194,14 @@ 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, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/features/admin/UserProfile.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, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "Styles should be written using objects.", "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, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/features/admin/UserSessions.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -2279,9 +2204,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, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/features/api-keys/MigrateToServiceAccountsCard.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -2289,10 +2212,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, "No untranslated strings. Wrap text with <Trans />", "5"]
],
"public/app/features/auth-config/AuthDrawer.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -2364,10 +2284,8 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.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 />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
[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/connections/components/ConnectionsRedirectNotice/index.ts:5381": [
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
@ -2390,10 +2308,6 @@ exports[`better eslint`] = {
"public/app/features/connections/tabs/ConnectData/CardGrid/index.tsx:5381": [
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
],
"public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.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/connections/tabs/ConnectData/CategoryHeader/index.tsx:5381": [
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
],
@ -2401,21 +2315,12 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/connections/tabs/ConnectData/NoAccessModal/NoAccessModal.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, "No untranslated strings. Wrap text with <Trans />", "9"],
[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, "No untranslated strings. Wrap text with <Trans />", "14"]
[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"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
],
"public/app/features/connections/tabs/ConnectData/NoAccessModal/index.tsx:5381": [
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
@ -2426,28 +2331,9 @@ exports[`better eslint`] = {
"public/app/features/connections/tabs/ConnectData/index.tsx:5381": [
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
],
"public/app/features/correlations/CorrelationsPage.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/correlations/Forms/AddCorrelationForm.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/correlations/Forms/ConfigureCorrelationBasicInfoForm.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/correlations/Forms/ConfigureCorrelationSourceForm.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/correlations/Forms/ConfigureCorrelationTargetForm.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "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.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"]
],
"public/app/features/correlations/components/EmptyCorrelationsCTA.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -3234,9 +3120,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"],
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"]
],
"public/app/features/datasources/components/BasicSettings.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/datasources/components/ButtonRow.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@ -3275,9 +3158,6 @@ exports[`better eslint`] = {
"public/app/features/datasources/components/DataSourceTypeCard.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"public/app/features/datasources/components/DataSourceTypeCardList.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/datasources/components/DataSourcesListCard.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
@ -3289,38 +3169,6 @@ exports[`better eslint`] = {
"public/app/features/datasources/components/NewDataSource.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/datasources/components/picker/DataSourceCard.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/features/datasources/components/picker/DataSourceList.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/datasources/components/picker/DataSourceLogo.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/datasources/components/picker/DataSourceModal.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/features/datasources/components/picker/DataSourcePicker.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
@ -3352,57 +3200,24 @@ 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/dimensions/editors/ColorDimensionEditor.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/dimensions/editors/FileUploader.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/dimensions/editors/FolderPickerTab.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/dimensions/editors/ResourceCards.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, "Do not use any type assertions.", "0"]
],
"public/app/features/dimensions/editors/ResourceDimensionEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/dimensions/editors/ResourcePicker.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/dimensions/editors/ResourcePickerPopover.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, "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"]
],
"public/app/features/dimensions/editors/ScalarDimensionEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/dimensions/editors/ScaleDimensionEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/dimensions/editors/TextDimensionEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
@ -3412,20 +3227,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "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"]
],
"public/app/features/dimensions/editors/URLPickerTab.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, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
@ -3445,8 +3247,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, "No untranslated strings. Wrap text with <Trans />", "5"]
],
"public/app/features/dimensions/editors/index.ts:5381": [
[0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"],
@ -3511,15 +3312,10 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/explore/Logs/LiveLogs.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, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
[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"]
],
"public/app/features/explore/Logs/Logs.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -3529,32 +3325,17 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/Logs/LogsMetaRow.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "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 />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/explore/Logs/LogsNavigation.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"]
],
"public/app/features/explore/Logs/LogsNavigationPages.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/Logs/LogsSamplePanel.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, "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, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/explore/Logs/LogsTableEmptyFields.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -3567,24 +3348,9 @@ exports[`better eslint`] = {
"public/app/features/explore/Logs/LogsTableNavField.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/Logs/LogsVolumePanel.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/explore/Logs/LogsVolumePanelList.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/explore/Logs/utils/LogsCrossFadeTransition.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, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/explore/MetaInfoText.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -3595,95 +3361,23 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/explore/NodeGraph/NodeGraphContainer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/explore/PrometheusListView/ItemLabels.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/explore/PrometheusListView/ItemValues.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, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/explore/PrometheusListView/RawListContainer.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, "No untranslated strings. Wrap text with <Trans />", "6"]
],
"public/app/features/explore/PrometheusListView/RawListItem.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, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/PrometheusListView/RawListItemAttributes.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, "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, "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"]
],
"public/app/features/explore/QueryLibrary/QueryTemplatesTable/QueryDescriptionCell.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/RichHistory/RichHistoryCard.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/features/explore/RichHistory/RichHistoryQueriesTab.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/features/explore/RichHistory/RichHistorySettingsTab.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/explore/RichHistory/RichHistoryStarredTab.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, "No untranslated strings. Wrap text with <Trans />", "7"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/SupplementaryResultError.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -3862,12 +3556,9 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "1"]
],
"public/app/features/expressions/components/Condition.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[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 />", "2"]
],
"public/app/features/expressions/components/Math.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -3879,14 +3570,7 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"],
[0, 0, 0, "Styles should be written using objects.", "15"],
[0, 0, 0, "Styles should be written using objects.", "16"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"]
],
"public/app/features/expressions/components/Threshold.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -3899,13 +3583,10 @@ exports[`better eslint`] = {
"public/app/features/geo/editor/GazetteerPathEditor.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/geo/editor/locationModeEditor.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/geo/gazetteer/gazetteer.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -3925,9 +3606,6 @@ exports[`better eslint`] = {
"public/app/features/gops/configuration-tracker/components/ProgressBar.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/inspector/DetailText.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/inspector/InspectDataOptions.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"],
@ -3950,18 +3628,16 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/inspector/InspectStatsTab.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"public/app/features/inspector/QueryInspector.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, "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, "Use data-testid for E2E selectors instead of aria-label", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "7"]
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "6"]
],
"public/app/features/invites/InviteeRow.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -3989,21 +3665,14 @@ exports[`better eslint`] = {
],
"public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.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, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx:5381": [
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.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, "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/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@ -4014,14 +3683,6 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
],
"public/app/features/library-panels/styles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
],
"public/app/features/live/centrifuge/LiveDataStream.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -4039,92 +3700,20 @@ exports[`better eslint`] = {
"public/app/features/logs/components/InfiniteScroll.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/logs/components/LoadingIndicator.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/logs/components/LogDetails.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"]
],
"public/app/features/logs/components/LogDetailsRow.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/features/logs/components/LogLabelStats.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, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
],
"public/app/features/logs/components/LogLabelStatsRow.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"]
],
"public/app/features/logs/components/LogLabels.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/logs/components/LogRowMessageDisplayedFields.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
[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"]
],
"public/app/features/logs/components/LogRows.tsx:5381": [
[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/logs/components/getLogRowStyles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"],
[0, 0, 0, "Styles should be written using objects.", "15"],
[0, 0, 0, "Styles should be written using objects.", "16"],
[0, 0, 0, "Styles should be written using objects.", "17"],
[0, 0, 0, "Styles should be written using objects.", "18"],
[0, 0, 0, "Styles should be written using objects.", "19"],
[0, 0, 0, "Styles should be written using objects.", "20"],
[0, 0, 0, "Styles should be written using objects.", "21"],
[0, 0, 0, "Styles should be written using objects.", "22"],
[0, 0, 0, "Styles should be written using objects.", "23"],
[0, 0, 0, "Styles should be written using objects.", "24"],
[0, 0, 0, "Styles should be written using objects.", "25"],
[0, 0, 0, "Styles should be written using objects.", "26"],
[0, 0, 0, "Styles should be written using objects.", "27"],
[0, 0, 0, "Styles should be written using objects.", "28"],
[0, 0, 0, "Styles should be written using objects.", "29"],
[0, 0, 0, "Styles should be written using objects.", "30"],
[0, 0, 0, "Styles should be written using objects.", "31"],
[0, 0, 0, "Styles should be written using objects.", "32"],
[0, 0, 0, "Styles should be written using objects.", "33"],
[0, 0, 0, "Styles should be written using objects.", "34"]
],
"public/app/features/logs/components/log-context/LogContextButtons.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],

6
public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
View File

@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { config } from '@grafana/runtime';
import { getInputStyles, Icon, Text, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
import { focusCss } from '@grafana/ui/src/themes/mixins';
import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
import { t } from 'app/core/internationalization';
import { getModKey } from 'app/core/utils/browser';
@ -108,9 +108,7 @@ const getStyles = (theme: GrafanaTheme2) => {
boxShadow: 'unset',
},
'&:focus-visible': css`
${focusCss(theme)}
`,
'&:focus-visible': getFocusStyles(theme),
},
]),

6
public/app/core/components/NestedFolderPicker/Trigger.tsx
View File

@ -5,7 +5,7 @@ import Skeleton from 'react-loading-skeleton';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, getInputStyles, useTheme2, Text } from '@grafana/ui';
import { focusCss, getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
import { Trans, t } from 'app/core/internationalization';
interface TriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@ -112,9 +112,7 @@ const getStyles = (theme: GrafanaTheme2, invalid = false) => {
boxShadow: 'unset',
},
'&:focus-visible': css`
${focusCss(theme)}
`,
'&:focus-visible': getFocusStyles(theme),
alignItems: 'center',
display: 'flex',
flexWrap: 'nowrap',

26
public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
View File

@ -73,18 +73,18 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight, isWidg
function getStyles(theme: GrafanaTheme2) {
return {
container: css`
label: container;
position: relative;
min-width: 180px;
flex-grow: 1;
`,
clear: css`
label: clear;
font-size: ${theme.spacing(1.5)};
position: absolute;
top: -${theme.spacing(4.5)};
right: 0;
`,
container: css({
label: 'container',
position: 'relative',
minWidth: '180px',
flexGrow: 1,
}),
clear: css({
label: 'clear',
fontSize: theme.spacing(1.5),
position: 'absolute',
top: theme.spacing(-4.5),
right: 0,
}),
};
}

16
public/app/core/components/QueryOperationRow/OperationRowHelp.tsx
View File

@ -39,13 +39,13 @@ const getStyles = (theme: GrafanaTheme2, borderTop?: string) => {
const themeBackgroundColor = theme.colors.background.secondary;
return {
wrapper: css`
padding: ${theme.spacing(2)};
border: 2px solid ${themeBackgroundColor};
border-top: ${borderTop ? borderTop + themeBackgroundColor : 'none'};
border-radius: 0 0 ${borderRadius} ${borderRadius};
position: relative;
top: -4px;
`,
wrapper: css({
padding: theme.spacing(2),
border: `2px solid ${themeBackgroundColor}`,
borderTop: borderTop ? borderTop + themeBackgroundColor : 'none',
borderRadius: `0 0 ${borderRadius} ${borderRadius}`,
position: 'relative',
top: '-4px',
}),
};
};

14
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -160,13 +160,13 @@ export function QueryOperationRow({
const getQueryOperationRowStyles = (theme: GrafanaTheme2) => {
return {
wrapper: css`
margin-bottom: ${theme.spacing(2)};
`,
content: css`
margin-top: ${theme.spacing(0.5)};
margin-left: ${theme.spacing(3)};
`,
wrapper: css({
marginBottom: theme.spacing(2),
}),
content: css({
marginTop: theme.spacing(0.5),
marginLeft: theme.spacing(3),
}),
};
};

103
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -91,59 +91,58 @@ export const QueryOperationRowHeader = ({
};
const getStyles = (theme: GrafanaTheme2) => ({
header: css`
label: Header;
padding: ${theme.spacing(0.5, 0.5)};
border-radius: ${theme.shape.radius.default};
background: ${theme.colors.background.secondary};
min-height: ${theme.spacing(4)};
display: grid;
grid-template-columns: minmax(100px, max-content) min-content;
align-items: center;
justify-content: space-between;
white-space: nowrap;
header: css({
label: 'Header',
padding: theme.spacing(0.5, 0.5),
borderRadius: theme.shape.radius.default,
background: theme.colors.background.secondary,
minHeight: theme.spacing(4),
display: 'grid',
gridTemplateColumns: 'minmax(100px, max-content) min-content',
alignItems: 'center',
justifyContent: 'space-between',
whiteSpace: 'nowrap',
&:focus {
outline: none;
}
`,
column: css`
label: Column;
display: flex;
align-items: center;
overflow: hidden;
`,
dragIcon: css`
cursor: grab;
color: ${theme.colors.text.disabled};
margin: ${theme.spacing(0, 0.5)};
&:hover {
color: ${theme.colors.text};
}
`,
collapseIcon: css`
margin-left: ${theme.spacing(0.5)};
color: ${theme.colors.text.disabled};
}
`,
titleWrapper: css`
display: flex;
align-items: center;
flex-grow: 1;
cursor: pointer;
overflow: hidden;
margin-right: ${theme.spacing(0.5)};
`,
title: css`
font-weight: ${theme.typography.fontWeightBold};
color: ${theme.colors.text.link};
margin-left: ${theme.spacing(0.5)};
overflow: hidden;
text-overflow: ellipsis;
`,
disabled: css`
color: ${theme.colors.text.disabled};
`,
'&:focus': {
outline: 'none',
},
}),
column: css({
label: 'Column',
display: 'flex',
alignItems: 'center',
overflow: 'hidden',
}),
dragIcon: css({
cursor: 'grab',
color: theme.colors.text.disabled,
margin: theme.spacing(0, 0.5),
'&:hover': {
color: theme.colors.text.primary,
},
}),
collapseIcon: css({
marginLeft: theme.spacing(0.5),
color: theme.colors.text.disabled,
}),
titleWrapper: css({
display: 'flex',
alignItems: 'center',
flexGrow: 1,
cursor: 'pointer',
overflow: 'hidden',
marginRight: theme.spacing(0.5),
}),
title: css({
fontWeight: theme.typography.fontWeightBold,
color: theme.colors.text.link,
marginLeft: theme.spacing(0.5),
overflow: 'hidden',
textOverflow: 'ellipsis',
}),
disabled: css({
color: theme.colors.text.disabled,
}),
});
QueryOperationRowHeader.displayName = 'QueryOperationRowHeader';

60
public/app/core/components/RolePicker/RolePickerInput.tsx
View File

@ -3,7 +3,8 @@ import { FormEvent, HTMLProps, useEffect, useRef } from 'react';
import * as React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2, getInputStyles, sharedInputStyle, styleMixins, Tooltip, Icon, Spinner } from '@grafana/ui';
import { useStyles2, getInputStyles, sharedInputStyle, Tooltip, Icon, Spinner } from '@grafana/ui';
import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
import { Role } from '../../../types';
@ -144,10 +145,7 @@ const getRolePickerInputStyles = (
wrapper: cx(
styles.wrapper,
sharedInputStyle(theme, invalid),
focused &&
css`
${styleMixins.focusCss(theme.v1)}
`,
focused && css(getFocusStyles(theme)),
disabled && styles.inputDisabled,
css({
minWidth: width || ROLE_PICKER_WIDTH + 'px',
@ -170,32 +168,32 @@ const getRolePickerInputStyles = (
cursor: 'default',
}),
withPrefix &&
css`
padding-left: 0;
`
css({
paddingLeft: 0,
})
),
input: cx(
sharedInputStyle(theme, invalid),
css`
max-width: 120px;
border: none;
cursor: ${focused ? 'default' : 'pointer'};
`
css({
maxWidth: '120px',
border: 'none',
cursor: focused ? 'default' : 'pointer',
})
),
suffix: styles.suffix,
dropdownIndicator: css`
cursor: pointer;
`,
selectedRoles: css`
display: flex;
align-items: center;
cursor: ${disabled ? 'not-allowed' : 'pointer'};
`,
tooltip: css`
p {
margin-bottom: ${theme.spacing(0.5)};
}
`,
dropdownIndicator: css({
cursor: 'pointer',
}),
selectedRoles: css({
display: 'flex',
alignItems: 'center',
cursor: disabled ? 'not-allowed' : 'pointer',
}),
tooltip: css({
p: {
marginBottom: theme.spacing(0.5),
},
}),
spinner: css({
display: 'flex',
flexGrow: 1,
@ -205,9 +203,9 @@ const getRolePickerInputStyles = (
};
const getTooltipStyles = (theme: GrafanaTheme2) => ({
tooltip: css`
p {
margin-bottom: ${theme.spacing(0.5)};
}
`,
tooltip: css({
p: {
marginBottom: theme.spacing(0.5),
},
}),
});

14
public/app/core/components/RolePicker/ValueContainer.tsx
View File

@ -27,14 +27,14 @@ const getStyles = (theme: GrafanaTheme2) => {
container: cx(
prefix,
multiValueContainer,
css`
position: relative;
padding: ${theme.spacing(0.5, 1, 0.5, 1)};
css({
position: 'relative',
padding: theme.spacing(0.5, 1, 0.5, 1),
svg {
margin-right: ${theme.spacing(0.5)};
}
`
svg: {
marginRight: theme.spacing(0.5),
},
})
),
};
};

18
public/app/core/components/Upgrade/ProBadge.tsx
View File

@ -29,14 +29,14 @@ export const ProBadge = ({ text = 'PRO', className, experimentId, eventVariant =
const getStyles = (theme: GrafanaTheme2) => {
return {
badge: css`
margin-left: ${theme.spacing(1.25)};
border-radius: ${theme.shape.borderRadius(5)};
background-color: ${theme.colors.success.main};
padding: ${theme.spacing(0.25, 0.75)};
color: white; // use the same color for both themes
font-weight: ${theme.typography.fontWeightMedium};
font-size: ${theme.typography.pxToRem(10)};
`,
badge: css({
marginLeft: theme.spacing(1.25),
borderRadius: theme.shape.borderRadius(5),
backgroundColor: theme.colors.success.main,
padding: theme.spacing(0.25, 0.75),
color: 'white', // use the same color for both themes
fontWeight: theme.typography.fontWeightMedium,
fontSize: theme.typography.pxToRem(10),
}),
};
};

200
public/app/core/components/Upgrade/UpgradeBox.tsx
View File

@ -58,48 +58,48 @@ const getUpgradeBoxStyles = (theme: GrafanaTheme2, size: ComponentSize) => {
const fontBase = size === 'md' ? 'body' : 'bodySmall';
return {
box: css`
display: flex;
align-items: center;
position: relative;
border-radius: ${borderRadius};
background: ${theme.colors.success.transparent};
padding: ${theme.spacing(2)};
color: ${theme.colors.success.text};
font-size: ${theme.typography[fontBase].fontSize};
text-align: left;
line-height: 16px;
margin: ${theme.spacing(0, 'auto', 3, 'auto')};
max-width: ${theme.breakpoints.values.xxl}px;
width: 100%;
`,
inner: css`
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
`,
text: css`
margin: 0;
`,
button: css`
background-color: ${theme.colors.success.main};
font-weight: ${theme.typography.fontWeightLight};
color: white;
box: css({
display: 'flex',
alignItems: 'center',
position: 'relative',
borderRadius: borderRadius,
background: theme.colors.success.transparent,
padding: theme.spacing(2),
color: theme.colors.success.text,
fontSize: theme.typography[fontBase].fontSize,
textAlign: 'left',
lineHeight: '16px',
margin: theme.spacing(0, 'auto', 3, 'auto'),
maxWidth: `${theme.breakpoints.values.xxl}px`,
width: '100%',
}),
inner: css({
display: 'flex',
alignItems: 'center',
width: '100%',
justifyContent: 'space-between',
}),
text: css({
margin: 0,
}),
button: css({
backgroundColor: theme.colors.success.main,
fontWeight: theme.typography.fontWeightLight,
color: 'white',
&:hover {
background-color: ${theme.colors.success.main};
}
'&:hover': {
backgroundColor: theme.colors.success.main,
},
&:focus-visible {
box-shadow: none;
color: ${theme.colors.text.primary};
outline: 2px solid ${theme.colors.primary.main};
}
`,
icon: css`
margin: ${theme.spacing(0.5, 1, 0.5, 0.5)};
`,
'&:focus-visible': {
boxShadow: 'none',
color: theme.colors.text.primary,
outline: `2px solid ${theme.colors.primary.main}`,
},
}),
icon: css({
margin: theme.spacing(0.5, 1, 0.5, 0.5),
}),
};
};
@ -165,50 +165,50 @@ export const UpgradeContent = ({
const getUpgradeContentStyles = (theme: GrafanaTheme2) => {
return {
container: css`
display: flex;
justify-content: space-between;
`,
content: css`
width: 45%;
margin-right: ${theme.spacing(4)};
`,
media: css`
width: 55%;
container: css({
display: 'flex',
justifyContent: 'space-between',
}),
content: css({
width: '45%',
marginRight: theme.spacing(4),
}),
media: css({
width: '55%',
img {
width: 100%;
}
`,
title: css`
color: ${theme.colors.text.maxContrast};
`,
description: css`
color: ${theme.colors.text.primary};
font-weight: ${theme.typography.fontWeightLight};
`,
list: css`
list-style: none;
margin: ${theme.spacing(4, 0, 2, 0)};
img: {
width: '100%',
},
}),
title: css({
color: theme.colors.text.maxContrast,
}),
description: css({
color: theme.colors.text.primary,
fontWeight: theme.typography.fontWeightLight,
}),
list: css({
listStyle: 'none',
margin: theme.spacing(4, 0, 2, 0),
li {
display: flex;
align-items: flex-start;
color: ${theme.colors.text.primary};
padding: ${theme.spacing(1, 0)};
}
`,
icon: css`
color: ${theme.colors.success.main};
margin-right: ${theme.spacing(1)};
`,
link: css`
margin-left: ${theme.spacing(2)};
`,
caption: css`
font-weight: ${theme.typography.fontWeightLight};
margin: ${theme.spacing(1, 0, 0)};
`,
li: {
display: 'flex',
alignItems: 'flex-start',
color: theme.colors.text.primary,
padding: theme.spacing(1, 0),
},
}),
icon: css({
color: theme.colors.success.main,
marginRight: theme.spacing(1),
}),
link: css({
marginLeft: theme.spacing(2),
}),
caption: css({
fontWeight: theme.typography.fontWeightLight,
margin: theme.spacing(1, 0, 0),
}),
};
};
@ -235,25 +235,25 @@ export const UpgradeContentVertical = ({
const getContentVerticalStyles = (theme: GrafanaTheme2) => {
return {
container: css`
overflow: auto;
height: 100%;
`,
title: css`
color: ${theme.colors.text.maxContrast};
`,
description: css`
color: ${theme.colors.text.primary};
font-weight: ${theme.typography.fontWeightLight};
`,
media: css`
width: 100%;
margin-top: ${theme.spacing(2)};
container: css({
overflow: 'auto',
height: '100%',
}),
title: css({
color: theme.colors.text.maxContrast,
}),
description: css({
color: theme.colors.text.primary,
fontWeight: theme.typography.fontWeightLight,
}),
media: css({
width: '100%',
marginTop: theme.spacing(2),
img {
width: 100%;
}
`,
img: {
width: '100%',
},
}),
};
};

30
public/app/features/admin/LicenseChrome.tsx
View File

@ -11,21 +11,21 @@ const getStyles = (theme: GrafanaTheme2) => {
const footerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray6;
return {
container: css`
padding: 36px 79px;
background: ${theme.components.panel.background};
`,
footer: css`
text-align: center;
padding: 16px;
background: ${footerBg};
`,
header: css`
height: 137px;
padding: 40px 0 0 79px;
position: relative;
background: url('${backgroundUrl}') right;
`,
container: css({
padding: '36px 79px',
background: theme.components.panel.background,
}),
footer: css({
textAlign: 'center',
padding: theme.spacing(2),
background: footerBg,
}),
header: css({
height: '137px',
padding: '40px 0 0 79px',
position: 'relative',
background: `url('${backgroundUrl}') right`,
}),
};
};

66
public/app/features/admin/UpgradePage.tsx
View File

@ -54,19 +54,19 @@ export const UpgradeInfo = ({ editionNotice }: UpgradeInfoProps) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
column: css`
display: grid;
grid-template-columns: 100%;
column-gap: 20px;
row-gap: 40px;
column: css({
display: 'grid',
gridTemplateColumns: '100%',
columnGap: '20px',
rowGap: '40px',
@media (min-width: 1050px) {
grid-template-columns: 50% 50%;
}
`,
title: css`
margin: ${theme.spacing(4)} 0;
`,
'@media (min-width: 1050px)': {
gridTemplateColumns: '50% 50%',
},
}),
title: css({
margin: theme.spacing(4, 0),
}),
};
};
@ -183,15 +183,15 @@ interface ListProps {
}
const List = ({ children, nested }: React.PropsWithChildren<ListProps>) => {
const listStyle = css`
display: flex;
flex-direction: column;
padding-top: 8px;
const listStyle = css({
display: 'flex',
flexDirection: 'column',
paddingTop: '8px',
> div {
margin-bottom: ${nested ? 0 : 8}px;
}
`;
'> div': {
marginBottom: `${nested ? 0 : 8}px`,
},
});
return <div className={listStyle}>{children}</div>;
};
@ -203,20 +203,20 @@ interface ItemProps {
const Item = ({ children, title, image }: React.PropsWithChildren<ItemProps>) => {
const imageUrl = image ? image : 'public/img/licensing/checkmark.svg';
const itemStyle = css`
display: flex;
const itemStyle = css({
display: 'flex',
> img {
display: block;
height: 22px;
flex-grow: 0;
padding-right: 12px;
}
`;
const titleStyle = css`
font-weight: 500;
line-height: 1.7;
`;
'> img': {
display: 'block',
height: '22px',
flexGrow: 0,
paddingRight: '12px',
},
});
const titleStyle = css({
fontWeight: 500,
lineHeight: 1.7,
});
return (
<div className={itemStyle}>

74
public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx
View File

@ -104,42 +104,42 @@ export const DashboardsListModalButton = ({ email }: { email: string }) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
modal: css`
width: 590px;
`,
loading: css`
display: flex;
justify-content: center;
`,
listItem: css`
display: flex;
flex-direction: column;
gap: ${theme.spacing(0.5)};
`,
divider: css`
margin: ${theme.spacing(1.5, 0)};
color: ${theme.colors.text.secondary};
`,
urlsContainer: css`
display: flex;
gap: ${theme.spacing(0.5)};
modal: css({
width: '590px',
}),
loading: css({
display: 'flex',
justifyContent: 'center',
}),
listItem: css({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(0.5),
}),
divider: css({
margin: theme.spacing(1.5, 0),
color: theme.colors.text.secondary,
}),
urlsContainer: css({
display: 'flex',
gap: theme.spacing(0.5),
${theme.breakpoints.down('sm')} {
flex-direction: column;
}
`,
urlsDivider: css`
color: ${theme.colors.text.secondary};
${theme.breakpoints.down('sm')} {
display: none;
}
`,
dashboardTitle: css`
font-size: ${theme.typography.body.fontSize};
font-weight: ${theme.typography.fontWeightBold};
margin-bottom: 0;
`,
url: css`
font-size: ${theme.typography.body.fontSize};
`,
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
}),
urlsDivider: css({
color: theme.colors.text.secondary,
[theme.breakpoints.down('sm')]: {
display: 'none',
},
}),
dashboardTitle: css({
fontSize: theme.typography.body.fontSize,
fontWeight: theme.typography.fontWeightBold,
marginBottom: 0,
}),
url: css({
fontSize: theme.typography.body.fontSize,
}),
});

12
public/app/features/admin/UserPermissions.tsx
View File

@ -89,10 +89,10 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, lockMessage, o
}
const getTooltipStyles = (theme: GrafanaTheme2) => ({
lockMessageClass: css`
display: flex;
justify-content: flex-end;
font-style: italic;
margin-right: ${theme.spacing(0.6)};
`,
lockMessageClass: css({
display: 'flex',
justifyContent: 'flex-end',
fontStyle: 'italic',
marginRight: theme.spacing(0.6),
}),
});

20
public/app/features/admin/UserProfile.tsx
View File

@ -244,9 +244,9 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
const { value } = this.state;
const labelClass = cx(
'width-16',
css`
font-weight: 500;
`
css({
fontWeight: 500,
})
);
if (locked) {
@ -296,15 +296,15 @@ interface LockedRowProps {
}
export const LockedRow = ({ label, value, lockMessage }: LockedRowProps) => {
const lockMessageClass = css`
font-style: italic;
margin-right: 0.6rem;
`;
const lockMessageClass = css({
fontStyle: 'italic',
marginRight: '0.6rem',
});
const labelClass = cx(
'width-16',
css`
font-weight: 500;
`
css({
fontWeight: 500,
})
);
return (

13
public/app/features/api-keys/ApiKeysTable.tsx
View File

@ -85,10 +85,11 @@ function formatDate(expiration: string | undefined, timeZone: TimeZone): string
}
const getStyles = (theme: GrafanaTheme2) => ({
tableRow: (isExpired: boolean) => css`
color: ${isExpired ? theme.colors.text.secondary : theme.colors.text.primary};
`,
tooltipContainer: css`
margin-left: ${theme.spacing(1)};
`,
tableRow: (isExpired: boolean) =>
css({
color: isExpired ? theme.colors.text.secondary : theme.colors.text.primary,
}),
tooltipContainer: css({
marginLeft: theme.spacing(1),
}),
});

20
public/app/features/api-keys/MigrateToServiceAccountsCard.tsx
View File

@ -74,14 +74,14 @@ export const MigrateToServiceAccountsCard = ({ onMigrate, apikeysCount, disabled
};
export const getStyles = (theme: GrafanaTheme2) => ({
text: css`
margin-bottom: ${theme.spacing(2)};
`,
actionRow: css`
display: flex;
align-items: center;
`,
actionButton: css`
margin-right: ${theme.spacing(2)};
`,
text: css({
marginBottom: theme.spacing(2),
}),
actionRow: css({
display: 'flex',
alignItems: 'center',
}),
actionButton: css({
marginRight: theme.spacing(2),
}),
});

22
public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
View File

@ -9,17 +9,17 @@ import { AccessControlAction } from '../../../../types';
import { ROUTES } from '../../constants';
const getStyles = (theme: GrafanaTheme2) => ({
alertContent: css`
display: flex;
flex-direction: row;
padding: 0;
justify-content: space-between;
align-items: center;
`,
alertParagraph: css`
margin: 0 ${theme.spacing(1)} 0 0;
line-height: ${theme.spacing(theme.components.height.sm)};
`,
alertContent: css({
display: 'flex',
flexDirection: 'row',
padding: 0,
justifyContent: 'space-between',
alignItems: 'center',
}),
alertParagraph: css({
margin: theme.spacing(0, 1, 0, 0),
lineHeight: theme.spacing(theme.components.height.sm),
}),
});
export function ConnectionsRedirectNotice() {

18
public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
View File

@ -4,15 +4,15 @@ import { GrafanaTheme2, IconName } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
const getStyles = (theme: GrafanaTheme2) => ({
categoryHeader: css`
align-items: center;
display: flex;
margin-bottom: 24px;
`,
categoryLabel: css`
margin-bottom: 0px;
margin-left: 8px;
`,
categoryHeader: css({
alignItems: 'center',
display: 'flex',
marginBottom: theme.spacing(3),
}),
categoryLabel: css({
marginBottom: 0,
marginLeft: theme.spacing(1),
}),
});
type Props = { iconName: IconName; label: string };

82
public/app/features/connections/tabs/ConnectData/NoAccessModal/NoAccessModal.tsx
View File

@ -6,48 +6,48 @@ import { useStyles2, Modal, Icon, Button } from '@grafana/ui';
import { type CardGridItem } from '../CardGrid';
const getStyles = (theme: GrafanaTheme2) => ({
modal: css`
width: 500px;
`,
modalContent: css`
overflow: visible;
color: ${theme.colors.text.secondary};
modal: css({
width: '500px',
}),
modalContent: css({
overflow: 'visible',
color: theme.colors.text.secondary,
a {
color: ${theme.colors.text.link};
}
`,
description: css`
margin-bottom: ${theme.spacing(2)};
`,
bottomSection: css`
display: flex;
border-top: 1px solid ${theme.colors.border.weak};
padding-top: ${theme.spacing(3)};
margin-top: ${theme.spacing(3)};
`,
actionsSection: css`
display: flex;
justify-content: end;
margin-top: ${theme.spacing(3)};
`,
warningIcon: css`
color: ${theme.colors.warning.main};
padding-right: ${theme.spacing()};
margin-top: ${theme.spacing(0.25)};
`,
header: css`
display: flex;
align-items: center;
`,
headerTitle: css`
margin: 0;
`,
headerLogo: css`
margin-right: ${theme.spacing(2)};
width: 32px;
height: 32px;
`,
a: {
color: theme.colors.text.link,
},
}),
description: css({
marginBottom: theme.spacing(2),
}),
bottomSection: css({
display: 'flex',
borderTop: `1px solid ${theme.colors.border.weak}`,
paddingTop: theme.spacing(3),
marginTop: theme.spacing(3),
}),
actionsSection: css({
display: 'flex',
justifyContent: 'end',
marginTop: theme.spacing(3),
}),
warningIcon: css({
color: theme.colors.warning.main,
paddingRight: theme.spacing(),
marginTop: theme.spacing(0.25),
}),
header: css({
display: 'flex',
alignItems: 'center',
}),
headerTitle: css({
margin: 0,
}),
headerLogo: css({
marginRight: theme.spacing(2),
width: '32px',
height: '32px',
}),
});
export type NoAccessModalProps = {

32
public/app/features/correlations/CorrelationsPage.tsx
View File

@ -35,10 +35,10 @@ const sortDatasource: SortByFn<CorrelationData> = (a, b, column) =>
const isCorrelationsReadOnly = (correlation: CorrelationData) => correlation.provisioned;
const loaderWrapper = css`
display: flex;
justify-content: center;
`;
const loaderWrapper = css({
display: 'flex',
justifyContent: 'center',
});
export default function CorrelationsPage() {
const navModel = useNavModel('correlations');
@ -255,15 +255,15 @@ function ExpendedRow({ correlation: { source, ...correlation }, readOnly, onUpda
}
const getDatasourceCellStyles = (theme: GrafanaTheme2) => ({
root: css`
display: flex;
align-items: center;
`,
dsLogo: css`
margin-right: ${theme.spacing()};
height: 16px;
width: 16px;
`,
root: css({
display: 'flex',
alignItems: 'center',
}),
dsLogo: css({
marginRight: theme.spacing(),
height: '16px',
width: '16px',
}),
});
const DataSourceCell = memo(
@ -286,9 +286,9 @@ const DataSourceCell = memo(
}
);
const noWrap = css`
white-space: nowrap;
`;
const noWrap = css({
whiteSpace: 'nowrap',
});
const InfoCell = memo(
function InfoCell({ ...props }: CellProps<CorrelationData, void>) {

16
public/app/features/correlations/Forms/AddCorrelationForm.tsx
View File

@ -16,14 +16,14 @@ import { CorrelationsFormContextProvider } from './correlationsFormContext';
import { FormDTO } from './types';
const getStyles = (theme: GrafanaTheme2) => ({
panelContainer: css`
position: relative;
padding: ${theme.spacing(1)};
margin-bottom: ${theme.spacing(2)};
`,
infoBox: css`
margin-top: 20px; // give space for close button
`,
panelContainer: css({
position: 'relative',
padding: theme.spacing(1),
marginBottom: theme.spacing(2),
}),
infoBox: css({
marginTop: '20px', // give space for close button
}),
});
interface Props {

12
public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx
View File

@ -10,12 +10,12 @@ import { FormDTO } from './types';
import { getInputId } from './utils';
const getStyles = (theme: GrafanaTheme2) => ({
label: css`
max-width: ${theme.spacing(80)};
`,
description: css`
max-width: ${theme.spacing(80)};
`,
label: css({
maxWidth: theme.spacing(80),
}),
description: css({
maxWidth: theme.spacing(80),
}),
});
export const ConfigureCorrelationBasicInfoForm = () => {

14
public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
View File

@ -15,13 +15,13 @@ import { FormDTO } from './types';
import { getInputId } from './utils';
const getStyles = (theme: GrafanaTheme2) => ({
label: css`
max-width: ${theme.spacing(80)};
`,
variable: css`
font-family: ${theme.typography.fontFamilyMonospace};
font-weight: ${theme.typography.fontWeightMedium};
`,
label: css({
maxWidth: theme.spacing(80),
}),
variable: css({
fontFamily: theme.typography.fontFamilyMonospace,
fontWeight: theme.typography.fontWeightMedium,
}),
});
const getFormText = (queryType: string, dataSourceName?: string) => {

6
public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx
View File

@ -32,9 +32,9 @@ export const CORR_TYPES_SELECT: Record<CorrelationType, CorrelationTypeOptions>
};
const getStyles = (theme: GrafanaTheme2) => ({
typeSelect: css`
max-width: ${theme.spacing(40)};
`,
typeSelect: css({
maxWidth: theme.spacing(40),
}),
});
export const ConfigureCorrelationTargetForm = () => {

6
public/app/features/datasources/components/BasicSettings.tsx
View File

@ -70,7 +70,7 @@ export function AlertingEnabled({ enabled }: { enabled: boolean }) {
}
const getStyles = (theme: GrafanaTheme2) => ({
badge: css`
margin-bottom: ${theme.spacing(2)};
`,
badge: css({
marginBottom: theme.spacing(2),
}),
});

10
public/app/features/datasources/components/DataSourceTypeCardList.tsx
View File

@ -22,11 +22,11 @@ export function DataSourceTypeCardList({ dataSourcePlugins, onClickDataSourceTyp
items={dataSourcePlugins}
getItemKey={(item) => item.id.toString()}
renderItem={(item) => <DataSourceTypeCard dataSourcePlugin={item} onClick={() => onClickDataSourceType(item)} />}
className={css`
> li {
margin-bottom: 2px;
}
`}
className={css({
'> li': {
marginBottom: '2px',
},
})}
/>
);
}

129
public/app/features/datasources/components/picker/DataSourceCard.tsx
View File

@ -39,71 +39,74 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
// Get styles for the component
function getStyles(theme: GrafanaTheme2, builtIn = false) {
return {
card: css`
cursor: pointer;
background-color: ${theme.colors.background.primary};
border-bottom: 1px solid ${theme.colors.border.weak};
card: css({
cursor: 'pointer',
backgroundColor: theme.colors.background.primary,
borderBottom: `1px solid ${theme.colors.border.weak}`,
// Move to list component
margin-bottom: 0;
border-radius: 0;
padding: ${theme.spacing(1)};
`,
heading: css`
width: 100%;
overflow: hidden;
marginBottom: 0,
// set this to 0 to override the default card radius
// also need to disable our eslint rule
// eslint-disable-next-line @grafana/no-border-radius-literal
borderRadius: 0,
padding: theme.spacing(1),
}),
heading: css({
width: '100%',
overflow: 'hidden',
// This is needed to enable ellipsis when text overlfows
> button {
width: 100%;
}
`,
headingContent: css`
color: ${theme.colors.text.secondary};
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
justify-content: space-between;
`,
logo: css`
width: 32px;
height: 32px;
padding: ${theme.spacing(0, 1)};
display: flex;
align-items: center;
'> button': {
width: '100%',
},
}),
headingContent: css({
color: theme.colors.text.secondary,
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
justifyContent: 'space-between',
}),
logo: css({
width: '32px',
height: '32px',
padding: theme.spacing(0, 1),
display: 'flex',
alignItems: 'center',
> img {
max-height: 100%;
min-width: 24px;
filter: invert(${builtIn && theme.isLight ? 1 : 0});
}
`,
name: css`
color: ${theme.colors.text.primary};
display: flex;
gap: ${theme.spacing(2)};
`,
type: css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
`,
separator: css`
margin: 0 ${theme.spacing(1)};
color: ${theme.colors.border.weak};
`,
selected: css`
background-color: ${theme.colors.background.secondary};
`,
meta: css`
display: block;
overflow-wrap: unset;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
`,
'> img': {
maxHeight: '100%',
minWidth: '24px',
filter: `invert(${builtIn && theme.isLight ? 1 : 0})`,
},
}),
name: css({
color: theme.colors.text.primary,
display: 'flex',
gap: theme.spacing(2),
}),
type: css({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
}),
separator: css({
margin: theme.spacing(0, 1),
color: theme.colors.border.weak,
}),
selected: css({
backgroundColor: theme.colors.background.secondary,
}),
meta: css({
display: 'block',
overflowWrap: 'unset',
whiteSpace: 'nowrap',
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
}),
};
}

40
public/app/features/datasources/components/picker/DataSourceList.tsx
View File

@ -115,15 +115,15 @@ function EmptyState({ className, onClickCTA }: { className?: string; onClickCTA?
function getEmptyStateStyles(theme: GrafanaTheme2) {
return {
container: css`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`,
message: css`
margin-bottom: ${theme.spacing(3)};
`,
container: css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}),
message: css({
marginBottom: theme.spacing(3),
}),
};
}
@ -138,16 +138,16 @@ function getDataSourceVariableIDs() {
function getStyles(theme: GrafanaTheme2, selectedItemCssSelector: string) {
return {
container: css`
display: flex;
flex-direction: column;
${selectedItemCssSelector} {
background-color: ${theme.colors.background.secondary};
}
`,
emptyState: css`
height: 100%;
flex: 1;
`,
container: css({
display: 'flex',
flexDirection: 'column',
[`${selectedItemCssSelector}`]: {
backgroundColor: theme.colors.background.secondary,
},
}),
emptyState: css({
height: '100%',
flex: 1,
}),
};
}

10
public/app/features/datasources/components/picker/DataSourceLogo.tsx
View File

@ -32,10 +32,10 @@ export function DataSourceLogoPlaceHolder() {
function getStyles(theme: GrafanaTheme2, builtIn = false) {
return {
pickerDSLogo: css`
height: 20px;
width: 20px;
filter: invert(${builtIn && theme.isLight ? 1 : 0});
`,
pickerDSLogo: css({
height: '20px',
width: '20px',
filter: `invert(${builtIn && theme.isLight ? 1 : 0})`,
}),
};
}

168
public/app/features/datasources/components/picker/DataSourceModal.tsx
View File

@ -235,95 +235,95 @@ export function DataSourceModal({
function getDataSourceModalStyles(theme: GrafanaTheme2) {
return {
modal: css`
width: 80%;
height: 80%;
max-width: 1200px;
max-height: 900px;
modal: css({
width: '80%',
height: '80%',
maxWidth: '1200px',
maxHeight: '900px',
${theme.breakpoints.down('md')} {
width: 100%;
}
`,
modalContent: css`
display: flex;
flex-direction: row;
height: 100%;
[theme.breakpoints.down('md')]: {
width: '100%',
},
}),
modalContent: css({
display: 'flex',
flexDirection: 'row',
height: '100%',
${theme.breakpoints.down('md')} {
flex-direction: column;
}
`,
leftColumn: css`
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
padding-right: ${theme.spacing(4)};
border-right: 1px solid ${theme.colors.border.weak};
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
},
}),
leftColumn: css({
display: 'flex',
flexDirection: 'column',
width: '50%',
height: '100%',
paddingRight: theme.spacing(4),
borderRight: `1px solid ${theme.colors.border.weak}`,
${theme.breakpoints.down('md')} {
width: 100%;
border-right: 0;
padding-right: 0;
flex: 1;
overflow-y: auto;
}
`,
rightColumn: css`
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
justify-items: space-evenly;
align-items: stretch;
padding-left: ${theme.spacing(4)};
[theme.breakpoints.down('md')]: {
width: '100%',
borderRight: 0,
paddingRight: 0,
flex: 1,
overflowY: 'auto',
},
}),
rightColumn: css({
display: 'flex',
flexDirection: 'column',
width: '50%',
height: '100%',
justifyItems: 'space-evenly',
alignItems: 'stretch',
paddingLeft: theme.spacing(4),
${theme.breakpoints.down('md')} {
width: 100%;
padding-left: 0;
flex: 0;
}
`,
builtInDataSources: css`
flex: 1 1;
margin-bottom: ${theme.spacing(4)};
[theme.breakpoints.down('md')]: {
width: '100%',
paddingLeft: 0,
flex: 0,
},
}),
builtInDataSources: css({
flex: '1 1',
marginBottom: theme.spacing(4),
${theme.breakpoints.down('md')} {
flex: 0;
}
`,
builtInDataSourcesList: css`
${theme.breakpoints.down('md')} {
display: none;
margin-bottom: 0;
}
[theme.breakpoints.down('md')]: {
flex: 0,
},
}),
builtInDataSourcesList: css({
[theme.breakpoints.down('md')]: {
display: 'none',
marginBottom: 0,
},
margin-bottom: ${theme.spacing(4)};
`,
appendBuiltInDataSourcesList: css`
${theme.breakpoints.up('md')} {
display: none;
}
`,
newDSSection: css`
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
align-items: center;
`,
newDSDescription: css`
flex: 1 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: ${theme.colors.text.secondary};
`,
searchInput: css`
width: 100%;
min-height: 32px;
margin-bottom: ${theme.spacing(1)};
`,
marginBottom: theme.spacing(4),
}),
appendBuiltInDataSourcesList: css({
[theme.breakpoints.up('md')]: {
display: 'none',
},
}),
newDSSection: css({
display: 'flex',
flexDirection: 'row',
width: '100%',
justifyContent: 'space-between',
alignItems: 'center',
}),
newDSDescription: css({
flex: '1 0',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
color: theme.colors.text.secondary,
}),
searchInput: css({
width: '100%',
minHeight: '32px',
marginBottom: theme.spacing(1),
}),
};
}

18
public/app/features/dimensions/editors/ColorDimensionEditor.tsx
View File

@ -86,13 +86,13 @@ export const ColorDimensionEditor = (props: StandardEditorProps<ColorDimensionCo
};
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
`,
picker: css`
padding-left: 8px;
`,
container: css({
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'flex-end',
alignItems: 'center',
}),
picker: css({
paddingLeft: theme.spacing(1),
}),
});

96
public/app/features/dimensions/editors/FileUploader.tsx
View File

@ -81,53 +81,53 @@ export const FileUploader = ({ mediaType, setFormData, setUpload, error }: Props
function getStyles(theme: GrafanaTheme2, isDragActive?: boolean) {
return {
container: css`
display: flex;
flex-direction: column;
width: 100%;
`,
dropzone: css`
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
padding: ${theme.spacing(6)};
border-radius: 2px;
border: 2px dashed ${theme.colors.border.medium};
background-color: ${isDragActive ? theme.colors.background.secondary : theme.colors.background.primary};
cursor: pointer;
`,
iconWrapper: css`
display: flex;
flex-direction: column;
align-items: center;
`,
acceptMargin: css`
margin: ${theme.spacing(2, 0, 1)};
`,
small: css`
color: ${theme.colors.text.secondary};
margin-bottom: ${theme.spacing(2)};
`,
iconContainer: css`
display: flex;
flex-direction: column;
width: 80%;
align-items: center;
align-self: center;
`,
iconPreview: css`
width: 238px;
height: 198px;
border: 1px solid ${theme.colors.border.medium};
display: flex;
align-items: center;
justify-content: center;
`,
img: css`
width: 147px;
height: 147px;
fill: ${theme.colors.text.primary};
`,
container: css({
display: 'flex',
flexDirection: 'column',
width: '100%',
}),
dropzone: css({
display: 'flex',
flex: 1,
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(6),
borderRadius: theme.shape.radius.default,
border: `2px dashed ${theme.colors.border.medium}`,
backgroundColor: isDragActive ? theme.colors.background.secondary : theme.colors.background.primary,
cursor: 'pointer',
}),
iconWrapper: css({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}),
acceptMargin: css({
margin: theme.spacing(2, 0, 1),
}),
small: css({
color: theme.colors.text.secondary,
marginBottom: theme.spacing(2),
}),
iconContainer: css({
display: 'flex',
flexDirection: 'column',
width: '80%',
alignItems: 'center',
alignSelf: 'center',
}),
iconPreview: css({
width: '238px',
height: '198px',
border: `1px solid ${theme.colors.border.medium}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}),
img: css({
width: '147px',
height: '147px',
fill: theme.colors.text.primary,
}),
};
}

12
public/app/features/dimensions/editors/FolderPickerTab.tsx
View File

@ -123,10 +123,10 @@ export const FolderPickerTab = (props: Props) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
cardsWrapper: css`
height: 30vh;
min-height: 50px;
margin-top: 5px;
max-width: 680px;
`,
cardsWrapper: css({
height: '30vh',
minHeight: '50px',
marginTop: '5px',
maxWidth: '680px',
}),
});

84
public/app/features/dimensions/editors/ResourceCards.tsx
View File

@ -93,46 +93,46 @@ export const ResourceCards = (props: CardProps) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
card: css`
display: inline-block;
width: 90px;
height: 90px;
margin: 0.75rem;
margin-left: 15px;
text-align: center;
cursor: pointer;
position: relative;
background-color: transparent;
border: 1px solid transparent;
border-radius: 8px;
padding-top: 6px;
:hover {
border-color: ${theme.colors.action.hover};
box-shadow: ${theme.shadows.z2};
}
`,
selected: css`
border: 2px solid ${theme.colors.primary.main};
:hover {
border-color: ${theme.colors.primary.main};
}
`,
img: css`
width: 40px;
height: 40px;
object-fit: cover;
vertical-align: middle;
fill: ${theme.colors.text.primary};
`,
text: css`
color: ${theme.colors.text.primary};
white-space: nowrap;
font-size: 12px;
text-overflow: ellipsis;
display: block;
overflow: hidden;
`,
grid: css`
border: 1px solid ${theme.colors.border.medium};
`,
card: css({
display: 'inline-block',
width: '90px',
height: '90px',
margin: '0.75rem',
marginLeft: '15px',
textAlign: 'center',
cursor: 'pointer',
position: 'relative',
backgroundColor: 'transparent',
border: '1px solid transparent',
borderRadius: theme.shape.radius.default,
paddingTop: '6px',
':hover': {
borderColor: theme.colors.action.hover,
boxShadow: theme.shadows.z2,
},
}),
selected: css({
border: `2px solid ${theme.colors.primary.main}`,
':hover': {
borderColor: theme.colors.primary.main,
},
}),
img: css({
width: '40px',
height: '40px',
objectFit: 'cover',
verticalAlign: 'middle',
fill: theme.colors.text.primary,
}),
text: css({
color: theme.colors.text.primary,
whiteSpace: 'nowrap',
fontSize: '12px',
textOverflow: 'ellipsis',
display: 'block',
overflow: 'hidden',
}),
grid: css({
border: `1px solid ${theme.colors.border.medium}`,
}),
});

24
public/app/features/dimensions/editors/ResourcePicker.tsx
View File

@ -138,16 +138,16 @@ function getDisplayName(src?: string, name?: string): string | undefined {
}
const getStyles = (theme: GrafanaTheme2) => ({
pointer: css`
cursor: pointer;
input[readonly] {
cursor: pointer;
}
`,
icon: css`
vertical-align: middle;
display: inline-block;
fill: currentColor;
width: 25px;
`,
pointer: css({
cursor: 'pointer',
'input[readonly]': {
cursor: 'pointer',
},
}),
icon: css({
verticalAlign: 'middle',
display: 'inline-block',
fill: 'currentColor',
width: '25px',
}),
});

82
public/app/features/dimensions/editors/ResourcePickerPopover.tsx
View File

@ -143,49 +143,49 @@ export const ResourcePickerPopover = (props: Props) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
resourcePickerPopover: css`
border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z3};
background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak};
`,
resourcePickerPopoverTab: css`
width: 50%;
text-align: center;
padding: ${theme.spacing(1, 0)};
background: ${theme.colors.background.secondary};
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
cursor: pointer;
border: none;
resourcePickerPopover: css({
borderRadius: theme.shape.radius.default,
boxShadow: theme.shadows.z3,
background: theme.colors.background.primary,
border: `1px solid ${theme.colors.border.weak}`,
}),
resourcePickerPopoverTab: css({
width: '50%',
textAlign: 'center',
padding: theme.spacing(1, 0),
background: theme.colors.background.secondary,
color: theme.colors.text.secondary,
fontSize: theme.typography.bodySmall.fontSize,
cursor: 'pointer',
border: 'none',
&:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
'&:focus:not(:focus-visible)': {
outline: 'none',
boxShadow: 'none',
},
:focus-visible {
position: relative;
}
`,
resourcePickerPopoverActiveTab: css`
color: ${theme.colors.text.primary};
font-weight: ${theme.typography.fontWeightMedium};
background: ${theme.colors.background.primary};
`,
resourcePickerPopoverContent: css`
width: 315px;
font-size: ${theme.typography.bodySmall.fontSize};
min-height: 184px;
padding: ${theme.spacing(1)};
display: flex;
flex-direction: column;
`,
resourcePickerPopoverTabs: css`
display: flex;
width: 100%;
border-radius: ${theme.shape.radius.default} ${theme.shape.radius.default} 0 0;
`,
':focus-visible': {
position: 'relative',
},
}),
resourcePickerPopoverActiveTab: css({
color: theme.colors.text.primary,
fontWeight: theme.typography.fontWeightMedium,
background: theme.colors.background.primary,
}),
resourcePickerPopoverContent: css({
width: '315px',
fontSize: theme.typography.bodySmall.fontSize,
minHeight: '184px',
padding: theme.spacing(1),
display: 'flex',
flexDirection: 'column',
}),
resourcePickerPopoverTabs: css({
display: 'flex',
width: '100%',
borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,
}),
buttonRow: css({
display: 'flex',
justifyContent: 'center',

6
public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
View File

@ -111,7 +111,7 @@ export const ScalarDimensionEditor = ({ value, context, onChange, item }: Props)
};
const getStyles = (theme: GrafanaTheme2) => ({
range: css`
padding-top: 8px;
`,
range: css({
paddingTop: theme.spacing(1),
}),
});

6
public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
View File

@ -131,7 +131,7 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
};
const getStyles = (theme: GrafanaTheme2) => ({
range: css`
padding-top: 8px;
`,
range: css({
paddingTop: theme.spacing(1),
}),
});

74
public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -290,44 +290,44 @@ interface ThresholdStyles {
const getStyles = stylesFactory((theme: GrafanaTheme2): ThresholdStyles => {
return {
wrapper: css`
display: flex;
flex-direction: column;
`,
thresholds: css`
display: flex;
flex-direction: column;
margin-bottom: ${theme.spacing(2)};
`,
item: css`
margin-bottom: ${theme.spacing(1)};
wrapper: css({
display: 'flex',
flexDirection: 'column',
}),
thresholds: css({
display: 'flex',
flexDirection: 'column',
marginBottom: theme.spacing(2),
}),
item: css({
marginBottom: theme.spacing(1),
&:last-child {
margin-bottom: 0;
}
`,
colorPicker: css`
padding: 0 ${theme.spacing(1)};
`,
addButton: css`
margin-bottom: ${theme.spacing(1)};
`,
percentIcon: css`
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
`,
inputPrefix: css`
display: flex;
align-items: center;
`,
trashIcon: css`
color: ${theme.colors.text.secondary};
cursor: pointer;
margin-right: 0;
'&:last-child': {
marginBottom: 0,
},
}),
colorPicker: css({
padding: theme.spacing(0, 1),
}),
addButton: css({
marginBottom: theme.spacing(1),
}),
percentIcon: css({
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
}),
inputPrefix: css({
display: 'flex',
alignItems: 'center',
}),
trashIcon: css({
color: theme.colors.text.secondary,
cursor: 'pointer',
marginRight: 0,
&:hover {
color: ${theme.colors.text};
}
`,
'&:hover': {
color: theme.colors.text.primary,
},
}),
};
});

40
public/app/features/dimensions/editors/URLPickerTab.tsx
View File

@ -46,24 +46,24 @@ export const URLPickerTab = (props: Props) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
iconContainer: css`
display: flex;
flex-direction: column;
width: 80%;
align-items: center;
align-self: center;
`,
iconPreview: css`
width: 238px;
height: 198px;
border: 1px solid ${theme.colors.border.medium};
display: flex;
align-items: center;
justify-content: center;
`,
img: css`
width: 147px;
height: 147px;
fill: ${theme.colors.text.primary};
`,
iconContainer: css({
display: 'flex',
flexDirection: 'column',
width: '80%',
alignItems: 'center',
alignSelf: 'center',
}),
iconPreview: css({
width: '238px',
height: '198px',
border: `1px solid ${theme.colors.border.medium}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}),
img: css({
width: '147px',
height: '147px',
fill: theme.colors.text.primary,
}),
});

10
public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
View File

@ -148,11 +148,11 @@ export function ValueMappingsEditorModal({ value, onChange, onClose, showIconPic
}
export const getStyles = (theme: GrafanaTheme2) => ({
tableWrap: css`
max-height: calc(80vh - 170px);
min-height: 40px;
overflow: auto;
`,
tableWrap: css({
maxHeight: 'calc(80vh - 170px)',
minHeight: '40px',
overflow: 'auto',
}),
editTable: css({
width: '100%',

85
public/app/features/explore/Logs/LiveLogs.tsx
View File

@ -1,4 +1,4 @@
import { css, cx } from '@emotion/css';
import { css, cx, keyframes } from '@emotion/css';
import { PureComponent } from 'react';
import * as React from 'react';
import tinycolor from 'tinycolor2';
@ -13,47 +13,52 @@ import { sortLogRows } from '../../logs/utils';
import { ElapsedTime } from '../ElapsedTime';
import { filterLogRowsByIndex } from '../state/utils';
const getStyles = (theme: GrafanaTheme2) => ({
logsRowsLive: css`
label: logs-rows-live;
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
display: flex;
flex-flow: column nowrap;
height: 60vh;
overflow-y: scroll;
:first-child {
margin-top: auto !important;
}
`,
logsRowFade: css`
label: logs-row-fresh;
color: ${theme.colors.text};
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
animation: fade 1s ease-out 1s 1 normal forwards;
@keyframes fade {
from {
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
}
to {
background-color: transparent;
}
}
`,
logsRowsIndicator: css`
font-size: ${theme.typography.h6.fontSize};
padding-top: ${theme.spacing(1)};
display: flex;
align-items: center;
`,
button: css`
margin-right: ${theme.spacing(1)};
`,
fullWidth: css`
width: 100%;
`,
const getStyles = (theme: GrafanaTheme2) => {
const fade = keyframes({
from: {
backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
},
to: {
backgroundColor: 'transparent',
},
});
return {
logsRowsLive: css({
label: 'logs-rows-live',
fontFamily: theme.typography.fontFamilyMonospace,
fontSize: theme.typography.bodySmall.fontSize,
display: 'flex',
flexFlow: 'column nowrap',
height: '60vh',
overflowY: 'scroll',
':first-child': {
marginTop: 'auto !important',
},
}),
logsRowFade: css({
label: 'logs-row-fresh',
color: theme.colors.text.primary,
backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
animation: `${fade} 1s ease-out 1s 1 normal forwards`,
},
}),
logsRowsIndicator: css({
fontSize: theme.typography.h6.fontSize,
paddingTop: theme.spacing(1),
display: 'flex',
alignItems: 'center',
}),
button: css({
marginRight: theme.spacing(1),
}),
fullWidth: css({
width: '100%',
}),
};
};
export interface Props extends Themeable2 {
logRows?: LogRowModel[];
timeZone: TimeZone;

10
public/app/features/explore/Logs/LogsMetaRow.tsx
View File

@ -28,11 +28,11 @@ import { MetaInfoText, MetaItemProps } from '../MetaInfoText';
import { getLogsExtractFields } from './LogsTable';
const getStyles = () => ({
metaContainer: css`
flex: 1;
display: flex;
flex-wrap: wrap;
`,
metaContainer: css({
flex: 1,
display: 'flex',
flexWrap: 'wrap',
}),
});
export type Props = {

80
public/app/features/explore/Logs/LogsNavigation.tsx
View File

@ -212,44 +212,46 @@ export default memo(LogsNavigation);
const getStyles = (theme: GrafanaTheme2, oldestLogsFirst: boolean) => {
const navContainerHeight = `calc(100vh - 2*${theme.spacing(2)} - 2*${TOP_BAR_LEVEL_HEIGHT}px)`;
return {
navContainer: css`
max-height: ${navContainerHeight};
${oldestLogsFirst ? 'width: 58px;' : ''}
display: flex;
flex-direction: column;
${config.featureToggles.logsInfiniteScrolling
? `justify-content: flex-end;`
: `justify-content: ${oldestLogsFirst ? 'flex-start' : 'space-between'};`}
position: sticky;
top: ${theme.spacing(2)};
right: 0;
`,
navButton: css`
width: 58px;
height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1;
`,
navButtonContent: css`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
white-space: normal;
`,
scrollToTopButton: css`
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: ${theme.spacing(1)};
`,
navContainer: css({
maxHeight: navContainerHeight,
width: oldestLogsFirst ? '58px' : 'auto',
display: 'flex',
flexDirection: 'column',
justifyContent: config.featureToggles.logsInfiniteScrolling
? 'flex-end'
: oldestLogsFirst
? 'flex-start'
: 'space-between',
position: 'sticky',
top: theme.spacing(2),
right: 0,
}),
navButton: css({
width: '58px',
height: '68px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
lineHeight: 1,
}),
navButtonContent: css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
whiteSpace: 'normal',
}),
scrollToTopButton: css({
width: '40px',
height: '40px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
marginTop: theme.spacing(1),
}),
};
};

98
public/app/features/explore/Logs/LogsNavigationPages.tsx
View File

@ -64,57 +64,51 @@ export function LogsNavigationPages({ pages, currentPageIndex, oldestLogsFirst,
const getStyles = (theme: GrafanaTheme2, loading: boolean) => {
return {
pagesWrapper: css`
height: 100%;
padding-left: ${theme.spacing(0.5)};
display: flex;
flex-direction: column;
overflow-y: scroll;
&::after {
content: '';
display: block;
background: repeating-linear-gradient(
135deg,
${theme.colors.background.primary},
${theme.colors.background.primary} 5px,
${theme.colors.background.secondary} 5px,
${theme.colors.background.secondary} 15px
);
width: 3px;
height: inherit;
margin-bottom: 8px;
}
`,
pagesContainer: css`
display: flex;
padding: 0;
flex-direction: column;
`,
page: css`
display: flex;
margin: ${theme.spacing(2)} 0;
cursor: ${loading ? 'auto' : 'pointer'};
white-space: normal;
.selectedBg {
background: ${theme.colors.primary.main};
}
.selectedText {
color: ${theme.colors.primary.main};
}
`,
line: css`
width: 3px;
height: 100%;
align-items: center;
background: ${theme.colors.text.secondary};
`,
time: css`
width: 60px;
min-height: 80px;
font-size: ${theme.v1.typography.size.sm};
padding-left: ${theme.spacing(0.5)};
display: flex;
align-items: center;
`,
pagesWrapper: css({
height: '100%',
paddingLeft: theme.spacing(0.5),
display: 'flex',
flexDirection: 'column',
overflowY: 'scroll',
'&::after': {
content: "''",
display: 'block',
background: `repeating-linear-gradient(135deg, ${theme.colors.background.primary}, ${theme.colors.background.primary} 5px, ${theme.colors.background.secondary} 5px, ${theme.colors.background.secondary} 15px)`,
width: '3px',
height: 'inherit',
marginBottom: theme.spacing(1),
},
}),
pagesContainer: css({
display: 'flex',
padding: 0,
flexDirection: 'column',
}),
page: css({
display: 'flex',
margin: theme.spacing(2, 0),
cursor: loading ? 'auto' : 'pointer',
whiteSpace: 'normal',
'.selectedBg': {
background: theme.colors.primary.main,
},
'.selectedText': {
color: theme.colors.primary.main,
},
}),
line: css({
width: '3px',
height: '100%',
alignItems: 'center',
background: theme.colors.text.secondary,
}),
time: css({
width: '60px',
minHeight: '80px',
fontSize: theme.v1.typography.size.sm,
paddingLeft: theme.spacing(0.5),
display: 'flex',
alignItems: 'center',
}),
};
};

22
public/app/features/explore/Logs/LogsSamplePanel.tsx
View File

@ -128,16 +128,16 @@ export function LogsSamplePanel(props: Props) {
const getStyles = (theme: GrafanaTheme2) => {
return {
logSamplesButton: css`
position: absolute;
top: ${theme.spacing(1)};
right: ${theme.spacing(1)};
`,
logContainer: css`
overflow: scroll;
`,
infoTooltip: css`
margin-left: ${theme.spacing(1)};
`,
logSamplesButton: css({
position: 'absolute',
top: theme.spacing(1),
right: theme.spacing(1),
}),
logContainer: css({
overflow: 'scroll',
}),
infoTooltip: css({
marginLeft: theme.spacing(1),
}),
};
};

36
public/app/features/explore/Logs/LogsVolumePanel.tsx
View File

@ -105,23 +105,23 @@ export function LogsVolumePanel(props: Props) {
const getStyles = (theme: GrafanaTheme2) => {
return {
extraInfoContainer: css`
display: flex;
justify-content: end;
position: absolute;
right: 5px;
top: -10px;
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
`,
contentContainer: css`
display: flex;
align-items: center;
justify-content: center;
position: relative;
`,
streaming: css`
color: ${theme.colors.success.text};
`,
extraInfoContainer: css({
display: 'flex',
justifyContent: 'end',
position: 'absolute',
right: '5px',
top: '-10px',
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
}),
contentContainer: css({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
}),
streaming: css({
color: theme.colors.success.text,
}),
};
};

38
public/app/features/explore/Logs/LogsVolumePanelList.tsx
View File

@ -154,25 +154,25 @@ export const LogsVolumePanelList = ({
const getStyles = (theme: GrafanaTheme2) => {
return {
listContainer: css`
padding-top: 10px;
`,
extraInfoContainer: css`
display: flex;
justify-content: end;
position: absolute;
right: 5px;
top: 5px;
`,
oldInfoText: css`
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
`,
alertContainer: css`
width: 50%;
min-width: ${theme.breakpoints.values.sm}px;
margin: 0 auto;
`,
listContainer: css({
paddingTop: '10px',
}),
extraInfoContainer: css({
display: 'flex',
justifyContent: 'end',
position: 'absolute',
right: '5px',
top: '5px',
}),
oldInfoText: css({
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
}),
alertContainer: css({
width: '50%',
minWidth: `${theme.breakpoints.values.sm}px`,
margin: '0 auto',
}),
};
};

62
public/app/features/explore/Logs/utils/LogsCrossFadeTransition.tsx
View File

@ -1,43 +1,49 @@
import { css } from '@emotion/css';
import memoizeOne from 'memoize-one';
import { useRef } from 'react';
import * as React from 'react';
import { CSSTransition } from 'react-transition-group';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
const transitionDuration = 500;
// We add a bit of delay to the transition as another perf optimisation. As at the start we need to render
// quite a bit of new rows, if we start transition at the same time there can be frame rate drop. This gives time
// for react to first render them and then do the animation.
const transitionDelay = 100;
const getStyles = memoizeOne(() => {
const getStyles = (theme: GrafanaTheme2) => {
return {
logsEnter: css`
label: logsEnter;
position: absolute;
opacity: 0;
height: auto;
width: 100%;
`,
logsEnterActive: css`
label: logsEnterActive;
opacity: 1;
transition: opacity ${transitionDuration}ms ease-out ${transitionDelay}ms;
`,
logsExit: css`
label: logsExit;
position: absolute;
opacity: 1;
height: auto;
width: 100%;
`,
logsExitActive: css`
label: logsExitActive;
opacity: 0;
transition: opacity ${transitionDuration}ms ease-out ${transitionDelay}ms;
`,
logsEnter: css({
label: 'logsEnter',
position: 'absolute',
opacity: 0,
height: 'auto',
width: '100%',
}),
logsEnterActive: css({
label: 'logsEnterActive',
opacity: 1,
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
transition: `opacity ${transitionDuration}ms ease-out ${transitionDelay}ms`,
},
}),
logsExit: css({
label: 'logsExit',
position: 'absolute',
opacity: 1,
height: 'auto',
width: '100%',
}),
logsExitActive: css({
label: 'logsExitActive',
opacity: 0,
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
transition: `opacity ${transitionDuration}ms ease-out ${transitionDelay}ms`,
},
}),
};
};
});
type Props = {
children: React.ReactElement;
@ -51,7 +57,7 @@ type Props = {
export function LogsCrossFadeTransition(props: Props) {
const { visible, children } = props;
const transitionRef = useRef(null);
const styles = getStyles();
const styles = useStyles2(getStyles);
return (
<CSSTransition
in={visible}

14
public/app/features/explore/NodeGraph/NodeGraphContainer.tsx
View File

@ -13,13 +13,13 @@ import { StoreState } from '../../../types';
import { useLinks } from '../utils/links';
const getStyles = (theme: GrafanaTheme2) => ({
warningText: css`
label: warningText;
display: flex;
align-items: center;
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
`,
warningText: css({
label: 'warningText',
display: 'flex',
alignItems: 'center',
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
}),
});
interface OwnProps {

22
public/app/features/explore/PrometheusListView/ItemLabels.tsx
View File

@ -8,17 +8,17 @@ import { rawListItemColumnWidth } from './RawListItem';
const getItemLabelsStyles = (theme: GrafanaTheme2, expanded: boolean) => {
return {
valueNavigation: css`
width: ${rawListItemColumnWidth};
font-weight: bold;
`,
valueNavigationWrapper: css`
display: flex;
justify-content: flex-end;
`,
itemLabelsWrap: css`
${!expanded ? `border-bottom: 1px solid ${theme.colors.border.medium}` : ''};
`,
valueNavigation: css({
width: rawListItemColumnWidth,
fontWeight: 'bold',
}),
valueNavigationWrapper: css({
display: 'flex',
justifyContent: 'flex-end',
}),
itemLabelsWrap: css({
borderBottom: expanded ? `1px solid ${theme.colors.border.medium}` : '',
}),
};
};

62
public/app/features/explore/PrometheusListView/ItemValues.tsx
View File

@ -7,39 +7,39 @@ import { rawListItemColumnWidth, rawListPaddingToHoldSpaceForCopyIcon, RawListVa
import { RawPrometheusListItemEmptyValue } from './utils/getRawPrometheusListItemsFromDataFrame';
const getStyles = (theme: GrafanaTheme2, totalNumberOfValues: number) => ({
rowWrapper: css`
position: relative;
min-width: ${rawListItemColumnWidth};
padding-right: 5px;
`,
rowValue: css`
white-space: nowrap;
overflow-x: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
display: block;
padding-right: 10px;
rowWrapper: css({
position: 'relative',
minWidth: rawListItemColumnWidth,
paddingRight: '5px',
}),
rowValue: css({
whiteSpace: 'nowrap',
overflowX: 'auto',
MsOverflowStyle: 'none' /* IE and Edge */,
scrollbarWidth: 'none' /* Firefox */,
display: 'block',
paddingRight: '10px',
&::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
'&::-webkit-scrollbar': {
display: 'none' /* Chrome, Safari and Opera */,
},
&:before {
pointer-events: none;
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, transparent calc(100% - 25px), ${theme.colors.background.primary});
}
`,
rowValuesWrap: css`
padding-left: ${rawListPaddingToHoldSpaceForCopyIcon};
width: calc(${totalNumberOfValues} * ${rawListItemColumnWidth});
display: flex;
`,
'&:before': {
pointerEvents: 'none',
content: "''",
width: '100%',
height: '100%',
position: 'absolute',
left: 0,
top: 0,
background: `linear-gradient(to right, transparent calc(100% - 25px), ${theme.colors.background.primary})`,
},
}),
rowValuesWrap: css({
paddingLeft: rawListPaddingToHoldSpaceForCopyIcon,
width: `calc(${totalNumberOfValues} * ${rawListItemColumnWidth})`,
display: 'flex',
}),
});
export const ItemValues = ({

54
public/app/features/explore/PrometheusListView/RawListContainer.tsx
View File

@ -22,33 +22,33 @@ export interface RawListContainerProps {
}
const styles = {
wrapper: css`
height: 100%;
overflow: scroll;
`,
switchWrapper: css`
display: flex;
flex-direction: row;
margin-bottom: 0;
`,
switchLabel: css`
margin-left: 15px;
margin-bottom: 0;
`,
switch: css`
margin-left: 10px;
`,
resultCount: css`
margin-bottom: 4px;
`,
header: css`
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
font-size: 12px;
line-height: 1.25;
`,
wrapper: css({
height: '100%',
overflow: 'scroll',
}),
switchWrapper: css({
display: 'flex',
flexDirection: 'row',
marginBottom: 0,
}),
switchLabel: css({
marginLeft: '15px',
marginBottom: 0,
}),
switch: css({
marginLeft: '10px',
}),
resultCount: css({
marginBottom: '4px',
}),
header: css({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '10px 0',
fontSize: '12px',
lineHeight: 1.25,
}),
};
const mobileWidthThreshold = 480;

88
public/app/features/explore/PrometheusListView/RawListItem.tsx
View File

@ -24,54 +24,50 @@ export const rawListItemColumnWidth = '80px';
export const rawListPaddingToHoldSpaceForCopyIcon = '25px';
const getStyles = (theme: GrafanaTheme2, totalNumberOfValues: number, isExpandedView: boolean) => ({
rowWrapper: css`
border-bottom: 1px solid ${theme.colors.border.medium};
display: flex;
position: relative;
padding-left: 22px;
${!isExpandedView ? 'align-items: center;' : ''}
${!isExpandedView ? 'height: 100%;' : ''}
`,
copyToClipboardWrapper: css`
position: absolute;
left: 0;
${!isExpandedView ? 'bottom: 0;' : ''}
${isExpandedView ? 'top: 4px;' : 'top: 0;'}
margin: auto;
z-index: 1;
height: 16px;
width: 16px;
`,
rowLabelWrapWrap: css`
position: relative;
width: calc(100% - (${totalNumberOfValues} * ${rawListItemColumnWidth}) - ${rawListPaddingToHoldSpaceForCopyIcon});
`,
rowLabelWrap: css`
white-space: nowrap;
overflow-x: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
padding-right: ${rawListExtraSpaceAtEndOfLine};
rowWrapper: css({
borderBottom: `1px solid ${theme.colors.border.medium}`,
display: 'flex',
position: 'relative',
paddingLeft: '22px',
alignItems: !isExpandedView ? 'center' : '',
height: !isExpandedView ? '100%' : '',
}),
copyToClipboardWrapper: css({
position: 'absolute',
left: 0,
bottom: !isExpandedView ? '0' : '',
top: isExpandedView ? '4px' : '0',
margin: 'auto',
zIndex: 1,
height: '16px',
width: '16px',
}),
rowLabelWrapWrap: css({
position: 'relative',
width: `calc(100% - (${totalNumberOfValues} * ${rawListItemColumnWidth}) - ${rawListPaddingToHoldSpaceForCopyIcon})`,
}),
rowLabelWrap: css({
whiteSpace: 'nowrap',
overflowX: 'auto',
MsOverflowStyle: 'none' /* IE and Edge */,
scrollbarWidth: 'none' /* Firefox */,
paddingRight: rawListExtraSpaceAtEndOfLine,
&::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
'&::-webkit-scrollbar': {
display: 'none' /* Chrome, Safari and Opera */,
},
&:after {
pointer-events: none;
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(
to right,
transparent calc(100% - ${rawListExtraSpaceAtEndOfLine}),
${theme.colors.background.primary}
);
}
`,
'&:after': {
pointerEvents: 'none',
content: "''",
width: '100%',
height: '100%',
position: 'absolute',
left: 0,
top: 0,
background: `linear-gradient(to right, transparent calc(100% - ${rawListExtraSpaceAtEndOfLine}), ${theme.colors.background.primary})`,
},
}),
});
function getQueryValues(allLabels: Pick<instantQueryRawVirtualizedListData, 'Value' | string | number>) {

20
public/app/features/explore/PrometheusListView/RawListItemAttributes.tsx
View File

@ -11,16 +11,16 @@ const getStyles = (theme: GrafanaTheme2) => {
const greenish = theme.isDark ? '#73bf69' : '#56a64b';
return {
metricName: css`
color: ${greenish};
`,
metricValue: css`
color: ${reddish};
`,
expanded: css`
display: block;
text-indent: 1em;
`,
metricName: css({
color: greenish,
}),
metricValue: css({
color: reddish,
}),
expanded: css({
display: 'block',
textIndent: '1em',
}),
};
};

213
public/app/features/explore/RichHistory/RichHistoryCard.tsx
View File

@ -50,88 +50,88 @@ const getStyles = (theme: GrafanaTheme2) => {
const cardColor = theme.colors.background.secondary;
return {
queryCard: css`
position: relative;
display: flex;
flex-direction: column;
border: 1px solid ${theme.colors.border.weak};
margin: ${theme.spacing(1)} 0;
background-color: ${cardColor};
border-radius: ${theme.shape.radius.default};
.starred {
color: ${theme.v1.palette.orange};
}
`,
cardRow: css`
display: flex;
align-items: center;
justify-content: space-between;
padding: ${theme.spacing(1)};
border-bottom: none;
:first-of-type {
border-bottom: 1px solid ${theme.colors.border.weak};
padding: ${theme.spacing(0.5, 1)};
}
img {
height: ${theme.typography.fontSize}px;
max-width: ${theme.typography.fontSize}px;
margin-right: ${theme.spacing(1)};
}
`,
queryActionButtons: css`
max-width: ${rightColumnContentWidth};
display: flex;
justify-content: flex-end;
font-size: ${theme.typography.size.base};
button {
margin-left: ${theme.spacing(1)};
}
`,
queryContainer: css`
font-weight: ${theme.typography.fontWeightMedium};
width: calc(100% - ${rightColumnWidth});
`,
updateCommentContainer: css`
width: calc(100% + ${rightColumnWidth});
margin-top: ${theme.spacing(1)};
`,
comment: css`
overflow-wrap: break-word;
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightRegular};
margin-top: ${theme.spacing(0.5)};
`,
commentButtonRow: css`
> * {
margin-top: ${theme.spacing(1)};
margin-right: ${theme.spacing(1)};
}
`,
textArea: css`
width: 100%;
`,
runButton: css`
max-width: ${rightColumnContentWidth};
display: flex;
justify-content: flex-end;
button {
height: auto;
padding: ${theme.spacing(0.5, 2)};
line-height: 1.4;
span {
white-space: normal !important;
}
}
`,
loader: css`
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: ${theme.colors.background.secondary};
`,
queryCard: css({
position: 'relative',
display: 'flex',
flexDirection: 'column',
border: `1px solid ${theme.colors.border.weak}`,
margin: theme.spacing(1, 0),
backgroundColor: cardColor,
borderRadius: theme.shape.radius.default,
'.starred': {
color: theme.v1.palette.orange,
},
}),
cardRow: css({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: theme.spacing(1),
borderBottom: 'none',
':first-of-type': {
borderBottom: `1px solid ${theme.colors.border.weak}`,
padding: theme.spacing(0.5, 1),
},
img: {
height: `${theme.typography.fontSize}px`,
maxWidth: `${theme.typography.fontSize}px`,
marginRight: theme.spacing(1),
},
}),
queryActionButtons: css({
maxWidth: rightColumnContentWidth,
display: 'flex',
justifyContent: 'flex-end',
fontSize: theme.typography.size.base,
button: {
marginLeft: theme.spacing(1),
},
}),
queryContainer: css({
fontWeight: theme.typography.fontWeightMedium,
width: `calc(100% - ${rightColumnWidth})`,
}),
updateCommentContainer: css({
width: `calc(100% + ${rightColumnWidth})`,
marginTop: theme.spacing(1),
}),
comment: css({
overflowWrap: 'break-word',
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightRegular,
marginTop: theme.spacing(0.5),
}),
commentButtonRow: css({
'> *': {
marginTop: theme.spacing(1),
marginRight: theme.spacing(1),
},
}),
textArea: css({
width: '100%',
}),
runButton: css({
maxWidth: rightColumnContentWidth,
display: 'flex',
justifyContent: 'flex-end',
button: {
height: 'auto',
padding: theme.spacing(0.5, 2),
lineHeight: 1.4,
span: {
whiteSpace: 'normal !important',
},
},
}),
loader: css({
position: 'absolute',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.colors.background.secondary,
}),
};
};
@ -357,23 +357,23 @@ export function RichHistoryCard(props: Props) {
}
const getQueryStyles = (theme: GrafanaTheme2) => ({
queryRow: css`
border-top: 1px solid ${theme.colors.border.weak};
display: flex;
flex-direction: row;
padding: 4px 0px;
gap: 4px;
:first-child {
border-top: none;
}
`,
dsInfoContainer: css`
display: flex;
align-items: center;
`,
queryText: css`
word-break: break-all;
`,
queryRow: css({
borderTop: `1px solid ${theme.colors.border.weak}`,
display: 'flex',
flexDirection: 'row',
padding: theme.spacing(0.5, 0),
gap: theme.spacing(0.5),
':first-child': {
borderTop: 'none',
},
}),
dsInfoContainer: css({
display: 'flex',
alignItems: 'center',
}),
queryText: css({
wordBreak: 'break-all',
}),
});
interface QueryProps {
@ -403,13 +403,14 @@ const Query = ({ query, showDsInfo = false }: QueryProps) => {
);
};
const getDsInfoStyles = (size: 'sm' | 'md') => (theme: GrafanaTheme2) => css`
display: flex;
align-items: center;
font-size: ${theme.typography[size === 'sm' ? 'bodySmall' : 'body'].fontSize};
font-weight: ${theme.typography.fontWeightMedium};
white-space: nowrap;
`;
const getDsInfoStyles = (size: 'sm' | 'md') => (theme: GrafanaTheme2) =>
css({
display: 'flex',
alignItems: 'center',
fontSize: theme.typography[size === 'sm' ? 'bodySmall' : 'body'].fontSize,
fontWeight: theme.typography.fontWeightMedium,
whiteSpace: 'nowrap',
});
function DatasourceInfo({ dsApi, size }: { dsApi?: DataSourceApi; size: 'sm' | 'md' }) {
const getStyles = useCallback((theme: GrafanaTheme2) => getDsInfoStyles(size)(theme), [size]);

148
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
View File

@ -34,81 +34,81 @@ export interface RichHistoryQueriesTabProps {
const getStyles = (theme: GrafanaTheme2, height: number) => {
return {
container: css`
display: flex;
`,
labelSlider: css`
font-size: ${theme.typography.bodySmall.fontSize};
&:last-of-type {
margin-top: ${theme.spacing(3)};
}
&:first-of-type {
font-weight: ${theme.typography.fontWeightMedium};
margin-bottom: ${theme.spacing(2)};
}
`,
containerContent: css`
container: css({
display: 'flex',
}),
labelSlider: css({
fontSize: theme.typography.bodySmall.fontSize,
'&:last-of-type': {
marginTop: theme.spacing(3),
},
'&:first-of-type': {
fontWeight: theme.typography.fontWeightMedium,
marginBottom: theme.spacing(2),
},
}),
containerContent: css({
/* 134px is based on the width of the Query history tabs bar, so the content is aligned to right side of the tab */
width: calc(100% - 134px);
`,
containerSlider: css`
width: 129px;
margin-right: ${theme.spacing(1)};
`,
fixedSlider: css`
position: fixed;
`,
slider: css`
bottom: 10px;
height: ${height - 180}px;
width: 129px;
padding: ${theme.spacing(1)} 0;
`,
selectors: css`
display: flex;
justify-content: space-between;
flex-wrap: wrap;
`,
filterInput: css`
margin-bottom: ${theme.spacing(1)};
`,
multiselect: css`
width: 100%;
margin-bottom: ${theme.spacing(1)};
`,
sort: css`
width: 170px;
`,
sessionName: css`
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-top: ${theme.spacing(3)};
h4 {
margin: 0 10px 0 0;
}
`,
heading: css`
font-size: ${theme.typography.h4.fontSize};
margin: ${theme.spacing(2, 0.25, 1, 0.25)};
`,
footer: css`
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-weight: ${theme.typography.fontWeightLight};
font-size: ${theme.typography.bodySmall.fontSize};
a {
font-weight: ${theme.typography.fontWeightMedium};
margin-left: ${theme.spacing(0.25)};
}
`,
queries: css`
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightRegular};
margin-left: ${theme.spacing(0.5)};
`,
width: 'calc(100% - 134px)',
}),
containerSlider: css({
width: '129px',
marginRight: theme.spacing(1),
}),
fixedSlider: css({
position: 'fixed',
}),
slider: css({
bottom: '10px',
height: `${height - 180}px`,
width: '129px',
padding: theme.spacing(1, 0),
}),
selectors: css({
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
}),
filterInput: css({
marginBottom: theme.spacing(1),
}),
multiselect: css({
width: '100%',
marginBottom: theme.spacing(1),
}),
sort: css({
width: '170px',
}),
sessionName: css({
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: theme.spacing(3),
h4: {
margin: '0 10px 0 0',
},
}),
heading: css({
fontSize: theme.typography.h4.fontSize,
margin: theme.spacing(2, 0.25, 1, 0.25),
}),
footer: css({
height: '60px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontWeight: theme.typography.fontWeightLight,
fontSize: theme.typography.bodySmall.fontSize,
a: {
fontWeight: theme.typography.fontWeightMedium,
marginLeft: theme.spacing(0.25),
},
}),
queries: css({
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightRegular,
marginLeft: theme.spacing(0.5),
}),
};
};

30
public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
View File

@ -24,21 +24,21 @@ export interface RichHistorySettingsProps {
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
font-size: ${theme.typography.bodySmall.fontSize};
`,
spaceBetween: css`
margin-bottom: ${theme.spacing(3)};
`,
input: css`
max-width: 200px;
`,
bold: css`
font-weight: ${theme.typography.fontWeightBold};
`,
bottomMargin: css`
margin-bottom: ${theme.spacing(1)};
`,
container: css({
fontSize: theme.typography.bodySmall.fontSize,
}),
spaceBetween: css({
marginBottom: theme.spacing(3),
}),
input: css({
maxWidth: '200px',
}),
bold: css({
fontWeight: theme.typography.fontWeightBold,
}),
bottomMargin: css({
marginBottom: theme.spacing(1),
}),
};
};

66
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
View File

@ -33,39 +33,39 @@ export interface RichHistoryStarredTabProps {
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
display: flex;
`,
containerContent: css`
width: 100%;
`,
selectors: css`
display: flex;
justify-content: space-between;
flex-wrap: wrap;
`,
multiselect: css`
width: 100%;
margin-bottom: ${theme.spacing(1)};
`,
filterInput: css`
margin-bottom: ${theme.spacing(1)};
`,
sort: css`
width: 170px;
`,
footer: css`
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-weight: ${theme.typography.fontWeightLight};
font-size: ${theme.typography.bodySmall.fontSize};
a {
font-weight: ${theme.typography.fontWeightMedium};
margin-left: ${theme.spacing(0.25)};
}
`,
container: css({
display: 'flex',
}),
containerContent: css({
width: '100%',
}),
selectors: css({
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
}),
multiselect: css({
width: '100%',
marginBottom: theme.spacing(1),
}),
filterInput: css({
marginBottom: theme.spacing(1),
}),
sort: css({
width: '170px',
}),
footer: css({
height: '60px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontWeight: theme.typography.fontWeightLight,
fontSize: theme.typography.bodySmall.fontSize,
a: {
fontWeight: theme.typography.fontWeightMedium,
marginLeft: theme.spacing(0.25),
},
}),
};
};

34
public/app/features/expressions/components/Condition.tsx
View File

@ -64,9 +64,9 @@ export const Condition = ({ condition, index, onChange, onRemoveCondition, refId
});
};
const buttonWidth = css`
width: 75px;
`;
const buttonWidth = css({
width: '75px',
});
const isRange =
condition.evaluator.type === EvalFunction.IsWithinRange || condition.evaluator.type === EvalFunction.IsOutsideRange;
@ -140,23 +140,23 @@ export const Condition = ({ condition, index, onChange, onRemoveCondition, refId
};
const getStyles = (theme: GrafanaTheme2) => {
const buttonStyle = css`
color: ${theme.colors.primary.text};
font-size: ${theme.typography.bodySmall.fontSize};
`;
const buttonStyle = css({
color: theme.colors.primary.text,
fontSize: theme.typography.bodySmall.fontSize,
});
return {
buttonSelectText: buttonStyle,
button: cx(
css`
display: flex;
align-items: center;
border-radius: ${theme.shape.radius.default};
font-weight: ${theme.typography.fontWeightMedium};
border: 1px solid ${theme.colors.border.weak};
white-space: nowrap;
padding: 0 ${theme.spacing(1)};
background-color: ${theme.colors.background.canvas};
`,
css({
display: 'flex',
alignItems: 'center',
borderRadius: theme.shape.radius.default,
fontWeight: theme.typography.fontWeightMedium,
border: `1px solid ${theme.colors.border.weak}`,
whiteSpace: 'nowrap',
padding: `0 ${theme.spacing(1)}`,
backgroundColor: theme.colors.background.canvas,
}),
buttonStyle
),
};

66
public/app/features/expressions/components/Math.tsx
View File

@ -152,41 +152,41 @@ const DocumentedFunction = ({ name, description }: DocumentedFunctionProps) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
documentationHeader: css`
font-size: ${theme.typography.h5.fontSize};
font-weight: ${theme.typography.h5.fontWeight};
`,
documentationLink: css`
color: ${theme.colors.text.link};
`,
documentationContainer: css`
display: flex;
flex: 1;
flex-direction: column;
gap: ${theme.spacing(2)};
documentationHeader: css({
fontSize: theme.typography.h5.fontSize,
fontWeight: theme.typography.h5.fontWeight,
}),
documentationLink: css({
color: theme.colors.text.link,
}),
documentationContainer: css({
display: 'flex',
flex: 1,
flexDirection: 'column',
gap: theme.spacing(2),
padding: ${theme.spacing(1)} ${theme.spacing(2)};
`,
documentationFunctions: css`
display: grid;
grid-template-columns: max-content auto;
column-gap: ${theme.spacing(2)};
`,
info: css`
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
gap: ${theme.spacing(1)};
`,
padding: theme.spacing(1, 2),
}),
documentationFunctions: css({
display: 'grid',
gridTemplateColumns: 'max-content auto',
columnGap: theme.spacing(2),
}),
info: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
cursor: 'pointer',
gap: theme.spacing(1),
}),
});
const getDocumentedFunctionStyles = (theme: GrafanaTheme2) => ({
name: css`
font-weight: ${theme.typography.fontWeightBold};
`,
description: css`
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.disabled};
`,
name: css({
fontWeight: theme.typography.fontWeightBold,
}),
description: css({
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.disabled,
}),
});

22
public/app/features/geo/editor/GazetteerPathEditor.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import { useMemo, useState, useEffect } from 'react';
import { StandardEditorProps, SelectableValue } from '@grafana/data';
import { StandardEditorProps, SelectableValue, GrafanaTheme2 } from '@grafana/data';
import { Alert, Select, useStyles2 } from '@grafana/ui';
import { COUNTRIES_GAZETTEER_PATH, Gazetteer, getGazetteer } from '../gazetteer/gazetteer';
@ -86,15 +86,15 @@ export const GazetteerPathEditor = ({
);
};
const getStyles = () => ({
keys: css`
margin-top: 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
const getStyles = (theme: GrafanaTheme2) => ({
keys: css({
marginTop: theme.spacing(0.5),
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
> span {
margin-left: 4px;
}
`,
'> span': {
marginLeft: theme.spacing(0.5),
},
}),
});

26
public/app/features/geo/editor/locationModeEditor.tsx
View File

@ -103,19 +103,19 @@ export const LocationModeEditor = ({
const getStyles = (theme: GrafanaTheme2) => {
return {
alert: css`
& div {
padding: 4px;
}
margin-bottom: 0px;
margin-top: 5px;
padding: 2px;
`,
alert: css({
'& div': {
padding: theme.spacing(0.5),
},
marginBottom: '0px',
marginTop: '5px',
padding: theme.spacing(0.25),
}),
// TODO apply styling to horizontal group (currently not working)
hGroup: css`
& div {
width: 100%;
}
`,
hGroup: css({
'& div': {
width: '100%',
},
}),
};
};

15
public/app/features/inspector/DetailText.tsx
View File

@ -4,13 +4,14 @@ import * as React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
const getStyles = (theme: GrafanaTheme2) => css`
padding: ${theme.spacing(0, 2)};
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
overflow: hidden;
text-overflow: ellipsis;
`;
const getStyles = (theme: GrafanaTheme2) =>
css({
padding: theme.spacing(0, 2),
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
overflow: 'hidden',
textOverflow: 'ellipsis',
});
export const DetailText = ({ children }: React.PropsWithChildren<{}>) => {
const collapsedTextStyles = useStyles2(getStyles);

8
public/app/features/inspector/InspectStatsTab.tsx
View File

@ -70,7 +70,7 @@ export const InspectStatsTab = ({ data, timeZone }: InspectStatsTabProps) => {
);
};
const containerStyles = css`
height: 100%;
overflow-y: scroll;
`;
const containerStyles = css({
height: '100%',
overflowY: 'scroll',
});

10
public/app/features/inspector/QueryInspector.tsx
View File

@ -192,11 +192,11 @@ export class QueryInspector extends PureComponent<Props, State> {
}
const styles = {
refId: css`
font-weight: ${config.theme.typography.weight.semibold};
color: ${config.theme.colors.textBlue};
margin-right: 8px;
`,
refId: css({
fontWeight: config.theme.typography.weight.semibold,
color: config.theme.colors.textBlue,
marginRight: '8px',
}),
};
return (

30
public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
View File

@ -43,20 +43,20 @@ export const LibraryPanelInformation = ({ panel, formatDate }: Props) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
info: css`
line-height: 1;
`,
libraryPanelInfo: css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
`,
userAvatar: css`
border-radius: ${theme.shape.radius.circle};
box-sizing: content-box;
width: 22px;
height: 22px;
padding-left: ${theme.spacing(1)};
padding-right: ${theme.spacing(1)};
`,
info: css({
lineHeight: 1,
}),
libraryPanelInfo: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.bodySmall.fontSize,
}),
userAvatar: css({
borderRadius: theme.shape.radius.circle,
boxSizing: 'content-box',
width: '22px',
height: '22px',
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
}),
};
};

14
public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
View File

@ -1,10 +1,9 @@
import { css } from '@emotion/css';
import debounce from 'debounce-promise';
import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';
import { SelectableValue, urlUtil } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import { AsyncSelect, Button, Modal, useStyles2 } from '@grafana/ui';
import { AsyncSelect, Button, Modal } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { DashboardSearchItem } from '../../../search/types';
@ -17,7 +16,6 @@ export interface OpenLibraryPanelModalProps {
}
export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPanelModalProps): JSX.Element {
const styles = useStyles2(getStyles);
const [loading, setLoading] = useState(false);
const [connected, setConnected] = useState(0);
const [option, setOption] = useState<SelectableValue<DashboardSearchItem> | undefined>(undefined);
@ -45,7 +43,7 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
onClickBackdrop={onDismiss}
isOpen
>
<div className={styles.container}>
<div>
{connected === 0 ? (
<span>
<Trans i18nKey={'library-panels.modal.panel-not-linked'}>
@ -97,9 +95,3 @@ async function loadOptionsAsync(uid: string, searchString: string, setLoading: (
return options;
}
function getStyles(theme: GrafanaTheme2) {
return {
container: css``,
};
}

6
public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
View File

@ -84,7 +84,7 @@ export const PanelLibraryOptionsGroup = ({ panel, searchQuery, isWidget = false
};
const styles = {
libraryPanelsView: css`
width: 100%;
`,
libraryPanelsView: css({
width: '100%',
}),
};

85
public/app/features/library-panels/styles.ts
View File

@ -4,51 +4,50 @@ import { GrafanaTheme2 } from '@grafana/data';
export function getModalStyles(theme: GrafanaTheme2) {
return {
myTable: css`
max-height: 204px;
overflow-y: auto;
margin-top: 11px;
margin-bottom: 28px;
border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.colors.action.hover};
background: ${theme.colors.background.primary};
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.h6.fontSize};
width: 100%;
myTable: css({
maxHeight: '204px',
overflowY: 'auto',
marginTop: '11px',
marginBottom: '28px',
borderRadius: theme.shape.radius.default,
border: `1px solid ${theme.colors.action.hover}`,
background: theme.colors.background.primary,
color: theme.colors.text.secondary,
fontSize: theme.typography.h6.fontSize,
width: '100%',
thead {
color: #538ade;
font-size: ${theme.typography.bodySmall.fontSize};
}
thead: {
color: '#538ade',
fontSize: theme.typography.bodySmall.fontSize,
},
th,
td {
padding: 6px 13px;
height: ${theme.spacing(4)};
}
'th, td': {
padding: '6px 13px',
height: theme.spacing(4),
},
tbody > tr:nth-child(odd) {
background: ${theme.colors.background.secondary};
}
`,
noteTextbox: css`
margin-bottom: ${theme.spacing(4)};
`,
textInfo: css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.size.sm};
`,
dashboardSearch: css`
margin-top: ${theme.spacing(2)};
`,
modal: css`
width: 500px;
`,
modalText: css`
font-size: ${theme.typography.h4.fontSize};
color: ${theme.colors.text.primary};
margin-bottom: ${theme.spacing(4)};
padding-top: ${theme.spacing(2)};
`,
'tbody > tr:nth-child(odd)': {
background: theme.colors.background.secondary,
},
}),
noteTextbox: css({
marginBottom: theme.spacing(4),
}),
textInfo: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.size.sm,
}),
dashboardSearch: css({
marginTop: theme.spacing(2),
}),
modal: css({
width: '500px',
}),
modalText: css({
fontSize: theme.typography.h4.fontSize,
color: theme.colors.text.primary,
marginBottom: theme.spacing(4),
paddingTop: theme.spacing(2),
}),
};
}

8
public/app/features/logs/components/LoadingIndicator.tsx
View File

@ -19,7 +19,7 @@ export const LoadingIndicator = ({ adjective = 'newer' }: Props) => {
);
};
const loadingIndicatorStyles = css`
display: flex;
justify-content: center;
`;
const loadingIndicatorStyles = css({
display: 'flex',
justifyContent: 'center',
});

104
public/app/features/logs/components/LogDetailsRow.tsx
View File

@ -50,60 +50,60 @@ interface State {
const getStyles = memoizeOne((theme: GrafanaTheme2) => {
return {
wordBreakAll: css`
label: wordBreakAll;
word-break: break-all;
`,
copyButton: css`
& > button {
color: ${theme.colors.text.secondary};
padding: 0;
justify-content: center;
border-radius: ${theme.shape.radius.circle};
height: ${theme.spacing(theme.components.height.sm)};
width: ${theme.spacing(theme.components.height.sm)};
svg {
margin: 0;
}
wordBreakAll: css({
label: 'wordBreakAll',
wordBreak: 'break-all',
}),
copyButton: css({
'& > button': {
color: theme.colors.text.secondary,
padding: 0,
justifyContent: 'center',
borderRadius: theme.shape.radius.circle,
height: theme.spacing(theme.components.height.sm),
width: theme.spacing(theme.components.height.sm),
svg: {
margin: 0,
},
span > div {
top: -5px;
& button {
color: ${theme.colors.success.main};
}
}
}
`,
adjoiningLinkButton: css`
margin-left: ${theme.spacing(1)};
`,
wrapLine: css`
label: wrapLine;
white-space: pre-wrap;
`,
logDetailsStats: css`
padding: 0 ${theme.spacing(1)};
`,
logDetailsValue: css`
display: flex;
align-items: center;
line-height: 22px;
'span > div': {
top: '-5px',
'& button': {
color: theme.colors.success.main,
},
},
},
}),
adjoiningLinkButton: css({
marginLeft: theme.spacing(1),
}),
wrapLine: css({
label: 'wrapLine',
whiteSpace: 'pre-wrap',
}),
logDetailsStats: css({
padding: `0 ${theme.spacing(1)}`,
}),
logDetailsValue: css({
display: 'flex',
alignItems: 'center',
lineHeight: '22px',
.log-details-value-copy {
visibility: hidden;
}
&:hover {
.log-details-value-copy {
visibility: visible;
}
}
`,
buttonRow: css`
display: flex;
flex-direction: row;
gap: ${theme.spacing(0.5)};
margin-left: ${theme.spacing(0.5)};
`,
'.log-details-value-copy': {
visibility: 'hidden',
},
'&:hover': {
'.log-details-value-copy': {
visibility: 'visible',
},
},
}),
buttonRow: css({
display: 'flex',
flexDirection: 'row',
gap: theme.spacing(0.5),
marginLeft: theme.spacing(0.5),
}),
};
});

60
public/app/features/logs/components/LogLabelStats.tsx
View File

@ -11,36 +11,36 @@ const STATS_ROW_LIMIT = 5;
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
logsStats: css`
label: logs-stats;
background: inherit;
color: ${theme.colors.text.primary};
word-break: break-all;
width: fit-content;
max-width: 100%;
`,
logsStatsHeader: css`
label: logs-stats__header;
border-bottom: 1px solid ${theme.colors.border.medium};
display: flex;
`,
logsStatsTitle: css`
label: logs-stats__title;
font-weight: ${theme.typography.fontWeightMedium};
padding-right: ${theme.spacing(2)};
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 1;
`,
logsStatsClose: css`
label: logs-stats__close;
cursor: pointer;
`,
logsStatsBody: css`
label: logs-stats__body;
padding: 5px 0px;
`,
logsStats: css({
label: 'logs-stats',
background: 'inherit',
color: theme.colors.text.primary,
wordBreak: 'break-all',
width: 'fit-content',
maxWidth: '100%',
}),
logsStatsHeader: css({
label: 'logs-stats__header',
borderBottom: `1px solid ${theme.colors.border.medium}`,
display: 'flex',
}),
logsStatsTitle: css({
label: 'logs-stats__title',
fontWeight: theme.typography.fontWeightMedium,
paddingRight: theme.spacing(2),
display: 'inline-block',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
flexGrow: 1,
}),
logsStatsClose: css({
label: 'logs-stats__close',
cursor: 'pointer',
}),
logsStatsBody: css({
label: 'logs-stats__body',
padding: '5px 0px',
}),
};
});

86
public/app/features/logs/components/LogLabelStatsRow.tsx
View File

@ -4,49 +4,49 @@ import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
const getStyles = (theme: GrafanaTheme2) => ({
logsStatsRow: css`
label: logs-stats-row;
margin: ${parseInt(theme.spacing(2), 10) / 1.75}px 0;
`,
logsStatsRowActive: css`
label: logs-stats-row--active;
color: ${theme.colors.primary.text};
position: relative;
`,
logsStatsRowLabel: css`
label: logs-stats-row__label;
display: flex;
margin-bottom: 1px;
`,
logsStatsRowValue: css`
label: logs-stats-row__value;
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
`,
logsStatsRowCount: css`
label: logs-stats-row__count;
text-align: right;
margin-left: ${theme.spacing(0.75)};
`,
logsStatsRowPercent: css`
label: logs-stats-row__percent;
text-align: right;
margin-left: ${theme.spacing(0.75)};
width: ${theme.spacing(4.5)};
`,
logsStatsRowBar: css`
label: logs-stats-row__bar;
height: ${theme.spacing(0.5)};
overflow: hidden;
background: ${theme.colors.text.disabled};
`,
logsStatsRowInnerBar: css`
label: logs-stats-row__innerbar;
height: ${theme.spacing(0.5)};
overflow: hidden;
background: ${theme.colors.primary.main};
`,
logsStatsRow: css({
label: 'logs-stats-row',
margin: `${parseInt(theme.spacing(2), 10) / 1.75}px 0`,
}),
logsStatsRowActive: css({
label: 'logs-stats-row--active',
color: theme.colors.primary.text,
position: 'relative',
}),
logsStatsRowLabel: css({
label: 'logs-stats-row__label',
display: 'flex',
marginBottom: '1px',
}),
logsStatsRowValue: css({
label: 'logs-stats-row__value',
flex: 1,
textOverflow: 'ellipsis',
overflow: 'hidden',
}),
logsStatsRowCount: css({
label: 'logs-stats-row__count',
textAlign: 'right',
marginLeft: theme.spacing(0.75),
}),
logsStatsRowPercent: css({
label: 'logs-stats-row__percent',
textAlign: 'right',
marginLeft: theme.spacing(0.75),
width: theme.spacing(4.5),
}),
logsStatsRowBar: css({
label: 'logs-stats-row__bar',
height: theme.spacing(0.5),
overflow: 'hidden',
background: theme.colors.text.disabled,
}),
logsStatsRowInnerBar: css({
label: 'logs-stats-row__innerbar',
height: theme.spacing(0.5),
overflow: 'hidden',
background: theme.colors.primary.main,
}),
});
export interface Props {

46
public/app/features/logs/components/LogLabels.tsx
View File

@ -86,28 +86,28 @@ LogLabel.displayName = 'LogLabel';
const getStyles = (theme: GrafanaTheme2) => {
return {
logsLabels: css`
display: flex;
flex-wrap: wrap;
font-size: ${theme.typography.size.xs};
`,
logsLabel: css`
label: logs-label;
display: flex;
padding: ${theme.spacing(0, 0.25)};
background-color: ${theme.colors.background.secondary};
border-radius: ${theme.shape.radius.default};
margin: ${theme.spacing(0.125, 0.5, 0, 0)};
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
`,
logsLabelValue: css`
label: logs-label__value;
display: inline-block;
max-width: ${theme.spacing(25)};
text-overflow: ellipsis;
overflow: hidden;
`,
logsLabels: css({
display: 'flex',
flexWrap: 'wrap',
fontSize: theme.typography.size.xs,
}),
logsLabel: css({
label: 'logs-label',
display: 'flex',
padding: theme.spacing(0, 0.25),
backgroundColor: theme.colors.background.secondary,
borderRadius: theme.shape.radius.default,
margin: theme.spacing(0.125, 0.5, 0, 0),
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
}),
logsLabelValue: css({
label: 'logs-label__value',
display: 'inline-block',
maxWidth: theme.spacing(25),
textOverflow: 'ellipsis',
overflow: 'hidden',
}),
};
};

6
public/app/features/logs/components/LogRowMessageDisplayedFields.tsx
View File

@ -72,9 +72,9 @@ export const LogRowMessageDisplayedFields = memo((props: Props) => {
});
const displayedFieldsStyles = {
noWrap: css`
white-space: nowrap;
`,
noWrap: css({
whiteSpace: 'nowrap',
}),
};
LogRowMessageDisplayedFields.displayName = 'LogRowMessageDisplayedFields';

505
public/app/features/logs/components/getLogRowStyles.ts
View File

@ -32,11 +32,11 @@ export const getLogLevelStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) =>
}
return {
logsRowLevelColor: css`
&::after {
background-color: ${logColor};
}
`,
logsRowLevelColor: css({
'&::after': {
backgroundColor: logColor,
},
}),
};
};
@ -44,79 +44,79 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
const hoverBgColor = styleMixins.hoverColor(theme.colors.background.secondary, theme);
const contextOutlineColor = tinycolor(theme.components.dashboard.background).setAlpha(0.7).toRgbString();
return {
logsRowLevel: css`
label: logs-row__level;
max-width: ${theme.spacing(1.25)};
cursor: default;
&::after {
content: '';
display: block;
position: absolute;
top: 1px;
bottom: 1px;
width: 3px;
left: ${theme.spacing(0.5)};
}
`,
logsRowLevel: css({
label: 'logs-row__level',
maxWidth: theme.spacing(1.25),
cursor: 'default',
'&::after': {
content: "''",
display: 'block',
position: 'absolute',
top: '1px',
bottom: '1px',
width: '3px',
left: theme.spacing(0.5),
},
}),
// Compared to logsRowLevel we need to make error logs wider to accommodate the icon
logsRowWithError: css({
maxWidth: `${theme.spacing(1.5)}`,
}),
logsRowMatchHighLight: css`
label: logs-row__match-highlight;
background: inherit;
padding: inherit;
color: ${theme.components.textHighlight.text}
background-color: ${theme.components.textHighlight};
`,
logsRowMatchHighLight: css({
label: 'logs-row__match-highlight',
background: 'inherit',
padding: 'inherit',
color: theme.components.textHighlight.text,
backgroundColor: theme.components.textHighlight.background,
}),
logRows: css({
position: 'relative',
}),
logsRowsTable: css`
label: logs-rows;
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
width: 100%;
position: relative;
`,
logsRowsTableContain: css`
contain: strict;
`,
highlightBackground: css`
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
`,
logsRow: css`
label: logs-row;
width: 100%;
cursor: pointer;
vertical-align: top;
logsRowsTable: css({
label: 'logs-rows',
fontFamily: theme.typography.fontFamilyMonospace,
fontSize: theme.typography.bodySmall.fontSize,
width: '100%',
position: 'relative',
}),
logsRowsTableContain: css({
contain: 'strict',
}),
highlightBackground: css({
backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
}),
logsRow: css({
label: 'logs-row',
width: '100%',
cursor: 'pointer',
verticalAlign: 'top',
&:hover {
.log-row-menu {
z-index: 1;
}
'&:hover': {
'.log-row-menu': {
zIndex: 1,
},
background: ${hoverBgColor};
}
background: hoverBgColor,
},
td:not(.log-row-menu-cell):last-child {
width: 100%;
}
'td:not(.log-row-menu-cell):last-child': {
width: '100%',
},
> td:not(.log-row-menu-cell) {
position: relative;
padding-right: ${theme.spacing(1)};
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
height: 100%;
}
`,
logsRowDuplicates: css`
label: logs-row__duplicates;
text-align: right;
width: 4em;
cursor: default;
`,
'> td:not(.log-row-menu-cell)': {
position: 'relative',
paddingRight: theme.spacing(1),
borderTop: '1px solid transparent',
borderBottom: '1px solid transparent',
height: '100%',
},
}),
logsRowDuplicates: css({
label: 'logs-row__duplicates',
textAlign: 'right',
width: '4em',
cursor: 'default',
}),
logIconError: css({
color: theme.colors.warning.main,
position: 'relative',
@ -127,202 +127,201 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
position: 'relative',
top: '-2px',
}),
logsRowToggleDetails: css`
label: logs-row-toggle-details__level;
font-size: 9px;
padding-top: 5px;
max-width: 15px;
`,
logsRowLocalTime: css`
label: logs-row__localtime;
white-space: nowrap;
`,
logsRowLabels: css`
label: logs-row__labels;
white-space: nowrap;
max-width: 22em;
logsRowToggleDetails: css({
label: 'logs-row-toggle-details__level',
fontSize: '9px',
paddingTop: '5px',
maxWidth: '15px',
}),
logsRowLocalTime: css({
label: 'logs-row__localtime',
whiteSpace: 'nowrap',
}),
logsRowLabels: css({
label: 'logs-row__labels',
whiteSpace: 'nowrap',
maxWidth: '22em',
/* This is to make the labels vertical align */
> span {
margin-top: 0.75px;
}
`,
logsRowMessage: css`
label: logs-row__message;
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: anywhere;
width: 100%;
text-align: left;
`,
copyLogButton: css`
padding: 0 0 0 ${theme.spacing(0.5)};
height: ${theme.spacing(3)};
width: ${theme.spacing(3.25)};
line-height: ${theme.spacing(2.5)};
overflow: hidden;
&:hover {
background-color: ${colorManipulator.alpha(theme.colors.text.primary, 0.12)};
}
}
`,
'> span': {
marginTop: '0.75px',
},
}),
logsRowMessage: css({
label: 'logs-row__message',
whiteSpace: 'pre-wrap',
wordBreak: 'break-all',
overflowWrap: 'anywhere',
width: '100%',
textAlign: 'left',
}),
copyLogButton: css({
padding: theme.spacing(0, 0, 0, 0.5),
height: theme.spacing(3),
width: theme.spacing(3.25),
lineHeight: theme.spacing(2.5),
overflow: 'hidden',
'&:hover': {
backgroundColor: colorManipulator.alpha(theme.colors.text.primary, 0.12),
},
}),
//Log details specific CSS
logDetailsContainer: css`
label: logs-row-details-table;
border: 1px solid ${theme.colors.border.medium};
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
border-radius: ${theme.shape.radius.default};
margin: ${theme.spacing(2.5)} ${theme.spacing(1)} ${theme.spacing(2.5)} ${theme.spacing(2)};
cursor: default;
`,
logDetailsTable: css`
label: logs-row-details-table;
line-height: 18px;
width: 100%;
td:last-child {
width: 100%;
}
`,
logsDetailsIcon: css`
label: logs-row-details__icon;
position: relative;
color: ${theme.v1.palette.gray3};
padding-top: 1px;
padding-bottom: 1px;
padding-right: ${theme.spacing(0.75)};
`,
logDetailsLabel: css`
label: logs-row-details__label;
max-width: 30em;
min-width: 20em;
padding: 0 ${theme.spacing(1)};
overflow-wrap: break-word;
`,
logDetailsHeading: css`
label: logs-row-details__heading;
font-weight: ${theme.typography.fontWeightBold};
padding: ${theme.spacing(1)} 0 ${theme.spacing(0.5)};
`,
logDetailsValue: css`
label: logs-row-details__row;
position: relative;
vertical-align: middle;
cursor: default;
logDetailsContainer: css({
label: 'logs-row-details-table',
border: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(0, 1, 1),
borderRadius: theme.shape.radius.default,
margin: theme.spacing(2.5, 1, 2.5, 2),
cursor: 'default',
}),
logDetailsTable: css({
label: 'logs-row-details-table',
lineHeight: '18px',
width: '100%',
'td:last-child': {
width: '100%',
},
}),
logsDetailsIcon: css({
label: 'logs-row-details__icon',
position: 'relative',
color: theme.v1.palette.gray3,
paddingTop: '1px',
paddingBottom: '1px',
paddingRight: theme.spacing(0.75),
}),
logDetailsLabel: css({
label: 'logs-row-details__label',
maxWidth: '30em',
minMidth: '20em',
padding: theme.spacing(0, 1),
overflowWrap: 'break-word',
}),
logDetailsHeading: css({
label: 'logs-row-details__heading',
fontWeight: theme.typography.fontWeightBold,
padding: theme.spacing(1, 0, 0.5),
}),
logDetailsValue: css({
label: 'logs-row-details__row',
position: 'relative',
verticalAlign: 'middle',
cursor: 'default',
&:hover {
background-color: ${hoverBgColor};
}
`,
'&:hover': {
backgroundColor: hoverBgColor,
},
}),
// Log row
topVerticalAlign: css`
label: topVerticalAlign;
margin-top: -${theme.spacing(0.9)};
margin-left: -${theme.spacing(0.25)};
`,
detailsOpen: css`
&:hover {
background-color: ${styleMixins.hoverColor(theme.colors.background.primary, theme)};
}
`,
errorLogRow: css`
label: erroredLogRow;
color: ${theme.colors.text.secondary};
`,
topVerticalAlign: css({
label: 'topVerticalAlign',
marginTop: theme.spacing(-0.9),
marginLeft: theme.spacing(-0.25),
}),
detailsOpen: css({
'&:hover': {
backgroundColor: styleMixins.hoverColor(theme.colors.background.primary, theme),
},
}),
errorLogRow: css({
label: 'erroredLogRow',
color: theme.colors.text.secondary,
}),
// Log Row Message
positionRelative: css`
label: positionRelative;
position: relative;
`,
rowWithContext: css`
label: rowWithContext;
z-index: 1;
outline: 9999px solid ${contextOutlineColor};
display: inherit;
`,
horizontalScroll: css`
label: horizontalScroll;
white-space: pre;
`,
contextNewline: css`
display: block;
margin-left: 0px;
`,
rowMenu: css`
label: rowMenu;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-end;
justify-content: space-evenly;
align-items: center;
position: absolute;
top: 0;
bottom: auto;
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3};
padding: ${theme.spacing(0.5, 1, 0.5, 1)};
z-index: 100;
gap: ${theme.spacing(0.5)};
positionRelative: css({
label: 'positionRelative',
position: 'relative',
}),
rowWithContext: css({
label: 'rowWithContext',
zIndex: 1,
outline: `9999px solid ${contextOutlineColor}`,
display: 'inherit',
}),
horizontalScroll: css({
label: 'horizontalScroll',
whiteSpace: 'pre',
}),
contextNewline: css({
display: 'block',
marginLeft: '0px',
}),
rowMenu: css({
label: 'rowMenu',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'row',
alignContent: 'flex-end',
justifyContent: 'space-evenly',
alignItems: 'center',
position: 'absolute',
top: 0,
bottom: 'auto',
background: theme.colors.background.primary,
boxShadow: theme.shadows.z3,
padding: theme.spacing(0.5, 1, 0.5, 1),
zIndex: 100,
gap: theme.spacing(0.5),
& > button {
margin: 0;
}
`,
logRowMenuCell: css`
position: sticky;
z-index: ${theme.zIndex.dropdown};
margin-top: -${theme.spacing(0.125)};
right: 0px;
'& > button': {
margin: 0,
},
}),
logRowMenuCell: css({
position: 'sticky',
zIndex: theme.zIndex.dropdown,
marginTop: theme.spacing(-0.125),
right: 0,
& > span {
transform: translateX(-100%);
}
`,
logLine: css`
background-color: transparent;
border: none;
diplay: inline;
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
letter-spacing: ${theme.typography.bodySmall.letterSpacing};
text-align: left;
padding: 0;
user-select: text;
`,
'& > span': {
transform: 'translateX(-100%)',
},
}),
logLine: css({
backgroundColor: 'transparent',
border: 'none',
diplay: 'inline',
fontFamily: theme.typography.fontFamilyMonospace,
fontSize: theme.typography.bodySmall.fontSize,
letterSpacing: theme.typography.bodySmall.letterSpacing,
textAlign: 'left',
padding: 0,
userSelect: 'text',
}),
// Log details
logsRowLevelDetails: css`
label: logs-row__level_details;
&::after {
top: -3px;
}
`,
logDetails: css`
label: logDetailsDefaultCursor;
cursor: default;
logsRowLevelDetails: css({
label: 'logs-row__level_details',
'&::after': {
top: '-3px',
},
}),
logDetails: css({
label: 'logDetailsDefaultCursor',
cursor: 'default',
&:hover {
background-color: ${theme.colors.background.primary};
}
`,
visibleRowMenu: css`
label: visibleRowMenu;
aspect-ratio: 1/1;
z-index: 90;
`,
linkButton: css`
label: linkButton;
> button {
padding-top: ${theme.spacing(0.5)};
}
`,
hidden: css`
label: hidden;
visibility: hidden;
`,
unPinButton: css`
height: ${theme.spacing(3)};
line-height: ${theme.spacing(2.5)};
`,
'&:hover': {
backgroundColor: theme.colors.background.primary,
},
}),
visibleRowMenu: css({
label: 'visibleRowMenu',
aspectRatio: '1/1',
zIndex: 90,
}),
linkButton: css({
label: 'linkButton',
'> button': {
paddingTop: theme.spacing(0.5),
},
}),
hidden: css({
label: 'hidden',
visibility: 'hidden',
}),
unPinButton: css({
height: theme.spacing(3),
lineHeight: theme.spacing(2.5),
}),
};
});