Plugins and the Web Interface

Development
1

Hi there,

I’m new to Graylog Development and still trying to figure out the code-base and how everything ties together, but I’m struggling with getting a plugin to work while running in development mode with IntelliJ.

I have the server running in IntelliJ, and I also have the npm development web server running so I can make live-changes.

I’ve added a plugin (https://github.com/graylog-labs/graylog-plugin-threatintel) into IntellJ and I can see when I start the server that it loads the plugin:

2017-05-03 11:19:38,228 INFO : org.graylog2.bootstrap.CmdLineTool - Loaded plugin: Threat Intelligence Plugin 0.10.0 [org.graylog.plugins.threatintel.ThreatIntelPlugin]

However, I’m not sure how the plugin needs to integrate with the NPM webserver. Does it need to install files into the graylog2-server/graylog2-web-interface directory?

When I browse to the webserver, under System => Configurations, I can see some information about the newly added threat-intel plugin, but when I click on the “Configure” button, the browser throws a javascript exception:

vendor.js:39306 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ThreatIntelPluginConfig.
at invariant (vendor.js:39306)
at instantiateReactComponent (vendor.js:10840)
at instantiateChild (vendor.js:31297)
at traverseAllChildrenImpl (vendor.js:11154)

How can I tell that the browser is able to load the required code in order to render this plugin’s GUI?

Regards

Brad.

2

After some further research, I’ve discovered that the main webpack (in graylog2-server/graylog2-web-interface/webpack.combined.config.js) is responsible for loading in the GUI code of any plugins by looking for plugins in …/…/graylog-plugin-*/**/webpack.config.js, and I can actually see it being loaded when I run “npm start”:

chunk {59} ThreatIntelPlugin.js (ThreatIntelPlugin) 3.83 MB [entry] [rendered]
[…/…/graylog-plugin-threatintel/node_modules/graylog-web-plugin/plugin.js] /home/bradley/git/graylog-project-repos/graylog-plugin-threatintel/~/graylog-web-plugin/plugin.js 117 bytes {59} [built]
[…/…/graylog-plugin-threatintel/package.json] /home/bradley/git/graylog-project-repos/graylog-plugin-threatintel/package.json 492 bytes {59} [built]
[…/…/graylog-plugin-threatintel/src/web/index.jsx] /home/bradley/git/graylog-project-repos/graylog-plugin-threatintel/src/web/index.jsx 946 bytes {59} [built]
[./node_modules/strip-ansi/index.js] ./~/strip-ansi/index.js 161 bytes {54} {55} {56} {57} {58} {59} {60} {61} [built]
[./node_modules/url/url.js] ./~/url/url.js 23.3 kB {54} {55} {56} {57} {58} {59} {60} {61} [built]
[./node_modules/webpack-dev-server/client/index.js?http:/0.0.0.0:8081] (webpack)-dev-server/client?http://0.0.0.0:8081 5.44 kB {54} {55} {56} {57} {58} {59} {60} {61} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.6 kB {54} {55} {56} {57} {58} {59} {60} {61} [built]
[1] delegated ./node_modules/react/react.js from dll-reference __vendor 42 bytes {54} {55} {56} {57} {58} {59} {61} [not cacheable] [built]
[3] delegated ./node_modules/webpack/buildin/global.js from dll-reference __vendor 42 bytes {54} {55} {56} {57} {58} {59} {60} {61} [not cacheable] [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 856 bytes {54} {55} {56} {57} {58} {59} {60} {61} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.57 kB {54} {55} {56} {57} {58} {59} {60} {61} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {54} {55} {56} {57} {58} {59} {60} {61} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.02 kB {54} {55} {56} {57} {58} {59} {60} {61} [built]
[8] delegated ./node_modules/react-dom/index.js from dll-reference __vendor 42 bytes {54} {55} {56} {57} {58} {59} [not cacheable] [built]
[52] multi (webpack)-dev-server/client?http://0.0.0.0:8081 webpack/hot/dev-server /home/bradley/git/graylog-project-repos/graylog-plugin-threatintel/src/web 52 bytes {59} [built]

So can anyone explain why I’m getting the above Javascript exception?

vendor.js:39306 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ThreatIntelPluginConfig.
at invariant (vendor.js:39306)
at instantiateReactComponent (vendor.js:10840)
at instantiateChild (vendor.js:31297)
at traverseAllChildrenImpl (vendor.js:11154)

3

Hej Brad,

did you run graylog-server master?

We had made a few changes that might bring up some issues. But we will take a look at it, later on.

That is the only reason I can think of.

/jd

4

Hi Jan, thanks for getting back to me.

Yes I’m running master - I’ll try the 2.2 branch to see if that makes any difference.

Regards

Brad.

5

Did you change any of the code? According to this post, it says the name of the React Component was invalid and needed to be in CamelCase.

6

Hi Bill,

I’ve made no changes as yet - I’m just trying to get to grips with everything before I start on any changes.

I do, however, get these types of errors when starting npm:

ERROR in /home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web/pipelines/PipelineForm.jsx
Module not found: Error: Can't resolve 'react-bootstrap' in '/home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web/pipelines'
 @ /home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web/pipelines/PipelineForm.jsx 11:22-48
 @ /home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web/pipelines/PipelineDetails.jsx
 @ /home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web/pipelines/Pipeline.jsx
 @ /home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web/pipelines/PipelineDetailsPage.jsx
 @ /home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web/index.jsx
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8081 webpack/hot/dev-server /home/bradley/git/graylog-project-repos/graylog-plugin-pipeline-processor/plugin/src/web

They dont seem to be relevant tho, as everything else in the GUI seems to work just fine - the only thing I’m having a problem with is the “Configure” button for the ThreatIntel plugin.

I dont think this is a capitlisation / CamelCase issue. The code which defines the render class looks like this:

const ThreatIntelPluginConfig = React.createClass({
...
    render() {
        return (
            <div>...</div>
        );
    },
...
});
export default ThreatIntelPluginConfig;
7

After checking out 2.2 instead of master, then this plugin seems to be working just fine so I’ll develop from the 2.2 branch, as master seems to be in a state of flux at the moment.

Thanks for all who responded!

Regards

Brad.