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: Rewrite alerting css using object styles (#87114)

Browse Source 
Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
This commit is contained in:
kay delaney 2024-05-07 10:57:25 +01:00 committed by GitHub
parent 1654b719e9
commit bc67b88301
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
122 changed files with 2226 additions and 2916 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

686
.betterer.results
View File

@ -1186,10 +1186,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "6"], [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.", "7"]
], ],
"public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.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/admin/UserOrgs.tsx:5381": [ "public/app/features/admin/UserOrgs.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [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.", "1"],
@ -1246,161 +1242,18 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"] [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
], ],
"public/app/features/alerting/unified/AlertWarning.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/AlertsFolderView.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/alerting/unified/GrafanaRuleQueryViewer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"]
],
"public/app/features/alerting/unified/NotificationPolicies.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/PanelAlertTabContent.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/alerting/unified/RedirectToRuleViewer.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/alerting/unified/RuleList.tsx:5381": [ "public/app/features/alerting/unified/RuleList.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"]
],
"public/app/features/alerting/unified/components/AlertLabel.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/AlertLabels.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/AlertManagerPicker.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/AlertStateDot.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
], ],
"public/app/features/alerting/unified/components/AnnotationDetailsField.tsx:5381": [ "public/app/features/alerting/unified/components/AnnotationDetailsField.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"]
], ],
"public/app/features/alerting/unified/components/Authorize.tsx:5381": [ "public/app/features/alerting/unified/components/Authorize.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"] [0, 0, 0, "Do not use any type assertions.", "1"]
], ],
"public/app/features/alerting/unified/components/DetailsField.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/alerting/unified/components/DynamicTable.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/alerting/unified/components/DynamicTableWithGuidelines.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
],
"public/app/features/alerting/unified/components/EmptyArea.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/EmptyAreaWithCTA.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/alerting/unified/components/Expression.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/Label.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/alerting/unified/components/MetaText.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/Spacer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/StateColoredText.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/alerting/unified/components/StateTag.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/alerting/unified/components/Tokenize.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/alerting/unified/components/Well.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/alert-groups/AlertDetails.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/alerting/unified/components/alert-groups/AlertGroupAlertsTable.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/alerting/unified/components/alert-groups/AlertGroupFilter.tsx:5381": [ "public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
], ],
"public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx:5381": [ "public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],
@ -1412,186 +1265,29 @@ exports[`better eslint`] = {
"public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx:5381": [ "public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]
], ],
"public/app/features/alerting/unified/components/export/FileExportPreview.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/alerting/unified/components/expressions/Expression.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"],
[0, 0, 0, "Styles should be written using objects.", "15"],
[0, 0, 0, "Styles should be written using objects.", "16"],
[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"]
],
"public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/extensions/AlertInstanceExtensionPointMenu.tsx:5381": [ "public/app/features/alerting/unified/components/extensions/AlertInstanceExtensionPointMenu.tsx:5381": [
[0, 0, 0, "Do not re-export imported variable (\`app/features/explore/extensions/ToolbarExtensionPointMenu\`)", "0"] [0, 0, 0, "Do not re-export imported variable (\`app/features/explore/extensions/ToolbarExtensionPointMenu\`)", "0"]
], ],
"public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.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/alerting/unified/components/mute-timings/MuteTimingTimeInterval.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/alerting/unified/components/mute-timings/MuteTimingTimeRange.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/alerting/unified/components/mute-timings/MuteTimingsTable.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/alerting/unified/components/notification-policies/EditNotificationPolicyForm.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/alerting/unified/components/notification-policies/Matchers.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/alerting/unified/components/notification-policies/Policy.tsx:5381": [ "public/app/features/alerting/unified/components/notification-policies/Policy.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"] [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
], ],
"public/app/features/alerting/unified/components/notification-policies/PromDurationDocs.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/alerting/unified/components/notification-policies/formStyles.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/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"],
[0, 0, 0, "Styles should be written using objects.", "15"],
[0, 0, 0, "Styles should be written using objects.", "16"],
[0, 0, 0, "Styles should be written using objects.", "17"]
],
"public/app/features/alerting/unified/components/receivers/PayloadEditor.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/alerting/unified/components/receivers/ReceiversSection.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/alerting/unified/components/receivers/TemplateDataDocs.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/alerting/unified/components/receivers/TemplateForm.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/alerting/unified/components/receivers/form/ChannelOptions.tsx:5381": [ "public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "1"],
[0, 0, 0, "Unexpected any. Specify a different type.", "2"] [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
], ],
"public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.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/alerting/unified/components/receivers/form/CollapsibleSection.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/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
],
"public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx:5381": [ "public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"], [0, 0, 0, "Do not use any type assertions.", "2"]
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"]
],
"public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.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/alerting/unified/components/receivers/form/fields/KeyValueMapInput.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/alerting/unified/components/receivers/form/fields/OptionField.tsx:5381": [ "public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"], [0, 0, 0, "Do not use any type assertions.", "2"],
[0, 0, 0, "Unexpected any. Specify a different type.", "3"], [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"], [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"], [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
[0, 0, 0, "Unexpected any. Specify a different type.", "6"],
[0, 0, 0, "Unexpected any. Specify a different type.", "7"]
],
"public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.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/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx:5381": [ "public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -1601,364 +1297,23 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"] [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
], ],
"public/app/features/alerting/unified/components/receivers/form/fields/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"]
],
"public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx:5381": [ "public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]
], ],
"public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"]
],
"public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.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/alerting/unified/components/rule-editor/CloudEvaluationBehavior.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/alerting/unified/components/rule-editor/CustomAnnotationHeaderField.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/alerting/unified/components/rule-editor/DashboardAnnotationField.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/alerting/unified/components/rule-editor/DashboardPicker.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"]
],
"public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx:5381": [ "public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"]
],
"public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.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/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"]
],
"public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.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/alerting/unified/components/rule-editor/NeedHelpInfo.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/alerting/unified/components/rule-editor/PreviewRule.tsx:5381": [ "public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.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/alerting/unified/components/rule-editor/QueryEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rule-editor/QueryOptions.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/alerting/unified/components/rule-editor/QueryWrapper.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/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.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/alerting/unified/components/rule-editor/RuleFolderPicker.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/alerting/unified/components/rule-editor/RuleInspector.tsx:5381": [ "public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/alerting/unified/components/rule-editor/VizWrapper.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/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.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/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.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/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.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/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.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/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"]
],
"public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.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/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.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/alerting/unified/components/rule-editor/rule-types/RuleType.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/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.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/alerting/unified/components/rules/ActionButton.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/CloudRules.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/alerting/unified/components/rules/EditRuleGroupModal.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/alerting/unified/components/rules/GrafanaRules.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/alerting/unified/components/rules/NoRulesCTA.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.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/alerting/unified/components/rules/RuleConfigStatus.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/alerting/unified/components/rules/RuleDetailsAnnotations.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.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/alerting/unified/components/rules/RuleHealth.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/RuleListErrors.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/alerting/unified/components/rules/RuleListStateSection.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/alerting/unified/components/rules/RuleState.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/rules/RulesGroup.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"]
],
"public/app/features/alerting/unified/components/rules/RulesTable.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/alerting/unified/components/rules/state-history/LogRecordViewer.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/alerting/unified/components/rules/state-history/LokiStateHistory.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
],
"public/app/features/alerting/unified/components/rules/state-history/StateHistory.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/alerting/unified/components/silences/Matchers.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/silences/MatchersField.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/alerting/unified/components/silences/SilenceDetails.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/alerting/unified/components/silences/SilencePeriod.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/components/silences/SilencedAlertsTable.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/alerting/unified/components/silences/SilencedInstancesPreview.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/alerting/unified/components/silences/SilencesEditor.tsx:5381": [ "public/app/features/alerting/unified/components/silences/SilencesEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
], ],
"public/app/features/alerting/unified/components/silences/SilencesFilter.tsx:5381": [ "public/app/features/alerting/unified/components/silences/SilencesFilter.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"]
], ],
"public/app/features/alerting/unified/hooks/useAlertmanagerConfig.ts:5381": [ "public/app/features/alerting/unified/hooks/useAlertmanagerConfig.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]
@ -1966,10 +1321,6 @@ exports[`better eslint`] = {
"public/app/features/alerting/unified/hooks/useControlledFieldArray.ts:5381": [ "public/app/features/alerting/unified/hooks/useControlledFieldArray.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"] [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
], ],
"public/app/features/alerting/unified/hooks/useStateHistoryModal.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/alerting/unified/mocks.ts:5381": [ "public/app/features/alerting/unified/mocks.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "1"],
@ -1985,21 +1336,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"] [0, 0, 0, "Do not use any type assertions.", "1"]
], ],
"public/app/features/alerting/unified/styles/notifications.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/alerting/unified/styles/pagination.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/alerting/unified/styles/table.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"]
],
"public/app/features/alerting/unified/types/receiver-form.ts:5381": [ "public/app/features/alerting/unified/types/receiver-form.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"] [0, 0, 0, "Unexpected any. Specify a different type.", "1"]

14
public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx
View File

@ -73,11 +73,11 @@ export const DeleteUserModalButton = ({ user }: { user: SessionUser }) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
modal: css` modal: css({
width: 500px; width: '500px',
`, }),
description: css` description: css({
font-size: ${theme.typography.body.fontSize}; fontSize: theme.typography.body.fontSize,
margin: 0; margin: 0,
`, }),
}); });

6
public/app/features/alerting/unified/AlertWarning.tsx
View File

@ -18,7 +18,7 @@ export function AlertWarning({ title, children }: AlertWarningProps) {
} }
const warningStyles = (theme: GrafanaTheme2) => ({ const warningStyles = (theme: GrafanaTheme2) => ({
warning: css` warning: css({
margin: ${theme.spacing(4)}; margin: theme.spacing(4),
`, }),
}); });

40
public/app/features/alerting/unified/AlertsFolderView.tsx
View File

