Missing icons on Cockpit 277-1

Question

Missing icons on Cockpit 277-1

luispabon opened this issue 2 years ago · comments

I'm running Cockpit from Ubuntu 22.04's repositories. The normal repositories package Cockpit 264-1, and this issue is not present there.

Upon upgrading to the version available in backports (277-1), as per Cockpit's website recommendation, icons disappeared on the ZFS manager:

Table headers also look weirdly styled. In general this looks to be some sort of CSS problem.

Happens on Firefox 109 and Chromium 108.

Luis Pabon · Answer 1 · Mon Dec 26 2022 21:58:30 GMT+0800 (China Standard Time)

Looks like some fonts are failing to load:

When I try to manually open fontawesome on the browser:

MSommer95 · Answer 2 · Fri Jan 06 2023 01:48:57 GMT+0800 (China Standard Time)

Same problem here.
Running Ubuntu 22.04 LTS and cockpit 282.

Jon West · Answer 3 · Sat Jan 07 2023 01:53:02 GMT+0800 (China Standard Time)

Same problem here as well

h4fn1x · Answer 4 · Sun Jan 29 2023 01:14:55 GMT+0800 (China Standard Time)

I am using Cockpit 283-1 and have (had) the same problem. But I found a quick and dirty fix: I just copied /usr/share/cockpit/base1/fonts/ from an old Cockpit-Installation (239-1) to the new one and after a page-reload the icons are properly displayed again.

# ls -l /usr/share/cockpit/base1/fonts/
total 150
-rw-r--r-- 1 root root 98024 Mar  3  2021 fontawesome.woff
-rw-r--r-- 1 root root 23424 Mar  3  2021 glyphicons.woff
-rw-r--r-- 1 root root 38952 Mar  3  2021 patternfly.woff

Luis Pabon · Answer 5 · Sun Jan 29 2023 05:15:55 GMT+0800 (China Standard Time)

Thank you, that workaround does work for me as well.

RolfWojtech · Answer 6 · Fri Feb 03 2023 18:32:08 GMT+0800 (China Standard Time)

We also have an affected system, the workaround from h4fn1x worked for me as well.

In order to help with a proper fix, I did narrow down when these woff files were removed, it was between 272 (last version to have them) and 273 (removed).
Some further digging lead to this commit:
cockpit-project/cockpit@e4b963b
My understanding of how this font handling is supposed to work is too limited at this point to say what a fix would look like. Or is the expectation that these fonts are provided by the OS somehow? In that case, it might be more of a packaging question.

Just in case it makes a difference, here are the machine and package infos.

OS: Debian bullseye
Cockpit: 284 from bullseye backports and the cockpit plugins from 45drives.com

apt-cache policy cockpit
cockpit:
  Installed: 284-1~bpo11+1
  Candidate: 284-1~bpo11+1
  Version table:
 *** 284-1~bpo11+1 100
        100 http://deb.debian.org/debian bullseye-backports/main amd64 Packages
        100 /var/lib/dpkg/status
     250.1.1-1 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages
     239-1 500
        500 http://ftp.debian.org/debian bullseye/main amd64 Packages
     237.2-1focal 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages
     237.1-1focal 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages

cockpit-zfs-manager:
  Installed: 1.3.0-3focal
  Candidate: 1.3.0-3focal
  Version table:
 *** 1.3.0-3focal 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages
        100 /var/lib/dpkg/status
     1.3.0-2focal 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages
     1.2.3focal-3 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages
     1.2.2-1focal 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages
     1.2.1focal-2 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages
     1.2.0focal-1 500
        500 http://repo.45drives.com/debian focal/main amd64 Packages

Luis Pabon · Answer 7 · Fri Feb 03 2023 18:51:43 GMT+0800 (China Standard Time)

The workaround doesn't quite fix all though:

The headers on the dataset list table as you can see don't look right - perhaps some of the styles gone on the commit @RolfWojtech unearthed

Zach Tsao · Answer 8 · Wed May 24 2023 15:35:11 GMT+0800 (China Standard Time)

