How to change the ui of wazuh dashboard from it's code? Please help.

[Prathamesh314]

I want to change ui of wazuh dashboard and for that I followed these steps:

1. clone the wazuh-dashboard repository
2. After cloning, I cloned wazuh-dashboard-plugins repository inside plugins folder of wazuh-dahboard
3. I made changes to some texts in wazuh modules and updated all the images
4. I packaged the whole repository which is stored in dev-tools/build-packages/output/deb folder
5. I used offline component installation to setup wazuh and there I used my generated dashboard package and for the rest I used in-built packages, i.e. for indexer and manager.
6. When I started dashboard on browser, only images changed not the text. Please help me where and how to change the ui

[Tostti]

Hi @Prathamesh314
I understand that you were able to successfully generate the package, but the changes are not working.

Most of the possible changes are inside the wazuh-dashboard-plugins repo. In this repo, you can navigate to /docker/osd-dev and use that to bring up a development environment on which you will be able to see all the changes you do without generating packages.

To do this you will need docker, and Node.js in the version that the repository states in .nvmrc. Once you have that, you can bring up the environment with ./dev.sh /path/to/wazuh-dashboard-plugins/plugins up. You can also add server 4.9.2 at the end to bring up a manager in the specified version. Once all the containers are up, attach a shell to the osd container and run yarn start --no-base-path. After that, you will be able to login to localhost:5601 with the credentials admin:admin.

If the changes you need to do are in the wazuh-dashboard repository, you can similarly navigate to docker and run ./dev.sh up to bring up the developement environment for that repository.

I hope you find this helpful, let me know if you need further assistance.

Regards,

[Tostti]

That tag should be ok.

Did you create the required docker networks? You can see it in the pre-requisites of the docker environments. (The 3rd step on that documentation is not required)

[Prathamesh314]

I have followed every step given in that documenation, I am seeing this page on browser:

when I am using this path: "/home/vgadmin/wazuh/wazuh-dashboard/plugins/" with dev.sh cmd

when I am using this path: "/home/vgadmin/wazuh/wazuh-dashboard/plugins/wazuh-dashboard-plugins"

[Prathamesh314]

You can help me in one way.

You try to run wazuh in development environment using docker from scratch and provide me the commands you executed.

[Tostti]

In the first image that you show, the environment is working as expected. That API screen is part of the Wazuh plugin, meaning that is being correctly read.

Regarding the API errors, I found the cause of the error, that was due to a wrong IP in the imposter configuration file. To solve it, open wazuh-dashboard-plugins/docker/imposter/wazuh-config.yml and replace

specFile: https://raw.githubusercontent.com/wazuh/wazuh/4.9.2/api/api/spec/spec.yaml

with

specFile: https://raw.githubusercontent.com/wazuh/wazuh/v4.9.2/api/api/spec/spec.yaml

(add a v before the Wazuh version). After that, you can start the imposter container again and it should work.

There's also the option to set a real manager (imposter is a mock of the API). To do that, you need to add server 4.9.2 at the end of the dev.sh call to bring up the environments. For example ./dev.sh $WZ_HOME up server 4.9.2.

I hope this solves your issue

[Prathamesh314]

thanks @Tostti . It worked.