Static resource in plugin


#1

Hi again!

I’m really a newbie with react and webpack and I just need an indication to expose a static resource (file.pdf) in a plugin.

I’ve installed a file loader in webpack.config.js to handle the pdf file:

module.exports = new PluginWebpackConfig('org.graylog.plugins.localdoc.LocalDocPlugin', loadBuildConfig(path.resolve(__dirname, './build.config')), {
  // Here goes your additional webpack configuration.
    module: {
        rules: [
          { test: /\.(pdf)$/, use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          },
        ],
      }
});

And I generate my link in my react component:

import React from 'react';

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

import { PageHeader } from 'components/common';

var doc = require("./file.pdf");

const LocalDoc = React.createClass({
  render() {
    return (
     <PageHeader title="Documentation">
      <div>
        <a href={doc} target="_blank" >Click to download pdf documentation</a>
      </div>
    </PageHeader>
    )
  }
});

export default LocalDoc;

The file.pdf seems to be in my .jar plugin (with a weird name like 54f8gfg46dsg7sfg.pdf. But when I want to access my file via the link the path is https://mygraylog:9000/assets/54f8gfg46dsg7sfg.pdf and nothing is found (pretty 404 gorilla btw :smiley:)

Ii’s ok that the pdf automatically go to a assets folder to the root of my server but the file isn’t there! How can I do to generate a correct link with the correct path to my file?

Regards


(system) #2

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


(dennis) #3

Hello Sarro,

plain files bundled in your plugin are scoped into their own separate URL namespace to protect individual plugins from filename clashes. Your file would be accessible via $SERVERURL/assets/plugin/org.graylog.plugins.localdoc.LocalDocPlugin/54f8gfg46dsg7sfg.pdf.

Currently we provide no comfortable way to generate this URL for you, so the only way to make it work for you would be to assemble the link in your LocalDoc component like this:

import { appPrefixed } from 'util/URLUtils';

const PluginName = 'org.graylog.plugins.localdoc.LocalDocPlugin';
const prefixFilename = (filename) => appPrefixed(`/asset/plugin/${PluginName}/${filename}`);

const LocalDoc = () => (
  <PageHeader title="Documentation">
    <div>
      <a href={prefixFilename(doc)} target="_blank" >Click to download pdf documentation</a>
    </div>
  </PageHeader>
);

There are a few caveats to this, obviously:

1.) If the name your plugin is registered under is changed, you have to change PluginName as well.
2.) It does not work for development mode (when you run it with yarn run build), because the plugin asset namespace isolation does not exist. If you want it to work in development too, you would have to check for development mode and define the prefixFilename function differently, something like this:

import AppConfig from 'util/AppConfig';

const prefixFilename = AppConfig.gl2DevMode() ? (filename) => filename :  (filename) => appPrefixed(`/asset/plugin/${PluginName}/${filename}`);

I hope we can provide helper functions to make all this a bit easier in the future, but you are the first use case that came up for this, so we are waiting for more to appear before we are implementing supporting functionality.

Hope that helps!


(Jan Doberstein) #4