@ -177,24 +177,24 @@ function filterAndSortRules(
} }
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
`, }),
card: css` card: css({
grid-template-columns: auto 1fr 2fr; gridTemplateColumns: 'auto 1fr 2fr',
margin: 0; margin: 0,
`, }),
pagination: css` pagination: css({
align-self: center; alignSelf: 'center',
`, }),
filterLabelsInput: css` filterLabelsInput: css({
flex: 1; flex: 1,
width: auto; width: 'auto',
min-width: 240px; minWidth: '240px',
`, }),
noResults: css` noResults: css({
padding: ${theme.spacing(2)}; padding: theme.spacing(2),
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
font-style: italic; fontStyle: 'italic',
`, }),
}); });

146
public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
View File

@ -187,15 +187,15 @@ function DataSourceBadge({ name, imgUrl }: DataSourceBadgeProps) {
} }
const getQueryPreviewStyles = (theme: GrafanaTheme2) => ({ const getQueryPreviewStyles = (theme: GrafanaTheme2) => ({
queryPreviewWrapper: css` queryPreviewWrapper: css({
margin: ${theme.spacing(1)}; margin: theme.spacing(1),
`, }),
contentBox: css` contentBox: css({
flex: 1 0 100%; flex: '1 0 100%',
`, }),
visualization: css` visualization: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
`, }),
dataSource: css({ dataSource: css({
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default, borderRadius: theme.shape.radius.default,
@ -297,13 +297,13 @@ const getQueryBoxStyles = (theme: GrafanaTheme2) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
}), }),
header: css` header: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
`, }),
textBlock: css({ textBlock: css({
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
padding: theme.spacing(0.5, 1), padding: theme.spacing(0.5, 1),
@ -350,12 +350,12 @@ function ClassicConditionViewer({ model }: { model: ExpressionQuery }) {
} }
const getClassicConditionViewerStyles = (theme: GrafanaTheme2) => ({ const getClassicConditionViewerStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
display: grid; display: 'grid',
grid-template-columns: max-content max-content max-content max-content max-content max-content; gridTemplateColumns: 'repeat(6, max-content)',
gap: ${theme.spacing(0, 1)}; gap: theme.spacing(0, 1),
`, }),
...getCommonQueryStyles(theme), ...getCommonQueryStyles(theme),
}); });
@ -383,17 +383,17 @@ function ReduceConditionViewer({ model }: { model: ExpressionQuery }) {
} }
const getReduceConditionViewerStyles = (theme: GrafanaTheme2) => ({ const getReduceConditionViewerStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
display: grid; display: 'grid',
gap: ${theme.spacing(0.5)}; gap: theme.spacing(0.5),
grid-template-rows: 1fr 1fr; gridTemplateRows: '1fr 1fr',
grid-template-columns: 1fr 1fr 1fr 1fr; gridTemplateColumns: 'repeat(4, 1fr)',
> :nth-child(6) { '> :nth-child(6)': {
grid-column: span 3; gridColumn: 'span 3',
} },
`, }),
...getCommonQueryStyles(theme), ...getCommonQueryStyles(theme),
}); });
@ -422,13 +422,13 @@ function ResampleExpressionViewer({ model }: { model: ExpressionQuery }) {
} }
const getResampleExpressionViewerStyles = (theme: GrafanaTheme2) => ({ const getResampleExpressionViewerStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
display: grid; display: 'grid',
gap: ${theme.spacing(0.5)}; gap: theme.spacing(0.5),
grid-template-columns: 1fr 1fr 1fr 1fr; gridTemplateColumns: 'repeat(4, 1fr)',
grid-template-rows: 1fr 1fr; gridTemplateRows: '1fr 1fr',
`, }),
...getCommonQueryStyles(theme), ...getCommonQueryStyles(theme),
}); });
@ -488,22 +488,16 @@ const getExpressionViewerStyles = (theme: GrafanaTheme2) => {
return { return {
...common, ...common,
maxWidthContainer: css` maxWidthContainer: css({
max-width: 100%; maxWidth: '100%',
`, }),
container: css` container: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
display: flex; display: 'flex',
gap: ${theme.spacing(0.5)}; gap: theme.spacing(0.5),
`, }),
blue: css` blue: css(blue, { margin: 'auto 0' }),
${blue}; bold: css(bold, { margin: 'auto 0' }),
margin: auto 0;
`,
bold: css`
${bold};
margin: auto 0;
`,
}; };
}; };
@ -521,27 +515,27 @@ function MathExpressionViewer({ model }: { model: ExpressionQuery }) {
} }
const getCommonQueryStyles = (theme: GrafanaTheme2) => ({ const getCommonQueryStyles = (theme: GrafanaTheme2) => ({
blue: css` blue: css({
color: ${theme.colors.text.link}; color: theme.colors.text.link,
`, }),
bold: css` bold: css({
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
label: css` label: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
padding: ${theme.spacing(0.5, 1)}; padding: theme.spacing(0.5, 1),
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
line-height: ${theme.typography.bodySmall.lineHeight}; lineHeight: theme.typography.bodySmall.lineHeight,
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
`, }),
value: css` value: css({
padding: ${theme.spacing(0.5, 1)}; padding: theme.spacing(0.5, 1),
border: 1px solid ${theme.colors.border.weak}; border: `1px solid ${theme.colors.border.weak}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
`, }),
}); });
function isRangeEvaluator(evaluator: { params: number[]; type: EvalFunction }) { function isRangeEvaluator(evaluator: { params: number[]; type: EvalFunction }) {

6
public/app/features/alerting/unified/NotificationPolicies.tsx
View File

@ -380,9 +380,9 @@ function findMapIntersection(...matchingRoutes: FilterResult[]): FilterResult {
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
tabContent: css` tabContent: css({
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
`, }),
}); });
interface QueryParamValues { interface QueryParamValues {

22
public/app/features/alerting/unified/PanelAlertTabContent.tsx
View File

@ -77,15 +77,15 @@ export const PanelAlertTabContent = ({ dashboard, panel }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
newButton: css` newButton: css({
margin-top: ${theme.spacing(3)}; marginTop: theme.spacing(3),
`, }),
innerWrapper: css` innerWrapper: css({
padding: ${theme.spacing(2)}; padding: theme.spacing(2),
`, }),
noRulesWrapper: css` noRulesWrapper: css({
margin: ${theme.spacing(2)}; margin: theme.spacing(2),
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
padding: ${theme.spacing(3)}; padding: theme.spacing(3),
`, }),
}); });

26
public/app/features/alerting/unified/RedirectToRuleViewer.tsx
View File

@ -137,19 +137,19 @@ export function RedirectToRuleViewer(): JSX.Element | null {
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2) {
return { return {
param: css` param: css({
font-style: italic; fontStyle: 'italic',
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
rules: css` rules: css({
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
`, }),
namespace: css` namespace: css({
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
`, }),
errorMessage: css` errorMessage: css({
white-space: pre-wrap; whiteSpace: 'pre-wrap',
`, }),
}; };
} }

38
public/app/features/alerting/unified/RuleList.tsx
View File

@ -137,25 +137,25 @@ const RuleList = withErrorBoundary(
); );
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
break: css` break: css({
width: 100%; width: '100%',
height: 0; height: 0,
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
border-bottom: solid 1px ${theme.colors.border.medium}; borderBottom: `solid 1px ${theme.colors.border.medium}`,
`, }),
buttonsContainer: css` buttonsContainer: css({
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
display: flex; display: 'flex',
justify-content: space-between; justifyContent: 'space-between',
`, }),
statsContainer: css` statsContainer: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: center; alignItems: 'center',
`, }),
expandAllButton: css` expandAllButton: css({
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
`, }),
}); });
export default RuleList; export default RuleList;

22
public/app/features/alerting/unified/components/AlertLabel.tsx
View File

@ -25,15 +25,15 @@ export const AlertLabel = ({ labelKey, value, operator = '=', onRemoveLabel }: P
}; };
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
padding: ${theme.spacing(0.5, 1)}; padding: theme.spacing(0.5, 1),
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
border: solid 1px ${theme.colors.border.medium}; border: `solid 1px ${theme.colors.border.medium}`,
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
display: inline-block; display: 'inline-block',
line-height: 1.2; lineHeight: '1.2',
`, }),
}); });

12
public/app/features/alerting/unified/components/AlertLabels.tsx
View File

@ -66,11 +66,11 @@ function getLabelColor(input: string): string {
} }
const getStyles = (theme: GrafanaTheme2, size?: LabelSize) => ({ const getStyles = (theme: GrafanaTheme2, size?: LabelSize) => ({
wrapper: css` wrapper: css({
display: flex; display: 'flex',
flex-wrap: wrap; flexWrap: 'wrap',
align-items: center; alignItems: 'center',
gap: ${size === 'md' ? theme.spacing() : theme.spacing(0.5)}; gap: size === 'md' ? theme.spacing() : theme.spacing(0.5),
`, }),
}); });

6
public/app/features/alerting/unified/components/AlertManagerPicker.tsx
View File

@ -57,7 +57,7 @@ export const AlertManagerPicker = ({ disabled = false }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
field: css` field: css({
margin: 0; margin: 0,
`, }),
}); });

52
public/app/features/alerting/unified/components/AlertStateDot.tsx
View File

@ -28,34 +28,34 @@ const getDotStyles = (theme: GrafanaTheme2, props: DotStylesProps) => {
const warningStyle = props.color === 'warning'; const warningStyle = props.color === 'warning';
return { return {
dot: css` dot: css(
width: ${size}; {
height: ${size}; width: size,
height: size,
border-radius: 100%; // eslint-disable-next-line @grafana/no-border-radius-literal
borderRadius: '100%',
background-color: ${theme.colors.secondary.main}; backgroundColor: theme.colors.secondary.main,
outline: solid ${outlineSize} ${theme.colors.secondary.transparent}; outline: `solid ${outlineSize} ${theme.colors.secondary.transparent}`,
margin: ${outlineSize}; margin: outlineSize,
},
${successStyle && successStyle &&
css({ css({
backgroundColor: theme.colors.success.main, backgroundColor: theme.colors.success.main,
outlineColor: theme.colors.success.transparent, outlineColor: theme.colors.success.transparent,
})} }),
warningStyle &&
${warningStyle && css({
css({ backgroundColor: theme.colors.warning.main,
backgroundColor: theme.colors.warning.main, outlineColor: theme.colors.warning.transparent,
outlineColor: theme.colors.warning.transparent, }),
})} errorStyle &&
css({
${errorStyle && backgroundColor: theme.colors.error.main,
css({ outlineColor: theme.colors.error.transparent,
backgroundColor: theme.colors.error.main, })
outlineColor: theme.colors.error.transparent, ),
})}
`,
}; };
}; };

6
public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
View File

@ -67,7 +67,7 @@ const AnnotationValue = ({ annotationKey, value, valueLink }: Props) => {
}; };
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
well: css` well: css({
word-break: break-word; wordBreak: 'break-word',
`, }),
}); });

48
public/app/features/alerting/unified/components/DetailsField.tsx
View File

@ -29,29 +29,29 @@ export const DetailsField = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
fieldHorizontal: css` fieldHorizontal: css({
flex-direction: row; flexDirection: 'row',
${theme.breakpoints.down('md')} { [theme.breakpoints.down('md')]: {
flex-direction: column; flexDirection: 'column',
} },
`, }),
fieldVertical: css` fieldVertical: css({
flex-direction: column; flexDirection: 'column',
`, }),
field: css` field: css({
display: flex; display: 'flex',
margin: ${theme.spacing(2)} 0; margin: `${theme.spacing(2)} 0`,
& > div:first-child { '& > div:first-child': {
width: 110px; width: '110px',
padding-right: ${theme.spacing(1)}; paddingRight: theme.spacing(1),
font-size: ${theme.typography.size.sm}; fontSize: theme.typography.size.sm,
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
line-height: 1.8; lineHeight: 1.8,
} },
& > div:nth-child(2) { '& > div:nth-child(2)': {
flex: 1; flex: 1,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
} },
`, }),
}); });

148
public/app/features/alerting/unified/components/DynamicTable.tsx
View File

@ -193,91 +193,87 @@ const getStyles = <T extends unknown>(
} }
return (theme: GrafanaTheme2) => ({ return (theme: GrafanaTheme2) => ({
container: css` container: css({
border: 1px solid ${theme.colors.border.weak}; border: `1px solid ${theme.colors.border.weak}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
row: css` row: css({
display: grid; display: 'grid',
grid-template-columns: ${sizes.join(' ')}; gridTemplateColumns: sizes.join(' '),
grid-template-rows: 1fr auto; gridTemplateRows: '1fr auto',
&:nth-child(2n + 1) { '&:nth-child(2n + 1)': {
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
} },
&:nth-child(2n) { '&:nth-child(2n)': {
background-color: ${theme.colors.background.primary}; backgroundColor: theme.colors.background.primary,
} },
${theme.breakpoints.down('sm')} { [theme.breakpoints.down('sm')]: {
grid-template-columns: auto 1fr; gridTemplateColumns: 'auto 1fr',
grid-template-areas: 'left right'; gridTemplateAreas: 'left right',
padding: 0 ${theme.spacing(0.5)}; padding: `0 ${theme.spacing(0.5)}`,
&:first-child { '&:first-child': {
display: none; display: 'none',
} },
${hasPrefixCell '& > *:first-child': {
? ` display: hasPrefixCell ? 'none' : undefined,
& > *:first-child { },
display: none; },
} }),
` footerRow: css({
: ''} display: 'flex',
} padding: theme.spacing(1),
`, }),
footerRow: css` cell: css({
display: flex; display: 'flex',
padding: ${theme.spacing(1)}; alignItems: 'center',
`, padding: theme.spacing(1),
cell: css`
display: flex;
align-items: center;
padding: ${theme.spacing(1)};
${theme.breakpoints.down('sm')} { [theme.breakpoints.down('sm')]: {
padding: ${theme.spacing(1)} 0; padding: `${theme.spacing(1)} 0`,
grid-template-columns: 1fr; gridTemplateColumns: '1fr',
} },
`, }),
bodyCell: css` bodyCell: css({
overflow: hidden; overflow: 'hidden',
${theme.breakpoints.down('sm')} { [theme.breakpoints.down('sm')]: {
grid-column-end: right; gridColumnEnd: 'right',
grid-column-start: right; gridColumnStart: 'right',
&::before { '&::before': {
content: attr(data-column); content: 'attr(data-column)',
display: block; display: 'block',
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
} },
} },
`, }),
expandCell: css` expandCell: css({
justify-content: center; justifyContent: 'center',
${theme.breakpoints.down('sm')} { [theme.breakpoints.down('sm')]: {
align-items: start; alignItems: 'start',
grid-area: left; gridArea: 'left',
} },
`, }),
expandedContentRow: css` expandedContentRow: css({
grid-column-end: ${sizes.length + 1}; gridColumnEnd: sizes.length + 1,
grid-column-start: ${hasPrefixCell ? 3 : 2}; gridColumnStart: hasPrefixCell ? 3 : 2,
grid-row: 2; gridRow: 2,
padding: 0 ${theme.spacing(3)} 0 ${theme.spacing(1)}; padding: `0 ${theme.spacing(3)} 0 ${theme.spacing(1)}`,
position: relative; position: 'relative',
${theme.breakpoints.down('sm')} { [theme.breakpoints.down('sm')]: {
grid-column-start: 2; gridColumnStart: 2,
border-top: 1px solid ${theme.colors.border.strong}; borderTop: `1px solid ${theme.colors.border.strong}`,
grid-row: auto; gridRow: 'auto',
padding: ${theme.spacing(1)} 0 0 0; padding: `${theme.spacing(1)} 0 0 0`,
} },
`, }),
}); });
}; };

