Skip to content

Proposal: improve the PluginModule #448

@juzhiyuan

Description

@juzhiyuan

image

Why

  1. The plugin module is divided into two parts:
    1. Generic plugin page;
    2. Plugin Orchestration
      This proposal is intended to document changes to the generic plugin page.

How

Operation & Limitation

The plugin list page is used to categorize each plugin using the card and its basic information: name, description, enable or disable, Raw View, configuration button.

  1. The specific classification should be obtained from the APISIX plugin, but since APISIX does not currently implement this feature, a set of mappings is maintained on the frontend to get the specific classification based on the filename. If there is no classification, it is classified as "Other".
  2. The "Description" is used to show the description of the plugin, which is obtained from the relevant GitHub plug-in documentation.
  3. When you click View Raw, enable Ant Design's drawer component and use a plugin such as CodeMirror Highlight to display the data currently bound to the plugin in JSON format. This behavior is independent no matter if this plugin is enabled. In addition, View Raw currently supports read-only but should be considered editable.
  4. Whether or not the plugin is enabled is determined by whether or not the plugin name is included in the plugins field of the initialization data passed into the Plugin module. If the plugin is included in the initialization data, it is enabled by default.
  5. When a plugin is enabled, data sent to the API should be appended to the plugins object or omitted otherwise.
  6. When the Configure button is clicked
    1. First, get the plugin schema and use react-jsonschema-form to render the view.
    2. Gets the initial data, and if the plugin is included, gets the corresponding data and populates it into the UI so that the user can continue to configure it.
    3. Note: The schema of some plugins cannot render properly in the UI due to the differences of JSONSchema version (Draft7 is required in this PluginModule), if you encounter such plugins, you can record them in the GitHub issue.

Module

  1. The plugin module (which contains the plugin list page and plugin edit page) should be called from inside the component to get the plugin list API and render the page when it is loaded.
  2. The module has an internal method called getData, which is used to get all the currently enabled plugin configurations, here is an example when you call that method:
{
  "basic-auth": {},
  "prometheus": {}
}
  1. The module has the following two props.
    1. initialData: Initialization data for enabled plugins
    2. ref: A React Reference so that we can call the child getData method from the parent component. https://stackoverflow.com/questions/37949981/call-child-method-from-parent

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions