Customizing DataHub 1.0 UI for Ordering Elements on the Homepage in EKS Deployment

ui
1

Original Slack Thread

<@U06TM7M40RK> for datahub 1.0 new ui , how do we make changes to it like ordering of what appears on the home page. we have deployed it via EKS

2

To customize the DataHub UI, such as changing the order of elements on the homepage, you will need to modify the source code of the DataHub React application. Here are the general steps you can follow:

  1. Fork and Clone the Repository: You need to fork the datahub-web-react repository and clone it to your local machine. This will allow you to make changes to the UI components.

  2. Modify the Source Code:

    • Navigate to the relevant components in the datahub-web-react source code. The homepage layout is typically defined in specific React components.
    • You can reorder the components by modifying the JSX structure in the relevant files. This might involve changing the order of elements in the render method of the homepage component.

  3. Build the React App: After making your changes, you need to build the React application. This can be done using the following commands:

    yarn install
yarn run build

  4. Create a Custom Docker Image: Once you have built the application, you need to create a Docker image of your customized frontend. You can do this by using a Dockerfile to package your application.

  5. Deploy the Custom Image to EKS:

    • Push your custom Docker image to a container registry.
    • Update your Kubernetes deployment configuration in EKS to use your custom Docker image instead of the default DataHub frontend image.

  6. Test Your Changes: After deploying, verify that your changes are reflected in the UI by accessing the DataHub instance.

For more detailed guidance on building and deploying the DataHub frontend, you can refer to the <https://github.com/datahub-project/datahub/blob/master/docs/developers.md|DataHub Developer’s Guide> and the <https://github.com/datahub-project/datahub/blob/master/docker/datahub-frontend/README.md|DataHub Frontend Docker Image documentation>.

Would you like more detailed instructions on any of these steps?

Sources:

3

Hi <@U05LX5J582Z>, how did my answer work out for you? Need any more assistance? You can also tag <@U07FV3UHE4D> to let your fellow community members know you’re still looking for guidance.