62
public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx
View File

@ -43,36 +43,36 @@ export const DynamicTableWithGuidelines = <T extends object>({
}; };
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
relative: css` relative: css({
position: relative; position: 'relative',
height: 100%; height: '100%',
`, }),
guideline: css` guideline: css({
left: -19px; left: '-19px',
border-left: 1px solid ${theme.colors.border.weak}; borderLeft: `1px solid ${theme.colors.border.weak}`,
position: absolute; position: 'absolute',
${theme.breakpoints.down('md')} { [theme.breakpoints.down('md')]: {
display: none; display: 'none',
} },
`, }),
topGuideline: css` topGuideline: css({
width: 18px; width: '18px',
border-bottom: 1px solid ${theme.colors.border.medium}; borderBottom: `1px solid ${theme.colors.border.medium}`,
top: 0; top: 0,
bottom: 50%; bottom: '50%',
`, }),
bottomGuideline: css` bottomGuideline: css({
top: 50%; top: '50%',
bottom: 0; bottom: 0,
`, }),
contentGuideline: css` contentGuideline: css({
top: 0; top: 0,
bottom: 0; bottom: 0,
left: -49px !important; left: '-49px !important',
`, }),
headerGuideline: css` headerGuideline: css({
top: -17px; top: '-17px',
bottom: 0; bottom: 0,
`, }),
}); });

12
public/app/features/alerting/unified/components/EmptyArea.tsx
View File

@ -12,11 +12,11 @@ export const EmptyArea = ({ children }: React.PropsWithChildren<{}>) => {
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
container: css` container: css({
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
padding: ${theme.spacing(4)}; padding: theme.spacing(4),
text-align: center; textAlign: 'center',
`, }),
}; };
}; };

24
public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx
View File

@ -58,17 +58,17 @@ export const EmptyAreaWithCTA = ({
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
container: css` container: css({
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
padding: ${theme.spacing(4)}; padding: theme.spacing(4),
text-align: center; textAlign: 'center',
`, }),
text: css` text: css({
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
`, }),
button: css` button: css({
margin: ${theme.spacing(2, 0, 1)}; margin: theme.spacing(2, 0, 1),
`, }),
}; };
}; };

6
public/app/features/alerting/unified/components/Expression.tsx
View File

@ -53,7 +53,7 @@ export const Expression: FC<Props> = ({ expression: query, rulesSource }) => {
}; };
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
well: css` well: css({
font-family: ${theme.typography.fontFamilyMonospace}; fontFamily: theme.typography.fontFamilyMonospace,
`, }),
}); });

8
public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx
View File

@ -63,8 +63,8 @@ export function GrafanaAlertmanagerDeliveryWarning({ currentAlertmanager }: Graf
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
adminHint: css` adminHint: css({
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
font-weight: ${theme.typography.bodySmall.fontWeight}; fontWeight: theme.typography.bodySmall.fontWeight,
`, }),
}); });

58
public/app/features/alerting/unified/components/Label.tsx
View File

@ -62,45 +62,43 @@ const getStyles = (theme: GrafanaTheme2, color?: string, size?: string) => {
size === 'md' ? `${theme.spacing(0.33)} ${theme.spacing(1)}` : `${theme.spacing(0.2)} ${theme.spacing(0.6)}`; size === 'md' ? `${theme.spacing(0.33)} ${theme.spacing(1)}` : `${theme.spacing(0.2)} ${theme.spacing(0.6)}`;
return { return {
wrapper: css` wrapper: css({
color: ${fontColor}; color: fontColor,
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
border-radius: ${theme.shape.borderRadius(2)}; borderRadius: theme.shape.borderRadius(2),
`, }),
labelText: css({ labelText: css({
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
maxWidth: '300px', maxWidth: '300px',
}), }),
label: css` label: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
color: inherit; color: 'inherit',
padding: ${padding}; padding: padding,
background: ${backgroundColor}; background: backgroundColor,
border: solid 1px ${borderColor}; border: `solid 1px ${borderColor}`,
border-top-left-radius: ${theme.shape.borderRadius(2)}; borderTopLeftRadius: theme.shape.borderRadius(2),
border-bottom-left-radius: ${theme.shape.borderRadius(2)}; borderBottomLeftRadius: theme.shape.borderRadius(2),
`, }),
value: css` value: css({
color: inherit; color: 'inherit',
padding: ${padding}; padding: padding,
background: ${valueBackgroundColor}; background: valueBackgroundColor,
border: `solid 1px ${borderColor}`,
border: solid 1px ${borderColor}; borderLeft: 'none',
border-left: none; borderTopRightRadius: theme.shape.borderRadius(2),
border-top-right-radius: ${theme.shape.borderRadius(2)}; borderBottomRightRadius: theme.shape.borderRadius(2),
border-bottom-right-radius: ${theme.shape.borderRadius(2)}; whiteSpace: 'nowrap',
overflow: 'hidden',
white-space: nowrap; textOverflow: 'ellipsis',
overflow: hidden; maxWidth: '300px',
text-overflow: ellipsis; }),
max-width: 300px;
`,
}; };
}; };

6
public/app/features/alerting/unified/components/MetaText.tsx
View File

@ -36,9 +36,9 @@ const MetaText = ({ children, icon, color = 'secondary', direction = 'row', ...r
}; };
const getStyles = () => ({ const getStyles = () => ({
interactive: css` interactive: css({
cursor: pointer; cursor: 'pointer',
`, }),
}); });
export { MetaText }; export { MetaText };

6
public/app/features/alerting/unified/components/Spacer.tsx
View File

@ -13,8 +13,8 @@ import React from 'react';
export const Spacer = () => ( export const Spacer = () => (
<span <span
className={css` className={css({
flex: 1; flex: 1,
`} })}
/> />
); );

24
public/app/features/alerting/unified/components/StateColoredText.tsx
View File

@ -16,16 +16,16 @@ export const StateColoredText = ({ children, status }: React.PropsWithChildren<P
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
[PromAlertingRuleState.Inactive]: css` [PromAlertingRuleState.Inactive]: css({
color: ${theme.colors.success.text}; color: theme.colors.success.text,
`, }),
[PromAlertingRuleState.Pending]: css` [PromAlertingRuleState.Pending]: css({
color: ${theme.colors.warning.text}; color: theme.colors.warning.text,
`, }),
[PromAlertingRuleState.Firing]: css` [PromAlertingRuleState.Firing]: css({
color: ${theme.colors.error.text}; color: theme.colors.error.text,
`, }),
neutral: css` neutral: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
}); });

92
public/app/features/alerting/unified/components/StateTag.tsx
View File

@ -25,50 +25,50 @@ export const StateTag = forwardRef<HTMLElement, Props>(({ children, state, size
StateTag.displayName = 'StateTag'; StateTag.displayName = 'StateTag';
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
common: css` common: css({
display: inline-block; display: 'inline-block',
color: white; color: 'white',
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
font-size: ${theme.typography.size.sm}; fontSize: theme.typography.size.sm,
text-transform: capitalize; textTransform: 'capitalize',
line-height: 1.2; lineHeight: '1.2',
text-align: center; textAlign: 'center',
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
good: css` good: css({
background-color: ${theme.colors.success.main}; backgroundColor: theme.colors.success.main,
border: solid 1px ${theme.colors.success.main}; border: `solid 1px ${theme.colors.success.main}`,
color: ${theme.colors.success.contrastText}; color: theme.colors.success.contrastText,
`, }),
warning: css` warning: css({
background-color: ${theme.colors.warning.main}; backgroundColor: theme.colors.warning.main,
border: solid 1px ${theme.colors.warning.main}; border: `solid 1px ${theme.colors.warning.main}`,
color: ${theme.colors.warning.contrastText}; color: theme.colors.warning.contrastText,
`, }),
bad: css` bad: css({
background-color: ${theme.colors.error.main}; backgroundColor: theme.colors.error.main,
border: solid 1px ${theme.colors.error.main}; border: `solid 1px ${theme.colors.error.main}`,
color: ${theme.colors.error.contrastText}; color: theme.colors.error.contrastText,
`, }),
neutral: css` neutral: css({
background-color: ${theme.colors.secondary.main}; backgroundColor: theme.colors.secondary.main,
border: solid 1px ${theme.colors.secondary.main}; border: `solid 1px ${theme.colors.secondary.main}`,
color: ${theme.colors.secondary.contrastText}; color: theme.colors.secondary.contrastText,
`, }),
info: css` info: css({
background-color: ${theme.colors.primary.main}; backgroundColor: theme.colors.primary.main,
border: solid 1px ${theme.colors.primary.main}; border: `solid 1px ${theme.colors.primary.main}`,
color: ${theme.colors.primary.contrastText}; color: theme.colors.primary.contrastText,
`, }),
md: css` md: css({
padding: ${theme.spacing(0.5, 1)}; padding: theme.spacing(0.5, 1),
min-width: ${theme.spacing(8)}; minWidth: theme.spacing(8),
`, }),
sm: css` sm: css({
padding: ${theme.spacing(0.3, 0.5)}; padding: theme.spacing(0.3, 0.5),
min-width: 52px; minWidth: '52px',
`, }),
muted: css` muted: css({
opacity: 0.5; opacity: '0.5',
`, }),
}); });

40
public/app/features/alerting/unified/components/Tokenize.tsx
View File

