This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack-documentation.git
The following commit(s) were added to refs/heads/main by this push:
new b5a72fc UI: Announcement banner documentation (#517)
b5a72fc is described below
commit b5a72fc50e4405cf3b65005ce29b555938ddeb61
Author: Manoj Kumar <[email protected]>
AuthorDate: Mon Jul 7 13:57:29 2025 +0530
UI: Announcement banner documentation (#517)
* UI: Announcement Banner documentation
* update banner image
* restructure announcement banner
* add notes for announcement banner
---
source/_static/images/ui-announcement-banner.png | Bin 0 -> 43654 bytes
source/adminguide/ui.rst | 60 ++++++++++++++++++++++-
2 files changed, 59 insertions(+), 1 deletion(-)
diff --git a/source/_static/images/ui-announcement-banner.png
b/source/_static/images/ui-announcement-banner.png
new file mode 100644
index 0000000..fc687f3
Binary files /dev/null and b/source/_static/images/ui-announcement-banner.png
differ
diff --git a/source/adminguide/ui.rst b/source/adminguide/ui.rst
index 95d826b..68dd202 100644
--- a/source/adminguide/ui.rst
+++ b/source/adminguide/ui.rst
@@ -508,7 +508,64 @@ For displaying a custom HTML in the plugin, HTML file can
be stored in the Cloud
|ui-custom-plugin.png|
-Instance Image Selction Customisation
+Announcement Banner
+===================
+
+Admin can configure an **announcement banner** in `config.json` to display
alerts or messages to all users.
+This banner is useful for communicating important notices such as performance
issues, scheduled maintenance, or general announcements.
+To enable and customize the banner, use the `announcementBanner` section in
the config.json file.
+
+This section supports the following properties:
+
+**Configuration Example**
+
+.. parsed-literal::
+
+ "announcementBanner": {
+ "enabled": true,
+ "showIcon": true,
+ "closable": true,
+ "persistDismissal": true,
+ "type": "warning",
+ "message": "<strong>Performance Notice:</strong> We're experiencing high
load. Some operations may be slower than usual.",
+ "startDate": "2025-06-01T00:00:00Z",
+ "endDate": "2025-07-16T00:00:00Z"
+ }
+
+**Banner Display Example**
+
+Based on the configuration above, the following banner is shown in the user
interface:
+
+.. image:: /_static/images/ui-announcement-banner.png
+ :align: center
+ :alt: UI Announcement banner
+
+--------
+
+**Properties Description**
+
+- **enabled**: Enables or disables the announcement banner (`true` or `false`).
+- **showIcon**: Displays an icon alongside the message. The icon corresponds
to the banner `type`.
+- **closable**: Allows users to close the banner.
+- **persistDismissal**: Remembers the user's dismissal of the banner, so it
doesn't reappear.
+- **type**: Specifies the type of banner. Supported values are:
+
+ - `info`
+ - `warning`
+ - `error`
+ - `success`
+
+- **message**: The HTML-formatted content displayed in the banner.
+- **startDate** / **endDate**: Define the visibility window for the banner
using ISO 8601 format (`YYYY-MM-DDTHH:MM:SSZ`).
+
+.. note::
+
+ - The `message` property supports basic HTML, allowing styled content such
as `<strong>` tags for emphasis.
+ - Banner's background color changes based on `type` property value. White
color is used for banner if `type` is not defined or has invalid value.
+ - Multi-line message is supported, however recommendation is to limit it to
2 lines. Content may overlap banner for more than 2 lines.
+
+
+Instance Image Selection Customisation
-------------------------------------
In the UI, there are several forms where the user needs to select an image
(template/ISO) for an instance, such as deploying an instance, reinstalling an
instance, creating a VNF appliance, etc. The image selection interface for
these forms can be selected by the operator based on preference by specifying
properties in the UI configuration file (config.json).
@@ -523,6 +580,7 @@ The *legacy* interface will display images based on
templatefilter/isofilter, i.
|ui-legacy-image-selection.png|
+
Advanced UI Customisation
~~~~~~~~~~~~~~~~~~~~~~~~~
