Plugin development - UI navigation bar

Development
1

Hello everyone!

I’ve a question that concern the adding of a navbar button via a plugin. I read some source code of other plugins but my code doesn’t work: no error with mvn package but the .jar doesn’t show my new button when I add it to my plugin/ folder.

I thought it was just the index.jsx file to change. Here my folder architecture (taken from https://github.com/Graylog2/graylog-plugin-sample):

Capture

And here the content of my index.jsx:

import webpackEntry from 'webpack-entry';

import { PluginManifest, PluginStore } from 'graylog-web-plugin/plugin';

import packageJson from '../../package.json';

import LocalDoc from 'documentation/LocalDoc';

const manifest = new PluginManifest(packageJson, {
  /* This is the place where you define which entities you are providing to the web interface.
     Right now you can add routes and navigation elements to it.

     Examples: */

  // Adding a route to /sample, rendering YourReactComponent when called:

  routes: [
   { path: '/localdoc', component: LocalDoc},
  ],

  // Adding an element to the top navigation pointing to /sample named "Sample":

  navigation: [
   { path: '/localdoc', description: 'Documentation' },
  ]
});

PluginStore.register(manifest);

if (module.hot) {
  module.hot.accept();
  module.hot.dispose(() => PluginStore.unregister(manifest));
}

And then the content of documentation/LocalDoc.jsx:

import React from 'react';

import { Row, Col } from 'react-bootstrap';

import { PageHeader } from 'components/common';

const LocalDoc = React.createClass({
  render() {
    return (
      <PageHeader title="Sample Plugin">
        <span>
          Hello from the Sample plugin!
        </span>
      </PageHeader>
    );
  }
});

export default LocalDoc;

My goal is just to expose a new button in a navbar to have a new documentation (or document) page which is contain in the plugin. What am I missing ?

Regards.

2

Mmm it seems all the maven archetypes or the sample plugin are not up-to-date.
Here my solution to make it work:

  1. Don’t take the pom.xml or package.json of the sample plugin (an issue is currently open, I didn’t see it. My bad.)
  2. You need to take the latest non-alpha release of graylog-server on GitHub. Be carreful, git clone take you on the master branch with the 3.0.0 ALPHA. So get the project here: https://github.com/Graylog2/graylog2-server/releases, it’s simplier
  3. Unzip and go to the main directory
  4. Fetch the plugin archetype: mvn archetype:generate -DarchetypeGroupId=org.graylog -DarchetypeArtifactId=graylog-plugin-archetype -DarchetypeVersion=2.4.5
  5. And here the files you need to modify:

package.json: the devdependencies section.

  "devDependencies": {
    "webpack": "^3.4.1",
    "react": "^0.14.9",
    "react-dom": "^0.14.9",
    "react-addons-test-utils": "0.14.8",
    "graylog-web-plugin": "file:../graylog2-web-interface/packages/graylog-web-plugin"
  }

pom.xml: you need to add a parent, otherwise the web part of your plugin (like a new button in the nav bar) won’t be compiled.

    <parent>
        <artifactId>graylog-plugin-web-parent</artifactId>
        <groupId>org.graylog.plugins</groupId>
        <version>2.4.5</version>
    </parent>

build.config.js: the default relative path to graylog2-web-interface is wrong.

const path = require('path');

module.exports = {
  // Make sure that this is the correct path to the web interface part of the Graylog server repository.
  web_src_path: path.resolve(__dirname, '..', 'graylog2-web-interface'),
};

Aaaand it’s all! After these modifications and with the index.jsx in my precedent post I was able too add a new button in the navbar.

I hope this will help,

Regards

1 Like
3

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