@ -127,27 +127,27 @@ function tokenType(input: string) {
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
white-space: pre-wrap; whiteSpace: 'pre-wrap',
`, }),
token: css` token: css({
cursor: default; cursor: 'default',
font-family: ${theme.typography.fontFamilyMonospace}; fontFamily: theme.typography.fontFamilyMonospace,
`, }),
popover: css` popover: css({
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
box-shadow: ${theme.shadows.z3}; boxShadow: theme.shadows.z3,
background: ${theme.colors.background.primary}; background: theme.colors.background.primary,
border: 1px solid ${theme.colors.border.medium}; border: `1px solid ${theme.colors.border.medium}`,
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
`, }),
hoverTokenItem: css` hoverTokenItem: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: center; alignItems: 'center',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
`, }),
}); });
export { Tokenize, Token }; export { Tokenize, Token };

14
public/app/features/alerting/unified/components/Well.tsx
View File

@ -11,11 +11,11 @@ export const Well = ({ children, className }: Props) => {
return <div className={cx(styles.wrapper, className)}>{children}</div>; return <div className={cx(styles.wrapper, className)}>{children}</div>;
}; };
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
background-color: ${theme.components.panel.background}; backgroundColor: theme.components.panel.background,
border: solid 1px ${theme.components.input.borderColor}; border: `solid 1px ${theme.components.input.borderColor}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
padding: ${theme.spacing(0.5, 1)}; padding: theme.spacing(0.5, 1),
font-family: ${theme.typography.fontFamilyMonospace}; fontFamily: theme.typography.fontFamilyMonospace,
`, }),
}); });

24
public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx
View File

@ -79,16 +79,16 @@ export const AlertDetails = ({ alert, alertManagerSourceName }: AmNotificationsA
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
button: css` button: css({
& + & { '& + &': {
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
} },
`, }),
actionsRow: css` actionsRow: css({
padding: ${theme.spacing(2, 0)} !important; padding: `${theme.spacing(2, 0)} !important`,
border-bottom: 1px solid ${theme.colors.border.medium}; borderBottom: `1px solid ${theme.colors.border.medium}`,
`, }),
receivers: css` receivers: css({
padding: ${theme.spacing(1, 0)}; padding: theme.spacing(1, 0),
`, }),
}); });

20
public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx
View File

@ -78,14 +78,14 @@ export const AlertGroupAlertsTable = ({ alerts, alertManagerSourceName }: Props)
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
tableWrapper: css` tableWrapper: css({
margin-top: ${theme.spacing(3)}; marginTop: theme.spacing(3),
${theme.breakpoints.up('md')} { [theme.breakpoints.up('md')]: {
margin-left: ${theme.spacing(4.5)}; marginLeft: theme.spacing(4.5),
} },
`, }),
duration: css` duration: css({
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
`, }),
}); });

28
public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx
View File

@ -63,18 +63,18 @@ export const AlertGroupFilter = ({ groups }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
border-bottom: 1px solid ${theme.colors.border.medium}; borderBottom: `1px solid ${theme.colors.border.medium}`,
margin-bottom: ${theme.spacing(3)}; marginBottom: theme.spacing(3),
`, }),
filterSection: css` filterSection: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
margin-bottom: ${theme.spacing(3)}; marginBottom: theme.spacing(3),
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
`, }),
clearButton: css` clearButton: css({
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
margin-top: 19px; marginTop: '19px',
`, }),
}); });

30
public/app/features/alerting/unified/components/export/FileExportPreview.tsx
View File

@ -72,21 +72,21 @@ export function FileExportPreview({ format, textDefinition, downloadFileName, on
} }
const fileExportPreviewStyles = (theme: GrafanaTheme2) => ({ const fileExportPreviewStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
height: 100%; height: '100%',
gap: ${theme.spacing(2)}; gap: theme.spacing(2),
`, }),
content: css` content: css({
flex: 1 1 100%; flex: '1 1 100%',
`, }),
actions: css` actions: css({
flex: 0; flex: 0,
justify-content: flex-end; justifyContent: 'flex-end',
display: flex; display: 'flex',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
`, }),
}); });
function FileExportInlineDocumentation({ exportProvider }: { exportProvider: ExportProvider<unknown> }) { function FileExportInlineDocumentation({ exportProvider }: { exportProvider: ExportProvider<unknown> }) {

276
public/app/features/alerting/unified/components/expressions/Expression.tsx
View File

@ -458,161 +458,159 @@ const TimeseriesRow: FC<FrameProps & { index: number }> = ({ frame, index }) =>
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
expression: { expression: {
wrapper: css` wrapper: css({
display: flex; display: 'flex',
border: solid 1px ${theme.colors.border.medium}; border: `solid 1px ${theme.colors.border.medium}`,
flex: 1; flex: 1,
flex-basis: 400px; flexBasis: '400px',
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
`, }),
stack: css` stack: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
flex-wrap: nowrap; flexWrap: 'nowrap',
gap: 0; gap: 0,
width: 100%; width: '100%',
min-width: 0; // this one is important to prevent text overflow minWidth: '0', // this one is important to prevent text overflow
`, }),
classic: css` classic: css({
max-width: 100%; maxWidth: '100%',
`, }),
nonClassic: css` nonClassic: css({
max-width: 640px; maxWidth: '640px',
`, }),
alertCondition: css``, alertCondition: css({}),
body: css` body: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
flex: 1; flex: 1,
`, }),
description: css` description: css({
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
font-size: ${theme.typography.size.xs}; fontSize: theme.typography.size.xs,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
refId: css` refId: css({
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
color: ${theme.colors.primary.text}; color: theme.colors.primary.text,
`, }),
results: css` results: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
flex-wrap: nowrap; flexWrap: 'nowrap',
border-top: solid 1px ${theme.colors.border.medium}; borderTop: `solid 1px ${theme.colors.border.medium}`,
`, }),
noResults: css` noResults: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
justify-content: center; justifyContent: 'center',
`, }),
resultsRow: css` resultsRow: css({
padding: ${theme.spacing(0.75)} ${theme.spacing(1)}; padding: `${theme.spacing(0.75)} ${theme.spacing(1)}`,
&:nth-child(odd) { '&:nth-child(odd)': {
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
} },
&:hover { '&:hover': {
background-color: ${theme.colors.background.canvas}; backgroundColor: theme.colors.background.canvas,
} },
`, }),
labelKey: css` labelKey: css({
color: ${theme.isDark ? '#73bf69' : '#56a64b'}; color: theme.isDark ? '#73bf69' : '#56a64b',
`, }),
labelValue: css` labelValue: css({
color: ${theme.isDark ? '#ce9178' : '#a31515'}; color: theme.isDark ? '#ce9178' : '#a31515',
`, }),
resultValue: css` resultValue: css({
text-align: right; textAlign: 'right',
`, }),
resultLabel: css` resultLabel: css({
flex: 1; flex: 1,
overflow-x: auto; overflowX: 'auto',
display: inline-block; display: 'inline-block',
white-space: nowrap; whiteSpace: 'nowrap',
`, }),
noData: css` noData: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
justify-content: center; justifyContent: 'center',
padding: ${theme.spacing()}; padding: theme.spacing(),
`, }),
}, },
mutedText: css` mutedText: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-size: 0.9em; fontSize: '0.9em',
white-space: nowrap; whiteSpace: 'nowrap',
overflow: hidden; overflow: 'hidden',
text-overflow: ellipsis; textOverflow: 'ellipsis',
`, }),
header: { header: {
wrapper: css` wrapper: css({
background: ${theme.colors.background.secondary}; background: theme.colors.background.secondary,
padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
border-bottom: solid 1px ${theme.colors.border.weak}; borderBottom: `solid 1px ${theme.colors.border.weak}`,
`, }),
}, },
footer: css` footer: css({
background: ${theme.colors.background.secondary}; background: theme.colors.background.secondary,
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
border-top: solid 1px ${theme.colors.border.weak}; borderTop: `solid 1px ${theme.colors.border.weak}`,
`, }),
draggableIcon: css` draggableIcon: css({
cursor: grab; cursor: 'grab',
`, }),
mutedIcon: css` mutedIcon: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
editable: css` editable: css({
padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
border: solid 1px ${theme.colors.border.weak}; border: `solid 1px ${theme.colors.border.weak}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: center; alignItems: 'center',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
cursor: 'pointer',
}),
timeseriesTableWrapper: css({
maxHeight: '500px',
cursor: pointer; overflowY: 'scroll',
`, }),
timeseriesTableWrapper: css` timeseriesTable: css({
max-height: 500px; tableLayout: 'auto',
overflow-y: scroll; width: '100%',
`, height: '100%',
timeseriesTable: css`
table-layout: auto;
width: 100%; 'td, th': {
height: 100%; padding: theme.spacing(1),
},
td, td: {
th { background: theme.colors.background.primary,
padding: ${theme.spacing(1)}; },
}
td { th: {
background: ${theme.colors.background.primary}; background: theme.colors.background.secondary,
} },
th { tr: {
background: ${theme.colors.background.secondary}; borderBottom: `1px solid ${theme.colors.border.medium}`,
}
tr { '&:last-of-type': {
border-bottom: 1px solid ${theme.colors.border.medium}; borderBottom: 'none',
},
&:last-of-type { },
border-bottom: none; }),
}
}
`,
pagination: { pagination: {
wrapper: css` wrapper: css({
border-top: 1px solid ${theme.colors.border.medium}; borderTop: `1px solid ${theme.colors.border.medium}`,
padding: ${theme.spacing()}; padding: theme.spacing(),
`, }),
}, },
}); });

15
public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx
View File

@ -32,14 +32,13 @@ const getStyles = (theme: GrafanaTheme2) => {
const clearButton = clearButtonStyles(theme); const clearButton = clearButtonStyles(theme);
return { return {
actionLink: css` actionLink: css(clearButton, {
${clearButton}; color: theme.colors.text.link,
color: ${theme.colors.text.link}; cursor: 'pointer',
cursor: pointer;
&:hover { '&:hover': {
text-decoration: underline; textDecoration: 'underline',
} },
`, }),
}; };
}; };

12
public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx
View File

@ -221,12 +221,12 @@ function validateMuteTiming(
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
input: css` input: css({
width: 400px; width: '400px',
`, }),
submitButton: css` submitButton: css({
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
`, }),
}); });
export default MuteTimingForm; export default MuteTimingForm;

50
public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx
View File

@ -239,32 +239,32 @@ const DaysOfTheWeek = ({ defaultValue = '', onChange }: DaysOfTheWeekProps) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
input: css` input: css({
width: 400px; width: '400px',
`, }),
timeIntervalSection: css` timeIntervalSection: css({
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
padding: ${theme.spacing(2)}; padding: theme.spacing(2),
`, }),
removeTimeIntervalButton: css` removeTimeIntervalButton: css({
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
`, }),
dayOfTheWeek: css` dayOfTheWeek: css({
cursor: pointer; cursor: 'pointer',
user-select: none; userSelect: 'none',
padding: ${theme.spacing(1)} ${theme.spacing(3)}; padding: `${theme.spacing(1)} ${theme.spacing(3)}`,
border: solid 1px ${theme.colors.border.medium}; border: `solid 1px ${theme.colors.border.medium}`,
background: none; background: 'none',
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
&.selected { '&.selected': {
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
color: ${theme.colors.primary.text}; color: theme.colors.primary.text,
border-color: ${theme.colors.primary.border}; borderColor: theme.colors.primary.border,
background: ${theme.colors.primary.transparent}; background: theme.colors.primary.transparent,
} },
`, }),
}); });

30
public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
View File

@ -163,19 +163,19 @@ export const MuteTimingTimeRange = ({ intervalIndex }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
field: css` field: css({
margin-bottom: 0; marginBottom: 0,
`, }),
timeRange: css` timeRange: css({
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
`, }),
timeRangeInput: css` timeRangeInput: css({
width: 90px; width: '90px',
`, }),
deleteTimeRange: css` deleteTimeRange: css({
margin: ${theme.spacing(1)} 0 0 ${theme.spacing(0.5)}; margin: `${theme.spacing(1)} 0 0 ${theme.spacing(0.5)}`,
`, }),
addTimeRange: css` addTimeRange: css({
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
`, }),
}); });

16
public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
View File

