Class assigned to table items in quick values and possibly dashboards not unique

Development
1

Hi All,

I noticed that the class names assigned to element of table within a quick value chart are not unique.

Graylog Version 2.4.6

How to reproduce.
Create a quick value chart from some data field in the search menu.

If you examine the html , you can see that all table elements are assigned a non uniqiue class=“datatable-badge” as shown below.

table1
table1.JPG1591×482 82.7 KB

Whereas if you look at the pie or stacked charts they have multiple classes assigned to them for example

class=“pie-slice _0” to “pie-slice _9” for each data segment see below.

pie1
pie1.JPG1597×462 97.2 KB

The goal I wanted to achieve was to change the default system colors used by dc.js and d3.js within graylog.

First Attempt
At first, I looked in D3Utils.js in graylog2-web-interface/src/util/D3Util.js where it sets the colors palette, so I changed the palette and build graylog but still had the original colours within the charts. I also checked the source for any other hard coded references but could not find anything obvious.

Second Attempt
So I decided to try to modify the css in the main css file but came across the problem described above. The code for producing the tags is in QuickValue.Vizualization.jsx as shown below:-

image
image.png1302×175 29.2 KB

So I have two questions:-

  1. Why does modifying the D3Utils.js file not change the color palette as it is imported in QuickVizualizations.jsx and other places ?
  2. How would you modify the source code for Quick Vizualiztions added an extra classs in the form of class=“datatable-badge _0” to class=“datatable-badge _9” in the same way as the pie chart and stacked charts.

I will look again at the pie chart code to see if I can see where this is done or is this a bug / flaw?

Any help appreciated

Jake

2

Hi Jake,

CSS classes are not supposed to be unique, so that shouldn’t be a problem.

You were on the right track on your first attempt: D3Util.js is where Graylog defines the D3 palette that is used in visualisations, and the file you should change to customise those colours.

I will assume that you correctly rebuilt Graylog, restarted the server, and there wasn’t any cache issue, since those are the most likely scenarios that you probably already ruled out. You mentioned that you rebuilt Graylog after the change. Are you by any chance also using any web plugins? If yes, you need to compile them as well, since they include some common code and may load the old colour palette with them, causing the issue you see. You can also quickly try removing all your plugins, restarting the server, and see if the new colour palette is used.

You don’t need to change the code of QuickValuesVisualization.jsx, since that is not setting any colours. It simply picks the colours D3 set for each slice in the pie chart and copies them to the data table badges. Once your palette changes, the colours in the data table will change as well.

Hope that helps.

Cheers,
Edmundo

3

Hi Edmundo,

Here was my basic basic workflow.

  1. Made changes to D3utils.js in source to change colour palette and saved file.
  2. ran ‘mvn clean’ in top level directory to clear out previous builds.
  3. ran ‘mvn package’ to build jar file and moved graylog shaeded jar file to graylog server from dev box.
  4. Stopped graylog service on server
  5. Moved jar file to /usr/share/graylog-server/graylog.jar
  6. Restarted graylog server with systemctl

I noticed that the colous had not changed. Did I do something wrong?

Cheers

Jake

4

It looks good but, as I said, you need to ensure there are no web plugins running in that Graylog, or to re-compile them after the change. You can check in your System -> Nodes -> _Node_ -> Installed plugins section to see if there are some plugins running on that node.

5

Hi Edmundo,

I ran a test like this to be sure it was not something I did.

I cloned the branch from the source only changing the D3Utils.js color palette and compiled successfully.

I still have the default color palette, so I checked my plugins as shown below

image
image.png1696×461 62.9 KB

How do I tell which ones are web plugins that need recompiling? Can you point me to some documentation or is it similar process to building graylog?

Cheers

Jake

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.