Graphite 系列 #4: Graphite WEBAPP

现在我们已经启动了后端组件以及正在运行，并以我们指定的格式存储了数值型时间序列数据，是时候看一下 Graphite 的前端组件了。我们明确需要一种方式来查询和可视化存储的数据。

Graphite web 应用程序是一个运行于 Apache/mod_wsgi 的 Django 应用程序，根据 Github 说明文件。通常，它提供一下功能：

一个基于 URL 的 API 来检索原始数据以及生成图形
一个用户接口来操作指标和构建以及保存仪表盘

安装迷宫

graphite-web 的安装会让你非常迷惑。我已经安装了多次 - 在 RHEL，CentOS， Ubuntu 和 Mac OS X 上 - 并且每次的步骤都不一样。把它当做一场游戏，喜爱它，当所有的依赖已经被安装完成的时候你将知道你已经完成了这个迷宫。

此处输入图片的描述

RHEL 6.5 操作指南：

# cd /tmp
# git clone https://github.com/graphite-project/graphite-web.git
# cd /tmp/graphite-web
# python check-dependencies.py
[REQUIRED] Unable to import the 'django' module, do you have Django installed for python 2.6.6?
[REQUIRED] Unable to import the 'pyparsing' module, do you have pyparsing module installed for python 2.6.6?
[REQUIRED] Unable to import the 'tagging' module, do you have django-tagging installed for python 2.6.6?
[OPTIONAL] Unable to import the 'memcache' module, do you have python-memcached installed for python 2.6.6? This feature is not required but greatly improves performance.
[OPTIONAL] Unable to import the 'txamqp' module, this is required if you want to use AMQP as an input to Carbon. Note that txamqp requires python 2.5 or greater.
[OPTIONAL] Unable to import the 'python-rrdtool' module, this is required for reading RRD.
3 optional dependencies not met. Please consider the optional items before proceeding.
3 necessary dependencies not met. Graphite will not function until these dependencies are fulfilled.

目的是为了安装所有依赖的最新版本。如果你计划使用 AMQ 功能或者是使用 Memcache 作为缓存功能，可安装可选依赖。

# sudo yum install cairo-devel
# sudo yum install pycairo-devel
# sudo pip install django
# sudo pip install pyparsing
# sudo pip install django-tagging
# sudo pip install python-memcached
# sudo pip install txamqp
# sudo pip install pytz
# cd /tmp/graphite-web
# python check-dependencies.py
[OPTIONAL] Unable to import the 'python-rrdtool' module, this is required for reading RRD.
1 optional dependencies not met. Please consider the optional items before proceeding.
All necessary dependencies are met.

我已经安装了足够的包来满足必要的依赖。因此，我胜利了！我现在可以安装 graphite-web：

# cd /tmp/graphite-web
# sudo python setup.py install
# ls -l /opt/graphite/webapp/
total 12
drwxr-xr-x.  6 root root 4096 May 23 14:33 content
drwxr-xr-x. 15 root root 4096 May 23 14:33 graphite
-rw-r--r--.  1 root root  280 May 23 14:33 graphite_web-0.10.0_alpha-py2.6.egg-info

安装脚本移动 web 应用程序文件到位于 /opt/graphite/webapp 的合适位置。

安装数据库

web 应用程序维护一个数据库来存储用户信息和仪表盘。运行一下命令初始化数据库：

# cd /opt/graphite
# export PYTHONPATH=$PYTHONPATH:`pwd`/webapp
# django-admin.py syncdb --settings=graphite.settings
You just installed Django's auth system, which means you don't have any superusers defined.
Would you like to create one now? (yes/no): yes
Username (leave blank to use 'root'): feangulo
Email address: feangulo@yaipan.com
Password: 
Password (again): 
Error: Blank passwords aren't allowed.
Password: 
Password (again): 
Superuser created successfully.
Installing custom SQL ...
Installing indexes ...
Installed 0 object(s) from 0 fixture(s)

这将创建一个数据库并存储在 /opt/graphite/storage 目录：

