diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 5a7d8a5ea..cdcc8a7c8 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -254,6 +254,10 @@ li{ .nz-btn:focus { outline: 0; } +.nz-btn .nz-btn-text{ + font-weight: 500; + white-space: nowrap; +} .nz-btn.nz-btn-disabled { background-image: none; color: #e5e5e5; diff --git a/nezha-fronted/src/components/common/intervalRefresh.vue b/nezha-fronted/src/components/common/intervalRefresh.vue new file mode 100644 index 000000000..d69ba3867 --- /dev/null +++ b/nezha-fronted/src/components/common/intervalRefresh.vue @@ -0,0 +1,227 @@ + + + + + + diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index 1467e59ae..b879e2b4e 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -168,7 +168,7 @@ const cn = { lastSevenDay: "最近7天", lastThirtyDay: "最近30天", refreshInterval: { - never: "从不", + never: "关闭", oneMinute: "1分钟", threeMinutes: "3分钟", fiveMinutes: "5分钟", @@ -196,7 +196,9 @@ const cn = { saveChartToPanel: "保存图表到看板" }, metricPreview: { - title: "探索" + title: "探索", + inputTip:'输入PromQL查询语句', + runQuery:'查询', }, refresh: "刷新", edit: "编辑", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 5a1e8bc42..57c8883d7 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -174,7 +174,7 @@ const en = { lastSevenDay:'Last 7 days', lastThirtyDay:'Last 30 days', refreshInterval:{ - never:'Never', //'从不' + never:'OFF', //'从不' oneMinute:'1 minute', // 1 minute threeMinutes:'3 minutes', //'3分钟' fiveMinutes:'5 minutes', //'5分钟' @@ -202,7 +202,8 @@ const en = { }, metricPreview:{ title:'Explore', - inputTip:'Enter a PromQL query' + inputTip:'Enter a PromQL query', + runQuery:'Run query', }, refresh:'Refresh',//'刷新' edit:'Edit',//'编辑' diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue index b4b1a5c01..f645ffbdd 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue @@ -11,7 +11,6 @@
-
-
- - -
    -
  • - {{i.name}} -
  • -
- -
+ + + +
+
+ +
+ +
- - - -
-
- - -
-
-
 graph
-
- +
+
 graph
+
+ +
-
-
-
 table
-
- - - - + + + +
-
-
-
-
-

- Simple time series selection -

+
+
+
+

+ Simple time series selection +

-

Return all time series with the metric http_requests_total:

+

Return all time series with the metric http_requests_total:

-
http_requests_total
+
http_requests_total
-

Return all time series with the metric http_requests_total and the givenjob and handler labels:

+

Return all time series with the metric http_requests_total and the givenjob and handler labels:

-
http_requests_total{job="apiserver", handler="/api/comments"}
+
http_requests_total{job="apiserver", handler="/api/comments"}
-

Return a whole range of time (in this case 5 minutes) for the same vector, - making it a range vector:

+

Return a whole range of time (in this case 5 minutes) for the same vector, + making it a range vector:

-
http_requests_total{job="apiserver", handler="/api/comments"}[5m]
+
http_requests_total{job="apiserver", handler="/api/comments"}[5m]
-

Note that an expression resulting in a range vector cannot be graphed directly, - but viewed in the tabular ("Console") view of the expression browser.

+

Note that an expression resulting in a range vector cannot be graphed directly, + but viewed in the tabular ("Console") view of the expression browser.

-

Using regular expressions, you could select time series only for jobs whose - name match a certain pattern, in this case, all jobs that end with server:

+

Using regular expressions, you could select time series only for jobs whose + name match a certain pattern, in this case, all jobs that end with server:

-
http_requests_total{job=~".*server"}
+
http_requests_total{job=~".*server"}
-

All regular expressions in Prometheus use RE2 syntax.

+

All regular expressions in Prometheus use RE2 syntax.

-

To select all HTTP status codes except 4xx ones, you could run:

+

To select all HTTP status codes except 4xx ones, you could run:

-
http_requests_total{status!~"4.."}
+
http_requests_total{status!~"4.."}
-

- Subquery -

+

+ Subquery +

-

Return the 5-minute rate of the http_requests_total metric for the past 30 minutes, with a resolution of 1 minute.

+

Return the 5-minute rate of the http_requests_total metric for the past 30 minutes, with a resolution of 1 minute.

-
rate(http_requests_total[5m])[30m:1m]
+
rate(http_requests_total[5m])[30m:1m]
-

This is an example of a nested subquery. The subquery for the deriv function uses the default resolution. Note that using subqueries unnecessarily is unwise.

+

This is an example of a nested subquery. The subquery for the deriv function uses the default resolution. Note that using subqueries unnecessarily is unwise.

-
max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])
+
max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])
-

