构建自定义版本

将thanos rule 页面的告警表达式的 expr 超链接修改为跳转到自定义的web UI。

环境准备

golang， git， node.js，具体的组件版本依赖写在 pkg/ui/react-app/package.json

golang

#下载 go version go1.17.6

cat /etc/profile
export GOROOT=/usr/local/go
export PATH=$PATH:$GOROOT/bin
export GOPATH=/data0/go
export PATH=$PATH:$GOPATH/BIN

node.js

# 下载二进制包 node-v16.13.2-linux-x64.tar.xz 
 xz -d node-v16.13.2-linux-x64.tar.xz 
 tar xvf node-v16.13.2-linux-x64.tar
 cd  node-v16.13.2-linux-x64
 cp lib/ /usr/lib -rp
 cp -d bin/* /usr/bin/
 
 # node --version 
 v16.13.2

构建分析

thanos 本身 golang 编写，web ui recat框架实现。需要node.js 环境支持，否则构建会报错。

构建本身使用 makefile，只make build 默认不构建 web ui，所以修改源代码不会生效。需要先make assets，再 make build 。

具体的构建须知写在 pkg/ui/react-app/README.md

源码修改

github拉取 thanos-0.24.0 源码

相关源码位于

#vim pkg/ui/react-app/src/utils/index.ts		  
export const createExternalExpressionLink = (expr: string): string => {
  const expLink = createExpressionLink(expr);
  return `${queryURL}${expLink.replace(/^\.\./, '')}`;
};

export const createExpressionLink = (expr: string): string => {
  return `../graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.stacked=0&g0.range_input=1h`;
};

具体配置位置在：

#pkg/ui/react-app/src/thanos/config.ts 
declare const THANOS_QUERY_URL: string;

export let queryURL = THANOS_QUERY_URL;
if (queryURL === '' || queryURL === '{{ .queryURL }}') {
  queryURL = 'http://10.204.11.182:10904';

queryURL 写死的 http://localhost:10902，修改成自己的url即可。