OLAP数据库大数据流处理【免费下载链接】pinotApache Pinot - A realtime distributed OLAP datastore项目地址https://gitcode.com/gh_mirrors/pinot/pinot点击查看免费下载Apache Pinot Controller 自带一套基于 React TypeScript 的 Web 控制台Pinot Controller UI用于集群管理、表与 Schema 运维、SQL 查询、任务调度和 ZooKeeper 浏览。本文围绕 pinot-controller/src/main/resources/Readme.md 中给出的开发环境搭建步骤结合仓库内的前端源码、构建配置与 Controller 后端静态资源挂载逻辑系统讲解如何从源码启动 UI 开发服务器、如何与后端 Controller 联调以及生产构建产物如何被打包进 Controller 进程对外提供服务。读完本文你将能够独立完成 Pinot Controller UI 的开发、调试与构建流程。一、Pinot Controller UI 是什么Pinot Controller UI 是 Apache Pinot 的官方 Web 管理界面源码位于仓库的pinot-controller/src/main/resources目录下是一个典型的现代前端工程技术栈React 16 TypeScript Material-UI路由使用react-router-domHashRouter请求库使用axios代码编辑器使用 CodeMirror用于 SQL 查询编辑入口文件app/index.tsx 负责将App组件挂载到#app节点外层依次包裹HashRouter、MuiThemeProvider、NotificationContextProvider和AuthProvider页面结构页面组件集中在 app/pages 目录包括查询控制台Query.tsx、租户管理Tenants*.tsx、实例管理Instance*、表/段管理TablesListingPage.tsx、Minion 任务管理MinionTaskManager.tsx、任务队列TaskQueue*.tsx、ZooKeeper 浏览器ZookeeperPage.tsx以及登录页LoginPage.tsx后端 API 封装所有对 Controller REST API 的调用统一收敛在 app/requests/index.ts如/tenants、/tables、/schemas、/segments、/instances、/tasks、/zk/*、/sql等接口都有对应的封装函数。因此开发 UI 的前提是理解它的目录组织app/存放全部业务代码webpack.config.js与tsconfig.json定义构建与开发服务器行为package.json声明脚本与依赖swagger/存放与后端接口定义相关的资源。二、开发前置条件让 Pinot 后端跑起来UI 本身只是一个前端壳所有数据都来自 Controller 暴露的 REST API。开发时通过 webpack-dev-server 的代理把请求转发到本机 Controller因此在启动 UI 之前必须保证 Pinot 后端Controller已经在9000 端口正常运行。启动后端的最简方式是直接编译并运行仓库根目录下的模块Pinot 的构建方式可参考仓库根目录 README.md 中关于构建的说明典型流程为克隆仓库后在根目录执行 Maven 编译相关模块pinot-controller及其依赖确保mvn与 JDK 环境就绪按 Pinot 的启动方式拉起 ZooKeeper 与 Controller默认 Controller 监听9000端口确认http://localhost:9000可以正常访问返回 UI 首页或 API 响应。提示Readme 中特别强调后端必须运行在 9000 端口这是 webpack-dev-server 代理配置见下文的硬性前提若你修改了 Controller 端口需同步调整代理目标。三、进入 UI 源码目录Readme 给出的第一步是切换到 UI 源码目录。由于 UI 源码位于 Controller 模块的资源目录下因此进入方式为cd pinot-controller/src/main/resources后续所有npm命令都在该目录下执行。该目录下的关键文件包括package.jsonnpm 脚本与依赖清单webpack.config.jswebpack 构建配置与开发服务器代理tsconfig.jsonTypeScript 编译配置app/前端业务源码根目录。四、安装依赖Node 版本要求与 npm installReadme 明确要求使用Node v16 或更精确的 v16.15.0这与本仓库 package.json 锁定的前端依赖版本直接相关——工程内使用了 webpack 4.29.6、webpack-dev-server 3.2.1、TypeScript 3.8.3、React 16.13.1 等较早期版本的工具链Node 版本过新可能导致兼容性问题。建议使用 nvm 之类的版本管理工具切换到 Node 16.15.0 后再执行npm installnpm install会依据package.json与仓库中已提交的 package-lock.json 安装全部依赖。该工程的依赖主要分为两类运行时依赖dependenciesreact、react-dom、react-router-dom、material-ui/core含 icons/lab、axios、codemirror、react-codemirror2、json-bigint、jwt-decode、fortawesome/*、sqltools/formatter等开发依赖devDependenciestypescript、webpack、webpack-cli、webpack-dev-server、ts-loader、css-loader、style-loader、html-webpack-plugin、copy-webpack-plugin、clean-webpack-plugin、eslint与prettier系列等。其中json-bigint用于处理查询结果中的大整数如超精度时间戳jwt-decode用于解析 OIDC 登录后的 JWT access token这两点在后续认证与查询功能中都会用到。五、启动开发服务器npm run dev依赖安装完成后执行npm run dev该命令实际执行的是webpack-dev-server --config ./webpack.config.js --mode development见 package.json 的scripts段。webpack 会从入口./app/index.tsx开始打包然后启动开发服务器。5.1 开发服务器端口与代理webpack.config.js 中配置了devServer默认开发服务器监听8080端口因此 Readme 指出应用运行在http://localhost:8080hot: true开启热模块替换HMR改代码后页面自动刷新compress: true开启 gzip 压缩关键的是proxy配置将/下所有请求代理到http://localhost:9000并设置changeOrigin: true。这正是前面要求后端跑在 9000 端口的原因——前端请求/tables、/sql等 API 时webpack-dev-server 会将其转发给本机 Controller实现前后端分离开发。5.2 开发模式下的功能验证启动后访问http://localhost:8080可以看到登录页或主界面。开发模式与生产模式的主要差异包括使用--mode development并开启source-mapdevtool: source-map方便在浏览器中直接调试 TypeScript/React 源码走webpack-dev-server的内存打包与热更新无需手工构建产物。六、UI 与后端是如何对接的从请求封装到静态资源挂载理解UI 如何工作对开发调试至关重要这里从源码层面梳理两条链路。6.1 前端请求链路前端所有 API 请求都通过 app/utils/axios-config.ts 创建的 axios 实例发出baseApibaseURL: /用于绝大多数 REST 调用transformApi配置了transformResponse: [data data]不自动解析 JSON用于/sql查询等需要保留原始字符串的场景baseApiWithErrors在 API 失败时会抛出错误供需要显式处理错误的新增接口使用文件中注释明确说明新增 API 建议使用它。所有 axios 实例都注册了请求/响应拦截器当启用 Basic Auth 时自动附加Authorization头当启用 OIDC 时附加 access token当收到 401/403 时触发未认证访问回调跳转登录或自动登出。拦截器的具体逻辑见 axios-config.ts 与 app/components/auth/AuthProvider.tsx。业务侧的接口封装集中在 app/requests/index.ts例如getQueryResult通过transformApi.post(/sql, params)提交查询getTableSchema拉取表 SchemascheduleTask调度 Minion 任务等。开发新页面时通常只需要在requests/index.ts增加封装函数再在页面组件中调用即可。6.2 后端如何托管 UI 产物生产环境下Controller 进程直接托管 UI 的静态文件。相关实现分散在 Controller 模块中ControllerAdminApiApplication.java 通过CLStaticHttpHandler将 classpath 下的/webapp/、/webapp/images/、/webapp/js/分别挂载到/index.html、/images/、/js/路径LandingPageHandler.java 在/路径直接返回webapp/index.html作为首页ControllerConf.java 中可配置 UI 资源路径。也就是说npm run build产出的dist/webapp目录见webpack.config.js的output.path在打包进 jar 后会被 Controller 读取并对外服务。开发模式下你访问 8080 端口看到的页面与生产环境访问 9000 端口 Controller 根路径看到的页面是同一套代码的两种形态。6.3 认证方式Controller 支持三种认证工作流见 AuthProvider.tsx 的AuthWorkflowNONE无需认证直接进入应用BASIC由 LoginPage.tsx 提供用户名/密码表单前端用btoa生成Basic base64(username:password)凭据调用/auth/verify校验后写入app_state.authTokenOIDC前端根据/auth/info返回的issuer、clientId、redirectUri构造隐藏表单跳转授权端点通过 token 方式token id_token获取 access token并持久化到 localStorage 中。开发时若后端未开启认证默认 NONEUI 会直接进入主界面无需登录。七、生产构建与常用 npm 脚本package.json 提供的常用脚本如下脚本命令作用devwebpack-dev-server --config ./webpack.config.js --mode development启动开发服务器默认 8080 端口代理 9000startnpm-run-all --parallel lint dev并行执行代码检查与开发服务器buildwebpack --mode production生产构建产物输出到dist/webappbuild-devwebpack --mode development开发模式构建build-ci按CI环境变量选择build或build-devCI 环境专用构建build-analyzewebpack --mode production --analyze带包体积分析的构建linteslint app/**/*.{js,ts,tsx,jsx} --quiet --fixESLint 自动修复生产构建npm run build会执行 webpack.config.js 中的插件链CleanWebpackPlugin清理旧产物、CopyWebpackPlugin将favicon.ico复制到images/、HtmlWebPackPlugin以app/index.html为模板生成带 viewport 元信息的index.html。构建完成后dist/webapp即为可被 Controller 托管的完整静态站点。八、常见开发问题排查8080 端口无法访问确认npm run dev未报错、Node 版本为 v16.15.0 附近若端口被占用可调整 webpack-dev-server 配置或释放端口。页面能打开但数据加载失败优先检查http://localhost:9000的 Controller 是否存活、代理是否生效。可在浏览器 Network 面板确认请求是否被转发到 9000 端口若后端未开启认证而 UI 误以为需要登录检查/auth/info返回的workflow是否为NONE。改代码后页面未热更新确认dev模式非build并检查 webpack 是否报编译错误HMR 需要hot: true默认已开启。构建产物未出现在预期位置生产构建输出目录是dist/webapp由output.path决定不要与dist/下的 TypeScript 编译输出见 tsconfig.json 的outDir混淆。查询结果数字精度丢失查询接口走transformApi保留原始 JSON 字符串配合json-bigint处理大整数不要自行改用默认 JSON 解析的baseApi。九、小结Pinot Controller UI 的开发链路可概括为进入pinot-controller/src/main/resources→ 使用 Node v16.15.0 执行npm install→ 确保 Controller 运行在 9000 端口 → 执行npm run dev访问http://localhost:8080。开发模式下 webpack-dev-server 负责热更新与 API 代理生产模式下npm run build产出dist/webapp由 Controller 静态托管。理解 webpack.config.js 的代理机制、app/requests/index.ts 的接口封装以及 ControllerAdminApiApplication.java 的资源挂载逻辑即可在这套前后端分离架构下高效开发、调试与扩展 Pinot 的 Web 控制台。赞分享OLAP数据库大数据流处理【免费下载链接】pinotApache Pinot - A realtime distributed OLAP datastore项目地址https://gitcode.com/gh_mirrors/pinot/pinot点击查看免费下载相关推荐Locust 源码贡献与开发指南从开发环境搭建、测试调试到 Web UI 前端开发Locust 源码贡献与开发指南从开发环境搭建、测试调试到 Web UI 前端开发 本文是一份面向想要为 Locust 贡献代码的开发者的完整实战指南覆盖在测试性能测试Komodo 开发环境搭建指南从源码构建与调试 Core、Periphery 与 Web UIKomodo 开发环境搭建指南从源码构建与调试 Core、Periphery 与 Web UI 本篇技术指南围绕 Komodo 仓库中的 developmenDevOps容器编排CI/CD运维Apache Doris Web 管理控制台ui开发指南从环境搭建到构建部署Apache Doris Web 管理控制台ui开发指南从环境搭建到构建部署 本篇指南以 Apache Doris 仓库内 ui/README.md htOLAP数据库大数据实时分析上一篇3个颠覆性功能Scarab模组管理器如何重新定义空洞骑士游戏体验下一篇EntityComponentSystemSamples 之 Tornado 示例深度解析用 ECS、Burst 与数组实现 50Hz 的杆件撕裂模拟创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考