Black squared icon in Wazuh Dashboard

[AlexRuiz7]

Wazuh version	Install type	Action performed	Platform
4.4.0-dev	Wazuh Dashboard	Install	Any

Related issue: wazuh/wazuh-dashboard-plugins#4740

From @wazuh/frontend team, we're testing our plugin together with Wazuh Dashboard, using a test package provided by the @wazuh/cicd team.

We've seen that the platform has a visual bug, showing a black squared icon in the top left corner of the web app. This icon is the main logo, as seen here.

Wazuh app on Wazuh Dashboard 4.3.9 (based on OpenSearch Dashboards 1.2.0)

Wazuh app on OpenSearch 2.3.0

Wazuh app on Wazuh Dashboard 4.4.0 (based on OpenSearch Dashboards 2.3.0)

[okynos]

Include research about how to eliminate the black square or how to define a top header with static color.

[rauldpm]

Update report

Research

• According to the OpenSearch documentation it is possible to modify this logo in the configuration of opensearch_dashboards.yml file: https://opensearch.org/docs/2.3/dashboards/branding/

Test

• Created 1px svg image with transparency https://packages-dev.wazuh.com/resources/logo_app.svg
• Modified configuration as follow:

opensearchDashboards.branding:
   logo:
     defaultUrl: "https://packages-dev.wazuh.com/resources/logo_app.svg"
     darkModeUrl: "https://packages-dev.wazuh.com/resources/logo_app.svg"

• Before

• After

• When applying dark mode, it has been observed that the loading screen shows a white semi-circle behind the Wazuh logo, the @wazuh/frontend team has been asked about it.

• Although the image is hidden, a link continues to appear when hovering the cursor over the area where the black rectangle was, despite the fact that the image has a dimension of 1x1 pixel, it is possible that it is internally resized to a specific size.

Next steps

• Investigate alternatives, such as removing said element from the WUI directly.
• A meeting with the team is necessary to decide what requirements this issue must have (It is desired to remove it completely, It is desired to give the option to modify the logo, etc.)

[rauldpm]

Update report

Research

• After talking with the team, it has been defined that the proposed fix is valid until the fork is made, so the proposed solution is maintained with a transparent image.
• Regarding the white half circle that can be seen on the loading screen in dark mode, it has been determined that it should not appear.
• The origin of this form has been investigated among the different files, apparently, this form is created through the createElement method in the template.js file, by removing the line _react.default.createElement("circle",{fill :"#FFF",cx:"512",cy:"512",r:"512"}),, said semicircle has disappeared.
• Regarding the logo of the Wazuh loading screen, it has been detected that regardless of being in dark mode or not, it always has dark letters. The image used and where the image is used in the wazuh-packages files have not been located.

Development

• The image used with a black square has been eliminated.
• Added an image with full transparency.
• The builder.sh script has been modified to use the new image, in addition, a new line has been added so that said image is also used in dark mode.

cp ./etc/custom_welcome/Assets/default_branding/logo_full_alpha.svg ./src/core/server/core_app/assets/default_branding/opensearch_logo_default_mode.svg
cp ./etc/custom_welcome/Assets/default_branding/logo_full_alpha.svg ./src/core/server/core_app/assets/default_branding/opensearch_logo_dark_mode.svg

• Removed the line _react.default.createElement("circle",{fill:"#FFF",cx:"512",cy:"512",r:"512"}), from the template.js file, now the loading screen shows the following:

Next steps

• So far, what was reported in the issue has been fixed, but maybe it would be interesting to add an image for the light mode of the loading screen:
  • Investigate where the loading screen logo is set.
  • Add a light image for the loading screen logo in dark mode

[rauldpm]

Update report

Research

• After investigating the OpenSearch-Dashboards repository, significant differences have been observed in the template.js and styles.js files, which are now written in React TypeScript and not Javascript
  • https://github.com/opensearch-project/OpenSearch-Dashboards/blob/2.3.0/src/core/server/rendering/views/template.tsx
  • https://github.com/opensearch-project/OpenSearch-Dashboards/blob/2.3.0/src/core/server/rendering/views/styles.tsx
