Tech Tool

Grafana App Project

https://github.com/noovertime7/dailytest

目标:

  1. 有关 prometheus 采集接口和对外接口，以及自带报警功能的程序使用
  2. 暂时不使用 grafana 项目，自行绘制图表，自行展示。增加项目可控性。

方案

方案一：

使用 grafana plugin 作为项目核心

方案二：

自行解决绘制仪表盘的问题，使用 echart + vue 增加项目可控性。 只留一个 prometheus 的跨越点。

怎么做 

git clone --depth=1 https://github.com/grafana/grafana.git
cd grafana
make all

./bin/docker-compose.yml

services:
  grafana:
    image: grafana/grafana:10.4.2-ubuntu
    container_name: grafana
    restart: unless-stopped
    # entrypoint: "/path/to/your/entrypoint.sh"
    volumes:
      - ./linux-amd64:/usr/share/grafana/bin
      # - ./grafana/provisioning/:/etc/grafana/provisioning/
    environment:
      - GF_SECURITY_ADMIN_USER=${ADMIN_USER:-admin}
      - GF_SECURITY_ADMIN_PASSWORD=${ADMIN_PASSWORD:-admin}
      - GF_USERS_ALLOW_SIGN_UP=false
      - GF_SECURITY_ALLOW_EMBEDDING=true
      - GF_DATAPROXY_KEEP_ALIVE_SECONDS=2s
      - GF_ANALYTICS_REPORTING_ENABLED=false
      - GF_ANALYTICS_CHECK_FOR_UPDATES=false
      - GF_ANALYTICS_CHECK_FOR_PLUGIN_UPDATES=false
      - GF_UNIFIED_ALERTING_MIN_INTERVAL=10s
      - GF_HELP=false
      - GF_PROFILE=false
      - GF_NEWS=false
      - GF_METRICS_INTERVAL_SECONDS=2s
      - GF_DASHBOARDS_MIN_REFRESH_INTERVAL=2s
      - GF_AUTH_ANONYMOUS_ENABLED=true
      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
      # https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#docker
    ports:
      - 3000:3000

cd bin
docker-compose up -d

尝试通过以下修改对底部进行修改

+++ b/public/app/core/components/Footer/Footer.tsx
@@ -103,15 +103,6 @@ export const Footer = React.memo(({ customLinks, hideEdition }: Props) => {

   return (
     <footer className="footer">
-      <div className="text-center">
-        <ul>
-          {links.map((link, index) => (
-            <li key={index}>
-              <FooterItem item={link} />
-            </li>
-          ))}
-        </ul>
-      </div>
     </footer>
   );
 });

编译访问成功，修改很顺利

+++ b/public/app/core/components/Branding/Branding.tsx
@@ -60,7 +60,7 @@ export class Branding {
   static MenuLogo = MenuLogo;
   static LoginBoxBackground = LoginBoxBackground;
   static AppTitle = 'Grafana';
-  static LoginTitle = 'Welcome to Grafana';
+  static LoginTitle = '';
   static HideEdition = false;
   static GetLoginSubTitle = (): null | string => {
     return null;

通过上面的修改，尝试去除标题(打算继续去除LOGO)，发现编译成功，但是访问时直接提示了 If you're seeing this Grafana has failed to load its application files 建议通过定制主题来解决，主题其实是一个 css 文件，最终需要通过插件的方式来加载。