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

NEZ-1514 feat：全局搜索功能(90%)

Browse Source
This commit is contained in:
zhangyu
2022-01-17 14:25:39 +08:00
parent dd5300d5a1
commit 44002bf222
12 changed files with 145 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss
View File

@@ -96,6 +96,7 @@
}
.list-item{
height: 64px;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
@@ -115,6 +116,18 @@
vertical-align: middle
}
}
.is-jump{
position: absolute;
right: 20px;
top: 20px;
padding: 0;
width: 24px;
height: 24px;
display: none;
.el-loading-mask{
transform: scale(0.5);
}
}
.list-item-content{
overflow: hidden;
white-space: nowrap;
@@ -137,6 +150,9 @@
}
.lise-item-active {
background: $--table-row-hover-background-color;
.is-jump{
display: inline-block;
}
}
}
.global-search-footer {

7
nezha-fronted/src/assets/css/components/common/globalSearch/searchItemInfo.scss
View File

@@ -43,7 +43,7 @@
display: flex;
height: 47px;
.search-item-key{
width: 100px;
width: 120px;
font-size: 14px;
line-height: 47px;
color:$--color-text-regular;
@@ -52,12 +52,15 @@
}
.search-item-value-box{
line-height: 47px;
width: calc(100% - 100px);
width: calc(100% - 120px);
display: flex;
.nz-icon{
line-height: 47px;
margin-right: 10px;
}
.nz-icon-guzhangshuju{
color: $--color-primary;
}
.search-item-value{
width: calc(100% - 30px);
font-size: 14px;

3
nezha-fronted/src/components/chart/chart/grid/GridLayout.vue
View File

@@ -260,11 +260,8 @@ export default {
layoutUpdate () {
if (this.layout !== undefined && this.originalLayout !== null) {
if (this.layout.length !== this.originalLayout.length) {
// console.log("### LAYOUT UPDATE!", this.layout.length, this.originalLayout.length);
const diff = this.findDifference(this.layout, this.originalLayout)
if (diff.length > 0) {
// console.log(diff);
if (this.layout.length > this.originalLayout.length) {
this.originalLayout = this.originalLayout.concat(diff)
} else {

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

@@ -219,7 +219,6 @@ export default {
},
changeGroupHeight (copyList, group, flag) {
const height = getGroupHeight(copyList)
// console.log(this.$refs.layout)
const groupFind = this.copyDataList.find(item => item.id == group.id)
if (group && groupFind) {
groupFind.height = groupFind.h = height + this.headerHPadding
@@ -279,7 +278,6 @@ export default {
panelId: this.panelId,
charts: charts
}
// console.log(this.copyDataList)
this.$put('/visual/panel/chart/weights', params).then(() => {
const position = getLayoutPosition(this.copyDataList)
this.$store.commit('setChartLastPosition', position)

1
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -1748,7 +1748,6 @@ export default {
imgArr.push({ ...item })
})
Promise.all(promiseArr).then((res2, header) => {
// console.log(res2)
this.iconArray = [...res.data.list]
this.iconArray.forEach((item, index) => {
item.image = res2[index].data

68
nezha-fronted/src/components/common/globalSearch/globalSearch.vue
View File

@@ -57,6 +57,9 @@
<div class="list-item-sub" v-if="item.sub">
{{ item.sub }}
</div>
<div class="is-jump" v-loading="jumpLoading">
<i class="nz-icon nz-icon-huiche"></i>
</div>
</li>
<li class="list-item" v-if="nextLoading" v-loading="nextLoading"></li>
<!-- <li class="list-item" v-if="noMore&&!nextLoading">没有更多了</li>-->
@@ -133,6 +136,7 @@ export default {
searchStr: '',
loading: false,
nextLoading: false,
jumpLoading: false,
selectIndex: '',
tableData: [],
isNoData: false,
@@ -192,6 +196,7 @@ export default {
this.firstShow = true
this.selectIndex = 0
this.pageObj.pageNo = 1
this.jumpLoading = false
this.tableData = []
this.$store.commit('setGlobalShow', false)
this.scope.forEach((item) => {
@@ -200,7 +205,6 @@ export default {
this.unbindEvent()
},
selectIcon (item) {
// console.log(item)
switch (item.type) {
case 'asset' : return 'nz-icon-overview-project'
case 'datacenter' : return 'nz-icon-model'
@@ -228,7 +232,6 @@ export default {
const offsetTop = liBox.offsetTop - ulBox.offsetTop
const scrollTop = ulBox.scrollTop
// liBox.focus()
// console.log(height, liHeight, offsetTop, scrollTop)
if (offsetTop - scrollTop < 0) {
ulBox.scrollTop = offsetTop
} else if (offsetTop - scrollTop >= height - liHeight) {
@@ -236,6 +239,9 @@ export default {
}
},
changeSelectIndex (index) {
if (this.jumpLoading) {
return
}
if (this.isKeyDown) {
this.getItemInfo()
return
@@ -244,7 +250,9 @@ export default {
this.getItemInfo()
},
keyDown (e) {
// console.log(e, e.target, e.keyCode)
if (this.jumpLoading) {
return
}
if (e.keyCode === 13) {
this.jumpTo()
}
@@ -281,12 +289,61 @@ export default {
}, 300)
},
jumpTo () {
this.jumpLoading = true
const routerPath = this.getRouterPath()
const params = {
table: this.tableData[this.selectIndex].type,
id: this.tableData[this.selectIndex].id,
pageSize: routerPath.pageSize
}
this.$get('/stat/rownum', params).then(res => {
if (res.code === 200) {
this.close()
this.$router.push({
path: routerPath.route,
query: {
pageNo: res.data.pageNo,
pageSize: res.data.pageSize,
rownum: res.data.rownum
}
})
} else {
this.$message.error(res.msg)
this.jumpLoading = false
}
})
},
getRouterPath () {
const type = this.tableData[this.selectIndex].type
let tableId = ''
let route = '/'
if (type === 'datacenter') {
tableId = 'dcTable'
route += 'dc'
} else if (type === 'alertRule') {
tableId = 'alertRuleTable'
route += 'alertRule'
} else if (type === 'asset') {
tableId = type + 'Table'
route += 'asset'
} else {
tableId = type + 'Table'
route += 'monitor/' + type
}
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + tableId)
if (!(pageSize && pageSize !== 'undefined')) {
pageSize = 20
}
return {
pageSize,
route
}
},
getItemInfo () {
this.obj = {}
},
searchAll () {
// this.getSeverityData()
if (this.searchTimer) {
clearInterval(this.searchTimer)
this.searchTimer = null
@@ -371,6 +428,9 @@ export default {
})
}
},
mounted () {
this.getSeverityData()
},
destroyed () {
window.removeEventListener('keydown', this.keyDown)
}

64
nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
View File

@@ -59,7 +59,7 @@
<span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
</div>
<div class="search-item-value-box" v-else>
<i v-if="item.icon" class="nz-icon" :class="searchItemClass(item)"/>
<i v-if="item.icon" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<span class="search-item-value">
{{getPathContent(item.key)}}
</span>
@@ -72,6 +72,7 @@
<script>
import lodash from 'lodash'
import chartDataFormat from '@/components/charts/chartDataFormat'
export default {
name: 'searchItemInfo',
props: {
@@ -259,6 +260,26 @@ export default {
}, {
key: 'type',
label: this.$t('alert.type')
}, {
key: 'severityId',
label: this.$t('alert.severity'),
color: this.severityColor,
icon: 'nz-icon nz-icon-circle'
}, {
key: 'expr',
label: this.$t('alert.config.expr')
}, {
key: 'alertNum',
icon: 'nz-icon-overview-alert',
label: this.$t('overall.alert')
}, {
key: 'trbShot',
icon: 'nz-icon-guzhangshuju',
label: this.$t('alert.config.trbShot')
}, {
key: 'state',
label: this.$t('overall.state'),
icon: 'nz-icon nz-icon-circle'
}
]
},
@@ -324,9 +345,7 @@ export default {
this.$get('/alert/rule/' + this.obj.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.severityData.forEach(item => {
this.severityColor = item.color
})
this.severityColor = this.severityData.find(item => res.data.severityId == item.id).color
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
@@ -348,14 +367,43 @@ export default {
if (item.key === 'pingInfo.rtt') {
str += this.alertLabelData.pingInfo.status ? 'red-bg' : 'green-bg'
}
if (item.key === 'state' && this.obj.type === 'alertrule') {
str += !this.alertLabelData.state ? 'red' : 'green'
}
return str
},
searchItemStyle (item) {
const style = {}
if (item.key === 'severityId' && this.obj.type === 'alertrule') {
style.color = this.severityColor
style['font-size'] = '12px'
style['margin-right'] = '5px'
}
return style
},
alertruleStr () {
const arr = [this.$t('project.metrics.metrics'), this.$t('overall.logs'), 'SNMP trap']
if (this.alertLabelData.type) {
return arr[this.alertLabelData.type - 1]
} else {
return '--'
}
},
getPathContent (key) {
let str = lodash.get(this.alertLabelData, key, '--')
str += ''
if (key === 'pingInfo.rtt' && str) {
str += ' ms'
}
if (key === 'type' && this.obj.type === 'alertrule') {
str = this.alertruleStr()
}
if (key === 'expr' && this.obj.type === 'alertrule' && this.alertRuleData && this.alertRuleData.expr) {
str = this.alertRuleData.expr + this.alertRuleData.operator + this.formatThreshold(this.alertRuleData.threshold, this.alertRuleData.unit)
}
if (key === 'state' && this.obj.type === 'alertrule') {
str = this.alertLabelData.state ? this.$t('overall.enabled') : this.$t('overall.disabled')
}
return str || '--'
},
selectIcon (item) {
@@ -380,6 +428,14 @@ export default {
case 'alertrule' : str += '<span>Alert</span> <span>/</span> <span>Alert rule</span>'; break
}
return str
},
formatThreshold (value, unit) {
const unitMethod = chartDataFormat.getUnit(unit)
if (unitMethod && value) {
return unitMethod.compute(value, null, 2)
} else {
return value
}
}
}
}

1
nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
View File

@@ -122,7 +122,6 @@ export default {
self.menus = response.data.menus
self.selectedIds = response.data.selectedIds
self.menus[0].children[0].disabled = true
console.log(self.menus[0].children[0])
} else {
self.$message.error('load menu faild')
}

1
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -766,7 +766,6 @@ export default {
if (response.data.purchaseDate) {
response.data.purchaseDate += ' 00:00:00'
response.data.purchaseDate = new Date(response.data.purchaseDate)
console.log(response.data.purchaseDate)
}
this.object = response.data
this.rightBox.show = true

1
nezha-fronted/src/components/page/config/system/apiKeyTable.vue
View File

@@ -193,7 +193,6 @@ export default {
},
save: function (obj) {
const copy = JSON.parse(JSON.stringify(obj))
console.log(copy.expireAt)
copy.expireAt = new Date(copy.expireAt).getTime()
copy.expireAt = this.timezoneToUtcTimeStr(copy.expireAt, 'YYYY-MM-DD HH:mm:ss')
if (copy.role) {

1
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -809,7 +809,6 @@ export default {
expressionChange () {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.pageObj.pageNo = 1
// console.log(this.filterTime,nowTimeType);
this.setSearchTime(nowTimeType.type, nowTimeType.value)
if (this.showMetrics) {
if (this.expressions && this.expressions.length >= 1) {

1
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -422,7 +422,6 @@ export default {
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}: </div>`
str += '<div style="padding-left: 10px;">'
let dot = bus.countDecimals(val)
// console.log(dot,val)
if (dot < this.chartDot) {
dot = this.chartDot
} else if (dot > 6) {