gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-2802 feat： alertMessageInfo 支出 dashboard

Browse Source
This commit is contained in:
zhangyu
2023-04-24 16:31:50 +08:00
parent 9db94446d6
commit fccbf70c58
9 changed files with 144 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -16,7 +16,7 @@
display: flex;
position: relative;
flex-direction: column;
&:hover .chart-header.chart-header--float{
&:hover > .chart-header.chart-header--float{
background-color: $--chart-title-hover-background-color;
height: 39px;
opacity: 1;

54
nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
View File

@@ -51,16 +51,23 @@
display: flex;
flex-direction: column;
.nz-chart {
.info-box-left-top {
height: 36%;
margin-bottom: 20px;
border: 1px solid $--border-color-light;
flex: none;
.nz-chart{
height: 100%;
}
}
.nz-chart{
height: 100%;
padding-bottom: 0;
}
.alert-message-info-tab {
height: 61.8%;
flex: 1;
flex-shrink: 0;
.alert-label-header-title3 {
display: none;
@@ -401,6 +408,49 @@
.alert-message-info-tab {
.el-tabs.el-tabs--card.el-tabs--top {
.el-tabs__content {
height: 100%;
width: 100%;
overflow: hidden;
box-sizing: border-box;
.el-tab-pane {
height: 100%;
width: 100%;
.vue-grid-layout {
padding-bottom: 0;
}
}
.alert-message-info-dashboard {
height: 100%;
width: 100%;
overflow: hidden;
box-sizing: border-box;
.integration-dashboard{
box-sizing: border-box;
height: 100%;
.dashboard-container{
height: 100%;
.table-list{
height: 100%;
.no-data {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
margin-top: -54px;
.no-data-div {
color: $--color-text-regular;
}
}
}
}
.right-box.right-box-dashboard-temp{
top: 0;
height: 100%;
z-index: 2001;
}
}
}
#pane-alertRule{
.alert-rule-nfo{
.alert-rule-box{

2
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -768,10 +768,10 @@ export default {
// 当前设备是移动设备
this.isPhone = true
}
this.noData = !n || n.length < 1
this.gridLayoutShow = false
this.firstInit = true
this.gridLayoutLoading = true
this.noData = !n || n.length < 1
if (!this.isGroup) {
const position = getLayoutPosition(n)
this.$store.commit('setChartLastPosition', position)

37
nezha-fronted/src/components/common/alert/alertMessageInfo.vue
View File

@@ -23,25 +23,28 @@
<!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
<div class="alert-message-info-box">
<div class="info-box-left">
<chart
ref="chart"
v-if="chartInfo.alertRule && chartInfo.alertRule.type !== 3"
:chart-data="chartData"
:chart-info="chartInfo"
:panelLock="panelLock"
:filter="filter"
:from="from"
@refreshLogs="refreshLogs"
:show-header="showHeader"
:isError="isError"
:loading="loading"
:minusTime="minusTime"
:multipleTime="multipleTime"
:isFullscreen="isFullscreen"
:showAllData="showAllData"
></chart>
<div class="info-box-left-top">
<chart
ref="chart"
v-if="chartInfo.alertRule && chartInfo.alertRule.type !== 3"
:chart-data="chartData"
:chart-info="chartInfo"
:panelLock="panelLock"
:filter="filter"
:from="from"
@refreshLogs="refreshLogs"
:show-header="showHeader"
:isError="isError"
:loading="loading"
:minusTime="minusTime"
:multipleTime="multipleTime"
:isFullscreen="isFullscreen"
:showAllData="showAllData"
></chart>
</div>
<alertMessageInfoTab
class="alert-message-info-tab"
:time="time"
:noData="tabNoData"
:infoData="infoData" />
</div>

31
nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
View File

@@ -5,6 +5,9 @@
<div v-if="item.key === 'detail' && activeName === 'detail'">
<alert-message-info-detail :info-data="infoData"/>
</div>
<div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">
<dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" :from="fromRoute.dashboard"></dashboard>
</div>
<div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
<!-- <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
<alertLabel
@@ -42,6 +45,8 @@ import alertMessageInfoDetail from '@/components/common/alert/alertMessageInfoDe
import searchItemInfo from '@/components/common/globalSearch/searchItemInfo'
import alertLabel from '@/components/common/alert/alertLabel3'
import alertRuleInfo from '@/components/common/alert/alertRuleInfo2'
import dashboard from '@/components/page/integration/integration-tabs/dashboard'
import { fromRoute } from '@/components/common/js/constants'
// import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'alertMessageInfoTab',
@@ -49,7 +54,8 @@ export default {
alertMessageInfoDetail,
searchItemInfo,
alertLabel,
alertRuleInfo
alertRuleInfo,
dashboard
},
// mixins: [alertLabelMixin],
props: {
@@ -59,7 +65,8 @@ export default {
nodata: {
type: Boolean,
default: false
}
},
time: {}
},
computed: {
severityData () {
@@ -68,6 +75,7 @@ export default {
},
data () {
return {
fromRoute,
activeName: 'detail',
cardNames: [{
key: 'detail',
@@ -91,7 +99,8 @@ export default {
}, {
key: 'project',
label: this.$t('project.project.projectName')
}]
}],
timeRange: []
}
},
watch: {
@@ -108,6 +117,14 @@ export default {
this.cardNames.push(item)
}
})
// && n.alertRule.dashboardId
if (n.alertRule) {
n.alertRule.dashboardId = 1487
this.cardNames.push({
key: 'dashboard',
label: this.$t('dashboard')
})
}
if (n.alertRule && n.alertRule.trbShot && n.alertRule.trbShot != '<div class="editor-core ql-container ql-snow"><div class="ql-editor"><p><br></p></div></div>') {
this.cardNames.push({
key: 'trbShot',
@@ -116,6 +133,14 @@ export default {
}
}
}
},
time: {
immediate: true,
handler (n) {
if (n && n.length) {
this.timeRange = [n[0] * 1000, n[1] * 1000]
}
}
}
},
mounted () {

2
nezha-fronted/src/components/common/searchBox/searchBox.vue
View File

@@ -387,7 +387,6 @@ export default {
this.keyShow = false // key 的下拉
this.symbolShow = false // symbol 的下拉
this.valueShow = false // value 的下拉
console.log(key)
if (key === 'symbol') {
this.setSymBolList()
this.symbolShow = true
@@ -562,7 +561,6 @@ export default {
},
searchStr: {
handler (n, o) {
console.log(n, o)
// 2 3
const index = this.searchStr.indexOf(':')
if (index === -1) {

44
nezha-fronted/src/components/page/integration/integration-tabs/dashboard.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="integration-dashboard">
<div class="integration-tool" style="padding: 0 10px;">
<h3>{{showPanel.name}}</h3>
<h3 v-if="showName">{{showPanel.name}}</h3>
<button class="nz-btn el-button--small nz-btn-style-normal" @click="importFn">
<button class="nz-btn el-button--small nz-btn-style-normal" @click="importFn" v-if="showImport">
<i class="nz-icon nz-icon-upload"></i>
<span>{{$t('overall.importExcel')}}</span>
</button>
@@ -18,13 +18,15 @@
<chart-list
ref="chartList"
:variablesInit="variablesInit"
:timeRange="time"
name="dashboard"
:dashboardId="showPanel.id"
:data-list="dataList"
:is-export-html="false"
:nowTimeType="nowTimeType"
:from="fromRoute.integration"
:from="from"
:time-range="searchTime"
:show-tool="false"
:loading="chartListLoading"
></chart-list>
</div>
@@ -51,7 +53,24 @@ import chartDataFormat from '@/components/chart/chartDataFormat'
export default {
name: 'integration-dashboard',
props: {
tempId: Number
tempId: Number,
showImport: {
type: Boolean,
default: true
},
showName: {
type: Boolean,
default: true
},
urlType: {
type: String,
default: 'template'
},
time: {},
from: {
type: String,
default: fromRoute.integration
}
},
computed: {
chartRightBoxShow () {
@@ -145,7 +164,7 @@ export default {
},
// 公用操作
getTableData () {
this.$get('visual/dashboard', { type: 'template', ids: this.tempId }).then(response => {
this.$get('visual/dashboard', { type: this.urlType, ids: this.tempId }).then(response => {
if (response.code === 200) {
this.panelData = response.data.list
if (this.panelData.length > 0) {
@@ -174,9 +193,22 @@ export default {
mounted () {
this.scrollbarWrap = this.$refs.dashboardScrollbar
this.onScroll()
this.getTableData()
// this.getTableData()
},
watch: {
urlType: { // 判断请求的是temp 还是正常访问
immediate: true,
handler () {}
},
time: { // 时间范围
immediate: true,
handler () {
if (this.time) {
this.getTableData()
this.searchTime = this.time
}
}
},
// 监听图表联动配置
'showPanel.param.chartShare': {
handler (value) {

5
nezha-fronted/src/components/page/integration/integration-tabs/integration-tabs.vue
View File

@@ -9,7 +9,7 @@
<manual v-if="tabId==='manual'"></manual>
<!-- module -->
<configuration v-if="tabId==='configuration'" :configuration="detailsObj.configuration"></configuration>
<dashboard v-if="tabId==='dashboard'" :tempId="detailsObj.tempId"></dashboard>
<dashboard v-if="tabId==='dashboard'" :tempId="detailsObj.tempId" :time="time"></dashboard>
<!-- <alert v-if="tabId==='alert'" :moduleId="detailsObj.id"></alert>-->
<metric v-if="tabId==='metric'" :moduleId="detailsObj.id"></metric>
</div>
@@ -45,7 +45,8 @@ export default {
data () {
return {
tabs: [],
tabId: ''
tabId: '',
time: [0, 15]
}
},
methods: {

3
nezha-fronted/src/components/page/monitor/project/projectList.vue
View File

@@ -134,7 +134,6 @@ export default {
},
methods: {
getTableData (params) {
console.log('213123123')
if (params && Object.keys(params).length > 0) {
for (const key in params) {
this.$set(this.searchLabel, key, params[key])
@@ -197,9 +196,7 @@ export default {
})
},
delCallBack (id) {
console.log(id, 'id')
if (id.indexOf(this.$store.state.currentProject.id) !== -1) {
console.log(123, id)
this.$store.commit('currentProjectChange', {
id: '',
name: '',