Create a wazuh is not ready yet html template with the app look and feel #866

guidomodarelli · 2025-08-27T11:31:03Z

Description

As part of the Dashboard health check rework objective, we need to create a new "Wazuh is not ready yet" HTML template with the look and feel of Wazuh dashboard.

Issues Resolved

closes Create a Wazuh is not ready yet HTML template with the app look and feel · Issue #7681 · wazuh/wazuh-dashboard-plugins

Screenshot

Old view screenshot

New view screenshot

Testing the changes

Apply the following patch wdp-7681.patch
Run wazuh-dashboard

You will see the following errors in your terminal

Details

 log   [19:10:27.571] [error][healthcheck][removeme:non_critical_always_fail-0] Error running task [removeme:non_critical_always_fail-0]: Error initializing index pattern with ID [wazuh-states-inventory-*]: index pattern with ID [wazuh-states-inventory-*] could not be created due to: No indices match pattern “wazuh-states-inventory-*”. This could indicate the collection is disabled or there is a problem in the data collection or ingestion.
 log   [19:10:27.572] [error][healthcheck][removeme:non_critical_always_fail-1] Error running task [removeme:non_critical_always_fail-1]: Error initializing index pattern with ID [wazuh-states-inventory-*]: index pattern with ID [wazuh-states-inventory-*] could not be created due to: No indices match pattern “wazuh-states-inventory-*”. This could indicate the collection is disabled or there is a problem in the data collection or ingestion.
 log   [19:10:27.574] [error][healthcheck][removeme:non_critical_always_fail-2] Error running task [removeme:non_critical_always_fail-2]: Error initializing index pattern with ID [wazuh-states-inventory-*]: index pattern with ID [wazuh-states-inventory-*] could not be created due to: No indices match pattern “wazuh-states-inventory-*”. This could indicate the collection is disabled or there is a problem in the data collection or ingestion.
 log   [19:10:27.574] [error][healthcheck][removeme:non_critical_always_fail-3] Error running task [removeme:non_critical_always_fail-3]: Error initializing index pattern with ID [wazuh-states-inventory-*]: index pattern with ID [wazuh-states-inventory-*] could not be created due to: No indices match pattern “wazuh-states-inventory-*”. This could indicate the collection is disabled or there is a problem in the data collection or ingestion.

Once you see the errors, you access the normal dashboard and you will be able to see the new health check view when critical errors occur, as shown in the images in the screenshots section.
Try without the --no-base-path flag
When you click the Download Checks button, it should download a file called healthcheck.json.
And when you click the “Run failed critical checks” button, it should show a feedback message saying “Running failed critical checks…”. And when it finishes, if there are no errors—and only if there are no errors—it should show that there are no more errors and that in about 30 seconds or more you can reload the page to be redirected to today’s page.

Screen.Recording.2025-09-02.103802.mp4

Changelog

skip

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

Refactors the not-ready server HTML generation by moving the logic into a reusable React component. Simplifies the server response handler by delegating the rendering of the HTML to this new component. Improves maintainability and reduces code duplication.

Refactors the healthcheck component to improve maintainability by moving inline styles to an external stylesheet module. Replaces `renderToStaticMarkup` with `renderToString` for rendering, and updates the component to reference an external CSS file for styling. Enhances code readability and promotes better separation of concerns.

Removes a redundant link to an external CSS file from the healthcheck component, as styles are already embedded inline. Simplifies the component and avoids unnecessary external dependencies.

Extracts the server readiness message into a new `Page` component to enhance reusability and simplify the main component. Improves code maintainability by delegating the rendering of the message and troubleshooting link to a separate component.

Introduces the `serverBasePath` prop to enhance the `Page` component's functionality. Moves the `NotReadyServerProps` interface to a dedicated file to improve modularity and reusability. Disables the license header lint rule in newly added and modified files for consistency.

Relocates the troubleshooting link and base path logic from the service setup to the route handler to streamline configuration and improve readability.

Introduce a dedicated client-side script for handling health check functionality, including tasks management, error reporting, and exporting checks as JSON. Replace inline JavaScript with an external script for better maintainability and modularity. Add a server route to serve the script and configure its integration. Simplify server-side rendering logic by injecting configuration through the global window object and streamline React component props.

