云原生网络微服务【免费下载链接】linkerdOld repo for Linkerd 1.x. See the linkerd2 repo for Linkerd 2.x.项目地址https://gitcode.com/gh_mirrors/li/linkerd点击查看免费下载导读本文以 Linkerd 1.x 管理控制台Admin UI前端资源目录下的开发说明文档为主体系统讲解该控制台前端的工程结构、模块加载方案、测试与代码检查工具链以及模板预编译流程。读完本文你将掌握如何在 Linkerd 仓库中搭建前端开发环境、运行 Jasmine/Karma 单元测试与 ESLint 检查、以监听模式自动重跑用例以及新增页面模板并重新生成编译后模板文件的完整操作路径。一、背景Linkerd 管理控制台的前端资源位于何处Linkerd 1.x 是围绕路由器Router构建的 Service Mesh 数据平面其运行时会通过独立的 admin HTTP 服务对外提供监控面板。该面板的静态资源并不散落在各模块中而是统一收拢在admin模块的 Java/Scala 资源目录下admin/src/main/resources/io/buoyant/admin/ ├── css/ # 样式与字体bootstrap.min.css、dashboard.css 等 ├── js/ │ ├── lib/ # 第三方 vendor 库jquery、lodash、require.js、smoothie 等 │ ├── src/ # 应用业务代码admin.js、dashboard.js 等 │ ├── spec/ # Jasmine 测试与 fixtures │ └── template/ # Handlebars 模板与编译产物 ├── karma.conf.js # Karma 测试运行器配置 ├── package.json # 前端构建依赖与 npm scripts └── README.md # 前端开发说明本文主体来源从服务端看这些资源由 Admin.scala 中的Handler挂载到/admin/files/路径通过ResourceHandler.fromDirectoryOrJar提供访问开发模式下直接从本地目录admin/src/main/resources/io/buoyant/admin读取打包后则从 jar 内资源读取响应再经 StaticFilter.scala 按扩展名设置正确的Content-Typecss/js/html/json/png/svg 等。因此前端开发者只需在这个目录下工作改动即可被本地服务直接拾取无需重新打包。二、JavaScript 工程约定RequireJS 模块化与目录职责按 README.md 的约定整个前端采用 RequireJS 作为模块加载器并明确了三个目录的职责划分模块配置位于/js/main-*.js。Linkerd 仓库中同时存在 js/main-linkerd.js 与js/main-namerd.js分别对应 Linkerd 路由器面板与 Namerd 命名服务面板的入口应用代码位于/js/src存放业务模块第三方库位于/js/lib存放 vendor 代码不参与业务修改。以 js/main-linkerd.js 为例入口先通过require.config声明模块路径与 shim 依赖将jQuery、lodash、handlebars.runtime、bootstrap、Smoothie等别名映射到lib/下的具体文件并声明bootstrap依赖jQuery、导出$/_等全局符号。随后入口按“穷人路由”poor mans routing方式根据window.location.pathname分发页面js/main-linkerd.js路径后缀初始化逻辑/结尾为斜杠加载adminPage.initialize()获取路由器配置启动仪表盘dashboardInitializer/delegator进入 DTab 委托树可视化页linkerdDtabPlayground/namerd启动 Namerd 命名空间页/logging启动日志级别配置页/services以 service 视角启动服务仪表盘其他仅执行通用初始化其中 js/src/admin.js 承担两个关键职责从 URL 查询参数routerlabel解析当前选中的路由器并请求config.json获取全部路由器列表动态渲染顶部下拉菜单。多路由器聚合视图通过特殊的all标签实现用户可切换视角按单一路由器或全局查看监控数据。三、测试基础设施Jasmine 断言 Karma 运行器按 README.md 的说明测试采用Jasmine编写、由Karma驱动执行。仓库中的实际依赖与配置与此完全对应package.json 中声明的 devDependencies 包括jasmine、karma、karma-jasmine、karma-cli、karma-requirejs、karma-phantomjs-launcher、karma-mocha-reporter、requirejs、eslint等并内置两条 npm scriptstest: karma start --single-run与eslint: eslint jskarma.conf.js 使用jasminerequirejs双框架basePath指向./js浏览器选用 PhantomJSsingleRun默认为true监听端口 9876reporter 采用 mocha 风格输出。值得关注的是 Karma 与 RequireJS 的配合方式karma.conf.js配置中刻意不加载js/main-*.js应用入口因为测试环境不希望真正启动整个应用而是加载spec/test-main.js作为引导并将spec/*.js、spec/fixtures/*.js、src/*.js、template/compiled_templates.js、lib/*.js声明为included: false的模块由 RequireJS 按需异步拉取。js/spec/test-main.js 则完成“测试模块发现”工作扫描window.__karma__.files中所有匹配/(spec|test)\.js$/i的文件将其归一化为 RequireJS 模块名并复用与main-linkerd.js一致的路径/shims 配置最后通过callback: window.__karma__.start启动 Jasmine。仓库中的测试用例覆盖了核心监控模块例如 js/spec/MetricsCollectorSpec.js 针对 js/src/metrics_collector.js 验证了三个行为监听器注册后能在指标更新时收到增量delta与全量数据、反注册后不再收到通知。类似的 spec 文件还包括BarChartSpec.js、RouterClientsSpec.js、RouterServicesSpec.js、RouterSummarySpec.js、UtilsSpec.js等。四、本地开发环境搭建若要在本地运行测试或 ESLint第一步是安装前端依赖。按 README.md 的指引在仓库根目录下执行cd admin/src/main/resources/io/buoyant/admin npm install该命令会依据package.json安装上述全部开发依赖建议同时参考package-lock.json锁定版本。npm install只需执行一次后续命令均复用该依赖环境。五、运行测试与代码检查5.1 运行单元测试cd admin/src/main/resources/io/buoyant/admin npm test # 等价于 karma start --single-runnpm test实际展开为karma start --single-runKarma 会启动 PhantomJS 浏览器、加载 RequireJS 引导与全部 spec执行完所有用例后自动退出并输出结果。singleRun: true意味着这是一次性 CI 友好执行适合提交代码前快速验证。5.2 运行 ESLintcd admin/src/main/resources/io/buoyant/admin npm run eslint # 等价于 eslint jsESLint 直接对js目录含src、spec、lib等进行静态检查。package.json中额外引入了eslint-plugin-jasmine识别 Jasmine 全局 API与eslint-plugin-requirejs校验 AMD 模块写法说明代码规范同时约束了测试代码与模块化写法。5.3 开发时的自动重跑模式README.md 特别推荐在编写 JS 时让测试在文件变更后自动重跑会显著提升迭代效率。命令为karma start --autoWatchtrue --singleRunfalseautoWatch开启后Karma 会监听basePath下的文件变更并自动重新执行测试singleRunfalse使进程保持常驻直到手动终止如CtrlC。这与karma.conf.js中默认autoWatch: false、singleRun: true形成对照——默认值面向一次执行命令行参数用于覆盖为监听模式。六、Handlebars 模板预编译流程README.md 指出为了“轻微的速度提升”a slight speed boost前端将 Handlebars 模板预先编译为纯 JS运行时不再解析模板源码。模板的存放与编译规则如下新增模板将模板文件放入js/template/目录。仓库中现存 20 余个.handlebars文件例如router_summary.handlebars、router_client.handlebars、barchart.handlebars、process_info.handlebars、request_totals.handlebars、delegator.handlebars、logging_row.handlebars等另有latencies.partial.handlebars、metric.partial.handlebars、rate_metric.partial.handlebars这类 partial 片段重新编译执行# npm install if needed handlebars -a js/template/ js/template/compiled_templates.js该命令将js/template/下所有模板与 partial 以 AMD 模块形式-a表示输出为 RequireJS 可加载的 define 包装合并写入 js/template/compiled_templates.js供src下的业务模块通过define([template/compiled_templates], ...)引用。应用侧的使用方式在源码中清晰可见例如 js/src/process_info.js 直接取templates.process_info渲染进程信息栏js/src/request_totals.js 使用templates.request_totals渲染请求统计而 js/src/bar_chart.js 则用templates.barchart生成成功率横向条形图。这也解释了为何 karma.conf.js 必须把template/compiled_templates.js列为可加载模块——测试环境下同样依赖这份编译产物。七、源码层面的纵深理解面板数据从哪来理解测试与模块约定后有必要串起“前端如何取数”这条链路便于开发者修改测试或新增面板时心中有数指标聚合js/src/metrics_collector.js 以admin/metrics.json?tree1为数据源按固定间隔轮询仪表盘中的UPDATE_INTERVAL为 1000ms见 js/src/dashboard.js对计数器计算相邻两次的delta增量并检测新出现的 client 以触发addedClients事件仪表盘组装js/src/dashboard.js 将收集器分发给ProcInfo进程信息版本、uptime、线程数、内存、GC、RequestTotals当前请求、Pending、进出连接数以及 router 级别的服务/客户端仪表盘图形绘制成功率时间序列图基于 SmoothieChart 的 canvas 实现js/src/success_rate_graph.js并以 100% 参考线、99.99~100.001 的默认 Y 轴范围保证纯成功曲线不贴顶格式化工具js/src/utils.js 提供MsToStringConverter毫秒转可读时长、BytesToStringConverter字节转 KB/MB/GB、SuccessRate成功率计算与sr-good/sr-poor/sr-bad分级着色等通用工具这些工具类也是UtilsSpec.js的主要测试对象。这些模块均位于admin/src/main/resources/io/buoyant/admin/js/src/下与测试js/spec/一一对应是理解面板行为与扩展测试的最佳参照。八、实践清单速览任务命令仓库根目录下说明安装前端依赖cd admin/src/main/resources/io/buoyant/admin npm install一次性执行跑一次单元测试cd admin/src/main/resources/io/buoyant/admin npm test即karma start --single-run静态检查 JScd admin/src/main/resources/io/buoyant/admin npm run eslint即eslint js监听模式自动重跑karma start --autoWatchtrue --singleRunfalse文件变更即重跑常驻进程新增模板后重新编译handlebars -a js/template/ js/template/compiled_templates.js新模板须放入js/template/本地查看面板启动 Linkerd 后访问 admin 服务默认http://host:9990或 TLS 下的 https静态资源由/admin/files/提供以上流程完全基于当前仓库 admin/src/main/resources/io/buoyant/admin/README.md 及同目录下的package.json、karma.conf.js、js/main-linkerd.js、js/spec/test-main.js等真实文件整理开发者在修改面板前端时可按此路径快速进入迭代循环。赞分享云原生网络微服务【免费下载链接】linkerdOld repo for Linkerd 1.x. See the linkerd2 repo for Linkerd 2.x.项目地址https://gitcode.com/gh_mirrors/li/linkerd点击查看免费下载相关推荐Streama前端单元测试Jasmine与Karma配置指南Streama前端单元测试Jasmine与Karma配置指南 Streama作为一款自托管流媒体服务器Self hosted streaming media后端音视频视频requirejs模块化测试框架集成Jasmine与Mocha实战requirejs模块化测试框架集成Jasmine与Mocha实战 你是否在RequireJS项目中遇到过模块化测试的困境当代码拆分为数十个AMD模块后传前端MEAN.JS前端测试框架Karma与Jasmine完整使用指南MEAN.JS前端测试框架Karma与Jasmine完整使用指南 MEAN.JS是一个基于MongoDB、Express、AngularJS和Node.js的后端前端上一篇Apache Storm 非 JVM 语言支持指南用 Multi-Lang 协议实现 Shell Spout / Bolt 与跨语言 DSL下一篇3分钟搞懂Coze Studio智能体知识库更新增量索引与全量重建方案对比创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/13 1:59:27 · 阅读 1.2k Linkerd Admin UI 前端开发指南：RequireJS 模块体系、Jasmine/Karma 测试与 Handlebars 模板预编译
云原生网络微服务【免费下载链接】linkerdOld repo for Linkerd 1.x. See the linkerd2 repo for Linkerd 2.x.项目地址https://gitcode.com/gh_mirrors/li/linkerd点击查看免费下载导读本文以 Linkerd 1.x 管理控制台Admin UI前端资源目录下的开发说明文档为主体系统讲解该控制台前端的工程结构、模块加载方案、测试与代码检查工具链以及模板预编译流程。读完本文你将掌握如何在 Linkerd 仓库中搭建前端开发环境、运行 Jasmine/Karma 单元测试与 ESLint 检查、以监听模式自动重跑用例以及新增页面模板并重新生成编译后模板文件的完整操作路径。一、背景Linkerd 管理控制台的前端资源位于何处Linkerd 1.x 是围绕路由器Router构建的 Service Mesh 数据平面其运行时会通过独立的 admin HTTP 服务对外提供监控面板。该面板的静态资源并不散落在各模块中而是统一收拢在admin模块的 Java/Scala 资源目录下admin/src/main/resources/io/buoyant/admin/ ├── css/ # 样式与字体bootstrap.min.css、dashboard.css 等 ├── js/ │ ├── lib/ # 第三方 vendor 库jquery、lodash、require.js、smoothie 等 │ ├── src/ # 应用业务代码admin.js、dashboard.js 等 │ ├── spec/ # Jasmine 测试与 fixtures │ └── template/ # Handlebars 模板与编译产物 ├── karma.conf.js # Karma 测试运行器配置 ├── package.json # 前端构建依赖与 npm scripts └── README.md # 前端开发说明本文主体来源从服务端看这些资源由 Admin.scala 中的Handler挂载到/admin/files/路径通过ResourceHandler.fromDirectoryOrJar提供访问开发模式下直接从本地目录admin/src/main/resources/io/buoyant/admin读取打包后则从 jar 内资源读取响应再经 StaticFilter.scala 按扩展名设置正确的Content-Typecss/js/html/json/png/svg 等。因此前端开发者只需在这个目录下工作改动即可被本地服务直接拾取无需重新打包。二、JavaScript 工程约定RequireJS 模块化与目录职责按 README.md 的约定整个前端采用 RequireJS 作为模块加载器并明确了三个目录的职责划分模块配置位于/js/main-*.js。Linkerd 仓库中同时存在 js/main-linkerd.js 与js/main-namerd.js分别对应 Linkerd 路由器面板与 Namerd 命名服务面板的入口应用代码位于/js/src存放业务模块第三方库位于/js/lib存放 vendor 代码不参与业务修改。以 js/main-linkerd.js 为例入口先通过require.config声明模块路径与 shim 依赖将jQuery、lodash、handlebars.runtime、bootstrap、Smoothie等别名映射到lib/下的具体文件并声明bootstrap依赖jQuery、导出$/_等全局符号。随后入口按“穷人路由”poor mans routing方式根据window.location.pathname分发页面js/main-linkerd.js路径后缀初始化逻辑/结尾为斜杠加载adminPage.initialize()获取路由器配置启动仪表盘dashboardInitializer/delegator进入 DTab 委托树可视化页linkerdDtabPlayground/namerd启动 Namerd 命名空间页/logging启动日志级别配置页/services以 service 视角启动服务仪表盘其他仅执行通用初始化其中 js/src/admin.js 承担两个关键职责从 URL 查询参数routerlabel解析当前选中的路由器并请求config.json获取全部路由器列表动态渲染顶部下拉菜单。多路由器聚合视图通过特殊的all标签实现用户可切换视角按单一路由器或全局查看监控数据。三、测试基础设施Jasmine 断言 Karma 运行器按 README.md 的说明测试采用Jasmine编写、由Karma驱动执行。仓库中的实际依赖与配置与此完全对应package.json 中声明的 devDependencies 包括jasmine、karma、karma-jasmine、karma-cli、karma-requirejs、karma-phantomjs-launcher、karma-mocha-reporter、requirejs、eslint等并内置两条 npm scriptstest: karma start --single-run与eslint: eslint jskarma.conf.js 使用jasminerequirejs双框架basePath指向./js浏览器选用 PhantomJSsingleRun默认为true监听端口 9876reporter 采用 mocha 风格输出。值得关注的是 Karma 与 RequireJS 的配合方式karma.conf.js配置中刻意不加载js/main-*.js应用入口因为测试环境不希望真正启动整个应用而是加载spec/test-main.js作为引导并将spec/*.js、spec/fixtures/*.js、src/*.js、template/compiled_templates.js、lib/*.js声明为included: false的模块由 RequireJS 按需异步拉取。js/spec/test-main.js 则完成“测试模块发现”工作扫描window.__karma__.files中所有匹配/(spec|test)\.js$/i的文件将其归一化为 RequireJS 模块名并复用与main-linkerd.js一致的路径/shims 配置最后通过callback: window.__karma__.start启动 Jasmine。仓库中的测试用例覆盖了核心监控模块例如 js/spec/MetricsCollectorSpec.js 针对 js/src/metrics_collector.js 验证了三个行为监听器注册后能在指标更新时收到增量delta与全量数据、反注册后不再收到通知。类似的 spec 文件还包括BarChartSpec.js、RouterClientsSpec.js、RouterServicesSpec.js、RouterSummarySpec.js、UtilsSpec.js等。四、本地开发环境搭建若要在本地运行测试或 ESLint第一步是安装前端依赖。按 README.md 的指引在仓库根目录下执行cd admin/src/main/resources/io/buoyant/admin npm install该命令会依据package.json安装上述全部开发依赖建议同时参考package-lock.json锁定版本。npm install只需执行一次后续命令均复用该依赖环境。五、运行测试与代码检查5.1 运行单元测试cd admin/src/main/resources/io/buoyant/admin npm test # 等价于 karma start --single-runnpm test实际展开为karma start --single-runKarma 会启动 PhantomJS 浏览器、加载 RequireJS 引导与全部 spec执行完所有用例后自动退出并输出结果。singleRun: true意味着这是一次性 CI 友好执行适合提交代码前快速验证。5.2 运行 ESLintcd admin/src/main/resources/io/buoyant/admin npm run eslint # 等价于 eslint jsESLint 直接对js目录含src、spec、lib等进行静态检查。package.json中额外引入了eslint-plugin-jasmine识别 Jasmine 全局 API与eslint-plugin-requirejs校验 AMD 模块写法说明代码规范同时约束了测试代码与模块化写法。5.3 开发时的自动重跑模式README.md 特别推荐在编写 JS 时让测试在文件变更后自动重跑会显著提升迭代效率。命令为karma start --autoWatchtrue --singleRunfalseautoWatch开启后Karma 会监听basePath下的文件变更并自动重新执行测试singleRunfalse使进程保持常驻直到手动终止如CtrlC。这与karma.conf.js中默认autoWatch: false、singleRun: true形成对照——默认值面向一次执行命令行参数用于覆盖为监听模式。六、Handlebars 模板预编译流程README.md 指出为了“轻微的速度提升”a slight speed boost前端将 Handlebars 模板预先编译为纯 JS运行时不再解析模板源码。模板的存放与编译规则如下新增模板将模板文件放入js/template/目录。仓库中现存 20 余个.handlebars文件例如router_summary.handlebars、router_client.handlebars、barchart.handlebars、process_info.handlebars、request_totals.handlebars、delegator.handlebars、logging_row.handlebars等另有latencies.partial.handlebars、metric.partial.handlebars、rate_metric.partial.handlebars这类 partial 片段重新编译执行# npm install if needed handlebars -a js/template/ js/template/compiled_templates.js该命令将js/template/下所有模板与 partial 以 AMD 模块形式-a表示输出为 RequireJS 可加载的 define 包装合并写入 js/template/compiled_templates.js供src下的业务模块通过define([template/compiled_templates], ...)引用。应用侧的使用方式在源码中清晰可见例如 js/src/process_info.js 直接取templates.process_info渲染进程信息栏js/src/request_totals.js 使用templates.request_totals渲染请求统计而 js/src/bar_chart.js 则用templates.barchart生成成功率横向条形图。这也解释了为何 karma.conf.js 必须把template/compiled_templates.js列为可加载模块——测试环境下同样依赖这份编译产物。七、源码层面的纵深理解面板数据从哪来理解测试与模块约定后有必要串起“前端如何取数”这条链路便于开发者修改测试或新增面板时心中有数指标聚合js/src/metrics_collector.js 以admin/metrics.json?tree1为数据源按固定间隔轮询仪表盘中的UPDATE_INTERVAL为 1000ms见 js/src/dashboard.js对计数器计算相邻两次的delta增量并检测新出现的 client 以触发addedClients事件仪表盘组装js/src/dashboard.js 将收集器分发给ProcInfo进程信息版本、uptime、线程数、内存、GC、RequestTotals当前请求、Pending、进出连接数以及 router 级别的服务/客户端仪表盘图形绘制成功率时间序列图基于 SmoothieChart 的 canvas 实现js/src/success_rate_graph.js并以 100% 参考线、99.99~100.001 的默认 Y 轴范围保证纯成功曲线不贴顶格式化工具js/src/utils.js 提供MsToStringConverter毫秒转可读时长、BytesToStringConverter字节转 KB/MB/GB、SuccessRate成功率计算与sr-good/sr-poor/sr-bad分级着色等通用工具这些工具类也是UtilsSpec.js的主要测试对象。这些模块均位于admin/src/main/resources/io/buoyant/admin/js/src/下与测试js/spec/一一对应是理解面板行为与扩展测试的最佳参照。八、实践清单速览任务命令仓库根目录下说明安装前端依赖cd admin/src/main/resources/io/buoyant/admin npm install一次性执行跑一次单元测试cd admin/src/main/resources/io/buoyant/admin npm test即karma start --single-run静态检查 JScd admin/src/main/resources/io/buoyant/admin npm run eslint即eslint js监听模式自动重跑karma start --autoWatchtrue --singleRunfalse文件变更即重跑常驻进程新增模板后重新编译handlebars -a js/template/ js/template/compiled_templates.js新模板须放入js/template/本地查看面板启动 Linkerd 后访问 admin 服务默认http://host:9990或 TLS 下的 https静态资源由/admin/files/提供以上流程完全基于当前仓库 admin/src/main/resources/io/buoyant/admin/README.md 及同目录下的package.json、karma.conf.js、js/main-linkerd.js、js/spec/test-main.js等真实文件整理开发者在修改面板前端时可按此路径快速进入迭代循环。赞分享云原生网络微服务【免费下载链接】linkerdOld repo for Linkerd 1.x. See the linkerd2 repo for Linkerd 2.x.项目地址https://gitcode.com/gh_mirrors/li/linkerd点击查看免费下载相关推荐Streama前端单元测试Jasmine与Karma配置指南Streama前端单元测试Jasmine与Karma配置指南 Streama作为一款自托管流媒体服务器Self hosted streaming media后端音视频视频requirejs模块化测试框架集成Jasmine与Mocha实战requirejs模块化测试框架集成Jasmine与Mocha实战 你是否在RequireJS项目中遇到过模块化测试的困境当代码拆分为数十个AMD模块后传前端MEAN.JS前端测试框架Karma与Jasmine完整使用指南MEAN.JS前端测试框架Karma与Jasmine完整使用指南 MEAN.JS是一个基于MongoDB、Express、AngularJS和Node.js的后端前端上一篇Apache Storm 非 JVM 语言支持指南用 Multi-Lang 协议实现 Shell Spout / Bolt 与跨语言 DSL下一篇3分钟搞懂Coze Studio智能体知识库更新增量索引与全量重建方案对比创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考