CSS broken

Icinga Web 2
1

The CSS on my Icingaweb2 is borken. When I open the css file: /icingaweb2/css/icinga.min.css I get:

Fatal error: Uncaught Exception: variable @gray-ligher is undefined: failed atbackground: @gray-ligher;line: 6531 in /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php:3553 Stack trace: #0 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php(2097): lessc_parser->throwError('variable @gray-...', 206021) #1 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php(1852): lessc->throwError('variable @gray-...') #2 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php(1475): lessc->get('@gray-ligher') #3 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php(686): lessc->reduce(Array) #4 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php(283): lessc->compileProp(Array, Object(stdClass), Object(stdClass)) #5 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php(221): lessc->compileProps(Object(stdClass), Object(stdClass)) #6 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php(195): lessc->compileCSSBlock(Object(stdClass)) #7 /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc. in /usr/share/icingaweb2/library/vendor/lessphp/lessc.inc.php on line 3553

Icinga Web 2 Version
2.7.1
Git commit
b0bf9c4b0637f6113adb788e78c2bcf619225dd8
PHP Version
7.2.19-0ubuntu0.18.04.2
Git commit date
2019-08-14

What I tried to fix it:
upgrade ubuntu 16.04 to 18.04
removed Icingaweb2 and reinstalled it

How to fix this problem?

2

Hi,

are you using a custom theme? Please also show the enabled modules.

Cheers,
Michael

3

The modules:
director
doc
monitoring
migrate
setup
test
translation

4

And I’m using the default theme: icinga (default)

5

Sounds like you might have residual PHP configurations.
Try to clean up as PHP installation as best as you can and give it another try.

Cheers,
George

6

Ok, maybe @nilmerg knows more about it.

7

I removed and reinstalled php and icingaweb2 but that didn’t fix the issue. After rereading the error I started to look for the variable: @gray-ligher and found it on line 1205 of: modules/director/public/css/module.less (director version 1.1.0) It looks like a type and probably should be: @gray-lighter. After that the problem was solved.

Why should the css break on one missing variable? (it was running fine before).

And how would I get notified by updates of modules?

8

Director 1.1.0 is fairly old, I would suggest upgrading to 1.6.2 (latest stable). CSS may break on that variable since it doesn’t exist in Icinga Web anymore. In the background, all framework and modules CSS are compiled with less and then shipped to the browser, for performance reasons.

Module updates are not automatically pushed into the web framework at the moment. The best is to follow our blog at https://icinga.com/blog and subscribe to releases. Or you’ll go along with social media, e.g. https://twitter.com/icinga

Cheers,
Michael

9

I installed the newest version of director and everything is working.