From bc67b88301f43d9d50fd7bcb8d97c604ae2062c0 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Tue, 7 May 2024 10:57:25 +0100 Subject: [PATCH] Chore: Rewrite alerting css using object styles (#87114) Co-authored-by: Gilles De Mey --- .betterer.results | 686 +----------------- .../DeleteUserModalButton.tsx | 14 +- .../alerting/unified/AlertWarning.tsx | 6 +- .../alerting/unified/AlertsFolderView.tsx | 40 +- .../unified/GrafanaRuleQueryViewer.tsx | 146 ++-- .../alerting/unified/NotificationPolicies.tsx | 6 +- .../alerting/unified/PanelAlertTabContent.tsx | 22 +- .../alerting/unified/RedirectToRuleViewer.tsx | 26 +- .../features/alerting/unified/RuleList.tsx | 38 +- .../unified/components/AlertLabel.tsx | 22 +- .../unified/components/AlertLabels.tsx | 12 +- .../unified/components/AlertManagerPicker.tsx | 6 +- .../unified/components/AlertStateDot.tsx | 52 +- .../components/AnnotationDetailsField.tsx | 6 +- .../unified/components/DetailsField.tsx | 48 +- .../unified/components/DynamicTable.tsx | 148 ++-- .../components/DynamicTableWithGuidelines.tsx | 62 +- .../alerting/unified/components/EmptyArea.tsx | 12 +- .../unified/components/EmptyAreaWithCTA.tsx | 24 +- .../unified/components/Expression.tsx | 6 +- .../GrafanaAlertmanagerDeliveryWarning.tsx | 8 +- .../alerting/unified/components/Label.tsx | 58 +- .../alerting/unified/components/MetaText.tsx | 6 +- .../alerting/unified/components/Spacer.tsx | 6 +- .../unified/components/StateColoredText.tsx | 24 +- .../alerting/unified/components/StateTag.tsx | 92 +-- .../alerting/unified/components/Tokenize.tsx | 40 +- .../alerting/unified/components/Well.tsx | 14 +- .../components/alert-groups/AlertDetails.tsx | 24 +- .../alert-groups/AlertGroupAlertsTable.tsx | 20 +- .../alert-groups/AlertGroupFilter.tsx | 28 +- .../components/export/FileExportPreview.tsx | 30 +- .../components/expressions/Expression.tsx | 276 ++++--- .../expressions/ExpressionStatusIndicator.tsx | 15 +- .../mute-timings/MuteTimingForm.tsx | 12 +- .../mute-timings/MuteTimingTimeInterval.tsx | 52 +- .../mute-timings/MuteTimingTimeRange.tsx | 30 +- .../mute-timings/MuteTimingsTable.tsx | 16 +- .../EditNotificationPolicyForm.tsx | 32 +- .../notification-policies/Matchers.tsx | 26 +- .../PromDurationDocs.tsx | 36 +- .../notification-policies/formStyles.ts | 50 +- .../receivers/AlertInstanceModalSelector.tsx | 183 +++-- .../components/receivers/PayloadEditor.tsx | 30 +- .../components/receivers/ReceiversSection.tsx | 16 +- .../components/receivers/TemplateDataDocs.tsx | 65 +- .../components/receivers/TemplateForm.tsx | 16 +- .../receivers/form/ChannelSubForm.tsx | 46 +- .../receivers/form/CollapsibleSection.tsx | 40 +- .../receivers/form/GenerateAlertDataModal.tsx | 54 +- .../receivers/form/ReceiverForm.tsx | 18 +- .../receivers/form/TestContactPointModal.tsx | 18 +- .../form/fields/KeyValueMapInput.tsx | 16 +- .../receivers/form/fields/OptionField.tsx | 12 +- .../form/fields/StringArrayInput.tsx | 24 +- .../receivers/form/fields/styles.ts | 50 +- .../rule-editor/AnnotationsStep.tsx | 80 +- .../rule-editor/CloudAlertPreview.tsx | 78 +- .../rule-editor/CloudEvaluationBehavior.tsx | 24 +- .../CustomAnnotationHeaderField.tsx | 16 +- .../rule-editor/DashboardAnnotationField.tsx | 28 +- .../rule-editor/DashboardPicker.tsx | 165 +++-- .../rule-editor/ExpressionEditor.tsx | 14 +- .../rule-editor/ExpressionsEditor.tsx | 12 +- .../components/rule-editor/FolderAndGroup.tsx | 34 +- .../rule-editor/GrafanaEvaluationBehavior.tsx | 78 +- .../rule-editor/GroupAndNamespaceFields.tsx | 22 +- .../components/rule-editor/NeedHelpInfo.tsx | 16 +- .../components/rule-editor/PreviewRule.tsx | 8 +- .../rule-editor/PreviewRuleResult.tsx | 20 +- .../components/rule-editor/QueryEditor.tsx | 8 +- .../components/rule-editor/QueryOptions.tsx | 33 +- .../components/rule-editor/QueryWrapper.tsx | 34 +- .../rule-editor/RecordingRuleEditor.tsx | 6 +- .../rule-editor/RuleEditorSection.tsx | 26 +- .../rule-editor/RuleFolderPicker.tsx | 22 +- .../components/rule-editor/RuleInspector.tsx | 38 +- .../components/rule-editor/VizWrapper.tsx | 24 +- .../NotificationPolicyMatchers.tsx | 16 +- .../NotificationPreview.tsx | 60 +- .../NotificationPreviewByAlertManager.tsx | 52 +- .../notificaton-preview/NotificationRoute.tsx | 120 +-- .../NotificationRouteDetailsModal.tsx | 124 ++-- .../CloudDataSourceSelector.tsx | 24 +- .../QueryAndExpressionsStep.tsx | 40 +- .../rule-editor/rule-types/RuleType.tsx | 16 +- .../rule-editor/rule-types/RuleTypePicker.tsx | 6 +- .../rule-viewer/RuleViewerLayout.tsx | 18 +- .../unified/components/rules/ActionButton.tsx | 8 +- .../rules/AlertInstanceStateFilter.tsx | 14 +- .../unified/components/rules/CloudRules.tsx | 28 +- .../components/rules/EditRuleGroupModal.tsx | 36 +- .../unified/components/rules/GrafanaRules.tsx | 30 +- .../unified/components/rules/NoRulesCTA.tsx | 12 +- .../rules/ReorderRuleGroupModal.tsx | 88 +-- .../components/rules/RuleConfigStatus.tsx | 12 +- .../unified/components/rules/RuleDetails.tsx | 2 +- .../rules/RuleDetailsAnnotations.tsx | 6 +- .../rules/RuleDetailsDataSources.tsx | 8 +- .../rules/RuleDetailsExpression.tsx | 6 +- .../rules/RuleDetailsMatchingInstances.tsx | 56 +- .../unified/components/rules/RuleHealth.tsx | 14 +- .../components/rules/RuleListErrors.tsx | 20 +- .../components/rules/RuleListStateSection.tsx | 18 +- .../unified/components/rules/RuleState.tsx | 12 +- .../unified/components/rules/RulesGroup.tsx | 132 ++-- .../unified/components/rules/RulesTable.tsx | 44 +- .../rules/state-history/LogRecordViewer.tsx | 55 +- .../rules/state-history/LokiStateHistory.tsx | 58 +- .../rules/state-history/StateHistory.tsx | 28 +- .../unified/components/silences/Matchers.tsx | 6 +- .../components/silences/MatchersField.tsx | 50 +- .../components/silences/SilenceDetails.tsx | 22 +- .../components/silences/SilencePeriod.tsx | 6 +- .../silences/SilencedAlertsTable.tsx | 18 +- .../silences/SilencedInstancesPreview.tsx | 34 +- .../components/silences/SilencesEditor.tsx | 40 +- .../components/silences/SilencesFilter.tsx | 38 +- .../unified/hooks/useStateHistoryModal.tsx | 20 +- .../alerting/unified/styles/notifications.ts | 18 +- .../alerting/unified/styles/pagination.ts | 12 +- .../features/alerting/unified/styles/table.ts | 64 +- 122 files changed, 2226 insertions(+), 2916 deletions(-) diff --git a/.betterer.results b/.betterer.results index 3e0046c904c..357b0a2eb9b 100644 --- a/.betterer.results +++ b/.betterer.results @@ -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"] diff --git a/public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx b/public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx index 0ed323c7c4a..90271933884 100644 --- a/public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx +++ b/public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/AlertWarning.tsx b/public/app/features/alerting/unified/AlertWarning.tsx index f5a4389c3e8..ab4ab0d2b7c 100644 --- a/public/app/features/alerting/unified/AlertWarning.tsx +++ b/public/app/features/alerting/unified/AlertWarning.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/AlertsFolderView.tsx b/public/app/features/alerting/unified/AlertsFolderView.tsx index ff71c426a72..fac2797f1f7 100644 --- a/public/app/features/alerting/unified/AlertsFolderView.tsx +++ b/public/app/features/alerting/unified/AlertsFolderView.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx b/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx index 83cf88bfe37..8972f9c3cc9 100644 --- a/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx +++ b/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx @@ -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 }) { diff --git a/public/app/features/alerting/unified/NotificationPolicies.tsx b/public/app/features/alerting/unified/NotificationPolicies.tsx index 234d7b0feaa..1bfdaccfa34 100644 --- a/public/app/features/alerting/unified/NotificationPolicies.tsx +++ b/public/app/features/alerting/unified/NotificationPolicies.tsx @@ -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 { diff --git a/public/app/features/alerting/unified/PanelAlertTabContent.tsx b/public/app/features/alerting/unified/PanelAlertTabContent.tsx index 40ad74a557d..79bee10201b 100644 --- a/public/app/features/alerting/unified/PanelAlertTabContent.tsx +++ b/public/app/features/alerting/unified/PanelAlertTabContent.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/RedirectToRuleViewer.tsx b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx index fddd9f5bb7e..057c5c90782 100644 --- a/public/app/features/alerting/unified/RedirectToRuleViewer.tsx +++ b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx @@ -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', + }), }; } diff --git a/public/app/features/alerting/unified/RuleList.tsx b/public/app/features/alerting/unified/RuleList.tsx index 571f98ffae8..3788ecb63f8 100644 --- a/public/app/features/alerting/unified/RuleList.tsx +++ b/public/app/features/alerting/unified/RuleList.tsx @@ -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; diff --git a/public/app/features/alerting/unified/components/AlertLabel.tsx b/public/app/features/alerting/unified/components/AlertLabel.tsx index f4d0f2664c0..21f5a542230 100644 --- a/public/app/features/alerting/unified/components/AlertLabel.tsx +++ b/public/app/features/alerting/unified/components/AlertLabel.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/AlertLabels.tsx b/public/app/features/alerting/unified/components/AlertLabels.tsx index 98a9102466b..1e01be64cf4 100644 --- a/public/app/features/alerting/unified/components/AlertLabels.tsx +++ b/public/app/features/alerting/unified/components/AlertLabels.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx index 7730fe76c05..f4e5a04d034 100644 --- a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx +++ b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx @@ -57,7 +57,7 @@ export const AlertManagerPicker = ({ disabled = false }: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - field: css` - margin: 0; - `, + field: css({ + margin: 0, + }), }); diff --git a/public/app/features/alerting/unified/components/AlertStateDot.tsx b/public/app/features/alerting/unified/components/AlertStateDot.tsx index c48efda4af5..fb2b1f30f67 100644 --- a/public/app/features/alerting/unified/components/AlertStateDot.tsx +++ b/public/app/features/alerting/unified/components/AlertStateDot.tsx @@ -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, + }) + ), }; }; diff --git a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx index c3b7dae4f65..f197caead2a 100644 --- a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx +++ b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/DetailsField.tsx b/public/app/features/alerting/unified/components/DetailsField.tsx index 4ea87052d92..9d229a4f546 100644 --- a/public/app/features/alerting/unified/components/DetailsField.tsx +++ b/public/app/features/alerting/unified/components/DetailsField.tsx @@ -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, + }, + }), }); diff --git a/public/app/features/alerting/unified/components/DynamicTable.tsx b/public/app/features/alerting/unified/components/DynamicTable.tsx index 1665ee8e6fe..959a402f032 100644 --- a/public/app/features/alerting/unified/components/DynamicTable.tsx +++ b/public/app/features/alerting/unified/components/DynamicTable.tsx @@ -193,91 +193,87 @@ const getStyles = ( } 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`, + }, + }), }); }; diff --git a/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx b/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx index 7c2a0b805f4..ce843c7e849 100644 --- a/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx +++ b/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx @@ -43,36 +43,36 @@ export const DynamicTableWithGuidelines = ({ }; 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, + }), }); diff --git a/public/app/features/alerting/unified/components/EmptyArea.tsx b/public/app/features/alerting/unified/components/EmptyArea.tsx index fb90f2317c7..97a1b6a2781 100644 --- a/public/app/features/alerting/unified/components/EmptyArea.tsx +++ b/public/app/features/alerting/unified/components/EmptyArea.tsx @@ -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', + }), }; }; diff --git a/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx b/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx index 11d4e86efc8..ae960a5db0b 100644 --- a/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx +++ b/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx @@ -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), + }), }; }; diff --git a/public/app/features/alerting/unified/components/Expression.tsx b/public/app/features/alerting/unified/components/Expression.tsx index ec11e41a58f..b085b0a399e 100644 --- a/public/app/features/alerting/unified/components/Expression.tsx +++ b/public/app/features/alerting/unified/components/Expression.tsx @@ -53,7 +53,7 @@ export const Expression: FC = ({ expression: query, rulesSource }) => { }; export const getStyles = (theme: GrafanaTheme2) => ({ - well: css` - font-family: ${theme.typography.fontFamilyMonospace}; - `, + well: css({ + fontFamily: theme.typography.fontFamilyMonospace, + }), }); diff --git a/public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx b/public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx index 80b90bfd166..03be297409f 100644 --- a/public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx +++ b/public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/components/Label.tsx b/public/app/features/alerting/unified/components/Label.tsx index 66505aefa3e..7df0187a9ca 100644 --- a/public/app/features/alerting/unified/components/Label.tsx +++ b/public/app/features/alerting/unified/components/Label.tsx @@ -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', + }), }; }; diff --git a/public/app/features/alerting/unified/components/MetaText.tsx b/public/app/features/alerting/unified/components/MetaText.tsx index 3d88d8cd9da..a1d564a5afa 100644 --- a/public/app/features/alerting/unified/components/MetaText.tsx +++ b/public/app/features/alerting/unified/components/MetaText.tsx @@ -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 }; diff --git a/public/app/features/alerting/unified/components/Spacer.tsx b/public/app/features/alerting/unified/components/Spacer.tsx index 867d7cf82a6..8ecc46ec22d 100644 --- a/public/app/features/alerting/unified/components/Spacer.tsx +++ b/public/app/features/alerting/unified/components/Spacer.tsx @@ -13,8 +13,8 @@ import React from 'react'; export const Spacer = () => ( ); diff --git a/public/app/features/alerting/unified/components/StateColoredText.tsx b/public/app/features/alerting/unified/components/StateColoredText.tsx index b695e723772..ababfef016b 100644 --- a/public/app/features/alerting/unified/components/StateColoredText.tsx +++ b/public/app/features/alerting/unified/components/StateColoredText.tsx @@ -16,16 +16,16 @@ export const StateColoredText = ({ children, status }: React.PropsWithChildren

({ - [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, + }), }); diff --git a/public/app/features/alerting/unified/components/StateTag.tsx b/public/app/features/alerting/unified/components/StateTag.tsx index f51d58772b2..81204cd0193 100644 --- a/public/app/features/alerting/unified/components/StateTag.tsx +++ b/public/app/features/alerting/unified/components/StateTag.tsx @@ -25,50 +25,50 @@ export const StateTag = forwardRef(({ 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', + }), }); diff --git a/public/app/features/alerting/unified/components/Tokenize.tsx b/public/app/features/alerting/unified/components/Tokenize.tsx index 5eaa491fa22..1c7574c650d 100644 --- a/public/app/features/alerting/unified/components/Tokenize.tsx +++ b/public/app/features/alerting/unified/components/Tokenize.tsx @@ -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 }; diff --git a/public/app/features/alerting/unified/components/Well.tsx b/public/app/features/alerting/unified/components/Well.tsx index 56ae466b621..a4e40102d7a 100644 --- a/public/app/features/alerting/unified/components/Well.tsx +++ b/public/app/features/alerting/unified/components/Well.tsx @@ -11,11 +11,11 @@ export const Well = ({ children, className }: Props) => { return

{children}
; }; 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, + }), }); diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx index 22b8f9192e9..04359da10fe 100644 --- a/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx +++ b/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx index 578490c78c4..3a7a08f8635 100644 --- a/public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx +++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx index aad3722a343..bb7c5569f7e 100644 --- a/public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx +++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/export/FileExportPreview.tsx b/public/app/features/alerting/unified/components/export/FileExportPreview.tsx index df5fcfd9495..dad58ab4aa7 100644 --- a/public/app/features/alerting/unified/components/export/FileExportPreview.tsx +++ b/public/app/features/alerting/unified/components/export/FileExportPreview.tsx @@ -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 }) { diff --git a/public/app/features/alerting/unified/components/expressions/Expression.tsx b/public/app/features/alerting/unified/components/expressions/Expression.tsx index 73db0a2f5bf..b61434d6b5f 100644 --- a/public/app/features/alerting/unified/components/expressions/Expression.tsx +++ b/public/app/features/alerting/unified/components/expressions/Expression.tsx @@ -458,161 +458,159 @@ const TimeseriesRow: FC = ({ 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(), + }), }, }); diff --git a/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx b/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx index 71dbdd91297..867972f26c1 100644 --- a/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx +++ b/public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx @@ -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', + }, + }), }; }; diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx index fbecd60d8c1..3d668ab947f 100644 --- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx +++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx @@ -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; diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx index 3962b622ab6..479d3ea924a 100644 --- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx +++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx @@ -143,7 +143,7 @@ export const MuteTimingTimeInterval = () => { > Remove time interval - {/* + {/* 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, + }, + }), }); diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx index b057a01e95a..9b2707645d9 100644 --- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx +++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx index 69dec20bbc4..a2b621b27c7 100644 --- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx +++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx @@ -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', }), diff --git a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx index b4ef37fd026..1940e575ea9 100644 --- a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx @@ -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), + }), }; }; diff --git a/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx b/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx index 458dc4a0258..4a528648f05 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx @@ -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 }; diff --git a/public/app/features/alerting/unified/components/notification-policies/PromDurationDocs.tsx b/public/app/features/alerting/unified/components/notification-policies/PromDurationDocs.tsx index ca3f0488fd3..148944219f5 100644 --- a/public/app/features/alerting/unified/components/notification-policies/PromDurationDocs.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/PromDurationDocs.tsx @@ -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', + }, + }), }); diff --git a/public/app/features/alerting/unified/components/notification-policies/formStyles.ts b/public/app/features/alerting/unified/components/notification-policies/formStyles.ts index 7cb793af79d..6358ef5ec60 100644 --- a/public/app/features/alerting/unified/components/notification-policies/formStyles.ts +++ b/public/app/features/alerting/unified/components/notification-policies/formStyles.ts @@ -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, + }), }; }; diff --git a/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx b/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx index 1c5876b7bdb..08a026664eb 100644 --- a/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx +++ b/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx @@ -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', + }), }; }; diff --git a/public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx b/public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx index 95895b7ce58..ef4065992a7 100644 --- a/public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx +++ b/public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx @@ -153,14 +153,14 @@ const AlertTemplateDataTable = () => { return ; }; 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, + }, + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx index b083b91808e..94a010c7d72 100644 --- a/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx +++ b/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx index 905c397e921..610bc2150d6 100644 --- a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx +++ b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx @@ -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', + }, + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx index 505ca391f01..0ec493833bf 100644 --- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx @@ -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, + }), }; }; diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx index 9ea1c7a05de..14a5db7e24b 100644 --- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx @@ -227,27 +227,27 @@ export function ChannelSubForm({ } 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), + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx index 0097045d924..103e953255b 100644 --- a/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx b/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx index 45e99ace897..16459ceec86 100644 --- a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx index a5bc8ccf287..7aeb07b2c2a 100644 --- a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx @@ -209,16 +209,16 @@ export function ReceiverForm({ } 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) { diff --git a/public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx b/public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx index 81c71479df0..ff10c66bd2a 100644 --- a/public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx index 2c1eebceb9b..79318bf9eb8 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx @@ -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 => { diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx index fe7c202cea7..920abdd4494 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx @@ -218,12 +218,12 @@ const OptionInput: FC = ({ }; 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) => { diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx index 3d35b333690..be583f786b2 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts b/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts index da458d99999..d348d6873a2 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts +++ b/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx index 588d42394c7..37220cc1c35 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx @@ -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; diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx index e86c1805fe9..06a2c63afce 100644 --- a/public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx index 3796b5266d2..f134e1cec8f 100644 --- a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/CustomAnnotationHeaderField.tsx b/public/app/features/alerting/unified/components/rule-editor/CustomAnnotationHeaderField.tsx index 41d2a9f2087..94e0421a77d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/CustomAnnotationHeaderField.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/CustomAnnotationHeaderField.tsx @@ -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; diff --git a/public/app/features/alerting/unified/components/rule-editor/DashboardAnnotationField.tsx b/public/app/features/alerting/unified/components/rule-editor/DashboardAnnotationField.tsx index 1cbd423a3bf..cc105d1fae0 100644 --- a/public/app/features/alerting/unified/components/rule-editor/DashboardAnnotationField.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/DashboardAnnotationField.tsx @@ -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; diff --git a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx index cea1fa52127..765ad9ade06 100644 --- a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx @@ -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, + }), }; }; diff --git a/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx index 58caf640fe4..93db08e9fd6 100644 --- a/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx @@ -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 = { diff --git a/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx index eb67ed378ac..fcea75c2823 100644 --- a/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx b/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx index 44a9943213f..bb8f7f28611 100644 --- a/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx index 247e49c2ed2..b6938b76dba 100644 --- a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx index 9b4ee949709..1f46cb06088 100644 --- a/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx index e761cd00bec..5fab70a6159 100644 --- a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx index aef426bc1e6..65f5f17cf7d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx @@ -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`, + }), }; } diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx index 0d0414bdac3..355ee4bd43d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx @@ -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, + }), }; } diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx index 110505c16d1..4a8d582f0b0 100644 --- a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx @@ -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%', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx index ba7857e0153..d375aadacce 100644 --- a/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx @@ -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', + }, + }), }; }; diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx index 377170f1576..c449e07b446 100644 --- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx @@ -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', + }, + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx index 60a0d44fe61..d51e0b429e9 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx @@ -115,7 +115,7 @@ export const RecordingRuleEditor: FC = ({ }; const getStyles = (theme: GrafanaTheme2) => ({ - vizWrapper: css` - margin: ${theme.spacing(1, 0)}; - `, + vizWrapper: css({ + margin: theme.spacing(1, 0), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx index 0e5c1977d0e..7016078e775 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx @@ -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%', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx index a5ffba920d6..4020136a56f 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx index 83690f08db5..fe8711a7d1d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx @@ -155,26 +155,26 @@ function rulerRuleToRuleFormValues(rulerRule: RulerRuleDTO): Partial ({ - 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', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx index bb679e030f9..c252c92a2ee 100644 --- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx @@ -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(), diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx index cb7c4492d1c..47b2091d5a9 100644 --- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx index 89752ea69f8..8040157bd18 100644 --- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx index 46e5460a361..13e2cf81dc8 100644 --- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx index a95e1bbb8a6..1013135fe67 100644 --- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx @@ -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), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx index 8de20bc227d..52c7f80cd4c 100644 --- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx @@ -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`, + }, + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx index 447be8edd9d..263c3e07a02 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx @@ -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', + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx index ef70b82adc0..7da5af1f8c6 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx @@ -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 = () => { diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx index ba0ba6b8e10..d36e916345a 100644 --- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx @@ -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 }; diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx index 60d54a0df97..505b6b39b31 100644 --- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx @@ -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 }; diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx index 1fb81e436b4..9e781793a5e 100644 --- a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx +++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx @@ -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), + }), }; }; diff --git a/public/app/features/alerting/unified/components/rules/ActionButton.tsx b/public/app/features/alerting/unified/components/rules/ActionButton.tsx index 43222f3d084..44d6fbcfc54 100644 --- a/public/app/features/alerting/unified/components/rules/ActionButton.tsx +++ b/public/app/features/alerting/unified/components/rules/ActionButton.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx b/public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx index 9ec35c9e6e9..bbcdaa61ca5 100644 --- a/public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx +++ b/public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx @@ -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), + }), }; } diff --git a/public/app/features/alerting/unified/components/rules/CloudRules.tsx b/public/app/features/alerting/unified/components/rules/CloudRules.tsx index 2f3dd7c7b21..a19716bb57f 100644 --- a/public/app/features/alerting/unified/components/rules/CloudRules.tsx +++ b/public/app/features/alerting/unified/components/rules/CloudRules.tsx @@ -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', diff --git a/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx index 49b8d4ffdae..34526989588 100644 --- a/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx +++ b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx @@ -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, + }), }); diff --git a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx index 4df99b28ff2..2257f02218e 100644 --- a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx +++ b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx @@ -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', diff --git a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx index c1104a10a5d..9c4c1d72fb5 100644 --- a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx +++ b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx @@ -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%', + }, + }), }); diff --git a/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx b/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx index 063f0b6d6ac..2b8c4d6d465 100644 --- a/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx +++ b/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx @@ -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(rules: T[], startIndex: number, endIndex: number): T[] { diff --git a/public/app/features/alerting/unified/components/rules/RuleConfigStatus.tsx b/public/app/features/alerting/unified/components/rules/RuleConfigStatus.tsx index 436a7525d9b..9cd82bc4187 100644 --- a/public/app/features/alerting/unified/components/rules/RuleConfigStatus.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleConfigStatus.tsx @@ -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, + }), }; } diff --git a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx index 5023e5d0853..0a50e1dcd3d 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx @@ -120,7 +120,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ }, }), leftSide: css({ - flex: '1', + flex: 1, }), rightSide: css({ [theme.breakpoints.up('md')]: { diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx index a8ffd526876..f9e4920a4be 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx @@ -30,7 +30,7 @@ export function RuleDetailsAnnotations(props: Props): JSX.Element | null { } const getStyles = () => ({ - annotations: css` - margin-top: 46px; - `, + annotations: css({ + marginTop: '46px', + }), }); diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx index 8f5b3028e80..907e01fa05c 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx @@ -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, + }), }; } diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx index ea5cd7969cc..5099ab12de8 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx @@ -29,7 +29,7 @@ export function RuleDetailsExpression(props: Props): JSX.Element | null { } const getStyles = () => ({ - exprRow: css` - margin-bottom: 46px; - `, + exprRow: css({ + marginBottom: '46px', + }), }); diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx index 70b67368ba9..fc757422f0c 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx @@ -161,33 +161,33 @@ function filterAlerts( const getStyles = (theme: GrafanaTheme2) => { return { - flexRow: css` - display: flex; - flex-direction: row; - align-items: flex-end; - width: 100%; - flex-wrap: wrap; - margin-bottom: ${theme.spacing(1)}; - gap: ${theme.spacing(1)}; - `, - spaceBetween: css` - justify-content: space-between; - `, - footerRow: css` - display: flex; - flex-direction: column; - gap: ${theme.spacing(1)}; - justify-content: space-between; - align-items: center; - width: 100%; - `, - instancesContainer: css` - margin-bottom: ${theme.spacing(2)}; - `, - stats: css` - display: flex; - gap: ${theme.spacing(1)}; - padding: ${theme.spacing(1, 0)}; - `, + flexRow: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-end', + width: '100%', + flexWrap: 'wrap', + marginBottom: theme.spacing(1), + gap: theme.spacing(1), + }), + spaceBetween: css({ + justifyContent: 'space-between', + }), + footerRow: css({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + }), + instancesContainer: css({ + marginBottom: theme.spacing(2), + }), + stats: css({ + display: 'flex', + gap: theme.spacing(1), + padding: theme.spacing(1, 0), + }), }; }; diff --git a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx index 66e4e339199..75869675e3b 100644 --- a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx @@ -29,12 +29,12 @@ export const RuleHealth = ({ rule }: Prom) => { }; const getStyle = (theme: GrafanaTheme2) => ({ - warn: css` - display: inline-flex; - flex-direction: row; - align-items: center; - gap: ${theme.spacing(1)}; + warn: css({ + display: 'inline-flex', + flexDirection: 'row', + alignItems: 'center', + gap: theme.spacing(1), - color: ${theme.colors.warning.text}; - `, + color: theme.colors.warning.text, + }), }); diff --git a/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx index 16da99ee314..298e3214e5f 100644 --- a/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx @@ -143,14 +143,14 @@ const ErrorSummaryButton: FC = ({ count, onClick }) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - moreButton: css` - padding: 0; - `, - floatRight: css` - display: flex; - justify-content: flex-end; - `, - dsLink: css` - font-weight: ${theme.typography.fontWeightBold}; - `, + moreButton: css({ + padding: 0, + }), + floatRight: css({ + display: 'flex', + justifyContent: 'flex-end', + }), + dsLink: css({ + fontWeight: theme.typography.fontWeightBold, + }), }); diff --git a/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx b/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx index d5c2d305272..ae9fab19b17 100644 --- a/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx @@ -37,13 +37,13 @@ export const RuleListStateSection = ({ rules, state, defaultCollapsed = false }: }; const getStyles = (theme: GrafanaTheme2) => ({ - collapseToggle: css` - vertical-align: middle; - `, - header: css` - margin-top: ${theme.spacing(2)}; - `, - rulesTable: css` - margin-top: ${theme.spacing(3)}; - `, + collapseToggle: css({ + verticalAlign: 'middle', + }), + header: css({ + marginTop: theme.spacing(2), + }), + rulesTable: css({ + marginTop: theme.spacing(3), + }), }); diff --git a/public/app/features/alerting/unified/components/rules/RuleState.tsx b/public/app/features/alerting/unified/components/rules/RuleState.tsx index 71e6adcb0d4..b853708c5c4 100644 --- a/public/app/features/alerting/unified/components/rules/RuleState.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleState.tsx @@ -79,10 +79,10 @@ export const RuleState = ({ rule, isDeleting, isCreating, isPaused }: Props) => }; const getStyle = (theme: GrafanaTheme2) => ({ - for: css` - font-size: ${theme.typography.bodySmall.fontSize}; - color: ${theme.colors.text.secondary}; - white-space: nowrap; - padding-top: 2px; - `, + for: css({ + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.text.secondary, + whiteSpace: 'nowrap', + paddingTop: '2px', + }), }); diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx index 2ca8d1ca3f9..b9f2a4f50a1 100644 --- a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx @@ -325,77 +325,77 @@ RulesGroup.displayName = 'RulesGroup'; export const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css``, - header: css` - display: flex; - flex-direction: row; - align-items: center; - padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0; - flex-wrap: nowrap; - border-bottom: 1px solid ${theme.colors.border.weak}; + wrapper: css({}), + header: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + padding: `${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0`, + flexWrap: 'nowrap', + borderBottom: `1px solid ${theme.colors.border.weak}`, - &:hover { - background-color: ${theme.components.table.rowHoverBackground}; - } - `, - headerStats: css` - flex-shrink: 0; + '&:hover': { + backgroundColor: theme.components.table.rowHoverBackground, + }, + }), + headerStats: css({ + flexShrink: 0, - span { - vertical-align: middle; - } + span: { + verticalAlign: 'middle', + }, - ${theme.breakpoints.down('sm')} { - order: 2; - width: 100%; - padding-left: ${theme.spacing(1)}; - } - `, - groupName: css` - margin-left: ${theme.spacing(1)}; - margin-bottom: 0; - cursor: pointer; + [theme.breakpoints.down('sm')]: { + order: 2, + width: '100%', + paddingLeft: theme.spacing(1), + }, + }), + groupName: css({ + marginLeft: theme.spacing(1), + marginBottom: 0, + cursor: 'pointer', - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - `, - spacer: css` - flex: 1; - `, - collapseToggle: css` - background: none; - border: none; - margin-top: -${theme.spacing(1)}; - margin-bottom: -${theme.spacing(1)}; + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }), + spacer: css({ + flex: 1, + }), + collapseToggle: css({ + background: 'none', + border: 'none', + marginTop: `-${theme.spacing(1)}`, + marginBottom: `-${theme.spacing(1)}`, - svg { - margin-bottom: 0; - } - `, - dataSourceIcon: css` - width: ${theme.spacing(2)}; - height: ${theme.spacing(2)}; - margin-left: ${theme.spacing(2)}; - `, - dataSourceOrigin: css` - margin-right: 1em; - color: ${theme.colors.text.disabled}; - `, - actionsSeparator: css` - margin: 0 ${theme.spacing(2)}; - `, - actionIcons: css` - width: 80px; - align-items: center; + svg: { + marginBottom: 0, + }, + }), + dataSourceIcon: css({ + width: theme.spacing(2), + height: theme.spacing(2), + marginLeft: theme.spacing(2), + }), + dataSourceOrigin: css({ + marginRight: '1em', + color: theme.colors.text.disabled, + }), + actionsSeparator: css({ + margin: `0 ${theme.spacing(2)}`, + }), + actionIcons: css({ + width: '80px', + alignItems: 'center', - flex-shrink: 0; - `, - rulesTable: css` - margin: ${theme.spacing(2, 0)}; - `, - rotate90: css` - transform: rotate(90deg); - `, + flexShrink: 0, + }), + rulesTable: css({ + margin: theme.spacing(2, 0), + }), + rotate90: css({ + transform: 'rotate(90deg)', + }), }; }; diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx index 0a40744e898..33e34f4663b 100644 --- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx @@ -89,28 +89,28 @@ export const RulesTable = ({ }; export const getStyles = (theme: GrafanaTheme2) => ({ - wrapperMargin: css` - ${theme.breakpoints.up('md')} { - margin-left: 36px; - } - `, - emptyMessage: css` - padding: ${theme.spacing(1)}; - `, - wrapper: css` - width: auto; - border-radius: ${theme.shape.radius.default}; - `, - pagination: css` - display: flex; - margin: 0; - padding-top: ${theme.spacing(1)}; - padding-bottom: ${theme.spacing(0.25)}; - justify-content: center; - border-left: 1px solid ${theme.colors.border.medium}; - border-right: 1px solid ${theme.colors.border.medium}; - border-bottom: 1px solid ${theme.colors.border.medium}; - `, + wrapperMargin: css({ + [theme.breakpoints.up('md')]: { + marginLeft: '36px', + }, + }), + emptyMessage: css({ + padding: theme.spacing(1), + }), + wrapper: css({ + width: 'auto', + borderRadius: theme.shape.radius.default, + }), + pagination: css({ + display: 'flex', + margin: 0, + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(0.25), + justifyContent: 'center', + borderLeft: `1px solid ${theme.colors.border.medium}`, + borderRight: `1px solid ${theme.colors.border.medium}`, + borderBottom: `1px solid ${theme.colors.border.medium}`, + }), }); function useColumns(showSummaryColumn: boolean, showGroupColumn: boolean, showNextEvaluationColumn: boolean) { diff --git a/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx b/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx index fdfe4a54e9e..60c3fa07a80 100644 --- a/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx +++ b/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx @@ -156,33 +156,32 @@ const AlertInstanceValues = React.memo(({ record }: { record: Record ({ - logsContainer: css` - display: grid; - grid-template-columns: max-content max-content max-content auto max-content; - gap: ${theme.spacing(2, 1)}; - align-items: center; - `, - logsScrollable: css` - height: 500px; - overflow: scroll; + logsContainer: css({ + display: 'grid', + gridTemplateColumns: 'max-content max-content max-content auto max-content', + gap: theme.spacing(2, 1), + alignItems: 'center', + }), + logsScrollable: css({ + height: '500px', + overflow: 'scroll', - flex: 1; - `, - timestampWrapper: css` - color: ${theme.colors.text.secondary}; - `, - timestampText: css` - color: ${theme.colors.text.primary}; - font-size: ${theme.typography.bodySmall.fontSize}; - font-weight: ${theme.typography.fontWeightBold}; - `, - listItemWrapper: css` - background: transparent; - outline: 1px solid transparent; - - transition: - background 150ms, - outline 150ms; - padding: ${theme.spacing(1)} ${theme.spacing(1.5)}; - `, + flex: 1, + }), + timestampWrapper: css({ + color: theme.colors.text.secondary, + }), + timestampText: css({ + color: theme.colors.text.primary, + fontSize: theme.typography.bodySmall.fontSize, + fontWeight: theme.typography.fontWeightBold, + }), + listItemWrapper: css({ + background: 'transparent', + outline: '1px solid transparent', + padding: `${theme.spacing(1)} ${theme.spacing(1.5)}`, + [theme.transitions.handleMotion('no-preference', 'reduce')]: { + transition: 'background 150ms, outline 150ms', + }, + }), }); diff --git a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx b/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx index 68de5f9892a..062ff5b1820 100644 --- a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx +++ b/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx @@ -230,38 +230,38 @@ function getDefaultTimeRange(): TimeRange { } export const getStyles = (theme: GrafanaTheme2) => ({ - fullSize: css` - min-width: 100%; - height: 100%; + fullSize: css({ + minWidth: '100%', + height: '100%', - display: flex; - flex-direction: column; - `, - graphWrapper: css` - padding: ${theme.spacing()} 0; - `, - emptyState: css` - color: ${theme.colors.text.secondary}; + display: 'flex', + flexDirection: 'column', + }), + graphWrapper: css({ + padding: `${theme.spacing()} 0`, + }), + emptyState: css({ + color: theme.colors.text.secondary, - display: flex; - flex-direction: column; - gap: ${theme.spacing(2)}; - align-items: center; - margin: auto auto; - `, - moreInstancesWarning: css` - color: ${theme.colors.warning.text}; - padding: ${theme.spacing()}; - `, - commonLabels: css` - display: grid; - grid-template-columns: max-content auto; - `, + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2), + alignItems: 'center', + margin: 'auto auto', + }), + moreInstancesWarning: css({ + color: theme.colors.warning.text, + padding: theme.spacing(), + }), + commonLabels: css({ + display: 'grid', + gridTemplateColumns: 'max-content auto', + }), // we need !important here to override the list item default styles - highlightedLogRecord: css` - background: ${theme.colors.primary.transparent} !important; - outline: 1px solid ${theme.colors.primary.shade} !important; - `, + highlightedLogRecord: css({ + background: `${theme.colors.primary.transparent} !important`, + outline: `1px solid ${theme.colors.primary.shade} !important`, + }), }); export default LokiStateHistory; diff --git a/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx b/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx index 2162bd7c9a1..a58db6e63d6 100644 --- a/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx +++ b/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx @@ -184,22 +184,22 @@ const LabelsWrapper = ({ children }: React.PropsWithChildren<{}>) => { return
{children}
; }; -const TimestampStyle = css` - display: flex; - align-items: flex-end; - flex-direction: column; -`; +const TimestampStyle = css({ + display: 'flex', + alignItems: 'flex-end', + flexDirection: 'column', +}); const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - & > * { - margin-right: ${theme.spacing(1)}; - } - `, - tableGroupKey: css` - margin-top: ${theme.spacing(2)}; - margin-bottom: ${theme.spacing(2)}; - `, + wrapper: css({ + '& > *': { + marginRight: theme.spacing(1), + }, + }), + tableGroupKey: css({ + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + }), goupKeyText: css({ overflowX: 'auto', textOverflow: 'ellipsis', diff --git a/public/app/features/alerting/unified/components/silences/Matchers.tsx b/public/app/features/alerting/unified/components/silences/Matchers.tsx index 4a516f1aa83..9726277256f 100644 --- a/public/app/features/alerting/unified/components/silences/Matchers.tsx +++ b/public/app/features/alerting/unified/components/silences/Matchers.tsx @@ -21,7 +21,7 @@ export const Matchers = ({ matchers }: MatchersProps) => { }; const getStyles = () => ({ - tags: css` - justify-content: flex-start; - `, + tags: css({ + justifyContent: 'flex-start', + }), }); diff --git a/public/app/features/alerting/unified/components/silences/MatchersField.tsx b/public/app/features/alerting/unified/components/silences/MatchersField.tsx index fa2b82a5b94..7e53727d259 100644 --- a/public/app/features/alerting/unified/components/silences/MatchersField.tsx +++ b/public/app/features/alerting/unified/components/silences/MatchersField.tsx @@ -108,31 +108,31 @@ const MatchersField = ({ className }: Props) => { const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - margin-top: ${theme.spacing(2)}; - `, - row: css` - display: flex; - align-items: flex-start; - flex-direction: row; - background-color: ${theme.colors.background.secondary}; - padding: ${theme.spacing(1)} ${theme.spacing(1)} 0 ${theme.spacing(1)}; - & > * + * { - margin-left: ${theme.spacing(2)}; - } - `, - removeButton: css` - margin-left: ${theme.spacing(1)}; - margin-top: ${theme.spacing(2.5)}; - `, - matcherOptions: css` - min-width: 140px; - `, - matchers: css` - max-width: ${theme.breakpoints.values.sm}px; - margin: ${theme.spacing(1)} 0; - padding-top: ${theme.spacing(0.5)}; - `, + wrapper: css({ + marginTop: theme.spacing(2), + }), + row: css({ + display: 'flex', + alignItems: 'flex-start', + flexDirection: 'row', + backgroundColor: theme.colors.background.secondary, + padding: `${theme.spacing(1)} ${theme.spacing(1)} 0 ${theme.spacing(1)}`, + '& > * + *': { + marginLeft: theme.spacing(2), + }, + }), + removeButton: css({ + marginLeft: theme.spacing(1), + marginTop: theme.spacing(2.5), + }), + matcherOptions: css({ + minWidth: '140px', + }), + matchers: css({ + maxWidth: `${theme.breakpoints.values.sm}px`, + margin: `${theme.spacing(1)} 0`, + paddingTop: theme.spacing(0.5), + }), }; }; diff --git a/public/app/features/alerting/unified/components/silences/SilenceDetails.tsx b/public/app/features/alerting/unified/components/silences/SilenceDetails.tsx index c76b79d0d66..a558cd059a0 100644 --- a/public/app/features/alerting/unified/components/silences/SilenceDetails.tsx +++ b/public/app/features/alerting/unified/components/silences/SilenceDetails.tsx @@ -36,15 +36,15 @@ export const SilenceDetails = ({ silence }: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - display: grid; - grid-template-columns: 1fr 9fr; - grid-row-gap: 1rem; - `, - title: css` - color: ${theme.colors.text.primary}; - `, - row: css` - margin: ${theme.spacing(1, 0)}; - `, + container: css({ + display: 'grid', + gridTemplateColumns: '1fr 9fr', + gridRowGap: '1rem', + }), + title: css({ + color: theme.colors.text.primary, + }), + row: css({ + margin: theme.spacing(1, 0), + }), }); diff --git a/public/app/features/alerting/unified/components/silences/SilencePeriod.tsx b/public/app/features/alerting/unified/components/silences/SilencePeriod.tsx index 80e12e42e2a..6da7b0e2927 100644 --- a/public/app/features/alerting/unified/components/silences/SilencePeriod.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencePeriod.tsx @@ -75,7 +75,7 @@ export const SilencePeriod = () => { }; const styles = { - timeRange: css` - width: 400px; - `, + timeRange: css({ + width: '400px', + }), }; diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx index 9881f4b9615..408df0081e8 100644 --- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx @@ -53,15 +53,15 @@ const SilencedAlertsTable = ({ silencedAlerts }: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - tableMargin: css` - margin-bottom: ${theme.spacing(1)}; - `, - colState: css` - width: 110px; - `, - colName: css` - width: 65%; - `, + tableMargin: css({ + marginBottom: theme.spacing(1), + }), + colState: css({ + width: '110px', + }), + colName: css({ + width: '65%', + }), }); export default SilencedAlertsTable; diff --git a/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx b/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx index 81e026133d1..fbe453212c9 100644 --- a/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx @@ -106,21 +106,21 @@ function useColumns(): Array> { } const getStyles = (theme: GrafanaTheme2) => ({ - table: css` - max-width: ${theme.breakpoints.values.lg}px; - `, - moreMatches: css` - margin-top: ${theme.spacing(1)}; - `, - title: css` - display: flex; - align-items: center; - `, - badge: css` - margin-left: ${theme.spacing(1)}; - `, - stateColumn: css` - display: flex; - align-items: center; - `, + table: css({ + maxWidth: `${theme.breakpoints.values.lg}px`, + }), + moreMatches: css({ + marginTop: theme.spacing(1), + }), + title: css({ + display: 'flex', + alignItems: 'center', + }), + badge: css({ + marginLeft: theme.spacing(1), + }), + stateColumn: css({ + display: 'flex', + alignItems: 'center', + }), }); diff --git a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx index 1bad2e84fa6..e13bbbe0819 100644 --- a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx @@ -286,27 +286,27 @@ export const SilencesEditor = ({ silenceId, alertManagerSourceName }: Props) => }; const getStyles = (theme: GrafanaTheme2) => ({ - field: css` - margin: ${theme.spacing(1, 0)}; - `, - textArea: css` - max-width: ${theme.breakpoints.values.sm}px; - `, - createdBy: css` - width: 200px; - `, - flexRow: css` - display: flex; - flex-direction: row; - justify-content: flex-start; + field: css({ + margin: theme.spacing(1, 0), + }), + textArea: css({ + maxWidth: `${theme.breakpoints.values.sm}px`, + }), + createdBy: css({ + width: '200px', + }), + flexRow: css({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', - & > * { - margin-right: ${theme.spacing(1)}; - } - `, - silencePeriod: css` - max-width: ${theme.breakpoints.values.sm}px; - `, + '& > *': { + marginRight: theme.spacing(1), + }, + }), + silencePeriod: css({ + maxWidth: `${theme.breakpoints.values.sm}px`, + }), }); export default SilencesEditor; diff --git a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx index c8bbd939263..46ac878d287 100644 --- a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx @@ -79,23 +79,23 @@ export const SilencesFilter = () => { }; const getStyles = (theme: GrafanaTheme2) => ({ - searchInput: css` - width: 360px; - `, - flexRow: css` - display: flex; - flex-direction: row; - align-items: flex-end; - padding-bottom: ${theme.spacing(3)}; - border-bottom: 1px solid ${theme.colors.border.medium}; - `, - rowChild: css` - margin-right: ${theme.spacing(1)}; - margin-bottom: 0; - max-height: 52px; - `, - fieldLabel: css` - font-size: 12px; - font-weight: 500; - `, + searchInput: css({ + width: '360px', + }), + flexRow: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-end', + paddingBottom: theme.spacing(3), + borderBottom: `1px solid ${theme.colors.border.medium}`, + }), + rowChild: css({ + marginRight: theme.spacing(1), + marginBottom: 0, + maxHeight: '52px', + }), + fieldLabel: css({ + fontSize: '12px', + fontWeight: 500, + }), }); diff --git a/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx b/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx index 078dbca0f27..807132087bc 100644 --- a/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx +++ b/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx @@ -76,16 +76,16 @@ function useStateHistoryModal() { } const getStyles = (theme: GrafanaTheme2) => ({ - modal: css` - width: 80%; - height: 80%; - min-width: 800px; - `, - modalContent: css` - height: 100%; - width: 100%; - padding: ${theme.spacing(2)}; - `, + modal: css({ + width: '80%', + height: '80%', + minWidth: '800px', + }), + modalContent: css({ + height: '100%', + width: '100%', + padding: theme.spacing(2), + }), }); export { useStateHistoryModal }; diff --git a/public/app/features/alerting/unified/styles/notifications.ts b/public/app/features/alerting/unified/styles/notifications.ts index 162d81196f4..11389f87fa2 100644 --- a/public/app/features/alerting/unified/styles/notifications.ts +++ b/public/app/features/alerting/unified/styles/notifications.ts @@ -4,13 +4,13 @@ import { GrafanaTheme2 } from '@grafana/data'; import { AlertState } from 'app/plugins/datasource/alertmanager/types'; export const getNotificationsTextColors = (theme: GrafanaTheme2) => ({ - [AlertState.Active]: css` - color: ${theme.colors.error.text}; - `, - [AlertState.Suppressed]: css` - color: ${theme.colors.primary.text}; - `, - [AlertState.Unprocessed]: css` - color: ${theme.colors.secondary.text}; - `, + [AlertState.Active]: css({ + color: theme.colors.error.text, + }), + [AlertState.Suppressed]: css({ + color: theme.colors.primary.text, + }), + [AlertState.Unprocessed]: css({ + color: theme.colors.secondary.text, + }), }); diff --git a/public/app/features/alerting/unified/styles/pagination.ts b/public/app/features/alerting/unified/styles/pagination.ts index 17d7e932347..f3d92f70662 100644 --- a/public/app/features/alerting/unified/styles/pagination.ts +++ b/public/app/features/alerting/unified/styles/pagination.ts @@ -3,10 +3,10 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data/src'; export const getPaginationStyles = (theme: GrafanaTheme2) => { - return css` - float: none; - display: flex; - justify-content: flex-start; - margin: ${theme.spacing(2, 0)}; - `; + return css({ + float: 'none', + display: 'flex', + justifyContent: 'flex-start', + margin: theme.spacing(2, 0), + }); }; diff --git a/public/app/features/alerting/unified/styles/table.ts b/public/app/features/alerting/unified/styles/table.ts index 63494cb13a3..82bde70af85 100644 --- a/public/app/features/alerting/unified/styles/table.ts +++ b/public/app/features/alerting/unified/styles/table.ts @@ -3,40 +3,40 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; export const getAlertTableStyles = (theme: GrafanaTheme2) => ({ - table: css` - width: 100%; - border-radius: ${theme.shape.radius.default}; - border: solid 1px ${theme.colors.border.weak}; - background-color: ${theme.colors.background.secondary}; + table: css({ + width: '100%', + borderRadius: theme.shape.radius.default, + border: `solid 1px ${theme.colors.border.weak}`, + backgroundColor: theme.colors.background.secondary, - th { - padding: ${theme.spacing(1)}; - } + th: { + padding: theme.spacing(1), + }, - td { - padding: 0 ${theme.spacing(1)}; - } + td: { + padding: `0 ${theme.spacing(1)}`, + }, - tr { - height: 38px; - } - `, - evenRow: css` - background-color: ${theme.colors.background.primary}; - `, - colExpand: css` - width: 36px; - `, - nameCell: css` - gap: ${theme.spacing(1)}; - `, - actionsCell: css` - text-align: right; - width: 1%; - white-space: nowrap; + tr: { + height: '38px', + }, + }), + evenRow: css({ + backgroundColor: theme.colors.background.primary, + }), + colExpand: css({ + width: '36px', + }), + nameCell: css({ + gap: theme.spacing(1), + }), + actionsCell: css({ + textAlign: 'right', + width: '1%', + whiteSpace: 'nowrap', - & > * + * { - margin-left: ${theme.spacing(0.5)}; - } - `, + '& > * + *': { + marginLeft: theme.spacing(0.5), + }, + }), });