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.", "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": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[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.", "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": [
[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"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/components/AnnotationDetailsField.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"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.", "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": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx:5381": [
[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": [
[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": [
[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": [
[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": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"],
[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": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[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"]
[0, 0, 0, "Do not use any type assertions.", "2"]
],
"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.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"],
[0, 0, 0, "Unexpected any. Specify a different type.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "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"]
[0, 0, 0, "Unexpected any. Specify a different type.", "4"],
[0, 0, 0, "Unexpected any. Specify a different type.", "5"]
],
"public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx:5381": [
[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.", "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": [
[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": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"]
],
"public/app/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"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx:5381": [
[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"]
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"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"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/components/silences/SilencesEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/components/silences/SilencesFilter.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/alerting/unified/hooks/useAlertmanagerConfig.ts:5381": [
[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": [
[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": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[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.", "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": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[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) => ({
modal: css`
width: 500px;
`,
description: css`
font-size: ${theme.typography.body.fontSize};
margin: 0;
`,
modal: css({
width: '500px',
}),
description: css({
fontSize: theme.typography.body.fontSize,
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) => ({
warning: css`
margin: ${theme.spacing(4)};
`,
warning: css({
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) => ({
container: css`
padding: ${theme.spacing(1)};
`,
card: css`
grid-template-columns: auto 1fr 2fr;
margin: 0;
`,
pagination: css`
align-self: center;
`,
filterLabelsInput: css`
flex: 1;
width: auto;
min-width: 240px;
`,
noResults: css`
padding: ${theme.spacing(2)};
background-color: ${theme.colors.background.secondary};
font-style: italic;
`,
container: css({
padding: theme.spacing(1),
}),
card: css({
gridTemplateColumns: 'auto 1fr 2fr',
margin: 0,
}),
pagination: css({
alignSelf: 'center',
}),
filterLabelsInput: css({
flex: 1,
width: 'auto',
minWidth: '240px',
}),
noResults: css({
padding: theme.spacing(2),
backgroundColor: theme.colors.background.secondary,
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) => ({
queryPreviewWrapper: css`
margin: ${theme.spacing(1)};
`,
contentBox: css`
flex: 1 0 100%;
`,
visualization: css`
padding: ${theme.spacing(1)};
`,
queryPreviewWrapper: css({
margin: theme.spacing(1),
}),
contentBox: css({
flex: '1 0 100%',
}),
visualization: css({
padding: theme.spacing(1),
}),
dataSource: css({
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
@ -297,13 +297,13 @@ const getQueryBoxStyles = (theme: GrafanaTheme2) => ({
display: 'flex',
flexDirection: 'column',
}),
header: css`
display: flex;
align-items: center;
gap: ${theme.spacing(1)};
padding: ${theme.spacing(1)};
background-color: ${theme.colors.background.secondary};
`,
header: css({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
padding: theme.spacing(1),
backgroundColor: theme.colors.background.secondary,
}),
textBlock: css({
border: `1px solid ${theme.colors.border.weak}`,
padding: theme.spacing(0.5, 1),
@ -350,12 +350,12 @@ function ClassicConditionViewer({ model }: { model: ExpressionQuery }) {
}
const getClassicConditionViewerStyles = (theme: GrafanaTheme2) => ({
container: css`
padding: ${theme.spacing(1)};
display: grid;
grid-template-columns: max-content max-content max-content max-content max-content max-content;
gap: ${theme.spacing(0, 1)};
`,
container: css({
padding: theme.spacing(1),
display: 'grid',
gridTemplateColumns: 'repeat(6, max-content)',
gap: theme.spacing(0, 1),
}),
...getCommonQueryStyles(theme),
});
@ -383,17 +383,17 @@ function ReduceConditionViewer({ model }: { model: ExpressionQuery }) {
}
const getReduceConditionViewerStyles = (theme: GrafanaTheme2) => ({
container: css`
padding: ${theme.spacing(1)};
display: grid;
gap: ${theme.spacing(0.5)};
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
container: css({
padding: theme.spacing(1),
display: 'grid',
gap: theme.spacing(0.5),
gridTemplateRows: '1fr 1fr',
gridTemplateColumns: 'repeat(4, 1fr)',
> :nth-child(6) {
grid-column: span 3;
}
`,
'> :nth-child(6)': {
gridColumn: 'span 3',
},
}),
...getCommonQueryStyles(theme),
});
@ -422,13 +422,13 @@ function ResampleExpressionViewer({ model }: { model: ExpressionQuery }) {
}
const getResampleExpressionViewerStyles = (theme: GrafanaTheme2) => ({
container: css`
padding: ${theme.spacing(1)};
display: grid;
gap: ${theme.spacing(0.5)};
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
`,
container: css({
padding: theme.spacing(1),
display: 'grid',
gap: theme.spacing(0.5),
gridTemplateColumns: 'repeat(4, 1fr)',
gridTemplateRows: '1fr 1fr',
}),
...getCommonQueryStyles(theme),
});
@ -488,22 +488,16 @@ const getExpressionViewerStyles = (theme: GrafanaTheme2) => {
return {
...common,
maxWidthContainer: css`
max-width: 100%;
`,
container: css`
padding: ${theme.spacing(1)};
display: flex;
gap: ${theme.spacing(0.5)};
`,
blue: css`
${blue};
margin: auto 0;
`,
bold: css`
${bold};
margin: auto 0;
`,
maxWidthContainer: css({
maxWidth: '100%',
}),
container: css({
padding: theme.spacing(1),
display: 'flex',
gap: theme.spacing(0.5),
}),
blue: css(blue, { margin: 'auto 0' }),
bold: css(bold, { margin: 'auto 0' }),
};
};
@ -521,27 +515,27 @@ function MathExpressionViewer({ model }: { model: ExpressionQuery }) {
}
const getCommonQueryStyles = (theme: GrafanaTheme2) => ({
blue: css`
color: ${theme.colors.text.link};
`,
bold: css`
font-weight: ${theme.typography.fontWeightBold};
`,
label: css`
display: flex;
align-items: center;
padding: ${theme.spacing(0.5, 1)};
background-color: ${theme.colors.background.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
line-height: ${theme.typography.bodySmall.lineHeight};
font-weight: ${theme.typography.fontWeightBold};
border-radius: ${theme.shape.radius.default};
`,
value: css`
padding: ${theme.spacing(0.5, 1)};
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.radius.default};
`,
blue: css({
color: theme.colors.text.link,
}),
bold: css({
fontWeight: theme.typography.fontWeightBold,
}),
label: css({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0.5, 1),
backgroundColor: theme.colors.background.secondary,
fontSize: theme.typography.bodySmall.fontSize,
lineHeight: theme.typography.bodySmall.lineHeight,
fontWeight: theme.typography.fontWeightBold,
borderRadius: theme.shape.radius.default,
}),
value: css({
padding: theme.spacing(0.5, 1),
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
}),
});
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) => ({
tabContent: css`
margin-top: ${theme.spacing(2)};
`,
tabContent: css({
marginTop: theme.spacing(2),
}),
});
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) => ({
newButton: css`
margin-top: ${theme.spacing(3)};
`,
innerWrapper: css`
padding: ${theme.spacing(2)};
`,
noRulesWrapper: css`
margin: ${theme.spacing(2)};
background-color: ${theme.colors.background.secondary};
padding: ${theme.spacing(3)};
`,
newButton: css({
marginTop: theme.spacing(3),
}),
innerWrapper: css({
padding: theme.spacing(2),
}),
noRulesWrapper: css({
margin: theme.spacing(2),
backgroundColor: theme.colors.background.secondary,
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) {
return {
param: css`
font-style: italic;
color: ${theme.colors.text.secondary};
`,
rules: css`
margin-top: ${theme.spacing(2)};
`,
namespace: css`
margin-left: ${theme.spacing(1)};
`,
errorMessage: css`
white-space: pre-wrap;
`,
param: css({
fontStyle: 'italic',
color: theme.colors.text.secondary,
}),
rules: css({
marginTop: theme.spacing(2),
}),
namespace: css({
marginLeft: theme.spacing(1),
}),
errorMessage: css({
whiteSpace: 'pre-wrap',
}),
};
}

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

@ -137,25 +137,25 @@ const RuleList = withErrorBoundary(
);
const getStyles = (theme: GrafanaTheme2) => ({
break: css`
width: 100%;
height: 0;
margin-bottom: ${theme.spacing(2)};
border-bottom: solid 1px ${theme.colors.border.medium};
`,
buttonsContainer: css`
margin-bottom: ${theme.spacing(2)};
display: flex;
justify-content: space-between;
`,
statsContainer: css`
display: flex;
flex-direction: row;
align-items: center;
`,
expandAllButton: css`
margin-right: ${theme.spacing(1)};
`,
break: css({
width: '100%',
height: 0,
marginBottom: theme.spacing(2),
borderBottom: `solid 1px ${theme.colors.border.medium}`,
}),
buttonsContainer: css({
marginBottom: theme.spacing(2),
display: 'flex',
justifyContent: 'space-between',
}),
statsContainer: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}),
expandAllButton: css({
marginRight: theme.spacing(1),
}),
});
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) => ({
wrapper: css`
padding: ${theme.spacing(0.5, 1)};
border-radius: ${theme.shape.radius.default};
border: solid 1px ${theme.colors.border.medium};
font-size: ${theme.typography.bodySmall.fontSize};
background-color: ${theme.colors.background.secondary};
font-weight: ${theme.typography.fontWeightBold};
color: ${theme.colors.text.primary};
display: inline-block;
line-height: 1.2;
`,
wrapper: css({
padding: theme.spacing(0.5, 1),
borderRadius: theme.shape.radius.default,
border: `solid 1px ${theme.colors.border.medium}`,
fontSize: theme.typography.bodySmall.fontSize,
backgroundColor: theme.colors.background.secondary,
fontWeight: theme.typography.fontWeightBold,
color: theme.colors.text.primary,
display: 'inline-block',
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) => ({
wrapper: css`
display: flex;
flex-wrap: wrap;
align-items: center;
wrapper: css({
display: 'flex',
flexWrap: 'wrap',
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) => ({
field: css`
margin: 0;
`,
field: css({
margin: 0,
}),
});

34
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';
return {
dot: css`
width: ${size};
height: ${size};
dot: css(
{
width: size,
height: size,
border-radius: 100%;
// eslint-disable-next-line @grafana/no-border-radius-literal
borderRadius: '100%',
background-color: ${theme.colors.secondary.main};
outline: solid ${outlineSize} ${theme.colors.secondary.transparent};
margin: ${outlineSize};
${successStyle &&
backgroundColor: theme.colors.secondary.main,
outline: `solid ${outlineSize} ${theme.colors.secondary.transparent}`,
margin: outlineSize,
},
successStyle &&
css({
backgroundColor: theme.colors.success.main,
outlineColor: theme.colors.success.transparent,
})}
${warningStyle &&
}),
warningStyle &&
css({
backgroundColor: theme.colors.warning.main,
outlineColor: theme.colors.warning.transparent,
})}
${errorStyle &&
}),
errorStyle &&
css({
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) => ({
well: css`
word-break: break-word;
`,
well: css({
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) => ({
fieldHorizontal: css`
flex-direction: row;
${theme.breakpoints.down('md')} {
flex-direction: column;
}
`,
fieldVertical: css`
flex-direction: column;
`,
field: css`
display: flex;
margin: ${theme.spacing(2)} 0;
fieldHorizontal: css({
flexDirection: 'row',
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
},
}),
fieldVertical: css({
flexDirection: 'column',
}),
field: css({
display: 'flex',
margin: `${theme.spacing(2)} 0`,
& > div:first-child {
width: 110px;
padding-right: ${theme.spacing(1)};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.fontWeightBold};
line-height: 1.8;
}
& > div:nth-child(2) {
flex: 1;
color: ${theme.colors.text.secondary};
}
`,
'& > div:first-child': {
width: '110px',
paddingRight: theme.spacing(1),
fontSize: theme.typography.size.sm,
fontWeight: theme.typography.fontWeightBold,
lineHeight: 1.8,
},
'& > div:nth-child(2)': {
flex: 1,
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) => ({
container: css`
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.radius.default};
color: ${theme.colors.text.secondary};
`,
row: css`
display: grid;
grid-template-columns: ${sizes.join(' ')};
grid-template-rows: 1fr auto;
container: css({
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
color: theme.colors.text.secondary,
}),
row: css({
display: 'grid',
gridTemplateColumns: sizes.join(' '),
gridTemplateRows: '1fr auto',
&:nth-child(2n + 1) {
background-color: ${theme.colors.background.secondary};
}
'&:nth-child(2n + 1)': {
backgroundColor: theme.colors.background.secondary,
},
&:nth-child(2n) {
background-color: ${theme.colors.background.primary};
}
'&:nth-child(2n)': {
backgroundColor: theme.colors.background.primary,
},
${theme.breakpoints.down('sm')} {
grid-template-columns: auto 1fr;
grid-template-areas: 'left right';
padding: 0 ${theme.spacing(0.5)};
[theme.breakpoints.down('sm')]: {
gridTemplateColumns: 'auto 1fr',
gridTemplateAreas: 'left right',
padding: `0 ${theme.spacing(0.5)}`,
&:first-child {
display: none;
}
'&:first-child': {
display: 'none',
},
${hasPrefixCell
? `
& > *:first-child {
display: none;
}
`
: ''}
}
`,
footerRow: css`
display: flex;
padding: ${theme.spacing(1)};
`,
cell: css`
display: flex;
align-items: center;
padding: ${theme.spacing(1)};
'& > *:first-child': {
display: hasPrefixCell ? 'none' : undefined,
},
},
}),
footerRow: css({
display: 'flex',
padding: theme.spacing(1),
}),
cell: css({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(1),
${theme.breakpoints.down('sm')} {
padding: ${theme.spacing(1)} 0;
grid-template-columns: 1fr;
}
`,
bodyCell: css`
overflow: hidden;
[theme.breakpoints.down('sm')]: {
padding: `${theme.spacing(1)} 0`,
gridTemplateColumns: '1fr',
},
}),
bodyCell: css({
overflow: 'hidden',
${theme.breakpoints.down('sm')} {
grid-column-end: right;
grid-column-start: right;
[theme.breakpoints.down('sm')]: {
gridColumnEnd: 'right',
gridColumnStart: 'right',
&::before {
content: attr(data-column);
display: block;
color: ${theme.colors.text.primary};
}
}
`,
expandCell: css`
justify-content: center;
'&::before': {
content: 'attr(data-column)',
display: 'block',
color: theme.colors.text.primary,
},
},
}),
expandCell: css({
justifyContent: 'center',
${theme.breakpoints.down('sm')} {
align-items: start;
grid-area: left;
}
`,
expandedContentRow: css`
grid-column-end: ${sizes.length + 1};
grid-column-start: ${hasPrefixCell ? 3 : 2};
grid-row: 2;
padding: 0 ${theme.spacing(3)} 0 ${theme.spacing(1)};
position: relative;
[theme.breakpoints.down('sm')]: {
alignItems: 'start',
gridArea: 'left',
},
}),
expandedContentRow: css({
gridColumnEnd: sizes.length + 1,
gridColumnStart: hasPrefixCell ? 3 : 2,
gridRow: 2,
padding: `0 ${theme.spacing(3)} 0 ${theme.spacing(1)}`,
position: 'relative',
${theme.breakpoints.down('sm')} {
grid-column-start: 2;
border-top: 1px solid ${theme.colors.border.strong};
grid-row: auto;
padding: ${theme.spacing(1)} 0 0 0;
}
`,
[theme.breakpoints.down('sm')]: {
gridColumnStart: 2,
borderTop: `1px solid ${theme.colors.border.strong}`,
gridRow: 'auto',
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) => ({
relative: css`
position: relative;
height: 100%;
`,
guideline: css`
left: -19px;
border-left: 1px solid ${theme.colors.border.weak};
position: absolute;
relative: css({
position: 'relative',
height: '100%',
}),
guideline: css({
left: '-19px',
borderLeft: `1px solid ${theme.colors.border.weak}`,
position: 'absolute',
${theme.breakpoints.down('md')} {
display: none;
}
`,
topGuideline: css`
width: 18px;
border-bottom: 1px solid ${theme.colors.border.medium};
top: 0;
bottom: 50%;
`,
bottomGuideline: css`
top: 50%;
bottom: 0;
`,
contentGuideline: css`
top: 0;
bottom: 0;
left: -49px !important;
`,
headerGuideline: css`
top: -17px;
bottom: 0;
`,
[theme.breakpoints.down('md')]: {
display: 'none',
},
}),
topGuideline: css({
width: '18px',
borderBottom: `1px solid ${theme.colors.border.medium}`,
top: 0,
bottom: '50%',
}),
bottomGuideline: css({
top: '50%',
bottom: 0,
}),
contentGuideline: css({
top: 0,
bottom: 0,
left: '-49px !important',
}),
headerGuideline: css({
top: '-17px',
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) => {
return {
container: css`
background-color: ${theme.colors.background.secondary};
color: ${theme.colors.text.secondary};
padding: ${theme.spacing(4)};
text-align: center;
`,
container: css({
backgroundColor: theme.colors.background.secondary,
color: theme.colors.text.secondary,
padding: theme.spacing(4),
textAlign: 'center',
}),
};
};

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

@ -58,17 +58,17 @@ export const EmptyAreaWithCTA = ({
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
background-color: ${theme.colors.background.secondary};
color: ${theme.colors.text.secondary};
padding: ${theme.spacing(4)};
text-align: center;
`,
text: css`
margin-bottom: ${theme.spacing(2)};
`,
button: css`
margin: ${theme.spacing(2, 0, 1)};
`,
container: css({
backgroundColor: theme.colors.background.secondary,
color: theme.colors.text.secondary,
padding: theme.spacing(4),
textAlign: 'center',
}),
text: css({
marginBottom: theme.spacing(2),
}),
button: css({
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) => ({
well: css`
font-family: ${theme.typography.fontFamilyMonospace};
`,
well: css({
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) => ({
adminHint: css`
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.bodySmall.fontWeight};
`,
adminHint: css({
fontSize: theme.typography.bodySmall.fontSize,
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)}`;
return {
wrapper: css`
color: ${fontColor};
font-size: ${theme.typography.bodySmall.fontSize};
wrapper: css({
color: fontColor,
fontSize: theme.typography.bodySmall.fontSize,
border-radius: ${theme.shape.borderRadius(2)};
`,
borderRadius: theme.shape.borderRadius(2),
}),
labelText: css({
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '300px',
}),
label: css`
display: flex;
align-items: center;
color: inherit;
label: css({
display: 'flex',
alignItems: 'center',
color: 'inherit',
padding: ${padding};
background: ${backgroundColor};
padding: padding,
background: backgroundColor,
border: solid 1px ${borderColor};
border-top-left-radius: ${theme.shape.borderRadius(2)};
border-bottom-left-radius: ${theme.shape.borderRadius(2)};
`,
value: css`
color: inherit;
padding: ${padding};
background: ${valueBackgroundColor};
border: solid 1px ${borderColor};
border-left: none;
border-top-right-radius: ${theme.shape.borderRadius(2)};
border-bottom-right-radius: ${theme.shape.borderRadius(2)};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
`,
border: `solid 1px ${borderColor}`,
borderTopLeftRadius: theme.shape.borderRadius(2),
borderBottomLeftRadius: theme.shape.borderRadius(2),
}),
value: css({
color: 'inherit',
padding: padding,
background: valueBackgroundColor,
border: `solid 1px ${borderColor}`,
borderLeft: 'none',
borderTopRightRadius: theme.shape.borderRadius(2),
borderBottomRightRadius: theme.shape.borderRadius(2),
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '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 = () => ({
interactive: css`
cursor: pointer;
`,
interactive: css({
cursor: 'pointer',
}),
});
export { MetaText };

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

@ -13,8 +13,8 @@ import React from 'react';
export const Spacer = () => (
<span
className={css`
flex: 1;
`}
className={css({
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) => ({
[PromAlertingRuleState.Inactive]: css`
color: ${theme.colors.success.text};
`,
[PromAlertingRuleState.Pending]: css`
color: ${theme.colors.warning.text};
`,
[PromAlertingRuleState.Firing]: css`
color: ${theme.colors.error.text};
`,
neutral: css`
color: ${theme.colors.text.secondary};
`,
[PromAlertingRuleState.Inactive]: css({
color: theme.colors.success.text,
}),
[PromAlertingRuleState.Pending]: css({
color: theme.colors.warning.text,
}),
[PromAlertingRuleState.Firing]: css({
color: theme.colors.error.text,
}),
neutral: css({
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';
const getStyles = (theme: GrafanaTheme2) => ({
common: css`
display: inline-block;
color: white;
border-radius: ${theme.shape.radius.default};
font-size: ${theme.typography.size.sm};
text-transform: capitalize;
line-height: 1.2;
text-align: center;
font-weight: ${theme.typography.fontWeightBold};
`,
good: css`
background-color: ${theme.colors.success.main};
border: solid 1px ${theme.colors.success.main};
color: ${theme.colors.success.contrastText};
`,
warning: css`
background-color: ${theme.colors.warning.main};
border: solid 1px ${theme.colors.warning.main};
color: ${theme.colors.warning.contrastText};
`,
bad: css`
background-color: ${theme.colors.error.main};
border: solid 1px ${theme.colors.error.main};
color: ${theme.colors.error.contrastText};
`,
neutral: css`
background-color: ${theme.colors.secondary.main};
border: solid 1px ${theme.colors.secondary.main};
color: ${theme.colors.secondary.contrastText};
`,
info: css`
background-color: ${theme.colors.primary.main};
border: solid 1px ${theme.colors.primary.main};
color: ${theme.colors.primary.contrastText};
`,
md: css`
padding: ${theme.spacing(0.5, 1)};
min-width: ${theme.spacing(8)};
`,
sm: css`
padding: ${theme.spacing(0.3, 0.5)};
min-width: 52px;
`,
muted: css`
opacity: 0.5;
`,
common: css({
display: 'inline-block',
color: 'white',
borderRadius: theme.shape.radius.default,
fontSize: theme.typography.size.sm,
textTransform: 'capitalize',
lineHeight: '1.2',
textAlign: 'center',
fontWeight: theme.typography.fontWeightBold,
}),
good: css({
backgroundColor: theme.colors.success.main,
border: `solid 1px ${theme.colors.success.main}`,
color: theme.colors.success.contrastText,
}),
warning: css({
backgroundColor: theme.colors.warning.main,
border: `solid 1px ${theme.colors.warning.main}`,
color: theme.colors.warning.contrastText,
}),
bad: css({
backgroundColor: theme.colors.error.main,
border: `solid 1px ${theme.colors.error.main}`,
color: theme.colors.error.contrastText,
}),
neutral: css({
backgroundColor: theme.colors.secondary.main,
border: `solid 1px ${theme.colors.secondary.main}`,
color: theme.colors.secondary.contrastText,
}),
info: css({
backgroundColor: theme.colors.primary.main,
border: `solid 1px ${theme.colors.primary.main}`,
color: theme.colors.primary.contrastText,
}),
md: css({
padding: theme.spacing(0.5, 1),
minWidth: theme.spacing(8),
}),
sm: css({
padding: theme.spacing(0.3, 0.5),
minWidth: '52px',
}),
muted: css({
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) => ({
wrapper: css`
white-space: pre-wrap;
`,
token: css`
cursor: default;
font-family: ${theme.typography.fontFamilyMonospace};
`,
popover: css`
border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z3};
background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.medium};
wrapper: css({
whiteSpace: 'pre-wrap',
}),
token: css({
cursor: 'default',
fontFamily: theme.typography.fontFamilyMonospace,
}),
popover: css({
borderRadius: theme.shape.radius.default,
boxShadow: theme.shadows.z3,
background: theme.colors.background.primary,
border: `1px solid ${theme.colors.border.medium}`,
padding: ${theme.spacing(1)};
`,
hoverTokenItem: css`
display: flex;
flex-direction: row;
align-items: center;
gap: ${theme.spacing(1)};
`,
padding: theme.spacing(1),
}),
hoverTokenItem: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: theme.spacing(1),
}),
});
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>;
};
export const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
background-color: ${theme.components.panel.background};
border: solid 1px ${theme.components.input.borderColor};
border-radius: ${theme.shape.radius.default};
padding: ${theme.spacing(0.5, 1)};
font-family: ${theme.typography.fontFamilyMonospace};
`,
wrapper: css({
backgroundColor: theme.components.panel.background,
border: `solid 1px ${theme.components.input.borderColor}`,
borderRadius: theme.shape.radius.default,
padding: theme.spacing(0.5, 1),
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) => ({
button: css`
& + & {
margin-left: ${theme.spacing(1)};
}
`,
actionsRow: css`
padding: ${theme.spacing(2, 0)} !important;
border-bottom: 1px solid ${theme.colors.border.medium};
`,
receivers: css`
padding: ${theme.spacing(1, 0)};
`,
button: css({
'& + &': {
marginLeft: theme.spacing(1),
},
}),
actionsRow: css({
padding: `${theme.spacing(2, 0)} !important`,
borderBottom: `1px solid ${theme.colors.border.medium}`,
}),
receivers: css({
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) => ({
tableWrapper: css`
margin-top: ${theme.spacing(3)};
${theme.breakpoints.up('md')} {
margin-left: ${theme.spacing(4.5)};
}
`,
duration: css`
margin-left: ${theme.spacing(1)};
font-size: ${theme.typography.bodySmall.fontSize};
`,
tableWrapper: css({
marginTop: theme.spacing(3),
[theme.breakpoints.up('md')]: {
marginLeft: theme.spacing(4.5),
},
}),
duration: css({
marginLeft: theme.spacing(1),
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) => ({
wrapper: css`
border-bottom: 1px solid ${theme.colors.border.medium};
margin-bottom: ${theme.spacing(3)};
`,
filterSection: css`
display: flex;
flex-direction: row;
margin-bottom: ${theme.spacing(3)};
gap: ${theme.spacing(1)};
`,
clearButton: css`
margin-left: ${theme.spacing(1)};
margin-top: 19px;
`,
wrapper: css({
borderBottom: `1px solid ${theme.colors.border.medium}`,
marginBottom: theme.spacing(3),
}),
filterSection: css({
display: 'flex',
flexDirection: 'row',
marginBottom: theme.spacing(3),
gap: theme.spacing(1),
}),
clearButton: css({
marginLeft: theme.spacing(1),
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) => ({
container: css`
display: flex;
flex-direction: column;
height: 100%;
gap: ${theme.spacing(2)};
`,
content: css`
flex: 1 1 100%;
`,
actions: css`
flex: 0;
justify-content: flex-end;
display: flex;
gap: ${theme.spacing(1)};
`,
container: css({
display: 'flex',
flexDirection: 'column',
height: '100%',
gap: theme.spacing(2),
}),
content: css({
flex: '1 1 100%',
}),
actions: css({
flex: 0,
justifyContent: 'flex-end',
display: 'flex',
gap: theme.spacing(1),
}),
});
function FileExportInlineDocumentation({ exportProvider }: { exportProvider: ExportProvider<unknown> }) {

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

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

@ -239,32 +239,32 @@ const DaysOfTheWeek = ({ defaultValue = '', onChange }: DaysOfTheWeekProps) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
input: css`
width: 400px;
`,
timeIntervalSection: css`
background-color: ${theme.colors.background.secondary};
padding: ${theme.spacing(2)};
`,
removeTimeIntervalButton: css`
margin-top: ${theme.spacing(2)};
`,
dayOfTheWeek: css`
cursor: pointer;
user-select: none;
padding: ${theme.spacing(1)} ${theme.spacing(3)};
input: css({
width: '400px',
}),
timeIntervalSection: css({
backgroundColor: theme.colors.background.secondary,
padding: theme.spacing(2),
}),
removeTimeIntervalButton: css({
marginTop: theme.spacing(2),
}),
dayOfTheWeek: css({
cursor: 'pointer',
userSelect: 'none',
padding: `${theme.spacing(1)} ${theme.spacing(3)}`,
border: solid 1px ${theme.colors.border.medium};
background: none;
border-radius: ${theme.shape.radius.default};
border: `solid 1px ${theme.colors.border.medium}`,
background: 'none',
borderRadius: theme.shape.radius.default,
color: ${theme.colors.text.secondary};
color: theme.colors.text.secondary,
&.selected {
font-weight: ${theme.typography.fontWeightBold};
color: ${theme.colors.primary.text};
border-color: ${theme.colors.primary.border};
background: ${theme.colors.primary.transparent};
}
`,
'&.selected': {
fontWeight: theme.typography.fontWeightBold,
color: theme.colors.primary.text,
borderColor: theme.colors.primary.border,
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) => ({
field: css`
margin-bottom: 0;
`,
timeRange: css`
margin-bottom: ${theme.spacing(1)};
`,
timeRangeInput: css`
width: 90px;
`,
deleteTimeRange: css`
margin: ${theme.spacing(1)} 0 0 ${theme.spacing(0.5)};
`,
addTimeRange: css`
margin-bottom: ${theme.spacing(2)};
`,
field: css({
marginBottom: 0,
}),
timeRange: css({
marginBottom: theme.spacing(1),
}),
timeRangeInput: css({
width: '90px',
}),
deleteTimeRange: css({
margin: `${theme.spacing(1)} 0 0 ${theme.spacing(0.5)}`,
}),
addTimeRange: css({
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) => ({
container: css`
display: flex;
flex-flow: column nowrap;
`,
muteTimingsButtons: css`
margin-bottom: ${theme.spacing(2)};
align-self: flex-end;
`,
container: css({
display: 'flex',
flexFlow: 'column nowrap',
}),
muteTimingsButtons: css({
marginBottom: theme.spacing(2),
alignSelf: 'flex-end',
}),
disabledBadge: css({
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);
return {
addMatcherBtn: css`
margin-bottom: ${commonSpacing};
`,
matchersContainer: css`
background-color: ${theme.colors.background.secondary};
padding: ${theme.spacing(1.5)} ${theme.spacing(2)};
padding-bottom: 0;
width: fit-content;
`,
matchersOperator: css`
min-width: 120px;
`,
noMatchersWarning: css`
padding: ${theme.spacing(1)} ${theme.spacing(2)};
margin-bottom: ${theme.spacing(1)};
`,
addMatcherBtn: css({
marginBottom: commonSpacing,
}),
matchersContainer: css({
backgroundColor: theme.colors.background.secondary,
padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
paddingBottom: 0,
width: 'fit-content',
}),
matchersOperator: css({
minWidth: '120px',
}),
noMatchersWarning: css({
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
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);
return {
wrapper: css`
color: #fff;
background: ${color};
padding: ${theme.spacing(0.33)} ${theme.spacing(0.66)};
font-size: ${theme.typography.bodySmall.fontSize};
wrapper: css({
color: '#fff',
background: color,
padding: `${theme.spacing(0.33)} ${theme.spacing(0.66)}`,
fontSize: theme.typography.bodySmall.fontSize,
border: solid 1px ${borderColor};
border-radius: ${theme.shape.borderRadius(2)};
`,
border: `solid 1px ${borderColor}`,
borderRadius: theme.shape.borderRadius(2),
}),
};
},
metadata: css`
color: ${theme.colors.text.secondary};
metadata: css({
color: theme.colors.text.secondary,
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.bodySmall.fontWeight};
`,
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.bodySmall.fontWeight,
}),
});
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) => ({
unit: css`
font-weight: ${theme.typography.fontWeightBold};
`,
list: css`
display: grid;
grid-template-columns: max-content 1fr 2fr;
gap: ${theme.spacing(1, 3)};
`,
header: css`
display: contents;
font-weight: ${theme.typography.fontWeightBold};
`,
examples: css`
display: contents;
& > div {
grid-column: 1 / span 2;
}
`,
unit: css({
fontWeight: theme.typography.fontWeightBold,
}),
list: css({
display: 'grid',
gridTemplateColumns: 'max-content 1fr 2fr',
gap: theme.spacing(1, 3),
}),
header: css({
display: 'contents',
fontWeight: theme.typography.fontWeightBold,
}),
examples: css({
display: 'contents',
'& > div': {
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) => {
return {
container: css`
align-items: center;
display: flex;
flex-flow: row nowrap;
container: css({
alignItems: 'center',
display: 'flex',
flexFlow: 'row nowrap',
& > * + * {
margin-left: ${theme.spacing(1)};
}
`,
input: css`
flex: 1;
`,
promDurationInput: css`
max-width: ${theme.spacing(32)};
`,
timingFormContainer: css`
padding: ${theme.spacing(1)};
`,
linkText: css`
text-decoration: underline;
`,
collapse: css`
border: none;
background: none;
color: ${theme.colors.text.primary};
`,
'& > * + *': {
marginLeft: theme.spacing(1),
},
}),
input: css({
flex: 1,
}),
promDurationInput: css({
maxWidth: theme.spacing(32),
}),
timingFormContainer: css({
padding: theme.spacing(1),
}),
linkText: css({
textDecoration: 'underline',
}),
collapse: css({
border: 'none',
background: 'none',
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);
return {
container: css`
display: grid;
grid-template-columns: 1fr 1.5fr;
grid-template-rows: min-content auto;
gap: ${theme.spacing(2)};
flex: 1;
`,
container: css({
display: 'grid',
gridTemplateColumns: '1fr 1.5fr',
gridTemplateRows: 'min-content auto',
gap: theme.spacing(2),
flex: 1,
}),
tag: css`
margin: 5px;
`,
tag: css({
margin: '5px',
}),
column: css`
flex: 1 1 auto;
`,
column: css({
flex: '1 1 auto',
}),
alertLabels: css`
overflow-x: auto;
height: 32px;
`,
ruleTitle: css`
height: 22px;
font-weight: ${theme.typography.fontWeightBold};
`,
rowButton: css`
${clearButton};
padding: ${theme.spacing(0.5)};
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
alertLabels: css({
overflowX: 'auto',
height: '32px',
}),
ruleTitle: css({
height: '22px',
fontWeight: theme.typography.fontWeightBold,
}),
rowButton: css(clearButton, {
padding: theme.spacing(0.5),
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'left',
whiteSpace: 'nowrap',
cursor: 'pointer',
border: '2px solid transparent',
&:disabled {
cursor: not-allowed;
color: ${theme.colors.text.disabled};
}
`,
rowButtonTitle: css`
overflow-x: auto;
`,
rowSelected: css`
border-color: ${theme.colors.primary.border};
`,
rowOdd: css`
background-color: ${theme.colors.background.secondary};
`,
instanceButton: css`
display: flex;
gap: ${theme.spacing(1)};
justify-content: space-between;
align-items: center;
`,
loadingPlaceholder: css`
height: 100%;
display: flex;
justify-content: center;
align-items: center;
`,
selectedRulePlaceholder: css`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-weight: ${theme.typography.fontWeightBold};
`,
modal: css`
height: 100%;
`,
modalContent: css`
flex: 1;
display: flex;
flex-direction: column;
`,
modalAlert: css`
flex-grow: 0;
`,
warnIcon: css`
fill: ${theme.colors.warning.main};
`,
labels: css`
justify-content: flex-start;
`,
alertFolder: css`
height: 20px;
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
display: flex;
flex-direction: row;
justify-content: flex-start;
column-gap: ${theme.spacing(1)};
align-items: center;
`,
'&:disabled': {
cursor: 'not-allowed',
color: theme.colors.text.disabled,
},
}),
rowButtonTitle: css({
overflowX: 'auto',
}),
rowSelected: css({
borderColor: theme.colors.primary.border,
}),
rowOdd: css({
backgroundColor: theme.colors.background.secondary,
}),
instanceButton: css({
display: 'flex',
gap: theme.spacing(1),
justifyContent: 'space-between',
alignItems: 'center',
}),
loadingPlaceholder: css({
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}),
selectedRulePlaceholder: css({
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
textAlign: 'center',
fontWeight: theme.typography.fontWeightBold,
}),
modal: css({
height: '100%',
}),
modalContent: css({
flex: 1,
display: 'flex',
flexDirection: 'column',
}),
modalAlert: css({
flexGrow: 0,
}),
warnIcon: css({
fill: theme.colors.warning.main,
}),
labels: css({
justifyContent: 'flex-start',
}),
alertFolder: css({
height: '20px',
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
columnGap: theme.spacing(1),
alignItems: 'center',
}),
};
};

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

@ -153,14 +153,14 @@ const AlertTemplateDataTable = () => {
return <TemplateDataTable dataItems={AlertTemplatePreviewData} />;
};
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
display: flex;
flex-direction: column;
height: 100%;
`,
tooltip: css`
padding-left: ${theme.spacing(1)};
`,
wrapper: css({
display: 'flex',
flexDirection: 'column',
height: '100%',
}),
tooltip: css({
paddingLeft: theme.spacing(1),
}),
label: css({
margin: 0,
}),
@ -171,12 +171,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: 'fit-content',
border: 'none',
}),
templateDataDocsHeader: css`
color: ${theme.colors.text.primary};
templateDataDocsHeader: css({
color: theme.colors.text.primary,
span {
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
}
`,
span: {
color: theme.colors.text.secondary,
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) => ({
heading: css`
display: flex;
justify-content: space-between;
align-items: flex-end;
`,
description: css`
color: ${theme.colors.text.secondary};
`,
heading: css({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-end',
}),
description: css({
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) => ({
header: css`
color: ${theme.colors.text.primary};
header: css({
color: theme.colors.text.primary,
span {
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
}
`,
interactiveType: css`
color: ${theme.colors.text.link};
`,
span: {
color: theme.colors.text.secondary,
fontSize: theme.typography.bodySmall.fontSize,
},
}),
interactiveType: css({
color: theme.colors.text.link,
}),
});
interface TemplateDataTableProps {
@ -132,33 +132,32 @@ function KeyValueTemplateDataTable() {
}
const getTemplateDataTableStyles = (theme: GrafanaTheme2) => ({
table: css`
border-collapse: collapse;
width: 100%;
table: css({
borderCollapse: 'collapse',
width: '100%',
caption {
caption-side: top;
}
caption: {
captionSide: 'top',
},
td,
th {
padding: ${theme.spacing(1, 1)};
}
'td, th': {
padding: theme.spacing(1, 1),
},
thead {
font-weight: ${theme.typography.fontWeightBold};
}
thead: {
fontWeight: theme.typography.fontWeightBold,
},
tbody tr:nth-child(2n + 1) {
background-color: ${theme.colors.background.secondary};
}
'tbody tr:nth-child(2n + 1)': {
backgroundColor: theme.colors.background.secondary,
},
tbody td:nth-child(1) {
font-weight: ${theme.typography.fontWeightBold};
}
'tbody td:nth-child(1)': {
fontWeight: theme.typography.fontWeightBold,
},
tbody td:nth-child(2) {
font-style: italic;
}
`,
'tbody td:nth-child(2)': {
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',
},
}),
snippets: css`
margin-top: ${theme.spacing(2)};
font-size: ${theme.typography.bodySmall.fontSize};
`,
code: css`
color: ${theme.colors.text.secondary};
font-weight: ${theme.typography.fontWeightBold};
`,
snippets: css({
marginTop: theme.spacing(2),
fontSize: theme.typography.bodySmall.fontSize,
}),
code: css({
color: theme.colors.text.secondary,
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) => ({
buttons: css`
& > * + * {
margin-left: ${theme.spacing(1)};
}
`,
innerContent: css`
max-width: 536px;
`,
wrapper: css`
margin: ${theme.spacing(2, 0)};
padding: ${theme.spacing(1)};
border: solid 1px ${theme.colors.border.medium};
border-radius: ${theme.shape.radius.default};
max-width: ${theme.breakpoints.values.xl}${theme.breakpoints.unit};
`,
topRow: css`
display: flex;
flex-direction: row;
justify-content: space-between;
`,
channelSettingsHeader: css`
margin-top: ${theme.spacing(2)};
`,
buttons: css({
'& > * + *': {
marginLeft: theme.spacing(1),
},
}),
innerContent: css({
maxWidth: '536px',
}),
wrapper: css({
margin: theme.spacing(2, 0),
padding: theme.spacing(1),
border: `solid 1px ${theme.colors.border.medium}`,
borderRadius: theme.shape.radius.default,
maxWidth: `${theme.breakpoints.values.xl}${theme.breakpoints.unit}`,
}),
topRow: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}),
channelSettingsHeader: css({
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) => ({
wrapper: css`
margin-top: ${theme.spacing(1)};
padding-bottom: ${theme.spacing(1)};
`,
toggle: css`
margin: ${theme.spacing(1, 0)};
padding: 0;
`,
hidden: css`
display: none;
`,
description: css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.fontWeightRegular};
margin: 0;
`,
content: css`
padding-left: ${theme.spacing(3)};
`,
wrapper: css({
marginTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
}),
toggle: css({
margin: theme.spacing(1, 0),
padding: 0,
}),
hidden: css({
display: 'none',
}),
description: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.size.sm,
fontWeight: theme.typography.fontWeightRegular,
margin: 0,
}),
content: css({
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) => ({
section: css`
margin-bottom: ${theme.spacing(2)};
`,
onAddButton: css`
flex: none;
width: fit-content;
padding-right: ${theme.spacing(1)};
margin-left: auto;
`,
flexWrapper: css`
display: flex;
flex-direction: row,
justify-content: space-between;
`,
onSubmitWrapper: css`
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: flex-end;
`,
onSubmitButton: css`
margin-left: ${theme.spacing(2)};
`,
result: css`
width: 570px;
height: 363px;
`,
section: css({
marginBottom: theme.spacing(2),
}),
onAddButton: css({
flex: 'none',
width: 'fit-content',
paddingRight: theme.spacing(1),
marginLeft: 'auto',
}),
flexWrapper: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}),
onSubmitWrapper: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'baseline',
justifyContent: 'flex-end',
}),
onSubmitButton: css({
marginLeft: theme.spacing(2),
}),
result: css({
width: '570px',
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) => ({
heading: css`
margin: ${theme.spacing(4, 0)};
`,
buttons: css`
margin-top: ${theme.spacing(4)};
heading: css({
margin: theme.spacing(4, 0),
}),
buttons: css({
marginTop: theme.spacing(4),
& > * + * {
margin-left: ${theme.spacing(1)};
}
`,
'& > * + *': {
marginLeft: theme.spacing(1),
},
}),
});
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) => ({
flexRow: css`
display: flex;
flex-direction: row;
align-items: flex-start;
margin-bottom: ${theme.spacing(1)};
`,
section: css`
margin-bottom: ${theme.spacing(2)};
`,
flexRow: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-start',
marginBottom: theme.spacing(1),
}),
section: css({
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) => ({
addButton: css`
margin-top: ${theme.spacing(1)};
`,
table: css`
tbody td {
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} 0;
}
`,
addButton: css({
marginTop: theme.spacing(1),
}),
table: css({
'tbody td': {
padding: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`,
},
}),
});
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) => ({
checkbox: css`
height: auto; // native checkbox has fixed height which does not take into account description
`,
legend: css`
font-size: ${theme.typography.h6.fontSize};
`,
checkbox: css({
height: 'auto', // native checkbox has fixed height which does not take into account description
}),
legend: css({
fontSize: theme.typography.h6.fontSize,
}),
});
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) => ({
row: css`
display: flex;
flex-direction: row;
margin-bottom: ${theme.spacing(1)};
align-items: center;
`,
deleteIcon: css`
margin-left: ${theme.spacing(1)};
`,
addButton: css`
margin-top: ${theme.spacing(1)};
`,
row: css({
display: 'flex',
flexDirection: 'row',
marginBottom: theme.spacing(1),
alignItems: 'center',
}),
deleteIcon: css({
marginLeft: theme.spacing(1),
}),
addButton: css({
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';
export const getReceiverFormFieldStyles = (theme: GrafanaTheme2) => ({
collapsibleSection: css`
margin: 0;
padding: 0;
`,
wrapper: css`
margin: ${theme.spacing(2, 0)};
padding: ${theme.spacing(1)};
border: solid 1px ${theme.colors.border.medium};
border-radius: ${theme.shape.radius.default};
position: relative;
`,
description: css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.fontWeightRegular};
margin: 0;
`,
deleteIcon: css`
position: absolute;
right: ${theme.spacing(1)};
top: ${theme.spacing(1)};
`,
addButton: css`
margin-top: ${theme.spacing(1)};
`,
collapsibleSection: css({
margin: 0,
padding: 0,
}),
wrapper: css({
margin: theme.spacing(2, 0),
padding: theme.spacing(1),
border: `solid 1px ${theme.colors.border.medium}`,
borderRadius: theme.shape.radius.default,
position: 'relative',
}),
description: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.size.sm,
fontWeight: theme.typography.fontWeightRegular,
margin: 0,
}),
deleteIcon: css({
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
}),
addButton: css({
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) => ({
annotationValueInput: css`
width: 394px;
`,
textarea: css`
height: 76px;
`,
addAnnotationsButtonContainer: css`
margin-top: ${theme.spacing(1)};
gap: ${theme.spacing(1)};
display: flex;
`,
field: css`
margin-bottom: ${theme.spacing(0.5)};
`,
flexRow: css`
display: flex;
flex-direction: row;
justify-content: flex-start;
`,
flexRowItemMargin: css`
margin-top: ${theme.spacing(1)};
`,
deleteAnnotationButton: css`
display: inline-block;
margin-top: 10px;
margin-left: 10px;
`,
annotationValueInput: css({
width: '394px',
}),
textarea: css({
height: '76px',
}),
addAnnotationsButtonContainer: css({
marginTop: theme.spacing(1),
gap: theme.spacing(1),
display: 'flex',
}),
field: css({
marginBottom: theme.spacing(0.5),
}),
flexRow: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
}),
flexRowItemMargin: css({
marginTop: theme.spacing(1),
}),
deleteAnnotationButton: css({
display: 'inline-block',
marginTop: '10px',
marginLeft: '10px',
}),
annotationTitle: css`
color: ${theme.colors.text.primary};
margin-bottom: 3px;
`,
annotationTitle: css({
color: theme.colors.text.primary,
marginBottom: '3px',
}),
annotationContainer: css`
margin-top: 5px;
`,
annotationContainer: css({
marginTop: '5px',
}),
annotationDescription: css`
color: ${theme.colors.text.secondary};
`,
annotationDescription: css({
color: theme.colors.text.secondary,
}),
annotationValueContainer: css`
display: flex;
`,
annotationValueContainer: css({
display: 'flex',
}),
});
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) => ({
table: css`
width: 100%;
margin: ${theme.spacing(2, 0)};
table: css({
width: '100%',
margin: theme.spacing(2, 0),
caption {
caption-side: top;
color: ${theme.colors.text.primary};
caption: {
captionSide: 'top',
color: theme.colors.text.primary,
& > span {
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
}
}
'& > span': {
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
},
},
td,
th {
padding: ${theme.spacing(1, 1)};
}
'td, th': {
padding: theme.spacing(1, 1),
},
td + td,
th + th {
padding-left: ${theme.spacing(3)};
}
'td + td, th + th': {
paddingLeft: theme.spacing(3),
},
thead th {
&:nth-child(1) {
width: 80px;
}
'thead th': {
'&:nth-child(1)': {
width: '80px',
},
&:nth-child(2) {
width: auto;
}
'&:nth-child(2)': {
width: 'auto',
},
&:nth-child(3) {
width: 40px;
}
}
'&:nth-child(3)': {
width: '40px',
},
},
td:nth-child(3) {
text-align: center;
}
'td:nth-child(3)': {
textAlign: 'center',
},
tbody tr:nth-child(2n + 1) {
background-color: ${theme.colors.background.secondary};
}
`,
tagList: css`
justify-content: flex-start;
`,
'tbody tr:nth-child(2n + 1)': {
backgroundColor: theme.colors.background.secondary,
},
}),
tagList: css({
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) => ({
inlineField: css`
margin-bottom: 0;
`,
flexRow: css`
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
`,
timeUnit: css`
margin-left: ${theme.spacing(0.5)};
`,
inlineField: css({
marginBottom: 0,
}),
flexRow: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
}),
timeUnit: css({
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) => ({
annotationTitle: css`
color: ${theme.colors.text.primary};
margin-bottom: 3px;
`,
annotationTitle: css({
color: theme.colors.text.primary,
marginBottom: '3px',
}),
customAnnotationInput: css`
margin-top: 5px;
width: 100%;
`,
customAnnotationInput: css({
marginTop: '5px',
width: '100%',
}),
});
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) => ({
container: css`
margin-top: 5px;
`,
container: css({
marginTop: '5px',
}),
noLink: css`
color: ${theme.colors.text.secondary};
`,
link: css`
color: ${theme.colors.text.link};
margin-right: ${theme.spacing(1.5)};
`,
noLink: css({
color: theme.colors.text.secondary,
}),
link: css({
color: theme.colors.text.link,
marginRight: theme.spacing(1.5),
}),
icon: css`
margin-right: ${theme.spacing(1)};
cursor: pointer;
`,
icon: css({
marginRight: theme.spacing(1),
cursor: 'pointer',
}),
});
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);
return {
container: css`
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content auto;
gap: ${theme.spacing(2)};
flex: 1;
`,
column: css`
flex: 1 1 auto;
`,
dashboardTitle: css`
height: 22px;
font-weight: ${theme.typography.fontWeightBold};
`,
dashboardFolder: css`
height: 20px;
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
display: flex;
flex-direction: row;
justify-content: flex-start;
column-gap: ${theme.spacing(1)};
align-items: center;
`,
rowButton: css`
${clearButton};
padding: ${theme.spacing(0.5)};
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
container: css({
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateRows: 'min-content auto',
gap: theme.spacing(2),
flex: 1,
}),
column: css({
flex: '1 1 auto',
}),
dashboardTitle: css({
height: '22px',
fontWeight: theme.typography.fontWeightBold,
}),
dashboardFolder: css({
height: '20px',
fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary,
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
columnGap: theme.spacing(1),
alignItems: 'center',
}),
rowButton: css(clearButton, {
padding: theme.spacing(0.5),
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'left',
whiteSpace: 'nowrap',
cursor: 'pointer',
border: '2px solid transparent',
&:disabled {
cursor: not-allowed;
color: ${theme.colors.text.disabled};
}
`,
rowButtonTitle: css`
text-overflow: ellipsis;
overflow: hidden;
`,
rowSelected: css`
border-color: ${theme.colors.primary.border};
`,
rowOdd: css`
background-color: ${theme.colors.background.secondary};
`,
panelButton: css`
display: flex;
gap: ${theme.spacing(1)};
justify-content: space-between;
align-items: center;
`,
loadingPlaceholder: css`
height: 100%;
display: flex;
justify-content: center;
align-items: center;
`,
selectDashboardPlaceholder: css`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-weight: ${theme.typography.fontWeightBold};
`,
modal: css`
height: 100%;
`,
modalContent: css`
flex: 1;
display: flex;
flex-direction: column;
`,
modalAlert: css`
flex-grow: 0;
`,
warnIcon: css`
fill: ${theme.colors.warning.main};
`,
'&:disabled': {
cursor: 'not-allowed',
color: theme.colors.text.disabled,
},
}),
rowButtonTitle: css({
textOverflow: 'ellipsis',
overflow: 'hidden',
}),
rowSelected: css({
borderColor: theme.colors.primary.border,
}),
rowOdd: css({
backgroundColor: theme.colors.background.secondary,
}),
panelButton: css({
display: 'flex',
gap: theme.spacing(1),
justifyContent: 'space-between',
alignItems: 'center',
}),
loadingPlaceholder: css({
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}),
selectDashboardPlaceholder: css({
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
textAlign: 'center',
fontWeight: theme.typography.fontWeightBold,
}),
modal: css({
height: '100%',
}),
modalContent: css({
flex: 1,
display: 'flex',
flexDirection: 'column',
}),
modalAlert: css({
flexGrow: 0,
}),
warnIcon: css({
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) => ({
preview: css`
padding: ${theme.spacing(2, 0)};
max-width: ${theme.breakpoints.values.xl}px;
`,
previewAlert: css`
margin: ${theme.spacing(1, 0)};
`,
preview: css({
padding: theme.spacing(2, 0),
maxWidth: `${theme.breakpoints.values.xl}px`,
}),
previewAlert: css({
margin: theme.spacing(1, 0),
}),
});
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) => ({
wrapper: css`
display: flex;
gap: ${theme.spacing(2)};
align-content: stretch;
flex-wrap: wrap;
`,
wrapper: css({
display: 'flex',
gap: theme.spacing(2),
alignContent: 'stretch',
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) => ({
container: css`
display: flex;
flex-direction: column;
align-items: baseline;
max-width: ${theme.breakpoints.values.lg}px;
justify-content: space-between;
`,
formInput: css`
flex-grow: 1;
`,
modal: css`
width: ${theme.breakpoints.values.sm}px;
`,
modalTitle: css`
color: ${theme.colors.text.secondary};
margin-bottom: ${theme.spacing(2)};
`,
container: css({
display: 'flex',
flexDirection: 'column',
alignItems: 'baseline',
maxWidth: `${theme.breakpoints.values.lg}px`,
justifyContent: 'space-between',
}),
formInput: css({
flexGrow: 1,
}),
modal: css({
width: `${theme.breakpoints.values.sm}px`,
}),
modalTitle: css({
color: theme.colors.text.secondary,
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) => ({
inlineField: css`
margin-bottom: 0;
`,
evaluateLabel: css`
margin-right: ${theme.spacing(1)};
`,
evaluationContainer: css`
color: ${theme.colors.text.secondary};
max-width: ${theme.breakpoints.values.sm}px;
font-size: ${theme.typography.size.sm};
`,
intervalChangedLabel: css`
margin-bottom: ${theme.spacing(1)};
`,
warningIcon: css`
justify-self: center;
margin-right: ${theme.spacing(1)};
color: ${theme.colors.warning.text};
`,
infoIcon: css`
margin-left: 10px;
`,
warningMessage: css`
color: ${theme.colors.warning.text};
`,
bold: css`
font-weight: bold;
`,
alignInterval: css`
margin-top: ${theme.spacing(1)};
margin-left: -${theme.spacing(1)};
`,
marginTop: css`
margin-top: ${theme.spacing(1)};
`,
switchLabel: css(`
color: ${theme.colors.text.primary},
inlineField: css({
marginBottom: 0,
}),
evaluateLabel: css({
marginRight: theme.spacing(1),
}),
evaluationContainer: css({
color: theme.colors.text.secondary,
maxWidth: `${theme.breakpoints.values.sm}px`,
fontSize: theme.typography.size.sm,
}),
intervalChangedLabel: css({
marginBottom: theme.spacing(1),
}),
warningIcon: css({
justifySelf: 'center',
marginRight: theme.spacing(1),
color: theme.colors.warning.text,
}),
infoIcon: css({
marginLeft: '10px',
}),
warningMessage: css({
color: theme.colors.warning.text,
}),
bold: css({
fontWeight: 'bold',
}),
alignInterval: css({
marginTop: theme.spacing(1),
marginLeft: `-${theme.spacing(1)}`,
}),
marginTop: css({
marginTop: theme.spacing(1),
}),
switchLabel: css({
color: theme.colors.text.primary,
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) => ({
flexRow: css`
display: flex;
flex-direction: row;
justify-content: flex-start;
flexRow: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
& > * + * {
margin-left: ${theme.spacing(3)};
}
`,
input: css`
width: 330px !important;
`,
'& > * + *': {
marginLeft: theme.spacing(3),
},
}),
input: css({
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) => ({
mutedText: css`
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.size.sm};
`,
helpInfo: css`
cursor: pointer;
text-decoration: underline;
`,
mutedText: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.size.sm,
}),
helpInfo: css({
cursor: 'pointer',
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) {
return {
container: css`
margin-top: ${theme.spacing(2)};
max-width: ${theme.breakpoints.values.xxl}px;
`,
container: css({
marginTop: theme.spacing(2),
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) {
return {
container: css`
margin: ${theme.spacing(2)} 0;
`,
table: css`
flex: 1 1 auto;
height: 135px;
margin-top: ${theme.spacing(2)};
border: 1px solid ${theme.colors.border.medium};
border-radius: ${theme.shape.radius.default};
`,
container: css({
margin: `${theme.spacing(2)} 0`,
}),
table: css({
flex: '1 1 auto',
height: '135px',
marginTop: theme.spacing(2),
border: `1px solid ${theme.colors.border.medium}`,
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) => ({
container: css`
background-color: ${theme.colors.background.primary};
height: 100%;
`,
container: css({
backgroundColor: theme.colors.background.primary,
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);
return {
queryOptions: css`
> div {
justify-content: space-between;
}
`,
queryOptions: css({
'> div': {
justifyContent: 'space-between',
},
}),
staticValues: css`
color: ${theme.colors.text.secondary};
margin-right: ${theme.spacing(1)};
`,
staticValues: css({
color: theme.colors.text.secondary,
marginRight: theme.spacing(1),
}),
actionLink: css`
${clearButton};
color: ${theme.colors.text.link};
cursor: pointer;
actionLink: css(clearButton, {
color: theme.colors.text.link,
cursor: 'pointer',
&:hover {
text-decoration: underline;
}
`,
'&:hover': {
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) => ({
wrapper: css`
label: AlertingQueryWrapper;
margin-bottom: ${theme.spacing(1)};
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.radius.default};
wrapper: css({
label: 'AlertingQueryWrapper',
marginBottom: theme.spacing(1),
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
button {
overflow: visible;
}
`,
dsTooltip: css`
display: flex;
align-items: center;
&:hover {
opacity: 0.85;
cursor: pointer;
}
`,
button: {
overflow: 'visible',
},
}),
dsTooltip: css({
display: 'flex',
alignItems: 'center',
'&:hover': {
opacity: 0.85,
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) => ({
vizWrapper: css`
margin: ${theme.spacing(1, 0)};
`,
vizWrapper: css({
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) => ({
parent: css`
display: flex;
flex-direction: row;
border: solid 1px ${theme.colors.border.weak};
border-radius: ${theme.shape.radius.default};
padding: ${theme.spacing(2)} ${theme.spacing(3)};
`,
description: css`
margin-top: -${theme.spacing(2)};
`,
fullWidth: css`
width: 100%;
`,
parent: css({
display: 'flex',
flexDirection: 'row',
border: `solid 1px ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
}),
description: css({
marginTop: `-${theme.spacing(2)}`,
}),
fullWidth: css({
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) => ({
slashNotAllowed: css`
color: ${theme.colors.warning.main};
font-size: 12px;
margin-bottom: 2px;
`,
infoIcon: css`
color: ${theme.colors.warning.main};
font-size: 12px;
margin-bottom: 2px;
cursor: pointer;
`,
slashNotAllowed: css({
color: theme.colors.warning.main,
fontSize: '12px',
marginBottom: '2px',
}),
infoIcon: css({
color: theme.colors.warning.main,
fontSize: '12px',
marginBottom: '2px',
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) => ({
content: css`
flex-grow: 1;
height: 100%;
padding-bottom: 16px;
margin-bottom: ${theme.spacing(2)};
`,
applyButton: css`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-grow: 0;
margin-bottom: ${theme.spacing(2)};
`,
content: css({
flexGrow: 1,
height: '100%',
paddingBottom: '16px',
marginBottom: theme.spacing(2),
}),
applyButton: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
flexGrow: 0,
marginBottom: theme.spacing(2),
}),
});
export const drawerStyles = () => ({
subtitle: css`
display: flex;
align-items: center;
justify-content: space-between;
`,
subtitle: css({
display: 'flex',
alignItems: 'center',
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) => ({
wrapper: css`
width: 100%;
position: relative;
`,
instantVectorResultWrapper: css`
border: solid 1px ${theme.colors.border.medium};
border-radius: ${theme.shape.radius.default};
padding: 0;
wrapper: css({
width: '100%',
position: 'relative',
}),
instantVectorResultWrapper: css({
border: `solid 1px ${theme.colors.border.medium}`,
borderRadius: theme.shape.radius.default,
padding: 0,
display: flex;
flex-direction: column;
flex-wrap: nowrap;
`,
display: 'flex',
flexDirection: 'column',
flexWrap: 'nowrap',
}),
title: css({
label: 'panel-title',
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) => ({
defaultPolicy: css`
padding: ${theme.spacing(0.5)};
background: ${theme.colors.background.secondary};
width: fit-content;
`,
textMuted: css`
color: ${theme.colors.text.secondary};
`,
defaultPolicy: css({
padding: theme.spacing(0.5),
background: theme.colors.background.secondary,
width: 'fit-content',
}),
textMuted: css({
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) => ({
collapsableSection: css`
width: auto;
border: 0;
`,
previewHeader: css`
margin: 0;
`,
routePreviewHeaderRow: css`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
margin-top: ${theme.spacing(1)};
`,
collapseLabel: css`
flex: 1;
`,
button: css`
justify-content: flex-end;
`,
tagsInDetails: css`
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
`,
policyPathItemMatchers: css`
display: flex;
flex-direction: row;
gap: ${theme.spacing(1)};
`,
collapsableSection: css({
width: 'auto',
border: 0,
}),
previewHeader: css({
margin: 0,
}),
routePreviewHeaderRow: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginTop: theme.spacing(1),
}),
collapseLabel: css({
flex: 1,
}),
button: css({
justifyContent: 'flex-end',
}),
tagsInDetails: css({
display: 'flex',
justifyContent: 'flex-start',
flexWrap: 'wrap',
}),
policyPathItemMatchers: css({
display: 'flex',
flexDirection: 'row',
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);
const getStyles = (theme: GrafanaTheme2) => ({
alertManagerRow: css`
display: flex;
flex-direction: column;
gap: ${theme.spacing(1)};
width: 100%;
`,
firstAlertManagerLine: css`
height: 1px;
width: ${theme.spacing(4)};
background-color: ${theme.colors.secondary.main};
`,
alertManagerName: css`
width: fit-content;
`,
secondAlertManagerLine: css`
height: 1px;
width: 100%;
flex: 1;
background-color: ${theme.colors.secondary.main};
`,
img: css`
margin-left: ${theme.spacing(2)};
width: ${theme.spacing(3)};
height: ${theme.spacing(3)};
margin-right: ${theme.spacing(1)};
`,
alertManagerRow: css({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
width: '100%',
}),
firstAlertManagerLine: css({
height: '1px',
width: theme.spacing(4),
backgroundColor: theme.colors.secondary.main,
}),
alertManagerName: css({
width: 'fit-content',
}),
secondAlertManagerLine: css({
height: '1px',
width: '100%',
flex: 1,
backgroundColor: theme.colors.secondary.main,
}),
img: css({
marginLeft: theme.spacing(2),
width: theme.spacing(3),
height: theme.spacing(3),
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) => ({
textMuted: css`
color: ${theme.colors.text.secondary};
`,
textItalic: css`
font-style: italic;
`,
expandable: css`
cursor: pointer;
`,
routeHeader: css`
display: flex;
flex-direction: row;
gap: ${theme.spacing(1)};
align-items: center;
border-bottom: 1px solid ${theme.colors.border.weak};
&:hover {
background-color: ${theme.components.table.rowHoverBackground};
}
padding: ${theme.spacing(0.5, 0.5, 0.5, 0)};
`,
labelList: css`
flex: 0 1 auto;
justify-content: flex-start;
`,
labelSeparator: css`
width: 1px;
background-color: ${theme.colors.border.weak};
`,
tagListCard: css`
display: flex;
flex-direction: row;
gap: ${theme.spacing(2)};
textMuted: css({
color: theme.colors.text.secondary,
}),
textItalic: css({
fontStyle: 'italic',
}),
expandable: css({
cursor: 'pointer',
}),
routeHeader: css({
display: 'flex',
flexDirection: 'row',
gap: theme.spacing(1),
alignItems: 'center',
borderBottom: `1px solid ${theme.colors.border.weak}`,
padding: theme.spacing(0.5, 0.5, 0.5, 0),
'&:hover': {
backgroundColor: theme.components.table.rowHoverBackground,
},
}),
labelList: css({
flex: '0 1 auto',
justifyContent: 'flex-start',
}),
labelSeparator: css({
width: '1px',
backgroundColor: theme.colors.border.weak,
}),
tagListCard: css({
display: 'flex',
flexDirection: 'row',
gap: theme.spacing(2),
position: relative;
background: ${theme.colors.background.secondary};
padding: ${theme.spacing(1)};
position: 'relative',
background: theme.colors.background.secondary,
padding: theme.spacing(1),
border-radius: ${theme.shape.borderRadius(2)};
border: solid 1px ${theme.colors.border.weak};
`,
routeInstances: css`
padding: ${theme.spacing(1, 0, 1, 4)};
position: relative;
borderRadius: theme.shape.borderRadius(2),
border: `solid 1px ${theme.colors.border.weak}`,
}),
routeInstances: css({
padding: theme.spacing(1, 0, 1, 4),
position: 'relative',
display: flex;
flex-direction: column;
gap: ${theme.spacing(1)};
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
&:before {
content: '';
position: absolute;
left: ${theme.spacing(2)};
height: calc(100% - ${theme.spacing(2)});
width: ${theme.spacing(4)};
border-left: solid 1px ${theme.colors.border.weak};
}
`,
verticalBar: css`
width: 1px;
height: 20px;
background-color: ${theme.colors.secondary.main};
margin-left: ${theme.spacing(1)};
margin-right: ${theme.spacing(1)};
`,
'&:before': {
content: '""',
position: 'absolute',
left: theme.spacing(2),
height: `calc(100% - ${theme.spacing(2)})`,
width: theme.spacing(4),
borderLeft: `solid 1px ${theme.colors.border.weak}`,
},
}),
verticalBar: css({
width: '1px',
height: '20px',
backgroundColor: theme.colors.secondary.main,
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
}),
});

122
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) => ({
textMuted: css`
color: ${theme.colors.text.secondary};
`,
link: css`
display: block;
color: ${theme.colors.text.link};
`,
button: css`
justify-content: flex-end;
display: flex;
`,
detailsModal: css`
max-width: 560px;
`,
defaultPolicy: css`
padding: ${theme.spacing(0.5)};
background: ${theme.colors.background.secondary};
width: fit-content;
`,
contactPoint: css`
display: flex;
flex-direction: row;
gap: ${theme.spacing(1)};
align-items: center;
justify-content: space-between;
margin-bottom: ${theme.spacing(1)};
`,
policyPathWrapper: css`
display: flex;
flex-direction: column;
margin-top: ${theme.spacing(1)};
`,
separator: (units: number) => css`
margin-top: ${theme.spacing(units)};
`,
marginBottom: (units: number) => css`
margin-bottom: ${theme.spacing(theme.spacing(units))};
`,
policyInPath: (index = 0, higlight = false) => css`
margin-left: ${30 + index * 30}px;
padding: ${theme.spacing(1)};
margin-top: ${theme.spacing(1)};
border: solid 1px ${theme.colors.border.weak};
background: ${theme.colors.background.secondary};
width: fit-content;
position: relative;
${
higlight &&
css`
border: solid 1px ${theme.colors.info.border};
`
textMuted: css({
color: theme.colors.text.secondary,
}),
link: css({
display: 'block',
color: theme.colors.text.link,
}),
button: css({
justifyContent: 'flex-end',
display: 'flex',
}),
detailsModal: css({
maxWidth: '560px',
}),
defaultPolicy: css({
padding: theme.spacing(0.5),
background: theme.colors.background.secondary,
width: 'fit-content',
}),
contactPoint: css({
display: 'flex',
flexDirection: 'row',
gap: theme.spacing(1),
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: theme.spacing(1),
}),
policyPathWrapper: css({
display: 'flex',
flexDirection: 'column',
marginTop: theme.spacing(1),
}),
separator: (units: number) =>
css({
marginTop: theme.spacing(units),
}),
marginBottom: (units: number) =>
css({
marginBottom: theme.spacing(theme.spacing(units)),
}),
policyInPath: (index = 0, highlight = false) =>
css({
marginLeft: `${30 + index * 30}px`,
padding: theme.spacing(1),
marginTop: theme.spacing(1),
border: `solid 1px ${highlight ? theme.colors.info.border : theme.colors.border.weak}`,
background: theme.colors.background.secondary,
width: 'fit-content',
position: 'relative',
'&:before': {
content: '""',
position: 'absolute',
height: 'calc(100% - 10px)',
width: theme.spacing(1),
borderLeft: `solid 1px ${theme.colors.border.weak}`,
borderBottom: `solid 1px ${theme.colors.border.weak}`,
marginTop: theme.spacing(-2),
marginLeft: `-17px`,
},
&:before {
content: '';
position: absolute;
height: calc(100% - 10px);
width: ${theme.spacing(1)};
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) => ({
formInput: css`
width: 330px;
& + & {
margin-left: ${theme.spacing(3)};
}
`,
flexRow: css`
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
`,
formInput: css({
width: '330px',
'& + &': {
marginLeft: theme.spacing(3),
},
}),
flexRow: css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
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) => ({
addQueryButton: css`
width: fit-content;
`,
helpInfo: css`
display: flex;
flex-direction: row;
align-items: center;
width: fit-content;
font-weight: ${theme.typography.fontWeightMedium};
margin-left: ${theme.spacing(1)};
font-size: ${theme.typography.size.sm};
cursor: pointer;
`,
helpInfoText: css`
margin-left: ${theme.spacing(0.5)};
text-decoration: underline;
`,
infoLink: css`
color: ${theme.colors.text.link};
`,
addQueryButton: css({
width: 'fit-content',
}),
helpInfo: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: 'fit-content',
fontWeight: theme.typography.fontWeightMedium,
marginLeft: theme.spacing(1),
fontSize: theme.typography.size.sm,
cursor: 'pointer',
}),
helpInfoText: css({
marginLeft: theme.spacing(0.5),
textDecoration: 'underline',
}),
infoLink: css({
color: theme.colors.text.link,
}),
});
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) => ({
wrapper: css`
width: 380px;
cursor: pointer;
user-select: none;
`,
disabled: css`
opacity: 0.5;
`,
wrapper: css({
width: '380px',
cursor: 'pointer',
userSelect: 'none',
}),
disabled: css({
opacity: '0.5',
}),
});
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) => ({
meta: css`
color: ${theme.colors.text.disabled};
`,
meta: css({
color: theme.colors.text.disabled,
}),
});
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) => {
return {
content: css`
max-width: ${theme.breakpoints.values.xxl}px;
`,
content: css({
maxWidth: `${theme.breakpoints.values.xxl}px`,
}),
};
};
const getContentStyles = (padding: number) => (theme: GrafanaTheme2) => {
return {
wrapper: css`
background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.radius.default};
padding: ${theme.spacing(padding)};
`,
wrapper: css({
background: theme.colors.background.primary,
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
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) => ({
wrapper: css`
height: 24px;
font-size: ${theme.typography.bodySmall.fontSize};
`,
wrapper: css({
height: '24px',
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) {
return {
tag: css`
font-size: 11px;
font-weight: normal;
padding: ${theme.spacing(0.25, 0.5)};
vertical-align: middle;
margin-left: ${theme.spacing(0.5)};
`,
tag: css({
fontSize: '11px',
fontWeight: 'normal',
padding: theme.spacing(0.25, 0.5),
verticalAlign: 'middle',
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) => ({
loader: css`
margin-bottom: 0;
`,
sectionHeader: css`
display: flex;
justify-content: space-between;
`,
wrapper: css`
margin-bottom: ${theme.spacing(4)};
`,
spinner: css`
text-align: center;
padding: ${theme.spacing(2)};
`,
loader: css({
marginBottom: 0,
}),
sectionHeader: css({
display: 'flex',
justifyContent: 'space-between',
}),
wrapper: css({
marginBottom: theme.spacing(4),
}),
spinner: css({
textAlign: 'center',
padding: theme.spacing(2),
}),
pagination: getPaginationStyles(theme),
headerRow: css({
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) => ({
modal: css`
max-width: 560px;
`,
modalButtons: css`
top: -24px;
position: relative;
`,
formInput: css`
flex: 1;
`,
tableWrapper: css`
margin-top: ${theme.spacing(2)};
margin-bottom: ${theme.spacing(2)};
height: 100%;
`,
evalRequiredLabel: css`
font-size: ${theme.typography.bodySmall.fontSize};
`,
modal: css({
maxWidth: '560px',
}),
modalButtons: css({
top: '-24px',
position: 'relative',
}),
formInput: css({
flex: 1,
}),
tableWrapper: css({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
height: '100%',
}),
evalRequiredLabel: css({
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) => ({
loader: css`
margin-bottom: 0;
`,
sectionHeader: css`
display: flex;
justify-content: space-between;
margin-bottom: ${theme.spacing(1)};
`,
wrapper: css`
margin-bottom: ${theme.spacing(4)};
`,
spinner: css`
text-align: center;
padding: ${theme.spacing(2)};
`,
loader: css({
marginBottom: 0,
}),
sectionHeader: css({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(1),
}),
wrapper: css({
marginBottom: theme.spacing(4),
}),
spinner: css({
textAlign: 'center',
padding: theme.spacing(2),
}),
pagination: getPaginationStyles(theme),
headerRow: css({
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) => ({
newRuleCard: css`
width: calc(50% - ${theme.spacing(1)});
newRuleCard: css({
width: `calc(50% - ${theme.spacing(1)})`,
> div {
height: 100%;
}
`,
'> div': {
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) => ({
modal: css`
max-width: 640px;
max-height: 80%;
overflow: hidden;
`,
listItem: css`
display: flex;
flex-direction: row;
align-items: center;
modal: css({
maxWidth: '640px',
maxHeight: '80%',
overflow: 'hidden',
}),
listItem: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: ${theme.spacing()};
gap: theme.spacing(),
background: ${theme.colors.background.primary};
color: ${theme.colors.text.secondary};
background: theme.colors.background.primary,
color: theme.colors.text.secondary,
border-bottom: solid 1px ${theme.colors.border.medium};
padding: ${theme.spacing(1)} ${theme.spacing(2)};
borderBottom: `solid 1px ${theme.colors.border.medium}`,
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
&:last-child {
border-bottom: none;
}
'&:last-child': {
borderBottom: 'none',
},
&.isClone {
border: solid 1px ${theme.colors.primary.shade};
}
`,
listContainer: css`
user-select: none;
border: solid 1px ${theme.colors.border.medium};
`,
disabled: css`
opacity: 0.5;
pointer-events: none;
`,
listItemName: css`
flex: 1;
'&.isClone': {
border: `solid 1px ${theme.colors.primary.shade}`,
},
}),
listContainer: css({
userSelect: 'none',
border: `solid 1px ${theme.colors.border.medium}`,
}),
disabled: css({
opacity: '0.5',
pointerEvents: 'none',
}),
listItemName: css({
flex: 1,
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`,
header: css`
display: flex;
align-items: center;
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}),
header: css({
display: 'flex',
alignItems: 'center',
gap: ${theme.spacing(1)};
`,
dataSourceIcon: css`
width: ${theme.spacing(2)};
height: ${theme.spacing(2)};
`,
gap: theme.spacing(1),
}),
dataSourceIcon: css({
width: theme.spacing(2),
height: theme.spacing(2),
}),
});
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) {
return {
globalLimitValue: css`
font-weight: ${theme.typography.fontWeightBold};
`,
icon: css`
fill: ${theme.colors.warning.text};
`,
globalLimitValue: css({
fontWeight: theme.typography.fontWeightBold,
}),
icon: css({
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({
flex: '1',
flex: 1,
}),
rightSide: css({
[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 = () => ({
annotations: css`
margin-top: 46px;
`,
annotations: css({
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);
return {
dataSourceIcon: css`
width: ${size};
height: ${size};
`,
dataSourceIcon: css({
width: 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 = () => ({
exprRow: css`
margin-bottom: 46px;
`,
exprRow: css({
marginBottom: '46px',
}),
});

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