From c86c4a67f383ba2721aaae0bb4e3beec90b0d024 Mon Sep 17 00:00:00 2001 From: likexuan Date: Tue, 27 Sep 2022 11:18:55 +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 | 210 +-- .../page/dashboard/explore/exploreItem.vue | 1126 +++++++++++++++-- 2 files changed, 1140 insertions(+), 196 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 52636689c..fba99f49b 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 @@ -54,15 +54,6 @@ } .el-collapse-item__content { padding: 0 30px 20px; - //.chart-body { - // div:nth-of-type(2) { - // background-color: $--chart-background-color !important; - // border-color: $--chart-border-color !important; - // div { - // color: $--color-text-regular; - // } - // } - //} } } .explore { @@ -214,118 +205,122 @@ border-color: $--button-icon-border-color; } } + .binary-operator-precedence{ + ul li{ + list-style: decimal !important; + } + } } /*外部引用 样式start*/ -.doc-content { - font-size: 16px; -} +// .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 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 .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 { +// color: #e6522c; +// font-size: 30px; +// text-transform: uppercase; +// } -.doc-content > h1 a { - color: #000 !important; -} +// .doc-content > h1 a { +// color: #000 !important; +// } -.doc-content.blog > h1 { - text-transform: none; -} +// .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.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 { +// color: #e6522c; +// font-size: 18px; +// } -.doc-content > h2 code { - color: #e6522c; - background: none; -} +// .doc-content > h2 code { +// color: #e6522c; +// background: none; +// } -.doc-content > h3 { - font-size: 20px; - font-weight: bold; -} +// .doc-content > h3 { +// font-size: 20px; +// font-weight: bold; +// } -.doc-content > h4 { - font-weight: bold; - font-size: 18px; - margin-top: 20px; -} +// .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 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 { +// width: 90%; +// margin-left: auto; +// margin-right: auto; +// display: block; +// } -.doc-content img.orig-size { - width: auto; - margin-left: 0; -} +// .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; -} +// .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 { +// padding: 1em; +// background-color: $--background-color-base; +// } +// .toc-right { +// float: right; +// width: 40%; +// margin: 0 0 0.5em 0.5em; +// } -.toc-right { - float: right; - width: 40%; - margin: 0 0 0.5em 0.5em; -} +// .toc ul { +// padding: 0 0 0 1.5em; +// margin: 0; +// } -.toc ul { - padding: 0 0 0 1.5em; - margin: 0; -} - -.toc a code { - color: #337ab7; - background-color: transparent; -} +// .toc a code { +// color: #337ab7; +// background-color: transparent; +// } code { color: $--color-text-primary; @@ -340,7 +335,6 @@ aside { article { margin: 10px 0 60px 0; } -/*外部引用 样式end*/ .explore .introduce-view .title-heard.info-room{ position: relative; @@ -440,6 +434,7 @@ article { } } .catalog{ + width: 360px; position: absolute; top: 75px; right: 25px; @@ -450,9 +445,18 @@ article { list-style: circle; color: #3C92F1; } + ul.catalog-square>li{ + list-style: square; + } + ul.catalog-disc>li{ + list-style: disc; + } span:hover{ cursor: pointer; 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 5a26831e6..d2fb8e321 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue @@ -198,110 +198,1050 @@ +
-
-
-

Query examples

-
-

- Simple time series selection -

+
+
+ +

promql

+
-

Return all time series with the metric http_requests_total:

+ + +
+

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

+ +
+ +

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

+

Prometheus's query language supports basic logical and arithmetic operators. For operations between two instant vectors, the matching behavior can be modified.

+
+ +
+

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
    +
      +
    • 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

-
-

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.

+
+

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:

  • Log queries return the contents of log lines.
  • @@ -313,7 +1253,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:

    @@ -835,12 +1775,12 @@ level=info ts=2020-10-23T20:32:18.068866235Z caller=metrics.go:81 org_id=29 trac
-
    -
  • +
      +
    • Log queries
      -
        -
      • Log stream selector
      • -
      • +
          +
        • Log stream selector
        • +
        • Log pipeline
          • Line filter expression
          • @@ -855,7 +1795,7 @@ level=info ts=2020-10-23T20:32:18.068866235Z caller=metrics.go:81 org_id=29 trac
          • Labels format expression
        • -
        • +
        • Log queries examples
          • Multiple filtering
          • @@ -865,7 +1805,7 @@ level=info ts=2020-10-23T20:32:18.068866235Z caller=metrics.go:81 org_id=29 trac
        • -
        • +
        • Metric queries