ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Redis Insight Workbench 插件安装与使用完全指南

Redis Insight Workbench 插件安装与使用完全指南 Redis Insight Workbench 插件安装与使用完全指南【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsight本篇技术指南聚焦 Redis InsightRedis GUI by Redis中 Workbench 命令结果可视化插件的安装与使用流程。你将学会如何在 macOS、Windows、Linux 上正确放置第三方插件目录、让插件可视化出现在命令执行结果中并理解插件在应用内被扫描、加载与渲染的底层机制从而能够安全、高效地把社区或自研可视化插件接入自己的 Redis Insight 环境。插件机制速览Workbench 结果区的可扩展可视化Redis 可以存储多种数据类型而 Redis Insight 允许用户通过插件Plugin独立扩展 Workbench 的核心功能将命令执行结果渲染为自定义可视化视图。其核心思路是数据可视化渲染在 Workbench 的结果区域并且基于所执行的命令——例如运行CLIENT LIST命令插件即可将输出呈现为表格方便阅读与调试。从实现角度看插件可视化在 Workbench 中通过iframe渲染以封装插件自身的脚本与样式插件脚本与样式表若在package.json中指定会被加载进该 iframe同时 iframe 内还包含 Redis Insight 的基础样式。这保证了插件与主应用之间的样式隔离与安全边界。安装指南三步将插件接入 Redis Insight安装插件的完整流程如下前提是你已经获得了一个适用于 Workbench 的插件包通常是一个包含package.json与核心脚本的文件夹。安全提示务必阅读Workbench 插件会在你的本地环境中执行脚本代码因此在添加新插件时只应使用来自可信作者的插件文件以避免恶意代码被自动执行。这是官方文档明确强调的安全红线。第一步下载 Workbench 插件从可信来源如插件作者的发布页、官方插件示例仓库等下载插件压缩包并解压为独立的插件目录。插件目录的命名建议与插件package.json中的name字段保持一致。第二步将插件放入plugins文件夹Redis Insight 会在用户主目录下的.redis-insight/plugins文件夹中扫描自定义插件不同操作系统的默认路径如下操作系统插件目录路径macOSusersHomeDir/.redis-insight/pluginsWindowsC:/Users/{Username}/.redis-insight/pluginsLinuxusersHomeDir/.redis-insight/plugins例如在 Linux 上通常对应/home/用户名/.redis-insight/plugins在 macOS 上对应/Users/用户名/.redis-insight/plugins。如果你的.redis-insight目录尚不存在首次运行 Redis Insight 时会自动创建也可以手动创建后放入插件。将解压得到的整个插件文件夹复制到上述plugins目录中。目录结构示意如下.redis-insight/ └── plugins/ └── client-list/ ← 插件根目录含 package.json ├── package.json └── dist/ ├── index.js └── styles.css第三步刷新 Workbench 页面插件放置完成后需要重新加载 Workbench 页面Redis Insight 才会扫描到新增的插件。刷新后运行与插件可视化匹配的 Redis 命令即可在命令结果中看到插件提供的可视化视图。使用指南在 Workbench 中查看插件可视化插件可能为一个或多个 Redis 命令提供不同的可视化形式。要查看命令结果的插件化展示按以下步骤操作打开 Redis Insight进入主界面打开一个已添加的数据库连接打开 Workbench工作台运行与该插件可视化相关的 Redis 命令如CLIENT LIST、JSON.GET选择插件可视化来展示结果——如果该可视化未被插件声明为默认视图需要手动在结果区切换选择。其中第 5 步提到的“默认视图”由插件package.json中visualizations数组里的default: true字段控制声明为默认的可视化会自动应用于匹配的命令否则需用户手动挑选。插件的目录结构与清单文件安装对象到底是什么要正确安装首先得理解插件包的结构。每个插件都应具有唯一名称且其所有文件需加载到默认plugins文件夹内的独立子文件夹中应用内置的默认插件位于应用内部不属于用户自定义范围。插件文件组成pluginName/package.json必需—— 插件的清单文件Manifest声明插件元信息与可视化定义pluginName/{anyName}.js必需—— 插件的核心脚本定义可视化渲染函数pluginName/{anyName}.css可选—— 插件可视化的样式文件pluginName/{anyFileOrFolder}可选—— 供核心脚本使用的任意其他文件或文件夹例如pluginName/images/image.png。package.json必须位于插件根目录其余文件可以放在子文件夹中。package.json清单字段说明清单文件中以下字段是必需的字段说明name插件名称建议与插件文件夹名保持一致main核心脚本的相对路径例如./dist/index.jsvisualizations可视化对象数组用于在 Workbench 中展示命令结果visualizations数组中的每个对象同样包含必需字段字段说明id可视化 IDname在 Workbench 中显示的可视化名称activationMethod当该可视化被选中时调用的导出函数名matchCommands使用该可视化的命令数组支持正则字符串例如[CLIENT LIST, FT.*]此外可通过styles字段指定 CSS 文件的路径该文件会被包含进插件 iframe 内default布尔字段用于声明是否为该命令的默认可视化。完整清单示例仓库内置的client-list插件清单redisinsight/ui/src/packages/clients-list/package.json展示了包含必需与可选字段的完整写法{ author: { name: Redis Ltd., email: supportredis.com, url: https://redis.com/redis-enterprise/redis-insight }, description: Show client list as table and highlighted json, source: ./src/main.tsx, styles: ./dist/styles.css, main: ./dist/index.js, name: client-list, version: 0.0.3, scripts: { dev: vite -c ../vite.config.mjs }, visualizations: [ { id: clients-list, name: Table, activationMethod: renderClientsList, matchCommands: [CLIENT LIST], iconDark: ./dist/table_view_icon_dark.svg, iconLight: ./dist/table_view_icon_light.svg, description: Example of client list plugin, default: true }, { id: json-view, name: JSON, activationMethod: renderJSON, matchCommands: [JSON.GET, JSON.MGET], iconDark: ./dist/json_view_icon_dark.svg, iconLight: ./dist/json_view_icon_light.svg, description: Show value as JSON, default: true } ], dependencies: { elastic/eui: 34.6.0, react: ^17.0.2, react-dom: ^17.0.2, redisinsight-plugin-sdk: ^1.1.0 } }该示例同时展示了几个官方文档之外的实用字段iconDark/iconLight用于为可视化指定深色/浅色主题下的图标source指向插件源码入口供构建工具使用一个插件可通过多个visualizations条目为不同命令如CLIENT LIST、JSON.GET、GET提供不同视图。源码视角插件是如何被扫描与加载的理解安装路径与清单字段后再看应用侧的实际加载逻辑会更有把握。Redis Insight 服务端通过 plugin.service.ts 中的PluginService完成插件发现它同时扫描两类目录默认插件目录PATH_CONFIG.defaultPlugins标记为internal与自定义插件目录PATH_CONFIG.customPlugins即用户主目录下的plugins文件夹并在getAll()中合并返回对每个插件子目录服务读取其package.json并使用 class-validator 的validateOrReject进行校验whitelist: true确保清单字段合法校验通过后服务会拼接出baseUrl插件资源的基础 URL可用来引用插件内的静态资源与main核心脚本的完整 URL若声明了styles也会一并拼接任一步骤出错都会被捕获并记入日志该插件被跳过。这解释了安装规范中的两个要点插件必须放在plugins目录下且每个插件一个独立子文件夹scanPluginsFolder通过readdirSync遍历子目录并且文件夹内必须有合法的package.json——缺少清单或清单校验失败的目录会被静默跳过这也是安装后需要刷新页面才能生效的原因扫描发生在服务启动或页面重载时。插件运行与通信机制补充安装只是第一步理解插件的运行方式有助于排查“装了但看不到可视化”的问题渲染容器插件可视化渲染在 iframe 中iframe 内已包含基础 HTML、插件的脚本与样式以及 Redis Insight 的基础样式字体与配色。插件可直接使用现有 DOM 元素#app渲染内容或自行创建 DOM 元素主题适配iframe 的body上会带有theme_DARK或theme_LIGHT类名用于标识当前应用主题插件可据此适配深色/浅色显示环境信息window.state会向插件注入附加信息例如config.baseUrl插件目录 URL可用于引用插件内的图片等资源与config.appVersionRedis Insight 应用版本以及modules当前数据库已加载的 Redis 模块列表主应用通信插件通过第三方库redisinsight-plugin-sdk与主应用通信其方法清单与说明见 redisinsight-plugin-sdk 的 README推荐技术栈为保证插件可视化与整个应用风格一致官方推荐使用 React 与 Elastic UIEUI库开发插件——client-list插件正是采用 React、TypeScript 与 Elastic UI 构建的示例见 clients-list 插件目录及其 README。插件核心脚本的形态以官方文档中的基础示例为参照脚本需要定义一个接收执行命令属性的渲染函数props中包含command与data结果数组每个结果含response与status字段并通过export default { renderVisualization }导出函数名需与清单中activationMethod声明的名称一致。完整开发规范可参考 docs/plugins/development.md。常见问题排查清单现象排查方向刷新后仍看不到插件可视化确认插件文件夹已完整放入正确的plugins路径确认目录内存在合法的package.json字段缺失会导致校验失败被跳过确认运行了matchCommands中匹配的 Redis 命令命令有结果但未自动显示插件视图检查该可视化的default字段是否设为true否则需在结果区手动选择可视化可视化渲染异常或样式错乱确认main、styles路径为相对路径且构建产物存在于对应位置确认 iframe 内的#app容器使用正确检查是否适配了theme_DARK/theme_LIGHT主题安全顾虑仅安装可信作者的插件插件脚本会在本地执行需防范恶意代码延伸阅读插件开发指南 —— 学习如何编写自己的 Workbench 插件清单字段、核心脚本、渲染与通信插件功能简介 —— 了解插件机制的定位与设计思路clients-list 示例插件 —— 可直接对照学习的官方示例实现插件服务端实现 —— 插件扫描、校验与 URL 拼接的源码依据【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsight创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表