# ls -l /opt/graphite/storage/graphite.db 
-rw-r--r--. 1 root root 74752 May 23 14:46 /opt/graphite/storage/graphite.db

Graphite Webapp 设置

位于 /opt/graphite/webapp/graphite 目录的配置文件包含了 graphite-webapp 设置。拷贝示例配置文件：

# cd /opt/graphite/webapp/graphite
# cp local_settings.py.example local_settings.py

我做了一些定制设置：

# vi /opt/graphite/webapp/graphite/local_settings.py
#########################
# General Configuration #
#########################
TIME_ZONE = 'UTC'
##########################
# Database Configuration #
##########################
DATABASES = {
    'default': {
        'NAME': '/opt/graphite/storage/graphite.db',
        'ENGINE': 'django.db.backends.sqlite3',
        'USER': '',
        'PASSWORD': '',
        'HOST': '',
        'PORT': ''
    }
}

这时，如果你遵循以前文章的操作说明，你应该仅仅只有一个 carbon-cache 进程运行在 2003 端口，查询端口是 7002。这些是 graphite-webapp 期望的默认值。因此，这时候不需要对配置文件做任何改变。

# ps -efla | grep carbon-cache
1 S root     14101     1  0  80   0 - 75955 ep_pol May20 ?        00:00:26 /usr/bin/python ./carbon-cache.py start
# netstat -nap | grep 2003
tcp        0      0 0.0.0.0:2003                0.0.0.0:*                   LISTEN      14101/python
# netstat -nap | grep 7002
tcp        0      0 0.0.0.0:7002                0.0.0.0:*                   LISTEN      14101/python

尽管如此，你可以在设置文件中明确地指定 carbon-cache 进程从哪里读取。

# vi /opt/graphite/webapp/graphite/local_settings.py
#########################
# Cluster Configuration #
#########################
CARBONLINK_HOSTS = ["127.0.0.1:7002:a"]

注意：这意味着我有一个 carbon-cache 进程运行在本地，查询端口被设置为 7002，名字被设置成 'a' - 在配置文件中默认是没有名字指定的。如果你查看 Carbon 配置文件，你应该看到一些像这样的设置：

# vi /opt/graphite/conf/carbon.conf
[cache]
LINE_RECEIVER_INTERFACE = 0.0.0.0
LINE_RECEIVER_PORT = 2003
CACHE_QUERY_INTERFACE = 0.0.0.0
CACHE_QUERY_PORT = 7002

仪表盘和图形模板配置

graphite webapp 默认自带仪表盘和图形模板。拷贝示例配置文件：

# cd /opt/graphite/conf
# cp dashboard.conf.example dashboard.conf
# cp graphTemplates.conf.example graphTemplates.conf

我修改仪表盘配置文件来生成更大的图形

# vi /opt/graphite/conf/dashboard.conf
[ui]
default_graph_width = 500
default_graph_height = 400
automatic_variants = true
refresh_interval = 60
autocomplete_delay = 375
merge_hover_delay = 750

我修改默认的图形模板使得有一个黑色的背景和白色的前端。我也喜欢更小点的字体。

# vi /opt/graphite/conf/graphTemplates.conf
[default]
background = black
foreground = white
minorLine = grey
majorLine = rose
lineColors = blue,green,red,purple,brown,yellow,aqua,grey,magenta,pink,gold,rose
fontName = Sans
fontSize = 9
fontBold = False
fontItalic = False

运行 web 应用程序

我们最终准备运行 web 应用程序。我将以端口 8085 运行，但是你可以设置你任何喜欢的端口值。运行以下命令：

# cd /opt/graphite
# PYTHONPATH=`pwd`/storage/whisper ./bin/run-graphite-devel-server.py --port=8085 --libs=`pwd`/webapp /opt/graphite 1>/opt/graphite/storage/log/webapp/process.log 2>&1 &
# tail -f /opt/graphite/storage/log/webapp/process.log