Refactors the handling of static assets and routes for the healthcheck dashboard. - Moves inline styles to an external CSS file and updates the logic to load it dynamically. - Updates script and style routes to separate endpoints for better organization. - Replaces `renderToString` with `renderToStaticMarkup` for server-side rendering. - Adds TypeScript type definitions for global configuration. - Renames and adjusts route configuration to support the new asset structure. Improves maintainability and modularity of the codebase.

Replaces redundant HTTP client logic with a dedicated HttpService class to improve code reusability, readability, and maintainability. Renames functions for better clarity and updates references to align with the new HttpService. Enhances error handling and standardizes fetch options by encapsulating them within the service.

Refactors the health check client script to enhance data structures and improve maintainability. - Updates the `Task` type definition with additional fields for better task state representation. - Introduces the `HealthCheckTasks` type for structured API responses. - Refactors HTTP service methods to use generic type templates for improved type safety. - Moves health check API interaction logic to a new `UseCases` class. - Renames variables for clarity in critical and non-critical task filtering. - Improves function documentation and adds type annotations for better readability. These changes aim to improve code clarity, maintainability, and type safety.

Refactors `HttpService` methods to standardize parameter ordering and simplify error handling. Extracts health check logic into dedicated use cases to improve modularity and reusability. Replaces duplicate logic in health check execution with shared methods, ensuring better code maintainability. Updates page load behavior to streamline initial data fetch and content rendering.

Updates a method name to better reflect its role in executing health checks for critical tasks. Enhances code readability and aligns with its intended functionality.

Renames methods in the UseCases class to improve readability and align with naming conventions. - `getHealthCheckTasks` renamed to `retrieveHealthCheckTasks`. - `runHealthCheckForCriticalTasks` renamed to `executeHealthCheckForCriticalTasks`. Updates references to these methods throughout the code to maintain consistency.

Abstracts task filtering logic into reusable functions to improve readability, modularity, and maintainability. Introduces `getCriticalTasks` and `getNonCriticalTasks` helper functions, which utilize a new `filterErrorTasks` function to streamline the process of filtering tasks by error status and metadata.

Simplifies and consolidates the logic for generating HTML content for health check statuses by replacing conditional string concatenation with a more structured approach using template literals and the `when` helper function. Improves code readability and maintainability while preserving existing functionality.

Refactor the HTML content update process by introducing «buildHealthCheckReport» to separate report generation from rendering. Replace «updateContent» with «renderHealthCheckSummary» to improve readability and modularity. Simplify and clarify the handling of critical and non-critical tasks for rendering.

Rename functions «map» and «when» to «» and «» to align with naming conventions. Update all relevant references to reflect these changes.

refactor DOM element access by introducing the «HealthCheckDocument» class, which centralizes logic for retrieving and manipulating specific elements. update functions «downloadHealthChecksAsJSONFile», «runHealthCheck», and «renderHealthCheckSummary» to use the new utility methods, improving readability and maintainability. adjust button rendering logic in «buildHealthCheckReport» to use constants from «HealthCheckDocument», ensuring consistency in element identifiers.

Remove unnecessary indentation in JSON stringification within the «downloadHealthChecksAsJSONFile» function and simplify blob creation by directly passing the content. Update button class from «.btn-export-checks» to «.btn-export» for consistent naming, and adjust corresponding styles for hover and disabled states.

Rename «ROOT_ID» to «healthcheck-root» for clarity and adjust the app layout by nesting the «Page» component within the root element. Add CSS styling for «#root» to improve spacing.

Ensure proper character encoding by adding a UTF-8 meta tag to the HTML head. Correct script tag syntax by replacing an incorrect closing tag format, improving HTML compliance.

introduce constant «INTERNAL_HEALTHCHECK_API_ENDPOINT» for the internal health check API endpoint to improve maintainability and reduce duplication. update functions «retrieveHealthCheckTasks» and «postUpdatedTasks» to use the new constant, ensuring consistent endpoint references across the codebase.

…rIsNotReadyRoutes» Update function name for improved clarity and consistency with the related module's purpose. Reflects a more descriptive naming convention to enhance code readability and maintainability.

Redesign the health check user interface to enhance usability and visual presentation. Introduce new components, «Icons» and «Components», to modularize and streamline UI elements. Add reset styles to ensure consistent styling across browsers. Update the «Page» component to include a new title design incorporating the «WazuhDashboardLogo». Adjust related CSS to align with the updated design, including typography and button styles. Extend server routes to serve the new reset styles.

