From 135e1e976de6fd6f3e465311e77ff3296b0d5cc3 Mon Sep 17 00:00:00 2001 From: likexuan Date: Tue, 27 Sep 2022 14:49:45 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-2226=20feat=20:=20Explore=20=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=20PromQL=20=E4=BB=8B=E7=BB=8D=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../page/dashboard/explore/explore.scss | 225 +++------ .../page/dashboard/explore/exploreItem.vue | 432 +++++++++--------- 2 files changed, 271 insertions(+), 386 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss index fba99f49b..f56dc3321 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss @@ -11,6 +11,8 @@ background-color: $--background-color-empty; color: $--color-text-primary; padding: 15px; + overflow-x: scroll; + padding-bottom: 0 !important; } pre code { @@ -205,167 +207,46 @@ border-color: $--button-icon-border-color; } } - .binary-operator-precedence{ - ul li{ + .binary-operator-precedence { + ul li { list-style: decimal !important; } } } -/*外部引用 样式start*/ -// .doc-content { -// font-size: 16px; -// } - -// .doc-content p, -// .doc-content.ul, -// .doc-content .alert { -// margin: 15px 0 15px 0; -// line-height: 1.5; -// color: $--color-text-primary; -// } - -// .doc-content .content-divider { -// height: 1px; -// width: 100%; -// border-bottom: 2px solid $--explore-border-color-bottom; -// margin: 5px 0; -// } - -// .doc-content > h1 { -// color: #e6522c; -// font-size: 30px; -// text-transform: uppercase; -// } - -// .doc-content > h1 a { -// color: #000 !important; -// } - -// .doc-content.blog > h1 { -// text-transform: none; -// } - -// .doc-content.blog .sponsor-logos > a > img { -// width: 250px; -// display: inline-block !important; -// margin: 15px 55px; -// } -// .doc-content > h1 { -// color: #e6522c; -// font-size: 24px; -// } - -// .doc-content > h2 { -// color: #e6522c; -// font-size: 18px; -// } - -// .doc-content > h2 code { -// color: #e6522c; -// background: none; -// } - -// .doc-content > h3 { -// font-size: 20px; -// font-weight: bold; -// } - -// .doc-content > h4 { -// font-weight: bold; -// font-size: 18px; -// margin-top: 20px; -// } - -// .doc-content a.header-anchor { -// padding-left: 15px; -// color: gray; -// text-decoration: none; -// } - -// .doc-content img { -// width: 90%; -// margin-left: auto; -// margin-right: auto; -// display: block; -// } - -// .doc-content img.orig-size { -// width: auto; -// margin-left: 0; -// } - -// .doc-content .open-source-notice { -// color: $--color-text-regular; -// background-color: $--background-color-base; -// text-align: center; -// padding: 0.8em; -// margin-top: 1.5em; -// } - -// .toc { -// padding: 1em; -// background-color: $--background-color-base; -// } -// .toc-right { -// float: right; -// width: 40%; -// margin: 0 0 0.5em 0.5em; -// } - -// .toc ul { -// padding: 0 0 0 1.5em; -// margin: 0; -// } - -// .toc a code { -// color: #337ab7; -// background-color: transparent; -// } code { color: $--color-text-primary; } -aside { - color: $--color-text-secondary; - padding-bottom: 8px; - border-bottom: 1px solid #aaa; -} +// aside { +// color: $--color-text-secondary; +// padding-bottom: 8px; +// border-bottom: 1px solid #aaa; +// } +// article { +// margin: 10px 0 60px 0; +// } -article { - margin: 10px 0 60px 0; -} -.explore .introduce-view .title-heard.info-room{ - position: relative; + +// exploreItem +.explore .introduce-view .title-heard.info-room { .logs-content { font-size: 16px; - ul li{ + ul li { margin: 10px 0 10px 24px; list-style: disc; } - p{ + p { margin: 15px 0; } - code{ + code { padding: 5px; background-color: $--background-color-empty; } - .log-link:hover{ - cursor: pointer; - border-bottom: 1px solid #3C92F1; - } - .fillbox{ - display: block; - line-height: 25px; - padding: 10px; - } - h2{ - color: #e6522c; - font-size: 18px; - font-weight: 600; - } - > h1,.page-header { + + > h1, + .page-header { color: #e6522c; font-size: 24px; font-weight: 600; @@ -377,42 +258,49 @@ article { text-decoration: none; } } - > h1,.page-header-one { + > h1, + .page-header-one { color: #e6522c; font-size: 22px; font-weight: 600; margin-top: 15px; text-transform: none; } - > h1,.page-header-two { + > h1, + .page-header-two { color: #e6522c; font-size: 20px; font-weight: 600; margin-top: 15px; text-transform: none; } - .title-heard__divider{ + h2 { + color: #e6522c; + font-size: 18px; + font-weight: 600; + } + .title-heard__divider { margin: 5px 0 5px 0; } - .page-header-label{ + .page-header-label { p { - width: 100%; font-size: 16px; color: $--color-text-primary; font-weight: 400; } } - .json-module{ - padding-left: 20px; + // 链接 + .log-link:hover { + cursor: pointer; + border-bottom: 1px solid #3c92f1; } - .box-overflow{ - overflow-x: scroll; + // 阴影部分 + .fillbox { + display: block; + line-height: 25px; + padding: 10px; } - pre.box-overflow{ - overflow-x: scroll; - padding-bottom: 0 !important; - } - .logfmt-module,.json-module,.pattern-module,.regular-module,.unpack-module,.line-module,.formatting-module,.unwrapped-module{ + .logfmt-module { pre { border: 0; border-left: 0; @@ -424,39 +312,38 @@ article { line-height: 25px; } } - .img-hidden{ + // 图片转文字 + .img-hidden { width: 582px; overflow: hidden; - img{ + img { filter: drop-shadow(-550px 0px $--color-text-primary); transform: translateX(570px); } } } - .catalog{ + // 目录 + .catalog { width: 360px; - position: absolute; - top: 75px; - right: 25px; + float: right; + margin-left: 8px; + margin-top: 5px; background-color: $--background-color-empty; padding: 15px 10px; - ul li{ + ul li { margin: 3px 14px 3px 24px; list-style: circle; - color: #3C92F1; + color: #3c92f1; } - ul.catalog-square>li{ + ul.catalog-square > li { list-style: square; } - ul.catalog-disc>li{ + ul.catalog-disc > li { list-style: disc; } - span:hover{ + span:hover { cursor: pointer; - border-bottom: 1px solid #3C92F1; + border-bottom: 1px solid #3c92f1; } } - .box-w-auto{ - width: calc(100% - 390px) !important; - } } diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue index d2fb8e321..5dbfbdb22 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue @@ -203,24 +203,149 @@
-

promql

+

PromQL: Prometheus Query Language

- + +
+
    + +
  • +
    Querying prometheus
    +
      +
    • Examples
    • +
    • Expression language data types
    • +
    • +
      Literals
      +
        +
      • String literals
      • +
      • Float literals
      • +
      +
    • +
    • +
      Time series Selectors
      +
        +
      • Instant vector selectors
      • +
      • Range Vector Selectors
      • +
      • Time Durations
      • +
      • Offset modifier
      • +
      • @ modifier
      • +
      +
    • +
    • Subquery
    • +
    • Operators
    • +
    • Functions
    • +
    • Comments
    • +
    • +
      Gotchas
      +
        +
      • Staleness
      • +
      • Avoiding slow queries and overloads
      • +
      +
    • +
    +
  • + +
  • +
    Operators
    +
      +
    • +
      Binary operators
      +
        +
      • Arithmetic binary operators
      • +
      • Trigonometric binary operators
      • +
      • Comparison binary operators
      • +
      • Logical/set binary operators
      • +
      +
    • +
    • +
      Vector matching
      +
        +
      • Vector matching keywords
      • +
      • Group modifiers
      • +
      • One-to-one vector matches
      • +
      • Many-to-one and one-to-many vector matches
      • +
      +
    • +
    • Aggregation operators
    • +
    • Binary operator precedence
    • +
    +
  • + +
  • +
    Functions
    +
      +
    • abs()
    • +
    • absent()
    • +
    • absent_over_time()
    • +
    • ceil()
    • +
    • changes()
    • +
    • clamp()
    • +
    • clamp_max()
    • +
    • clamp_min()
    • +
    • day_of_month()
    • +
    • day_of_week()
    • +
    • day_of_year()
    • +
    • days_in_month()
    • +
    • delta()
    • +
    • deriv()
    • +
    • exp()
    • +
    • floor()
    • +
    • histogram_quantile()
    • +
    • holt_winters()
    • +
    • hour()
    • +
    • idelta()
    • +
    • increase()
    • +
    • irate()
    • +
    • label_join()
    • +
    • label_replace()
    • +
    • ln()
    • +
    • log2()
    • +
    • log10()
    • +
    • minute()
    • +
    • month()
    • +
    • predict_linear()
    • +
    • rate()
    • +
    • resets()
    • +
    • round()
    • +
    • scalar()
    • +
    • sgn()
    • +
    • sort()
    • +
    • sort_desc()
    • +
    • sqrt()
    • +
    • time()
    • +
    • timestamp()
    • +
    • vector()
    • +
    • year()
    • +
    • <aggregation>_over_time()
    • +
    • Trigonometric Functions
    • +
    +
  • + +
  • +
    Query examples
    +
      +
    • Simple time series selection
    • +
    • Subquery
    • +
    • Using functions, operators, etc.
    • +
    +
  • +
+
-
+

Querying prometheus

Prometheus provides a functional query language called PromQL (Prometheus Query Language) that lets the user select and aggregate time series data in real time. The result of an expression can either be shown as a graph, viewed as tabular data in Prometheus's expression browser, or consumed by external systems via the HTTP API.

-
+

Examples

This document is meant as a reference. For learning, it might be easier to start with a couple of examples.

Expression language data types

- @@ -858,7 +983,7 @@ absent_over_time(sum(nonexistent{job="myjob"})[1h:])
@@ -1092,7 +1217,7 @@ absent_over_time(sum(nonexistent{job="myjob"})[1h:]) instance_memory_limit_bytes - instance_memory_usage_bytes ) / 1024 / 1024

