Develop RedisInsight plugins

Guidance on developing RedisInsight plugins

To encapsulate plugin scripts and styles, plugin visualization in Workbench is rendered using IFrame, as described in the main plugin script and the stylesheet (if it is specified in the package.json). IFrame also includes basic styles.

Plugin structure

Each plugin should have a unique name with all its files loaded to a separate folder inside the default plugins folder. For more information, see Install RedisInsight plugins.

Note

Default plugins are located inside the application.

Files

package.json should be located in the root folder of your plugins. All other files can be included in a sub-folder.

  • pluginName/package.json (required): Manifest of the plugin
  • pluginName/{anyName}.js (required): Core script of the plugin
  • pluginName/{anyName}.css (optional): File with styles for the plugin visualizations
  • pluginName/{anyFileOrFolder} (optional): Specify any other file or folder inside the plugin folder for the core module script to use. Example: pluginName/images/image.png.

package.json structure

To use the plugin, the package.json file must include these required fields:

name Plugin name. Use the folder name as the plugin name in the package.json.
main Relative path to the core script of the plugin. Example: ./dist/index.js
visualizations Array of objects to visualize the results in the Workbench.

Required fields in visualizations:
  • id: Visualization ID
  • name: Visualization name to display in Workbench
  • activationMethod: Name of the exported function to call when this visualization is selected in the Workbench
  • matchCommands: Array of commands to use the visualization for. Supports regex string. Example: `["CLIENT LIST", "FT.*"]`

You can specify the path to a CSS file in the styles field. If specified, this file will be included inside the IFrame plugin.

Simple example of the package.json file with required and optional fields:

{
  "author": {
    "name": "Redis Ltd.",
    "email": "support@redis.com",
    "url": "https://redis.com/redis-enterprise/redis-insight"
  },
  "description": "Show client list as table",
  "styles": "./dist/styles.css",
  "main": "./dist/index.js",
  "name": "client-list",
  "version": "0.0.1",
  "scripts": {},
  "visualizations": [
    {
      "id": "clients-list",
      "name": "Table",
      "activationMethod": "renderClientsList",
      "matchCommands": [
        "CLIENT LIST"
      ],
      "description": "Example of client list plugin",
      "default": true
    }
  ],
  "devDependencies": {},
  "dependencies": {}
}

Core script of the plugin

The core (required) script contains a function and its export (functions, for multiple visualizations). The script runs after the relevant visualization is selected in Workbench.

The following function receives Props of the executed commands:

interface Props {
  command: string; // executed command
  data: Result[]; // array of results (one item for Standalone)
}

interface Result {
  response: any; // response of the executed command
  status: 'success' | 'fail'; // response status of the executed command
}

const renderVisualization = (props: Props) => {
    // Do your magic
}

export default { renderVisualization }

Each plugin iframe has basic styles that match the RedisInsight application, including fonts and color schemes.

It is recommended to use the React & Elastic UI library for consistency with plugin visualizations and the entire application.

For a plugin example, see:

Available parameters

Additional information provided to the plugin iframe is included in the window.state inside of the plugin script.

const { config, modules } = window.state
const { baseUrl, appVersion } = config

// modules - the list of modules of the current database
// baseUrl - url for your plugin folder - can be used to include your assets
// appVersion - version of the RedisInsight application

Plugin rendering

To render the plugin visualization, the iframe with basic HTML is generated and then populated with relevant scripts and styles. To render the HTML data, use the existing DOM element #app or create your own DOM elements.

The rendered iframe also includes theme_DARK or theme_LIGHT className on body to indicate the application theme used.

JavaScript

const renderVisualization = (props) => {
    const { command, data = [] } = props;
    const [{ result, status }] = data
    document.getElementById('app')
      .innerHTML = `
        <h3>Executed command:<h3>
        <p>${command}</p>
        <h4>Result of the command</h4>
        <p>${result}</p>
        <h4>Status of the command</h4>
        <p>${status}</p>
      `
}

export default { renderVisualization }

React

import { render } from 'react-dom'
import App from './App'

const renderVisualization = (props) => {
  const { command, data = [] } = props
  const [{ result, status }] = data
  render(
    <App command={command} response={result} status={status} />,
    document.getElementById('app')
  )
}

// This is a required action - export the main function for execution of the visualization
export default { renderVisualization }

Plugin communication

Use the redisinsight-plugin-sdk, which is a third party library, to communicate with the main app.

For a list of methods and their descriptions, see the README.md.

Rate this page