打开一个 web 浏览器并输入 http://your-ip:8085。确保 Graphite web 应用程序加载了。如果你正在 tail process.log 文件。你应该可以看到被加载的任何资源以及来自于你浏览器的任何查询。

此处输入图片的描述

操作指标

在前面一篇文章中，我们已经使用 netcat 命令发布了几个指标到 carbon-cache。具体地，我们已经发布了以下：

carbon.agents.graphite-tutorial.metricsReceived
carbon.agents.graphite-tutorial.creates
PRODUCTION.host.graphite-tutorial.responseTime.p95

web 应用程序以树形展示了指标。如果你操作左边面板的指标树，你应该可以看到所有这些指标。

此处输入图片的描述

你可以点击任何指标，它都将被图形化（默认是过去 24 小时）在右边的面板。为了改变查询的时间范围，使用图形上面的按钮。

此处输入图片的描述

创建一个仪表盘

默认的试图可以非常快速的浏览指标和可视化它们。但是如果你想构建一个仪表盘，点击你的浏览器到 http://your-ip:8085/dashboard。页面的顶部位置是操作你数据的另外一种方式。你可以点击 options 来操作，或者是开始键入来获取建议。你可以点击一个指标以及出现在图形底部的图形标题。当你在新指标上保持点击，额外的标题出现在面板下面因此创建了一个仪表盘。有时你想在单个图形上展示多个指标。为了做到这个，拖拽和丢弃在另外一个顶部的标题，这些指标将被图形化在一起。通过拖拽它们，你也可以改变布局中标题的位置。

此处输入图片的描述

用户接口看起来非常简单，但是别灰心。你可以在你的数据指标上做非常丰富的操作。如果你点击一个图形的标题，你讲得到一个对话框。它展示了被图形化的指标的列表并且你可以直接编辑它们。在对话框有多个菜单来在数据上应用函数，改变可视化方面和许多其他操作。

此处输入图片的描述

你也可以配置和保持你的仪表盘，加载其他仪表盘，改变当前仪表盘的时间范围，共享一个仪表盘，除此以外，使用 top-most 菜单。目前为止我最喜爱的特性就是 Dashboard -> Edit Dashboard。当我需要创建或者修改仪表盘的时候，节省了我很多时间。

此处输入图片的描述

为了说明，我将构建一个仪表盘来监控 carbon-cache 进程。正如在前面文章提到的，Carbon 进程报告内部指标。我不喜欢手动构建仪表盘，我使用 Edit Dashboard 特性代替，我的最爱！

此处输入图片的描述

为了构建仪表盘来监控 carbon-cache 进程，在 Edit Dashboard 窗口指定一下。

注意：该仪表盘将监控你运行的所有 carbon-cache 进程。注意在指标名称中星号(*) 的使用来匹配以下以 carbon.agents 为前缀的所有值。

[
  {
    "target": [
      "aliasByNode(carbon.agents.*.metricsReceived,2)"
    ],
    "title": "Carbon Caches - Metrics Received"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.creates,2)"
    ],
    "title": "Carbon Caches - Create Operations"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.cpuUsage,2)"
    ],
    "title": "Carbon Caches - CPU Usage"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.memUsage,2)"
    ],
    "title": "Carbon Caches - Memory Usage"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.updateOperations,2)"
    ],
    "title": "Carbon Caches - Update Operations"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.pointsPerUpdate,2)"
    ],
    "title": "Carbon Caches - Points per Update"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.avgUpdateTime,2)"
    ],
    "title": "Carbon Caches - Average Update Time"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.committedPoints,2)"
    ],
    "title": "Carbon Caches - Committed Points"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.errors,2)"
    ],
    "title": "Carbon Caches - Errors"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.cache.size,2)"
    ],
    "title": "Carbon Caches - Cache Size"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.cache.queues,2)"
    ],
    "title": "Carbon Caches - Cache Queues"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.cache.overflow,2)"
    ],
    "title": "Carbon Caches - Cache Overflow"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.cache.queries,2)"
    ],
    "title": "Carbon Caches - Cache Queries"
  },
  {
    "target": [
      "aliasByNode(carbon.agents.*.cache.bulk_queries,2)"
    ],
    "title": "Carbon Caches - Cache Bulk Queries"
  }
]

更新仪表盘的定义，你将看到这样的图表：

此处输入图片的描述

在 Edit Dashboard 对话框改变内容更新在浏览器上的仪表盘。尽管如此，还没有把它保存到 Graphite 的内部仪表盘数据库。继续并保存使得你可以分享它并在以后使用。

此处输入图片的描述

为了查询仪表盘，打开 Finder：

此处输入图片的描述

在一个安装在生产环境的 Graphite，Graphite Caches 仪表盘看起来像这样：

此处输入图片的描述

使用 Graphlot

仪表盘图形非常漂亮，但是有时候你想更进一步。如果在一个图形中有多个线条，我想停在线条上并获得在该时间点上的值。对于像这样的情况，Graphlot 可以胜任。在你的浏览器输入 http://your-ip:8085/graphlot。键入你想调查和修改时间范围的指标。在你可以停留的线条上以一个交互式的图形结束来取得关于正确指标的信息和在那个时间点上的值。

此处输入图片的描述

Graphlot 特性在 Grafana 存在之前是非常好的。在下一篇问中，我将涉及 Grafana 工具。

它的所有功能

大家或许对 Grapgite 抱怨很多：它不能很好的扩展，存储方式不是最佳的 - 但是你不得不接受 Graphite 的 API 是非常好用的事实。有一个用户界面是幻想，但是不要忘记你可以通过 UI 做什么，你也可以发起一个 graphite-web API 请求。用户可以通过构建一个简单的 URL 来请求一个定制图形。参数在 HTTP GET 请求的查询字符串中指定。默认情况下返回一个 PNG 图片作为响应，但是用户或许想指定要求的响应格式 - 比如，JSON 数据。

示例请求 #1:

指标：所有 carbon-cache 进程的 CPU 利用率
图形规格： 500x300
时间范围： 12小时以前直到 5 分钟以前
响应格式： PNG 图片（默认）

http://your-ip:8085/render?target=carbon.agents.*.cpuUsage&width=500&height=300&from=-15min&until=-10min

此处输入图片的描述

示例请求 #2:

指标：所有 carbon-cache 进程的 CPU 利用率
图形规格： 500x300
时间范围： 12小时以前直到 5 分钟以前
响应格式： JSON 数据

http://your-ip:8085/render?target=carbon.agents.*.cpuUsage&from=-15min&until=-10min&format=json

[{"target": "carbon.agents.ip-10-43-138-169-a.cpuUsage",
  "datapoints": [
   [0.0099983003179772295, 1400946420], 
   [0.01166495819015459, 1400946480], 
   [0.011676197879629324, 1400946540], 
   [0.011662787363860038, 1400946600], 
   [0.011656008932948525, 1400946660]
  ]
}]

<pre><code><br />Graphite 的 API 不仅支持多种多样的展示选项而且数据操作功能遵循一个简单的函数语法。函数是内置的，允许复杂的表达式和计算。 查看在线文档精读所有可用的函数。

- Graphite 函数: http://graphite.readthedocs.org/en/latest/functions.html

在所有 p95 主机的延迟函数示例：

- averageSeries: 计算一套所有值的平均值
   - 我们想查看在所有 p95 延迟的平均值
- scale: multiply a value by a constant
   - The latencies are reported in milliseconds, but we want to display them in seconds
- alias: change the name of the metric when displaying
   - Instead of the full metric name, we want to display only avg p95 in the graph legend

</code></pre>

alias(scale(averageSeries(PRODUCTION.host.*.requests.p95),0.001),'avg p95')

此处输入图片的描述

Graphite 系列 #4: Graphite WEBAPP

安装迷宫

安装数据库

Graphite Webapp 设置

仪表盘和图形模板配置

运行 web 应用程序

操作指标

创建一个仪表盘

使用 Graphlot

它的所有功能

yexiaobai

引用和评论

K8S client-go Patch example