[Heartbeat] Missing some i18n fonts in heartbeat docker image

[andrewvc]

We've had reports that some characters (Korean) don't show up when using synthetics via the docker image (heartbeat and agent-complete). The most likely cause is missing fonts. We should add as many fonts as we can (within reason) and validate that we can visit sites in various languages we don't now test in (Korean, Arabic, etc.)

[elasticmachine]

Pinging @elastic/uptime (Team:Uptime)

[lucasfcosta]

I believe that changing the underlying container image will be enough to solve this problem.

⚠️ EDIT: As you can see below there are actually characters which still haven't shown after the image update.

Please notice that for the new container image to work with synthetics we need to merge elastic/synthetics#441, which relates to the problem of not being able to execute the runner on the new image (as referenced in #29681).

Testing procedure

I tested websites in various languages, including:

• Korean
• Chinese
• Russian
• Arabic

To do that, here's the procedure I've followed:

⚠️ Pre-requisite: you must have the Elastic stack running before following the steps below. For that, you must use elastic-package stack up.

1. I created browser monitors which would visit websites of different languages. Here are the configs showing which websites I've chosen.

   heartbeat.monitors:
   - type: browser
     id: korean-characters
     name: korean_characters_test
     schedule: '@every 1m'
     source:
       inline:
         script: |-
           step("first", async () => {
             await page.goto('https://www.naver.com/');
           });
   - type: browser
     id: chinese-characters
     name: chinese_characters_test
     schedule: '@every 1m'
     source:
       inline:
         script: |-
           step("first", async () => {
             await page.goto('https://baike.baidu.com/');
           });
   - type: browser
     id: russian-characters
     name: russian_characters_test
     schedule: '@every 1m'
     source:
       inline:
         script: |-
           step("first", async () => {
             await page.goto('https://yandex.ru/');
           });
   - type: browser
     id: arabic-characters
     name: arabic_characters_test
     schedule: '@every 1m'
     source:
       inline:
         script: |-
           step("first", async () => {
             await page.goto('https://www.bbc.com/arabic');
           });

2. In the output section of my Heartbeat file, I used the elasticsearch hostname, given I'll be connecting my Heartbeat instance in Heartbeat's container to the elasticsearch container within the same docker network.

   output.elasticsearch:
     hosts: ["http://elasticsearch:9200"]
     username: "elastic"
     password: "changeme"

3. I checked out the correct branch for the Synthetics runner so that I have the fix in Stop runner from hanging indefinitely within ubuntu docker images [elastic/beats#29681] synthetics#441.
4. I've built the new Heartbeat image. For that, I've run env PLATFORMS="+all linux/amd64" mage package within the x-pack/heartbeat folder. This command creates a local Heartbeat image tagged as 8.1.0.
5. I ran a container using the following script:

   #!/bin/bash
   docker run \
     -it \
     -u 0 \
     --entrypoint=/bin/bash \
     --rm \
     --name=heartbeat \
     --user=heartbeat \
     --volume="/tmp/your_heartbeat_config_from_previous_steps.yml:/usr/share/heartbeat/heartbeat.yml:ro" \
     --volume="/Users/lucasfcosta/Repositories/synthetics:/usr/share/synthetics" \
     --network="elastic-package-stack_default" \
     docker.elastic.co/beats/heartbeat:8.1.0
   

   This script will:
   • Override the container's entry point so that you're put straight into an interactive bash session
   • Make sure you're user 0, so that you have permissions to run heartbeat from that bash session
   • Mount a volume with your Heartbeat configuration from the previous steps
   • Mount a volume with your own synthetics repository
   • Use the elastic-package-stack_default network, which is the same network elastic-package stack uses, so that Heartbeat can connect to the elasticsearch container.
6. Once within the container, cd into /usr/share/synthetics, run npm ci to install the Ubuntu dependencies for the Synthetics package. Then, run npm link to link your own synthetics package as the synthetics executable.
7. Run ELASTIC_SYNTHETICS_CAPABLE=true heartbeat -c /usr/share/heartbeat/heartbeat.yml to start Heartbeat
8. In Kibana, you'll see the Heartbeat instance in the container sending the screenshots for those websites you configured.

Images from the websites tested

[lucasfcosta]

⭐ I have now also tested the flow above on the elastic-agent itself and it worked fine ✅

How to run tests on elastic-agent

⚠️ Pre-requisite: you must have the Elastic stack running before following the steps below. For that, you must use elastic-package stack up.

1. Create a new policy and then add the following inline monitors to it.

   step("first", async () => {
     await page.goto('https://www.naver.com/');
   });
   ```js
   step("first", async () => {
     await page.goto('https://baike.baidu.com/');
   });

   step("first", async () => {
     await page.goto('https://yandex.ru/');
   });

   step("first", async () => {
     await page.goto('https://www.bbc.com/arabic');
   });

2. Check out the correct branch for the Synthetics runner so that I have the fix in Stop runner from hanging indefinitely within ubuntu docker images [elastic/beats#29681] synthetics#441.
3. Build the new elastic-agent image. For that, run env PLATFORMS="+all linux/amd64" mage dev:package within the x-pack/heartbeat folder. This command creates a local elastic-agent-complete image tagged as 8.1.0.
4. Run a container using the following script:

   docker run \
     -it \
     --entrypoint=/bin/bash \
     --rm \
     --name=elastic-agent \
     --user=elastic-agent \
     --volume="/Users/lucasfcosta/Repositories/synthetics:/usr/share/synthetics" \
     --network="elastic-package-stack_default" \
     -p 9229:9229 \
     docker.elastic.co/beats/elastic-agent-complete:8.1.0
   

   This script will:
   • Override the container's entry point so that you're put straight into an interactive bash session
   • Mount a volume with your own synthetics repository
   • Use the elastic-package-stack_default network, which is the same network elastic-package stack uses, so that elastic-agent can connect to the fleet server container in your stack.
5. Once within the container, cd into /usr/share/synthetics, run npm ci to install the Ubuntu dependencies for the Synthetics package. Then, run npm link to link your own synthetics package as the synthetics executable.
6. In your policy settings, click "Add agent" and copy the url and enrollment-token params. You'll use those in your container to enroll the elastic-agent.

   elastic-agent enroll --insecure --url=http://fleet-server:8220 --enrollment-token=POLICY_TOKEN_HERE
   

7. Start the agent with elastic-agent & and you'll see it will connect to your fleet server and start running your monitors.