Refactor health check UI to use reusable components like «Components.card» and «Components.button» for better readability and maintainability. Update CSS for improved layout, spacing, and responsiveness, including adjustments to mobile screen handling. Simplify props in «Page» component by narrowing type definitions and removing unused properties. Remove unused utility type «OmitStrict» from types module.

Introduce media queries to improve layout adaptability on devices with max-widths of 425px and 768px. Adjust «.title» layout to stack elements vertically on smaller screens and refine «.button» dimensions for better usability in narrow viewports.

add a new static method «wrench» to the «Icons» class to render a wrench icon. update the critical error message in the health check report to include the new icon, improving visual clarity and emphasis.

Introduce «formatDateTime» and «formatDuration» utilities to standardize date/time and duration formatting. Enhance the display of critical tasks by adding metadata (creation time, finish time, and duration) and improving the visual structure with semantic HTML and CSS styling. Implement animated transitions for critical item lists and update their layout for better readability.

Introduce a new warning icon in «Icons» class for consistent visual representation. Replace the table-based layout for non-critical items with an accessible, card-style design using semantic HTML and enhanced metadata display. Update styles to support the new layout, including animations, badges, and sequential delay for better user experience. Simplify and improve readability of non-critical items by adding timestamps, duration, and fallback messaging for missing details.

…l-item» Introduce hover and active state styles for «critical-item» and «noncritical-item» elements, enhancing user interaction feedback. Adjust transitions for smoother visual effects, including background-color, box-shadow, and transform properties.

Add a new «alertCircle» SVG icon in the «Icons» class for improved visual representation of critical items. Update the critical item component to include the new icon. Style the icon with a red color in the associated CSS to ensure consistent visual emphasis.

Add inline padding to the body element to ensure consistent side margins, enhancing the visual alignment and overall layout spacing.

Enhance responsive design by allowing elements to wrap on narrow screens, preventing text from squashing or vertically stacking. Adjust styles for critical and noncritical items to improve readability with «white-space: normal», «word-break: normal», and «overflow-wrap: anywhere». Remove redundant comment for consistency.

Reorganize CSS rules by adding consistent line breaks and indentation to enhance readability and maintainability. Refactor animation delay rules for cards, table rows, and list items to follow a uniform style, making the code structure clearer.

Rename the "Download Icon" label to "Export Icon" to improve clarity and consistency. Update the static method «exportSvg» to «download» and corresponding references to align with the updated terminology.

Introduce tests to verify HTML output, constant values, and route registration for the dashboard server not ready state. Improve reliability by ensuring asset routes and configuration are rendered and exposed as expected.

Ensure critical and non-critical health check tasks are rendered and validated in the UI. Verify «downloadHealthChecksAsJSONFile» triggers correct file download and handles DOM interactions. Improve test coverage and reliability of server readiness page behavior.

add unit test to verify UI shows running feedback during health check, then displays success notice when no critical errors remain ensure button state and visibility reflect critical error status and API interaction updates the UI accordingly

src/core/server/healthcheck/healthcheck/dashboard_server_is_not_ready_yet/client/styles.css

src/core/server/healthcheck/healthcheck/dashboard_server_is_not_ready_yet/server/constants.ts

src/core/server/healthcheck/healthcheck/dashboard_server_is_not_ready_yet/server/index.ts

src/core/server/healthcheck/healthcheck/dashboard_server_is_not_ready_yet/server/route.ts

src/core/server/healthcheck/healthcheck/dashboard_server_is_not_ready_yet/types.ts

Desvelao · 2025-09-05T11:58:26Z

src/core/server/healthcheck/healthcheck/service.ts

@@ -66,310 +68,20 @@ export class HealthCheckService
    const appName = 'Wazuh dashboard';

    addRoutesNotReadyServer(server, { healthcheck: this.healthCheck, logger: this.logger });
