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;

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

@ -143,7 +143,7 @@ export const MuteTimingTimeInterval = () => {
> >
Remove time interval Remove time interval
</Button> </Button>
{/* {/*
This switch is only available for Grafana Alertmanager, as for now, Grafana alert manager doesn't support this feature This switch is only available for Grafana Alertmanager, as for now, Grafana alert manager doesn't support this feature
It hanldes empty list as undefined making impossible the use of an empty list for disabling time interval It hanldes empty list as undefined making impossible the use of an empty list for disabling time interval
*/} */}
@ -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