Reporting: Add theme option (#95008)

* swagger doc

* Update doc for report settings

* Apply suggestions from code review

* swagger doc

* add doc for current theme

* update text

* wording feedback changes

* make it clearer

* update again

* update theme component

* swagger doc

---------

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
Lucy Chen 2024-11-14 14:45:49 -05:00 committed by GitHub
parent 9240cf1930
commit 3b36438b1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 31 additions and 4 deletions

View File

@ -340,11 +340,19 @@ You can configure organization-wide report settings in the **Settings** under **
You can customize the branding options.
Report branding:
### Attachment settings
#### PDF
- **Company logo:** Company logo displayed in the report PDF. It can be configured by specifying a URL, or by uploading a file. The maximum file size is 16 MB. Defaults to the Grafana logo.
Email branding:
- **Theme:** Theme of the PDF attached to the report. Defaults to **Light**. The selected theme is also applied to the PDFs generated when you click **Preview PDF** during report creation or select the **Export as PDF** option on a dashboard. If **Current** is selected, the PDF in the report will be in the Admin's instance theme, but the preview and exported PDFs will be in the user's instance theme.
#### Embedded Image
- **Theme:** Theme of the dashboard image embedded in the email. Defaults to **Dark**.
### Email branding
- **Company logo:** Company logo displayed in the report email. It can be configured by specifying a URL, or by uploading a file. The maximum file size is 16 MB. Defaults to the Grafana logo.
- **Email footer:** Toggle to enable the report email footer. Select **Sent by** or **None**.

View File

@ -7004,6 +7004,9 @@
"branding": {
"$ref": "#/definitions/ReportBrandingOptions"
},
"embeddedImageTheme": {
"type": "string"
},
"id": {
"type": "integer",
"format": "int64"
@ -7012,6 +7015,9 @@
"type": "integer",
"format": "int64"
},
"pdfTheme": {
"type": "string"
},
"userId": {
"type": "integer",
"format": "int64"

View File

@ -19666,6 +19666,9 @@
"branding": {
"$ref": "#/definitions/ReportBrandingOptions"
},
"embeddedImageTheme": {
"type": "string"
},
"id": {
"type": "integer",
"format": "int64"
@ -19674,6 +19677,9 @@
"type": "integer",
"format": "int64"
},
"pdfTheme": {
"type": "string"
},
"userId": {
"type": "integer",
"format": "int64"

View File

@ -5,9 +5,10 @@ import { t } from 'app/core/internationalization';
interface Props {
selectedTheme: string;
onChange: (value: string) => void;
description?: string;
}
export const ThemePicker = ({ selectedTheme = 'current', onChange }: Props) => {
export const ThemePicker = ({ selectedTheme = 'current', onChange, description }: Props) => {
const themeOptions: Array<SelectableValue<string>> = [
{
label: t('share-modal.theme-picker.current', `Current`),
@ -24,7 +25,7 @@ export const ThemePicker = ({ selectedTheme = 'current', onChange }: Props) => {
];
return (
<Field label={t('share-modal.theme-picker.field-name', `Theme`)}>
<Field label={t('share-modal.theme-picker.field-name', `Theme`)} description={description}>
<RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={onChange} />
</Field>
);

View File

@ -9624,6 +9624,9 @@
"branding": {
"$ref": "#/components/schemas/ReportBrandingOptions"
},
"embeddedImageTheme": {
"type": "string"
},
"id": {
"format": "int64",
"type": "integer"
@ -9632,6 +9635,9 @@
"format": "int64",
"type": "integer"
},
"pdfTheme": {
"type": "string"
},
"userId": {
"format": "int64",
"type": "integer"