@ -300,14 +300,14 @@ function ActionsAndBadge({ muteTiming, alertManagerSourceName, setMuteTimingName
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
display: flex; display: 'flex',
flex-flow: column nowrap; flexFlow: 'column nowrap',
`, }),
muteTimingsButtons: css` muteTimingsButtons: css({
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
align-self: flex-end; alignSelf: 'flex-end',
`, }),
disabledBadge: css({ disabledBadge: css({
height: 'fit-content', height: 'fit-content',
}), }),

32
public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
View File

@ -310,21 +310,21 @@ const getStyles = (theme: GrafanaTheme2) => {
const commonSpacing = theme.spacing(3.5); const commonSpacing = theme.spacing(3.5);
return { return {
addMatcherBtn: css` addMatcherBtn: css({
margin-bottom: ${commonSpacing}; marginBottom: commonSpacing,
`, }),
matchersContainer: css` matchersContainer: css({
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
padding: ${theme.spacing(1.5)} ${theme.spacing(2)}; padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
padding-bottom: 0; paddingBottom: 0,
width: fit-content; width: 'fit-content',
`, }),
matchersOperator: css` matchersOperator: css({
min-width: 120px; minWidth: '120px',
`, }),
noMatchersWarning: css` noMatchersWarning: css({
padding: ${theme.spacing(1)} ${theme.spacing(2)}; padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
`, }),
}; };
}; };

26
public/app/features/alerting/unified/components/notification-policies/Matchers.tsx
View File

@ -72,23 +72,23 @@ const getStyles = (theme: GrafanaTheme2) => ({
const { color, borderColor } = getTagColorsFromName(label); const { color, borderColor } = getTagColorsFromName(label);
return { return {
wrapper: css` wrapper: css({
color: #fff; color: '#fff',
background: ${color}; background: color,
padding: ${theme.spacing(0.33)} ${theme.spacing(0.66)}; padding: `${theme.spacing(0.33)} ${theme.spacing(0.66)}`,
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
border: solid 1px ${borderColor}; border: `solid 1px ${borderColor}`,
border-radius: ${theme.shape.borderRadius(2)}; borderRadius: theme.shape.borderRadius(2),
`, }),
}; };
}, },
metadata: css` metadata: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
font-weight: ${theme.typography.bodySmall.fontWeight}; fontWeight: theme.typography.bodySmall.fontWeight,
`, }),
}); });
export { Matchers }; export { Matchers };

36
public/app/features/alerting/unified/components/notification-policies/PromDurationDocs.tsx
View File

@ -47,22 +47,22 @@ function PromDurationDocsTimeUnit({ unit, name, example }: { unit: TimeOptions;
} }
const getPromDurationStyles = (theme: GrafanaTheme2) => ({ const getPromDurationStyles = (theme: GrafanaTheme2) => ({
unit: css` unit: css({
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
list: css` list: css({
display: grid; display: 'grid',
grid-template-columns: max-content 1fr 2fr; gridTemplateColumns: 'max-content 1fr 2fr',
gap: ${theme.spacing(1, 3)}; gap: theme.spacing(1, 3),
`, }),
header: css` header: css({
display: contents; display: 'contents',
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
examples: css` examples: css({
display: contents; display: 'contents',
& > div { '& > div': {
grid-column: 1 / span 2; gridColumn: '1 / span 2',
} },
`, }),
}); });

50
public/app/features/alerting/unified/components/notification-policies/formStyles.ts
View File

@ -4,31 +4,31 @@ import { GrafanaTheme2 } from '@grafana/data';
export const getFormStyles = (theme: GrafanaTheme2) => { export const getFormStyles = (theme: GrafanaTheme2) => {
return { return {
container: css` container: css({
align-items: center; alignItems: 'center',
display: flex; display: 'flex',
flex-flow: row nowrap; flexFlow: 'row nowrap',
& > * + * { '& > * + *': {
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
} },
`, }),
input: css` input: css({
flex: 1; flex: 1,
`, }),
promDurationInput: css` promDurationInput: css({
max-width: ${theme.spacing(32)}; maxWidth: theme.spacing(32),
`, }),
timingFormContainer: css` timingFormContainer: css({
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
`, }),
linkText: css` linkText: css({
text-decoration: underline; textDecoration: 'underline',
`, }),
collapse: css` collapse: css({
border: none; border: 'none',
background: none; background: 'none',
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
`, }),
}; };
}; };

183
public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx
View File

@ -283,101 +283,100 @@ const getStyles = (theme: GrafanaTheme2) => {
const clearButton = clearButtonStyles(theme); const clearButton = clearButtonStyles(theme);
return { return {
container: css` container: css({
display: grid; display: 'grid',
grid-template-columns: 1fr 1.5fr; gridTemplateColumns: '1fr 1.5fr',
grid-template-rows: min-content auto; gridTemplateRows: 'min-content auto',
gap: ${theme.spacing(2)}; gap: theme.spacing(2),
flex: 1; flex: 1,
`, }),
tag: css` tag: css({
margin: 5px; margin: '5px',
`, }),
column: css` column: css({
flex: 1 1 auto; flex: '1 1 auto',
`, }),
alertLabels: css` alertLabels: css({
overflow-x: auto; overflowX: 'auto',
height: 32px; height: '32px',
`, }),
ruleTitle: css` ruleTitle: css({
height: 22px; height: '22px',
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
rowButton: css` rowButton: css(clearButton, {
${clearButton}; padding: theme.spacing(0.5),
padding: ${theme.spacing(0.5)}; overflow: 'hidden',
overflow: hidden; textOverflow: 'ellipsis',
text-overflow: ellipsis; textAlign: 'left',
text-align: left; whiteSpace: 'nowrap',
white-space: nowrap; cursor: 'pointer',
cursor: pointer; border: '2px solid transparent',
border: 2px solid transparent;
&:disabled { '&:disabled': {
cursor: not-allowed; cursor: 'not-allowed',
color: ${theme.colors.text.disabled}; color: theme.colors.text.disabled,
} },
`, }),
rowButtonTitle: css` rowButtonTitle: css({
overflow-x: auto; overflowX: 'auto',
`, }),
rowSelected: css` rowSelected: css({
border-color: ${theme.colors.primary.border}; borderColor: theme.colors.primary.border,
`, }),
rowOdd: css` rowOdd: css({
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
`, }),
instanceButton: css` instanceButton: css({
display: flex; display: 'flex',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
justify-content: space-between; justifyContent: 'space-between',
align-items: center; alignItems: 'center',
`, }),
loadingPlaceholder: css` loadingPlaceholder: css({
height: 100%; height: '100%',
display: flex; display: 'flex',
justify-content: center; justifyContent: 'center',
align-items: center; alignItems: 'center',
`, }),
selectedRulePlaceholder: css` selectedRulePlaceholder: css({
width: 100%; width: '100%',
height: 100%; height: '100%',
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
justify-content: center; justifyContent: 'center',
text-align: center; textAlign: 'center',
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
modal: css` modal: css({
height: 100%; height: '100%',
`, }),
modalContent: css` modalContent: css({
flex: 1; flex: 1,
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
`, }),
modalAlert: css` modalAlert: css({
flex-grow: 0; flexGrow: 0,
`, }),
warnIcon: css` warnIcon: css({
fill: ${theme.colors.warning.main}; fill: theme.colors.warning.main,
`, }),
labels: css` labels: css({
justify-content: flex-start; justifyContent: 'flex-start',
`, }),
alertFolder: css` alertFolder: css({
height: 20px; height: '20px',
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: flex-start; justifyContent: 'flex-start',
column-gap: ${theme.spacing(1)}; columnGap: theme.spacing(1),
align-items: center; alignItems: 'center',
`, }),
}; };
}; };

30
public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx
View File

@ -153,14 +153,14 @@ const AlertTemplateDataTable = () => {
return <TemplateDataTable dataItems={AlertTemplatePreviewData} />; return <TemplateDataTable dataItems={AlertTemplatePreviewData} />;
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
height: 100%; height: '100%',
`, }),
tooltip: css` tooltip: css({
padding-left: ${theme.spacing(1)}; paddingLeft: theme.spacing(1),
`, }),
label: css({ label: css({
margin: 0, margin: 0,
}), }),
@ -171,12 +171,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: 'fit-content', width: 'fit-content',
border: 'none', border: 'none',
}), }),
templateDataDocsHeader: css` templateDataDocsHeader: css({
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
span { span: {
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
} },
`, }),
}); });

16
public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx
View File

@ -68,12 +68,12 @@ export const ReceiversSection = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
heading: css` heading: css({
display: flex; display: 'flex',
justify-content: space-between; justifyContent: 'space-between',
align-items: flex-end; alignItems: 'flex-end',
`, }),
description: css` description: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
}); });

65
public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
View File

@ -52,17 +52,17 @@ export function TemplateDataDocs() {
} }
const getTemplateDataDocsStyles = (theme: GrafanaTheme2) => ({ const getTemplateDataDocsStyles = (theme: GrafanaTheme2) => ({
header: css` header: css({
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
span { span: {
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
} },
`, }),
interactiveType: css` interactiveType: css({
color: ${theme.colors.text.link}; color: theme.colors.text.link,
`, }),
}); });
interface TemplateDataTableProps { interface TemplateDataTableProps {
@ -132,33 +132,32 @@ function KeyValueTemplateDataTable() {
} }
const getTemplateDataTableStyles = (theme: GrafanaTheme2) => ({ const getTemplateDataTableStyles = (theme: GrafanaTheme2) => ({
table: css` table: css({
border-collapse: collapse; borderCollapse: 'collapse',
width: 100%; width: '100%',
caption { caption: {
caption-side: top; captionSide: 'top',
} },
td, 'td, th': {
th { padding: theme.spacing(1, 1),
padding: ${theme.spacing(1, 1)}; },
}
thead { thead: {
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
} },
tbody tr:nth-child(2n + 1) { 'tbody tr:nth-child(2n + 1)': {
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
} },
tbody td:nth-child(1) { 'tbody td:nth-child(1)': {
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
} },
tbody td:nth-child(2) { 'tbody td:nth-child(2)': {
font-style: italic; fontStyle: 'italic',
} },
`, }),
}); });

16
public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
View File

@ -429,14 +429,14 @@ export const getStyles = (theme: GrafanaTheme2) => {
display: 'none', display: 'none',
}, },
}), }),
snippets: css` snippets: css({
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
`, }),
code: css` code: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
}; };
}; };

46
public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
View File

@ -227,27 +227,27 @@ export function ChannelSubForm<R extends ChannelValues>({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
buttons: css` buttons: css({
& > * + * { '& > * + *': {
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
} },
`, }),
innerContent: css` innerContent: css({
max-width: 536px; maxWidth: '536px',
`, }),
wrapper: css` wrapper: css({
margin: ${theme.spacing(2, 0)}; margin: theme.spacing(2, 0),
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
border: solid 1px ${theme.colors.border.medium}; border: `solid 1px ${theme.colors.border.medium}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
max-width: ${theme.breakpoints.values.xl}${theme.breakpoints.unit}; maxWidth: `${theme.breakpoints.values.xl}${theme.breakpoints.unit}`,
`, }),
topRow: css` topRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: space-between; justifyContent: 'space-between',
`, }),
channelSettingsHeader: css` channelSettingsHeader: css({
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
`, }),
}); });

40
public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
View File

@ -41,24 +41,24 @@ export const CollapsibleSection = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
padding-bottom: ${theme.spacing(1)}; paddingBottom: theme.spacing(1),
`, }),
toggle: css` toggle: css({
margin: ${theme.spacing(1, 0)}; margin: theme.spacing(1, 0),
padding: 0; padding: 0,
`, }),
hidden: css` hidden: css({
display: none; display: 'none',
`, }),
description: css` description: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-size: ${theme.typography.size.sm}; fontSize: theme.typography.size.sm,
font-weight: ${theme.typography.fontWeightRegular}; fontWeight: theme.typography.fontWeightRegular,
margin: 0; margin: 0,
`, }),
content: css` content: css({
padding-left: ${theme.spacing(3)}; paddingLeft: theme.spacing(3),
`, }),
}); });

54
public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
View File

@ -145,31 +145,31 @@ export const GenerateAlertDataModal = ({ isOpen, onDismiss, onAccept }: Props) =
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
section: css` section: css({
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
`, }),
onAddButton: css` onAddButton: css({
flex: none; flex: 'none',
width: fit-content; width: 'fit-content',
padding-right: ${theme.spacing(1)}; paddingRight: theme.spacing(1),
margin-left: auto; marginLeft: 'auto',
`, }),
flexWrapper: css` flexWrapper: css({
display: flex; display: 'flex',
flex-direction: row, flexDirection: 'row',
justify-content: space-between; justifyContent: 'space-between',
`, }),
onSubmitWrapper: css` onSubmitWrapper: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: baseline; alignItems: 'baseline',
justify-content: flex-end; justifyContent: 'flex-end',
`, }),
onSubmitButton: css` onSubmitButton: css({
margin-left: ${theme.spacing(2)}; marginLeft: theme.spacing(2),
`, }),
result: css` result: css({
width: 570px; width: '570px',
height: 363px; height: '363px',
`, }),
}); });

18
public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
View File

@ -209,16 +209,16 @@ export function ReceiverForm<R extends ChannelValues>({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
heading: css` heading: css({
margin: ${theme.spacing(4, 0)}; margin: theme.spacing(4, 0),
`, }),
buttons: css` buttons: css({
margin-top: ${theme.spacing(4)}; marginTop: theme.spacing(4),
& > * + * { '& > * + *': {
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
} },
`, }),
}); });
function getErrorMessage(error: unknown) { function getErrorMessage(error: unknown) {

18
public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx
View File

@ -108,13 +108,13 @@ export const TestContactPointModal = ({ isOpen, onDismiss, onTest }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
flexRow: css` flexRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: flex-start; alignItems: 'flex-start',
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
`, }),
section: css` section: css({
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
`, }),
}); });

16
public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
View File