If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:

-
instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
+                    
instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
 instance_cpu_time_ns{app="elephant", proc="worker", rev="34d0f99", env="prod", job="cluster-manager"}
 instance_cpu_time_ns{app="turtle", proc="api", rev="4d3a513", env="prod", job="cluster-manager"}
 instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="cluster-manager"}
@@ -1104,143 +1229,66 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                   
-
-
    - -
  • -
    Querying prometheus
    -
      -
    • Examples
    • -
    • Expression language data types
    • -
    • -
      Literals
      -
        -
      • String literals
      • -
      • Float literals
      • -
      -
    • -
    • -
      Time series Selectors
      -
        -
      • Instant vector selectors
      • -
      • Range Vector Selectors
      • -
      • Time Durations
      • -
      • Offset modifier
      • -
      • @ modifier
      • -
      -
    • -
    • Subquery
    • -
    • Operators
    • -
    • Functions
    • -
    • Comments
    • -
    • -
      Gotchas
      -
        -
      • Staleness
      • -
      • Avoiding slow queries and overloads
      • -
      -
    • -
    -
  • - -
  • -
    Operators
    -
      -
    • -
      Binary operators
      -
        -
      • Arithmetic binary operators
      • -
      • Trigonometric binary operators
      • -
      • Comparison binary operators
      • -
      • Logical/set binary operators
      • -
      -
    • -
    • -
      Vector matching
      -
        -
      • Vector matching keywords
      • -
      • Group modifiers
      • -
      • One-to-one vector matches
      • -
      • Many-to-one and one-to-many vector matches
      • -
      -
    • -
    • Aggregation operators
    • -
    • Binary operator precedence
    • -
    -
  • - -
  • -
    Functions
    -
      -
    • abs()
    • -
    • absent()
    • -
    • absent_over_time()
    • -
    • ceil()
    • -
    • changes()
    • -
    • clamp()
    • -
    • clamp_max()
    • -
    • clamp_min()
    • -
    • day_of_month()
    • -
    • day_of_week()
    • -
    • day_of_year()
    • -
    • days_in_month()
    • -
    • delta()
    • -
    • deriv()
    • -
    • exp()
    • -
    • floor()
    • -
    • histogram_quantile()
    • -
    • holt_winters()
    • -
    • hour()
    • -
    • idelta()
    • -
    • increase()
    • -
    • irate()
    • -
    • label_join()
    • -
    • label_replace()
    • -
    • ln()
    • -
    • log2()
    • -
    • log10()
    • -
    • minute()
    • -
    • month()
    • -
    • predict_linear()
    • -
    • rate()
    • -
    • resets()
    • -
    • round()
    • -
    • scalar()
    • -
    • sgn()
    • -
    • sort()
    • -
    • sort_desc()
    • -
    • sqrt()
    • -
    • time()
    • -
    • timestamp()
    • -
    • vector()
    • -
    • year()
    • -
    • <aggregation>_over_time()
    • -
    • Trigonometric Functions
    • -
    -
  • - -
  • -
    Query examples
    -
      -
    • Simple time series selection
    • -
    • Subquery
    • -
    • Using functions, operators, etc.
    • -
    -
  • -