• It has not been possible to vary or find a method to use an alternative logo to the current one for dark mode, where it does not stand out as much as it does in light mode. It would be interesting to investigate some method to change this since OpenSearch makes no distinction in its logo on the loading screen. Reported at Wazuh dashboard should use a light logo on the dark mode loading screen #1924
• Currently, the Wazuh logo is hardcoded in SVG format in the template.js file itself: https://github.com/wazuh/wazuh-packages/blob/4.4/stack/dashboard/base/files/etc/template.js#L60-L75

  const openSearchLogo = /*#__PURE__*/_react.default.createElement("svg", {
    width: "64",
    height: "64",
    viewBox: "0 0 64 64",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z",
    fill: "#005EB8"
  }), /*#__PURE__*/_react.default.createElement("path", {
    d: "M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z",
    fill: "#003B5C"
  }), /*#__PURE__*/_react.default.createElement("path", {
    d: "M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z",
    fill: "#005EB8"
  }));

• Regarding the current issue, the header logo has been replaced by an SVG image with transparency for both light and dark modes, and the component that created a white semicircle that can be seen in the dark mode loading screen has been removed.

Testing

• Created development ECS Task Definition: Packages_rpm_dashboard_x86_64_wp_1907
• Created development ECR Wazuh dashboard base image: base_dashboard_builder_x86_64_wp_1907
• Created development ECR Wazuh dashboard image: rpm_dashboard_builder_x86_64_wp_1907
• Created wazuh-jenkins branch wp.1907-remove-black-squared-icon-4.4 due to the need to overwrite the ECSTask class parameters with the created ECS Task Definition, it would be interesting to create an issue to include the recent modifications introduced in the ECSTask and Container classes to allow from the pipeline itself to specify a custom ECS Task Definition and a custom ECR image.

this.task = new ECSTask(this.steps, "Packages_rpm_dashboard_x86_64_wp_1907", ["base_dashboard_builder_x86_64_wp_1907", "rpm_dashboard_builder_x86_64_wp_1907"], null, cmd, provider)

• Jenkins build: https://ci.wazuh.info/view/Packages/job/Packages_builder/120300/
• Package created: https://packages-dev.wazuh.com/warehouse/test/4.4/rpm/wazuh-dashboard-4.4.0-wp.1907.x86_64.rpm

Wazuh dashboard terminal output

[root@centos7 ~]# yum localinstall wazuh-dashboard-4.4.0-wp.1907.x86_64.rpm -y
Loaded plugins: fastestmirror
Examining wazuh-dashboard-4.4.0-wp.1907.x86_64.rpm: wazuh-dashboard-4.4.0-wp.1907.x86_64
Marking wazuh-dashboard-4.4.0-wp.1907.x86_64.rpm to be installed
Resolving Dependencies
--> Running transaction check
---> Package wazuh-dashboard.x86_64 0:4.4.0-wp.1907 will be installed
--> Finished Dependency Resolution

Dependencies Resolved

===================================================================================================================================================================================================================
 Package                                         Arch                                   Version                                        Repository                                                             Size
===================================================================================================================================================================================================================
Installing:
 wazuh-dashboard                                 x86_64                                 4.4.0-wp.1907                                  /wazuh-dashboard-4.4.0-wp.1907.x86_64                                 775 M

Transaction Summary
===================================================================================================================================================================================================================
Install  1 Package

Total size: 775 M
Installed size: 775 M
Downloading packages:
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
  Installing : wazuh-dashboard-4.4.0-wp.1907.x86_64                                                                                                                                                            1/1 
  Verifying  : wazuh-dashboard-4.4.0-wp.1907.x86_64                                                                                                                                                            1/1 

Installed:
  wazuh-dashboard.x86_64 0:4.4.0-wp.1907                                                                                                                                                                           

