Added the ability to customize the alert message

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

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
 

package.json

@@ -74,5 +74,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "4.2.0"
+  "version": "4.3.0"
 }

src/components/ImagePanel/ImagePanel.test.tsx

@@ -63,11 +63,15 @@
             }),
           ],
         },
+        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 () => {
@@ -746,7 +750,7 @@
 
       fireEvent.click(screen.getByTestId(TEST_IDS.panel.buttonDownload));
 
       expect(saveAs).toHaveBeenCalledWith(`data:image/jpeg;base64,${image}`);
     });
 
     it('Should not show download button', () => {

src/components/ImagePanel/ImagePanel.tsx

@@ -51,7 +51,7 @@
         )
         .map((field) => field?.values)
         .filter((item) => !!item)[0]
         ?.toArray() || []
     );
   }, [data.series, options.name]);
 
@@ -68,7 +68,7 @@
         .map((series) => series.fields.find((field) => field.name === options.description))
         .map((field) => field?.values)
         .filter((item) => !!item)[0]
         ?.toArray() || []
     );
   }, [data.series, options.description]);
 
@@ -179,7 +179,7 @@
         .map((series) =>
           series.fields.find((field) => field.type === FieldType.number && field.name === options.heightName)
         )
         .map((field) => field?.values.get(field.values.length - 1))
         .toString();
       imageHeight = Number(heightField) ? Number(heightField) : imageHeight;
     }
@@ -199,7 +199,7 @@
         .map((series) =>
           series.fields.find((field) => field.type === FieldType.number && field.name === options.widthName)
         )
         .map((field) => field?.values.get(field.values.length - 1))
         .toString();
       imageWidth = Number(widthField) ? Number(widthField) : imageWidth;
     }
@@ -236,7 +236,7 @@
   if (!img) {
     return renderContainer(
       <Alert severity="warning" title="" data-testid={TEST_IDS.panel.warning}>
-        Nothing to display...
+        {options.noResultsMessage}
       </Alert>
     );
   }

src/constants/default.ts

@@ -5,6 +5,7 @@ import { ImageScale, ImageSizeMode, PanelOptions, ZoomType } from '../types';
  */
 export const DEFAULT_OPTIONS: PanelOptions = {
   autoPlay: true,
+  noResultsMessage: 'Nothing to display...',
   infinityPlay: false,
   buttons: [],
   controls: true,

src/module.ts

@@ -27,6 +27,12 @@ export const plugin = new PanelPlugin<PanelOptions>(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,
     });
 
   /**

src/types/panel.ts

@@ -132,4 +132,11 @@ export interface PanelOptions {
    * @type {ImageScale}
    */
   scale: ImageScale;
+
+  /**
+   * No Results Message
+   *
+   * @type {string}
+   */
+  noResultsMessage: string;
 }