Repair Administration Panel of Connections 7 for Chromium-based Browsers

Connections 7 has a new Administration Console to access Communities Template administration and Mobile Administration.

The Administration Console can be reached on https://cnx-hostname/cnxadmin/. The / at the end is important, because the ingress rule just forwards /cnxadmin/(.*).

On Firefox you get this view:

With Chrome (Chromium, Edge) the left menu is missing. There is a display: inline-flex for some elements in index.css of the Administration Console.

So how can we inject a repaired css file into the container?

ConfigMap

One quick and dirty way is to use a configMap with the adjusted stylesheet. So I did the following:

.Get the pod name of the admin-portal deployment

ADMIN_PORTAL=$(kubectl get pod -l app=admin-portal -o custom-columns=:metadata.name --no-headers)
echo $ADMIN_PORTAL
admin-portal-7f774c77f9-b8nxw

.Copy index.css to your machine

kubectl cp $ADMIN_PORTAL::/usr/share/nginx/html/css/index.css index.css

.Change css and replace inline-flex with flex

sed -i -e 's/inline-flex/flex/g' index.css

.Create ConfigMap

kubectl create configmap cnxadmin-fix --from-file=index.css

Now we have to mount the configmap into the admin-portal deployment to make this change permanent.

kubectl edit deployment admin-portal -n connections

.Search for volumes and add the ConfigMap

      volumes:
      - name: redis-secret-vol
        secret:
          defaultMode: 420
          secretName: redis-secret
      - configMap:		# Add this and the next 3 lines after the redis-secret
          defaultMode: 420
          name: cnxadmin-fix
        name: cnxadmin-fix

Keep the file open and search for volumeMounts

        volumeMounts:
        - mountPath: /etc/redis/redis-secret
          name: redis-secret-vol
        - mountPath: /usr/share/nginx/html/css # Mount the configmap to the original path
          name: cnxadmin-fix

Now save the file and the pod will restart automatically. This will fix the menu problem with Chromiumbased browsers, the menu is visible, but still little bit too high. Feel free to fix this too.

One more issue with the Administration Console - Aha Idea

The Administration Console loads css and fonts from external urls.

<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

That’s an issue in some environments and I think it is better and more secure to have all elements of On-Premises Connections on the Connections servers. I added a AHA Idea to get this fixed.