Complete!
[root@centos7 ~]# sed -i "s/localhost/192.168.57.102/g" /etc/wazuh-dashboard/opensearch_dashboards.yml
[root@centos7 ~]# mkdir /etc/wazuh-dashboard/certs
[root@centos7 ~]# cd wazuh-certificates
[root@centos7 wazuh-certificates]# cp dashboard.pem /etc/wazuh-dashboard/certs/
[root@centos7 wazuh-certificates]# cp dashboard-key.pem /etc/wazuh-dashboard/certs/
[root@centos7 wazuh-certificates]# cp root-ca.pem /etc/wazuh-dashboard/certs/
[root@centos7 wazuh-certificates]# chmod 500 /etc/wazuh-dashboard/certs
[root@centos7 wazuh-certificates]# chmod 400 /etc/wazuh-dashboard/certs/*
[root@centos7 wazuh-certificates]# chown -R wazuh-dashboard:wazuh-dashboard /etc/wazuh-dashboard/certs
[root@centos7 wazuh-certificates]# systemctl daemon-reload
[root@centos7 wazuh-certificates]# systemctl enable wazuh-dashboard
[root@centos7 wazuh-certificates]# systemctl start wazuh-dashboard
[root@centos7 wazuh-certificates]# journalctl -r -u wauzh-dashboard | grep -i -E "error|fatal|critical|warning"
[root@centos7 wazuh-certificates]# systemctl status wazuh-dashboard
● wazuh-dashboard.service - wazuh-dashboard
   Loaded: loaded (/etc/systemd/system/wazuh-dashboard.service; enabled; vendor preset: disabled)
   Active: active (running) since Fri 2022-11-04 18:08:54 UTC; 17min ago
 Main PID: 5278 (node)
   CGroup: /system.slice/wazuh-dashboard.service
           └─5278 /usr/share/wazuh-dashboard/bin/../node/bin/node --no-warnings --max-http-header-size=65536 --unhandled-rejections=warn /usr/share/wazuh-dashboard/bin/../src/cli/dist -c /etc/wazuh-dashboard/...

Nov 04 18:15:01 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:15:00Z","tags":["error","opensearch","data"],"pid":5278,"message":"[mapper_parsing_exception]: failed to parse"}
Nov 04 18:15:01 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:15:00Z","tags":["error","plugins","wazuh","cron-scheduler"],"pid":5278,"message":"{\"error\":{\"root_cause\":[{\"...
Nov 04 18:20:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:20:00Z","tags":["error","opensearch","data"],"pid":5278,"message":"[mapper_parsing_exception]: failed to parse"}
Nov 04 18:20:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:20:00Z","tags":["error","plugins","wazuh","cron-scheduler"],"pid":5278,"message":"{\"error\":{\"root_cause\":[{\"...
Nov 04 18:20:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:20:00Z","tags":["error","opensearch","data"],"pid":5278,"message":"[mapper_parsing_exception]: failed to parse"}
Nov 04 18:20:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:20:00Z","tags":["error","plugins","wazuh","cron-scheduler"],"pid":5278,"message":"{\"error\":{\"root_cause\":[{\"...
Nov 04 18:25:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:25:00Z","tags":["error","opensearch","data"],"pid":5278,"message":"[mapper_parsing_exception]: failed to parse"}
Nov 04 18:25:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:25:00Z","tags":["error","plugins","wazuh","cron-scheduler"],"pid":5278,"message":"{\"error\":{\"root_cause\":[{\"...
Nov 04 18:25:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:25:00Z","tags":["error","opensearch","data"],"pid":5278,"message":"[mapper_parsing_exception]: failed to parse"}
Nov 04 18:25:00 centos7 opensearch-dashboards[5278]: {"type":"log","@timestamp":"2022-11-04T18:25:00Z","tags":["error","plugins","wazuh","cron-scheduler"],"pid":5278,"message":"{\"error\":{\"root_cause\":[{\"...
Hint: Some lines were ellipsized, use -l to show in full.
[root@centos7 views]# 

Video: light and dark mode changes

2022-11-04.18-52-38.mp4