@ -94,14 +94,14 @@ export const KeyValueMapInput = ({ value, onChange, readOnly = false }: Props) =
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
addButton: css` addButton: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
`, }),
table: css` table: css({
tbody td { 'tbody td': {
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} 0; padding: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`,
} },
`, }),
}); });
const pairsToRecord = (pairs: Array<[string, string]>): Record<string, string> => { const pairsToRecord = (pairs: Array<[string, string]>): Record<string, string> => {

12
public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
View File

@ -218,12 +218,12 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
checkbox: css` checkbox: css({
height: auto; // native checkbox has fixed height which does not take into account description height: 'auto', // native checkbox has fixed height which does not take into account description
`, }),
legend: css` legend: css({
font-size: ${theme.typography.h6.fontSize}; fontSize: theme.typography.h6.fontSize,
`, }),
}); });
const validateOption = (value: string, validationRule: string, required: boolean) => { const validateOption = (value: string, validationRule: string, required: boolean) => {

24
public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx
View File

@ -64,16 +64,16 @@ export const StringArrayInput = ({ value, onChange, readOnly = false }: Props) =
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
row: css` row: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
align-items: center; alignItems: 'center',
`, }),
deleteIcon: css` deleteIcon: css({
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
`, }),
addButton: css` addButton: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
`, }),
}); });

50
public/app/features/alerting/unified/components/receivers/form/fields/styles.ts
View File

@ -3,29 +3,29 @@ import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
export const getReceiverFormFieldStyles = (theme: GrafanaTheme2) => ({ export const getReceiverFormFieldStyles = (theme: GrafanaTheme2) => ({
collapsibleSection: css` collapsibleSection: css({
margin: 0; margin: 0,
padding: 0; padding: 0,
`, }),
wrapper: css` wrapper: css({
margin: ${theme.spacing(2, 0)}; margin: theme.spacing(2, 0),
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
border: solid 1px ${theme.colors.border.medium}; border: `solid 1px ${theme.colors.border.medium}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
position: relative; position: 'relative',
`, }),
description: css` description: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-size: ${theme.typography.size.sm}; fontSize: theme.typography.size.sm,
font-weight: ${theme.typography.fontWeightRegular}; fontWeight: theme.typography.fontWeightRegular,
margin: 0; margin: 0,
`, }),
deleteIcon: css` deleteIcon: css({
position: absolute; position: 'absolute',
right: ${theme.spacing(1)}; right: theme.spacing(1),
top: ${theme.spacing(1)}; top: theme.spacing(1),
`, }),
addButton: css` addButton: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
`, }),
}); });

80
public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
View File