- Using functions, operators, etc. -

+

+ Using functions, operators, etc. +

-

Return the per-second rate for all time series with the http_requests_total - metric name, as measured over the last 5 minutes:

+

Return the per-second rate for all time series with the http_requests_total + metric name, as measured over the last 5 minutes:

-
rate(http_requests_total[5m])
+
rate(http_requests_total[5m])
-

Assuming that the http_requests_total time series all have the labels job - (fanout by job name) and instance (fanout by instance of the job), we might - want to sum over the rate of all instances, so we get fewer output time series, - but still preserve the job dimension:

+

Assuming that the http_requests_total time series all have the labels job + (fanout by job name) and instance (fanout by instance of the job), we might + want to sum over the rate of all instances, so we get fewer output time series, + but still preserve the job dimension:

-
sum by (job) (rate(http_requests_total[5m]))
+
sum by (job) (rate(http_requests_total[5m]))
-

If we have two different metrics with the same dimensional labels, we can apply - binary operators to them and elements on both sides with the same label set - will get matched and propagated to the output. For example, this expression - returns the unused memory in MiB for every instance (on a fictional cluster - scheduler exposing these metrics about the instances it runs):

+

If we have two different metrics with the same dimensional labels, we can apply + binary operators to them and elements on both sides with the same label set + will get matched and propagated to the output. For example, this expression + returns the unused memory in MiB for every instance (on a fictional cluster + scheduler exposing these metrics about the instances it runs):

-
(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024
+
(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024
-

The same expression, but summed by application, could be written like this:

+

The same expression, but summed by application, could be written like this:

-
sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024
+
sum by (app, proc) (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:

+

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"}
 ...
 
-

...we could get the top 3 CPU users grouped by application (app) and process type (proc) like this:

+

...we could get the top 3 CPU users grouped by application (app) and process type (proc) like this:

-
topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))
+
topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))
-

Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:

+

Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:

-
count by (app) (instance_cpu_time_ns)
+
count by (app) (instance_cpu_time_ns)
+
-
+
+
{ // this.getEndpointTableData(); // }, 200); @@ -794,7 +797,7 @@ currentProjectChange:{ handler(n, o) { this.currentProject = Object.assign({}, n); - this.detailProjectInfo({}); + this.detailProjectInfo(); } }, currentProject(n, o) { diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js index 9c48b6b37..a5740c37f 100644 --- a/nezha-fronted/src/main.js +++ b/nezha-fronted/src/main.js @@ -46,6 +46,7 @@ import "perfect-scrollbar/css/perfect-scrollbar.css"; import loading from "./components/common/loading"; import mibBox from "./components/common/rightBox/mibBox"; import leftMenu from "./components/common/leftMenu"; +import intervalRefresh from "./components/common/intervalRefresh"; Vue.component("Pagination", Pagination); Vue.component("searchInput", searchInput); @@ -69,6 +70,7 @@ Vue.component('loading',loading); Vue.component('bottom-box', bottomBox); Vue.component('mib-box',mibBox); Vue.component('left-menu',leftMenu); +Vue.component('interval-refresh',intervalRefresh); Vue.prototype.$axios = axios; Vue.prototype.$post = post;