I am using Cockpit 283-1 and have (had) the same problem. But I found a quick and dirty fix: I just copied /usr/share/cockpit/base1/fonts/ from an old Cockpit-Installation (239-1) to the new one and after a page-reload the icons are properly displayed again.
# ls -l /usr/share/cockpit/base1/fonts/
total 150
-rw-r--r-- 1 root root 98024 Mar  3  2021 fontawesome.woff
-rw-r--r-- 1 root root 23424 Mar  3  2021 glyphicons.woff
-rw-r--r-- 1 root root 38952 Mar  3  2021 patternfly.woff

Hi h4fn1x, I'm using Cockpit 287-1~bpo11+1, but I didn't see the fonts folder under /usr/share/cockpit/base1 (as shown below),

root@pve:/usr/share/cockpit/base1# ls -l
total 104
-rw-r--r-- 1 root root 16324 Apr 15 15:26 cockpit.js.gz
-rw-r--r-- 1 root root   139 Apr 15 15:26 manifest.json
-rw-r--r-- 1 root root  1115 Apr 15 15:26 po.cs.js.gz
-rw-r--r-- 1 root root  1005 Apr 15 15:26 po.de.js.gz
-rw-r--r-- 1 root root   990 Apr 15 15:26 po.es.js.gz
-rw-r--r-- 1 root root  1002 Apr 15 15:26 po.fi.js.gz
-rw-r--r-- 1 root root  1007 Apr 15 15:26 po.fr.js.gz
-rw-r--r-- 1 root root  1103 Apr 15 15:26 po.he.js.gz
-rw-r--r-- 1 root root   959 Apr 15 15:26 po.it.js.gz
-rw-r--r-- 1 root root  1161 Apr 15 15:26 po.ja.js.gz
-rw-r--r-- 1 root root  1242 Apr 15 15:26 po.ka.js.gz
-rw-r--r-- 1 root root  1119 Apr 15 15:26 po.ko.js.gz
-rw-r--r-- 1 root root   925 Apr 15 15:26 po.nb_NO.js.gz
-rw-r--r-- 1 root root   935 Apr 15 15:26 po.nl.js.gz
-rw-r--r-- 1 root root  1112 Apr 15 15:26 po.pl.js.gz
-rw-r--r-- 1 root root  1003 Apr 15 15:26 po.pt_BR.js.gz
-rw-r--r-- 1 root root  1351 Apr 15 15:26 po.ru.js.gz
-rw-r--r-- 1 root root  1038 Apr 15 15:26 po.sk.js.gz
-rw-r--r-- 1 root root   944 Apr 15 15:26 po.sv.js.gz
-rw-r--r-- 1 root root  1021 Apr 15 15:26 po.tr.js.gz
-rw-r--r-- 1 root root  1422 Apr 15 15:26 po.uk.js.gz
-rw-r--r-- 1 root root  1074 Apr 15 15:26 po.zh_CN.js.gz
-rw-r--r-- 1 root root  1033 Apr 15 15:26 po.zh_TW.js.gz

nor in the package of version 239 (as shown below).

 Directory of C:\Users\user\Desktop\cockpit-239\pkg\base1

05/24/2023  03:24 PM    <DIR>          .
05/24/2023  03:24 PM    <DIR>          ..
03/03/2021  11:37 PM           148,793 cockpit.js
03/03/2021  11:37 PM               139 manifest.json
03/03/2021  11:37 PM             2,023 test-base64.js
03/03/2021  11:37 PM             4,396 test-browser-storage.js
03/03/2021  11:37 PM             3,000 test-cache.js
03/03/2021  11:37 PM            28,946 test-chan.js
03/03/2021  11:37 PM               592 test-dbus-address.js
03/03/2021  11:37 PM            56,426 test-dbus-common.js
03/03/2021  11:37 PM             3,098 test-dbus-framed.js
03/03/2021  11:37 PM            29,488 test-dbus.js
03/03/2021  11:37 PM             3,465 test-echo.js
03/03/2021  11:37 PM             1,413 test-events.js
03/03/2021  11:37 PM             3,921 test-external.js
03/03/2021  11:37 PM            18,246 test-file.js
03/03/2021  11:37 PM             6,329 test-format.js
03/03/2021  11:37 PM             2,883 test-framed-cache.js
03/03/2021  11:37 PM             3,438 test-framed.js
03/03/2021  11:37 PM            14,627 test-http.js
03/03/2021  11:37 PM             7,797 test-journal-renderer.js
03/03/2021  11:37 PM            10,459 test-locale.js
03/03/2021  11:37 PM             8,869 test-location.js
03/03/2021  11:37 PM             3,297 test-metrics.js
03/03/2021  11:37 PM             1,080 test-no-jquery.js
03/03/2021  11:37 PM             1,927 test-permissions.js
03/03/2021  11:37 PM               496 test-promise.js
03/03/2021  11:37 PM             3,546 test-protocol.js
03/03/2021  11:37 PM            15,419 test-series.js
03/03/2021  11:37 PM             9,445 test-spawn-proc.js
03/03/2021  11:37 PM            12,246 test-spawn.js
03/03/2021  11:37 PM             2,576 test-user.js
03/03/2021  11:37 PM             4,712 test-utf8.js
03/03/2021  11:37 PM             2,474 test-websocket.js
              32 File(s)        415,566 bytes
               2 Dir(s)  146,528,526,336 bytes free