@ -205,50 +205,50 @@ const AnnotationsStep = () => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
annotationValueInput: css` annotationValueInput: css({
width: 394px; width: '394px',
`, }),
textarea: css` textarea: css({
height: 76px; height: '76px',
`, }),
addAnnotationsButtonContainer: css` addAnnotationsButtonContainer: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
display: flex; display: 'flex',
`, }),
field: css` field: css({
margin-bottom: ${theme.spacing(0.5)}; marginBottom: theme.spacing(0.5),
`, }),
flexRow: css` flexRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: flex-start; justifyContent: 'flex-start',
`, }),
flexRowItemMargin: css` flexRowItemMargin: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
`, }),
deleteAnnotationButton: css` deleteAnnotationButton: css({
display: inline-block; display: 'inline-block',
margin-top: 10px; marginTop: '10px',
margin-left: 10px; marginLeft: '10px',
`, }),
annotationTitle: css` annotationTitle: css({
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
margin-bottom: 3px; marginBottom: '3px',
`, }),
annotationContainer: css` annotationContainer: css({
margin-top: 5px; marginTop: '5px',
`, }),
annotationDescription: css` annotationDescription: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
annotationValueContainer: css` annotationValueContainer: css({
display: flex; display: 'flex',
`, }),
}); });
export default AnnotationsStep; export default AnnotationsStep;

78
public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx
View File

@ -56,53 +56,51 @@ export function CloudAlertPreview({ preview }: CloudAlertPreviewProps) {
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
table: css` table: css({
width: 100%; width: '100%',
margin: ${theme.spacing(2, 0)}; margin: theme.spacing(2, 0),
caption { caption: {
caption-side: top; captionSide: 'top',
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
& > span { '& > span': {
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
} },
} },
td, 'td, th': {
th { padding: theme.spacing(1, 1),
padding: ${theme.spacing(1, 1)}; },
}
td + td, 'td + td, th + th': {
th + th { paddingLeft: theme.spacing(3),
padding-left: ${theme.spacing(3)}; },
}
thead th { 'thead th': {
&:nth-child(1) { '&:nth-child(1)': {
width: 80px; width: '80px',
} },
&:nth-child(2) { '&:nth-child(2)': {
width: auto; width: 'auto',
} },
&:nth-child(3) { '&:nth-child(3)': {
width: 40px; width: '40px',
} },
} },
td:nth-child(3) { 'td:nth-child(3)': {
text-align: center; textAlign: 'center',
} },
tbody tr:nth-child(2n + 1) { 'tbody tr:nth-child(2n + 1)': {
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
} },
`, }),
tagList: css` tagList: css({
justify-content: flex-start; justifyContent: 'flex-start',
`, }),
}); });

24
public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
View File

@ -62,16 +62,16 @@ export const CloudEvaluationBehavior = () => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
inlineField: css` inlineField: css({
margin-bottom: 0; marginBottom: 0,
`, }),
flexRow: css` flexRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: flex-start; justifyContent: 'flex-start',
align-items: flex-start; alignItems: 'flex-start',
`, }),
timeUnit: css` timeUnit: css({
margin-left: ${theme.spacing(0.5)}; marginLeft: theme.spacing(0.5),
`, }),
}); });

16
public/app/features/alerting/unified/components/rule-editor/CustomAnnotationHeaderField.tsx
View File

@ -25,15 +25,15 @@ const CustomAnnotationHeaderField = ({ field }: CustomAnnotationHeaderFieldProps
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
annotationTitle: css` annotationTitle: css({
color: ${theme.colors.text.primary}; color: theme.colors.text.primary,
margin-bottom: 3px; marginBottom: '3px',
`, }),
customAnnotationInput: css` customAnnotationInput: css({
margin-top: 5px; marginTop: '5px',
width: 100%; width: '100%',
`, }),
}); });
export default CustomAnnotationHeaderField; export default CustomAnnotationHeaderField;

28
public/app/features/alerting/unified/components/rule-editor/DashboardAnnotationField.tsx
View File

@ -63,22 +63,22 @@ const DashboardAnnotationField = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
margin-top: 5px; marginTop: '5px',
`, }),
noLink: css` noLink: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
link: css` link: css({
color: ${theme.colors.text.link}; color: theme.colors.text.link,
margin-right: ${theme.spacing(1.5)}; marginRight: theme.spacing(1.5),
`, }),
icon: css` icon: css({
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
cursor: pointer; cursor: 'pointer',
`, }),
}); });
export default DashboardAnnotationField; export default DashboardAnnotationField;

165
public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
View File

@ -288,89 +288,88 @@ const getPickerStyles = (theme: GrafanaTheme2) => {
const clearButton = clearButtonStyles(theme); const clearButton = clearButtonStyles(theme);
return { return {
container: css` container: css({
display: grid; display: 'grid',
grid-template-columns: 1fr 1fr; gridTemplateColumns: '1fr 1fr',
grid-template-rows: min-content auto; gridTemplateRows: 'min-content auto',
gap: ${theme.spacing(2)}; gap: theme.spacing(2),
flex: 1; flex: 1,
`, }),
column: css` column: css({
flex: 1 1 auto; flex: '1 1 auto',
`, }),
dashboardTitle: css` dashboardTitle: css({
height: 22px; height: '22px',
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
dashboardFolder: css` dashboardFolder: css({
height: 20px; height: '20px',
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: flex-start; justifyContent: 'flex-start',
column-gap: ${theme.spacing(1)}; columnGap: theme.spacing(1),
align-items: center; alignItems: 'center',
`, }),
rowButton: css` rowButton: css(clearButton, {
${clearButton}; padding: theme.spacing(0.5),
padding: ${theme.spacing(0.5)}; overflow: 'hidden',
overflow: hidden; textOverflow: 'ellipsis',
text-overflow: ellipsis; textAlign: 'left',
text-align: left; whiteSpace: 'nowrap',
white-space: nowrap; cursor: 'pointer',
cursor: pointer; border: '2px solid transparent',
border: 2px solid transparent;
&:disabled { '&:disabled': {
cursor: not-allowed; cursor: 'not-allowed',
color: ${theme.colors.text.disabled}; color: theme.colors.text.disabled,
} },
`, }),
rowButtonTitle: css` rowButtonTitle: css({
text-overflow: ellipsis; textOverflow: 'ellipsis',
overflow: hidden; overflow: 'hidden',
`, }),
rowSelected: css` rowSelected: css({
border-color: ${theme.colors.primary.border}; borderColor: theme.colors.primary.border,
`, }),
rowOdd: css` rowOdd: css({
background-color: ${theme.colors.background.secondary}; backgroundColor: theme.colors.background.secondary,
`, }),
panelButton: css` panelButton: css({
display: flex; display: 'flex',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
justify-content: space-between; justifyContent: 'space-between',
align-items: center; alignItems: 'center',
`, }),
loadingPlaceholder: css` loadingPlaceholder: css({
height: 100%; height: '100%',
display: flex; display: 'flex',
justify-content: center; justifyContent: 'center',
align-items: center; alignItems: 'center',
`, }),
selectDashboardPlaceholder: css` selectDashboardPlaceholder: css({
width: 100%; width: '100%',
height: 100%; height: '100%',
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
justify-content: center; justifyContent: 'center',
text-align: center; textAlign: 'center',
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
modal: css` modal: css({
height: 100%; height: '100%',
`, }),
modalContent: css` modalContent: css({
flex: 1; flex: 1,
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
`, }),
modalAlert: css` modalAlert: css({
flex-grow: 0; flexGrow: 0,
`, }),
warnIcon: css` warnIcon: css({
fill: ${theme.colors.warning.main}; fill: theme.colors.warning.main,
`, }),
}; };
}; };

14
public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
View File

@ -105,13 +105,13 @@ export const ExpressionEditor = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
preview: css` preview: css({
padding: ${theme.spacing(2, 0)}; padding: theme.spacing(2, 0),
max-width: ${theme.breakpoints.values.xl}px; maxWidth: `${theme.breakpoints.values.xl}px`,
`, }),
previewAlert: css` previewAlert: css({
margin: ${theme.spacing(1, 0)}; margin: theme.spacing(1, 0),
`, }),
}); });
type QueryMappers<T extends DataQuery = DataQuery> = { type QueryMappers<T extends DataQuery = DataQuery> = {

12
public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
View File

@ -69,10 +69,10 @@ export const ExpressionsEditor = ({
); );
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
display: flex; display: 'flex',
gap: ${theme.spacing(2)}; gap: theme.spacing(2),
align-content: stretch; alignContent: 'stretch',
flex-wrap: wrap; flexWrap: 'wrap',
`, }),
}); });

34
public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx
View File

@ -446,21 +446,21 @@ function EvaluationGroupCreationModal({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
align-items: baseline; alignItems: 'baseline',
max-width: ${theme.breakpoints.values.lg}px; maxWidth: `${theme.breakpoints.values.lg}px`,
justify-content: space-between; justifyContent: 'space-between',
`, }),
formInput: css` formInput: css({
flex-grow: 1; flexGrow: 1,
`, }),
modal: css` modal: css({
width: ${theme.breakpoints.values.sm}px; width: `${theme.breakpoints.values.sm}px`,
`, }),
modalTitle: css` modalTitle: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
`, }),
}); });

78
public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
View File

@ -320,44 +320,44 @@ export function GrafanaEvaluationBehavior({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
inlineField: css` inlineField: css({
margin-bottom: 0; marginBottom: 0,
`, }),
evaluateLabel: css` evaluateLabel: css({
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
`, }),
evaluationContainer: css` evaluationContainer: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
max-width: ${theme.breakpoints.values.sm}px; maxWidth: `${theme.breakpoints.values.sm}px`,
font-size: ${theme.typography.size.sm}; fontSize: theme.typography.size.sm,
`, }),
intervalChangedLabel: css` intervalChangedLabel: css({
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
`, }),
warningIcon: css` warningIcon: css({
justify-self: center; justifySelf: 'center',
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
color: ${theme.colors.warning.text}; color: theme.colors.warning.text,
`, }),
infoIcon: css` infoIcon: css({
margin-left: 10px; marginLeft: '10px',
`, }),
warningMessage: css` warningMessage: css({
color: ${theme.colors.warning.text}; color: theme.colors.warning.text,
`, }),
bold: css` bold: css({
font-weight: bold; fontWeight: 'bold',
`, }),
alignInterval: css` alignInterval: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
margin-left: -${theme.spacing(1)}; marginLeft: `-${theme.spacing(1)}`,
`, }),
marginTop: css` marginTop: css({
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
`, }),
switchLabel: css(` switchLabel: css({
color: ${theme.colors.text.primary}, color: theme.colors.text.primary,
cursor: 'pointer', cursor: 'pointer',
fontSize: ${theme.typography.bodySmall.fontSize}, fontSize: theme.typography.bodySmall.fontSize,
`), }),
}); });

22
public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
View File

@ -109,16 +109,16 @@ export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
}; };
const getStyle = (theme: GrafanaTheme2) => ({ const getStyle = (theme: GrafanaTheme2) => ({
flexRow: css` flexRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: flex-start; justifyContent: 'flex-start',
& > * + * { '& > * + *': {
margin-left: ${theme.spacing(3)}; marginLeft: theme.spacing(3),
} },
`, }),
input: css` input: css({
width: 330px !important; width: '330px !important',
`, }),
}); });

16
public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx
View File

@ -49,12 +49,12 @@ export function NeedHelpInfo({ contentText, externalLink, linkText, title = 'Nee
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
mutedText: css` mutedText: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
font-size: ${theme.typography.size.sm}; fontSize: theme.typography.size.sm,
`, }),
helpInfo: css` helpInfo: css({
cursor: pointer; cursor: 'pointer',
text-decoration: underline; textDecoration: 'underline',
`, }),
}); });

8
public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
View File

@ -112,9 +112,9 @@ function isCompleted(response: PreviewRuleResponse): boolean {
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2) {
return { return {
container: css` container: css({
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
max-width: ${theme.breakpoints.values.xxl}px; maxWidth: `${theme.breakpoints.values.xxl}px`,
`, }),
}; };
} }

20
public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
View File

@ -76,15 +76,15 @@ export function PreviewRuleResult(props: Props): React.ReactElement | null {
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2) {
return { return {
container: css` container: css({
margin: ${theme.spacing(2)} 0; margin: `${theme.spacing(2)} 0`,
`, }),
table: css` table: css({
flex: 1 1 auto; flex: '1 1 auto',
height: 135px; height: '135px',
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
border: 1px solid ${theme.colors.border.medium}; border: `1px solid ${theme.colors.border.medium}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
`, }),
}; };
} }

8
public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
View File

@ -47,8 +47,8 @@ export const QueryEditor = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
background-color: ${theme.colors.background.primary}; backgroundColor: theme.colors.background.primary,
height: 100%; height: '100%',
`, }),
}); });

33
public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx
View File

@ -67,25 +67,24 @@ const getStyles = (theme: GrafanaTheme2) => {
const clearButton = clearButtonStyles(theme); const clearButton = clearButtonStyles(theme);
return { return {
queryOptions: css` queryOptions: css({
> div { '> div': {
justify-content: space-between; justifyContent: 'space-between',
} },
`, }),
staticValues: css` staticValues: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
`, }),
actionLink: css` actionLink: css(clearButton, {
${clearButton}; color: theme.colors.text.link,
color: ${theme.colors.text.link}; cursor: 'pointer',
cursor: pointer;
&:hover { '&:hover': {
text-decoration: underline; textDecoration: 'underline',
} },
`, }),
}; };
}; };

34
public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
View File

@ -264,22 +264,22 @@ export function MinIntervalOption({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
label: AlertingQueryWrapper; label: 'AlertingQueryWrapper',
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
border: 1px solid ${theme.colors.border.weak}; border: `1px solid ${theme.colors.border.weak}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
button { button: {
overflow: visible; overflow: 'visible',
} },
`, }),
dsTooltip: css` dsTooltip: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
&:hover { '&:hover': {
opacity: 0.85; opacity: 0.85,
cursor: pointer; cursor: 'pointer',
} },
`, }),
}); });

6
public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx
View File

@ -115,7 +115,7 @@ export const RecordingRuleEditor: FC<RecordingRuleEditorProps> = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
vizWrapper: css` vizWrapper: css({
margin: ${theme.spacing(1, 0)}; margin: theme.spacing(1, 0),
`, }),
}); });

26
public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
View File

@ -40,17 +40,17 @@ export const RuleEditorSection = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
parent: css` parent: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
border: solid 1px ${theme.colors.border.weak}; border: `solid 1px ${theme.colors.border.weak}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
padding: ${theme.spacing(2)} ${theme.spacing(3)}; padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
`, }),
description: css` description: css({
margin-top: -${theme.spacing(2)}; marginTop: `-${theme.spacing(2)}`,
`, }),
fullWidth: css` fullWidth: css({
width: 100%; width: '100%',
`, }),
}); });

22
public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
View File

@ -63,15 +63,15 @@ export function RuleFolderPicker(props: RuleFolderPickerProps) {
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
slashNotAllowed: css` slashNotAllowed: css({
color: ${theme.colors.warning.main}; color: theme.colors.warning.main,
font-size: 12px; fontSize: '12px',
margin-bottom: 2px; marginBottom: '2px',
`, }),
infoIcon: css` infoIcon: css({
color: ${theme.colors.warning.main}; color: theme.colors.warning.main,
font-size: 12px; fontSize: '12px',
margin-bottom: 2px; marginBottom: '2px',
cursor: pointer; cursor: 'pointer',
`, }),
}); });

38
public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx
View File

@ -155,26 +155,26 @@ function rulerRuleToRuleFormValues(rulerRule: RulerRuleDTO): Partial<RuleFormVal
} }
export const yamlTabStyle = (theme: GrafanaTheme2) => ({ export const yamlTabStyle = (theme: GrafanaTheme2) => ({
content: css` content: css({
flex-grow: 1; flexGrow: 1,
height: 100%; height: '100%',
padding-bottom: 16px; paddingBottom: '16px',
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
`, }),
applyButton: css` applyButton: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: space-between; justifyContent: 'space-between',
align-items: center; alignItems: 'center',
flex-grow: 0; flexGrow: 0,
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
`, }),
}); });
export const drawerStyles = () => ({ export const drawerStyles = () => ({
subtitle: css` subtitle: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
justify-content: space-between; justifyContent: 'space-between',
`, }),
}); });

24
public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
View File

@ -64,19 +64,19 @@ export const VizWrapper = ({ data, thresholds, thresholdsType }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
width: 100%; width: '100%',
position: relative; position: 'relative',
`, }),
instantVectorResultWrapper: css` instantVectorResultWrapper: css({
border: solid 1px ${theme.colors.border.medium}; border: `solid 1px ${theme.colors.border.medium}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
padding: 0; padding: 0,
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
flex-wrap: nowrap; flexWrap: 'nowrap',
`, }),
title: css({ title: css({
label: 'panel-title', label: 'panel-title',
padding: theme.spacing(), padding: theme.spacing(),

16
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx
View File

@ -26,12 +26,12 @@ export function NotificationPolicyMatchers({ route, matcherFormatter }: Props) {
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
defaultPolicy: css` defaultPolicy: css({
padding: ${theme.spacing(0.5)}; padding: theme.spacing(0.5),
background: ${theme.colors.background.secondary}; background: theme.colors.background.secondary,
width: fit-content; width: 'fit-content',
`, }),
textMuted: css` textMuted: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
}); });

60
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
View File

@ -112,34 +112,34 @@ export const NotificationPreview = ({
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
collapsableSection: css` collapsableSection: css({
width: auto; width: 'auto',
border: 0; border: 0,
`, }),
previewHeader: css` previewHeader: css({
margin: 0; margin: 0,
`, }),
routePreviewHeaderRow: css` routePreviewHeaderRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: space-between; justifyContent: 'space-between',
align-items: flex-start; alignItems: 'flex-start',
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
`, }),
collapseLabel: css` collapseLabel: css({
flex: 1; flex: 1,
`, }),
button: css` button: css({
justify-content: flex-end; justifyContent: 'flex-end',
`, }),
tagsInDetails: css` tagsInDetails: css({
display: flex; display: 'flex',
justify-content: flex-start; justifyContent: 'flex-start',
flex-wrap: wrap; flexWrap: 'wrap',
`, }),
policyPathItemMatchers: css` policyPathItemMatchers: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
`, }),
}); });

52
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx
View File

@ -87,30 +87,30 @@ function NotificationPreviewByAlertManager({
export default withErrorBoundary(NotificationPreviewByAlertManager); export default withErrorBoundary(NotificationPreviewByAlertManager);
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
alertManagerRow: css` alertManagerRow: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
width: 100%; width: '100%',
`, }),
firstAlertManagerLine: css` firstAlertManagerLine: css({
height: 1px; height: '1px',
width: ${theme.spacing(4)}; width: theme.spacing(4),
background-color: ${theme.colors.secondary.main}; backgroundColor: theme.colors.secondary.main,
`, }),
alertManagerName: css` alertManagerName: css({
width: fit-content; width: 'fit-content',
`, }),
secondAlertManagerLine: css` secondAlertManagerLine: css({
height: 1px; height: '1px',
width: 100%; width: '100%',
flex: 1; flex: 1,
background-color: ${theme.colors.secondary.main}; backgroundColor: theme.colors.secondary.main,
`, }),
img: css` img: css({
margin-left: ${theme.spacing(2)}; marginLeft: theme.spacing(2),
width: ${theme.spacing(3)}; width: theme.spacing(3),
height: ${theme.spacing(3)}; height: theme.spacing(3),
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
`, }),
}); });

120
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx
View File

@ -177,68 +177,68 @@ export function NotificationRoute({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
textMuted: css` textMuted: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
textItalic: css` textItalic: css({
font-style: italic; fontStyle: 'italic',
`, }),
expandable: css` expandable: css({
cursor: pointer; cursor: 'pointer',
`, }),
routeHeader: css` routeHeader: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
align-items: center; alignItems: 'center',
border-bottom: 1px solid ${theme.colors.border.weak}; borderBottom: `1px solid ${theme.colors.border.weak}`,
&:hover { padding: theme.spacing(0.5, 0.5, 0.5, 0),
background-color: ${theme.components.table.rowHoverBackground}; '&:hover': {
} backgroundColor: theme.components.table.rowHoverBackground,
padding: ${theme.spacing(0.5, 0.5, 0.5, 0)}; },
`, }),
labelList: css` labelList: css({
flex: 0 1 auto; flex: '0 1 auto',
justify-content: flex-start; justifyContent: 'flex-start',
`, }),
labelSeparator: css` labelSeparator: css({
width: 1px; width: '1px',
background-color: ${theme.colors.border.weak}; backgroundColor: theme.colors.border.weak,
`, }),
tagListCard: css` tagListCard: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
gap: ${theme.spacing(2)}; gap: theme.spacing(2),
position: relative; position: 'relative',
background: ${theme.colors.background.secondary}; background: theme.colors.background.secondary,
padding: ${theme.spacing(1)}; padding: theme.spacing(1),
border-radius: ${theme.shape.borderRadius(2)}; borderRadius: theme.shape.borderRadius(2),
border: solid 1px ${theme.colors.border.weak}; border: `solid 1px ${theme.colors.border.weak}`,
`, }),
routeInstances: css` routeInstances: css({
padding: ${theme.spacing(1, 0, 1, 4)}; padding: theme.spacing(1, 0, 1, 4),
position: relative; position: 'relative',
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
&:before { '&:before': {
content: ''; content: '""',
position: absolute; position: 'absolute',
left: ${theme.spacing(2)}; left: theme.spacing(2),
height: calc(100% - ${theme.spacing(2)}); height: `calc(100% - ${theme.spacing(2)})`,
width: ${theme.spacing(4)}; width: theme.spacing(4),
border-left: solid 1px ${theme.colors.border.weak}; borderLeft: `solid 1px ${theme.colors.border.weak}`,
} },
`, }),
verticalBar: css` verticalBar: css({
width: 1px; width: '1px',
height: 20px; height: '20px',
background-color: ${theme.colors.secondary.main}; backgroundColor: theme.colors.secondary.main,
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
margin-right: ${theme.spacing(1)}; marginRight: theme.spacing(1),
`, }),
}); });

124
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx
View File

@ -124,68 +124,64 @@ export function NotificationRouteDetailsModal({
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
textMuted: css` textMuted: css({
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
`, }),
link: css` link: css({
display: block; display: 'block',
color: ${theme.colors.text.link}; color: theme.colors.text.link,
`, }),
button: css` button: css({
justify-content: flex-end; justifyContent: 'flex-end',
display: flex; display: 'flex',
`, }),
detailsModal: css` detailsModal: css({
max-width: 560px; maxWidth: '560px',
`, }),
defaultPolicy: css` defaultPolicy: css({
padding: ${theme.spacing(0.5)}; padding: theme.spacing(0.5),
background: ${theme.colors.background.secondary}; background: theme.colors.background.secondary,
width: fit-content; width: 'fit-content',
`, }),
contactPoint: css` contactPoint: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
align-items: center; alignItems: 'center',
justify-content: space-between; justifyContent: 'space-between',
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
`, }),
policyPathWrapper: css` policyPathWrapper: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
margin-top: ${theme.spacing(1)}; marginTop: theme.spacing(1),
`, }),
separator: (units: number) => css` separator: (units: number) =>
margin-top: ${theme.spacing(units)}; css({
`, marginTop: theme.spacing(units),
marginBottom: (units: number) => css` }),
margin-bottom: ${theme.spacing(theme.spacing(units))}; marginBottom: (units: number) =>
`, css({
policyInPath: (index = 0, higlight = false) => css` marginBottom: theme.spacing(theme.spacing(units)),
margin-left: ${30 + index * 30}px; }),
padding: ${theme.spacing(1)}; policyInPath: (index = 0, highlight = false) =>
margin-top: ${theme.spacing(1)}; css({
border: solid 1px ${theme.colors.border.weak}; marginLeft: `${30 + index * 30}px`,
background: ${theme.colors.background.secondary}; padding: theme.spacing(1),
width: fit-content; marginTop: theme.spacing(1),
position: relative; border: `solid 1px ${highlight ? theme.colors.info.border : theme.colors.border.weak}`,
background: theme.colors.background.secondary,
${ width: 'fit-content',
higlight && position: 'relative',
css` '&:before': {
border: solid 1px ${theme.colors.info.border}; content: '""',
` position: 'absolute',
}, height: 'calc(100% - 10px)',
&:before { width: theme.spacing(1),
content: ''; borderLeft: `solid 1px ${theme.colors.border.weak}`,
position: absolute; borderBottom: `solid 1px ${theme.colors.border.weak}`,
height: calc(100% - 10px); marginTop: theme.spacing(-2),
width: ${theme.spacing(1)}; marginLeft: `-17px`,
border-left: solid 1px ${theme.colors.border.weak}; },
border-bottom: solid 1px ${theme.colors.border.weak}; }),
margin-top: ${theme.spacing(-2)};
margin-left: -17px;
}
} `,
}); });

24
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx
View File

@ -60,16 +60,16 @@ export const CloudDataSourceSelector = ({ disabled, onChangeCloudDatasource }: C
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
formInput: css` formInput: css({
width: 330px; width: '330px',
& + & { '& + &': {
margin-left: ${theme.spacing(3)}; marginLeft: theme.spacing(3),
} },
`, }),
flexRow: css` flexRow: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
justify-content: flex-start; justifyContent: 'flex-start',
align-items: flex-end; alignItems: 'flex-end',
`, }),
}); });

40
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
View File

@ -547,26 +547,26 @@ function TypeSelectorButton({ onClickType }: { onClickType: (type: ExpressionQue
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
addQueryButton: css` addQueryButton: css({
width: fit-content; width: 'fit-content',
`, }),
helpInfo: css` helpInfo: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: center; alignItems: 'center',
width: fit-content; width: 'fit-content',
font-weight: ${theme.typography.fontWeightMedium}; fontWeight: theme.typography.fontWeightMedium,
margin-left: ${theme.spacing(1)}; marginLeft: theme.spacing(1),
font-size: ${theme.typography.size.sm}; fontSize: theme.typography.size.sm,
cursor: pointer; cursor: 'pointer',
`, }),
helpInfoText: css` helpInfoText: css({
margin-left: ${theme.spacing(0.5)}; marginLeft: theme.spacing(0.5),
text-decoration: underline; textDecoration: 'underline',
`, }),
infoLink: css` infoLink: css({
color: ${theme.colors.text.link}; color: theme.colors.text.link,
`, }),
}); });
const useSetExpressionAndDataSource = () => { const useSetExpressionAndDataSource = () => {

16
public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
View File

@ -41,14 +41,14 @@ const RuleType = (props: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
width: 380px; width: '380px',
cursor: pointer; cursor: 'pointer',
user-select: none; userSelect: 'none',
`, }),
disabled: css` disabled: css({
opacity: 0.5; opacity: '0.5',
`, }),
}); });
export { RuleType }; export { RuleType };

6
public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
View File

@ -57,9 +57,9 @@ const RuleTypePicker = ({ selected, onChange, enabledTypes }: RuleTypePickerProp
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
meta: css` meta: css({
color: ${theme.colors.text.disabled}; color: theme.colors.text.disabled,
`, }),
}); });
export { RuleTypePicker }; export { RuleTypePicker };

18
public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx
View File

@ -43,19 +43,19 @@ export function RuleViewerLayoutContent({ children, padding = 2 }: ContentProps)
const getPageStyles = (theme: GrafanaTheme2) => { const getPageStyles = (theme: GrafanaTheme2) => {
return { return {
content: css` content: css({
max-width: ${theme.breakpoints.values.xxl}px; maxWidth: `${theme.breakpoints.values.xxl}px`,
`, }),
}; };
}; };
const getContentStyles = (padding: number) => (theme: GrafanaTheme2) => { const getContentStyles = (padding: number) => (theme: GrafanaTheme2) => {
return { return {
wrapper: css` wrapper: css({
background: ${theme.colors.background.primary}; background: theme.colors.background.primary,
border: 1px solid ${theme.colors.border.weak}; border: `1px solid ${theme.colors.border.weak}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
padding: ${theme.spacing(padding)}; padding: theme.spacing(padding),
`, }),
}; };
}; };

8
public/app/features/alerting/unified/components/rules/ActionButton.tsx
View File

@ -13,8 +13,8 @@ export const ActionButton = ({ className, ...restProps }: Props) => {
}; };
export const getStyle = (theme: GrafanaTheme2) => ({ export const getStyle = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
height: 24px; height: '24px',
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
`, }),
}); });

14
public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx
View File

@ -67,12 +67,12 @@ export const AlertInstanceStateFilter = ({
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2) {
return { return {
tag: css` tag: css({
font-size: 11px; fontSize: '11px',
font-weight: normal; fontWeight: 'normal',
padding: ${theme.spacing(0.25, 0.5)}; padding: theme.spacing(0.25, 0.5),
vertical-align: middle; verticalAlign: 'middle',
margin-left: ${theme.spacing(0.5)}; marginLeft: theme.spacing(0.5),
`, }),
}; };
} }

28
public/app/features/alerting/unified/components/rules/CloudRules.tsx
View File

@ -98,20 +98,20 @@ export const CloudRules = ({ namespaces, expandAll }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
loader: css` loader: css({
margin-bottom: 0; marginBottom: 0,
`, }),
sectionHeader: css` sectionHeader: css({
display: flex; display: 'flex',
justify-content: space-between; justifyContent: 'space-between',
`, }),
wrapper: css` wrapper: css({
margin-bottom: ${theme.spacing(4)}; marginBottom: theme.spacing(4),
`, }),
spinner: css` spinner: css({
text-align: center; textAlign: 'center',
padding: ${theme.spacing(2)}; padding: theme.spacing(2),
`, }),
pagination: getPaginationStyles(theme), pagination: getPaginationStyles(theme),
headerRow: css({ headerRow: css({
display: 'flex', display: 'flex',

36
public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx
View File

@ -374,22 +374,22 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
modal: css` modal: css({
max-width: 560px; maxWidth: '560px',
`, }),
modalButtons: css` modalButtons: css({
top: -24px; top: '-24px',
position: relative; position: 'relative',
`, }),
formInput: css` formInput: css({
flex: 1; flex: 1,
`, }),
tableWrapper: css` tableWrapper: css({
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
height: 100%; height: '100%',
`, }),
evalRequiredLabel: css` evalRequiredLabel: css({
font-size: ${theme.typography.bodySmall.fontSize}; fontSize: theme.typography.bodySmall.fontSize,
`, }),
}); });

30
public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
View File

@ -101,21 +101,21 @@ export const GrafanaRules = ({ namespaces, expandAll }: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
loader: css` loader: css({
margin-bottom: 0; marginBottom: 0,
`, }),
sectionHeader: css` sectionHeader: css({
display: flex; display: 'flex',
justify-content: space-between; justifyContent: 'space-between',
margin-bottom: ${theme.spacing(1)}; marginBottom: theme.spacing(1),
`, }),
wrapper: css` wrapper: css({
margin-bottom: ${theme.spacing(4)}; marginBottom: theme.spacing(4),
`, }),
spinner: css` spinner: css({
text-align: center; textAlign: 'center',
padding: ${theme.spacing(2)}; padding: theme.spacing(2),
`, }),
pagination: getPaginationStyles(theme), pagination: getPaginationStyles(theme),
headerRow: css({ headerRow: css({
display: 'flex', display: 'flex',

12
public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
View File

@ -47,11 +47,11 @@ export const NoRulesSplash = () => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
newRuleCard: css` newRuleCard: css({
width: calc(50% - ${theme.spacing(1)}); width: `calc(50% - ${theme.spacing(1)})`,
> div { '> div': {
height: 100%; height: '100%',
} },
`, }),
}); });

88
public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx
View File

@ -170,57 +170,57 @@ const ModalHeader = ({ namespace, group }: ModalHeaderProps) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
modal: css` modal: css({
max-width: 640px; maxWidth: '640px',
max-height: 80%; maxHeight: '80%',
overflow: hidden; overflow: 'hidden',
`, }),
listItem: css` listItem: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: center; alignItems: 'center',
gap: ${theme.spacing()}; gap: theme.spacing(),
background: ${theme.colors.background.primary}; background: theme.colors.background.primary,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
border-bottom: solid 1px ${theme.colors.border.medium}; borderBottom: `solid 1px ${theme.colors.border.medium}`,
padding: ${theme.spacing(1)} ${theme.spacing(2)}; padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
&:last-child { '&:last-child': {
border-bottom: none; borderBottom: 'none',
} },
&.isClone { '&.isClone': {
border: solid 1px ${theme.colors.primary.shade}; border: `solid 1px ${theme.colors.primary.shade}`,
} },
`, }),
listContainer: css` listContainer: css({
user-select: none; userSelect: 'none',
border: solid 1px ${theme.colors.border.medium}; border: `solid 1px ${theme.colors.border.medium}`,
`, }),
disabled: css` disabled: css({
opacity: 0.5; opacity: '0.5',
pointer-events: none; pointerEvents: 'none',
`, }),
listItemName: css` listItemName: css({
flex: 1; flex: 1,
overflow: hidden; overflow: 'hidden',
text-overflow: ellipsis; textOverflow: 'ellipsis',
white-space: nowrap; whiteSpace: 'nowrap',
`, }),
header: css` header: css({
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
`, }),
dataSourceIcon: css` dataSourceIcon: css({
width: ${theme.spacing(2)}; width: theme.spacing(2),
height: ${theme.spacing(2)}; height: theme.spacing(2),
`, }),
}); });
export function reorder<T>(rules: T[], startIndex: number, endIndex: number): T[] { export function reorder<T>(rules: T[], startIndex: number, endIndex: number): T[] {

12
public/app/features/alerting/unified/components/rules/RuleConfigStatus.tsx
View File

@ -42,11 +42,11 @@ export function RuleConfigStatus({ rule }: RuleConfigStatusProps) {
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2) {
return { return {
globalLimitValue: css` globalLimitValue: css({
font-weight: ${theme.typography.fontWeightBold}; fontWeight: theme.typography.fontWeightBold,
`, }),
icon: css` icon: css({
fill: ${theme.colors.warning.text}; fill: theme.colors.warning.text,
`, }),
}; };
} }

2
public/app/features/alerting/unified/components/rules/RuleDetails.tsx
View File

@ -120,7 +120,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
}, },
}), }),
leftSide: css({ leftSide: css({
flex: '1', flex: 1,
}), }),
rightSide: css({ rightSide: css({
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('md')]: {

6
public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx
View File

@ -30,7 +30,7 @@ export function RuleDetailsAnnotations(props: Props): JSX.Element | null {
} }
const getStyles = () => ({ const getStyles = () => ({
annotations: css` annotations: css({
margin-top: 46px; marginTop: '46px',
`, }),
}); });

8
public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx
View File

@ -68,9 +68,9 @@ function getStyles(theme: GrafanaTheme2) {
const size = theme.spacing(2); const size = theme.spacing(2);
return { return {
dataSourceIcon: css` dataSourceIcon: css({
width: ${size}; width: size,
height: ${size}; height: size,
`, }),
}; };
} }

6
public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx
View File

@ -29,7 +29,7 @@ export function RuleDetailsExpression(props: Props): JSX.Element | null {
} }
const getStyles = () => ({ const getStyles = () => ({
exprRow: css` exprRow: css({
margin-bottom: 46px; marginBottom: '46px',
`, }),
}); });

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