From de4295efe8c125668eb1452e62fcd7263011be92 Mon Sep 17 00:00:00 2001 From: vitPinchuk Date: Thu, 21 Mar 2024 11:51:43 +0300 Subject: [PATCH 1/4] added input for alert message --- src/components/ImagePanel/ImagePanel.tsx | 2 +- src/constants/default.ts | 1 + src/module.ts | 11 +++++++++++ src/types/panel.ts | 7 +++++++ 4 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/ImagePanel/ImagePanel.tsx b/src/components/ImagePanel/ImagePanel.tsx index 7dd244a..178597a 100644 --- a/src/components/ImagePanel/ImagePanel.tsx +++ b/src/components/ImagePanel/ImagePanel.tsx @@ -236,7 +236,7 @@ export const ImagePanel: React.FC = ({ options, data, width, height, repl if (!img) { return renderContainer( - Nothing to display... + {options.alertMessage} ); } diff --git a/src/constants/default.ts b/src/constants/default.ts index b0f22fb..aa94d4c 100644 --- a/src/constants/default.ts +++ b/src/constants/default.ts @@ -5,6 +5,7 @@ import { ImageScale, ImageSizeMode, PanelOptions, ZoomType } from '../types'; */ export const DEFAULT_OPTIONS: PanelOptions = { autoPlay: true, + alertMessage: 'Nothing to display...', infinityPlay: false, buttons: [], controls: true, diff --git a/src/module.ts b/src/module.ts index 94dfb50..27c67a9 100644 --- a/src/module.ts +++ b/src/module.ts @@ -29,6 +29,17 @@ export const plugin = new PanelPlugin(ImagePanel).setNoPadding().s }, }); + /** + * Alert Message + */ + builder.addTextInput({ + path: 'alertMessage', + name: 'Message', + description: 'Specifies a warning message if nothing is displayed', + defaultValue: DEFAULT_OPTIONS.alertMessage, + category: ['Alert Message'], + }); + /** * ToolBar */ diff --git a/src/types/panel.ts b/src/types/panel.ts index 3797c90..1ef7cca 100644 --- a/src/types/panel.ts +++ b/src/types/panel.ts @@ -132,4 +132,11 @@ export interface PanelOptions { * @type {ImageScale} */ scale: ImageScale; + + /** + * Alert Message + * + * @type {string} + */ + alertMessage: string; } From c63a49c790b43747b77e86f4c61c5aabf4b293d1 Mon Sep 17 00:00:00 2001 From: asimonok Date: Thu, 21 Mar 2024 15:39:41 +0300 Subject: [PATCH 2/4] Formatting and add tests --- src/components/ImagePanel/ImagePanel.test.tsx | 4 ++++ src/components/ImagePanel/ImagePanel.tsx | 2 +- src/constants/default.ts | 2 +- src/module.ts | 9 ++++----- src/types/panel.ts | 4 ++-- 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/ImagePanel/ImagePanel.test.tsx b/src/components/ImagePanel/ImagePanel.test.tsx index 0cdc986..e2d98fd 100644 --- a/src/components/ImagePanel/ImagePanel.test.tsx +++ b/src/components/ImagePanel/ImagePanel.test.tsx @@ -63,11 +63,15 @@ describe('Image Panel', () => { }), ], }, + options: { + noResultsMessage: 'No results...', + }, }) ); expect(screen.getByTestId(TEST_IDS.panel.root)).toBeInTheDocument(); expect(screen.getByTestId(TEST_IDS.panel.warning)).toBeInTheDocument(); + expect(screen.getByTestId(TEST_IDS.panel.warning)).toHaveTextContent('No results...'); }); it('Should render image', async () => { diff --git a/src/components/ImagePanel/ImagePanel.tsx b/src/components/ImagePanel/ImagePanel.tsx index 178597a..af718ae 100644 --- a/src/components/ImagePanel/ImagePanel.tsx +++ b/src/components/ImagePanel/ImagePanel.tsx @@ -236,7 +236,7 @@ export const ImagePanel: React.FC = ({ options, data, width, height, repl if (!img) { return renderContainer( - {options.alertMessage} + {options.noResultsMessage} ); } diff --git a/src/constants/default.ts b/src/constants/default.ts index aa94d4c..6a74dcd 100644 --- a/src/constants/default.ts +++ b/src/constants/default.ts @@ -5,7 +5,7 @@ import { ImageScale, ImageSizeMode, PanelOptions, ZoomType } from '../types'; */ export const DEFAULT_OPTIONS: PanelOptions = { autoPlay: true, - alertMessage: 'Nothing to display...', + noResultsMessage: 'Nothing to display...', infinityPlay: false, buttons: [], controls: true, diff --git a/src/module.ts b/src/module.ts index 27c67a9..2c0e63e 100644 --- a/src/module.ts +++ b/src/module.ts @@ -33,11 +33,10 @@ export const plugin = new PanelPlugin(ImagePanel).setNoPadding().s * Alert Message */ builder.addTextInput({ - path: 'alertMessage', - name: 'Message', - description: 'Specifies a warning message if nothing is displayed', - defaultValue: DEFAULT_OPTIONS.alertMessage, - category: ['Alert Message'], + path: 'noResultsMessage', + name: 'No Results Message', + description: 'Specifies no results message text.', + defaultValue: DEFAULT_OPTIONS.noResultsMessage, }); /** diff --git a/src/types/panel.ts b/src/types/panel.ts index 1ef7cca..9fa836d 100644 --- a/src/types/panel.ts +++ b/src/types/panel.ts @@ -134,9 +134,9 @@ export interface PanelOptions { scale: ImageScale; /** - * Alert Message + * No Results Message * * @type {string} */ - alertMessage: string; + noResultsMessage: string; } From b7a82ef67fce38773d8d193bf4a6dc0b83372421 Mon Sep 17 00:00:00 2001 From: asimonok Date: Thu, 21 Mar 2024 15:40:23 +0300 Subject: [PATCH 3/4] Formatting --- src/module.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/module.ts b/src/module.ts index 2c0e63e..196a82e 100644 --- a/src/module.ts +++ b/src/module.ts @@ -27,18 +27,14 @@ export const plugin = new PanelPlugin(ImagePanel).setNoPadding().s filter: (f: Field) => f.type === FieldType.string, noFieldsMessage: 'No strings fields found', }, + }) + .addTextInput({ + path: 'noResultsMessage', + name: 'No Results Message', + description: 'Specifies no results message text.', + defaultValue: DEFAULT_OPTIONS.noResultsMessage, }); - /** - * Alert Message - */ - builder.addTextInput({ - path: 'noResultsMessage', - name: 'No Results Message', - description: 'Specifies no results message text.', - defaultValue: DEFAULT_OPTIONS.noResultsMessage, - }); - /** * ToolBar */ From db6faafcf223e19d05d84382278b92d8b6ee5d1b Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Thu, 21 Mar 2024 23:50:45 -0400 Subject: [PATCH 4/4] Update version --- CHANGELOG.md | 6 ++++++ README.md | 8 ++++---- package.json | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 881e2bf..faeb7b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 4.3.0 (IN PROGRESS) + +### Features / Enhancements + +- Added the ability to customize the alert message (#96) + ## 4.2.0 (2024-02-22) ### Features / Enhancements diff --git a/README.md b/README.md index 47bc1ff..f0baf95 100644 --- a/README.md +++ b/README.md @@ -18,10 +18,10 @@ Base64 Image/Video/Audio/PDF Panel is a Grafana plugin that renders PNG, JPG, GI The Base64 Image/Video/Audio/PDF Panel version requirements for Grafana are as follows: -- Version 4.X requires **Grafana 9** or **Grafana 10**. -- Version 3.X requires **Grafana 8.5** or **Grafana 9**. -- Version 2.X requires **Grafana 8**. -- Version 1.X requires **Grafana 7.1**. +- Base64 Panel 4.X requires **Grafana 9** or **Grafana 10**. +- Base64 Panel 3.X requires **Grafana 8.5** or **Grafana 9**. +- Base64 Panel 2.X requires **Grafana 8**. +- Base64 Panel 1.X requires **Grafana 7.1**. ## Getting Started diff --git a/package.json b/package.json index 9ddcb37..d4e33e4 100644 --- a/package.json +++ b/package.json @@ -74,5 +74,5 @@ "test:ci": "jest --maxWorkers 4 --coverage", "upgrade": "npm upgrade --save" }, - "version": "4.2.0" + "version": "4.3.0" }