IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-08-26 05:17:26 -05: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
co-authored by Gilles De Mey
parent 1654b719e9
commit bc67b88301
122 changed files with 2226 additions and 2916 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.betterer.results
+11 -675
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"]
public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx
+7 -7
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,
}),
});
public/app/features/alerting/unified/AlertWarning.tsx
+3 -3
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),
}),
});
public/app/features/alerting/unified/AlertsFolderView.tsx
+20 -20
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',
}),
});
public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
+70 -76
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 }) {
public/app/features/alerting/unified/NotificationPolicies.tsx
+3 -3
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 {
public/app/features/alerting/unified/PanelAlertTabContent.tsx
+11 -11
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),
}),
});
public/app/features/alerting/unified/RedirectToRuleViewer.tsx
+13 -13
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',
}),
};
}
public/app/features/alerting/unified/RuleList.tsx
+19 -19
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;
public/app/features/alerting/unified/components/AlertLabel.tsx
+11 -11
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',
}),
});
public/app/features/alerting/unified/components/AlertLabels.tsx
+6 -6
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),
}),
});
public/app/features/alerting/unified/components/AlertManagerPicker.tsx
+3 -3
View File
@@ -57,7 +57,7 @@ export const AlertManagerPicker = ({ disabled = false }: Props) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
field: css`
margin: 0;
`,
field: css({
margin: 0,
}),
});
public/app/features/alerting/unified/components/AlertStateDot.tsx
+26 -26
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,
})
),
};
};
public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
+3 -3
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',
}),
});
public/app/features/alerting/unified/components/DetailsField.tsx
+24 -24
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,
},
}),
});
public/app/features/alerting/unified/components/DynamicTable.tsx
+72 -76
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`,
},
}),
});
};
public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx
+31 -31
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,
}),
});
public/app/features/alerting/unified/components/EmptyArea.tsx
+6 -6
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',
}),
};
};
public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx
+12 -12
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),
}),
};
};
public/app/features/alerting/unified/components/Expression.tsx
+3 -3
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,
}),
});
public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx
+4 -4
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,
}),
});
public/app/features/alerting/unified/components/Label.tsx
+28 -30
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',
}),
};
};
public/app/features/alerting/unified/components/MetaText.tsx
+3 -3
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 };
public/app/features/alerting/unified/components/Spacer.tsx
+3 -3
View File
@@ -13,8 +13,8 @@ import React from 'react';
export const Spacer = () => (
<span
className={css`
flex: 1;
`}
className={css({
flex: 1,
})}
/>
);
public/app/features/alerting/unified/components/StateColoredText.tsx
+12 -12
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,
}),
});
public/app/features/alerting/unified/components/StateTag.tsx
+46 -46
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',
}),
});
public/app/features/alerting/unified/components/Tokenize.tsx
+20 -20
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 };
public/app/features/alerting/unified/components/Well.tsx
+7 -7
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,
}),
});
public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx
+12 -12
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),
}),
});
public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx
+10 -10
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,
}),
});
public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx
+14 -14
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',
}),
});
public/app/features/alerting/unified/components/export/FileExportPreview.tsx
+15 -15
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> }) {
public/app/features/alerting/unified/components/expressions/Expression.tsx
+137 -139
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(),
}),
},
});
public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx
+7 -8
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',
},
}),
};
};
public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx
+6 -6
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;
public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx
+26 -26
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,
},
}),
});
public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
+15 -15
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),
}),
});
public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
+8 -8
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',
}),
public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
+16 -16
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),
}),
};
};
public/app/features/alerting/unified/components/notification-policies/Matchers.tsx
+13 -13
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 };
public/app/features/alerting/unified/components/notification-policies/PromDurationDocs.tsx
+18 -18
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',
},
}),
});
public/app/features/alerting/unified/components/notification-policies/formStyles.ts
+25 -25
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,
}),
};
};
public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx
+91 -92
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',
}),
};
};
public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx
+15 -15
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,
},
}),
});
public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx
+8 -8
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,
}),
});
public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
+32 -33
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',
},
}),
});
public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+8 -8
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,
}),
};
};
public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
+23 -23
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),
}),
});
public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
+20 -20
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),
}),
});
public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
+27 -27
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',
}),
});
public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
+9 -9
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) {
public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx
+9 -9
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),
}),
});
public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
+8 -8
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> => {
public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
+6 -6
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) => {
public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx
+12 -12
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),
}),
});
public/app/features/alerting/unified/components/receivers/form/fields/styles.ts
+25 -25
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),
}),
});
public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
+40 -40
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;
public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx
+38 -40
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',
}),
});
public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
+12 -12
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),
}),
});
public/app/features/alerting/unified/components/rule-editor/CustomAnnotationHeaderField.tsx
+8 -8
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;
public/app/features/alerting/unified/components/rule-editor/DashboardAnnotationField.tsx
+14 -14
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;
public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
+82 -83
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,
}),
};
};
public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
+7 -7
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> = {
public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
+6 -6
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',
}),
});
public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx
+17 -17
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),
}),
});
public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
+39 -39
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,
}),
});
public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
+11 -11
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',
}),
});
public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx
+8 -8
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',
}),
});
public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
+4 -4
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`,
}),
};
}
public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
+10 -10
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,
}),
};
}
public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
+4 -4
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%',
}),
});
public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx
+16 -17
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',
},
}),
};
};
public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
+17 -17
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',
},
}),
});
public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx
+3 -3
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),
}),
});
public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
+13 -13
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%',
}),
});
public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
+11 -11
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',
}),
});
public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx
+19 -19
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',
}),
});
public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
+12 -12
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(),
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx
+8 -8
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,
}),
});
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
+30 -30
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),
}),
});
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx
+26 -26
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),
}),
});
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx
+60 -60
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),
}),
});
public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx
+60 -64
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`,
},
}),
});
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx
+12 -12
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',
}),
});
public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
+20 -20
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 = () => {
public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
+8 -8
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 };
public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
+3 -3
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 };
public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx
+9 -9
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),
}),
};
};
public/app/features/alerting/unified/components/rules/ActionButton.tsx
+4 -4
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,
}),
});
public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx
+7 -7
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),
}),
};
}
public/app/features/alerting/unified/components/rules/CloudRules.tsx
+14 -14
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',
public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx
+18 -18
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,
}),
});
public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
+15 -15
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',
public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
+6 -6
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%',
},
}),
});
public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx
+44 -44
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[] {
public/app/features/alerting/unified/components/rules/RuleConfigStatus.tsx
+6 -6
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,
}),
};
}
public/app/features/alerting/unified/components/rules/RuleDetails.tsx
+1 -1
View File
@@ -120,7 +120,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
},
}),
leftSide: css({
flex: '1',
flex: 1,
}),
rightSide: css({
[theme.breakpoints.up('md')]: {
public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx
+3 -3
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',
}),
});
public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx
+4 -4
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,
}),
};
}
public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx
+3 -3
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