Patch Orient Me Container

Created:
Last Update:

Author: Christoph Stoettner
Read in about 5 min · 988 words

Container front

Photo by Wilhelm Gunkel | Unsplash

I wrote about font loading from external CDN in the post Hiding The Create Community Button 2nd last year and hoped this is finally fixed for all Connections applications. A good summary on the reasons to not allow external font loading is Blocking Web Fonts for Speed and Privacy .

So I checked with a Connections 7 deployment with the latest CFix (CFix.70.2112) deployed, if this is still an issue with Connections.

In former Connections’ versions we found external fonts loaded in Orient Me (/social), Communities Catalog (/communities) and the Admin panel (/cnxadmin/).

Orient Me and the Community catalog are loading fonts from Unpkg and the Admin Panel from fonts.gstatic.com.

There was a long discussion in the Connections Community Forum which ended with a comment of the Connections Product Management that this will be fixed in a future version.

In the meantime the font loading in Communities catalog is fixed, when the CATALOG_CARD_UPDATED=true, but Orient Me and Admin panel are still loading external fonts. That can be related to the fact that Component Pack didn’t get updates since May 2021. As I don’t want to wait any longer, I had a look if we can fix this on our own.

Orient Me is running as container, so it is not enough to edit a file, because this will be overwritten when the container is deleted and gets recreated from the default image.

Edit the pod

After some research, the easiest way to remove the external CDN from the Orient Me container is the following way:

kubectl get pods

...
orient-web-client-77dbff4d58-4h69x         1/1     Running   0  132m
...

Now we run a shell in the running Orient Me container (use the name you found with the command above, when you have multiple pods running, use one of them, but make a note of the name):

kubectl exec -it orient-web-client-77dbff4d58-4h69x -- sh

Some grep and find showed, that the only file we need to change for left-to-right languages is /home/ibm/app/public/dist/js/ic-orient-4a833568f93c16c17c7c5e29f6f073d6.css and /home/ibm/app/public/dist/js/ic-orient-4a833568f93c16c17c7c5e29f6f073d6.rtl.css for right-to-left.

Additionally I searched within the container and in the requests of my browser if I can find the used fonts on the system. I found that all IBM*.woff2 fonts are included in the Orient Me container, but also they are already used in several apps within Connections. The Communities catalog for example load them from https://<connections-host>/connections/ui/dist/.

Rewrite the font URL in the CSS file

I wanted to avoid massive changes in the container, so I decided to change the fonts URLs to this path. Run the following in the container shell you opened above:

sed -i 's#https://unpkg.com/carbon-components@latest/src/globals/#/connections/ui/dist/#g' /home/ibm/app/public/dist/js/ic-orient-4a833568f93c16c17c7c5e29f6f073d6.css
sed -i 's#https://unpkg.com/carbon-components@latest/src/globals/#/connections/ui/dist/#g' /home/ibm/app/public/dist/js/ic-orient-4a833568f93c16c17c7c5e29f6f073d6.rtl.css

Now when we open Orient Me (/social) it already loads the font directly from Connections, but this change is not persistent, it will be overwritten when you delete the Orient Me pod.

Make your patch persistent

I this should be run on the node where the Orient Me container you changed is running. To find it:

kubectl get pods -o wide

NAME                                  READY   STATUS    RESTARTS   AGE     IP               NODE                  NOMINATED NODE   READINESS GATES
...
orient-web-client-77dbff4d58-4h69x    1/1     Running   0          146m    192.168.68.210   cnx7-cp.stoeps.home   <none>           <none>
...

Find the Docker image

docker ps | grep orient-web-client-77dbff4d58-4h69x
4b1ed5bb12d6  fd0bb831f5e6            "docker-entrypoint.s…"   2 hours ago  Up 2 hours  k8s_orient-web-client_orient-web-client-77dbff4d58-4h69x_connections_f5b463e7-6c77-446a-92e0-56115765bcff_0
bcdd9ba8c2c6  k8s.gcr.io/pause:3.2    "/pause"                 2 hours ago  Up 2 hours  k8s_POD_orient-web-client-77dbff4d58-4h69x_connections_f5b463e7-6c77-446a-92e0-56115765bcff_0

Here we need the line with the docker-entrypoint command and copy the value from the first column (4b1ed5bb12d6)

Let’s check the used tag for our Orient Me image:

docker image ls | grep orient-web

cnx7-cp.stoeps.home:5000/connections/orient-web-client     20210426-155510          d4ce676e668e        3 hours ago         577MB

Here we see the registry URL: cnx7-cp.stoeps.home:5000, image name: connections/orient-web-client and tag: 20210426-155510. Now we can commit the change and write a new image with a different timestamp as tag. Use the container hash 4b1ed5bb12d6 from above to identify and tag the right image!

docker commit 4b1ed5bb12d cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700

Check the image names and tags

docker image ls | grep orient-web

cnx7-cp.stoeps.home:5000/connections/orient-web-client     20220114-151700          fd0bb831f5e6        3 hours ago         577MB
cnx7-cp.stoeps.home:5000/connections/orient-web-client     20210426-155510          d4ce676e668e        3 hours ago         577MB

Check the Entrypoint of old and new image

docker inspect --format='{{ .Config.Entrypoint }}' cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700
docker inspect --format='{{ .Config.Entrypoint }}' cnx7-cp.stoeps.home:5000/connections/orient-web-client:20210426-155510

This should return the same ENTRYPOINT! If not, go back to the commit step and use:

docker commit --change='ENTRYPOINT ["<Use return value of the inspect command here>"]' 4b1ed5bb12d cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700

Upload the image to the docker registry:

docker push cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-151700

Update deployment

Now we only need to update the deployment that it uses our new container image (always keep the old image, so you can revert back).

kubectl edit deployment orient-web-client

This opens a yaml with the configuration of the pod. Search for the line:

image: cnx7-cp.stoeps.home:5000/connections/orient-web-client:20210426-151700

and change it to

image: cnx7-cp.stoeps.home:5000/connections/orient-web-client:20220114-155510

Save and close the file (default uses vi, so :wq will save and close), this will restart all container in this deployment. Wait some seconds, check if Orient Me is running again, then you can test if the fonts are loaded from a local resource or unpkg.

Normally changing the deployment will restart all pods of the deployment. You can run the following command to restart Orient Me to be sure that it pulls the new image:

kubectl rollout restart deployment orient-web-client

Comment

In former talks I showed the advantages of containers. Building them automatically on a regular basis can help to get a more secure product. So even when you don’t want to build a container again (which should be a no-brainer with the right ci/cd pipelines), you can add the two lines of sed and one piece is fixed.

The book Hacking Kubernetes from Michael Hausenblas and Andrew Martin recommend rebuilding containers all 30 days. So I see forward when we get the next updates for Component Pack and until then I will change this on my own.

Author
Add a comment
Error
There was an error sending your comment, please try again.
Thank you!
Your comment has been submitted and will be published once it has been approved.

Your email address will not be published. Required fields are marked with *

Suggested Reading
Card image cap
HCL Support published a collection of links to MustGather informations for Connections and addons. That’s the perfect starting point to start troubleshooting and collecting logs for your support cases. Collecting Data: Repository of MustGather for Connections
Created: Read in about 1 min
Card image cap

Today I got the question of how to disable the highlights app in Connections 7. When you follow the documentation for Connections 6.0CR6 you get an error message (and the document is not available in Connections 7).

I commented out the widget definition in widgets-config.xml like described in the documentation for the former release.

Created: Read in about 2 min
Card image cap

During a troubleshooting session in Component Pack, I checked the Kubernetes events.

Created: Read in about 3 min