-
-

LogQL: Log query language

-
+ +
+
    +
  • +
    Log queries
    +
      +
    • Log stream selector
    • +
    • +
      Log pipeline
      +
        +
      • Line filter expression
      • +
      • Label filter expression
      • +
      • Parser expression
      • +
      • JSON
      • +
      • logfmt
      • +
      • Pattern
      • +
      • Regular expression
      • +
      • unpack
      • +
      • Line format expression
      • +
      • Labels format expression
      • +
      +
    • +
    • +
      Log queries examples
      +
        +
      • Multiple filtering
      • +
      • Multiple parsers
      • +
      • Formatting
      • +
      +
    • +
    +
  • +
  • +
    Metric queries
    +
      +
    • +
      Range Vector aggregation
      +
        +
      • Log range aggregations
      • +
      • Unwrapped range aggregations
      • +
      • Unwrapped examples
      • +
      +
    • +
    • +
      Built-in aggregation operators
      +
      • Vector aggregation examples
      +
    • +
    +
  • +
+
+

LogQL is Grafana Loki’s PromQL-inspired query language. Queries act as if they are a distributed grep to aggregate log sources. LogQL uses labels and operators for filtering.

There are two types of LogQL queries:

    @@ -1253,7 +1301,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c

    Log queries

    -

    All LogQL queries contain a log stream selector.

    +

    All LogQL queries contain a log stream selector.

    Optionally, the log stream selector can be followed by a log pipeline. A log pipeline is a set of stage expressions that are chained together and applied to the selected log streams. Each expression can filter out, parse, or mutate log lines and their respective labels.

    The following example shows a full log query in action:

    @@ -1263,7 +1311,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
  • a log stream selector {container="query-frontend",namespace="loki-dev"} which targets the query-frontend container in the loki-dev namespace.
  • a log pipeline |= "metrics.go" | logfmt | duration > 10s and throughput_mb < 500 which will filter out log that contains the word metrics.go, then parses each log line to extract more labels and filter with them.