Any further detailed advise would be appreciated!

benito · Answer 9 · Wed Aug 02 2023 14:59:37 GMT+0800 (China Standard Time)

I am using Cockpit 283-1 and have (had) the same problem. But I found a quick and dirty fix: I just copied /usr/share/cockpit/base1/fonts/ from an old Cockpit-Installation (239-1) to the new one and after a page-reload the icons are properly displayed again.
# ls -l /usr/share/cockpit/base1/fonts/
total 150
-rw-r--r-- 1 root root 98024 Mar  3  2021 fontawesome.woff
-rw-r--r-- 1 root root 23424 Mar  3  2021 glyphicons.woff
-rw-r--r-- 1 root root 38952 Mar  3  2021 patternfly.woff

I wasn't able to locate the cockpit version with the fonts, had to download them and put them in this directory and it works 👍

leaving the links here:

https://github.com/h5p/font-awesome/blob/master/fontawesome-webfont.woff
https://github.com/twbs/bootstrap-sass/blob/master/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
https://github.com/patternfly/patternfly-sass/blob/master/assets/fonts/patternfly/PatternFlyIcons-webfont.woff

tcouey · Answer 10 · Wed Aug 09 2023 07:07:58 GMT+0800 (China Standard Time)

I downloaded the fonts and renamed them according to above and it still doesn't work. I restarted cockpit, is there anything else I need to do?

Seeing stuff like this in the dev console:

benito · Answer 11 · Wed Aug 09 2023 11:07:16 GMT+0800 (China Standard Time)

@tcouey nothing else, make sure that the fonts are in here:

ls -l /usr/share/cockpit/base1/fonts/

I only tried in ubuntu 22.10
oh also you might need to clear cache in the browser?

tcouey · Answer 12 · Fri Aug 11 2023 08:33:54 GMT+0800 (China Standard Time)

Yeah, the fonts definitely don't work in RHEL 9.2 (Cockpit 286.2).

h1ght · Answer 13 · Sat Aug 26 2023 05:37:04 GMT+0800 (China Standard Time)

grabbed the fonts, working on debian 12, cockpit 299 correctly.
only thing, on my system some other fonts missing, cant find where they should be displayed. but idk.

nice poolsize
@tcouey
did u created fonts directory? on debian there isnt any fonts directory in base1 folder. had to create it, copied & renamed it. no problem.

tcouey · Answer 14 · Sat Aug 26 2023 09:18:44 GMT+0800 (China Standard Time)

@h1ght : Here's what I'm trying:

[root@astra fonts]# pwd
/usr/share/cockpit/base1/fonts
[root@astra fonts]# wget https://github.com/h5p/font-awesome/blob/master/fontawesome-webfont.woff
[root@astra fonts]# mv fontawesome-webfont.woff fontawesome.woff
[root@astra fonts]# wget https://github.com/twbs/bootstrap-sass/blob/master/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
[root@astra fonts]# mv glyphicons-halflings-regular.woff glyphicons.woff
[root@astra fonts]# wget https://github.com/patternfly/patternfly-sass/blob/master/assets/fonts/patternfly/PatternFlyIcons-webfont.woff
[root@astra fonts]# mv PatternFlyIcons-webfont.woff patternfly.woff
[root@astra fonts]# ls -l
total 32
-rw-r--r--. 1 root root  4610 Aug 25 15:11 fontawesome.woff
-rw-r--r--. 1 root root  6547 Aug 25 15:12 glyphicons.woff
-rw-r--r--. 1 root root 13735 Aug 25 15:12 patternfly.woff
[root@astra fonts]# systemctl restart cockpit.service