+    configureDashboardServerIsNotReadyRoutes(server);

    server.route({
      path: '/{p*}',


suggestion: you could move this route definition to the configureDashboardServerIsNotReadyRoutes taking into account this registers routes for the server with the static files.

Where do you want to move the route definitions?

Desvelao · 2025-09-05T15:01:55Z

Test

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test	Chrome	Firefox	Safari
When you click the Download Checks button, it should download a file called healthcheck.json.	🟢	⚫	⚫
when you click the “Run failed critical checks” button, it should show a feedback message saying “Running failed critical checks…”. And when it finishes, if there are no errors—and only if there are no errors—it should show that there are no more errors and that in about 30 seconds or more you can reload the page to be redirected to today’s page.	🟢	⚫	⚫

Details

🟢 When you click the Download Checks button, it should download a file called healthcheck.json.

Chrome - 🟢

Firefox - 🟢

Safari - ⚫

🟢 when you click the “Run failed critical checks” button, it should show a feedback message saying “Running failed critical checks…”. And when it finishes, if there are no errors—and only if there are no errors—it should show that there are no more errors and that in about 30 seconds or more you can reload the page to be redirected to today’s page.

Chrome - 🟢

Reloading the page:

Firefox - 🟢

Safari - ⚫

Other tests

Tested with phone dimensions seems some text is blurred

I am not sure if this is a problem in my test or there is some logic that could affect to the styles.

src/core/server/healthcheck/healthcheck/dashboard_server_is_not_ready_yet/client/script.js

Desvelao · 2025-09-05T15:22:35Z

Good job @guidomodarelli! The view looks amazing! 💯

In my opinion, the usage of the animations might not fit to the standard look and feel of the dashboard. Please, it does not take this as request change and wait more reviews.

Desvelao

Review the comments and apply the request changes.

…81-create-a-wazuh-is-not-ready-yet-html-template-with-the-app-look-and-feel

Standardize licensing by inserting copyright and SPDX identifiers at the top of all relevant files. Ensures compliance and clarity regarding code ownership and usage terms.

remove redundant «@import» statements by consolidating font imports, reducing duplication and clarifying stylesheet dependencies

clarify post-healthcheck instructions by removing specific reference to login and making the redirection message more general

clarify changelog entry for health check service by linking to both relevant pull requests for improved traceability

guidomodarelli added 22 commits August 26, 2025 15:44

remove unused stylesheet link from healthcheck component

e2b6d7b

Removes a redundant link to an external CSS file from the healthcheck component, as styles are already embedded inline. Simplifies the component and avoids unnecessary external dependencies.

move troubleshooting link to route handler

2c01a7f

Relocates the troubleshooting link and base path logic from the service setup to the route handler to streamline configuration and improve readability.

rename method to clarify its purpose in health check execution

25a5012

Updates a method name to better reflect its role in executing health checks for critical tasks. Enhances code readability and aligns with its intended functionality.

rename utility functions for consistency

5b6b2b8

Rename functions «map» and «when» to «» and «» to align with naming conventions. Update all relevant references to reflect these changes.

update health check root element and layout

fb115e9

Rename «ROOT_ID» to «healthcheck-root» for clarity and adjust the app layout by nesting the «Page» component within the root element. Add CSS styling for «#root» to improve spacing.

add UTF-8 charset meta tag and fix script tag syntax

906a2ed

Ensure proper character encoding by adding a UTF-8 meta tag to the HTML head. Correct script tag syntax by replacing an incorrect closing tag format, improving HTML compliance.

guidomodarelli self-assigned this Aug 27, 2025

github-actions bot added the seasoned-contributor label Aug 27, 2025

guidomodarelli added 6 commits August 27, 2025 11:39

rename function «configureNotReadyRoutes» to «configureDashboardServe…

55c51db

…rIsNotReadyRoutes» Update function name for improved clarity and consistency with the related module's purpose. Reflects a more descriptive naming convention to enhance code readability and maintainability.

add «wrench» icon and integrate it into critical error message

b5c062e

add a new static method «wrench» to the «Icons» class to render a wrench icon. update the critical error message in the health check report to include the new icon, improving visual clarity and emphasis.

guidomodarelli added 11 commits August 29, 2025 04:23

add padding to improve layout spacing

23541c7

Add inline padding to the body element to ensure consistent side margins, enhancing the visual alignment and overall layout spacing.

reformat CSS for improved readability

0b33d79

Reorganize CSS rules by adding consistent line breaks and indentation to enhance readability and maintainability. Refactor animation delay rules for cards, table rows, and list items to follow a uniform style, making the code structure clearer.

update icon labels and refactor related variable names

5ffcffe

Rename the "Download Icon" label to "Export Icon" to improve clarity and consistency. Update the static method «exportSvg» to «download» and corresponding references to align with the updated terminology.

Machi3mfl self-requested a review September 3, 2025 13:09

This comment was marked as outdated.

Sign in to view