-
To avoid escaping special characters you can use the `(backtick) instead of " when quoting strings. For example `\w+` is the same as "\\w+". This is specially useful when writing a regular expression which contains multiple 
backslashes that require escaping.
+
To avoid escaping special characters you can use the `(backtick) instead of " when quoting strings. For example `\w+` is the same as "\\w+". This is specially useful when writing a regular expression which contains multiple 
backslashes that require escaping.
@@ -1367,7 +1415,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
  • Bytes is a sequence of decimal numbers, each with optional fraction and a unit suffix, such as “42MB”, “1.5Kib” or “20b”. Valid bytes units are “b”, “kib”, “kb”, “mib”, “mb”, “gib”, “gb”, “tib”, “tb”, “pib”, “pb”, “eib”, “eb”.
  • String type work exactly like Prometheus label matchers use in log stream selector. This means you can use the same operations (=,!=,=~,!~).

    -
    The string type is the only one that can filter out a log line with a label __error__.
    +
    The string type is the only one that can filter out a log line with a label __error__.

    Using Duration, Number and Bytes will convert the label value prior to comparision and support the following comparators:

    • == or = for equality.
    • @@ -1393,7 +1441,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c

      It will evaluate first duration >= 20ms or method="GET". To evaluate first method="GET" and size <= 20KB, make sure to use proper parenthesis as shown below.

      | duration >= 20ms or (method="GET" and size <= 20KB)

      -
      Label filter expressions are the only expression allowed after the unwrap expression. This is mainly to allow filtering errors from the metric extraction.
      +
      Label filter expressions are the only expression allowed after the unwrap expression. This is mainly to allow filtering errors from the metric extraction.

      Label filter expressions have support matching IP addresses. See Matching IP addresses for details.

    @@ -1419,7 +1467,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c