{"componentChunkName":"component---src-templates-blog-post-js","path":"/2022/03/03/hack-osd/","result":{"data":{"markdownRemark":{"html":"

最近接到一个有意思的需求，简单记录一下解决过程。

\n

背景

\n

需求是这样的，我们使用 AWS 的 OpenSearch (即 Elastic 的 Fork 版本) 部署了一套日志服务，用户使用 OpenSearch Dashboards (也即 Kibana 的 Fork 版本) 查看。但我们只想让用户查看日志 (即 Discover 功能)，不想让他们使用 Dashboard / Visualize 等其它功能，界面上需要隐藏这些功能的入口。

\n

原始界面：

\n

\n \n \n \n \n

\n

\n \n );\n //...\n }\n

刷新网页后发现在 console 中输出中这条 log。

\n

\n \n \n \n \n

\n

继续验证，添加移除 header 的逻辑：

\n
const timeId = setInterval(() => {\n  const el = document.getElementById('globalHeaderBars')\n  if (el) {\n    clearInterval(timeId)\n    el.remove()\n  }\n}, 100)
\n

刷新网页后发现 header 移除了，但不是很完美，在移除前会闪一下，以及移除后顶部会留下一片空白。

\n

后来想到了更好的办法，用 MutationObserver。顶部空白则通过修改 body 的 paddingTop 解决。具体实现如下。

\n
  private removeHeader() {\n    const observer = new MutationObserver((mutations) => {\n      console.log('mutations:', mutations);\n\n      for (const mutation of mutations) {\n        for (let i = 0; i < mutation.addedNodes.length; i++) {\n          const node = mutation.addedNodes[i];\n          if (!(node instanceof HTMLElement)) continue;\n          if (node.nodeName === 'HEADER' && node.classList.contains('headerGlobalNav')) {\n            node.firstChild?.remove();\n            document.body.style.paddingTop = '10px';\n            observer.disconnect();\n            break;\n          }\n        }\n      }\n    });\n    observer.observe(document.body, { childList: true, subtree: true });\n  }\n\n  public setup(core: CoreSetup) {\n    console.log('load developer examples plugin');\n    this.removeHeader();\n    //...\n  }
\n

通过上面的试验验证了插件的可行性。

\n

但此时我们是直接修改了 repo 示例 plugin 的源码。接下来我们要创建一个新的插件并能进行发布，供 OSD 使用。

\n

开发 OSD 插件

\n

插件的开发要在 OSD 的 repo 中进行。

\n

在 OSD 源码根目录下执行 node scripts/generate_plugin.js hide_header 生成一个默认的插件。它会问你插件要放到哪，如果是要放到 repo 里，则插件会放到 src/plugins 目录下，否则放到 plugins 目录中。plugins 目录被 git 忽略了，因此不会纳入版本控制。

\n

执行 yarn start 启动 OSD，发现该插件已加载，显示在左侧导航菜单。

\n

\n \n title: PLUGIN_NAME,\n+ navLinkStatus: AppNavLinkStatus.hidden,\n

然后添加 removeHeader() 的逻辑。

\n
// plugins/hide_header/public/plugin.ts\nexport class HideHeaderPlugin\n  implements Plugin<HideHeaderPluginSetup, HideHeaderPluginStart> {\n  private removeHeader() {\n    const observer = new MutationObserver((mutations) => {\n      console.log('mutations:', mutations)\n\n      for (const mutation of mutations) {\n        for (let i = 0; i < mutation.addedNodes.length; i++) {\n          const node = mutation.addedNodes[i]\n          if (!(node instanceof HTMLElement)) continue\n          if (\n            node.nodeName === 'HEADER' &&\n            node.classList.contains('headerGlobalNav')\n          ) {\n            node.firstChild?.remove()\n            document.body.style.paddingTop = '10px'\n            observer.disconnect()\n            break\n          }\n        }\n      }\n    })\n    observer.observe(document.body, { childList: true, subtree: true })\n  }\n\n  public setup(core: CoreSetup): HideHeaderPluginSetup {\n    console.log('load hide header plugin')\n    this.removeHeader()\n    //...\n  }\n  //...\n}
\n

其实这个插件我们需要的就只有这一块逻辑，其它的都不需要，完全可以裁剪掉 (懒得搞了)。

\n

发布插件

\n

在此插件的根目录下，执行 yarn build，会询问要将此插件用于哪个版本的 OSD，填入对应的版本就行，比如我们布署的是 1.2.0，那就填 1.2.0。如果版本不匹配，OSD 会加载失败。

\n

然后在 build 目录下就会生成一个 zip 包，比如 hideHeader-1.2.0.zip。

\n

把这个 zip 包拷贝到生产环境上的 OSD 二进制所在目录的 plugins 目录，解压即可。

\n

然后重启 OSD，就可以看到效果了。

\n
opensearch-dashboards-1.2.0-linux-x64$ ls\nLICENSE.txt  NOTICE.txt  README.txt  bin  config  data  manifest.yml  node  node_modules  package.json  plugins  src\n\nopensearch-dashboards-1.2.0-linux-x64$ cd plugins/\nopensearch-dashboards-1.2.0-linux-x64/plugins$ ls\nalertingDashboards          ganttChartDashboards  indexManagementDashboards  queryWorkbenchDashboards  securityDashboards\nanomalyDetectionDashboards  hideHeader-1.2.0.zip  observabilityDashboards    reportsDashboards\n\nopensearch-dashboards-1.2.0-linux-x64/plugins$ unzip hideHeader-1.2.0.zip
\n

Repo

\n","frontmatter":{"title":"隐藏 OpenSearch Dashboards 导航","date":"March 03, 2022"}}},"pageContext":{"slug":"/2022/03/03/hack-osd/"}},"staticQueryHashes":["3159585216"]}