Merge remote-tracking branch 'origin/codeCheck' into codeCheck
This commit is contained in:
陈劲松
@@ -20,12 +20,12 @@
|
||||
v-for="(item,index) in dropColRes"
|
||||
:key="index"
|
||||
class="elementset-label"
|
||||
:class="index==0 || index == 1 ? 'elementset-label-disabled' : ''"
|
||||
:class="!allowedAll&&(index==0 || index == 1) ? 'elementset-label-disabled' : ''"
|
||||
:title="item.visibility == 'disabled' ? other.inDevelopment : ''"
|
||||
@click="addcol(item,index)"
|
||||
:id="'element-set-el-'+index"
|
||||
>
|
||||
<i class="el-icon-check" v-if="index==0||index==1||item.visibility=='disabled'"></i>
|
||||
<i class="el-icon-check" v-if="!allowedAll&&(index==0||index==1||item.visibility=='disabled')"></i>
|
||||
<i v-else class="el-icon-check" v-show="item.show"></i>
|
||||
<span>{{item.label}}</span>
|
||||
</div>
|
||||
@@ -55,7 +55,13 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["dropCol","tableTitle","path"],
|
||||
// props: ["dropCol","tableTitle","path"],
|
||||
props:{
|
||||
dropCol:{},
|
||||
tableTitle:{},
|
||||
path:{},
|
||||
allowedAll:{default:false},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
other: this.$t("overall.other"),
|
||||
@@ -123,7 +129,7 @@ export default {
|
||||
},
|
||||
//下拉选项选择
|
||||
addcol(val, index) {
|
||||
if (index == 0 || index == 1) {
|
||||
if (!this.allowedAll&&(index == 0 || index == 1)) {
|
||||
this.dropColRes[index].show = true;
|
||||
} else {
|
||||
this.dropColRes[index].show = !this.dropColRes[index].show;
|
||||
|
||||
@@ -43,9 +43,6 @@
|
||||
<div @click="jumpTo('panel')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="1-2">
|
||||
<div @click="jumpTo('metricPreview')" :class="{'menu-item-active' :activeIndex == 'metricPreview'}">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="1-3">
|
||||
<div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.metricPreview.title')}}</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
@@ -14,7 +14,9 @@
|
||||
<el-scrollbar style="height: 100%">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="top-tools" style="z-index: 1">
|
||||
<button :disabled="saveDisabled" type="button" @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
|
||||
<button :disabled="saveDisabled" type="button" @click="saveChart"
|
||||
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
|
||||
:class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
|
||||
{{$t('dashboard.metric.saveChart')}}
|
||||
</button>
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
|
||||
@@ -51,9 +53,11 @@
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="expression-room">
|
||||
<!--坑，这个index居然是从1开始-->
|
||||
<promql-input
|
||||
v-for="index of promqlCount"
|
||||
:key="expressions[index]"
|
||||
v-for="index of promqlKeys.length"
|
||||
:id="promqlKeys[index-1]"
|
||||
:key="promqlKeys[index-1]"
|
||||
:expression-list="expressions"
|
||||
:index="index"
|
||||
@change="expressionChange"
|
||||
@@ -61,13 +65,15 @@
|
||||
@removeExpression="removeExpression"
|
||||
></promql-input>
|
||||
</div>
|
||||
<div class="chart-view " v-show="!showIntroduce" :class="{'shrink-view':!chartVisible || !defaultChartVisible}">
|
||||
<div class="chart-view " v-show="!showIntroduce"
|
||||
:class="{'shrink-view':!chartVisible || !defaultChartVisible}">
|
||||
<div class="view-title" @click="changeChartVisible"><i class="el-icon-caret-top"></i> graph</div>
|
||||
<div class="chart-room">
|
||||
<chart ref="exploreChart"></chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-view " v-show="!showIntroduce" :class="{'shrink-view':!tableVisible || !defaultTableVisible}">
|
||||
<div class="table-view " v-show="!showIntroduce"
|
||||
:class="{'shrink-view':!tableVisible || !defaultTableVisible}">
|
||||
<div class="view-title" @click="changeTableVisible"><i class="el-icon-caret-top"></i> table</div>
|
||||
<div class="table-room">
|
||||
<el-table class="nz-table explore-table"
|
||||
@@ -80,49 +86,131 @@
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tableLabels"
|
||||
v-for="(item, index) in showTableLabels"
|
||||
v-if="item.show"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
></el-table-column>
|
||||
<el-table-column width="28">
|
||||
<template slot="header" slot-scope="scope" :resizable="false">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false"></pagination>
|
||||
<pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"
|
||||
:append-to-body="false"></pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduce-view" v-show="showIntroduce">
|
||||
<div class="info-room">
|
||||
<div><h2>PromQL Cheat Sheet</h2>
|
||||
<div class="cheat-sheet-item">
|
||||
<div class="cheat-sheet-item__title">Request Rate</div>
|
||||
<div class="cheat-sheet-item__example"><code>rate(http_request_total[5m])</code></div>
|
||||
<div class="cheat-sheet-item__label">Given an HTTP request counter, this query calculates the
|
||||
per-second average request rate over the last 5 minutes.
|
||||
</div>
|
||||
</div>
|
||||
<div class="cheat-sheet-item">
|
||||
<div class="cheat-sheet-item__title">95th Percentile of Request Latencies</div>
|
||||
<div class="cheat-sheet-item__example"><code>histogram_quantile(0.95,
|
||||
sum(rate(prometheus_http_request_duration_seconds_bucket[5m])) by (le))</code></div>
|
||||
<div class="cheat-sheet-item__label">Calculates the 95th percentile of HTTP request rate over 5
|
||||
minute windows.
|
||||
</div>
|
||||
</div>
|
||||
<div class="cheat-sheet-item">
|
||||
<div class="cheat-sheet-item__title">Alerts Firing</div>
|
||||
<div class="cheat-sheet-item__example"><code>sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h]))
|
||||
by (alertname))</code></div>
|
||||
<div class="cheat-sheet-item__label">Sums up the alerts that have been firing over the last 24
|
||||
hours.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 doc-content">
|
||||
<h2 >
|
||||
Simple time series selection
|
||||
</h2>
|
||||
|
||||
<p>Return all time series with the metric <code>http_requests_total</code>:</p>
|
||||
|
||||
<pre><code>http_requests_total</code></pre>
|
||||
|
||||
<p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
|
||||
|
||||
<pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
|
||||
|
||||
<p>Return a whole range of time (in this case 5 minutes) for the same vector,
|
||||
making it a range vector:</p>
|
||||
|
||||
<pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
|
||||
|
||||
<p>Note that an expression resulting in a range vector cannot be graphed directly,
|
||||
but viewed in the tabular ("Console") view of the expression browser.</p>
|
||||
|
||||
<p>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 <code>server</code>:</p>
|
||||
|
||||
<pre><code>http_requests_total{job=~".*server"}</code></pre>
|
||||
|
||||
<p>All regular expressions in Prometheus use RE2 syntax.</p>
|
||||
|
||||
<p>To select all HTTP status codes except 4xx ones, you could run:</p>
|
||||
|
||||
<pre><code>http_requests_total{status!~"4.."}</code></pre>
|
||||
|
||||
<h2 >
|
||||
Subquery
|
||||
</h2>
|
||||
|
||||
<p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
|
||||
|
||||
<pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
|
||||
|
||||
<p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
|
||||
|
||||
<pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
|
||||
|
||||
<h2 >
|
||||
Using functions, operators, etc.
|
||||
</h2>
|
||||
|
||||
<p>Return the per-second rate for all time series with the <code>http_requests_total</code>
|
||||
metric name, as measured over the last 5 minutes:</p>
|
||||
|
||||
<pre><code>rate(http_requests_total[5m])</code></pre>
|
||||
|
||||
<p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
|
||||
(fanout by job name) and <code>instance</code> (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 <code>job</code> dimension:</p>
|
||||
|
||||
<pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
|
||||
|
||||
<p>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):</p>
|
||||
|
||||
<pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
|
||||
|
||||
<p>The same expression, but summed by application, could be written like this:</p>
|
||||
|
||||
<pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
|
||||
|
||||
<p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
|
||||
|
||||
<pre><code>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"}
|
||||
...
|
||||
</code></pre>
|
||||
|
||||
<p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
|
||||
|
||||
<pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
|
||||
|
||||
<p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
|
||||
|
||||
<pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" ></chart-box>
|
||||
<chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess"></chart-box>
|
||||
<element-set
|
||||
:allowed-all="true"
|
||||
v-clickoutside="elementsetHide"
|
||||
:dropCol="dropCol"
|
||||
@tablelable="tablelabelEmit"
|
||||
:table-title="tableLabels"
|
||||
ref="elementset"
|
||||
></element-set>
|
||||
</div>
|
||||
</left-menu>
|
||||
</div>
|
||||
@@ -134,23 +222,25 @@
|
||||
import chart from "../overview/chart";
|
||||
import axios from 'axios';
|
||||
import chartBox from "../../../page/dashboard/chartBox";
|
||||
|
||||
export default {
|
||||
name: "explore",
|
||||
components: {
|
||||
'promql-input': promqlInput,
|
||||
'chart': chart,
|
||||
'chart-box':chartBox,
|
||||
'chart-box': chartBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
promqlCount: 1,
|
||||
promqlKeys: [],
|
||||
expressions: [''],
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
|
||||
filterTime: {},
|
||||
visible: false,
|
||||
showIntroduce:true,
|
||||
defaultChartVisible:true,
|
||||
defaultTableVisible:true,
|
||||
showIntroduce: true,
|
||||
defaultChartVisible: true,
|
||||
defaultTableVisible: true,
|
||||
chartVisible: true,
|
||||
tableVisible: true,
|
||||
pageObj: {
|
||||
@@ -158,8 +248,10 @@
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
},
|
||||
dropCol: [],
|
||||
tableData: [],
|
||||
tableLabels: [],
|
||||
showTableLabels: [],
|
||||
tableLoading: false,
|
||||
intervalTimer: null,
|
||||
intervalList: [{
|
||||
@@ -179,8 +271,8 @@
|
||||
name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
|
||||
}],
|
||||
interval: 0,
|
||||
saveDisabled:true,
|
||||
panelData:[],
|
||||
saveDisabled: true,
|
||||
panelData: [],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
@@ -268,18 +360,19 @@
|
||||
this.filterTime.startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
|
||||
this.filterTime.endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
|
||||
this.getPanelData();
|
||||
this.promqlKeys.push(this.guid());
|
||||
},
|
||||
methods: {
|
||||
pageNo(val) {
|
||||
this.pageObj.pageNo = val;
|
||||
this.tableData=this.filterShowData(this.storedTableData,this.pageObj)
|
||||
this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
|
||||
},
|
||||
pageSize(val) {
|
||||
this.pageObj.pageSize = val;
|
||||
this.tableData=this.filterShowData(this.storedTableData,this.pageObj)
|
||||
this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
|
||||
},
|
||||
filterShowData(source,pageObj){
|
||||
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
|
||||
filterShowData(source, pageObj) {
|
||||
return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
|
||||
},
|
||||
queryChartData: function () {
|
||||
this.$refs.exploreChart.startLoading();
|
||||
@@ -291,9 +384,9 @@
|
||||
requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime.startTime + '&end=' + this.filterTime.endTime + '&step=15'))
|
||||
}
|
||||
})
|
||||
if(requestArr.length>0){
|
||||
this.showIntroduce=false;
|
||||
this.saveDisabled=false;
|
||||
if (requestArr.length > 0) {
|
||||
this.showIntroduce = false;
|
||||
this.saveDisabled = false;
|
||||
}
|
||||
axios.all(requestArr).then(res => {
|
||||
let series = [];
|
||||
@@ -313,7 +406,6 @@
|
||||
seriesItem.data = result.values.map((item) => {
|
||||
return [item[0] * 1000, item[1]];
|
||||
})
|
||||
// console.log(seriesItem);
|
||||
let metric = Object.assign({}, result.metric);
|
||||
seriesItem.name += metric.__name__ + '{';
|
||||
delete metric.__name__;
|
||||
@@ -330,7 +422,7 @@
|
||||
this.$refs.exploreChart.setLegend(legend);
|
||||
this.$refs.exploreChart.setSeries(series)
|
||||
}
|
||||
this.defaultChartVisible=true;
|
||||
this.defaultChartVisible = true;
|
||||
this.$refs.exploreChart.endLoading();
|
||||
})
|
||||
}
|
||||
@@ -340,15 +432,14 @@
|
||||
this.tableLoading = true,
|
||||
setTimeout(() => {
|
||||
if (this.expressions.length > 0) {
|
||||
console.log(this.expressions)
|
||||
let requestArr = [];
|
||||
this.expressions.forEach((item, index) => {
|
||||
if (item != '') {
|
||||
requestArr.push(axios.get('/prom/api/v1/query?query=' + item))
|
||||
}
|
||||
})
|
||||
if(requestArr.length>0){
|
||||
this.showIntroduce=false;
|
||||
if (requestArr.length > 0) {
|
||||
this.showIntroduce = false;
|
||||
}
|
||||
axios.all(requestArr).then(res => {
|
||||
let tData = [];
|
||||
@@ -365,8 +456,9 @@
|
||||
this.$set(metrics, 'value#' + index, result.value[1]);
|
||||
for (let key in metrics) {
|
||||
let label = {
|
||||
label: key,
|
||||
prop: key
|
||||
label: key == '__name__' ? 'metric' : key,
|
||||
prop: key,
|
||||
show: true,
|
||||
}
|
||||
let temp = tLabels.find((item, index) => {
|
||||
return item.prop == label.prop
|
||||
@@ -383,12 +475,14 @@
|
||||
return a.prop.charCodeAt(0) - b.prop.charCodeAt(0);
|
||||
})
|
||||
})
|
||||
this.storedTableData=Object.assign([],tData);
|
||||
this.pageObj.total=this.storedTableData.length;
|
||||
this.tableData = this.filterShowData(this.storedTableData,this.pageObj);
|
||||
this.tableLabels = tLabels;
|
||||
this.storedTableData = Object.assign([], tData);
|
||||
this.pageObj.total = this.storedTableData.length;
|
||||
this.tableData = this.filterShowData(this.storedTableData, this.pageObj);
|
||||
this.tableLabels = Object.assign([], tLabels);
|
||||
this.showTableLabels = Object.assign([], tLabels);
|
||||
this.dropCol = Object.assign([], tLabels);
|
||||
}
|
||||
this.defaultTableVisible=true;
|
||||
this.defaultTableVisible = true;
|
||||
this.tableLoading = false;
|
||||
})
|
||||
}
|
||||
@@ -402,11 +496,13 @@
|
||||
},
|
||||
addExpression: function (index) {
|
||||
this.expressions.splice(index + 1, 0, '');
|
||||
this.promqlKeys.splice(index + 1, 0, this.guid());
|
||||
this.promqlCount++;
|
||||
},
|
||||
removeExpression: function (index) {
|
||||
if (this.promqlCount > 1) {
|
||||
this.expressions.splice(index, 1);
|
||||
this.promqlKeys.splice(index, 1);
|
||||
this.promqlCount--;
|
||||
}
|
||||
},
|
||||
@@ -445,30 +541,29 @@
|
||||
//刷新数据
|
||||
this.expressionChange();
|
||||
},
|
||||
changeChartVisible:function(){
|
||||
this.chartVisible=!this.chartVisible;
|
||||
changeChartVisible: function () {
|
||||
this.chartVisible = !this.chartVisible;
|
||||
},
|
||||
changeTableVisible:function(){
|
||||
this.tableVisible=!this.tableVisible;
|
||||
changeTableVisible: function () {
|
||||
this.tableVisible = !this.tableVisible;
|
||||
},
|
||||
saveChart:function(){
|
||||
saveChart: function () {
|
||||
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
|
||||
this.$refs.addChartModal.show(true);
|
||||
let metricInfo = {};
|
||||
metricInfo.elements = [];
|
||||
// {"metric":"ALERTS_FOR_STATE","elements":[{"expression":"ALERTS_FOR_STATE{project='kafka',module='node_exporter'}","type":"normal"}]}
|
||||
for(let i = 0; i < this.expressions.length; i++) {
|
||||
if(this.expressions[i] != ''){
|
||||
for (let i = 0; i < this.expressions.length; i++) {
|
||||
if (this.expressions[i] != '') {
|
||||
let type = 'expert';
|
||||
metricInfo.metric=this.expressions[i];
|
||||
metricInfo.metric = this.expressions[i];
|
||||
metricInfo.elements.push({expression: this.expressions[i], type: type});
|
||||
}
|
||||
}
|
||||
console.log(metricInfo)
|
||||
this.$refs.addChartModal.createData(-1, metricInfo);
|
||||
},
|
||||
createSuccess(type, response, param, panel) { //添加chart成功
|
||||
this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
|
||||
this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
|
||||
confirmButtonText: this.$t("tip.yes"),
|
||||
cancelButtonText: this.$t("tip.no"),
|
||||
type: 'success'
|
||||
@@ -491,6 +586,45 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
guid() {
|
||||
function S4() {
|
||||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
||||
}
|
||||
|
||||
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
|
||||
},
|
||||
elementsetShow(s, e) {
|
||||
var eventfixed = {
|
||||
shezhi: 0,
|
||||
screen: 0
|
||||
};
|
||||
eventfixed[s] = 1;
|
||||
e.preventDefault();
|
||||
this.$store.commit('setEventfixed', eventfixed);
|
||||
const h = document.documentElement.clientHeight;
|
||||
const w = document.documentElement.clientWidth;
|
||||
const dw = this.$refs.elementset.$el.offsetWidth;
|
||||
const dh = this.$refs.elementset.$el.offsetHeight;
|
||||
let positionx =
|
||||
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
|
||||
console.log(e.clientY + dh)
|
||||
console.log(h)
|
||||
let positiony =
|
||||
e.clientY + dh <= h - 10
|
||||
? e.clientY + 20
|
||||
: e.clientY + 20 - (e.clientY + dh - h + 30);
|
||||
this.$store.commit('setPosition', {positionx, positiony});
|
||||
},
|
||||
elementsetHide() {
|
||||
//悬浮点击空白隐藏
|
||||
this.$refs.elementset.elementsetHide();
|
||||
},
|
||||
tablelabelEmit(data) {
|
||||
//获取子组件传过来的参数
|
||||
this.$store.commit('setHeaderTable', data);
|
||||
console.log(data)
|
||||
this.showTableLabels = data;
|
||||
},
|
||||
jumpTo(data, id) {
|
||||
bus.$emit("menu-change", data);
|
||||
this.$router.push({
|
||||
@@ -501,24 +635,28 @@
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
watch: {
|
||||
promqlCount: function (n, o) {
|
||||
this.expressionChange();
|
||||
},
|
||||
expressions:{
|
||||
immediate:true,
|
||||
handler:function(n,o){
|
||||
if(this.promqlCount == 1 && (!n[0]|| n[0] =='')){
|
||||
this.showIntroduce=true
|
||||
}else if(this.promqlCount>1){
|
||||
let temp=n.find((item,index)=>{item != ''});
|
||||
if(typeof temp != undefined){
|
||||
this.showIntroduce=false;
|
||||
}else{
|
||||
this.showIntroduce=true;
|
||||
expressions: {
|
||||
immediate: true,
|
||||
handler: function (n, o) {
|
||||
if (n.length == 1 && (!n[0] || n[0] == '')) {
|
||||
this.showIntroduce = true
|
||||
} else if (n.length > 1) {
|
||||
let temp = n.find((item, index) => {
|
||||
return item != ''
|
||||
});
|
||||
if (!temp) {
|
||||
this.showIntroduce = true;
|
||||
} else {
|
||||
this.showIntroduce = false;
|
||||
}
|
||||
}else{
|
||||
this.showIntroduce=false;
|
||||
} else {
|
||||
this.showIntroduce = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -536,57 +674,66 @@
|
||||
height: 500px
|
||||
}
|
||||
|
||||
.explore .chart-view, .table-view{
|
||||
.explore .chart-view, .table-view {
|
||||
padding: 10px;
|
||||
border: 1px solid lightgrey;
|
||||
box-sizing: inherit;
|
||||
margin-bottom: 5px;
|
||||
transition: height 1s;
|
||||
}
|
||||
.shrink-view{
|
||||
|
||||
.shrink-view {
|
||||
height: 30px;
|
||||
.view-title i{
|
||||
|
||||
.view-title i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.chart-room,.table-room{
|
||||
|
||||
.chart-room, .table-room {
|
||||
height: 0px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.explore .view-title {
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.introduce-view .info-room{
|
||||
|
||||
.introduce-view .info-room {
|
||||
padding: 24px;
|
||||
background-color: #e9edf2;
|
||||
border-top: 3px solid #3274d9;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 4px;
|
||||
-webkit-box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0,0,0,.1);
|
||||
box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0,0,0,.1);
|
||||
-webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
|
||||
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.info-room .cheat-sheet-item__title {
|
||||
font-size: 21px;
|
||||
}
|
||||
.info-room .cheat-sheet-item__label{
|
||||
|
||||
.info-room .cheat-sheet-item__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
.info-room code{
|
||||
font-family: Menlo,Monaco,Consolas,Courier New,monospace;
|
||||
|
||||
.info-room code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier New, monospace;
|
||||
font-size: 11px;
|
||||
background-color: #e9edf2;
|
||||
color: #52545c;
|
||||
border: 1px solid #c7d0d9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.popover_ul li {
|
||||
padding: 10px 3px;
|
||||
cursor: pointer;
|
||||
@@ -596,6 +743,164 @@
|
||||
background: $dropdown-hover-background-color !important;
|
||||
color: $global-text-color-active !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;
|
||||
}
|
||||
|
||||
.doc-content > h1 {
|
||||
color: #e6522c;
|
||||
font-size: 30px;
|
||||
text-transform: uppercase;
|
||||
margin: 40px 0 10px 0;
|
||||
}
|
||||
|
||||
.doc-content > h1 a {
|
||||
color: #e6522c;
|
||||
}
|
||||
|
||||
.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 > h2 {
|
||||
color: #e6522c;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.doc-content a.header-anchor:after {
|
||||
content: "\F0C1";
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.doc-content a.header-anchor:link,
|
||||
.doc-content a.header-anchor:visited {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.doc-content h1:hover a.header-anchor:hover,
|
||||
.doc-content h2:hover a.header-anchor:hover,
|
||||
.doc-content h3:hover a.header-anchor:hover,
|
||||
.doc-content h4:hover a.header-anchor:hover,
|
||||
.doc-content h5:hover a.header-anchor:hover,
|
||||
.doc-content h6:hover a.header-anchor:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.doc-content h1:hover a.header-anchor,
|
||||
.doc-content h2:hover a.header-anchor,
|
||||
.doc-content h3:hover a.header-anchor,
|
||||
.doc-content h4:hover a.header-anchor,
|
||||
.doc-content h5:hover a.header-anchor,
|
||||
.doc-content h6:hover a.header-anchor {
|
||||
color: #999;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.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: #666;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
padding: 0.8em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.toc {
|
||||
padding: 1em;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid #ddd;
|
||||
border-left: 4px solid #e6522c;
|
||||
border-radius: 0;
|
||||
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
aside {
|
||||
color: #888;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 10px 0 60px 0;
|
||||
}
|
||||
|
||||
/*外部引用 样式end*/
|
||||
</style>
|
||||
<style>
|
||||
.explore-table tr td .cell {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<el-dropdown class="metric-selector">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric <i class="el-icon-arrow-down"></i></el-button>
|
||||
<el-cascader-panel v-show="dropDownVisible" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
|
||||
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
@@ -36,6 +36,7 @@
|
||||
dropDownVisible:false,
|
||||
metricStore:[],
|
||||
metricOptions:[],
|
||||
cascaderValue:'',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -45,6 +46,7 @@
|
||||
methods:{
|
||||
clearExpression:function(){
|
||||
this.expressionChange();
|
||||
this.cascaderValue='';
|
||||
},
|
||||
addExpression:function(){
|
||||
this.$emit('addExpression',this.index);
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
|
||||
<div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
<el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top:0px;" @change="projectChange" ref="projectLeft">
|
||||
<el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
|
||||
<template slot="title">
|
||||
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.name+'-'+item.id==currentProjectTitle || item.id==currentProject.id}" @click.stop="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
|
||||
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.name+'-'+item.id==currentProjectTitle || item.id==currentProject.id}" @click="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
|
||||
<div class="sidebar-info-item-txt">
|
||||
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
|
||||
<span slot="reference" class="">
|
||||
@@ -444,17 +444,17 @@
|
||||
},
|
||||
projectChange:function(){
|
||||
//展开后为避免左侧无数据，显示对应project的第一个module下的endpoint
|
||||
let currentProjectId=this.currentProjectTitle&&this.cuurentProjectTitle != ""?this.currentProjectTitle.split('-')[this.currentProjectTitle.split('-').length -1]:"";
|
||||
if(currentProjectId != ''){
|
||||
currentProjectId=Number.parseInt(currentProjectId);
|
||||
let moduleList=this.getProjectModule(currentProjectId);
|
||||
this.currentModule=moduleList[0];
|
||||
this.currentProject=this.projectList.find((item)=>{
|
||||
return item.id == currentProjectId
|
||||
})
|
||||
this.getEndpointTableData();
|
||||
// this.$store.commit('setProject',null)
|
||||
}
|
||||
// let currentProjectId=this.currentProjectTitle&&this.cuurentProjectTitle != ""?this.currentProjectTitle.split('-')[this.currentProjectTitle.split('-').length -1]:"";
|
||||
// if(currentProjectId != ''){
|
||||
// currentProjectId=Number.parseInt(currentProjectId);
|
||||
// let moduleList=this.getProjectModule(currentProjectId);
|
||||
// this.currentModule=moduleList[0];
|
||||
// this.currentProject=this.projectList.find((item)=>{
|
||||
// return item.id == currentProjectId
|
||||
// })
|
||||
// this.getEndpointTableData();
|
||||
// // this.$store.commit('setProject',null)
|
||||
// }
|
||||
},
|
||||
detailProjectInfo:function(event,project){
|
||||
if(event){
|
||||
@@ -463,7 +463,9 @@
|
||||
this.currentProject=project;
|
||||
this.$store.commit('setProject',this.currentProject)
|
||||
}
|
||||
this.$refs.projectLeft.setActiveNames([]);
|
||||
this.currentModule={};
|
||||
this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
|
||||
// this.$refs.projectLeft.setActiveNames([]);
|
||||
}
|
||||
},
|
||||
getAllModuleList:function(){
|
||||
|
||||
Reference in New Issue
Block a user