This isn't doing anything. Did I miss something?

MSommer95 · Answer 15 · Sat Aug 26 2023 16:14:52 GMT+0800 (China Standard Time)

grabbed the fonts, working on debian 12, cockpit 299 correctly. only thing, on my system some other fonts missing, cant find where they should be displayed. but idk.

nice poolsize @tcouey did u created fonts directory? on debian there isnt any fonts directory in base1 folder. had to create it, copied & renamed it. no problem.

I am on Ubuntu 22.04 but there was no fonts directory for me either so I created it.
Moved the fonts into that directory making sure they are named correctly and the permissions fit.

Did the same for the apparently missing OpenSans-Semibold-webfont.woff in the directory /usr/share/cockpit/static/fonts:
https://github.com/braintree/braintree_slim_example/blob/main/static/fonts/open-sans/OpenSans-Semibold-webfont.woff

Also copied the RedHat* fonts from /usr/share/cockpit/static/fonts into the directories:
/usr/share/cockpit/zfs/assets/fonts/RedHatDisplay
/usr/share/cockpit/zfs/assets/fonts/RedHatText
Renamed them from *.woff2 to *.woff

tcouey · Answer 16 · Mon Aug 28 2023 06:01:55 GMT+0800 (China Standard Time)

@MSommer95 Thanks for the info. Tried that too, still no-go. I suspect this is a RHEL 9 problem. I'll keep looking into it though.

tcouey · Answer 17 · Mon Aug 28 2023 06:50:11 GMT+0800 (China Standard Time)

Okay, I got it figured out. After getting everything in the right places with the right names I was seeing errors in the console about the downloadable fonts being "rejected by sanitizer." So here's how I fixed that: I re-downloaded the fonts with a browser. Lesson here: DO NOT USE wget to download fonts. The "[text/plain]" tag should've clued me in sooner, but eh... live and learn.

There's probably a way to get wget to save them as binary files, but I didn't want to waste any more time on this. Thanks for everyone's help.

Faustino Aguilar · Answer 18 · Wed Aug 30 2023 17:50:50 GMT+0800 (China Standard Time)

Just copy and paste this in your terminal as workaround:

sudo wget -O /usr/share/cockpit/base1/fonts/fontawesome.woff https://github.com/h5p/font-awesome/raw/master/fontawesome-webfont.woff 
sudo wget -O /usr/share/cockpit/base1/fonts/glyphicons.woff https://github.com/twbs/bootstrap-sass/raw/master/assets/fonts/bootstrap/glyphicons-halflings-regular.woff 
sudo wget -O /usr/share/cockpit/base1/fonts/patternfly.woff https://github.com/patternfly/patternfly-sass/raw/master/assets/fonts/patternfly/PatternFlyIcons-webfont.woff
sudo wget -P /usr/share/cockpit/static/fonts https://github.com/braintree/braintree_slim_example/raw/main/static/fonts/open-sans/OpenSans-Semibold-webfont.woff
sudo mkdir -p /usr/share/cockpit/zfs/assets/fonts/RedHatDisplay/
sudo cp -v /usr/share/cockpit/static/fonts/*Display*.woff2 /usr/share/cockpit/zfs/assets/fonts/RedHatDisplay/
for f in /usr/share/cockpit/zfs/assets/fonts/RedHatDisplay/*; do sudo mv -v -- "$f" "${f%.woff2}.woff"; done
sudo mkdir -p /usr/share/cockpit/zfs/assets/fonts/RedHatText/
sudo cp -v /usr/share/cockpit/static/fonts/*Text*.woff2 /usr/share/cockpit/zfs/assets/fonts/RedHatText/
for f in /usr/share/cockpit/zfs/assets/fonts/RedHatText/*; do sudo mv -v -- "$f" "${f%.woff2}.woff"; done
sudo systemctl restart cockpit