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,
}),
});

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

@ -28,34 +28,34 @@ const getDotStyles = (theme: GrafanaTheme2, props: DotStylesProps) => {
const warningStyle = props.color === 'warning';
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 &&
css({
backgroundColor: theme.colors.success.main,
outlineColor: theme.colors.success.transparent,
})}
${warningStyle &&
css({
backgroundColor: theme.colors.warning.main,
outlineColor: theme.colors.warning.transparent,
})}
${errorStyle &&
css({
backgroundColor: theme.colors.error.main,
outlineColor: theme.colors.error.transparent,
})}
`,
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 &&
css({
backgroundColor: theme.colors.warning.main,
outlineColor: theme.colors.warning.transparent,
}),
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> }) {

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

@ -458,161 +458,159 @@ const TimeseriesRow: FC<FrameProps & { index: number }> = ({ frame, index }) =>
const getStyles = (theme: GrafanaTheme2) => ({
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};
}
'&:nth-child(odd)': {
backgroundColor: 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;
'&: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;
white-space: nowrap;
`,
noData: css`
display: flex;
align-items: center;
justify-content: center;
padding: ${theme.spacing()};
`,
display: 'inline-block',
whiteSpace: 'nowrap',
}),
noData: css({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: theme.spacing(),
}),
},
mutedText: css`
color: ${theme.colors.text.secondary};
font-size: 0.9em;
mutedText: css({
color: theme.colors.text.secondary,
fontSize: '0.9em',
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`,
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;

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

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

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

@ -124,68 +124,64 @@ export function NotificationRouteDetailsModal({
}
const getStyles = (theme: GrafanaTheme2) => ({
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};
`
},
&: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;
}
} `,
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`,
},
}),
});

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