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. 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. - **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. - **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**. - **Email footer:** Toggle to enable the report email footer. Select **Sent by** or **None**.

View File

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

View File

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

View File

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

View File

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