940 lines
32 KiB
Vue
940 lines
32 KiB
Vue
<template>
|
||
<div class="explore" v-has="'explore_view'">
|
||
<div class="main-list main-and-sub-transition">
|
||
<!-- 顶部工具栏 -->
|
||
<div class="top-tools" style="z-index: 1">
|
||
<div class="top-tool-main-right">
|
||
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange" ref="pickTime" id="explore">
|
||
<template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
|
||
</pick-time>
|
||
<button :disabled="saveDisabled" @click="saveChart" type="button" v-has="'explore_chart_toAdd'" id="explore-save-chart"
|
||
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>
|
||
</div>
|
||
<div style="height: calc(100% - 50px);width: 100%;" >
|
||
<div ref="scrollWrap" style="height: 100%; overflow: auto;">
|
||
<div class="expression-room right-margin" style="padding-top: 5px" id="explore-promql-box">
|
||
<!--坑，这个index居然是从1开始-->
|
||
<promql-input
|
||
v-for="index of promqlKeys.length"
|
||
:ref="'promql-'+(index-1)"
|
||
:id="promqlKeys[index-1]"
|
||
:key="promqlKeys[index-1]"
|
||
:expression-list="expressions"
|
||
:index="index-1"
|
||
:styleType="1"
|
||
:plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
|
||
@change="expressionChange"
|
||
@addExpression="addExpression"
|
||
@copyExpression="copyExpression"
|
||
@removeExpression="removeExpression"
|
||
></promql-input>
|
||
<!--
|
||
<promql-input
|
||
v-for="index of promqlKeys.length"
|
||
:ref="'promql-'+(index-1)"
|
||
:id="promqlKeys[index-1]"
|
||
:key="promqlKeys[index-1]"
|
||
:expression-list="expressions"
|
||
:index="index-1"
|
||
:styleType="1"
|
||
:history-param="historyParam"
|
||
:plugins="['metric-selector', 'metric-input', 'add', 'remove']"
|
||
@change="expressionChange"
|
||
@addExpression="addExpression"
|
||
@removeExpression="removeExpression"
|
||
></promql-input>
|
||
-->
|
||
</div>
|
||
<div class="chart-view right-margin" v-show="!showIntroduce"
|
||
:class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
|
||
<div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top" ></i> graph</div>
|
||
<div class="chart-room">
|
||
<chart ref="exploreChart" :unit="chartUnit"></chart>
|
||
</div>
|
||
</div>
|
||
<div class="table-view right-margin" v-show="!showIntroduce"
|
||
:class="{'shrink-view':!tableVisible || !defaultTableVisible}" style="position: relative">
|
||
<div class="view-title" @click="changeTableVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top"></i> table</div>
|
||
<div class="table-room">
|
||
<!-- 自定义table列 -->
|
||
<transition name="el-zoom-in-top">
|
||
<element-set
|
||
class="pop-custom-explore"
|
||
v-if="tools.showCustomTableTitle"
|
||
@close="tools.showCustomTableTitle = false"
|
||
:custom-table-title.sync="tools.customTableTitle"
|
||
:original-table-title="tableTitle"
|
||
ref="customTableTitle"
|
||
></element-set>
|
||
</transition>
|
||
<el-table class="nz-table explore-table"
|
||
:data="tableData"
|
||
border
|
||
ref="exploreTable"
|
||
tooltip-effect="light"
|
||
v-loading="tools.loading"
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
:resizable="false"
|
||
v-for="(item, index) in tools.customTableTitle"
|
||
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" v-if="tools.customTableTitle.length>0">
|
||
<template slot="header" :resizable="false">
|
||
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" 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>
|
||
</div>
|
||
</div>
|
||
<div class="introduce-view right-margin" v-show="showIntroduce">
|
||
<div class="info-room">
|
||
<div class="col-md-9 doc-content">
|
||
<h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank" rel="noopener norefferrer"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
|
||
<div class="content-divider"></div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<transition name="right-box">
|
||
<chart-box :chart="chart" :from="$CONSTANTS.fromRoute.explore" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'explore'}" @close="handleBox(false)" @on-create-success="createSuccess" ref="addChartModal" v-if="rightBox.show"></chart-box>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import bus from '../../../../libs/bus'
|
||
import promqlInput from './promqlInput'
|
||
// import promqlInputPlus from "./promqlInputPlus";
|
||
import chart from '../overview/chart'
|
||
import axios from 'axios'
|
||
import chartBox from '../../../page/dashboard/chartBox'
|
||
import { getUUID } from '../../../common/js/common'
|
||
import chartDataFormat from '../../../charts/chartDataFormat'
|
||
|
||
export default {
|
||
name: 'explore',
|
||
components: {
|
||
'promql-input': promqlInput,
|
||
chart: chart,
|
||
'chart-box': chartBox
|
||
},
|
||
data () {
|
||
return {
|
||
rightBox: { // 面板弹出框相关
|
||
show: false
|
||
},
|
||
promqlCount: 1,
|
||
promqlKeys: [],
|
||
expressions: [''],
|
||
filterTime: [
|
||
bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
|
||
bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
|
||
],
|
||
|
||
/* 工具参数 */
|
||
tools: {
|
||
loading: false, // 是否显示table加载动画
|
||
showCustomTableTitle: false, // 自定义列弹框是否显示
|
||
customTableTitle: [] // 自定义列工具的数据
|
||
},
|
||
tableTitle: [],
|
||
showIntroduce: true,
|
||
defaultChartVisible: true,
|
||
defaultTableVisible: true,
|
||
chartVisible: true,
|
||
tableVisible: true,
|
||
pageObj: {
|
||
pageNo: 1,
|
||
pageSize: this.$CONSTANTS.defaultPageSize,
|
||
total: 0
|
||
},
|
||
tableData: [],
|
||
saveDisabled: true,
|
||
panelData: [],
|
||
chartUnit: 0,
|
||
historyParam: { useHistory: true, key: 'expore-history' },
|
||
chart: {},
|
||
metricOptions: []
|
||
}
|
||
},
|
||
created () {
|
||
this.getPanelData()
|
||
this.queryMetrics()
|
||
this.promqlKeys.push(getUUID())
|
||
},
|
||
methods: {
|
||
pageNo (val) {
|
||
this.pageObj.pageNo = val
|
||
this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
|
||
},
|
||
pageSize (val) {
|
||
this.pageObj.pageSize = val
|
||
this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
|
||
},
|
||
filterShowData (source, pageObj) {
|
||
return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
|
||
},
|
||
chartUnitChange: function (unit) {
|
||
this.chartUnit = unit
|
||
this.$nextTick(() => {
|
||
this.expressionChange()
|
||
})
|
||
},
|
||
queryChartData: function () {
|
||
this.$refs.exploreChart.startLoading()
|
||
setTimeout(() => {
|
||
if (this.expressions.length > 0) {
|
||
const requestArr = []
|
||
const promqlInputIndexs = []
|
||
const queryExpression = []
|
||
this.expressions.forEach((item, index) => {
|
||
if (item != '') {
|
||
const step = bus.getStep(this.filterTime[0], this.filterTime[1])
|
||
promqlInputIndexs.push(index)
|
||
queryExpression.push(item)
|
||
requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step))
|
||
}
|
||
})
|
||
if (requestArr.length > 0) {
|
||
this.showIntroduce = false
|
||
this.saveDisabled = false
|
||
}
|
||
axios.all(requestArr).then(res => {
|
||
const series = []
|
||
const legend = []
|
||
if (res.length > 0) {
|
||
res.forEach((response, index) => {
|
||
const promqlIndex = promqlInputIndexs[index]
|
||
if (response.data && response.status == 'success') {
|
||
const data = response.data.result
|
||
if ((!data || data.length < 1) && response.message) {
|
||
this.$refs['promql-' + promqlIndex][0].setError(response.message)
|
||
return
|
||
}
|
||
data.forEach((result, i) => {
|
||
const seriesItem = {
|
||
name: '',
|
||
symbol: 'emptyCircle', // 去掉点
|
||
symbolSize: [2, 2],
|
||
showSymbol: false,
|
||
smooth: 0.2, // 曲线变平滑
|
||
data: [],
|
||
lineStyle: {
|
||
width: 1,
|
||
opacity: 0.9
|
||
},
|
||
type: 'line'
|
||
}
|
||
let legendName = ''
|
||
seriesItem.data = result.values.map((item) => {
|
||
return [item[0] * 1000, item[1]]
|
||
})
|
||
if (result.metric && Object.keys(result.metric).length > 0) {
|
||
const metric = Object.assign({}, result.metric)
|
||
seriesItem.name += metric.__name__ ? metric.__name__ : ''
|
||
seriesItem.name += '{'
|
||
delete metric.__name__
|
||
for (const key in metric) {
|
||
seriesItem.name += key + '=' + '"' + metric[key] + '",'
|
||
}
|
||
legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
|
||
legendName += '}'
|
||
} else {
|
||
legendName = queryExpression[index]
|
||
}
|
||
seriesItem.name = legendName + '-' + index
|
||
series.push(seriesItem)
|
||
legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
|
||
})
|
||
|
||
this.$refs['promql-' + promqlIndex][0].setError('')
|
||
} else {
|
||
// console.log(response)
|
||
this.$refs['promql-' + promqlIndex][0].setError(response.error)
|
||
}
|
||
})
|
||
|
||
this.$refs.exploreChart.setLegend(legend)
|
||
this.$refs.exploreChart.setRandomColors(series.length)
|
||
this.$refs.exploreChart.setSeries(series)
|
||
this.defaultChartVisible = true
|
||
}
|
||
this.$refs.exploreChart.endLoading()
|
||
})
|
||
}
|
||
}, 200)
|
||
},
|
||
queryTableData () {
|
||
this.tools.loading = true
|
||
setTimeout(() => {
|
||
if (this.expressions.length > 0) {
|
||
const requestArr = []
|
||
this.expressions.forEach((item, index) => {
|
||
if (item !== '') {
|
||
requestArr.push(this.$get('/prom/api/v1/query?query=' + item))
|
||
}
|
||
})
|
||
if (requestArr.length > 0) {
|
||
this.showIntroduce = false
|
||
}
|
||
axios.all(requestArr).then(res => {
|
||
const tData = []
|
||
const tLabels = []
|
||
if (res.length > 0) {
|
||
this.tableData = []
|
||
this.tableTitle = []
|
||
res.forEach((response, index) => {
|
||
if (response.data && response.status === 'success') {
|
||
const data = response.data.result
|
||
if (data) {
|
||
data.forEach((result, i) => {
|
||
const metrics = Object.assign({}, result.metric)
|
||
this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit).compute(result.value[1], null, 2))
|
||
for (const key in metrics) {
|
||
const label = {
|
||
label: key === '__name__' ? 'metric' : key,
|
||
prop: key,
|
||
show: true
|
||
}
|
||
const temp = tLabels.find((item, index) => {
|
||
return item.prop == label.prop
|
||
})
|
||
if (!temp) {
|
||
tLabels.push(label)
|
||
}
|
||
}
|
||
tData.push(metrics)
|
||
})
|
||
}
|
||
}
|
||
tLabels.sort((a, b) => {
|
||
return a.prop.charCodeAt(0) - b.prop.charCodeAt(0)
|
||
})
|
||
})
|
||
if (tData.length > 0) {
|
||
this.storedTableData = Object.assign([], tData)
|
||
this.pageObj.total = this.storedTableData.length
|
||
this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
|
||
this.tableTitle = Object.assign([], tLabels)
|
||
this.tools.customTableTitle = Object.assign([], tLabels)
|
||
this.defaultTableVisible = true
|
||
} else {
|
||
// this.defaultTableVisible = false;
|
||
}
|
||
}
|
||
this.tools.loading = false
|
||
})
|
||
}
|
||
}, 200)
|
||
},
|
||
expressionChange: function () {
|
||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||
// console.log(this.filterTime,nowTimeType);
|
||
this.setSearchTime(nowTimeType.type, nowTimeType.value)
|
||
if (this.expressions && this.expressions.length >= 1) {
|
||
this.queryTableData()
|
||
this.queryChartData()
|
||
this.storeHistory()
|
||
}
|
||
},
|
||
setSearchTime (type, val) { // 设置searchTime
|
||
if (type === 'minute') {
|
||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
|
||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||
this.$set(this.filterTime, 0, startTime)
|
||
this.$set(this.filterTime, 1, endTime)
|
||
this.$set(this.filterTime, 2, val + 'm')
|
||
} else if (type === 'hour') {
|
||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
|
||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||
this.$set(this.filterTime, 0, startTime)
|
||
this.$set(this.filterTime, 1, endTime)
|
||
this.$set(this.filterTime, 2, val + 'h')
|
||
} else if (type === 'date') {
|
||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
|
||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||
this.$set(this.filterTime, 0, startTime)
|
||
this.$set(this.filterTime, 1, endTime)
|
||
this.$set(this.filterTime, 2, val + 'd')
|
||
}
|
||
this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
|
||
},
|
||
storeHistory: function () {
|
||
const expire = 24
|
||
const historyJson = localStorage.getItem(this.historyParam.key)
|
||
const expressions = this.expressions.filter(item => {
|
||
return item && item != ''
|
||
})
|
||
const username = sessionStorage.getItem('nz-username')
|
||
if (historyJson && historyJson != 'undefined' && historyJson != '') {
|
||
const historyObj = JSON.parse(historyJson)
|
||
let history = historyObj[username]
|
||
if (history) {
|
||
// 过滤过期表达式
|
||
history = history.filter(item => {
|
||
return item.time + item.expire >= new Date().getTime()
|
||
})
|
||
let repeat = history.filter(item => {
|
||
return expressions.includes(item.insertText)
|
||
})
|
||
const old = history.filter(item => {
|
||
return !expressions.includes(item.insertText)
|
||
})
|
||
|
||
const freshExpression = expressions.filter(item => {
|
||
const find = history.find(t => { return t.insertText == item })
|
||
return !find
|
||
})
|
||
|
||
repeat = repeat.map(item => {
|
||
item.time = new Date().getTime()
|
||
item.num += 1
|
||
item.documentation = this.$t('dashboard.metricPreview.historyTip', { time: item.num, hour: 24 })
|
||
return item
|
||
})
|
||
|
||
const fresh = freshExpression.map(item => {
|
||
return {
|
||
label: item,
|
||
insertText: item,
|
||
documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
|
||
num: 1,
|
||
time: new Date().getTime(),
|
||
expire: expire * 60 * 60 * 1000
|
||
}
|
||
})
|
||
|
||
historyObj[username] = fresh.concat(repeat).concat(old)
|
||
} else {
|
||
const history = expressions.map(item => {
|
||
return {
|
||
label: item,
|
||
insertText: item,
|
||
documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
|
||
num: 1,
|
||
time: new Date().getTime(),
|
||
expire: expire * 60 * 60 * 1000
|
||
}
|
||
})
|
||
historyObj[username] = history
|
||
}
|
||
localStorage.setItem(this.historyParam.key, JSON.stringify(historyObj))
|
||
} else {
|
||
const history = expressions.map(item => {
|
||
return {
|
||
label: item,
|
||
insertText: item,
|
||
documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
|
||
num: 1,
|
||
time: new Date().getTime(),
|
||
expire: expire * 60 * 60 * 1000
|
||
}
|
||
})
|
||
if (history && history.length > 0) {
|
||
const stored = {}
|
||
stored[username] = history
|
||
localStorage.setItem(this.historyParam.key, JSON.stringify(stored))
|
||
}
|
||
}
|
||
},
|
||
addExpression (index) {
|
||
this.expressions.splice(index + 1, 0, '')
|
||
this.promqlKeys.splice(index + 1, 0, getUUID())
|
||
this.promqlCount++
|
||
},
|
||
copyExpression (index) {
|
||
this.expressions.push(this.expressions[index])
|
||
this.promqlKeys.push(getUUID())
|
||
this.promqlCount++
|
||
},
|
||
removeExpression (index) {
|
||
if (this.promqlCount > 1) {
|
||
this.expressions.splice(index, 1)
|
||
this.promqlKeys.splice(index, 1)
|
||
this.promqlCount--
|
||
}
|
||
},
|
||
changeChartVisible: function () {
|
||
this.chartVisible = !this.chartVisible
|
||
},
|
||
changeTableVisible: function () {
|
||
this.tableVisible = !this.tableVisible
|
||
},
|
||
handleBox (show) {
|
||
this.rightBox.show = show
|
||
},
|
||
saveChart () {
|
||
const chart = {
|
||
name: '',
|
||
type: 'line',
|
||
span: 12,
|
||
height: '400',
|
||
unit: this.chartUnit,
|
||
param: {
|
||
url: '',
|
||
threshold: ''
|
||
},
|
||
elements: [],
|
||
panel: '',
|
||
sync: 0,
|
||
groupId: '',
|
||
remark: '',
|
||
}
|
||
this.expressions.forEach((exp) => {
|
||
chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '' })
|
||
})
|
||
this.chart = chart
|
||
this.rightBox.show = true
|
||
},
|
||
createSuccess (type, response, param, panel) { // 添加chart成功
|
||
this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'success'
|
||
}).then(() => {
|
||
bus.$emit('menu-change', 'panel')
|
||
this.$store.commit('panelShowPanelChange', panel)
|
||
this.$router.push({
|
||
path: '/panel',
|
||
query: {
|
||
t: +new Date()
|
||
}
|
||
})
|
||
})
|
||
},
|
||
getPanelData () { // 获取panel数据
|
||
this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
this.panelData = response.data.list
|
||
}
|
||
})
|
||
},
|
||
jumpTo (data, id) {
|
||
bus.$emit('menu-change', data)
|
||
this.$router.push({
|
||
path: '/' + data,
|
||
query: {
|
||
t: +new Date()
|
||
}
|
||
})
|
||
},
|
||
queryMetrics () {
|
||
this.metricOptions = []
|
||
this.$get('prom/api/v1/label/__name__/values').then(response => {
|
||
if (response.status == 'success') {
|
||
const metrics = response.data.sort()
|
||
const metricMap = new Map()
|
||
metrics.forEach((item) => {
|
||
let key = ''
|
||
if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
|
||
key = item.split('_')[0]
|
||
} else if (/^_\w*/.test(item)) {
|
||
key = ' '
|
||
} else {
|
||
key = item
|
||
}
|
||
if (metricMap.get(key)) {
|
||
const values = metricMap.get(key)
|
||
values.push({ label: item, value: item })
|
||
} else {
|
||
const values = [{ label: item, value: item }]
|
||
metricMap.set(key, values)
|
||
}
|
||
// this.metricStore.push({label:item,value:item,insertText:item})
|
||
})
|
||
for (const key of metricMap.keys()) {
|
||
const option = {
|
||
label: key,
|
||
value: key
|
||
}
|
||
if (metricMap.get(key) && metricMap.get(key).length > 1) {
|
||
option.children = metricMap.get(key)
|
||
}
|
||
this.metricOptions.push(option)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getMetricOptions () {
|
||
return this.metricOptions
|
||
}
|
||
},
|
||
watch: {
|
||
promqlCount: function (n, o) {
|
||
this.expressionChange()
|
||
},
|
||
expressions: {
|
||
immediate: true,
|
||
handler: function (n, o) {
|
||
if (n.length == 1 && (!n[0] || n[0] == '')) {
|
||
this.showIntroduce = true
|
||
} else if (n.length > 1) {
|
||
const temp = n.find((item, index) => {
|
||
return item != ''
|
||
})
|
||
if (!temp) {
|
||
this.showIntroduce = true
|
||
} else {
|
||
this.showIntroduce = false
|
||
}
|
||
} else {
|
||
this.showIntroduce = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.explore {
|
||
height: 100%;
|
||
}
|
||
|
||
.explore .chart-room {
|
||
width: 100%;
|
||
height: 400px
|
||
}
|
||
|
||
.explore .chart-view, .table-view {
|
||
padding: 22px 10px 10px 10px;
|
||
border: 1px solid lightgrey;
|
||
box-sizing: inherit;
|
||
margin-bottom: 5px;
|
||
transition: height 1s;
|
||
}
|
||
.explore .chart-view:hover,.explore .table-view:hover {
|
||
cursor: default;
|
||
}
|
||
.shrink-view {
|
||
height: 30px;
|
||
|
||
.view-title i {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.chart-room, .table-room {
|
||
height: 0px;
|
||
visibility: hidden;
|
||
}
|
||
|
||
}
|
||
.table-room {
|
||
position: relative;
|
||
margin-top: 10px;
|
||
}
|
||
.explore .view-title {
|
||
font-weight: 500;
|
||
margin-right: 8px;
|
||
font-size: 14px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.introduce-view .info-room {
|
||
padding: 24px;
|
||
background-color: #e9edf2;
|
||
border-top: 3px solid #3274d9;
|
||
margin-bottom: 16px;
|
||
-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 {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
.right-margin{
|
||
margin-right: 15px;
|
||
}
|
||
/*外部引用 样式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 .content-divider{
|
||
height: 1px;
|
||
width:100%;
|
||
border-bottom: 2px solid #C0C4CC;
|
||
margin: 5px 0px;
|
||
}
|
||
|
||
.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: 22px;
|
||
}
|
||
|
||
.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 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 {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|