Updating DataHub Logo in UI: Options for Deployment and Customization

ui
1

Original Slack Thread

<@U06TM7M40RK> How do i update datahub logo in the UI

2

To update the DataHub logo in the UI, you have several options depending on your deployment method and specific requirements. Here are the main approaches:

1. Using the datahub put platform --logo Command
You can use the datahub put platform --logo command to specify a logo URL for a platform. This URL will be fetched each time the logo is needed.

datahub put platform --name longtail_schemas --display_name "Long Tail Schemas" --logo "<https://flink.apache.org/img/logo/png/50/color_50.png>"

According to the <https://github.com/datahub-project/datahub/blob/master/docs/cli.md|DataHub CLI documentation>, the --logo parameter expects a URL that must be reachable from the DataHub UI.

2. Setting Environment Variables
You can set environment variables to customize the logo and favicon without rebuilding the assets. This method is useful for Kubernetes or Docker deployments.

Kubernetes Deployment
Set the REACT_APP_LOGO_URL environment variable in your values.yaml file:

datahub-gms:
  enabled: true
  image:
    repository: linkedin/datahub-gms
  extraEnvs:
    - name: REACT_APP_LOGO_URL
      value: "<https://your-logo-url.com/logo.png>"

Docker Deployment
Set the REACT_APP_LOGO_URL environment variable when running the Docker container:

docker run -d --name datahub-gms -e REACT_APP_LOGO_URL=<https://your-logo-url.com/logo.png> linkedin/datahub-gms

3. Modifying Source Code
For more extensive customizations, such as changing the logo on the login page, you may need to modify the source code directly. This involves forking the datahub-web-react repository and updating the relevant files.

Steps:

  1. Fork the Repository: Fork the datahub-web-react repository.
  2. Clone the Repository: Clone your forked repository to your local machine.
    git clone <https://github.com/your-username/datahub-web-react.git>
cd datahub-web-react
  3. Modify index.html: Update the index.html file inside datahub-web-react/public/ to point to your new logo file.
    &lt;link rel="icon" href="%PUBLIC_URL%/new-logo.png" /&gt;
  4. Add the New Logo File: Place your new logo file (e.g., new-logo.png) in the datahub-web-react/public/ directory.
  5. Build the React App: Build the modified React app.
    yarn install
yarn run build
  6. Deploy the Modified App: Deploy the modified React app. This will depend on your deployment method (e.g., Docker, Kubernetes).

Would you like more details on any of these steps?

Sources:

3

<@U06TM7M40RK>
Regarding topic 3 Modifying Source Code, is there other way to build an deploy to docker without using the yarn commands?
What about using docker-compose command to build and update the container?

4

Yes, you can build and deploy the modified DataHub UI using Docker and Docker Compose without directly using yarn commands. This approach involves creating a custom Docker image for the DataHub frontend with your changes and then updating your Docker Compose configuration to use this custom image.

Here are the steps to achieve this:

1. Modify the Source Code
First, make your changes to the source code as described earlier.

2. Create a Custom Dockerfile
Create a Dockerfile for the DataHub frontend that includes your changes. Here is an example:

# Use the official DataHub frontend image as the base
FROM acryldata/datahub-frontend-react:latest

# Set the working directory
WORKDIR /app

# Copy the modified source code into the container
COPY . /app

# Install dependencies and build the project
RUN yarn install && yarn run build

# Expose the port the app runs on
EXPOSE 9002

# Start the app
CMD ["yarn", "start"]

3. Build the Custom Docker Image
Build the Docker image using the docker build command:

docker build -t custom-datahub-frontend .

4. Update Docker Compose Configuration
Update your docker-compose.yml file to use the custom Docker image for the DataHub frontend service. Here is an example:

version: '3'
services:
  datahub-frontend:
    image: custom-datahub-frontend
    ports:
      - "9002:9002"
    environment:
      - REACT_APP_LOGO_URL=https://your-logo-url.com/logo.png
    depends_on:
      - datahub-gms

5. Deploy the Custom Docker Image
Deploy the custom Docker image using Docker Compose:

docker-compose up -d

This will start the DataHub frontend using your custom Docker image with the modified logo.

Would you like more detailed instructions or have specific questions about any of these steps?

Sources:

5

<@U06TM7M40RK>
My company’s laptop has security rules and does not allow to use “yarn install” and in dockerfile example the “yarn install” is also there, which will not work… Is there an alternative?

6

If your company’s security rules prevent the use of yarn install, you can pre-build the necessary assets on a machine where yarn is allowed and then copy those assets into your Docker image. This way, you avoid running yarn install within the Dockerfile itself.

Here are the steps to achieve this:

1. Pre-build the Assets
On a machine where yarn is allowed, clone the datahub-web-react repository and build the assets.

git clone https://github.com/your-username/datahub-web-react.git
cd datahub-web-react
yarn install
yarn run build

This will generate a build directory containing the compiled assets.

2. Create a Custom Dockerfile
Create a Dockerfile that copies the pre-built assets into the Docker image.

# Use the official DataHub frontend image as the base
FROM acryldata/datahub-frontend-react:latest

# Set the working directory
WORKDIR /app

# Copy the pre-built assets into the container
COPY build /app/build

# Expose the port the app runs on
EXPOSE 9002

# Start the app
CMD ["yarn", "start"]

3. Build the Custom Docker Image
Build the Docker image using the docker build command:

docker build -t custom-datahub-frontend .

4. Update Docker Compose Configuration
Update your docker-compose.yml file to use the custom Docker image for the DataHub frontend service. Here is an example:

version: '3'
services:
  datahub-frontend:
    image: custom-datahub-frontend
    ports:
      - "9002:9002"
    environment:
      - REACT_APP_LOGO_URL=https://your-logo-url.com/logo.png
    depends_on:
      - datahub-gms

5. Deploy the Custom Docker Image
Deploy the custom Docker image using Docker Compose:

docker-compose up -d

This will start the DataHub frontend using your custom Docker image with the modified logo.

Would you like more detailed instructions or have specific questions about any of these steps?

Sources:

7

<@U06TM7M40RK>
This is the error related to yarn install:
“There appears to be trouble with your network connection.
Retrying…”

I don’t have another way to run yarn install in another machine.
Is there a way to accomplish this (changing the source code and deploying it to docker) in an environment 100% offline?

8

If you need to build and deploy the DataHub frontend in an environment that is 100% offline and you cannot run yarn install due to network restrictions, you can use a multi-stage Docker build to pre-install the necessary dependencies on a machine with internet access and then transfer the built image to your offline environment. Here’s how you can achieve this:

1. Pre-build the Docker Image with Dependencies

On a machine with internet access, create a multi-stage Dockerfile that installs the dependencies and builds the assets.

# Stage 1: Build the assets
FROM node:14 AS builder

# Set the working directory
WORKDIR /app

# Copy the package.json and yarn.lock files
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install

# Copy the rest of the source code
COPY . .

# Build the assets
RUN yarn run build

# Stage 2: Create the final image
FROM acryldata/datahub-frontend-react:latest

# Set the working directory
WORKDIR /app

# Copy the built assets from the builder stage
COPY --from=builder /app/build /app/build

# Expose the port the app runs on
EXPOSE 9002

# Start the app
CMD ["yarn", "start"]

2. Build the Docker Image

Build the Docker image on the machine with internet access:

docker build -t custom-datahub-frontend .

3. Save the Docker Image

Save the Docker image to a tar file:

docker save -o custom-datahub-frontend.tar custom-datahub-frontend

4. Transfer the Docker Image to the Offline Environment

Transfer the custom-datahub-frontend.tar file to your offline environment using a USB drive or any other method available.

5. Load the Docker Image in the Offline Environment

Load the Docker image in your offline environment:

docker load -i custom-datahub-frontend.tar

6. Update Docker Compose Configuration

Update your docker-compose.yml file to use the custom Docker image for the DataHub frontend service. Here is an example:

version: '3'
services:
  datahub-frontend:
    image: custom-datahub-frontend
    ports:
      - "9002:9002"
    environment:
      - REACT_APP_LOGO_URL=<https://your-logo-url.com/logo.png>
    depends_on:
      - datahub-gms

7. Deploy the Custom Docker Image

Deploy the custom Docker image using Docker Compose:

docker-compose up -d

This process allows you to build the necessary assets on a machine with internet access and then transfer the built Docker image to your offline environment.

Would you like more detailed instructions or have specific questions about any of these steps?

Sources:

9

<@U06TM7M40RK>
As I said, I don’t have another machine, I can’t use usb ports or cloud platforms to share files and there’s tons of connectivity issues due to security rules…

Having said that, is it possible to change the UI source code, build a customised image and install it using only docker-compose?

10

Given the constraints of your environment, where you cannot use another machine, USB ports, or cloud platforms, and you face connectivity issues, the challenge is significant. However, you can still attempt to build a customized Docker image using only Docker Compose by leveraging local resources and ensuring all dependencies are pre-downloaded.

Here’s a step-by-step guide to achieve this:

1. Pre-download Dependencies
If you have intermittent internet access, you can pre-download all necessary dependencies and store them locally. This can be done by running yarn install in a directory with internet access and then copying the node_modules directory.

2. Create a Custom Dockerfile
Create a Dockerfile that uses the pre-downloaded dependencies.

# Use the official DataHub frontend image as the base
FROM acryldata/datahub-frontend-react:latest

# Set the working directory
WORKDIR /app

# Copy the pre-downloaded node_modules
COPY node_modules /app/node_modules

# Copy the rest of the source code
COPY . /app

# Build the assets
RUN yarn run build

# Expose the port the app runs on
EXPOSE 9002

# Start the app
CMD ["yarn", "start"]

3. Update Docker Compose Configuration
Update your docker-compose.yml file to use the custom Docker image for the DataHub frontend service. Here is an example:

version: '3'
services:
  datahub-frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "9002:9002"
    environment:
      - REACT_APP_LOGO_URL=https://your-logo-url.com/logo.png
    depends_on:
      - datahub-gms

4. Build and Deploy the Custom Docker Image
Use Docker Compose to build and deploy the custom Docker image:

docker-compose up --build -d

Detailed Steps:

  1. Pre-download Dependencies:

    • On a machine with intermittent internet access, run:
      yarn install
    • This will create a node_modules directory with all the dependencies.

  2. Copy the node_modules Directory:

    • Copy the node_modules directory to your project directory where the Dockerfile is located.

  3. Create the Dockerfile:

    • Create a Dockerfile in your project directory with the content provided above.

  4. Update docker-compose.yml:

    • Ensure your docker-compose.yml file is updated to build the custom Docker image.

  5. Build and Deploy:

    • Run the following command to build and deploy the custom Docker image:
      docker-compose up --build -d
11

This approach ensures that all dependencies are pre-downloaded and included in the Docker image, allowing you to build and deploy the customized DataHub frontend in an offline environment.

Would you like more detailed instructions or have specific questions about any of these steps?

Sources: